fix: Featured Timeline

bicstone · Feb 13, 2024 · 5bb6b44 · 5bb6b44
1 parent ad15059
commit 5bb6b44
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 97 deletions.
diff --git a/content b/content
diff --git a/content-sample/featured/.gitkeep b/content-sample/featured/.gitkeep
diff --git a/content-sample/featured/featured.yml b/content-sample/featured/featured.yml
diff --git a/src/features/TimelineFeatured/FeaturedCard.tsx b/src/features/TimelineFeatured/FeaturedCard.tsx
@@ -1,22 +1,16 @@
 import styled from "@emotion/styled";
-import Card from "@mui/material/Card";
 import CardActionArea from "@mui/material/CardActionArea";
 
-const StyledCard = styled(Card)(({ theme }) => ({
-  width: "100%",
+const StyledCardActionArea = styled(CardActionArea)(({ theme }) => ({
+  borderRadius: theme.shape.borderRadius * 2,
+  boxShadow: theme.shadows[1],
+  display: "block",
   height: 0,
+  overflow: "hidden",
   paddingBottom: "52.5%" /* 1200:630 Aspect Ratio */,
   position: "relative",
-  borderRadius: theme.shape.borderRadius * 2,
-}));
-
-const StyledCardActionArea = styled(CardActionArea)({
-  position: "absolute",
-  top: 0,
-  left: 0,
   width: "100%",
-  height: "100%",
-}) as typeof CardActionArea;
+})) as typeof CardActionArea;
 
 export const FeaturedCard = ({
   title,
@@ -28,7 +22,7 @@ export const FeaturedCard = ({
   children: React.ReactNode;
 }): JSX.Element => {
   return (
-    <StyledCard>
+    <article>
       <StyledCardActionArea
         LinkComponent="a"
         href={url}
@@ -38,6 +32,6 @@ export const FeaturedCard = ({
       >
         {children}
       </StyledCardActionArea>
-    </StyledCard>
+    </article>
   );
 };
diff --git a/src/features/TimelineFeatured/FeaturedList.tsx b/src/features/TimelineFeatured/FeaturedList.tsx
@@ -1,6 +1,5 @@
 import styled from "@emotion/styled";
 import { StaticImage } from "gatsby-plugin-image";
-import { type ComponentProps } from "react";
 
 import { FeaturedCard } from "./FeaturedCard";
 
@@ -14,42 +13,6 @@ const Container = styled("div")(({ theme }) => ({
   },
 }));
 
-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[];
-
-const staticImageProps = {
-  width: 1200,
-  height: 630,
-  decoding: "async",
-  loading: "eager",
-} as const satisfies Partial<ComponentProps<typeof StaticImage>>;
-
 export const FeaturedList = (): JSX.Element => {
   return (
     <Container as="section">
@@ -59,9 +22,43 @@ export const FeaturedList = (): JSX.Element => {
         url="https://zenn.dev/hacobell_dev/articles/code-review-comment-prefix"
       >
         <StaticImage
-          src="./assets/code-review-comment-prefix.png"
+          src="../../../content/featured/code-review-comment-prefix.png"
           alt="コードレビューにラベルを付けるだけでチームの心理的安全性を高めた話"
-          {...staticImageProps}
+          width={1200}
+          height={630}
+        />
+      </FeaturedCard>
+      <FeaturedCard
+        title="もうブロッカーにしない！コードレビューを爆速にするための組織づくり"
+        url="https://zenn.dev/hacobell_dev/articles/code-review-blocker"
+      >
+        <StaticImage
+          src="../../../content/featured/code-review-blocker.png"
+          alt="もうブロッカーにしない！コードレビューを爆速にするための組織づくり"
+          width={1200}
+          height={630}
+        />
+      </FeaturedCard>
+      <FeaturedCard
+        title="【GraphQL】スキーマ駆動開発におけるエラーレスポンス設計パターン集"
+        url="https://zenn.dev/hacobell_dev/articles/graphql-error-response"
+      >
+        <StaticImage
+          src="../../../content/featured/graphql-error-response.png"
+          alt="【GraphQL】スキーマ駆動開発におけるエラーレスポンス設計パターン集"
+          width={1200}
+          height={630}
+        />
+      </FeaturedCard>
+      <FeaturedCard
+        title="backlog-notify"
+        url="https://github.com/bicstone/backlog-notify"
+      >
+        <StaticImage
+          src="../../../content/featured/backlog-notify.png"
+          alt="backlog-notify"
+          width={1200}
+          height={630}
         />
       </FeaturedCard>
     </Container>

diff --git a/src/features/TimelineFeatured/constants.ts b/src/features/TimelineFeatured/constants.ts