nnbb 0.0.1

package/lib/notion.js

@@ -0,0 +1,2 @@
+export { getAllTags } from './notion/getAllTags'
+export { getPostBlocks } from './notion/getPostBlocks'

package/lib/robots.txt.js

@@ -0,0 +1,25 @@
+
+import fs from 'fs'
+import BLOG from '@/blog.config'
+
+export async function generateRobotsTxt() {
+  const content = `
+    # *
+    User-agent: *
+    Allow: /
+  
+    # Host
+    Host: ${BLOG.LINK}
+  
+    # Sitemaps
+    Sitemap: ${BLOG.LINK}/sitemap.xml
+  
+    `
+  try {
+    fs.mkdirSync('./public', { recursive: true })
+    fs.writeFileSync('./public/robots.txt', content)
+  } catch (error) {
+    // 在vercel运行环境是只读的，这里会报错；
+    // 但在vercel编译阶段、或VPS等其他平台这行代码会成功执行
+  }
+}

package/lib/rss.js

@@ -0,0 +1,63 @@
+import fs from 'fs'
+import { Feed } from 'feed'
+import BLOG from '@/blog.config'
+import ReactDOMServer from 'react-dom/server'
+import { getPostBlocks } from './notion'
+import NotionPage from '@/components/NotionPage'
+
+/**
+     * 生成RSS内容
+     * @param {*} post
+     * @returns
+     */
+const createFeedContent = async post => {
+  // 加密的文章内容只返回摘要
+  if (post.password && post.password !== '') {
+    return post.summary
+  }
+  const blockMap = await getPostBlocks(post.id, 'rss-content')
+  if (blockMap) {
+    post.blockMap = blockMap
+    const content = ReactDOMServer.renderToString(<NotionPage post={post} />)
+    const regexExp =
+                /<div class="notion-collection-row"><div class="notion-collection-row-body"><div class="notion-collection-row-property"><div class="notion-collection-column-title"><svg.*?class="notion-collection-column-title-icon">.*?<\/svg><div class="notion-collection-column-title-body">.*?<\/div><\/div><div class="notion-collection-row-value">.*?<\/div><\/div><\/div><\/div>/g
+    return content.replace(regexExp, '')
+  }
+}
+
+export async function generateRss(posts) {
+  const year = new Date().getFullYear()
+  const feed = new Feed({
+    title: BLOG.TITLE,
+    description: BLOG.DESCRIPTION,
+    link: `${BLOG.LINK}/${BLOG.SUB_PATH}`,
+    language: BLOG.LANG,
+    favicon: `${BLOG.LINK}/favicon.png`,
+    copyright: `All rights reserved ${year}, ${BLOG.AUTHOR}`,
+    author: {
+      name: BLOG.AUTHOR,
+      email: BLOG.CONTACT_EMAIL,
+      link: BLOG.LINK
+    }
+  })
+  for (const post of posts) {
+    feed.addItem({
+      title: post.title,
+      link: `${BLOG.LINK}/${post.slug}`,
+      description: post.summary,
+      content: await createFeedContent(post),
+      date: new Date(post?.publishDay)
+    })
+  }
+
+  try {
+    fs.mkdirSync('./public/rss', { recursive: true })
+    fs.writeFileSync('./public/rss/feed.xml', feed.rss2())
+    fs.writeFileSync('./public/rss/atom.xml', feed.atom1())
+    fs.writeFileSync('./public/rss/feed.json', feed.json1())
+  } catch (error) {
+    // 在vercel运行环境是只读的，这里会报错；
+    // 但在vercel编译阶段、或VPS等其他平台这行代码会成功执行
+    // RSS被高频词访问将大量消耗服务端资源，故作为静态文件
+  }
+}

package/lib/sitemap.xml.js

