From 2dcf9831e4429454a2bce1ee7cf7a2b487f74700 Mon Sep 17 00:00:00 2001
From: Takanori Oishi <takanori0014@live.jp>
Date: Tue, 17 Dec 2024 15:33:21 +0900
Subject: [PATCH] feat: Add mixi2 link

---
 content                                |  2 +-
 content-sample/icons/Mixi2Icon.svg     |  1 +
 package.json                           |  2 +-
 pnpm-lock.yaml                         | 10 +--
 src/components/icons/IconBase.tsx      |  4 +-
 src/components/icons/Mixi2Icon.tsx     |  9 +++
 src/features/Bio/BioCardList.tsx       | 98 +++++++++-----------------
 src/features/Bio/BioSocialLinkCard.tsx | 31 +++++++-
 8 files changed, 80 insertions(+), 77 deletions(-)
 create mode 100644 content-sample/icons/Mixi2Icon.svg
 create mode 100644 src/components/icons/Mixi2Icon.tsx

diff --git a/content b/content
index 47e34747..01043416 160000
--- a/content
+++ b/content
@@ -1 +1 @@
-Subproject commit 47e34747cdf915f32f386c34c95958cb61f85fe8
+Subproject commit 01043416fe2d47d23207baeccaa7f35207719e27
diff --git a/content-sample/icons/Mixi2Icon.svg b/content-sample/icons/Mixi2Icon.svg
new file mode 100644
index 00000000..6d4f87da
--- /dev/null
+++ b/content-sample/icons/Mixi2Icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"></svg>
diff --git a/package.json b/package.json
index cbddcccc..bcac1fd3 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
     "@mui/material": "5.16.9",
     "@mui/utils": "6.1.10",
     "@sentry/browser": "8.42.0",
-    "bicstone": "1.5.0",
+    "bicstone": "1.6.1",
     "date-fns": "4.1.0",
     "date-fns-tz": "3.2.0",
     "fuse.js": "7.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 23ea7d56..1c9f88f5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -33,8 +33,8 @@ importers:
         specifier: 8.42.0
         version: 8.42.0
       bicstone:
-        specifier: 1.5.0
-        version: 1.5.0
+        specifier: 1.6.1
+        version: 1.6.1
       date-fns:
         specifier: 4.1.0
         version: 4.1.0
@@ -2659,8 +2659,8 @@ packages:
     resolution: {integrity: sha512-kIPXZS5qwyKiX/HcRvDYfmBQUa8XP17I0mYZZ0y4UhpYOSvtsLHDYqmomS+Mj20aDvD3knEiQ0ecQy2nhio3yA==}
     engines: {node: '>8.0.0'}
 
-  bicstone@1.5.0:
-    resolution: {integrity: sha512-QWyL3XLxdbi37vvUQxY2s7mzy0cy9fZmU1gfdGUm3+/XiPIS9tbeYUIrpL/p4bYh4aXTO0gf8ukcZ6068j2eYg==}
+  bicstone@1.6.1:
+    resolution: {integrity: sha512-ecVRcVAnwWUiuCDPM697h3HSXaDxS5DctiqDnAvk57ccXkCFvKEeB7DLQoteoshPtccMMJkS3l7wNiPcDo7u8Q==}
     engines: {node: '>=16.0.0'}
     hasBin: true
 
@@ -10626,7 +10626,7 @@ snapshots:
     dependencies:
       open: 7.4.2
 
-  bicstone@1.5.0: {}
+  bicstone@1.6.1: {}
 
   big.js@5.2.2: {}
 
diff --git a/src/components/icons/IconBase.tsx b/src/components/icons/IconBase.tsx
index c45678fb..9e2c7c8c 100644
--- a/src/components/icons/IconBase.tsx
+++ b/src/components/icons/IconBase.tsx
@@ -8,6 +8,6 @@ import styled from "@emotion/styled";
 
 export const IconBase = styled("div")(({ theme }) => ({
   display: "inline-block",
-  width: theme.spacing(4),
-  height: theme.spacing(4),
+  width: theme.spacing(3),
+  height: theme.spacing(3),
 }));
diff --git a/src/components/icons/Mixi2Icon.tsx b/src/components/icons/Mixi2Icon.tsx
new file mode 100644
index 00000000..9fa51d71
--- /dev/null
+++ b/src/components/icons/Mixi2Icon.tsx
@@ -0,0 +1,9 @@
+import styled from "@emotion/styled";
+
+import { IconBase } from "./IconBase";
+
+import icon from "@/content/icons/Mixi2Icon.svg";
+
+export const Mixi2Icon = styled(IconBase)(({ theme }) => ({
+  content: `url(${icon})`,
+}));
diff --git a/src/features/Bio/BioCardList.tsx b/src/features/Bio/BioCardList.tsx
index 0c90dd3f..bbe8cf24 100644
--- a/src/features/Bio/BioCardList.tsx
+++ b/src/features/Bio/BioCardList.tsx
@@ -14,6 +14,7 @@ import { InstagramIcon } from "@/components/icons/InstagramIcon";
 import { LaprasIcon } from "@/components/icons/LaprasIcon";
 import { LinkedInIcon } from "@/components/icons/LinkedInIcon";
 import { MisskeyIcon } from "@/components/icons/MisskeyIcon";
