feat: layout optimization

alex-guoba · Jan 25, 2024 · bfe31f8 · bfe31f8
1 parent 58287bd
commit bfe31f8
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 35 deletions.
diff --git a/README.md b/README.md
@@ -48,4 +48,8 @@ Check out our [Next.js deployment documentation](https://nextjs.org/docs/deploym
 
 ## TODO
 
-- add cover, description for home page
+### MPV version
+- [X] add cover, description for home page
+- [ ] render blog page
+- [ ] data statics
+- [ ] share
diff --git a/app/(blog)/article/[slug]/page.tsx b/app/(blog)/article/[slug]/page.tsx
@@ -1,13 +1,23 @@
-import Head from "next/head";
+// import Head from "next/head";
 import Link from "next/link";
 import { Fragment } from "react";
 import Text from "@/app/ui/text";
+import { Metadata, ResolvingMetadata } from "next";
 
-import {renderBlock} from "@/app/ui/notion/render";
+// import styles from "@/app/ui/post.module.css";
+
+import { renderBlock } from "@/app/ui/notion/render";
 import { QueryDatabase, getPageFromSlug, getBlocks } from "@/app/api/notion";
+import Shell from "@/components/shells/shell";
+import React from "react";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+import { ChevronLeftIcon } from "@radix-ui/react-icons";
+import { formatDate } from "@/lib/utils";
 
 // https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#revalidate
-export const revalidate = parseInt(process.env.NEXT_REVALIDATE_PAGES || '', 10) || 300; // revalidate the data interval
+export const revalidate =
+  parseInt(process.env.NEXT_REVALIDATE_PAGES || "", 10) || 300; // revalidate the data interval
 
 // export const dynamicParams = true; // true | false,
 
@@ -16,39 +26,85 @@ export async function generateStaticParams() {
   const database = await QueryDatabase();
   return database.map((page: any) => {
     const slug = page.properties.Slug?.rich_text[0].plain_text;
-    return ({ slug });
+    return { slug };
   });
 }
 
-export default async function Page({ params }: {params: {slug: string}}) {
-  console.log(params, "environment variables:", revalidate)
+type Props = {
+  params: { slug: string };
+  searchParams: { [key: string]: string | string[] | undefined };
+};
+
+// Generate metadata for this page.
+// TODO: add more fields and site name
+export async function generateMetadata(
+  { params, searchParams }: Props,
+  parent: ResolvingMetadata
+): Promise<Metadata> {
+  // read route params
+  return {
+    title: params.slug,
+  };
+}
+
+export default async function Page({ params }: { params: { slug: string } }) {
+  console.log(params, "environment variables:", revalidate);
   const page: any = await getPageFromSlug(params.slug);
-  const blocks = page && await getBlocks(page.id);
+  const blocks = page && (await getBlocks(page.id));
 
   if (!page || !blocks) {
     return <div />;
   }
 
+  const title = page.properties?.Title.title[0].text.content;
+
   return (
-    <div>
-      <Head>
-        <title>{page.properties.Title?.title[0].plain_text}</title>
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-
-      <article>
-        <h1>
-          <Text title={page.properties.Title?.title} />
+    <Shell as="article">
+      <div className="space-y-2">
+        <div className="flex items-center space-x-2 text-sm text-muted-foreground">
+          {page.last_edited_time && (
+            <time dateTime={page.last_edited_time}>
+              {formatDate(page.last_edited_time)}
+            </time>
+          )}
+          {/* {page.last_edited_time ? <div>•</div> : null} */}
+          {/* <div>{post.readingTime}min</div> */}
+        </div>
+        <h1 className="inline-block text-4xl font-bold leading-tight lg:text-5xl">
+          {title}
+          {/* <Text title={page.properties.Title?.title} /> */}
         </h1>
-        <section>
-          {blocks.map((block: any) => (
-            <Fragment key={block.id}>{renderBlock(block)}</Fragment>
+      </div>
+
+      {/* <Separator className="mb-2.5" /> */}
+      {/* <section className="grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4"> */}
+      {/* <React.Suspense
+          fallback={Array.from({ length: 4 }).map((_, i) => (
+            <PostCardSkeleton key={i} />
           ))}
-          <Link href="/">
-            ← Go home
-          </Link>
-        </section>
-      </article>
-    </div>
+        > */}
+      {/* <div> */}
+      {/* <article className={styles.container}> */}
+
+      <section>
+        {blocks.map((block: any) => (
+          <Fragment key={block.id}>{renderBlock(block)}</Fragment>
+        ))}
+      </section>
+      {/* </div> */}
+
+      {/* </React.Suspense> */}
+      {/* </section> */}
+      <Link
+        href="/"
+        className={cn(
+          buttonVariants({ variant: "ghost", className: "mx-auto mt-4 w-fit" })
+        )}
+      >
+        <ChevronLeftIcon className="mr-2 h-4 w-4" aria-hidden="true" />
+        See all posts
+        <span className="sr-only">See all posts</span>
+      </Link>
+    </Shell>
   );
 }
diff --git a/app/(blog)/layout.tsx b/app/(blog)/layout.tsx
@@ -13,9 +13,9 @@ export default function ArticleLayout({
           <SideNav />
         </seciton> */}
         <SiteHeader />
-          <main className="grow p-6 md:overflow-y-auto md:p-12">
+          {/* <main className="grow p-6 md:overflow-y-auto md:p-12"> */}
             {children}
-          </main>
+          {/* </main> */}
         <SiteFooter />
       </div>
     )

diff --git a/app/api/notion.ts b/app/api/notion.ts
@@ -1,5 +1,5 @@
 import { Client } from '@notionhq/client';
-// import { cache } from 'react';
+import { cache } from 'react';
 import {QueryDatabaseResponse, ListBlockChildrenResponse} from '@notionhq/client/build/src/api-endpoints';
 
 const databaseId = process.env.NOTION_DATABASE_ID || '';
@@ -75,7 +75,7 @@ export const getPageFromSlug = async (slug: string) => {
 
 //
 // 取page/block的children列表数据 (blocks)
-export const getBlocks = async (blockID: string): Promise<any> => {
+export const getBlocks = cache(async (blockID: string): Promise<any> => {
   const start = new Date().getTime();
 
   const blockId = blockID.replaceAll('-', '');
@@ -130,4 +130,4 @@ export const getBlocks = async (blockID: string): Promise<any> => {
     }
     return acc;
   }, []));
-};
+});
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -28,7 +28,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <head />
+      {/* <head /> */}
       {/* <body className={`${inter.className} min-h-screen bg-background antialiased`}> */}
       <body
         className={cn(

diff --git a/app/ui/post.module.css b/app/ui/post.module.css
@@ -1,4 +1,4 @@
-.container {
+/* .container {
     padding: 0 20px;
     max-width: 700px;
     margin: 0 auto;
@@ -22,7 +22,7 @@
   
   .container figcaption {
     opacity: 0.6;
-  }
+  } */
 
   .name {
     font-size: 36px;

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -82,4 +82,4 @@ const config = {
   plugins: [require("tailwindcss-animate")],
 } satisfies Config
 
-export default config
+export default config