feat(site/blog): adjust style

qhanw · Sep 14, 2023 · 7dbee84 · 7dbee84 · vercel · Sep 14, 2023
1 parent 97b2940
commit 7dbee84
Show file tree

Hide file tree

Showing 13 changed files with 87 additions and 53 deletions.
diff --git a/site/blog/app/[slug]/layout.tsx b/site/blog/app/[slug]/layout.tsx
diff --git a/site/blog/app/components/Footer.tsx b/site/blog/app/components/Footer.tsx
@@ -1,5 +1,7 @@
 import Link from "next/link";
 
+import clsx from "clsx";
+
 import IconSakura from "./Icons/sakura";
 import IconJueJin from "./Icons/juejin";
 import IconGithub from "./Icons/github";
@@ -15,23 +17,31 @@ const social = [
   { name: "YuQue", href: "https://www.yuque.com/qhan", icon: IconYuQue },
 ];
 
-export default () => (
-  <footer className="flex text-center pt-12 pb-12 mt-24 border-t-2 border-gray-100">
+type FooterProps = {
+  className?: string;
+};
+
+export default ({ className }: FooterProps) => (
+  <footer
+    className={clsx(
+      "flex items-center text-center pt-12 pb-12 mt-24 border-t-2 border-gray-100",
+      className
+    )}
+  >
     <div className="flex">
-      <Link href="/" className="inline-flex items-center">
+      <Link href="/" className="inline-flex items-center no-underline">
         <span className="sr-only">Workflow</span>
         <IconSakura className="w-8 h-8 logo-rotate text-brand" />
         <span className="text-lg ml-2 font-medium">Qhan W</span>
       </Link>
 
       {/* {siteMetadata.title} */}
     </div>
-
     <div className="flex flex-1 ml-8">
       {social.map((c) => (
         <Link
           key={c.href}
-          className="border border-solid rounded p-2 mr-2 opacity-50 hover:opacity-80 border-brand" 
+          className="border border-solid rounded p-2 mr-2 opacity-50 hover:opacity-80 border-brand"
           href={c.href}
           title={c.name}
           target="_blank"
@@ -40,24 +50,8 @@ export default () => (
         </Link>
       ))}
     </div>
-
-    {/* {[
-      { title: "Github", url: "http://github.com/qhanw", target: "_blank" },
-      { title: "YuQue", url: "https://www.yuque.com/qhan", target: "_blank" },
-      {
-        title: "JunJin",
-        url: "https://juejin.cn/user/342703357833255",
-        target: "_blank",
-      },
-    ].map(({ url, title, ...rest }) => (
-      <Link
-        className="inline-block text-gray-300 px-4 py-2 text-sm"
-        to={url}
-        key={title}
-        {...rest}
-      >
-        {title}
-      </Link>
-    ))} */}
+    <div className="text-sm opacity-50">
+      ©2022-2023 Qhan W. All Rights Reserved.
+    </div>
   </footer>
 );
diff --git a/site/blog/app/components/Header.tsx b/site/blog/app/components/Header.tsx
@@ -8,8 +8,8 @@ import IconSakura from "./Icons/sakura";
 
 const nav = [
   {
-    name: "Stories",
-    href: "/stories",
+    name: "Blog",
+    href: "/posts",
     icon: (props: any) => <Icon {...props} icon="heroicons:pencil" />,
   },
   // {
@@ -34,7 +34,7 @@ export default () => (
           <div className="flex justify-start md:w-0 md:flex-1">
             <Link href="/" className="inline-flex items-center">
               <span className="sr-only">Workflow</span>
-              <IconSakura className="w-8 h-8 sm:w-10 sm:h-10 logo-rotate text-brand" />
+              <IconSakura className="w-8 h-8 logo-rotate text-brand" />
               <span className="text-xl ml-2 font-medium">Qhan W</span>
             </Link>
           </div>

diff --git a/site/blog/app/components/PostLabel.tsx b/site/blog/app/components/PostLabel.tsx
@@ -13,7 +13,7 @@ export default ({
   color?: keyof typeof colors;
 }) => (
   <span
-    className={`${colors[color]} inline-flex items-center py-1 mr-2.5 text-xs`}
+    className={`${colors[color]} inline-flex items-center py-1 mr-2.5 text-sm`}
   >
     <Icon icon="heroicons:tag" className="mr-1 w-4 h-4" />
     {title}

diff --git a/site/blog/app/layout.tsx b/site/blog/app/layout.tsx
@@ -22,10 +22,7 @@ export default function RootLayout({
     <html lang="en">
       <body className={inter.className}>
         <Header />
-        <main className="container mx-auto px-4 pt-10">
-          {children}
-          <Footer />
-        </main>
+        <main className="container mx-auto px-4 pt-10">{children}</main>
       </body>
     </html>
   );

diff --git a/site/blog/app/page.tsx b/site/blog/app/page.tsx
@@ -1,4 +1,5 @@
 import { Icon } from "@/app/components/Icons";
+import Footer from "@/app/components/Footer";
 
 import AdmLink from "./Home/AdmLink";
 import ProjWrapper from "./Home/ProjWrapper";
@@ -14,13 +15,15 @@ export async function generateMetadata() {
 export default function Home() {
   return (
     <>
-      <h1 className="mt-4 text-xl text-slate-900 tracking-tight max-w-5xl">
-        前端开发工程师一枚，早年从事UI设计工作，现以前端开发为主，有丰富的ToB系统开发架构经验。喜欢工程化方面领域，喜欢交互设计。
+      <div className="text-xl">👉 Hi, here</div>
+      <h1 className="mt-4 text-slate-900 tracking-tight max-w-5xl">
+        我是一名软件开发工程师参与工作距今已经有十多年，有着丰富的2B系统开发及架构经验。早年从事UI设计工作，因此对用户体验交互上也具有一定的理解，现以前端开发为主，擅长以React为核心的各类技术栈进行软件开发。喜欢工程化方面领域，喜欢交互设计。
       </h1>
       <ul className="mt-4 text-slate-500 font-light">
         <li>
           🎉 技术栈包括:
-          NodeJs、React、Typescript、Electron、Antd、Sass、NextJs等。
+          React、NextJs、NodeJs、Typescript、Electron、Antd、Sass、Tailwind
+          CSS等。
         </li>
         <li>🌱 目前正在学习前端自动化测试方面知识。</li>
         <li>
@@ -77,6 +80,7 @@ export default function Home() {
           </ProjWrapper>
         ))}
       </div>
+      <Footer />
     </>
   );
 }
diff --git a/site/blog/app/posts/[slug]/layout.tsx b/site/blog/app/posts/[slug]/layout.tsx
@@ -0,0 +1,7 @@
+export default function PostLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <div className="prose mx-auto">{children}</div>;
+}
diff --git a/site/blog/app/[slug]/loading.tsx → site/blog/app/posts/[slug]/loading.tsx b/site/blog/app/[slug]/loading.tsx → site/blog/app/posts/[slug]/loading.tsx
diff --git a/site/blog/app/[slug]/page.tsx → site/blog/app/posts/[slug]/page.tsx b/site/blog/app/[slug]/page.tsx → site/blog/app/posts/[slug]/page.tsx
@@ -7,6 +7,7 @@ import remarkGfm from "remark-gfm";
 import ShikiRemarkPlugin from "remark-shiki-plugin";
 
 import { Icon } from "@/app/components/Icons";
+import PostLabel from "@/app/components/PostLabel";
 
 import seo from "@/app/utils/seo";
 
@@ -69,14 +70,31 @@ export default async ({ params }: Props) => {
 
   return (
     <>
-      <header className="text-3xl pb-6 font-extrabold">
-        {post.frontmatter.title}
+      <header className="mb-8">
+        <h1 className="slide-enter-50">{post.frontmatter.title}</h1>
+
+        <div className="opacity-50 -mt-6 flex items-center">
+          <time className="inline-flex items-center">
+            <Icon
+              icon="heroicons:calendar"
+              className="mr-1 w-4 h-4 text-brand"
+            />
+            {post.frontmatter?.date}
+          </time>
+          <span className="mx-2 w-0.5 h-0.5 bg-gray-500" />
+          {post.frontmatter?.tags.map((tag: string) => (
+            <PostLabel title={tag} key={tag} />
+          ))}
+        </div>
       </header>
       <article dangerouslySetInnerHTML={{ __html: post.html }} />
       <div className="flex justify-between my-12 text-sm">
         <span>
           {prev && (
-            <Link href={prev.slug} className="inline-flex items-center min-w-0">
+            <Link
+              href={prev.slug}
+              className="inline-flex items-center min-w-0 no-underline"
+            >
               <Icon
                 icon="heroicons:chevron-left"
                 className="mr-1 h-4 w-4 group-hover:text-gray-500"
@@ -89,7 +107,10 @@ export default async ({ params }: Props) => {
         </span>
         <span>
           {next && (
-            <Link href={next.slug} className="inline-flex items-center min-w-0">
+            <Link
+              href={next.slug}
+              className="inline-flex items-center min-w-0 no-underline"
+            >
               <span className="break-all whitespace-nowrap overflow-hidden overflow-ellipsis">
                 {next.title}
               </span>

diff --git a/site/blog/app/posts/layout.tsx b/site/blog/app/posts/layout.tsx
@@ -0,0 +1,13 @@
+import Footer from "@/app/components/Footer";
+export default function PostsLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      {children}
+      <Footer className="prose mx-auto" />
+    </>
+  );
+}
diff --git a/site/blog/app/stories/page.tsx → site/blog/app/posts/page.tsx b/site/blog/app/stories/page.tsx → site/blog/app/posts/page.tsx
@@ -41,38 +41,38 @@ export async function generateMetadata() {
   return seo({ title: "Stories" });
 }
 
-export default async function Stories() {
+export default async function Posts() {
   const posts = await getAllPosts();
 
   return (
     <>
-      <div className="uppercase py-1 mb-4 -mt-8 text-sm text-center font-medium tracking-widest text-slate-400">
+      <div className="uppercase py-1 mb-8 -mt-8 text-sm text-center font-medium tracking-widest text-slate-400">
         Total {posts?.length} Posts
       </div>
-      <div className="grid gap-8 max-w-screen-lg m-auto">
+      <div className="prose grid gap-9 m-auto">
         {posts?.map((node: any) => (
           <Link
-            href={node.slug}
-            className="p-6 section rounded-lg overflow-hidden cursor-pointer bg-slate-50 text-sm transition hover:shadow"
+            href={`/posts/${node.slug}`}
+            className="group font-normal overflow-hidden cursor-pointer no-underline transition"
             key={node.slug}
           >
+            <div className="text-2xl text-slate-600 group-hover:text-brand break-all whitespace-nowrap overflow-hidden overflow-ellipsis ease-in duration-300">
+              {node.frontmatter?.title}
+            </div>
             <div className="text-slate-400 text-sm leading-none flex items-center">
-              <time className="post-time inline-flex items-center my-2">
+              <time className="my-3 inline-flex items-center">
                 <Icon
                   icon="heroicons:calendar"
                   className="mr-1 w-4 h-4 text-brand"
                 />
                 {node.frontmatter?.date}
               </time>
-              <span className="mx-2 w-0.5 h-0.5 rounded-full bg-slate-400" />
+              <span className="mx-2 w-0.5 h-0.5 bg-slate-400" />
               {/* {node.frontmatter.category} */}
               {node.frontmatter?.tags.map((tag: string) => (
                 <PostLabel title={tag} key={tag} />
               ))}
             </div>
-            <h2 className="pt-1 pb-2 text-xl text-slate-700 hover:text-brand break-all whitespace-nowrap overflow-hidden overflow-ellipsis ease-in duration-300">
-              {node.frontmatter?.title}
-            </h2>
 
             <div className="text-slate-500 line-clamp-3">{node.excerpt}</div>
           </Link>

diff --git a/site/blog/app/styles/globals.scss b/site/blog/app/styles/globals.scss
@@ -785,7 +785,7 @@
     box-shadow: 0 0 4px 1px #ddd;
   }
   .header-line-shadow::after {
-    @apply absolute content-[''] w-full h-5 bg-gradient-to-b from-white to-transparent;
+    @apply absolute content-[''] w-full h-1 bg-gradient-to-b from-white to-white;
   }
 }
 

diff --git a/site/blog/lib/posts.ts b/site/blog/lib/posts.ts
@@ -21,6 +21,7 @@ export function getPostBySlug(slug: string) {
       ...data,
       title: data.title,
       description: data.description,
+      tags: data.tags,
       date,
     },
     content,