Update member cards

13 files changed, 96 insertions, 20 deletions

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 5024060..c278549 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -27,7 +27,7 @@ import logo from '../../public/static/logo.svg'
       </span>
     </Link>
     <div class="flex items-center gap-4 transition-all">
-      <nav class="flex items-center gap-4 text-sm sm:gap-6">
+      <nav class="flex items-center gap-3 text-sm sm:gap-6">
         {
           NAV_LINKS.map((item) => (
             <Link
diff --git a/src/components/MemberCard.astro b/src/components/MemberCard.astro
index b98e3ee..1d4e9c6 100644
--- a/src/components/MemberCard.astro
+++ b/src/components/MemberCard.astro
@@ -22,13 +22,17 @@ const socialLinks: SocialLink[] = [
   member.data.twitter && { href: member.data.twitter, label: 'Twitter' },
   member.data.linkedin && { href: member.data.linkedin, label: 'LinkedIn' },
   member.data.mail && { href: `mailto:${member.data.mail}`, label: 'Email' },
+  member.data.instagram && {
+    href: `mailto:${member.data.instagram}`,
+    label: 'Instagram',
+  },
 ].filter(Boolean) as SocialLink[]
 ---
 
 <div
-  class="has-[a:hover]:bg-muted/50 overflow-hidden rounded-xl border p-4 transition-colors duration-300 ease-in-out"
+  class="has-[a:hover]:bg-muted/50 w-64 overflow-hidden rounded-xl border p-4 transition-colors duration-300 ease-in-out"
 >
-  <div class="flex flex-wrap gap-4">
+  <div class="flex flex-col items-center gap-4">
     <Link
       href={`/members/${member.id}`}
       class={cn('block', isAuthorPage && 'pointer-events-none')}
@@ -39,23 +43,27 @@ const socialLinks: SocialLink[] = [
         alt={`Avatar of ${name}`}
         fallback={name[0]}
         className={cn(
-          '.:data-[slot="avatar-fallback"]:rounded-md size-32 rounded-md',
+          '.:data-[slot="avatar-fallback"]:rounded-md size-32 rounded-lg',
           !isAuthorPage &&
             'hover:ring-primary transition-shadow duration-300 hover:cursor-pointer hover:ring-2',
         )}
       />
     </Link>
-    <div class="flex grow flex-col justify-between gap-y-4">
+    <div
+      class="flex grow flex-col items-center justify-between gap-y-4 text-center"
+    >
       <div>
-        <div class="flex flex-wrap items-center gap-x-2">
+        <div class="flex flex-col items-center gap-x-2">
           <h3 class="text-lg font-medium">{name}</h3>
           {
             pronouns && (
-              <span class="text-muted-foreground text-sm">({pronouns})</span>
+              <span class="text-muted-foreground font-mono text-xs">
+                {pronouns}
+              </span>
             )
           }
         </div>
-        <p class="text-muted-foreground text-sm">{bio}</p>
+        <p class="text-muted-foreground mt-3 leading-relaxed">{bio}</p>
       </div>
       <SocialIcons links={socialLinks} />
     </div>
diff --git a/src/consts.ts b/src/consts.ts
index c383c10..f5e8992 100644
--- a/src/consts.ts
+++ b/src/consts.ts
@@ -3,7 +3,7 @@ import type { IconMap, SocialLink, Site } from '@/types'
 export const SITE: Site = {
   title: 'FOSSCET',
   description:
-    "We are a community of hackers, builders, and privacy advocates dedicated to Free and Open Source Software.",
+    'We are a community of hackers, builders, and privacy advocates dedicated to Free and Open Source Software.',
   href: 'https://fosscet.codeberg.page/',
   author: 'fosscet',
   locale: 'en-US',
@@ -48,6 +48,7 @@ export const ICON_MAP: IconMap = {
   Codeberg: 'lucide:mountain-snow',
   GitHub: 'lucide:github',
   LinkedIn: 'lucide:linkedin',
+  Instagram: 'lucide:instagram',
   Twitter: 'lucide:twitter',
   Email: 'lucide:mail',
   RSS: 'lucide:rss',
diff --git a/src/content.config.ts b/src/content.config.ts
index 4f61d5c..1bd3526 100644
--- a/src/content.config.ts
+++ b/src/content.config.ts
@@ -44,6 +44,7 @@ const members = defineCollection({
     codeberg: z.string().url().optional(),
     linkedin: z.string().url().optional(),
     discord: z.string().url().optional(),
+    instagram: z.string().url().optional(),
   }),
 })
 
diff --git a/src/content/members/abraham.md b/src/content/members/abraham.md
new file mode 100644
index 0000000..2db458e
--- /dev/null
+++ b/src/content/members/abraham.md
@@ -0,0 +1,9 @@
+---
+name: 'Abraham Jacob Pathil'
+pronouns: 'he/him'
+avatar: 'https://avatars.githubusercontent.com/u/197788589?v=4'
+bio: 'Hello World!'
+github: 'https://github.com/abrahamjpathil'
+linkedin: 'https://www.linkedin.com/in/abraham-jacob-pathil-52b567320/'
+mail: 'abrahamjpathildev@gmail.com'
+---
diff --git a/src/content/members/alan.md b/src/content/members/alan.md
new file mode 100644
index 0000000..2479b1d
--- /dev/null
+++ b/src/content/members/alan.md
@@ -0,0 +1,7 @@
+---
+name: 'Alan Joy'
+pronouns: 'he/he'
+avatar: 'https://upload.wikimedia.org/wikipedia/commons/b/b9/Michael_Jackson_1983_%283x4_cropped%29_%28contrast%29.jpg'
+bio: 'Random thing.'
+mail: 'alanjoy812006@gmail.com'
+---
diff --git a/src/content/members/deepa.md b/src/content/members/deepa.md
new file mode 100644
index 0000000..bea892b
--- /dev/null
+++ b/src/content/members/deepa.md
@@ -0,0 +1,8 @@
+---
+name: 'Deepa Mary Jose'
+pronouns: 'cat/cat'
+avatar: 'https://avatars.githubusercontent.com/u/189462724?v=4'
+bio: 'pspspsps'
+github: 'https://github.com/deepamj'
+linkedin: 'https://www.linkedin.com/in/deepa-mary-jose/'
+---
diff --git a/src/content/members/mrx.md b/src/content/members/mrx.md
new file mode 100644
index 0000000..a92e71e
--- /dev/null
+++ b/src/content/members/mrx.md
@@ -0,0 +1,10 @@
+---
+name: 'Sooraj V'
+pronouns: 'hate/you'
+avatar: 'https://upload.wikimedia.org/wikipedia/commons/5/57/%D0%92%D0%BB%D0%B0%D0%B4%D0%B8%D0%BC%D0%B8%D1%80_%D0%9F%D1%83%D1%82%D0%B8%D0%BD_%2808-03-2024%29_%28cropped%29_%28higher_res%29.jpg'
+bio: 'I contribute bugs.'
+github: 'https://github.com/sooraj-wq'
+linkedin: 'https://www.linkedin.com/in/sooraj-v-952875329/'
+instagram: 'https://www.instagram.com/_sooraj.v_'
+mail: 'tve24cs132@cet.ac.in'
+---
diff --git a/src/content/members/nik.md b/src/content/members/nik.md
index 2786458..0f421e3 100644
--- a/src/content/members/nik.md
+++ b/src/content/members/nik.md
@@ -2,10 +2,18 @@
 name: 'nik'
 pronouns: 'he/him'
 avatar: 'https://avatars.githubusercontent.com/u/70085759?v=4'
-bio: 'Hello World!'
+bio: "git push --force"
 website: 'https://nikw.in'
 github: 'https://github.com/nikhilmwarrier'
 codeberg: 'https://codeberg.org/nikhilmwarrier'
 linkedin: 'https://linkedin.com/in/nikhilmwarrier'
 mail: 'nik@nikw.in'
 ---
+
+> _“Beware of he who would deny you access to information, for in his heart he dreams himself your master.”_   
+> <cite> ~ Commissioner Pravin Lal (Sid Meier’s Alpha Centauri) </cite>
+
+Do you really own your files?  
+The cloud is just someone else's computer.
+  
+Stop being an internet peasant. Try [landchad.net](https://landchad.net/).
diff --git a/src/content/members/theflawlesserror.md b/src/content/members/theflawlesserror.md
new file mode 100644
index 0000000..660d475
--- /dev/null
+++ b/src/content/members/theflawlesserror.md
@@ -0,0 +1,10 @@
+---
+name: 'Johann Thomas Philip'
+pronouns: 'he/him'
+avatar: 'https://avatars.githubusercontent.com/u/175138923?v=4'
+bio: 'Fuck Adobe.'
+github: 'https://github.com/theflawlesserror'
+linkedin: 'https://www.linkedin.com/in/johann-thomas-47031531a/'
+instagram: 'https://www.instagram.com/johann.t.philip'
+mail: 'nik@nikw.in'
+---
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>
     )
diff --git a/src/styles/typography.css b/src/styles/typography.css
index 92c5835..835f61d 100644
--- a/src/styles/typography.css
+++ b/src/styles/typography.css
@@ -78,7 +78,7 @@
     }
 
     :where(a):not(:where(.not-prose, .not-prose *)) {
-      @apply text-foreground decoration-primary hover:decoration-foreground hidden font-medium break-words underline underline-offset-[3px] transition-colors;
+      @apply text-foreground decoration-primary hover:decoration-foreground font-medium break-words underline underline-offset-[3px] transition-colors;
     }
 
     :where(strong):not(:where(.not-prose, .not-prose *)) {