fix: Featured Timeline

src/features/TimelineFeatured/FeaturedCard.tsx

@@ -1,24 +1,16 @@
 import styled from "@emotion/styled";
 import Card from "@mui/material/Card";
 import CardActionArea from "@mui/material/CardActionArea";
-import { graphql } from "gatsby";
 
-import { type FeaturedCardFragment } from "@/generated/graphqlTypes";
+import { type Feature } from "./constants";
 
-export const query = graphql`
-  fragment FeaturedCard on FeaturedYaml {
-    title
-    ogImage
-    url
-  }
-`;
-
-const StyledCard = styled(Card)({
+const StyledCard = styled(Card)(({ theme }) => ({
   width: "100%",
   height: 0,
   paddingBottom: "52.5%" /* 1200:630 Aspect Ratio */,
   position: "relative",
-});
+  borderRadius: theme.shape.borderRadius * 2,
+}));
 
 const StyledCardActionArea = styled(CardActionArea)({
   position: "absolute",
@@ -28,34 +20,24 @@ const StyledCardActionArea = styled(CardActionArea)({
   height: "100%",
 }) as typeof CardActionArea;
 
-const StyledImage = styled("img")({
-  height: "100%",
-  width: "100%",
-});
-
 export const FeaturedCard = ({
-  item,
+  title,
+  url,
+  ogImage,
+  children,
 }: {
-  item: FeaturedCardFragment;
-}): JSX.Element => {
+  children: React.ReactNode;
+} & Feature): JSX.Element => {
   return (
     <StyledCard>
       <StyledCardActionArea
         LinkComponent="a"
-        href={item.url}
+        href={url}
         rel="external noopener follow me"
         target="_blank"
-        title={item.title}
+        title={title}
       >
-        <StyledImage
-          width={1200}
-          height={630}
-          src={item.ogImage}
-          alt={item.title}
-          decoding="async"
-          loading="eager"
-          referrerPolicy="no-referrer"
-        />
+        {children}
       </StyledCardActionArea>
     </StyledCard>
   );

src/features/TimelineFeatured/FeaturedList.tsx

@@ -1,39 +1,34 @@
 import styled from "@emotion/styled";
-import { graphql } from "gatsby";
+import { StaticImage } from "gatsby-plugin-image";
 
 import { FeaturedCard } from "./FeaturedCard";
-
-import { type FeaturedListFragment } from "@/generated/graphqlTypes";
-
-export const query = graphql`
-  fragment FeaturedList on FeaturedYamlConnection {
-    nodes {
-      __typename
-      id
-      ...FeaturedCard
-    }
-  }
-`;
+import { FEATURES } from "./constants";
 
 const Container = styled("div")(({ theme }) => ({
   display: "grid",
   gap: theme.spacing(3),
   gridTemplateColumns: "repeat(2, 1fr)",
   width: "100%",
-  [theme.breakpoints.down("md")]: {
+  [theme.breakpoints.down("sm")]: {
     gridTemplateColumns: "repeat(1, 1fr)",
   },
 }));
 
-export const FeaturedList = ({
-  items,
-}: {
-  items: FeaturedListFragment;
-}): JSX.Element => {
+export const FeaturedList = (): JSX.Element => {
   return (
     <Container as="section">
-      {items.nodes.map((item) => (
-        <FeaturedCard key={item.id} item={item} />
+      {/* StaticImageを使用するためベタ書き */}
+      {FEATURES.map((item) => (
+        <FeaturedCard key={item.url} {...item}>
+          <StaticImage
+            src={item.url}
+            alt={item.title}
+            width={1200}
+            height={630}
+            decoding="async"
+            loading="eager"
+          />
+        </FeaturedCard>
       ))}
     </Container>
   );

src/features/TimelineFeatured/constants.ts

@@ -0,0 +1,28 @@
+export interface Feature {
+  title: string;
+  ogImage: string;
+  url: string;
+}
+
+export const FEATURES = [
+  {
+    title: "コードレビューにラベルを付けるだけでチームの心理的安全性を高めた話",
+    ogImage: "./assets/code-review-comment-prefix.png",
+    url: "https://zenn.dev/hacobell_dev/articles/code-review-comment-prefix",
+  },
+  {
+    title: "もうブロッカーにしない！コードレビューを爆速にするための組織づくり",
+    ogImage: "./assets/code-review-blocker.png",
+    url: "https://zenn.dev/hacobell_dev/articles/code-review-blocker",
+  },
+  {
+    title: "【GraphQL】スキーマ駆動開発におけるエラーレスポンス設計パターン集",
+    ogImage: "./assets/graphql-error-response.png",
+    url: "https://zenn.dev/hacobell_dev/articles/graphql-error-response",
+  },
+  {
+    title: "backlog-notify",
+    ogImage: "./assets/backlog-notify.png",
+    url: "https://github.com/bicstone/backlog-notify",
+  },
+] as const satisfies Feature[];

src/pages/index.tsx

@@ -21,9 +21,6 @@ export const query = graphql`
     timelineItems: allTimeline(sort: { date: DESC }) {
       ...TimelineVirtualizedListTimeline
     }
-    featuredTimelineItems: allFeaturedYaml {
-      ...FeaturedList
-    }
   }
 `;
 
@@ -44,7 +41,6 @@ export const Head: HeadFC<IndexPageQuery> = ({ location }) => {
 
 const IndexPage = ({ data }: PageProps<IndexPageQuery>): JSX.Element => {
   const timelineItems = data.timelineItems;
-  const featuredTimelineItems = data.featuredTimelineItems;
 
   return (
     <>
@@ -59,7 +55,7 @@ const IndexPage = ({ data }: PageProps<IndexPageQuery>): JSX.Element => {
           Featured
         </Typography>
         <Spacer y={6} />
-        <FeaturedList items={featuredTimelineItems} />
+        <FeaturedList />
         <Spacer y={6} />
         <Typography variant="h5" component="h2" fontWeight="bold">
           Timeline ({timelineItems.nodes.length})