nnbb 0.0.1

package/pages/[prefix]/[slug].tsx

@@ -0,0 +1,123 @@
+import BLOG from '@/blog.config';
+import { getPostBlocks } from '@/lib/notion';
+import { getGlobalData } from '@/lib/notion/getNotionData';
+import { idToUuid } from 'notion-utils';
+
+import { getPageInfoOfPostPage } from '@/lib/notion/getPageInfoOfPostPage';
+import Slug, { findRelatedPosts } from '.';
+import { uploadDataToAlgolia } from '@/lib/algolia';
+
+import type { FC } from 'react';
+import type { ParsedUrlQuery } from 'querystring';
+import type { PrefixSlugProps } from '@/types';
+import type { GetStaticProps, GetStaticPaths } from 'next';
+
+export interface PrefixSlugParams extends ParsedUrlQuery {
+  prefix: string;
+  slug: string;
+}
+
+/**
+ * 根据notion的slug访问页面
+ * @param {*} props
+ * @returns
+ */
+const PrefixSlug: FC<PrefixSlugProps> = (props) => {
+  return <Slug {...props} />;
+};
+
+export const getStaticPaths: GetStaticPaths<PrefixSlugParams> = async () => {
+  if (!BLOG.isProd) {
+    return {
+      paths: [],
+      fallback: true,
+    };
+  }
+
+  const { allPages } = await getGlobalData('slug-detail');
+  return {
+    paths: allPages
+      .filter(
+        (row) =>
+          row.slug.indexOf('/') > 0 && row.type && row.type.indexOf('Menu') < 0,
+      )
+      .map((row) => ({
+        params: {
+          prefix: row.slug.split('/')[0],
+          slug: row.slug.split('/')[1],
+        },
+      })),
+    fallback: true,
+  };
+};
+
+export const getStaticProps: GetStaticProps<
+  PrefixSlugProps,
+  PrefixSlugParams
+> = async (context) => {
+  const { prefix, slug } = context.params as PrefixSlugParams;
+  let fullSlug = `${prefix}/${slug}`;
+
+  if (BLOG.PSEUDO_STATIC && !fullSlug.endsWith('.html')) {
+    fullSlug += '.html';
+  }
+
+  const from = `slug-detail-${fullSlug}`;
+  const { allPages, ...restProps } = await getGlobalData(from);
+
+  // 在列表内查找文章
+  let post = allPages.find((p) => {
+    return p.slug === fullSlug || p.id === idToUuid(fullSlug);
+  });
+
+  // 处理非列表内文章的内信息
+  if (!post) {
+    const pageId = slug.slice(-1)[0];
+    if (pageId.length >= 32) {
+      post = await getPageInfoOfPostPage(pageId, fullSlug);
+    }
+  }
+
+  // 无法获取文章
+  if (!post) {
+    return {
+      props: {
+        ...restProps,
+        post: null,
+        prev: null,
+        next: null,
+        recommendPosts: [],
+      },
+      revalidate: BLOG.NEXT_REVALIDATE_SECOND,
+    };
+  }
+
+  // 文章内容加载
+  if (!post.blockMap) {
+    post.blockMap = await getPostBlocks(post.id, from);
+  }
+
+  // 生成全文索引 && process.env.npm_lifecycle_event === 'build' && JSON.parse(BLOG.ALGOLIA_RECREATE_DATA)
+  if (BLOG.ALGOLIA_APP_ID) {
+    uploadDataToAlgolia(post);
+  }
+
+  // 推荐关联文章处理
+  const allPosts = allPages.filter(
+    (page) => page.type === 'Post' && page.status === 'Published',
+  );
+  const { prev, next, recommendPosts } = findRelatedPosts(post, allPosts);
+
+  return {
+    props: {
+      ...restProps,
+      post,
+      prev,
+      next,
+      recommendPosts,
+    },
+    revalidate: BLOG.NEXT_REVALIDATE_SECOND,
+  };
+};
+
+export default PrefixSlug;

package/pages/[prefix]/index.tsx

