From 4b925293b79a40ee55d319a7ce6a67249cacd973 Mon Sep 17 00:00:00 2001
From: wappon28dev <wappon_28_dev@ruru.be>
Date: Mon, 15 Apr 2024 02:15:29 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20=E3=83=AA=E3=82=AF=E3=82=A8?=
 =?UTF-8?q?=E3=82=B9=E3=83=88=E3=82=92=E9=81=A9=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/astro.config.mjs                    | 10 ++--
 client/src/components/HamburgerMenu.tsx    |  5 +-
 client/src/components/VisualMain.astro     | 10 ++--
 client/src/components/VisualSub.astro      | 15 ++++-
 client/src/components/list/BlogsList.astro |  2 +-
 client/src/components/list/WorksList.astro |  9 +--
 client/src/lib/middlewares/rewrite-html.ts |  2 +-
 client/src/lib/services/image.ts           |  2 +-
 client/src/lib/services/microcms.ts        | 65 +++++++++++-----------
 client/src/lib/style.ts                    |  7 ---
 client/src/pages/index.astro               |  2 +-
 client/src/pages/works/[id].astro          | 12 ++--
 client/src/styles/global.css               | 19 +++++++
 13 files changed, 95 insertions(+), 65 deletions(-)

diff --git a/client/astro.config.mjs b/client/astro.config.mjs
index ac779e1..55b5a0d 100644
--- a/client/astro.config.mjs
+++ b/client/astro.config.mjs
@@ -1,11 +1,11 @@
 /* eslint-disable import/no-unresolved */
-import { defineConfig } from "astro/config";
 import react from "@astrojs/react";
-import pandacss from "@pandacss/astro";
 import sitemap from "@astrojs/sitemap";
-import metaTags from "astro-meta-tags";
-import icon from "astro-icon";
+import pandacss from "@pandacss/astro";
+import { defineConfig } from "astro/config";
 import compress from "astro-compress";
