Merge pull request #555 from MH4GF/renew-article-list

renew article list
MH4GF · Dec 22, 2024 · 3401d92 · 3401d92
2 parents 9b74e09 + ce68dbd
commit 3401d92
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 60 deletions.
diff --git a/app/(pages)/articles/page.tsx b/app/(pages)/articles/page.tsx
diff --git a/app/_features/articles/ArticleList.tsx b/app/_features/articles/ArticleList.tsx
@@ -12,10 +12,14 @@ export const ArticleList = ({ tag }: Props): JSX.Element => {
   const articlesMeta = getArticlesMeta({ tag });
 
   return (
-    <div className="grid gap-12">
-      {articlesMeta.map((article) => (
-        <ArticleListItem key={article.title} {...article} />
-      ))}
+    <div className="blur-enter-content">
+      <h1 className="text-xl">All Writing</h1>
+
+      <div className="mt-12 grid gap-6 blur-enter-content enter-step-80">
+        {articlesMeta.map((article) => (
+          <ArticleListItem key={article.title} {...article} />
+        ))}
+      </div>
     </div>
   );
 };
diff --git a/app/_features/articles/ArticleListItem.tsx b/app/_features/articles/ArticleListItem.tsx
@@ -1,8 +1,8 @@
-import { ExternalLinkIcon, Time } from "../../_components";
+import { MoveUpRight } from "lucide-react";
+import { Time } from "../../_components";
 import { format } from "../../_utils";
 import { UniversalLink } from "../viewTransition";
 
-import { Tag } from "./Tag";
 import type { ArticleMeta } from "./type";
 
 type Props = ArticleMeta;
@@ -12,26 +12,22 @@ export const ArticleListItem = ({
   href,
   externalLink,
   publishedAt: _publishedAt,
-  tags,
 }: Props) => {
   const publishedAt = format(_publishedAt);
 
   return (
-    <article className="grid gap-4">
-      <h2 className="text-xl">
-        <UniversalLink href={href} isExternal={externalLink} isEnabledUnderline>
+    <article className="flex gap-2 items-center justify-between">
+      <h2 className="text-base font-normal">
+        <UniversalLink href={href} isExternal={externalLink} isEnabledHoveredUnderline>
           {title}
-          {externalLink && <ExternalLinkIcon />}
+          {externalLink && (
+            <MoveUpRight className="mb-[-3px] ml-0.5 inline-block h-4 w-auto align-top text-zinc-500 dark:text-zinc-400" />
+          )}
         </UniversalLink>
       </h2>
-      <div className="flex justify-between">
-        <div className="flex gap-2">
-          {tags.map((tag) => (
-            <Tag key={tag} tag={tag} />
-          ))}
-        </div>
-        <Time dateTime={publishedAt}>{publishedAt}</Time>
-      </div>
+      <Time dateTime={publishedAt} className="shrink-0">
+        {publishedAt}
+      </Time>
     </article>
   );
 };
diff --git a/app/_features/articles/Tag.tsx b/app/_features/articles/Tag.tsx
@@ -1,5 +1,3 @@
-import { UniversalLink } from "../viewTransition";
-
 import { tagLabelMap } from "./constants";
 import type { TagEnum } from "./type";
 
@@ -11,12 +9,8 @@ export const Tag = ({ tag }: Props) => {
   const label = tagLabelMap[tag];
 
   return (
-    <UniversalLink
-      href={`/articles/tags/${tag}`}
-      isEnabledUnderline
-      className="rounded-sm border border-zinc-200 px-1 py-0.5 text-xs text-zinc-500 dark:hover:text-zinc-500 dark:text-zinc-400 hover:text-zinc-700"
-    >
+    <span className="rounded-sm border border-zinc-600 px-1 py-0.5 text-xs text-zinc-500">
       {label}
-    </UniversalLink>
+    </span>
   );
 };
diff --git a/app/_features/viewTransition/UniversalLink.tsx b/app/_features/viewTransition/UniversalLink.tsx
@@ -8,14 +8,27 @@ import { isSameOrigin } from "./isSameOrigin";
 const animatedUnderline =
   "no-underline transition-colors duration-300 border-b border-solid border-zinc-200 hover:border-zinc-500 dark:border-zinc-700 dark:hover:border-zinc-500";
 