@@ -0,0 +1,223 @@
+import BLOG from '@/blog.config';
+import { getPostBlocks } from '@/lib/notion';
+import { getGlobalData } from '@/lib/notion/getNotionData';
+import { useCallback, useEffect, useState } from 'react';
+import { idToUuid } from 'notion-utils';
+import { useRouter } from 'next/router';
+import { getPageInfoOfPostPage } from '@/lib/notion/getPageInfoOfPostPage';
+import { getPageTableOfContents } from '@/lib/notion/getPageTableOfContents';
+import { useLayout } from '@/theme';
+import md5 from 'js-md5';
+import { isBrowser } from '@/lib/utils';
+import { uploadDataToAlgolia } from '@/lib/algolia';
+
+import type { FC } from 'react';
+import type { ParsedUrlQuery } from 'querystring';
+import type { PageMeta, SlugIndexProps, ThemePrefixProps } from '@/types';
+import type { GetStaticProps, GetStaticPaths } from 'next';
+import { PageInfo, PagePropertiesType } from '@/lib/notion/types';
+
+export interface SlugIndexParams extends ParsedUrlQuery {
+  prefix: string;
+}
+
+/**
+ * 根据notion的slug访问页面
+ * @param {*} props
+ * @returns
+ */
+const Slug: FC<SlugIndexProps> = (props) => {
+  const { post, siteInfo } = props;
+  const router = useRouter();
+
+  // 文章锁🔐
+  const [isLock, setIsLock] = useState<boolean>(!!(post && post.password));
+
+  /**
+   * 验证文章密码
+   * @param {*} result
+   */
+  const validPassword = useCallback(
+    (passInput: string) => {
+      if (!post) {
+        return false;
+      }
+      const encrypt = md5(post.slug + passInput);
+      if (passInput && encrypt === post.password) {
+        setIsLock(false);
+        return true;
+      }
+      return false;
+    },
+    [post],
+  );
+
+  // 文章加载
+  useEffect(() => {
+    // 404
+    if (!post) {
+      setTimeout(() => {
+        if (isBrowser) {
+          const article = document.getElementById('notion-article');
+          if (!article) {
+            router.push('/404').then(() => {
+              console.warn('找不到页面', router.asPath);
+            });
+          }
+        }
+      }, 8 * 1000); // 404时长 8秒
+    }
+
+    // 文章加密
+    if (post?.password && post?.password !== '') {
+      setIsLock(true);
+    } else {
+      setIsLock(false);
+      if (!isLock && post?.blockMap?.block) {
+        post.content = Object.keys(post.blockMap.block).filter(
+          (key) => post.blockMap?.block[key]?.value?.parent_id === post.id,
+        );
+        post.toc = getPageTableOfContents(post, post.blockMap);
+      }
+    }
+  }, [post, isLock]);
+
+  const pageMeta: PageMeta = {
+    title: post
+      ? `${post?.title} | ${siteInfo?.title}`
+      : `${props?.siteInfo?.title || BLOG.TITLE} | loading`,
+    description: post?.summary || '',
+    type: post?.type || '',
+    slug: post?.slug || '',
+    image:
+      post?.pageCoverThumbnail || siteInfo?.pageCover || BLOG.HOME_BANNER_IMAGE,
+    category: post?.category?.[0],
+    tags: post?.tags,
+  };
+
+  // 根据页面路径加载不同Layout文件
+  const Layout = useLayout() as FC<ThemePrefixProps>;
+
+  return (
+    <Layout
+      {...props}
+      pageMeta={pageMeta}
+      isLock={isLock}
+      validPassword={validPassword}
+    />
+  );
+};
+
+export const getStaticPaths: GetStaticPaths<SlugIndexParams> = async () => {
+  if (!BLOG.isProd) {
+    return {
+      paths: [],
+      fallback: true,
+    };
+  }
+
+  const { allPages } = await getGlobalData('slug-index');
+  return {
+    paths: allPages
+      .filter(
+        (row) =>
+          row.slug.indexOf('/') < 0 && row.type && row.type.indexOf('Menu') < 0,
+      )
+      .map((row) => ({ params: { prefix: row.slug } })),
+    fallback: true,
+  };
+};
+
+export const getStaticProps: GetStaticProps<
+  SlugIndexProps,
+  SlugIndexParams
+> = async (context) => {
+  const { prefix } = context.params as SlugIndexParams;
+  const fullSlug =
+    BLOG.PSEUDO_STATIC && !prefix.endsWith('.html') ? `${prefix}.html` : prefix;
+  const from = `slug-index-${fullSlug}`;
+
+  const { allPages, ...restProps } = await getGlobalData(from);
+
+  // 在列表内查找文章
+  let post = allPages.find((p) => {
+    return p.slug === fullSlug || p.id === idToUuid(fullSlug);
+  });
+
+  // 处理非列表内文章的内信息
+  if (!post) {
+    const pageId = prefix;
+    if (pageId.length >= 32) {
+      post = await getPageInfoOfPostPage(pageId, from);
+    }
+  }
+
+  // 无法获取文章
+  if (!post) {
+    return {
+      props: {
+        ...restProps,
+        post: null,
+        prev: null,
+        next: null,
+        recommendPosts: [],
+      },
+      revalidate: BLOG.NEXT_REVALIDATE_SECOND,
+    };
+  }
+
+  // 文章内容加载
+  if (!post.blockMap) {
+    post.blockMap = await getPostBlocks(post.id, from);
+  }
+
+  // 生成全文索引 && process.env.npm_lifecycle_event === 'build' && JSON.parse(BLOG.ALGOLIA_RECREATE_DATA)
+  if (BLOG.ALGOLIA_APP_ID) {
+    uploadDataToAlgolia(post);
+  }
+
+  // 推荐关联文章处理
+  const allPosts = allPages.filter(
+    (page) => page.type === 'Post' && page.status === 'Published',
+  );
+  const { prev, next, recommendPosts } = findRelatedPosts(post, allPosts);
+
+  return {
+    props: {
+      ...restProps,
+      post,
+      prev,
+      next,
+      recommendPosts,
+    },
+    revalidate: BLOG.NEXT_REVALIDATE_SECOND,
+  };
+};
+
+export const findRelatedPosts: (
+  post: PageInfo,
+  allPosts: PageInfo[],
+  count?: number,
+) => {
+  prev: PageInfo | null;
+  next: PageInfo | null;
+  recommendPosts: PageInfo[];
+} = (post, allPosts, count = 6) => {
+  if (!allPosts.length || !post) {
+    return { prev: null, next: null, recommendPosts: [] };
+  }
+  const relatedPosts = allPosts.filter(
+    (p) =>
+      p.id !== post.id &&
+      p.type === PagePropertiesType.Post &&
+      post.tags.some((tag) => p.tags.includes(tag)),
+  );
+
+  return {
+    prev: allPosts[allPosts.indexOf(post) - 1] || allPosts[allPosts.length - 1],
+    next: allPosts[allPosts.indexOf(post) + 1] || allPosts[0],
+    recommendPosts: relatedPosts.slice(0, count),
+  };
+};
+
+export default Slug;

