fix: use content-collection for Members section

package.json

@@ -46,7 +46,7 @@
     "@eslint/js": "^9.9.1",
     "@iconify-json/flat-color-icons": "^1.1.11",
     "@iconify-json/tabler": "^1.1.121",
-    "@tailwindcss/typography": "^0.5.15",
+    "@tailwindcss/typography": "^0.5.16",
     "@types/eslint__js": "^8.42.3",
     "@types/js-yaml": "^4.0.9",
     "@types/lodash.merge": "^4.6.9",

src/assets/styles/tailwind.css

@@ -1,6 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@plugin '@tailwindcss/typography';
 
 @font-face {
   font-family: 'pinar';

src/components/widgets/MemberProse.astro

@@ -0,0 +1,16 @@
+---
+
+---
+
+<div
+  class="prose
+  prose-h1:font-bold prose-h1:text-lg prose-h1:text-pfColorFirst
+  prose-h2:font-bold prose-h2:text-lg prose-h2:text-pfColorFirst
+  prose-h3:font-bold prose-h3:text-lg prose-h3:text-pfColorFirst
+  prose-h4:font-bold prose-h4:text-lg prose-h4:text-pfColorFirst
+  prose-p:my-0 prose-p:leading-loose
+  prose-li:my-1
+  max-w-[80vw] flex flex-col text-slate-700 dark:text-slate-400 mb-12 sm:mt-8"
+>
+  <slot />
+</div>

src/components/widgets/StaffCard.astro

@@ -1,28 +1,34 @@
 ---
 import { Icon } from 'astro-icon/components';
 import { Image } from 'astro:assets';
-import type { Member } from '~/types';
 import { getRelativeLocaleUrl } from 'astro:i18n';
+import type { CollectionEntry } from 'astro:content';
 
 interface Props {
-  staffMember: Member;
+  member: CollectionEntry<'member'>;
   bg: string;
 }
+function getMemberUrl(memberSlug: string) {
+  const [lang, ...slugParts] = memberSlug.split('/');
+  const baseSlug = slugParts.join('/');
+  return getRelativeLocaleUrl(lang, `members/${baseSlug}`);
+}
 
-const { staffMember, bg } = Astro.props;
+const { member, bg } = Astro.props as Props;
+const data = member.data;
 ---
 
 <a
   class={'h-[386px] p-8 rounded-3xl justify-center items-center place-items-center gap-2.5 dark:bg-slate-800 transition-transform hover:scale-[1.02] ' +
     bg}
-  href={getRelativeLocaleUrl(Astro.currentLocale!) + '/members/' + staffMember.slug}
+  href={getMemberUrl(member.slug)}
 >
   <div class="flex-col justify-start items-center gap-4 flex">
     <div class="self-stretch flex-col justify-start items-center gap-6 flex">
       <Image
         class="rounded-full shadow-2xl"
-        src={staffMember.image.src}
-        alt={staffMember.image.alt ?? ''}
+        src={data.image}
+        alt={data.name + ' ' + data.family}
         width={150}
         height={150}
         format="webp"
@@ -31,24 +37,25 @@ const { staffMember, bg } = Astro.props;
       <div class="self-stretch h-[108px] flex-col justify-start items-start gap-2.5 flex">
         <div class="self-stretch h-14 flex-col justify-start items-center gap-1.5 flex">
           <h2 class="self-stretch text-center text-base font-bold text-pfColorFirst dark:text-pfColorFourth">
-            {staffMember.firstName}
+            {data.name}
+            {data.family}
           </h2>
           <span
             class="self-stretch text-center line-clamp-1 text-pfColorSecond text-base font-medium dark:text-slate-100"
           >
-            {staffMember.pfTitle}
+            {data.title}
           </span>
         </div>
         <p class="self-stretch text-center line-clamp-2 text-slate-600 text-sm font-normal dark:text-slate-300">
-          {staffMember.description}
+          {data.description}
         </p>
       </div>
     </div>
     <div class="justify-center items-center gap-3 inline-flex">
       <!-- TODO(payam): add link tag to this items -->
-      <Icon name="tabler:brand-telegram" class="w-6 h-6 text-slate-300 dark:text-slate-500" />
-      <Icon name="tabler:brand-github" class="w-6 h-6 text-slate-300 dark:text-slate-500" />
-      <Icon name="tabler:brand-linkedin" class="w-6 h-6 text-slate-300 dark:text-slate-500" />
+      <Icon name="tabler:brand-telegram" class="size-6 text-slate-300 dark:text-slate-500" />
+      <Icon name="tabler:brand-github" class="size-6 text-slate-300 dark:text-slate-500" />
+      <Icon name="tabler:brand-linkedin" class="size-6 text-slate-300 dark:text-slate-500" />
     </div>
   </div>
 </a>

src/components/widgets/StaffSection.astro

@@ -5,11 +5,15 @@ import background from '~/assets/images/members-background.jpg';
 import SectionTitle from './SectionTitle.astro';
 import StaffCard from './StaffCard.astro';
 import i18n from '~/utils/i18n';
-import { staffMembers } from '~/data/mockStaffMembers';
-
-const translations = i18n.t();
+import { getCollection } from 'astro:content';
 
 const { id, isDark = false, classes = {} } = Astro.props;
+const currentLocale = Astro.currentLocale!;
+const members = await getCollection('member');
+const effectiveMembers = members.filter(({ slug }) => slug.startsWith(currentLocale));
+
+i18n.setLang(currentLocale);
+const translations = i18n.t();
 ---
 
 <WidgetWrapper
@@ -30,7 +34,7 @@ const { id, isDark = false, classes = {} } = Astro.props;
       />
 
       <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 justify-center gap-8">
-        {staffMembers.map((member) => <StaffCard bg="bg-white" staffMember={member} />)}
+        {effectiveMembers.map((member) => <StaffCard bg="bg-white" member={member} />)}
       </div>
     </div>
   </div>

src/content/member/en/abolfazlirani.md

@@ -2,9 +2,11 @@
 name: 'Abolfazl'
 family: 'Irani'
 title: 'Programmer and Designer'
-image: '/images/members/amir.jpg'
+image: '/src/assets/images/avatar/sample-avatar-1.png' #'/images/members/amir.jpg'
 description: 'Abolfazl is a mobile programmer who used to be a UI designer and has always tried to publish great apps.'
-topics: ['fa/open-source']
+topics:
+  - collection: 'topic'
+    slug: 'en/open-source'
 social:
   website: 'https://flutterfarsi.com'
   github: 'https://github.com/abolfazlirani/'

src/content/member/en/payamzahedi95.md → src/content/member/en/payamzahedi.md

@@ -2,9 +2,11 @@
 name: Payam
 family: Zahedi
 title: Software Engineer
-image: /images/members/amir.jpg
+image: '/src/assets/images/avatar/sample-avatar-4.png' #/images/members/amir.jpg
 description: Payam is one of the co-founders of Flutter Persian and actively contributes to our open-source projects. He plays a key role in managing tasks and ensuring everything runs smoothly and efficiently! 🚀
-topics: ['en/open-source']
+topics:
+  - collection: 'topic'
+    slug: 'en/open-source'
 social:
   website: https://payamzahedi.com/
   github: https://github.com/payam-zahedi/

src/content/member/fa/abolfazlirani.md

@@ -2,9 +2,11 @@
 name: 'ابوالفضل'
 family: 'ایرانی'
 title: 'برنامه‌نویس و طراح'
-image: '/images/members/amir.jpg'
+image: '/src/assets/images/avatar/sample-avatar-1.png' #'/images/members/amir.jpg'
 description: 'ابوالفضل یه برنامه‌نویس موبایله که در گذشتش طراح رابط کاربریم بوده و همیشه سعی کرده اپلیکیشن‌های خوبی رو منتشر کنه.'
-topics: ['fa/open-source']
+topics:
+  - collection: 'topic'
+    slug: 'fa/open-source'
 social:
   website: 'https://flutterfarsi.com'
   github: 'https://github.com/abolfazlirani/'

src/content/member/fa/payamzahedi95.md → src/content/member/fa/payamzahedi.md

@@ -2,9 +2,11 @@
 name: پیام
 family: زاهدی
 title: مهندس نرم افزار
-image: /images/members/amir.jpg
+image: '/src/assets/images/avatar/sample-avatar-4.png' #/images/members/amir.jpg
 description: پیام، یکی از پایه‌گذارای فلاتر فارسیه و الان تو بخش پروژه‌های متن‌باز بهمون کمک می‌کنه و مدیریت کارا رو بر عهده داره. کلی حمایت می‌کنه که کارا بهتر و قوی‌تر پیش برن! 🚀
-topics: ['fa/open-source']
+topics:
+  - collection: 'topic'
+    slug: 'fa/open-source'
 social:
   website: https://payamzahedi.com/
   github: https://github.com/payam-zahedi/