feat: Pinned Timeline

content-sample/featured/featured.yml

@@ -0,0 +1,15 @@
+- title: コードレビューにラベルを付けるだけでチームの心理的安全性を高めた話
+  ogImage: https://res.cloudinary.com/zenn/image/upload/s--v4nig1Q6--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:%25E3%2582%25B3%25E3%2583%25BC%25E3%2583%2589%25E3%2583%25AC%25E3%2583%2593%25E3%2583%25A5%25E3%2583%25BC%25E3%2581%25AB%25E3%2583%25A9%25E3%2583%2599%25E3%2583%25AB%25E3%2582%2592%25E4%25BB%2598%25E3%2581%2591%25E3%2582%258B%25E3%2581%25A0%25E3%2581%2591%25E3%2581%25A7%25E3%2583%2581%25E3%2583%25BC%25E3%2583%25A0%25E3%2581%25AE%25E5%25BF%2583%25E7%2590%2586%25E7%259A%2584%25E5%25AE%2589%25E5%2585%25A8%25E6%2580%25A7%25E3%2582%2592%25E9%25AB%2598%25E3%2582%2581%25E3%2581%259F%25E8%25A9%25B1%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_34:%25E3%2581%258A%25E3%2581%258A%25E3%2581%2584%25E3%2581%2597%2520%2528bicstone%2529%2Cx_220%2Cy_108/bo_3px_solid_rgb:d6e3ed%2Cg_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzEzYjhhODE4MTUuanBlZw==%2Cr_20%2Cw_90%2Cx_92%2Cy_102/g_south_west%2Ch_34%2Cl_default:og-publication-pro-mark-xcosax%2Cw_34%2Cx_217%2Cy_158/co_rgb:6e7b85%2Cg_south_west%2Cl_text:notosansjp-medium.otf_30:Hacobell%2520Developers%2520...%2Cx_255%2Cy_160/bo_4px_solid_white%2Cg_south_west%2Ch_50%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2JiNDU0ZDlmNDIuanBlZw==%2Cr_max%2Cw_50%2Cx_139%2Cy_84/v1627283836/default/og-base-w1200-v2.png
+  url: https://zenn.dev/hacobell_dev/articles/code-review-comment-prefix
+
+- title: もうブロッカーにしない！コードレビューを爆速にするための組織づくり
+  ogImage: https://res.cloudinary.com/zenn/image/upload/s--aKD8gWBw--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:%25E3%2582%2582%25E3%2581%2586%25E3%2583%2596%25E3%2583%25AD%25E3%2583%2583%25E3%2582%25AB%25E3%2583%25BC%25E3%2581%25AB%25E3%2581%2597%25E3%2581%25AA%25E3%2581%2584%25EF%25BC%2581%25E3%2582%25B3%25E3%2583%25BC%25E3%2583%2589%25E3%2583%25AC%25E3%2583%2593%25E3%2583%25A5%25E3%2583%25BC%25E3%2582%2592%25E7%2588%2586%25E9%2580%259F%25E3%2581%25AB%25E3%2581%2599%25E3%2582%258B%25E3%2581%259F%25E3%2582%2581%25E3%2581%25AE%25E7%25B5%2584%25E7%25B9%2594%25E3%2581%25A5%25E3%2581%258F%25E3%2582%258A%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_34:%25E3%2581%258A%25E3%2581%258A%25E3%2581%2584%25E3%2581%2597%2520%2528bicstone%2529%2Cx_220%2Cy_108/bo_3px_solid_rgb:d6e3ed%2Cg_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzEzYjhhODE4MTUuanBlZw==%2Cr_20%2Cw_90%2Cx_92%2Cy_102/g_south_west%2Ch_34%2Cl_default:og-publication-pro-mark-xcosax%2Cw_34%2Cx_217%2Cy_158/co_rgb:6e7b85%2Cg_south_west%2Cl_text:notosansjp-medium.otf_30:Hacobell%2520Developers%2520...%2Cx_255%2Cy_160/bo_4px_solid_white%2Cg_south_west%2Ch_50%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2JiNDU0ZDlmNDIuanBlZw==%2Cr_max%2Cw_50%2Cx_139%2Cy_84/v1627283836/default/og-base-w1200-v2.png
+  url: https://zenn.dev/hacobell_dev/articles/code-review-blocker
+
+- title: 【GraphQL】スキーマ駆動開発におけるエラーレスポンス設計パターン集
+  ogImage: https://res.cloudinary.com/zenn/image/upload/s--siLULLTQ--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:%25E3%2580%2590GraphQL%25E3%2580%2591%25E3%2582%25B9%25E3%2582%25AD%25E3%2583%25BC%25E3%2583%259E%25E9%25A7%2586%25E5%258B%2595%25E9%2596%258B%25E7%2599%25BA%25E3%2581%25AB%25E3%2581%258A%25E3%2581%2591%25E3%2582%258B%25E3%2582%25A8%25E3%2583%25A9%25E3%2583%25BC%25E3%2583%25AC%25E3%2582%25B9%25E3%2583%259D%25E3%2583%25B3%25E3%2582%25B9%25E8%25A8%25AD%25E8%25A8%2588%25E3%2583%2591%25E3%2582%25BF%25E3%2583%25BC%25E3%2583%25B3%25E9%259B%2586%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_34:%25E3%2581%258A%25E3%2581%258A%25E3%2581%2584%25E3%2581%2597%2520%2528bicstone%2529%2Cx_220%2Cy_108/bo_3px_solid_rgb:d6e3ed%2Cg_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzEzYjhhODE4MTUuanBlZw==%2Cr_20%2Cw_90%2Cx_92%2Cy_102/g_south_west%2Ch_34%2Cl_default:og-publication-pro-mark-xcosax%2Cw_34%2Cx_217%2Cy_158/co_rgb:6e7b85%2Cg_south_west%2Cl_text:notosansjp-medium.otf_30:Hacobell%2520Developers%2520...%2Cx_255%2Cy_160/bo_4px_solid_white%2Cg_south_west%2Ch_50%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2JiNDU0ZDlmNDIuanBlZw==%2Cr_max%2Cw_50%2Cx_139%2Cy_84/v1627283836/default/og-base-w1200-v2.png
+  url: https://zenn.dev/hacobell_dev/articles/graphql-error-response
+
+- title: アウトプットはどうして続かないのか？「モチベの泉」を枯らさない5つの掟
+  ogImage: https://res.cloudinary.com/zenn/image/upload/s--xyXWCiYY--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:%25E3%2582%25A2%25E3%2582%25A6%25E3%2583%2588%25E3%2583%2597%25E3%2583%2583%25E3%2583%2588%25E3%2581%25AF%25E3%2581%25A9%25E3%2581%2586%25E3%2581%2597%25E3%2581%25A6%25E7%25B6%259A%25E3%2581%258B%25E3%2581%25AA%25E3%2581%2584%25E3%2581%25AE%25E3%2581%258B%25EF%25BC%259F%25E3%2580%258C%25E3%2583%25A2%25E3%2583%2581%25E3%2583%2599%25E3%2581%25AE%25E6%25B3%2589%25E3%2580%258D%25E3%2582%2592%25E6%259E%25AF%25E3%2582%2589%25E3%2581%2595%25E3%2581%25AA%25E3%2581%25845%25E3%2581%25A4%25E3%2581%25AE%25E6%258E%259F%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:%25E3%2581%258A%25E3%2581%258A%25E3%2581%2584%25E3%2581%2597%2520%2528bicstone%2529%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2JiNDU0ZDlmNDIuanBlZw==%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png
+  url: https://zenn.dev/bicstone/articles/keep-you-motivated-to-output