package/pages/_app.js

@@ -0,0 +1,59 @@
+import '@/styles/animate.css'; // @see https://animate.style/
+import '@/styles/globals.css';
+import '@/styles/utility-patterns.css';
+
+// core styles shared by all of react-notion-x (required)
+import 'react-notion-x/src/styles.css';
+import '@/styles/notion.css'; //  重写部分样式
+
+import { GlobalContextProvider } from '@/lib/global';
+import { appWithTranslation } from 'next-i18next';
+
+import dynamic from 'next/dynamic';
+import { isBrowser, loadExternalResource } from '@/lib/utils';
+import BLOG from '@/blog.config';
+import AOS from 'aos';
+import 'aos/dist/aos.css'; // You can also use <link> for styles
+import { initNProgress } from '@/components/NProgress';
+import '@/styles/nprogress.css';
+
+// 各种扩展插件 动画等
+const ExternalPlugins = dynamic(() => import('@/components/ExternalPlugins'));
+
+const MyApp = ({ Component, pageProps }) => {
+  if (isBrowser) {
+    AOS.init();
+    initNProgress();
+    // 静态导入本地自定义样式
+    loadExternalResource('/css/custom.css', 'css');
+    loadExternalResource('/js/custom.js', 'js');
+
+    // 自动添加图片阴影
+    if (BLOG.IMG_SHADOW) {
+      loadExternalResource('/css/img-shadow.css', 'css');
+    }
+
+    // 导入外部自定义脚本
+    if (BLOG.CUSTOM_EXTERNAL_JS && BLOG.CUSTOM_EXTERNAL_JS.length > 0) {
+      for (const url of BLOG.CUSTOM_EXTERNAL_JS) {
+        loadExternalResource(url, 'js');
+      }
+    }
+
+    // 导入外部自定义样式
+    if (BLOG.CUSTOM_EXTERNAL_CSS && BLOG.CUSTOM_EXTERNAL_CSS.length > 0) {
+      for (const url of BLOG.CUSTOM_EXTERNAL_CSS) {
+        loadExternalResource(url, 'css');
+      }
+    }
+  }
+
+  return (
+    <GlobalContextProvider {...pageProps}>
+      <Component {...pageProps} />
+      <ExternalPlugins {...pageProps} />
+    </GlobalContextProvider>
+  );
+};
+
+export default appWithTranslation(MyApp);