+import icon from "astro-icon";
+import metaTags from "astro-meta-tags";
 
 // https://astro.build/config
 export default defineConfig({
@@ -30,7 +30,7 @@ export default defineConfig({
   },
   vite: {
     optimizeDeps: {
-      exclude: "mock/*.json",
+      exclude: "*.json",
     },
   },
 });
diff --git a/client/src/components/HamburgerMenu.tsx b/client/src/components/HamburgerMenu.tsx
index 5525c9f..a760f7c 100644
--- a/client/src/components/HamburgerMenu.tsx
+++ b/client/src/components/HamburgerMenu.tsx
@@ -47,10 +47,11 @@ export function HamburgerMenu({
       left="0"
       position="fixed"
       style={{
-        clipPath: isOpened ? "inset(0 0 0 0)" : "inset(0 0 100% 0)",
+        opacity: isOpened ? 1 : 0,
+        display: isOpened ? "block" : "none",
         backgroundColor: token(bgColor),
       }}
-      transition="clip-path .3s ease-in-out"
+      transition="opacity .3s ease-in-out"
       width="100%"
       zIndex="header"
     >
diff --git a/client/src/components/VisualMain.astro b/client/src/components/VisualMain.astro
index ca4683f..aae5834 100644
--- a/client/src/components/VisualMain.astro
+++ b/client/src/components/VisualMain.astro
@@ -6,12 +6,12 @@ import {
   detectMediaKey,
   type MediaKey,
 } from "@client/lib/middlewares/rewriters/convert2media";
-import { inferImageSize } from "@client/lib/services/image";
 import { modifySrc } from "@client/lib/services/media";
 import { YouTube, Vimeo } from "astro-embed";
 import { Image, getImage } from "astro:assets";
 import { css } from "panda/css";
 import { styled as p } from "panda/jsx";
+import { inferImageSize } from "src/lib/services/image";
 import { VideoPlayer } from "./VideoPlayer";
 
 type Props = {
@@ -28,8 +28,10 @@ let imgSize: { width: number; height: number } = { height: 0, width: 0 };
 const media = async (): Promise<void> => {
   const ext = url.split(".").at(-1);
   if (ext == null) throw new Error(`ext is null: ${url}`);
-  imgSize = inferImageSize(modifySrc(url));
   key = detectMediaKey(ext);
+  if (key === "img") {
+    imgSize = inferImageSize(modifySrc(url));
+  }
 };
 
 const youtube = async (): Promise<void> => {
@@ -67,7 +69,7 @@ if (url.startsWith(INFO.site.assets)) {
 <p.div
   className={css({
     "& > *": {
-      maxH: "67.5vh", // タイトルが見える高さ
+      maxH: "66vh", // タイトルが見える高さ
       aspectRatio: "16 / 9",
       margin: "0 auto",
     },
@@ -89,7 +91,7 @@ if (url.startsWith(INFO.site.assets)) {
             />
           );
         case "video":
-          return <VideoPlayer autoPlay controls muted src={modifySrc(url)} />;
+          return <VideoPlayer autoPlay loop muted src={modifySrc(url)} />;
         case "youtube":
           return (
             <YouTube
diff --git a/client/src/components/VisualSub.astro b/client/src/components/VisualSub.astro
index 3fb1761..f9a4db4 100644
--- a/client/src/components/VisualSub.astro
+++ b/client/src/components/VisualSub.astro
@@ -10,14 +10,25 @@ type Img = { url: string; width: number; height: number };
 const { data } = Astro.props;
 ---
 
-<VStack gap="5">
+<VStack
+  gap={{
+    base: "5",
+    mdDown: "3",
+  }}
+>
   {
     data.map((row, rowIdx) => {
       const imgList = row.imgList as Img[];
 
       return (
         // eslint-disable-next-line react/no-array-index-key
-        <HStack key={rowIdx} gap="5">
+        <HStack
+          key={rowIdx}
+          gap={{
+            base: "5",
+            mdDown: "3",
+          }}
+        >
           {imgList.map((img, columnIdx) => (
             // eslint-disable-next-line react/no-array-index-key
             <p.div key={columnIdx}>
diff --git a/client/src/components/list/BlogsList.astro b/client/src/components/list/BlogsList.astro
index b34d8b3..b4aeb73 100644
--- a/client/src/components/list/BlogsList.astro
+++ b/client/src/components/list/BlogsList.astro
@@ -11,7 +11,7 @@ type Props = {
 };
 
 const { needOmit = false, ommitLength = 3 } = Astro.props;
-const blogsList = await getContentList("blogs", { fields: ["id", "title"] });
+const blogsList = await getContentList("blogs");
 
 const omittable = blogsList.contents.length > ommitLength;
 const contents =
diff --git a/client/src/components/list/WorksList.astro b/client/src/components/list/WorksList.astro
index 63f41bf..9b81753 100644
--- a/client/src/components/list/WorksList.astro
+++ b/client/src/components/list/WorksList.astro
@@ -7,7 +7,7 @@ import { Image } from "astro:assets";
 import { css } from "panda/css";
 import { styled as p } from "panda/jsx";
 
-const worksList = await getContentList("works", { fields: ["id", "title"] });
+const worksList = await getContentList("works");
 ---
 
 <p.div
@@ -40,9 +40,9 @@ const worksList = await getContentList("works", { fields: ["id", "title"] });
         >
           <Image
             alt={title}
-            height={ogpImg.height}
-            src={ogpImg.url}
-            width={ogpImg.width}
+            height={ogpImg?.height ?? 180}
+            src={ogpImg?.url ?? "/assets/external/works/test/color_bar.png"}
+            width={ogpImg?.width ?? 320}
           />
           <p.div
             h="100%"
@@ -64,6 +64,7 @@ const worksList = await getContentList("works", { fields: ["id", "title"] });
               {videoOnHover != null && (
                 <VideoPlayer
                   client:visible
+                  loop
                   muted
                   playOnHover
                   src={modifySrc(videoOnHover)}
diff --git a/client/src/lib/middlewares/rewrite-html.ts b/client/src/lib/middlewares/rewrite-html.ts
index a0be037..1224997 100644
--- a/client/src/lib/middlewares/rewrite-html.ts
+++ b/client/src/lib/middlewares/rewrite-html.ts
@@ -21,7 +21,7 @@ export async function rewriteHTML(
 
   // eslint-disable-next-line no-restricted-syntax
   for await (const rewriter of writers) {
-    result = await rewriter(result);
+    result = await rewriter(result ?? "");
   }
 
   return result;
diff --git a/client/src/lib/services/image.ts b/client/src/lib/services/image.ts
index db3866e..3e4a695 100644
--- a/client/src/lib/services/image.ts
+++ b/client/src/lib/services/image.ts
@@ -2,7 +2,7 @@ import imageSize from "image-size";
 
 /**
  * NOTE: This fn is only used in server-side code (in `dev`/`build`);
- *       Do not use this in client-side code. (caused by `image-size`)
+ *       Do not use this in client-side code. (due to `image-size`)
  * @param path path WITHOUT leading slash
  * @returns URL to the `/public` path
  */
diff --git a/client/src/lib/services/microcms.ts b/client/src/lib/services/microcms.ts
index 917a8ff..ca55c22 100644
--- a/client/src/lib/services/microcms.ts
+++ b/client/src/lib/services/microcms.ts
@@ -1,10 +1,10 @@
 import type { MicroCMSQueries } from "microcms-js-sdk";
 import { createClient } from "microcms-js-sdk";
+import blogsDetail from "../../../public/assets/mock/blogs-detail.json";
+import blogsList from "../../../public/assets/mock/blogs-list.json";
+import worksDetail from "../../../public/assets/mock/works-detail.json";
+import worksList from "../../../public/assets/mock/works-list.json";
 import type { EndPoints } from "../types/cms-types";
-import blogsDetail from "~/assets/mock/blogs-detail.json";
-import blogsList from "~/assets/mock/blogs-list.json";
-import worksDetail from "~/assets/mock/works-detail.json";
-import worksList from "~/assets/mock/works-list.json";
 
 export const microcms = createClient({
   serviceDomain: import.meta.env.CLIENT_MICROCMS_SERVICE_DOMAIN,
@@ -13,40 +13,43 @@ export const microcms = createClient({
 
 export async function getContentList<T extends keyof EndPoints["gets"]>(
   key: T,
-  _queries: MicroCMSQueries = {},
+  queries: MicroCMSQueries = {},
 ): Promise<EndPoints["gets"][T]> {
-  switch (key) {
-    case "blogs":
-      return blogsList as any;
-    case "works":
-      return worksList as any;
-    default:
-      throw new Error("Invalid key");
+  if (process.env.NODE_ENV === "development") {
+    switch (key) {
+      case "blogs":
+        return blogsList as any;
+      case "works":
+        return worksList as any;
+      default:
+        throw new Error("Invalid key");
+    }
   }
 
-  // return await microcms.get({
-  //   endpoint: key,
-  //   queries,
-  // });
+  return await microcms.get({
+    endpoint: key,
+    queries,
+  });
 }
 
 export async function getContentDetail<T extends keyof EndPoints["get"]>(
   key: T,
-  _id: string,
-  _queries: MicroCMSQueries = {},
+  id: string,
+  queries: MicroCMSQueries = {},
 ): Promise<EndPoints["get"][T]> {
-  switch (key) {
-    case "blogs":
-      return blogsDetail as any;
-    case "works":
-      return worksDetail as any;
-    default:
-      throw new Error("Invalid key");
+  if (process.env.NODE_ENV === "development") {
+    switch (key) {
+      case "blogs":
+        return blogsDetail as any;
+      case "works":
+        return worksDetail as any;
+      default:
+        throw new Error("Invalid key");
+    }
   }
-
-  // return await microcms.getListDetail<EndPoints["get"][T]>({
-  //   endpoint: key,
-  //   contentId: id,
-  //   queries,
-  // });
+  return await microcms.getListDetail<EndPoints["get"][T]>({
+    endpoint: key,
+    contentId: id,
+    queries,
+  });
 }
diff --git a/client/src/lib/style.ts b/client/src/lib/style.ts
index 7816b2b..3066ed5 100644
--- a/client/src/lib/style.ts
+++ b/client/src/lib/style.ts
@@ -33,13 +33,6 @@ export const contentStyle = css({
       m: "3",
       overflowY: "auto",
       maxHeight: "50vh",
-      "&::-webkit-scrollbar": {
-        h: "3px",
-        w: "3px",
-      },
-      "&::-webkit-scrollbar-thumb": {
-        bg: "9u-white",
-      },
     },
   },
   "& p > code": {
diff --git a/client/src/pages/index.astro b/client/src/pages/index.astro
index a6fc903..57c86b9 100644
--- a/client/src/pages/index.astro
+++ b/client/src/pages/index.astro
@@ -9,7 +9,7 @@ import { VStack, styled as p } from "panda/jsx";
 import { WorksListOmitted } from "src/components/list/WorksListOmitted";
 import logoBg from "~/assets/images/logos/bg.svg";
 
-const worksList = await getContentList("works", { fields: ["id", "title"] });
+const worksList = await getContentList("works");
 ---
 
 <BaseLayout
diff --git a/client/src/pages/works/[id].astro b/client/src/pages/works/[id].astro
index 11948ff..4ab58c0 100644
--- a/client/src/pages/works/[id].astro
+++ b/client/src/pages/works/[id].astro
@@ -11,7 +11,7 @@ import {
 } from "@client/lib/services/microcms";
 import { contentStyle } from "@client/lib/style";
 import type { GetStaticPaths } from "astro";
-import { styled as p } from "panda/jsx";
+import { VStack, styled as p } from "panda/jsx";
 
 export const getStaticPaths = (async () => {
   const worksList = await getContentList("works", { fields: "id" });
@@ -41,7 +41,7 @@ const modifiedContent = await rewriteHTML(content as string);
     description,
   }}
 >
-  <p.div className="slide-in" pb="20" viewTransitionName="slide-in">
+  <VStack className="slide-in" gap="5" pb="20" viewTransitionName="slide-in">
     <p.div
       className="content"
       display="flex"
@@ -85,10 +85,10 @@ const modifiedContent = await rewriteHTML(content as string);
       >
         {description}
       </p.section>
-      <p.hr w="100%" />
-      <VisualSub data={visualSub} />
-      <p.hr w="100%" />
     </p.div>
+    <p.article>
+      <VisualSub data={visualSub} />
+    </p.article>
     <p.article className={contentStyle} set:html={modifiedContent} w="100%" />
-  </p.div>
+  </VStack>
 </BaseLayout>
diff --git a/client/src/styles/global.css b/client/src/styles/global.css
index e9b1fe3..0ef1f99 100644
--- a/client/src/styles/global.css
+++ b/client/src/styles/global.css
@@ -124,3 +124,22 @@ lite-youtube,
 lite-vimeo {
   max-width: unset !important;
 }
+
+:not(.code-block > pre)::-webkit-scrollbar {
+  display: none;
+}
+
+.code-block > pre {
+  &::-webkit-scrollbar {
+    height: 5px;
+    width: 5px;
+    border-radius: 10px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--colors-9u-white);
+    border-radius: 10px;
+  }
+  &::-webkit-scrollbar-corner {
+    display: none;
+  }
+}