feat: Add mixi2 link

bicstone · Dec 17, 2024 · 2dcf983 · 2dcf983
1 parent 2cb837d
commit 2dcf983
Show file tree

Hide file tree

Showing 8 changed files with 80 additions and 77 deletions.
diff --git a/content b/content
diff --git a/content-sample/icons/Mixi2Icon.svg b/content-sample/icons/Mixi2Icon.svg
diff --git 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
diff --git 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
@@ -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
@@ -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
@@ -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>