gatsby-config.ts

@@ -32,6 +32,7 @@ const contentPaths = [
   "speakerdeck",
   "zenn",
   "note",
+  "featured",
 ];
 
 const config: GatsbyConfig = {

src/features/Bio/BioCardList.tsx

@@ -8,24 +8,20 @@ import { FacebookIcon } from "@/components/icons/FacebookIcon";
 import { GitHubIcon } from "@/components/icons/GitHubIcon";
 import { LinkedInIcon } from "@/components/icons/LinkedInIcon";
 import { NoteIcon } from "@/components/icons/NoteIcon";
-import { SpeakerDeckIcon } from "@/components/icons/SpeakerDeckIcon";
-import { ThreadsIcon } from "@/components/icons/ThreadsIcon";
 import { XIcon } from "@/components/icons/XIcon";
 import { YoutrustIcon } from "@/components/icons/YoutrustIcon";
 import { ZennIcon } from "@/components/icons/ZennIcon";
 
 export const BioCardList = (): JSX.Element => {
   const linkKeys = [
     "x",
+    "bluesky",
     "facebook",
     "linkedin",
-    "bluesky",
-    "threads",
     "youtrust",
+    "github",
     "zenn",
     "note",
-    "speakerdeck",
-    "github",
   ] as const satisfies LinkKeys[];
 
   const avatarMap = {
@@ -34,8 +30,6 @@ export const BioCardList = (): JSX.Element => {
     github: <GitHubIcon aria-hidden="true" />,
     linkedin: <LinkedInIcon aria-hidden="true" />,
     note: <NoteIcon aria-hidden="true" />,
-    speakerdeck: <SpeakerDeckIcon aria-hidden="true" />,
-    threads: <ThreadsIcon aria-hidden="true" />,
     x: <XIcon aria-hidden="true" />,
     youtrust: <YoutrustIcon aria-hidden="true" />,
     zenn: <ZennIcon aria-hidden="true" />,

src/features/Timeline/index.ts

@@ -3,4 +3,3 @@ export {
   TimelineVirtualizedList,
   type TimelineVirtualizedListProps,
 } from "./TimelineVirtualizedList";
-export { TimelinePinnedList } from "./TimelinePinnedList";

src/features/TimelineFeatured/FeaturedCard.tsx

@@ -0,0 +1,62 @@
+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";
+
+export const query = graphql`
+  fragment FeaturedCard on FeaturedYaml {
+    title
+    ogImage
+    url
+  }
+`;
+
+const StyledCard = styled(Card)({
+  width: "100%",
+  height: 0,
+  paddingBottom: "52.5%" /* 1200:630 Aspect Ratio */,
+  position: "relative",
+});
+
+const StyledCardActionArea = styled(CardActionArea)({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  width: "100%",
+  height: "100%",
+}) as typeof CardActionArea;
+
+const StyledImage = styled("img")({
+  height: "100%",
+  width: "100%",
+});
+
+export const FeaturedCard = ({
+  item,
+}: {
+  item: FeaturedCardFragment;
+}): JSX.Element => {
+  return (
+    <StyledCard>
+      <StyledCardActionArea
+        LinkComponent="a"
+        href={item.url}
+        rel="external noopener follow me"
+        target="_blank"
+        title={item.title}
+      >
+        <StyledImage
+          width={1200}
+          height={630}
+          src={item.ogImage}
+          alt={item.title}
+          decoding="async"
+          loading="eager"
+          referrerPolicy="no-referrer"
+        />
+      </StyledCardActionArea>
+    </StyledCard>
+  );
+};

src/features/TimelineFeatured/FeaturedList.tsx

@@ -0,0 +1,40 @@
+import styled from "@emotion/styled";
+import { graphql } from "gatsby";
+
+import { FeaturedCard } from "./FeaturedCard";
+
+import { type FeaturedListFragment } from "@/generated/graphqlTypes";
+
+export const query = graphql`
+  fragment FeaturedList on FeaturedYamlConnection {
+    nodes {
+      __typename
+      id
+      ...FeaturedCard
+    }
+  }
+`;
+
+const Container = styled("div")(({ theme }) => ({
+  display: "grid",
+  gap: theme.spacing(3),
+  gridTemplateColumns: "repeat(2, 1fr)",
+  width: "100%",
+  [theme.breakpoints.down("md")]: {
+    gridTemplateColumns: "repeat(1, 1fr)",
+  },
+}));
+
+export const FeaturedList = ({
+  items,
+}: {
+  items: FeaturedListFragment;
+}): JSX.Element => {
+  return (
+    <Container as="section">
+      {items.nodes.map((item) => (
+        <FeaturedCard key={item.id} item={item} />
+      ))}
+    </Container>
+  );
+};

src/features/TimelineFeatured/index.ts

@@ -0,0 +1 @@
+export { FeaturedList } from "./FeaturedList";