Merge pull request #497 from achrafhardizi/feature/fix-issue-496

Fix: Fix the image alignment on the team grid (#496)

astro.config.mjs

@@ -1,68 +1,68 @@
-import { defineConfig } from "astro/config";
-import tailwind from "@astrojs/tailwind";
-import react from "@astrojs/react";
-import remarkToc from "remark-toc";
-import icon from "astro-icon";
-import remarkCollapse from "remark-collapse";
-import sitemap from "@astrojs/sitemap";
-import { SITE } from "./src/config";
-
-import mdx from "@astrojs/mdx";
-import pagefind from "astro-pagefind";
-import netlify from "@astrojs/netlify";
-import { getAstroRedirects } from "./src/redirects";
-
-const redirects = getAstroRedirects();
-// https://astro.build/config
-export default defineConfig({
-  site: SITE.website,
-  output: "hybrid",
-  adapter: netlify(),
-  prefetch: {
-    prefetchAll: true,
-  },
-  experimental: { contentLayer: true, serverIslands: true },
-  build: {
-    format: "file",
-  },
-  redirects,
-
-  integrations: [
-    tailwind({
-      applyBaseStyles: false,
-    }),
-    react(),
-    sitemap({
-      filter: page => !page.includes("/404"),
-      changefreq: "weekly",
-      priority: 0.7,
-      lastmod: new Date(),
-    }),
-    icon(),
-    mdx(),
-    pagefind(),
-  ],
-
-  markdown: {
-    remarkPlugins: [
-      remarkToc,
-      [
-        remarkCollapse,
-        {
-          test: "Table of contents",
-        },
-      ],
-    ],
-    shikiConfig: {
-      themes: { light: "min-light", dark: "night-owl" },
-      wrap: true,
-    },
-  },
-  vite: {
-    assetsInclude: ["**/*.riv"],
-    optimizeDeps: {
-      exclude: ["@resvg/resvg-js"],
-    },
-  },
-  scopedStyleStrategy: "where",
-});
+import { defineConfig } from "astro/config";
+import tailwind from "@astrojs/tailwind";
+import react from "@astrojs/react";
+import remarkToc from "remark-toc";
+import icon from "astro-icon";
+import remarkCollapse from "remark-collapse";
+import sitemap from "@astrojs/sitemap";
+import { SITE } from "./src/config";
+
+import mdx from "@astrojs/mdx";
+import pagefind from "astro-pagefind";
+import netlify from "@astrojs/netlify";
+import { getAstroRedirects } from "./src/redirects";
+
+const redirects = getAstroRedirects();
+// https://astro.build/config
+export default defineConfig({
+  site: SITE.website,
+  output: "hybrid",
+  adapter: netlify(),
+  prefetch: {
+    prefetchAll: true,
+  },
+  experimental: { contentLayer: true, serverIslands: true },
+  build: {
+    format: "file",
+  },
+  redirects,
+
+  integrations: [
+    tailwind({
+      applyBaseStyles: false,
+    }),
+    react(),
+    sitemap({
+      filter: page => !page.includes("/404"),
+      changefreq: "weekly",
+      priority: 0.7,
+      lastmod: new Date(),
+    }),
+    icon(),
+    mdx(),
+    pagefind(),
+  ],
+
+  markdown: {
+    remarkPlugins: [
+      remarkToc,
+      [
+        remarkCollapse,
+        {
+          test: "Table of contents",
+        },
+      ],
+    ],
+    shikiConfig: {
+      themes: { light: "min-light", dark: "night-owl" },
+      wrap: true,
+    },
+  },
+  vite: {
+    assetsInclude: ["**/*.riv"],
+    optimizeDeps: {
+      exclude: ["@resvg/resvg-js"],
+    },
+  },
+  scopedStyleStrategy: "where",
+});

package.json

@@ -1,92 +1,92 @@
-{
-  "name": "geeksblabla-community",
-  "type": "module",
-  "version": "2.0.0",
-  "private": true,
-  "scripts": {
-    "dev": "astro dev",
-    "start": "astro dev",
-    "build": "astro build",
-    "preview": "astro preview",
-    "deploy": "astro build && wrangler deploy",
-    "sync": "astro sync",
-    "astro": "astro",
-    "check": "astro check",
-    "lint": "prettier --write  \"**/*.{js,jsx,ts,tsx,md,mdx,astro}\" && eslint --fix \"src/**/*.{js,ts,jsx,tsx,astro}\"",
-    "lint:ci": "eslint \"src/**/*.{js,ts,jsx,tsx,astro}\"",
-    "prepare": "husky",
-    "validate-episode": "node .github/scripts/validate-episode-markdown.js",
-    "get-missed-episode": "node .github/scripts/get-missed-episode.js",
-    "check-all": "pnpm run lint && pnpm run check && pnpm run build"
-  },
-  "dependencies": {
-    "@astrojs/check": "^0.9.4",
-    "@astrojs/mdx": "^3.1.9",
-    "@astrojs/netlify": "^5.5.4",
-    "@astrojs/rss": "^4.0.9",
-    "@astrolib/seo": "1.0.0-beta.8",
-    "@astropub/md": "^1.0.0",
-    "@hookform/resolvers": "^3.9.1",
-    "@notionhq/client": "^2.2.15",
-    "@radix-ui/react-slot": "^1.1.0",
-    "@resvg/resvg-js": "^2.6.2",
-    "@rive-app/canvas": "^2.21.6",
-    "astro": "^4.16.13",
-    "astro-cloudinary": "^1.1.2",
-    "astro-icon": "^1.1.1",
-    "astro-pagefind": "^1.6.0",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.1",
-    "fuse.js": "^7.0.0",
-    "lodash.kebabcase": "^4.1.1",
-    "react-hook-form": "^7.53.2",
-    "reading-time": "^1.5.0",
-    "remark-collapse": "^0.1.2",
-    "remark-toc": "^9.0.0",
-    "satori": "^0.11.2",
-    "tailwindcss": "^3.4.11",
-    "typescript": "^5.5.3",
-    "node-fetch": "^3.3.2",
-    "fast-xml-parser": "^4.3.4",
-    "gray-matter": "^4.0.3"
-  },
-  "devDependencies": {
-    "@astrojs/react": "^3.6.2",
-    "@astrojs/sitemap": "^3.2.1",
-    "@astrojs/tailwind": "^5.1.2",
-    "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@tailwindcss/typography": "^0.5.15",
-    "@types/github-slugger": "^1.3.0",
-    "@types/lodash.kebabcase": "^4.1.9",
-    "@types/react": "^18.3.6",
-    "@typescript-eslint/parser": "^8.5.0",
-    "astro-eslint-parser": "^1.0.3",
-    "eslint": "^9.10.0",
-    "eslint-plugin-astro": "^1.2.4",
-    "eslint-plugin-unicorn": "^56.0.0",
-    "globals": "^15.9.0",
-    "husky": "^9.1.6",
-    "lint-staged": "^15.2.10",
-    "prettier": "^3.3.3",
-    "prettier-plugin-astro": "^0.14.1",
-    "prettier-plugin-tailwindcss": "^0.6.6",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "tailwind-merge": "^2.5.3",
-    "tailwindcss-motion": "0.4.1-beta",
-    "tsx": "^4.19.1",
-    "typescript-eslint": "^8.5.0"
-  },
-  "lint-staged": {
-    "*.{js,jsx,ts,tsx,astro}": [
-      "eslint --fix",
-      "prettier --write"
-    ],
-    "*.{md,mdx}": [
-      "prettier --write"
-    ],
-    "episodes/*.{md,mdx}": [
-      "pnpm validate-episode"
-    ]
-  }
-}
+{
+  "name": "geeksblabla-community",
+  "type": "module",
+  "version": "2.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "deploy": "astro build && wrangler deploy",
+    "sync": "astro sync",
+    "astro": "astro",
+    "check": "astro check",
+    "lint": "prettier --write  \"**/*.{js,jsx,ts,tsx,md,mdx,astro}\" && eslint --fix \"src/**/*.{js,ts,jsx,tsx,astro}\"",
+    "lint:ci": "eslint \"src/**/*.{js,ts,jsx,tsx,astro}\"",
+    "prepare": "husky",
+    "validate-episode": "node .github/scripts/validate-episode-markdown.js",
+    "get-missed-episode": "node .github/scripts/get-missed-episode.js",
+    "check-all": "pnpm run lint && pnpm run check && pnpm run build"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/mdx": "^3.1.9",
+    "@astrojs/netlify": "^5.5.4",
+    "@astrojs/rss": "^4.0.9",
+    "@astrolib/seo": "1.0.0-beta.8",
+    "@astropub/md": "^1.0.0",
+    "@hookform/resolvers": "^3.9.1",
+    "@notionhq/client": "^2.2.15",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@resvg/resvg-js": "^2.6.2",
+    "@rive-app/canvas": "^2.21.6",
+    "astro": "^4.16.13",
+    "astro-cloudinary": "^1.1.2",
+    "astro-icon": "^1.1.1",
+    "astro-pagefind": "^1.6.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "fuse.js": "^7.0.0",
+    "lodash.kebabcase": "^4.1.1",
+    "react-hook-form": "^7.53.2",
+    "reading-time": "^1.5.0",
+    "remark-collapse": "^0.1.2",
+    "remark-toc": "^9.0.0",
+    "satori": "^0.11.2",
+    "tailwindcss": "^3.4.11",
+    "typescript": "^5.5.3",
+    "node-fetch": "^3.3.2",
+    "fast-xml-parser": "^4.3.4",
+    "gray-matter": "^4.0.3"
+  },
+  "devDependencies": {
+    "@astrojs/react": "^3.6.2",
+    "@astrojs/sitemap": "^3.2.1",
+    "@astrojs/tailwind": "^5.1.2",
+    "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@tailwindcss/typography": "^0.5.15",
+    "@types/github-slugger": "^1.3.0",
+    "@types/lodash.kebabcase": "^4.1.9",
+    "@types/react": "^18.3.6",
+    "@typescript-eslint/parser": "^8.5.0",
+    "astro-eslint-parser": "^1.0.3",
+    "eslint": "^9.10.0",
+    "eslint-plugin-astro": "^1.2.4",
+    "eslint-plugin-unicorn": "^56.0.0",
+    "globals": "^15.9.0",
+    "husky": "^9.1.6",
+    "lint-staged": "^15.2.10",
+    "prettier": "^3.3.3",
+    "prettier-plugin-astro": "^0.14.1",
+    "prettier-plugin-tailwindcss": "^0.6.6",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwind-merge": "^2.5.3",
+    "tailwindcss-motion": "0.4.1-beta",
+    "tsx": "^4.19.1",
+    "typescript-eslint": "^8.5.0"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx,astro}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{md,mdx}": [
+      "prettier --write"
+    ],
+    "episodes/*.{md,mdx}": [
+      "pnpm validate-episode"
+    ]
+  }
+}