@@ -0,0 +1,67 @@
+
+import fs from 'fs'
+import BLOG from '@/blog.config'
+
+export async function generateSitemapXml({ allPages }) {
+  const urls = [{
+    loc: `${BLOG.LINK}`,
+    lastmod: new Date().toISOString().split('T')[0],
+    changefreq: 'daily'
+  }, {
+    loc: `${BLOG.LINK}/archive`,
+    lastmod: new Date().toISOString().split('T')[0],
+    changefreq: 'daily'
+  }, {
+    loc: `${BLOG.LINK}/category`,
+    lastmod: new Date().toISOString().split('T')[0],
+    changefreq: 'daily'
+  }, {
+    loc: `${BLOG.LINK}/tag`,
+    lastmod: new Date().toISOString().split('T')[0],
+    changefreq: 'daily'
+  }]
+
+  // 循环页面生成
+  allPages?.forEach(post => {
+    const slugWithoutLeadingSlash = post?.slug?.startsWith('/') ? post?.slug?.slice(1) : post.slug
+    urls.push({
+      loc: `${BLOG.LINK}/${slugWithoutLeadingSlash}`,
+      lastmod: new Date(post?.publishDay).toISOString().split('T')[0],
+      changefreq: 'daily'
+    })
+  })
+  const xml = createSitemapXml(urls)
+  try {
+    fs.writeFileSync('sitemap.xml', xml)
+    fs.writeFileSync('./public/sitemap.xml', xml)
+  } catch (error) {
+    console.warn('无法写入文件', error)
+  }
+}
+
+/**
+ * 生成站点地图
+ * @param {*} urls
+ * @returns
+ */
+function createSitemapXml(urls) {
+  let urlsXml = ''
+  urls.forEach(u => {
+    urlsXml += `<url>
+    <loc>${u.loc}</loc>
+    <lastmod>${u.lastmod}</lastmod>
+    <changefreq>${u.changefreq}</changefreq>
+    </url>
+    `
+  })
+
+  return `
+    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+    xmlns:news="http://www.google.com/schemas/sitemap-news/0.9"
+    xmlns:xhtml="http://www.w3.org/1999/xhtml"
+    xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0"
+    xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
+    ${urlsXml}
+    </urlset>
+    `
+}

package/lib/utils.js

