Update member cards

2 files changed, 23 insertions, 9 deletions

diff --git a/src/pages/members/[...id].astro b/src/pages/members/[...id].astro
index 8010365..3bf4e3c 100644
--- a/src/pages/members/[...id].astro
+++ b/src/pages/members/[...id].astro
@@ -5,6 +5,7 @@ import MemberCard from '@/components/MemberCard.astro'
 import PageHead from '@/components/PageHead.astro'
 import Layout from '@/layouts/Layout.astro'
 import { getAllMembers, getPostsByAuthor } from '@/lib/data-utils'
+import { render } from 'astro:content'
 
 export async function getStaticPaths() {
   const members = await getAllMembers()
@@ -16,6 +17,7 @@ export async function getStaticPaths() {
 
 const { member } = Astro.props
 const memberPosts = await getPostsByAuthor(member.id)
+const { Content, headings } = await render(member)
 ---
 
 <Layout class="max-w-3xl">
@@ -32,10 +34,16 @@ const memberPosts = await getPostsByAuthor(member.id)
     ]}
   />
 
-  <section>
+  <section
+    class="my-5 grid grid-cols-1 grid-rows-2 justify-items-center gap-6 px-2 md:grid-cols-[16rem_1fr] md:grid-rows-1 md:px-0"
+  >
     <MemberCard member={member} />
+    <article class="prose">
+      <Content />
+    </article>
   </section>
-  <section class="flex flex-col gap-y-4">
+
+  <section class="my-15 flex flex-col gap-y-4">
     <h2 class="text-2xl font-medium">Posts by {member.data.name}</h2>
     {
       memberPosts.length > 0 ? (
diff --git a/src/pages/members/index.astro b/src/pages/members/index.astro
index 04e6d45..c0e568e 100644
--- a/src/pages/members/index.astro
+++ b/src/pages/members/index.astro
@@ -5,21 +5,27 @@ import PageHead from '@/components/PageHead.astro'
 import Layout from '@/layouts/Layout.astro'
 import { getAllMembers } from '@/lib/data-utils'
 
-const members = await getAllMembers()
+const members = (await getAllMembers()).sort((a, b) =>
+  a.data.name.localeCompare(b.data.name),
+)
 ---
 
-<Layout class="max-w-3xl">
+<Layout class="max-w-4xl">
   <PageHead slot="head" title="Members" />
+
   <Breadcrumbs items={[{ label: 'Members', icon: 'lucide:users' }]} />
+  <div class="border-border text-muted-foreground rounded-2xl border p-4">
+    <strong>Viewer discretion advised.</strong>
+    <br /> Members have the freedom to customise their profiles. Some of us actually
+    exercise it.
+  </div>
   {
     members.length > 0 ? (
-      <ul class="flex flex-col gap-4">
+      <div class="flex flex-wrap justify-center gap-4">
         {members.map((member) => (
-          <li>
-            <MemberCard member={member} />
-          </li>
+          <MemberCard member={member} />
         ))}
-      </ul>
+      </div>
     ) : (
       <p class="text-muted-foreground text-center">No members found.</p>
     )