+const hoveredUnderline =
+  "no-underline hover:border-b hover:border-solid hover:border-zinc-200 dark:hover:border-zinc-700";
+
 type Props = LinkProps & {
   isExternal?: boolean;
   isEnabledUnderline?: boolean;
+  isEnabledHoveredUnderline?: boolean;
 };
 
 export const UniversalLink = forwardRef<HTMLAnchorElement, Props>(
-  ({ isExternal, isEnabledUnderline = false, className: _className, ...props }: Props, ref) => {
-    const className = `${_className || ""} ${isEnabledUnderline ? animatedUnderline : ""}`;
+  (
+    {
+      isExternal,
+      isEnabledUnderline = false,
+      isEnabledHoveredUnderline = false,
+      className: _className,
+      ...props
+    }: Props,
+    ref,
+  ) => {
+    const className = `${_className || ""} ${isEnabledUnderline ? animatedUnderline : isEnabledHoveredUnderline ? hoveredUnderline : ""}`;
 
     if (isExternal || !isSameOrigin(props.href)) {
       return (

diff --git a/app/articles/[slug]/__tests__/page.e2e.ts b/app/articles/[slug]/__tests__/page.e2e.ts
@@ -40,7 +40,7 @@ test.describe("Command Palette", () => {
     await page.getByRole("option", { name: "All Writing" }).click();
 
     await expect(page.getByRole("dialog")).not.toBeVisible();
-    await expect(page.getByRole("heading", { name: "Articles RSS" })).toBeVisible();
+    await expect(page.getByRole("heading", { name: "All Writing" })).toBeVisible();
   });
 
   test("Navigate to `Source of this site` on another tab", async ({ page }) => {
@@ -63,7 +63,7 @@ test.describe("Command Palette", () => {
     await page.keyboard.press("Enter");
 
     await expect(page.getByRole("dialog")).not.toBeVisible();
-    await expect(page.getByRole("heading", { name: "Articles RSS" })).toBeVisible();
+    await expect(page.getByRole("heading", { name: "All Writing" })).toBeVisible();
   });
 
   test("Navigate to `Source of this site` with Enter key", async ({ page }) => {

diff --git a/app/articles/[slug]/_features/ArticleMetaDetail.tsx b/app/articles/[slug]/_features/ArticleMetaDetail.tsx
@@ -1,7 +1,6 @@
 import Image from "next/image";
 
 import { MyAvatar, Time } from "@/app/_components";
-import { Tag } from "@/app/_features";
 import { format } from "@/app/_utils";
 import type { Article } from "contentlayer/generated";
 import type { FC } from "react";
@@ -11,7 +10,7 @@ interface Props {
 }
 
 export const ArticleMetaDetail: FC<Props> = ({
-  article: { headingImage, title, publishedAt: _publishedAt, tags },
+  article: { headingImage, title, publishedAt: _publishedAt },
 }) => {
   const publishedAt = format(new Date(_publishedAt));
 
@@ -45,11 +44,6 @@ export const ArticleMetaDetail: FC<Props> = ({
           <span className="text-sm text-foreground-sub leading-none">5 min read</span>
         </div>
       </div>
-      <div className="mt-4 md:mt-8 flex justify-center gap-2">
-        {tags.map((tag) => (
-          <Tag key={tag} tag={tag} />
-        ))}
-      </div>
     </div>
   );
 };
diff --git a/app/articles/page.tsx b/app/articles/page.tsx
@@ -0,0 +1,15 @@
+import type { Metadata } from "next";
+
+import { ArticleList } from "../_features";
+
+export default function Page() {
+  return (
+    <main className="max-w-3xl mx-auto py-16 md:py-32 px-4 md:px-0">
+      <ArticleList />
+    </main>
+  );
+}
+
+export const metadata: Metadata = {
+  title: "Articles",
+};
diff --git a/app/globals.css b/app/globals.css
@@ -112,6 +112,10 @@
       animation-delay: calc(var(--enter-initial) + var(--enter-stage) * var(--enter-step));
     }
 
+    .blur-enter-content.enter-step-80 > * {
+      --enter-step: 80ms;
+    }
+
     .blur-enter-content > *:nth-child(1) {
       --enter-stage: 1;
     }