feat: update layout

alex-guoba · Jan 19, 2024 · 20e74cf · 20e74cf
1 parent 1eda3b1
commit 20e74cf
Show file tree

Hide file tree

Showing 10 changed files with 594 additions and 473 deletions.
diff --git a/README.md b/README.md
@@ -34,3 +34,14 @@ You can check out [the Next.js GitHub repository](https://github.com/vercel/next
 The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
 Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+
+
+## Feaatures
+
+- Next.js SSG supported
+
+  [SSG](https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation) make all pages generated when you run `next build`
+
+  - how to update content with SSG rendering.
+
+  - cache is only available in React’s Canary and experimental channels. Please ensure you understand the limitations before using cache in production. Learn more about React’s release channels here.
diff --git a/app/article/[slug]/page.tsx b/app/article/[slug]/page.tsx
@@ -7,23 +7,21 @@ import {renderBlock} from "@/app/ui/notion/render";
 import { getDatabase, getPageFromSlug, getBlocks } from "@/app/lib/notion";
 
 // https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#revalidate
-export const revalidate = 60; // revalidate the data at most every hour
+export const revalidate = parseInt(process.env.NEXT_REVALIDATE_PAGES || '', 10) || 300; // revalidate the data interval
 
 // export const dynamicParams = true; // true | false,
 
 // Return a list of `params` to populate the [slug] dynamic segment
 export async function generateStaticParams() {
-
   const database = await getDatabase();
-
   return database.map((page: any) => {
     const slug = page.properties.Slug?.rich_text[0].plain_text;
     return ({ slug });
   });
 }
 
 export default async function Page({ params }: {params: {slug: string}}) {
-  console.log(params)
+  console.log(params, "environment variables:", revalidate)
   const page: any = await getPageFromSlug(params.slug);
   const blocks = page && await getBlocks(page.id);
 

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -17,7 +17,12 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={`${inter.className} bg-gray-50 text-gray-950`}>
+        <div className="bg-[#fbe2e3] absolute top-[-6rem] -z-10 right-[11rem] h-[31.25rem] w-[31.25rem] rounded-full blur-[10rem] sm:w-[68.75rem] dark:bg-[#946263]"></div>
+        <div className="bg-[#dbd7fb] absolute top-[-1rem] -z-10 left-[-35rem] h-[31.25rem] w-[50rem] rounded-full blur-[10rem] sm:w-[68.75rem] md:left-[-33rem] lg:left-[-28rem] xl:left-[-15rem] 2xl:left-[-5rem] dark:bg-[#676394]"></div>
+
+        {children}
+      </body>
     </html>
   )
 }
diff --git a/app/lib/notion.ts b/app/lib/notion.ts
@@ -1,8 +1,7 @@
 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 || '';
 
 /**
@@ -25,7 +24,7 @@ const notion = new Client({
 
 // 取db中的pages列表数据（posts）
 // API: https://developers.notion.com/reference/post-database-query
-export const getDatabase = cache(async (): Promise<QueryDatabaseResponse['results']> => {
+export const getDatabase = async (): Promise<QueryDatabaseResponse['results']> => {
   const start = new Date().getTime();
 
   const response = await notion.databases.query({
@@ -34,23 +33,23 @@ export const getDatabase = cache(async (): Promise<QueryDatabaseResponse['result
   const end = new Date().getTime();
   console.log('[getDatabase]', `${end - start}ms`);
   return response.results;
-});
+};
 
 //
 // 读取一个page的基础数据（page object）
 // API: https://developers.notion.com/reference/retrieve-a-page
-export const getPage = cache(async (pageId: any) => {
+export const getPage = async (pageId: any) => {
   const start = new Date().getTime();
   const response = await notion.pages.retrieve({ page_id: pageId });
   const end = new Date().getTime();
   console.log('[getPage]', `${end - start}ms`);
   return response;
-});
+};
 
 //
 // slug:（计算机）处理后的标题（用于构建固定链接）
 // 根据标题取db中的page列表数据，限制一条
-export const getPageFromSlug = cache(async (slug: string) => {
+export const getPageFromSlug = async (slug: string) => {
   const start = new Date().getTime();
 
   const response = await notion.databases.query({
@@ -70,11 +69,11 @@ export const getPageFromSlug = cache(async (slug: string) => {
   if (response?.results?.length) {
     return response?.results?.[0];
   }
-});
+};
 
 //
 // 取page/block的children列表数据 (blocks)
-export const getBlocks = cache(async (blockID: string): Promise<any> => {
+export const getBlocks = async (blockID: string): Promise<any> => {
   const start = new Date().getTime();
 
   const blockId = blockID.replaceAll('-', '');
@@ -129,4 +128,4 @@ export const getBlocks = cache(async (blockID: string): Promise<any> => {
     }
     return acc;
   }, []));
-});
+};
diff --git a/app/page.tsx b/app/page.tsx
@@ -13,6 +13,7 @@ import Text  from './ui/text';
 // }
 
 async function getPosts() {
+  console.log('Home getPosts');
   const database = await getDatabase();
   return database;
 }

diff --git a/app/ui/header.tsx b/app/ui/header.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function Header() {
+  return (
+    <header>Header</header>
+  )
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "react-dom": "^18"
   },
   "devDependencies": {
+    "@types/ms": "^0.7.34",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

diff --git a/tsconfig.json b/tsconfig.json
@@ -22,6 +22,6 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "app/ui/argo/tab-group"],
   "exclude": ["node_modules"]
 }