src/components/about/member.astro

@@ -7,7 +7,7 @@ const { name, link, profile_image } = Astro.props;
 <a href={link} class="block" target="_blank">
   <div class="md:mb mb-2">
     <Image
-      class="mx-auto w-full overflow-hidden rounded-t-[4px]"
+      class="aspect-[297/330] w-full overflow-hidden rounded-t-[4px] object-cover"
       src={profile_image}
       alt={name}
       width={297}

src/components/about/team.astro

@@ -3,12 +3,7 @@ import Member from "./member.astro";
 import { getCollection } from "astro:content";
 
 const teamCollection = await getCollection("team");
-const teamMembers = teamCollection.map(member => ({
-  name: member.data.name,
-  link: member.data.link,
-  profile_image: member.data.profile_image,
-  status: member.data.status,
-}));
+const teamMembers = teamCollection.map(member => member.data);
 
 const activeMembers = teamMembers.filter(member => member.status === "active");
 const pastMembers = teamMembers.filter(member => member.status === "past");

src/content/config.ts

@@ -5,7 +5,7 @@ import {
   authorSchema,
   blogSchema,
   episodeSchema,
-  teamSchema,
+  memberSchema,
   testimonialSchema,
 } from "./schema";
 /**
@@ -46,8 +46,8 @@ const gallery = !import.meta.env.PUBLIC_CLOUDINARY_CLOUD_NAME
     });
 
 const team = defineCollection({
-  loader: file("src/components/about/team-members.json"),
-  schema: teamSchema,
+  loader: file("team/team-members.json"),
+  schema: ctx => memberSchema(ctx),
 });
 
 const testimonials = defineCollection({

src/content/schema.ts

@@ -77,14 +77,18 @@ export const authorSchema = z.object({
 
 export type ArticleFrontmatter = z.infer<ReturnType<typeof blogSchema>>;
 
-export const teamSchema = z.object({
-  name: z.string().min(1, "Name cannot be empty"),
-  link: z.string().url("Invalid URL format"),
-  profile_image: z
-    .string()
-    .regex(/\.(jpg|jpeg|png|gif)$/, "Invalid image file format"),
-  status: z.enum(["active", "past"]),
-});
+export const memberSchema = (ctx: SchemaContext) =>
+  z.object({
+    name: z.string(),
+    link: z.string().url(),
+    profile_image: ctx.image(),
+    status: z.enum(["active", "past"]),
+  });
+
+export const teamSchema = (ctx: SchemaContext) =>
+  z.object({
+    members: z.array(memberSchema(ctx)),
+  });
 
 export const testimonialSchema = (ctx: SchemaContext) =>
   z.object({