From ab717125c0a9c308bd558eae8135e8de1179d467 Mon Sep 17 00:00:00 2001 From: Shun Kakinoki Date: Sun, 22 Aug 2021 10:12:08 -0700 Subject: [PATCH 1/7] feat: ini blog page --- .env | 1 + package.json | 1 + src/components/Blog/Blog.module.css | 23 -------- src/components/Blog/Blog.tsx | 76 +++++++++++++-------------- src/lib/notion.ts | 14 +++++ src/pages/[...slug].tsx | 25 +-------- src/pages/blog.tsx | 46 ++++++++++++++++ src/screens/BlogScreen/BlogScreen.tsx | 4 +- yarn.lock | 10 +++- 9 files changed, 110 insertions(+), 90 deletions(-) delete mode 100644 src/components/Blog/Blog.module.css create mode 100644 src/lib/notion.ts create mode 100644 src/pages/blog.tsx diff --git a/.env b/.env index 954b1e6c..407d8618 100644 --- a/.env +++ b/.env @@ -1 +1,2 @@ NEXTAUTH_URL=https://shunkakinoki.com +NOTION_BLOG_ID=e4ef762ca07f465e8f5cce906732140b diff --git a/package.json b/package.json index f5438b38..239ccf23 100644 --- a/package.json +++ b/package.json @@ -57,6 +57,7 @@ "@heroicons/react": "^1.0.4", "@next-auth/prisma-adapter": "^0.5.4", "@next/bundle-analyzer": "^11.1.0", + "@notionhq/client": "^0.3.0", "@prisma/client": "^2.29.1", "autoprefixer": "^10.3.1", "chrome-aws-lambda": "^10.1.0", diff --git a/src/components/Blog/Blog.module.css b/src/components/Blog/Blog.module.css deleted file mode 100644 index 2408b131..00000000 --- a/src/components/Blog/Blog.module.css +++ /dev/null @@ -1,23 +0,0 @@ -.markdown { - @apply leading-relaxed; -} - -.markdown h1 { - @apply my-8 text-6xl font-semibold leading-none tracking-tight; -} - -.markdown h2 { - @apply my-6 text-5xl font-semibold leading-tight; -} - -.markdown h3 { - @apply my-5 text-4xl font-medium leading-snug; -} - -.markdown ul { - @apply mx-4 my-3 text-2xl; -} - -.markdown li { - @apply my-3 underline; -} diff --git a/src/components/Blog/Blog.tsx b/src/components/Blog/Blog.tsx index 8ea94d1f..6247bcd2 100644 --- a/src/components/Blog/Blog.tsx +++ b/src/components/Blog/Blog.tsx @@ -1,48 +1,44 @@ -import { MDXRemote } from "next-mdx-remote"; -import type { MDXRemoteSerializeResult } from "next-mdx-remote"; +import type { Page } from "@notionhq/client/build/src/api-types"; import Link from "next/link"; - import type { FC } from "react"; -import s from "./Blog.module.css"; - -export interface Props { - frontMatter: { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - [key: string]: any; - }; - source: MDXRemoteSerializeResult; - slug: string; -} - -interface BlogLinkProps { - children: string; - href: string; -} - -export const Blog: FC = ({ source, slug }) => { - const BlogLink = ({ children, href }: BlogLinkProps) => { - return ( - - {children} - - ); - }; - - const components = { - a: BlogLink, - }; +export type Props = { + database: Page[]; + locale?: string; +}; +export const Blog: FC = ({ database, locale }) => { return ( -
-
- +
+
+ {database.map(page => { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + const date = new Date(page.properties.Date.date.start).toLocaleString( + locale, + { + month: "short", + day: "2-digit", + year: "numeric", + }, + ); + return ( + + ); + })}
); diff --git a/src/lib/notion.ts b/src/lib/notion.ts new file mode 100644 index 00000000..8b7e20f3 --- /dev/null +++ b/src/lib/notion.ts @@ -0,0 +1,14 @@ +/* eslint-disable @typescript-eslint/no-unsafe-call */ + +import { Client } from "@notionhq/client"; + +const notion = new Client({ + auth: process.env.NOTION_API_KEY, +}); + +export const getDatabase = async (databaseId: string) => { + const response = await notion.databases.query({ + database_id: databaseId, + }); + return response.results; +}; diff --git a/src/pages/[...slug].tsx b/src/pages/[...slug].tsx index aab8bcd0..6309f60f 100644 --- a/src/pages/[...slug].tsx +++ b/src/pages/[...slug].tsx @@ -7,7 +7,7 @@ import type { import type { MDXRemoteSerializeResult } from "next-mdx-remote"; -import { getGithubContent, getGithubSummary } from "@/lib/github"; +import { getGithubContent } from "@/lib/github"; import { BlogScreen } from "@/screens/BlogScreen"; import { ContentScreen } from "@/screens/ContentScreen"; @@ -18,8 +18,6 @@ export interface Props { type: "blog" | "content" | "collection" | "page"; } -const blogCollections = ["blog", "pioneer"]; - const coreCollections = ["cause", "mission", "values"]; // eslint-disable-next-line @typescript-eslint/require-await @@ -66,27 +64,6 @@ GetStaticPropsContext) => { const pageId = slugs[0]; - if (blogCollections.includes(pageId)) { - const result = await getGithubSummary(pageId, locale); - if (result) { - const { frontMatter, source } = result; - return { - props: { - content: JSON.stringify(source), - frontMatter: JSON.stringify(frontMatter), - slug: JSON.stringify(pageId), - type: "blog", - }, - revalidate: 30, - }; - } else { - return { - notFound: true, - revalidate: 30, - }; - } - } - if (coreCollections.includes(pageId)) { const result = await getGithubContent(pageId, pageId.toUpperCase(), locale); if (result) { diff --git a/src/pages/blog.tsx b/src/pages/blog.tsx new file mode 100644 index 00000000..28d3edc8 --- /dev/null +++ b/src/pages/blog.tsx @@ -0,0 +1,46 @@ +import type { Page } from "@notionhq/client/build/src/api-types"; +import type { + InferGetStaticPropsType, + GetStaticProps, + GetStaticPropsContext, +} from "next"; + +import { getDatabase } from "@/lib/notion"; +import { BlogScreen } from "@/screens/BlogScreen"; + +export type Props = { + database: Page[]; + locale?: string; +}; + +export const getStaticProps: GetStaticProps = async ({ + locale, +}: GetStaticPropsContext) => { + if (!process.env.NOTION_BLOG_ID) { + throw new Error("process.NOTION_BLOG_ID is not defined"); + } + const database = await getDatabase(process.env.NOTION_BLOG_ID); + if (database) { + return { + props: { + database: database, + locale: locale, + }, + revalidate: 30, + }; + } else { + return { + notFound: true, + revalidate: 30, + }; + } +}; + +export const Blog = ({ + database, + locale, +}: InferGetStaticPropsType): JSX.Element => { + return ; +}; + +export default BlogScreen; diff --git a/src/screens/BlogScreen/BlogScreen.tsx b/src/screens/BlogScreen/BlogScreen.tsx index 6d7b5642..97d7ced9 100644 --- a/src/screens/BlogScreen/BlogScreen.tsx +++ b/src/screens/BlogScreen/BlogScreen.tsx @@ -8,13 +8,13 @@ import { Seo } from "@/components/Seo"; export type Props = BlogProps; -export const BlogScreen: FC = ({ frontMatter, source, slug }) => { +export const BlogScreen: FC = ({ database }) => { return ( <>
- +