fix: Fix SNS Links (#995)

gatsby-config.ts

@@ -134,9 +134,6 @@ const config: GatsbyConfig = {
                     ... on NotesYaml {
                       url
                     }
-                    ... on ItemsYaml {
-                      url
-                    }
                     ... on Mdx {
                       slug
                       frontmatter {

gatsby-node.ts

@@ -164,9 +164,6 @@ export const createPagesStatefully: GatsbyNode["createPagesStatefully"] =
             ... on NotesYaml {
               url
             }
-            ... on ItemsYaml {
-              url
-            }
             ... on Mdx {
               slug
               frontmatter {
@@ -175,6 +172,13 @@ export const createPagesStatefully: GatsbyNode["createPagesStatefully"] =
             }
           }
         }
+        qiitaItems: allItemsYaml {
+          nodes {
+            title
+            date
+            url
+          }
+        }
       }
     `);
 
@@ -190,7 +194,6 @@ export const createPagesStatefully: GatsbyNode["createPagesStatefully"] =
         case "OssesYaml":
         case "SlidesYaml":
         case "NotesYaml":
-        case "ItemsYaml":
           timelineList.push({
             title: node.title,
             // TODO nullable
@@ -234,6 +237,15 @@ export const createPagesStatefully: GatsbyNode["createPagesStatefully"] =
       }
     });
 
+    result?.data?.qiitaItems?.nodes.forEach((node) => {
+      timelineList.push({
+        title: node.title,
+        slug: "",
+        url: node.url,
+        excerpt: "",
+      });
+    });
+
     if (!isDefined(timelineList)) throw new Error("timelineList is undefined");
 
     await Promise.all(
@@ -314,13 +326,6 @@ export const createSchemaCustomization: GatsbyNode["createSchemaCustomization"]
         fields: TimelineFields!
       }
 
-      type ItemsYaml implements Node & Timeline & Output @dontInfer {
-        title: String!
-        date: Date! @dateformat
-        url: String!
-        fields: TimelineFields!
-      }
-
       type Mdx implements Node & Timeline & Output @dontInfer {
         frontmatter: MdxFrontmatter!
         body: String!

package.json

@@ -26,7 +26,7 @@
     "@mui/lab": "5.0.0-alpha.165",
     "@mui/material": "5.15.10",
     "@sentry/browser": "7.101.1",
-    "bicstone": "1.0.0",
+    "bicstone": "1.2.0",
     "date-fns": "2.30.0",
     "date-fns-tz": "2.0.0",
     "fuse.js": "7.0.0",

src/components/icons/ForkwellIcon.tsx

@@ -0,0 +1,9 @@
+import styled from "@emotion/styled";
+
+import { IconBase } from "./IconBase";
+
+import icon from "@/content/icons/ForkwellIcon.svg";
+
+export const ForkwellIcon = styled(IconBase)({
+  content: `url(${icon})`,
+});

src/components/icons/MisskeyIcon.tsx

@@ -0,0 +1,9 @@
+import styled from "@emotion/styled";
+
+import { IconBase } from "./IconBase";
+
+import icon from "@/content/icons/MisskeyIcon.png";
+
+export const MisskeyIcon = styled(IconBase)({
+  content: `url(${icon})`,
+});

src/components/icons/MstdnIcon.tsx

@@ -0,0 +1,9 @@
+import styled from "@emotion/styled";
+
+import { IconBase } from "./IconBase";
+
+import icon from "@/content/icons/MstdnIcon.svg";
+
+export const MstdnIcon = styled(IconBase)({
+  content: `url(${icon})`,
+});

src/components/icons/WantedlyIcon.tsx

@@ -0,0 +1,13 @@
+import styled from "@emotion/styled";
+
+import { IconBase } from "./IconBase";
+
+import icon from "@/content/icons/WantedlyDarkIcon.svg";
+import whiteIcon from "@/content/icons/WantedlyLightIcon.svg";
+
+export const WantedlyIcon = styled(IconBase)(({ theme }) => ({
+  content: `url(${whiteIcon})`,
+  [theme.getColorSchemeSelector("dark")]: {
+    content: `url(${icon})`,
+  },
+}));

src/features/Bio/BioCardList.tsx

@@ -1,18 +1,34 @@
+import { Button } from "@mui/material";
 import { bicstone, type LinkKeys } from "bicstone";
+import { useState } from "react";
 
 import { BioHelloCard } from "./BioHelloCard";
 import { BioSocialLinkCard } from "./BioSocialLinkCard";
 
 import { BlueskyIcon } from "@/components/icons/BlueskyIcon";
 import { FacebookIcon } from "@/components/icons/FacebookIcon";
+import { FindyIcon } from "@/components/icons/FindyIcon";
+import { ForkwellIcon } from "@/components/icons/ForkwellIcon";
 import { GitHubIcon } from "@/components/icons/GitHubIcon";
+import { LaprasIcon } from "@/components/icons/LaprasIcon";
 import { LinkedInIcon } from "@/components/icons/LinkedInIcon";
+import { MisskeyIcon } from "@/components/icons/MisskeyIcon";
+import { MstdnIcon } from "@/components/icons/MstdnIcon";
 import { NoteIcon } from "@/components/icons/NoteIcon";
+import { QiitaIcon } from "@/components/icons/QiitaIcon";
+import { SpeakerDeckIcon } from "@/components/icons/SpeakerDeckIcon";
+import { ThreadsIcon } from "@/components/icons/ThreadsIcon";
+import { WantedlyIcon } from "@/components/icons/WantedlyIcon";
 import { XIcon } from "@/components/icons/XIcon";
 import { YoutrustIcon } from "@/components/icons/YoutrustIcon";
 import { ZennIcon } from "@/components/icons/ZennIcon";
 
 export const BioCardList = (): JSX.Element => {
+  const [expend, setExpend] = useState(false);
+  const handleExpendButtonClick = (): void => {
+    setExpend(true);
+  };
+
   const linkKeys = [
     "x",
     "bluesky",
@@ -24,16 +40,40 @@ export const BioCardList = (): JSX.Element => {
     "note",
   ] as const satisfies LinkKeys[];
 
+  const moreLinkKeys = [
+    "qiita",
+    "speakerdeck",
+    "findy",
+    "forkwell",
+    "lapras",
+    "wantedly",
+    "misskey",
+    "mstdn",
+    "threads",
+  ] as const satisfies LinkKeys[];
+
   const avatarMap = {
     bluesky: <BlueskyIcon aria-hidden="true" />,
     facebook: <FacebookIcon aria-hidden="true" />,
+    findy: <FindyIcon aria-hidden="true" />,
+    forkwell: <ForkwellIcon aria-hidden="true" />,
     github: <GitHubIcon aria-hidden="true" />,
+    lapras: <LaprasIcon aria-hidden="true" />,
     linkedin: <LinkedInIcon aria-hidden="true" />,
+    misskey: <MisskeyIcon aria-hidden="true" />,
+    mstdn: <MstdnIcon aria-hidden="true" />,
     note: <NoteIcon aria-hidden="true" />,
+    qiita: <QiitaIcon aria-hidden="true" />,
+    speakerdeck: <SpeakerDeckIcon aria-hidden="true" />,
+    threads: <ThreadsIcon aria-hidden="true" />,
+    wantedly: <WantedlyIcon aria-hidden="true" />,
     x: <XIcon aria-hidden="true" />,
     youtrust: <YoutrustIcon aria-hidden="true" />,
     zenn: <ZennIcon aria-hidden="true" />,
-  } as const satisfies Record<(typeof linkKeys)[number], JSX.Element>;
+  } as const satisfies Record<
+    (typeof linkKeys)[number] | (typeof moreLinkKeys)[number],
+    JSX.Element
+  >;
 
   return (
     <div
@@ -50,18 +90,7 @@ export const BioCardList = (): JSX.Element => {
         },
       })}
     >
-      <BioHelloCard
-        variant="elevation"
-        css={(theme) => ({
-          gridColumn: "1 / 5",
-          [theme.breakpoints.down("md")]: {
-            gridColumn: "1 / 4",
-          },
-          [theme.breakpoints.down("sm")]: {
-            gridColumn: "1 / 3",
-          },
-        })}
-      />
+      <BioHelloCard variant="elevation" css={{ gridColumn: "1 / -1" }} />
       {linkKeys.map((linkKey) => {
         const link = bicstone.links[linkKey];
         return (
@@ -76,6 +105,60 @@ export const BioCardList = (): JSX.Element => {
           />
         );
       })}
+      <div
+        css={(theme) => ({
+          display: "grid",
+          gap: theme.spacing(3),
+          gridColumn: "1 / -1",
+          gridTemplateColumns: "repeat(4, 1fr)",
+          maxHeight: expend ? "none" : theme.spacing(10),
+          overflow: "hidden",
+          paddingBottom: theme.spacing(10),
+          position: "relative",
+          width: "100%",
+          [theme.breakpoints.down("md")]: {
+            gridTemplateColumns: "repeat(3, 1fr)",
+          },
+          [theme.breakpoints.down("sm")]: {
+            gridTemplateColumns: "repeat(2, 1fr)",
+          },
+        })}
+      >
+        {moreLinkKeys.map((linkKey) => {
+          const link = bicstone.links[linkKey];
+          return (
+            <BioSocialLinkCard
+              key={link.siteName}
+              avatar={avatarMap[linkKey]}
+              title={link.siteName}
+              subTitle={`@${link.screenName}`}
+              actionTitle={link.siteName}
+              url={link.url}
+              variant="elevation"
+            />
+          );
+        })}
+        {!expend && (
+          <div
+            css={(theme) => ({
+              alignItems: "end",
+              background:
+                "linear-gradient(0, #fff, #fff 20%, hsla(0, 0%, 100%, 0));",
+              bottom: 0,
+              display: "flex",
+              height: theme.spacing(10),
+              justifyContent: "center",
+              left: 0,
+              position: "absolute",
+              width: "100%",
+            })}
+          >
+            <Button variant="outlined" onClick={handleExpendButtonClick}>
+              もっと見る
+            </Button>
+          </div>
+        )}
+      </div>
     </div>
   );
 };

src/features/Timeline/TimelineCardBase.tsx

@@ -39,14 +39,14 @@ export type TimelineCardBaseProps =
   | {
       avatar: JSX.Element;
       title: string;
-      subTitle: ReactNode;
+      subTitle?: ReactNode;
       url: string;
       slug?: null;
     }
   | {
       avatar: JSX.Element;
       title: string;
-      subTitle: ReactNode;
+      subTitle?: ReactNode;
       url?: null;
       slug: string;
     };

src/features/Timeline/TimelineList.tsx

@@ -6,7 +6,6 @@ import { type ComponentProps, forwardRef, Fragment } from "react";
 import { TimelineArticleCard } from "./TimelineArticleCard";
 import { TimelineCertificationCard } from "./TimelineCertificationCard";
 import { TimelineHistoryCard } from "./TimelineHistoryCard";
-import { TimelineItemCard } from "./TimelineItemCard";
 import { TimelineMdxCard } from "./TimelineMdxCard";
 import { TimelineNoteCard } from "./TimelineNoteCard";
 import { TimelineOssCard } from "./TimelineOssCard";
@@ -49,9 +48,6 @@ export const query = graphql`
         ... on NotesYaml {
           ...TimelineNoteCard
         }
-        ... on ItemsYaml {
-          ...TimelineItemCard
-        }
         ... on Mdx {
           ...TimelineMdxCard
         }
@@ -93,9 +89,6 @@ export const query = graphql`
         ... on NotesYaml {
           ...TimelineNoteCard
         }
-        ... on ItemsYaml {
-          ...TimelineItemCard
-        }
         ... on Mdx {
           ...TimelineMdxCard
         }
@@ -148,10 +141,6 @@ export const TimelineItem = ({
       return <TimelineNoteCard key={item.id} item={item} />;
     }
 
-    case "ItemsYaml": {
-      return <TimelineItemCard key={item.id} item={item} />;
-    }
-
     case "ProjectsYaml": {
       return <TimelineProjectCard key={item.id} item={item} />;
     }

src/features/Timeline/TimelineVirtualizedList.tsx

@@ -8,7 +8,6 @@ import { VirtuosoGrid } from "react-virtuoso";
 import { TimelineArticleCard } from "./TimelineArticleCard";
 import { TimelineCertificationCard } from "./TimelineCertificationCard";
 import { TimelineHistoryCard } from "./TimelineHistoryCard";
-import { TimelineItemCard } from "./TimelineItemCard";
 import { TimelineMdxCard } from "./TimelineMdxCard";
 import { TimelineNoteCard } from "./TimelineNoteCard";
 import { TimelineOssCard } from "./TimelineOssCard";
@@ -45,9 +44,6 @@ export const query = graphql`
       ... on NotesYaml {
         ...TimelineNoteCard
       }
-      ... on ItemsYaml {
-        ...TimelineItemCard
-      }
       ... on Mdx {
         ...TimelineMdxCard
       }
@@ -81,10 +77,6 @@ const TimelineItem = ({ item }: TimelineItemProps): JSX.Element | null => {
       return <TimelineNoteCard key={item.id} item={item} showYear />;
     }
 
-    case "ItemsYaml": {
-      return <TimelineItemCard key={item.id} item={item} />;
-    }
-
     case "ProjectsYaml": {
       return <TimelineProjectCard key={item.id} item={item} showYear />;
     }