feat: add optimization for images in content collection

public/locales/en/translation.json

@@ -40,7 +40,8 @@
     "staffSection": {
       "title": "Active members of the Persian Flutter community",
       "description": "In this section, you will get to know the individuals who are the driving force behind the Persian Flutter community with their efforts and enthusiasm. These active members, with various specialties, play key roles in advancing our community's goals and growth. From managing social media to organizing events, each of these individuals has an important role in the dynamism and progress of the Persian Flutter ecosystem.",
-      "descriptionShort": "In this section, you will get to know the individuals who are the driving force behind the Persian Flutter community with their efforts and enthusiasm. These active members, with various specialties, play key roles in advancing our community's goals and growth."
+      "descriptionShort": "In this section, you will get to know the individuals who are the driving force behind the Persian Flutter community with their efforts and enthusiasm. These active members, with various specialties, play key roles in advancing our community's goals and growth.",
+      "viewButton": "View All"
     },
     "comments": [],
     "donation": {

public/locales/fa/translation.json

@@ -40,7 +40,8 @@
     "staffSection": {
       "title": "اعضای فعال جامعه فلاتر فارسی",
       "description": " در این بخش با افرادی آشنا می‌شوید که با تلاش و اشتیاق خود، موتور محرکه جامعه فلاتر فارسی هستند. این اعضای فعال با تخصص‌های گوناگون، نقش‌های کلیدی در پیشبرد اهداف و رشد جامعه ما ایفا می‌کنند. از مدیریت رسانه‌های اجتماعی تا برگزاری رویدادها، هر یک از این افراد سهم مهمی در پویایی و پیشرفت اکوسیستم فلاتر فارسی دارند. ",
-      "descriptionShort": " در این بخش با افرادی آشنا می‌شوید که با تلاش و اشتیاق خود، موتور محرکه جامعه فلاتر فارسی هستند. این اعضای فعال با تخصص‌های گوناگون، نقش‌های کلیدی در پیشبرد اهداف و رشد جامعه ما ایفا می‌کنند. "
+      "descriptionShort": " در این بخش با افرادی آشنا می‌شوید که با تلاش و اشتیاق خود، موتور محرکه جامعه فلاتر فارسی هستند. این اعضای فعال با تخصص‌های گوناگون، نقش‌های کلیدی در پیشبرد اهداف و رشد جامعه ما ایفا می‌کنند. ",
+      "viewButton": "مشاهده همه"
     },
     "comments": [],
     "donation": {

src/components/widgets/StaffCard.astro

@@ -25,14 +25,16 @@ const data = member.data;
 >
   <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={data.image}
-        alt={data.name + ' ' + data.family}
-        width={150}
-        height={150}
-        format="webp"
-      />
+      <div class="w-[150px] h-[150px] rounded-full overflow-hidden">
+        <Image
+          class="w-full h-full object-cover"
+          src={data.image}
+          alt={data.name + ' ' + data.family}
+          width={400}
+          height={400}
+          format="webp"
+        />
+      </div>
 
       <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">

src/components/widgets/StaffSection.astro

@@ -36,6 +36,21 @@ const translations = i18n.t();
       <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 justify-center gap-8">
         {effectiveMembers.map((member) => <StaffCard bg="bg-white" member={member} />)}
       </div>
+
+      <a
+        href="/team"
+        class="inline-flex items-center justify-center px-10 py-3 text-lg font-normal
+        transition-colors duration-200 rounded-full
+        border border-pfColorThird text-pfColorThird
+        hover:bg-pfColorThird hover:text-white
+        dark:border-pfColorFourth dark:text-pfColorFourth
+        dark:hover:bg-pfColorFourth dark:hover:text-white
+        cursor-pointer"
+        rel="noopener"
+        aria-label="View All"
+      >
+        {translations.home.staffSection.viewButton}
+      </a>
     </div>
   </div>
 </WidgetWrapper>

src/content/config.ts

@@ -73,27 +73,28 @@ const topicCollection = defineCollection({
 
 const memberCollection = defineCollection({
   type: 'content',
-  schema: z.object({
-    name: z.string().min(1, { message: 'Name is required' }),
-    family: z.string().min(1, { message: 'Family name is required' }),
-    title: z.string().min(1, { message: 'Title is required' }),
-    image: z.string().min(1, { message: 'Image path is required' }),
-    description: z
-      .string()
-      .min(10, { message: 'Description must be at least 10 characters' })
-      .max(200, { message: 'Description must not exceed 200 characters' }),
-    topics: z.array(reference('topic')).min(1, { message: 'Member must have at least one topic' }),
-    social: z
-      .object({
-        twitter: z.string().url().optional(),
-        linkedin: z.string().url().optional(),
-        github: z.string().url().optional(),
-        telegram: z.string().url().optional(),
-        website: z.string().url().optional(),
-      })
-      .optional(),
-    metadata: metadataDefinition(),
-  }),
+  schema: ({ image }) =>
+    z.object({
+      name: z.string().min(1, { message: 'Name is required' }),
+      family: z.string().min(1, { message: 'Family name is required' }),
+      title: z.string().min(1, { message: 'Title is required' }),
+      image: image(),
+      description: z
+        .string()
+        .min(10, { message: 'Description must be at least 10 characters' })
+        .max(200, { message: 'Description must not exceed 200 characters' }),
+      topics: z.array(reference('topic')).min(1, { message: 'Member must have at least one topic' }),
+      social: z
+        .object({
+          twitter: z.string().url().optional(),
+          linkedin: z.string().url().optional(),
+          github: z.string().url().optional(),
+          telegram: z.string().url().optional(),
+          website: z.string().url().optional(),
+        })
+        .optional(),
+      metadata: metadataDefinition(),
+    }),
 });
 
 export const collections = {

src/content/member/en/abolfazlirani.md

@@ -2,7 +2,7 @@
 name: 'Abolfazl'
 family: 'Irani'
 title: 'Programmer and Designer'
-image: '/src/assets/images/avatar/sample-avatar-1.png' #'/images/members/amir.jpg'
+image: './../images/abolfazlirani.jpg'
 description: 'Abolfazl is a mobile programmer who used to be a UI designer and has always tried to publish great apps.'
 topics:
   - collection: 'topic'

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

@@ -1,18 +1,18 @@
 ---
-name: Payam
-family: Zahedi
-title: Software Engineer
-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! 🚀
+name: 'Payam'
+family: 'Zahedi'
+title: 'Software Engineer'
+image: './../images/payamzahedi95.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:
   - collection: 'topic'
     slug: 'en/open-source'
 social:
-  website: https://payamzahedi.com/
-  github: https://github.com/payam-zahedi/
-  linkedin: https://linkedin.com/in/payamzahedi95/
-  twitter: https://x.com/payamzahedi95/
-  telegram: https://t.me/payamzahedi95/
+  website: 'https://payamzahedi.com/'
+  github: 'https://github.com/payam-zahedi/'
+  linkedin: 'https://linkedin.com/in/payamzahedi95/'
+  twitter: 'https://x.com/payamzahedi95/'
+  telegram: 'https://t.me/payamzahedi95/'
 ---
 
 # Hi, I'm Payam Zahedi

src/content/member/fa/abolfazlirani.md

@@ -2,7 +2,7 @@
 name: 'ابوالفضل'
 family: 'ایرانی'
 title: 'برنامه‌نویس و طراح'
-image: '/src/assets/images/avatar/sample-avatar-1.png' #'/images/members/amir.jpg'
+image: './../images/abolfazlirani.jpg'
 description: 'ابوالفضل یه برنامه‌نویس موبایله که در گذشتش طراح رابط کاربریم بوده و همیشه سعی کرده اپلیکیشن‌های خوبی رو منتشر کنه.'
 topics:
   - collection: 'topic'

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

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

src/layouts/PageLayout.astro

@@ -11,14 +11,18 @@ const translations = i18n.t();
 export interface Props {
   metadata?: MetaData;
 }
-
 const { metadata } = Astro.props;
 ---
 
 <Layout metadata={metadata}>
   <div class="flex flex-col min-h-screen">
     <slot name="header">
-      <Header {...headerData(translations)} socialLinks={socialData.links} isSticky showToggleTheme />
+      <Header
+        {...headerData(Astro.currentLocale!, translations)}
+        socialLinks={socialData.links}
+        isSticky
+        showToggleTheme
+      />
     </slot>
     <main class="flex-grow">
       <slot />

src/navigation.ts

@@ -1,3 +1,4 @@
+import { getRelativeLocaleUrl } from 'astro:i18n';
 import type { TranslationValues } from './utils/i18n';
 import { getPermalink, getAsset } from './utils/permalinks';
 import type { CallToAction } from '~/types';
@@ -34,7 +35,7 @@ export const socialData = {
 
 // We need to pass translation function to this function
 
-export function headerData(translation: TranslationValues) {
+export function headerData(locale: string, translation: TranslationValues) {
   return {
     links: [
       {
@@ -51,7 +52,7 @@ export function headerData(translation: TranslationValues) {
       },
       {
         text: translation.header.menu.team,
-        href: '/members',
+        href: getRelativeLocaleUrl(locale, '/members'),
       },
     ],
     actions: [

src/pages/en/members/[slug].astro

@@ -2,15 +2,10 @@
 import { Image } from 'astro:assets';
 import MembersLayout from '~/layouts/MembersLayout.astro';
 import i18n from '~/utils/i18n';
-import bigImage from '~/assets/images/bigImage.png';
 import { Icon } from 'astro-icon/components';
 import { getCollection } from 'astro:content';
 import MemberProse from '~/components/widgets/MemberProse.astro';
 
-const { member } = Astro.props;
-const data = member.data;
-const { Content } = await member.render();
-
 export async function getStaticPaths() {
   const members = await getCollection('member');
 
@@ -32,6 +27,10 @@ export async function getStaticPaths() {
     });
 }
 
+const { member } = Astro.props;
+const data = member.data;
+const { Content } = await member.render();
+
 const socialIcons = {
   website: 'tabler:world',
   github: 'tabler:brand-github',
@@ -51,8 +50,9 @@ i18n.setLang(Astro.currentLocale);
 <MembersLayout metadata={metadata}>
   <div class="h-fit w-full relative flex flex-col items-center text-center mt-16 mb-[3rem] sm:mb-[10rem]">
     <Image
-      src={bigImage}
-      alt="picture"
+      src={data.image}
+      alt={data.name + ' ' + data.family}
+      quality="max"
       class="w-[90vw] sm:w-[70vw] md:w-[60vw] lg:w-[50vw] object-contain rounded-t-3xl sm:rounded-3xl sm:border-4 border-white sm:shadow-2xl shadow-black/25"
     />
     <div

src/pages/members/[slug].astro

@@ -2,15 +2,10 @@
 import { Image } from 'astro:assets';
 import MembersLayout from '~/layouts/MembersLayout.astro';
 import i18n from '~/utils/i18n';
-import bigImage from '~/assets/images/bigImage.png';
 import { Icon } from 'astro-icon/components';
 import { getCollection } from 'astro:content';
 import MemberProse from '~/components/widgets/MemberProse.astro';
 
-const { member } = Astro.props;
-const data = member.data;
-const { Content } = await member.render();
-
 export async function getStaticPaths() {
   const members = await getCollection('member');
 
@@ -32,6 +27,10 @@ export async function getStaticPaths() {
     });
 }
 
+const { member } = Astro.props;
+const data = member.data;
+const { Content } = await member.render();
+
 const socialIcons = {
   website: 'tabler:world',
   github: 'tabler:brand-github',
@@ -51,8 +50,9 @@ i18n.setLang(Astro.currentLocale);
 <MembersLayout metadata={metadata}>
   <div class="h-fit w-full relative flex flex-col items-center text-center mt-16 mb-[3rem] sm:mb-[10rem]">
     <Image
-      src={bigImage}
-      alt="picture"
+      src={data.image}
+      alt={data.name + ' ' + data.family}
+      quality="max"
       class="w-[90vw] sm:w-[70vw] md:w-[60vw] lg:w-[50vw] object-contain rounded-t-3xl sm:rounded-3xl sm:border-4 border-white sm:shadow-2xl shadow-black/25"
     />
     <div