package/pages/_document.js

@@ -0,0 +1,42 @@
+// eslint-disable-next-line @next/next/no-document-import-in-page
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+import BLOG from '@/blog.config'
+import CommonScript from '@/components/CommonScript'
+
+class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const initialProps = await Document.getInitialProps(ctx)
+    return { ...initialProps }
+  }
+
+  render() {
+    return (
+            <Html lang={BLOG.LANG}>
+                <Head>
+                <link rel='icon' href= {`${BLOG.BLOG_FAVICON}`} />
+                  <CommonScript />
+                  {/* 预加载字体 */}
+                  {BLOG.FONT_AWESOME && <>
+                      <link rel='preload' href={BLOG.FONT_AWESOME} as="style" crossOrigin="anonymous" />
+                      <link rel="stylesheet" href={BLOG.FONT_AWESOME} crossOrigin="anonymous" referrerPolicy="no-referrer" />
+                  </>}
+
+                  {BLOG.FONT_URL?.map((fontUrl, index) => {
+                    if (fontUrl.endsWith('.css')) {
+                      return <link key={index} rel="stylesheet" href={fontUrl} />
+                    } else {
+                      return <link key={index} rel="preload" href={fontUrl} as="font" type="font/woff2" />
+                    }
+                  })}
+                </Head>
+
+                <body className={`${BLOG.FONT_STYLE} font-light scroll-smooth`}>
+                    <Main />
+                    <NextScript />
+                </body>
+            </Html>
+    )
+  }
+}
+
+export default MyDocument

package/pages/api/subscribe.js

@@ -0,0 +1,22 @@
+import subscribeToMailchimpApi from '@/lib/mailchimp'
+
+/**
+ * 接受邮件订阅
+ * @param {*} req
+ * @param {*} res
+ */
+export default async function handler(req, res) {
+  if (req.method === 'POST') {
+    const { email, firstName, lastName } = req.body
+    try {
+      const response = await subscribeToMailchimpApi({ email, first_name: firstName, last_name: lastName })
+      const data = await response.json()
+      console.log('data', data)
+      res.status(200).json({ status: 'success', message: 'Subscription successful!' })
+    } catch (error) {
+      res.status(400).json({ status: 'error', message: 'Subscription failed!', error })
+    }
+  } else {
+    res.status(405).json({ status: 'error', message: 'Method not allowed' })
+  }
+}

package/pages/archive/index.tsx