@@ -0,0 +1,212 @@
+// 封装异步加载资源的方法
+import { memo } from 'react';
+
+/**
+ * 判断是否客户端
+ * @returns {boolean}
+ */
+export const isBrowser = typeof window !== 'undefined';
+
+/**
+ * 组件持久化
+ */
+export const memorize = (Component) => {
+  const MemoizedComponent = (props) => {
+    return <Component {...props} />;
+  };
+  return memo(MemoizedComponent);
+};
+
+/**
+ * 加载外部资源
+ * @param url 地址 例如 https://xx.com/xx.js
+ * @param type js 或 css
+ * @returns {Promise<unknown>}
+ */
+export function loadExternalResource(url, type) {
+  // 检查是否已存在
+  const elements =
+    type === 'js'
+      ? document.querySelectorAll(`[src='${url}']`)
+      : document.querySelectorAll(`[href='${url}']`);
+
+  return new Promise((resolve, reject) => {
+    if (elements.length > 0 || !url) {
+      resolve(url);
+      return url;
+    }
+
+    let tag;
+
+    if (type === 'css') {
+      tag = document.createElement('link');
+      tag.rel = 'stylesheet';
+      tag.href = url;
+    } else if (type === 'font') {
+      tag = document.createElement('link');
+      tag.rel = 'preload';
+      tag.as = 'font';
+      tag.href = url;
+    } else if (type === 'js') {
+      tag = document.createElement('script');
+      tag.src = url;
+    }
+    if (tag) {
+      tag.onload = () => {
+        console.log('Load Success', url);
+        resolve(url);
+      };
+      tag.onerror = () => {
+        console.log('Load Error', url);
+        reject(url);
+      };
+      document.head.appendChild(tag);
+    }
+  });
+}
+
+/**
+ * 查询url中的query参数
+ * @param {}} variable
+ * @returns
+ */
+export function getQueryVariable(key) {
+  const query = isBrowser ? window.location.search.substring(1) : '';
+  const vars = query.split('&');
+  for (let i = 0; i < vars.length; i++) {
+    const pair = vars[i].split('=');
+    if (pair[0] === key) {
+      return pair[1];
+    }
+  }
+  return false;
+}
+
+/**
+ * 获取 URL 中指定参数的值
+ * @param {string} url
+ * @param {string} param
+ * @returns {string|null}
+ */
+export function getQueryParam(url, param) {
+  const searchParams = new URLSearchParams(url.split('?')[1]);
+  return searchParams.get(param);
+}
+
+/**
+ * 深度合并两个对象
+ * @param target
+ * @param sources
+ */
+export function mergeDeep(target, ...sources) {
+  if (!sources.length) return target;
+  const source = sources.shift();
+
+  if (isObject(target) && isObject(source)) {
+    for (const key in source) {
+      if (isObject(source[key])) {
+        if (!target[key]) Object.assign(target, { [key]: {} });
+        mergeDeep(target[key], source[key]);
+      } else {
+        Object.assign(target, { [key]: source[key] });
+      }
+    }
+  }
+  return mergeDeep(target, ...sources);
+}
+
+/**
+ * 是否对象
+ * @param item
+ * @returns {boolean}
+ */
+export function isObject(item) {
+  return item && typeof item === 'object' && !Array.isArray(item);
+}
+
+/**
+ * 是否可迭代
+ * @param {*} obj
+ * @returns
+ */
+export function isIterable(obj) {
+  return obj != null && typeof obj[Symbol.iterator] === 'function';
+}
+
+/**
+ * 深拷贝对象
+ * 根据源对象类型深度复制，支持object和array
+ * @param {*} obj
+ * @returns
+ */
+export function deepClone(obj) {
+  if (Array.isArray(obj)) {
+    // If obj is an array, create a new array and deep clone each element
+    return obj.map((item) => deepClone(item));
+  } else if (obj && typeof obj === 'object') {
+    const newObj = {};
+    for (const key in obj) {
+      if (Object.prototype.hasOwnProperty.call(obj, key)) {
+        if (obj[key] instanceof Date) {
+          newObj[key] = new Date(obj[key].getTime()).toISOString();
+        } else {
+          newObj[key] = deepClone(obj[key]);
+        }
+      }
+    }
+    return newObj;
+  } else {
+    return obj;
+  }
+}
+/**
+ * 延时
+ * @param {*} ms
+ * @returns
+ */
+export const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+/**
+ * 获取从第1页到指定页码的文章
+ * @param pageIndex 第几页
+ * @param list 所有文章
+ * @param pageSize 每页文章数量
+ * @returns {*}
+ */
+export const getListByPage = function (list, pageIndex, pageSize) {
+  return list.slice(0, pageIndex * pageSize);
+};
+
+/**
+ * 判断是否移动设备
+ */
+export const isMobile = () => {
+  let isMobile = false;
+  if (!isBrowser) {
+    return isMobile;
+  }
+
+  // 这个判断会引发 TypeError: navigator.userAgentData.mobile is undefined 问题，导致博客无法正常工作
+  // if (!isMobile && navigator.userAgentData.mobile) {
+  //   isMobile = true
+  // }
+
+  if (!isMobile && /Mobi|Android|iPhone/i.test(navigator.userAgent)) {
+    isMobile = true;
+  }
+
+  if (/Android|iPhone|iPad|iPod/i.test(navigator.platform)) {
+    isMobile = true;
+  }
+
+  if (typeof window.orientation !== 'undefined') {
+    isMobile = true;
+  }
+
+  return isMobile;
+};
+
+export function isUrl(website) {
+  const urlPattern = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/i;
+  return urlPattern.test(website);
+}

package/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package/next-i18next.config.js

@@ -0,0 +1,7 @@
+/** @type {import('next-i18next').UserConfig} */
+module.exports = {
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en', 'zh-CN'],
+  },
+};

package/next-sitemap.config.js

@@ -0,0 +1,11 @@
+const BLOG = require('./blog.config')
+
+module.exports = {
+  siteUrl: BLOG.LINK,
+  changefreq: 'daily',
+  priority: 0.7,
+  generateRobotsTxt: true,
+  sitemapSize: 7000
+  // ...other options
+  // https://github.com/iamvishnusankar/next-sitemap#configuration-options
+}