+import { Mixi2Icon } from "@/components/icons/Mixi2Icon";
 import { MstdnIcon } from "@/components/icons/MstdnIcon";
 import { NoteIcon } from "@/components/icons/NoteIcon";
 import { NpmIcon } from "@/components/icons/NpmIcon";
@@ -37,15 +38,13 @@ export const BioCardList = (): React.JSX.Element => {
     "facebook",
     "linkedin",
     "youtrust",
+    "mixi2",
     "zenn",
-    "note",
     "speakerdeck",
-  ] as const satisfies LinkKeys[];
-
-  const moreLinkKeys = [
+    "note",
+    "qiita",
     "github",
     "npm",
-    "qiita",
     "findy",
     "forkwell",
     "lapras",
@@ -66,6 +65,7 @@ export const BioCardList = (): React.JSX.Element => {
     lapras: <LaprasIcon aria-hidden="true" />,
     linkedin: <LinkedInIcon aria-hidden="true" />,
     misskey: <MisskeyIcon aria-hidden="true" />,
+    mixi2: <Mixi2Icon aria-hidden="true" />,
     mstdn: <MstdnIcon aria-hidden="true" />,
     note: <NoteIcon aria-hidden="true" />,
     npm: <NpmIcon area-hidden="true" />,
@@ -76,23 +76,25 @@ export const BioCardList = (): React.JSX.Element => {
     x: <XIcon aria-hidden="true" />,
     youtrust: <YoutrustIcon aria-hidden="true" />,
     zenn: <ZennIcon aria-hidden="true" />,
-  } as const satisfies Record<
-    (typeof linkKeys)[number] | (typeof moreLinkKeys)[number],
-    React.JSX.Element
-  >;
+  } as const satisfies Record<(typeof linkKeys)[number], React.JSX.Element>;
 
   return (
     <div
       css={(theme) => ({
         display: "grid",
         gap: theme.spacing(3),
-        gridTemplateColumns: "repeat(4, 1fr)",
+        gridTemplateColumns: "repeat(5, 1fr)",
+        maxHeight: expend ? "none" : theme.spacing(76),
+        overflow: "hidden",
+        paddingBottom: theme.spacing(10),
+        position: "relative",
         width: "100%",
         [theme.breakpoints.down("md")]: {
           gridTemplateColumns: "repeat(3, 1fr)",
+          maxHeight: expend ? "none" : theme.spacing(106),
         },
         [theme.breakpoints.down("sm")]: {
-          gridTemplateColumns: "repeat(2, 1fr)",
+          maxHeight: expend ? "none" : theme.spacing(88),
         },
       })}
     >
@@ -111,60 +113,26 @@ export const BioCardList = (): React.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>
+      {!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(11),
+            justifyContent: "center",
+            left: 0,
+            position: "absolute",
+            width: "100%",
+          })}
+        >
+          <Button variant="outlined" onClick={handleExpendButtonClick}>
+            もっと見る
+          </Button>
+        </div>
+      )}
     </div>
   );
 };
diff --git a/src/features/Bio/BioSocialLinkCard.tsx b/src/features/Bio/BioSocialLinkCard.tsx
index 71fade7a..29a2ca48 100644
--- a/src/features/Bio/BioSocialLinkCard.tsx
+++ b/src/features/Bio/BioSocialLinkCard.tsx
@@ -51,11 +51,36 @@ export const BioSocialLinkCard = ({
       title="外部リンクのため、別ウインドウで開きます"
     >
       {avatar}
-      <div>
-        <Typography variant="body1" component="h2" fontWeight="bold">
+      <div
+        css={{
+          overflow: "hidden",
+          width: "100%",
+        }}
+      >
+        <Typography
+          variant="body2"
+          component="h2"
+          fontWeight="bold"
+          css={(theme) => ({
+            [theme.breakpoints.down("sm")]: {
+              fontSize: theme.typography.caption.fontSize,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+            },
+          })}
+        >
           {title}
         </Typography>
-        <Typography variant="caption" color="text.secondary">
+        <Typography
+          variant="caption"
+          color="text.secondary"
+          css={(theme) => ({
+            [theme.breakpoints.down("sm")]: {
+              display: "none",
+            },
+          })}
+        >
           {subTitle}
         </Typography>
       </div>