@@ -0,0 +1,79 @@
+import { getGlobalData } from '@/lib/notion/getNotionData';
+import { useEffect, type FC } from 'react';
+import BLOG from '@/blog.config';
+import { useLayout } from '@/theme';
+import { isBrowser } from '@/lib/utils';
+import { useTranslation } from 'next-i18next';
+import dayjs from 'dayjs';
+import { omit } from 'lodash';
+
+import type { GetStaticProps } from 'next';
+import type {
+  PageMeta,
+  ArchiveIndexProps,
+  ThemeArchiveProps,
+} from '../../types/page';
+import type { PageInfo } from '@/lib/notion/types';
+
+const ArchiveIndex: FC<ArchiveIndexProps> = (props) => {
+  const { siteInfo } = props;
+  const { t } = useTranslation('nav');
+
+  // 根据页面路径加载不同Layout文件
+  const Archive = useLayout() as FC<ThemeArchiveProps>;
+
+  useEffect(() => {
+    if (isBrowser) {
+      const anchor = window.location.hash;
+      if (anchor) {
+        setTimeout(() => {
+          const anchorElement = document.getElementById(anchor.substring(1));
+          if (anchorElement) {
+            anchorElement.scrollIntoView({
+              block: 'start',
+              behavior: 'smooth',
+            });
+          }
+        }, 300);
+      }
+    }
+  }, []);
+
+  const pageMeta: PageMeta = {
+    title: `${t('archive')} | ${siteInfo?.title}`,
+    description: siteInfo?.description,
+    image: siteInfo?.pageCover,
+    slug: 'archive',
+    type: 'website',
+  };
+
+  return <Archive pageMeta={pageMeta} {...props} />;
+};
+
+export const getStaticProps: GetStaticProps<ArchiveIndexProps> = async () => {
+  const globalData = await getGlobalData('archive-index');
+
+  const posts = globalData.allPages?.filter(
+    (page) => page.type === 'Post' && page.status === 'Published',
+  ) as PageInfo[];
+
+  const archivePosts: Record<string, PageInfo[]> = {};
+  posts
+    .sort((a, b) => (dayjs(b.publishDate).isAfter(a.publishDate) ? 1 : -1))
+    .forEach((post) => {
+      const date = dayjs(post.publishDate).format('yyyy-MM');
+      if (!archivePosts[date]) archivePosts[date] = [];
+      archivePosts[date].push(post);
+    });
+
+  return {
+    props: {
+      ...omit(globalData, 'allPages'),
+      posts,
+      archivePosts,
+    },
+    revalidate: BLOG.NEXT_REVALIDATE_SECOND,
+  };
+};
+
+export default ArchiveIndex;

package/pages/category/[category]/index.tsx

@@ -0,0 +1,87 @@
+import { getGlobalData } from '@/lib/notion/getNotionData';
+import React from 'react';
+import BLOG from '@/blog.config';
+import { useLayout } from '@/theme';
+import { useTranslation } from 'next-i18next';
+
+import type { GetStaticProps, GetStaticPaths } from 'next';
+import type {
+  PageMeta,
+  CategoryDetailProps,
+  ThemeCategoryDetailProps,
+} from '@/types';
+import type { FC } from 'react';
+import type { ParsedUrlQuery } from 'querystring';
+
+export interface CategoryDetailParams extends ParsedUrlQuery {
+  category: string;
+}
+
+/**
+ * 分类页
+ * @param {*} props
+ * @returns
+ */
+const CategoryDetail: FC<CategoryDetailProps> = (props) => {
+  const { siteInfo } = props;
+  const { t } = useTranslation('common');
+
+  // 根据页面路径加载不同Layout文件
+  const Layout = useLayout() as FC<ThemeCategoryDetailProps>;
+
+  const pageMeta: PageMeta = {
+    title: `${props.category} | ${t('category')} | ${siteInfo?.title || ''}`,
+    description: siteInfo?.description,
+    slug: 'category/' + props.category,
+    image: siteInfo?.pageCover,
+    type: 'website',
+  };
+
+  return <Layout pageMeta={pageMeta} {...props} />;
+};
+
+export const getStaticProps: GetStaticProps<
+  CategoryDetailProps,
+  CategoryDetailParams
+> = async (context) => {
+  const { category } = context.params as CategoryDetailParams;
+  const { allPages, ...globalProps } = await getGlobalData(
+    'category-detail-props',
+  );
+
+  const filteredPosts = allPages.filter(
+    (page) =>
+      page.type === 'Post' &&
+      page.status === 'Published' &&
+      page.category?.includes(category),
+  );
+  const posts =
+    BLOG.POST_LIST_STYLE === 'page'
+      ? filteredPosts.slice(0, BLOG.POSTS_PER_PAGE)
+      : filteredPosts;
+
+  return {
+    props: {
+      ...globalProps,
+      category,
+      posts,
+      postCount: posts.length,
+    },
+    revalidate: BLOG.NEXT_REVALIDATE_SECOND,
+  };
+};
+
+export const getStaticPaths: GetStaticPaths<
+  CategoryDetailParams
+> = async () => {
+  const from = 'category-paths';
+  const { categoryOptions } = await getGlobalData(from);
+  return {
+    paths: categoryOptions.map((category) => ({
+      params: { category: category.name },
+    })),
+    fallback: true,
+  };
+};
+
+export default CategoryDetail;