package/next.config.js

@@ -0,0 +1,124 @@
+const fs = require('fs');
+const path = require('path');
+const { i18n } = require('./next-i18next.config');
+const { THEME } = require('./blog.config');
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true',
+});
+
+/**
+ * 扫描指定目录下的文件夹名，用于获取当前有几个主题
+ * @param {*} directory
+ * @returns
+ */
+function scanSubdirectories(directory) {
+  const subdirectories = [];
+
+  fs.readdirSync(directory).forEach((file) => {
+    const fullPath = path.join(directory, file);
+    const stats = fs.statSync(fullPath);
+
+    // landing主题比较特殊，不在可切换的主题中显示
+    if (stats.isDirectory() && file !== 'landing') {
+      subdirectories.push(file);
+    }
+  });
+
+  return subdirectories;
+}
+// 扫描项目 /themes下的目录名
+const themes = scanSubdirectories(path.resolve(__dirname, 'themes'));
+
+/** @type {import('next').NextConfig} */
+const nextConfig = withBundleAnalyzer({
+  images: {
+    // 图片压缩
+    formats: ['image/avif', 'image/webp'],
+    // 允许next/image加载的图片 域名
+    domains: [
+      'gravatar.com',
+      'www.notion.so',
+      'avatars.githubusercontent.com',
+      'images.unsplash.com',
+      'source.unsplash.com',
+      'p1.qhimg.com',
+      'webmention.io',
+    ],
+  },
+  // 默认将feed重定向至 /public/rss/feed.xml
+  async redirects() {
+    return [
+      {
+        source: '/feed',
+        destination: '/rss/feed.xml',
+        permanent: true,
+      },
+    ];
+  },
+  async rewrites() {
+    return [
+      {
+        source: '/:path*.html',
+        destination: '/:path*',
+      },
+    ];
+  },
+  async headers() {
+    return [
+      {
+        source: '/:path*{/}?',
+        headers: [
+          { key: 'Access-Control-Allow-Credentials', value: 'true' },
+          { key: 'Access-Control-Allow-Origin', value: '*' },
+          {
+            key: 'Access-Control-Allow-Methods',
+            value: 'GET,OPTIONS,PATCH,DELETE,POST,PUT',
+          },
+          {
+            key: 'Access-Control-Allow-Headers',
+            value:
+              'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version',
+          },
+        ],
+      },
+    ];
+  },
+  webpack: (config, { dev, isServer }) => {
+    // Replace React with Preact only in client production build
+    // if (!dev && !isServer) {
+    //   Object.assign(config.resolve.alias, {
+    //     react: 'preact/compat',
+    //     'react-dom/test-utils': 'preact/test-utils',
+    //     'react-dom': 'preact/compat'
+    //   })
+    // }
+
+    // 动态主题：添加 resolve.alias 配置，将动态路径映射到实际路径
+    config.resolve.alias['@theme-components'] = path.resolve(
+      __dirname,
+      'themes',
+      THEME,
+    );
+    return config;
+  },
+  experimental: {
+    scrollRestoration: true,
+  },
+  exportPathMap: async function (
+    defaultPathMap,
+    { dev, dir, outDir, distDir, buildId },
+  ) {
+    // 导出时 忽略/pages/sitemap.xml.js ， 否则报错getServerSideProps
+    const pages = { ...defaultPathMap };
+    delete pages['/sitemap.xml'];
+    return pages;
+  },
+  publicRuntimeConfig: {
+    // 这里的配置既可以服务端获取到，也可以在浏览器端获取到
+    NODE_ENV_API: process.env.NODE_ENV_API || 'prod',
+    THEMES: themes,
+  },
+  i18n,
+});
+
+module.exports = nextConfig;

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "nnbb",
+  "version": "0.0.1",
+  "homepage": "https://github.com/czgaotian/NotionNextBlogBase.git",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/czgaotian/NotionNextBlogBase.git"
+  },
+  "author": {
+    "name": "czgaotian",
+    "email": "me@04.lu",
+    "url": "http://04.lu"
+  },
+  "scripts": {
+    "dev": "NODE_OPTIONS='--inspect' next dev",
+    "build": "next build",
+    "start": "next start",
+    "post-build": "next-sitemap --config next-sitemap.config.js",
+    "export": "next build && next-sitemap --config next-sitemap.config.js && next export",
+    "bundle-report": "ANALYZE=true pnpm build",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@giscus/react": "^2.4.0",
+    "@headlessui/react": "^1.7.18",
+    "@next/bundle-analyzer": "^12.3.4",
+    "@vercel/analytics": "^1.2.2",
+    "add": "^2.0.6",
+    "algoliasearch": "^4.23.2",
+    "animejs": "^3.2.2",
+    "aos": "3.0.0-beta.6",
+    "axios": "^1.7.7",
+    "canvas": "^2.11.2",
+    "copy-to-clipboard": "^3.3.3",
+    "dayjs": "^1.11.12",
+    "feed": "^4.2.2",
+    "i18next": "^23.12.2",
+    "js-md5": "^0.7.3",
+    "lodash": "^4.17.21",
+    "medium-zoom": "^1.1.0",
+    "memory-cache": "^0.2.0",
+    "mongodb": "^4.17.2",
+    "next": "14.1.4",
+    "next-i18next": "^15.3.0",
+    "notion-client": "6.16.0",
+    "notion-utils": "6.16.0",
+    "nprogress": "^0.2.0",
+    "preact": "^10.20.1",
+    "prism-themes": "1.9.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-facebook": "^8.1.4",
+    "react-i18next": "^15.0.0",
+    "react-notion-x": "6.16.0",
+    "react-share": "^4.4.1",
+    "react-tweet-embed": "~2.0.0",
+    "store": "^2.0.12",
+    "typed.js": "^2.1.0",
+    "zustand": "^5.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.3.0",
+    "@types/js-md5": "^0.7.2",
+    "@types/lodash": "^4.17.7",
+    "@types/memory-cache": "^0.2.6",
+    "@types/node": "^20.12.12",
+    "@types/nprogress": "^0.2.3",
+    "@types/react": "18.2.75",
+    "@types/store": "^2.0.5",
+    "@waline/client": "^2.15.8",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "^14.2.3",
+    "eslint-config-prettier": "^9.1.0",
+    "next-sitemap": "^1.9.12",
+    "notion-types": "^6.16.0",
+    "postcss": "^8.4.38",
+    "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.13",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.4.4",
+    "typescript-eslint": "^7.10.0",
+    "webpack-bundle-analyzer": "^4.10.1"
+  },
+  "resolutions": {
+    "axios": ">=0.21.1"
+  },
+  "bugs": {
+    "url": "https://github.com/meannoharm/NotionNextBlogBase/issues"
+  }
+}

package/pages/404.tsx

@@ -0,0 +1,40 @@
+import { getGlobalData } from '@/lib/notion/getNotionData';
+import { useLayout } from '@/theme';
+
+import type { FC } from 'react';
+import type {
+  PageNotFoundIndexProps,
+  PageMeta,
+  ThemePageNotFoundProps,
+} from '@/types';
+import type { GetStaticProps } from 'next';
+
+/**
+ * 404
+ * @param {*} props
+ * @returns
+ */
+const NoFound: FC<PageNotFoundIndexProps> = (props) => {
+  const { siteInfo } = props;
+  const pageMeta: PageMeta = {
+    title: `${props?.siteInfo?.title} | 页面找不到啦`,
+    description: '404 page not found',
+    slug: '',
+    type: 'website',
+    image: siteInfo?.pageCover,
+  };
+
+  // 根据页面路径加载不同Layout文件
+  const Layout = useLayout() as FC<ThemePageNotFoundProps>;
+
+  return <Layout pageMeta={pageMeta} {...props} />;
+};
+
+export const getStaticProps: GetStaticProps<
+  PageNotFoundIndexProps
+> = async () => {
+  const props = (await getGlobalData('404')) || {};
+  return { props };
+};
+
+export default NoFound;