Merge pull request #121 from syakoo/feat/impl-old-writing-message

Feat/impl old writing message
syakoo · Dec 21, 2024 · e0f6b99 · e0f6b99
2 parents 5e6717c + 7f82b3a
commit e0f6b99
Show file tree

Hide file tree

Showing 12 changed files with 45 additions and 26 deletions.
diff --git a/src/app/works/page.tsx b/src/app/works/page.tsx
@@ -18,7 +18,7 @@ export const metadata: Metadata = {
 const WorksPage = () => {
   return (
     <HeaderFooterTemplate>
-      <Container as="main" center paddingBottom="400" paddingX="200" size="100">
+      <Container as="main" center paddingX="200" paddingY="400" size="100">
         <WorkList />
       </Container>
     </HeaderFooterTemplate>

diff --git a/src/app/writings/page.tsx b/src/app/writings/page.tsx
@@ -31,7 +31,7 @@ const WritingsPage = async () => {
 
   return (
     <HeaderFooterTemplate>
-      <Container as="main" center paddingBottom="400" paddingX="200" size="100">
+      <Container as="main" center paddingX="200" paddingY="400" size="100">
         <Suspense>
           <WritingList heads={metas} />
         </Suspense>

diff --git a/src/components/header-footer-template/__snapshots__/header-footer-template.test.tsx.snap b/src/components/header-footer-template/__snapshots__/header-footer-template.test.tsx.snap
@@ -13,10 +13,10 @@ exports[`HeaderFooterTemplate スナップショット Sample 1`] = `
           class="center_centerStyle__1yvz6qj0"
         >
           <header
-            class="container_containerStyle__s76bfe3 container_containerStyle_size_200__s76bfe6 container_containerStyle_variants_size_200__s76bfe2 container_containerStyle_paddingX_200__s76bfe13 padding_paddingXVariants_200__409uzlv container_containerStyle_paddingY_300__s76bfe1b padding_paddingYVariants_300__409uzl13"
+            class="container_containerStyle__s76bfe3 container_containerStyle_size_200__s76bfe6 container_containerStyle_variants_size_200__s76bfe2"
           >
             <div
-              class="flex_flexStyle__12xne02i flex_flexStyle_align_center__12xne02s flex_flexStyle_variants_align_center__12xne027 flex_flexStyle_direction_row__12xne02j flex_flexStyle_gap_100__12xne02y flex_flexStyle_variants_gap_100__12xne02d flex_flexStyle_justify_spaceBetween__12xne02o flex_flexStyle_variants_justify_spaceBetween__12xne023 flex_flexStyle_wrap_true__12xne0213"
+              class="header_headerStyle__ik9xif0"
             >
               <a
                 aria-label="Go to the homepage"

diff --git a/src/components/header-footer-template/header-footer-template.css.ts b/src/components/header-footer-template/header-footer-template.css.ts
@@ -12,6 +12,9 @@ export const containerStyle = style({
 
 export const containerHeaderStyle = style({
   gridArea: "header",
+  position: "sticky",
+  top: 0,
+  zIndex: 100,
 });
 export const containerMainStyle = style({
   gridArea: "main",

diff --git a/src/components/header-footer-template/header/__snapshots__/header.test.tsx.snap b/src/components/header-footer-template/header/__snapshots__/header.test.tsx.snap
@@ -7,10 +7,10 @@ exports[`Header スナップショット Sample 1`] = `
       class="center_centerStyle__1yvz6qj0"
     >
       <header
-        class="container_containerStyle__s76bfe3 container_containerStyle_size_200__s76bfe6 container_containerStyle_variants_size_200__s76bfe2 container_containerStyle_paddingX_200__s76bfe13 padding_paddingXVariants_200__409uzlv container_containerStyle_paddingY_300__s76bfe1b padding_paddingYVariants_300__409uzl13"
+        class="container_containerStyle__s76bfe3 container_containerStyle_size_200__s76bfe6 container_containerStyle_variants_size_200__s76bfe2"
       >
         <div
-          class="flex_flexStyle__12xne02i flex_flexStyle_align_center__12xne02s flex_flexStyle_variants_align_center__12xne027 flex_flexStyle_direction_row__12xne02j flex_flexStyle_gap_100__12xne02y flex_flexStyle_variants_gap_100__12xne02d flex_flexStyle_justify_spaceBetween__12xne02o flex_flexStyle_variants_justify_spaceBetween__12xne023 flex_flexStyle_wrap_true__12xne0213"
+          class="header_headerStyle__ik9xif0"
         >
           <a
             aria-label="Go to the homepage"

diff --git a/src/components/header-footer-template/header/header.css.ts b/src/components/header-footer-template/header/header.css.ts
@@ -0,0 +1,16 @@
+import { style } from "@vanilla-extract/css";
+
+import { theme } from "@/design-system/theme.css";
+
+export const headerHeightPx = 74;
+export const headerStyle = style({
+  background: `color-mix(in srgb, ${theme.color.background.primary} 80%, transparent)`,
+  height: `${headerHeightPx}px`,
+  display: "flex",
+  justifyContent: "space-between",
+  flexWrap: "wrap",
+  alignItems: "center",
+  gap: theme.space[100],
+  backdropFilter: "blur(10px)",
+  paddingInline: theme.space[200],
+});
diff --git a/src/components/header-footer-template/header/header.tsx b/src/components/header-footer-template/header/header.tsx
@@ -10,6 +10,8 @@ import { artPaths } from "@/features/arts/config/paths";
 import { workPaths } from "@/features/works/config/paths";
 import { writingPaths } from "@/features/writings/config/paths";
 
+import { headerStyle } from "./header.css";
+
 const NavLink: React.FC<{ children: React.ReactNode; href: string }> = ({
   children,
   href,
@@ -27,8 +29,8 @@ const NavLink: React.FC<{ children: React.ReactNode; href: string }> = ({
 export const Header: React.FC = () => {
   return (
     <Center>
-      <Container as="header" paddingX="200" paddingY="300" size="200">
-        <Row align="center" justify="spaceBetween" wrap>
+      <Container as="header" size="200">
+        <div className={headerStyle}>
           <Link aria-label="Go to the homepage" href="/">
             <SyakooLabText />
           </Link>
@@ -37,7 +39,7 @@ export const Header: React.FC = () => {
             <NavLink href={workPaths.list()}>Works</NavLink>
             <NavLink href={artPaths.list()}>Arts</NavLink>
           </Row>
-        </Row>
+        </div>
       </Container>
     </Center>
   );

diff --git a/src/features/arts/art-list/__snapshots__/art-list.test.tsx.snap b/src/features/arts/art-list/__snapshots__/art-list.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`ArtList スナップショット Sample 1`] = `
 <body>
   <div>
     <section
-      class="container_containerStyle__s76bfe3 container_containerStyle_size_100__s76bfe5 container_containerStyle_variants_size_100__s76bfe1 container_containerStyle_center_true__s76bfe7 container_containerStyle_paddingBottom_400__s76bfey padding_paddingBottomVariants_400__409uzlq container_containerStyle_paddingX_200__s76bfe13 padding_paddingXVariants_200__409uzlv"
+      class="container_containerStyle__s76bfe3 container_containerStyle_size_100__s76bfe5 container_containerStyle_variants_size_100__s76bfe1 container_containerStyle_center_true__s76bfe7 container_containerStyle_paddingX_200__s76bfe13 padding_paddingXVariants_200__409uzlv container_containerStyle_paddingY_400__s76bfe1c padding_paddingYVariants_400__409uzl14"
     >
       <div
         class="flex_flexStyle__12xne02i flex_flexStyle_align_stretch__12xne02u flex_flexStyle_variants_align_stretch__12xne029 flex_flexStyle_direction_column__12xne02k flex_flexStyle_gap_200__12xne02z flex_flexStyle_variants_gap_200__12xne02e flex_flexStyle_justify_flexStart__12xne02l flex_flexStyle_variants_justify_flexStart__12xne020"

diff --git a/src/features/arts/art-list/art-list.tsx b/src/features/arts/art-list/art-list.tsx
@@ -11,13 +11,7 @@ type ArtListProps = {
 
 export const ArtList: React.FC<ArtListProps> = ({ heads }) => {
   return (
-    <Container
-      as="section"
-      center
-      paddingBottom="400"
-      paddingX="200"
-      size="100"
-    >
+    <Container as="section" center paddingX="200" paddingY="400" size="100">
       <Col gap="200">
         <H2>Arts</H2>
         <ul className={artListStyles.listContainer}>

diff --git a/src/features/writings/writing-detail/__snapshots__/writing-detail.test.tsx.snap b/src/features/writings/writing-detail/__snapshots__/writing-detail.test.tsx.snap
@@ -110,7 +110,9 @@ exports[`WritingDetail スナップショット Sample 1`] = `
               </svg>
             </div>
             <div>
-              この記事は古い内容である可能性があります。
+              この記事は最終更新日から
+              1
+              年経過しています。 内容が古い可能性があります。
             </div>
           </aside>
           <p>

diff --git a/src/features/writings/writing-detail/writing-detail.css.ts b/src/features/writings/writing-detail/writing-detail.css.ts
@@ -1,5 +1,6 @@
 import { globalStyle, style } from "@vanilla-extract/css";
 
+import { headerHeightPx } from "@/components/header-footer-template/header/header.css";
 import { theme } from "@/design-system/theme.css";
 
 // 縦配置のメディア条件式
@@ -50,7 +51,7 @@ export const writingDetailStyles = {
   }),
   stickyContainer: style({
     position: "sticky",
-    top: theme.space[200],
+    top: `calc(${theme.space[200]} + ${headerHeightPx}px)`,
   }),
 };
 

diff --git a/src/features/writings/writing-detail/writing-detail.tsx b/src/features/writings/writing-detail/writing-detail.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { addYears, isBefore } from "date-fns";
+import { differenceInYears } from "date-fns";
 
 import { Spacer } from "@/design-system/layout";
 import { Link, FadeIn } from "@/design-system/ui";
@@ -29,11 +29,10 @@ export const WritingDetail: React.FC<WritingDetailProps> = ({ writing }) => {
   useMermaid();
   useTwitter();
   const MDXComponent = resolveMDXContent(writing.body).data;
-  const isOldWriting = (() => {
-    // NOTE: diary の場合は古くても表示する必要はないと判断
-    if (writing.head.type === "diary") return false;
 
-    return isBefore(new Date(writing.head.published), addYears(new Date(), -1));
+  const yearsSinceLastUpdate = (() => {
+    const writingUpdated = writing.head.updated ?? writing.head.published;
+    return differenceInYears(new Date(), new Date(writingUpdated));
   })();
 
   return (
@@ -43,9 +42,11 @@ export const WritingDetail: React.FC<WritingDetailProps> = ({ writing }) => {
           <WritingHeader head={writing.head} />
         </div>
         <div className={writingDetailStyles.contentWrapper}>
-          {isOldWriting ? (
+          {/* NOTE: Diary の記事は古くても良い */}
+          {writing.head.type !== "diary" && yearsSinceLastUpdate >= 1 ? (
             <Note variant="warn">
-              この記事は古い内容である可能性があります。
+              この記事は最終更新日から{yearsSinceLastUpdate}年経過しています。
+              内容が古い可能性があります。
             </Note>
           ) : null}
           <MDXComponent components={components} />