nnbb 0.0.1

package/themes/nobelium/index.tsx

@@ -0,0 +1,28 @@
+import PageNotFound from './pages/PageNotFound';
+import Archive from './pages/Archive';
+import Category from './pages/Category';
+import Home from './pages/Home';
+import PostList from './pages/PostList';
+import Search from './pages/Search';
+import Tag from './pages/Tag';
+import Post from './pages/Post';
+import CONFIG from './theme.config';
+
+export {
+  CONFIG as THEME_CONFIG,
+  Home,
+  PostList as Page,
+  Archive,
+  Category,
+  PostList as CategoryDetail,
+  PostList as CategoryPage,
+  Tag,
+  PostList as TagDetail,
+  PostList as TagPage,
+  Search,
+  PostList as SearchDetail,
+  PostList as SearchPage,
+  Post as Prefix,
+  Post as PrefixSlug,
+  PageNotFound,
+};

package/themes/nobelium/layout/LayoutBase.tsx

@@ -0,0 +1,79 @@
+import { Transition } from '@headlessui/react';
+import { useGlobal } from '@/lib/global';
+import CommonHead from '@/components/CommonHead';
+import Nav from '../components/Nav/Nav';
+import Footer from '../components/Footer';
+import JumpToTopButton from '../components/JumpToTopButton';
+import { useNobeliumStore } from '../providers';
+
+import { useEffect, type FC, type ReactNode } from 'react';
+import type { ThemeBaseProps } from '@/types';
+
+export interface LayoutBaseProps extends ThemeBaseProps {
+  topSlot?: ReactNode;
+  children: ReactNode;
+}
+
+/**
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const LayoutBase: FC<LayoutBaseProps> = (props) => {
+  const { children, topSlot, pageMeta, latestPosts, siteInfo } = props;
+
+  const { updateLatestPosts, updateSiteInfo } = useNobeliumStore(
+    (state) => state,
+  );
+
+  useEffect(() => {
+    updateLatestPosts(latestPosts);
+  }, [latestPosts, updateLatestPosts]);
+
+  useEffect(() => {
+    updateSiteInfo(siteInfo);
+  }, [siteInfo, updateSiteInfo]);
+
+  const { onLoading } = useGlobal();
+
+  return (
+    <div
+      id="theme-nobelium"
+      className="nobelium flex min-h-screen flex-col flex-nowrap items-stretch justify-start bg-white dark:bg-black dark:text-gray-300"
+    >
+      {/* SEO相关 */}
+      <CommonHead pageMeta={pageMeta} />
+
+      {/* 顶部导航栏 */}
+      <Nav />
+
+      {/* 主区 */}
+      <main className="max-w-2xl flex-grow self-center px-4 transition-all">
+        <Transition
+          show={!onLoading}
+          appear={true}
+          enter="transition ease-in-out duration-700 transform order-first"
+          enterFrom="opacity-0 translate-y-16"
+          enterTo="opacity-100"
+          leave="transition ease-in-out duration-300 transform"
+          leaveFrom="opacity-100 translate-y-0"
+          leaveTo="opacity-0 -translate-y-16"
+          unmount={false}
+        >
+          {/* 顶部插槽 */}
+          {topSlot}
+          {children}
+        </Transition>
+      </main>
+
+      {/* 页脚 */}
+      <Footer />
+
+      {/* 右下悬浮 */}
+      <div className="fixed bottom-4 right-4">
+        <JumpToTopButton />
+      </div>
+    </div>
+  );
+};
+
+export default LayoutBase;

package/themes/nobelium/pages/Archive.tsx

@@ -0,0 +1,30 @@
+import LayoutBase from '../layout/LayoutBase';
+import BlogArchiveItem from '../components/BlogArchiveItem';
+import { ContextWrapper } from '../providers';
+
+import type { FC } from 'react';
+import type { ThemeArchiveProps } from '@/types';
+
+/**
+ * 归档
+ * @param {*} props
+ * @returns
+ */
+const Archive: FC<ThemeArchiveProps> = (props) => {
+  const { archivePosts } = props;
+  return (
+    <LayoutBase {...props}>
+      <div className="mb-10 min-h-screen w-full p-3  pb-20 md:py-12">
+        {Object.keys(archivePosts).map((archiveTitle) => (
+          <BlogArchiveItem
+            key={archiveTitle}
+            archiveTitle={archiveTitle}
+            archivePosts={archivePosts}
+          />
+        ))}
+      </div>
+    </LayoutBase>
+  );
+};
+
+export default ContextWrapper(Archive);

package/themes/nobelium/pages/Category.tsx

@@ -0,0 +1,43 @@
+import Link from 'next/link';
+import LayoutBase from '../layout/LayoutBase';
+import { ContextWrapper } from '../providers';
+
+import type { FC } from 'react';
+import type { ThemeCategoryProps } from '@/types';
+
+/**
+ * 文章分类列表
+ * @param {*} props
+ * @returns
+ */
+const Category: FC<ThemeCategoryProps> = (props) => {
+  const { categoryOptions } = props;
+
+  return (
+    <LayoutBase {...props}>
+      <div id="category-list" className="flex flex-wrap duration-200">
+        {categoryOptions?.map((category) => {
+          return (
+            <Link
+              key={category.name}
+              href={`/category/${category.name}`}
+              passHref
+              legacyBehavior
+            >
+              <div
+                className={
+                  'cursor-pointer px-5 py-2 hover:bg-gray-100 hover:text-black dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white'
+                }
+              >
+                <i className="fas fa-folder mr-4" />
+                {category.name}({category.count})
+              </div>
+            </Link>
+          );
+        })}
+      </div>
+    </LayoutBase>
+  );
+};
+
+export default ContextWrapper(Category);

package/themes/nobelium/pages/Home.tsx

@@ -0,0 +1,22 @@
+import Announcement from '../components/Announcement';
+import { OriginPostList } from './PostList';
+import { ContextWrapper } from '../providers';
+
+import type { FC } from 'react';
+import type { ThemeHomeProps } from '@/types';
+
+/**
+ * 首页
+ * 首页是个博客列表，加上顶部嵌入一个公告
+ * @param {*} props
+ * @returns
+ */
+
+const Home: FC<ThemeHomeProps> = (props) => {
+  const { notice } = props;
+  return (
+    <OriginPostList {...props} topSlot={<Announcement notice={notice} />} />
+  );
+};
+
+export default ContextWrapper(Home);

package/themes/nobelium/pages/PageNotFound.tsx

@@ -0,0 +1,15 @@
+import LayoutBase from '../layout/LayoutBase';
+import { ContextWrapper } from '../providers';
+
+import type { FC } from 'react';
+import type { ThemePageNotFoundProps } from '@/types';
+/**
+ * 404 页面
+ * @param {*} props
+ * @returns
+ */
+const PageNotFound: FC<ThemePageNotFoundProps> = (props) => {
+  return <LayoutBase {...props}>404 Not found.</LayoutBase>;
+};
+
+export default ContextWrapper(PageNotFound);

package/themes/nobelium/pages/Post.tsx

@@ -0,0 +1,34 @@
+import LayoutBase from '../layout/LayoutBase';
+import ArticleLock from '../components/ArticleLock';
+import ArticleInfo from '../components/ArticleInfo';
+import ArticleFooter from '../components/ArticleFooter';
+// TODO: move to theme file
+import NotionPage from '@/components/NotionPage';
+import ShareBar from '@/components/ShareBar';
+import Comment from '@/components/Comment';
+import { ContextWrapper } from '../providers';
+
+import type { FC } from 'react';
+import type { ThemePrefixProps, ThemePrefixSlugProps } from '@/types';
+
+const Post: FC<ThemePrefixProps & ThemePrefixSlugProps> = (props) => {
+  const { post, isLock, validPassword } = props;
+
+  return (
+    <LayoutBase {...props}>
+      {isLock && <ArticleLock validPassword={validPassword} />}
+
+      {!isLock && (
+        <div id="article-wrapper" className="px-2">
+          {post && <ArticleInfo post={post} />}
+          {post && <NotionPage post={post} />}
+          <ShareBar post={post} />
+          <Comment frontMatter={post} />
+          <ArticleFooter />
+        </div>
+      )}
+    </LayoutBase>
+  );
+};
+
+export default ContextWrapper(Post);

package/themes/nobelium/pages/PostList.tsx

@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import BLOG from '@/blog.config';
+import LayoutBase from '../layout/LayoutBase';
+import { deepClone } from '@/lib/utils';
+import BlogListPage from '../components/BlogListPage';
+import BlogListScroll from '../components/BlogListScroll';
+import BlogListBar from '../components/BlogListBar';
+import { ContextWrapper } from '../providers';
+
+import type { PageInfo } from '@/lib/notion/types';
+import type {
+  ThemeHomeProps,
+  ThemeCategoryDetailProps,
+  ThemeCategoryPageProps,
+  ThemeTagDetailProps,
+  ThemeTagPageProps,
+  ThemeSearchDetailProps,
+  ThemeSearchPageProps,
+} from '@/types';
+import type { FC, ReactNode } from 'react';
+
+/**
+ * 博客列表
+ * @param {*} props
+ * @returns
+ */
+const PostList: FC<
+  ThemeHomeProps &
+    Partial<
+      ThemeCategoryDetailProps &
+        ThemeCategoryPageProps &
+        ThemeTagDetailProps &
+        ThemeTagPageProps &
+        ThemeSearchDetailProps &
+        ThemeSearchPageProps & {
+          topSlot: ReactNode;
+        }
+    >
+> = (props) => {
+  const { posts, postCount, page, topSlot } = props;
+
+  // 在列表中进行实时过滤
+  const [filterKey, setFilterKey] = useState('');
+  let filteredBlogPosts: PageInfo[] = [];
+  if (filterKey && posts) {
+    filteredBlogPosts = posts.filter((post) => {
+      const tagContent = post?.tags ? post?.tags.join(' ') : '';
+      const searchContent = post.title + post.summary + tagContent;
+      return searchContent.toLowerCase().includes(filterKey.toLowerCase());
+    });
+  } else {
+    filteredBlogPosts = deepClone(posts);
+  }
+  return (
+    <LayoutBase
+      {...props}
+      topSlot={<BlogListBar {...props} setFilterKey={setFilterKey} />}
+    >
+      {topSlot}
+      {BLOG.POST_LIST_STYLE === 'page' ? (
+        <BlogListPage
+          postCount={postCount}
+          page={page}
+          posts={filteredBlogPosts}
+        />
+      ) : (
+        <BlogListScroll posts={filteredBlogPosts} />
+      )}
+    </LayoutBase>
+  );
+};
+
+export const OriginPostList = PostList;
+export default ContextWrapper(PostList);

package/themes/nobelium/pages/Search.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useState } from 'react';
+import { deepClone } from '@/lib/utils';
+import BLOG from '@/blog.config';
+import replaceSearchResult from '@/components/Mark';
+import { isBrowser } from '@/lib/utils';
+import LayoutBase from '../layout/LayoutBase';
+import BlogListBar from '../components/BlogListBar';
+import SearchNavBar from '../components/SearchNavBar';
+import BlogListPage from '../components/BlogListPage';
+import BlogListScroll from '../components/BlogListScroll';
+import { ContextWrapper } from '../providers/index';
+
+import type { FC } from 'react';
+import type { ThemeSearchProps } from '@/types';
+
+/**
+ * 搜索
+ * 页面是博客列表，上方嵌入一个搜索引导条
+ * @param {*} props
+ * @returns
+ */
+const Search: FC<ThemeSearchProps> = (props) => {
+  const { keyword, posts, postCount } = props;
+  useEffect(() => {
+    if (isBrowser) {
+      replaceSearchResult({
+        doms: document.getElementById('posts-wrapper'),
+        search: keyword,
+        target: {
+          element: 'span',
+          className: 'text-red-500 border-b border-dashed',
+        },
+      });
+    }
+  }, []);
+
+  // 在列表中进行实时过滤
+  const [filterKey, setFilterKey] = useState('');
+  let filteredBlogPosts = [];
+  if (filterKey && posts) {
+    filteredBlogPosts = posts.filter((post) => {
+      const tagContent = post?.tags ? post?.tags.join(' ') : '';
+      const searchContent = post.title + post.summary + tagContent;
+      return searchContent.toLowerCase().includes(filterKey.toLowerCase());
+    });
+  } else {
+    filteredBlogPosts = deepClone(posts);
+  }
+
+  return (
+    <LayoutBase
+      {...props}
+      topSlot={<BlogListBar {...props} setFilterKey={setFilterKey} />}
+    >
+      <SearchNavBar {...props} />
+      {BLOG.POST_LIST_STYLE === 'page' ? (
+        <BlogListPage postCount={postCount} posts={filteredBlogPosts} />
+      ) : (
+        <BlogListScroll posts={filteredBlogPosts} />
+      )}
+    </LayoutBase>
+  );
+};
+
+export default ContextWrapper(Search);

package/themes/nobelium/pages/Tag.tsx

@@ -0,0 +1,42 @@
+import Link from 'next/link';
+import LayoutBase from '../layout/LayoutBase';
+import { ContextWrapper } from '../providers/index';
+
+import type { FC } from 'react';
+import type { ThemeTagProps } from '@/types';
+
+/**
+ * 文章标签列表
+ * @param {*} props
+ * @returns
+ */
+const Tag: FC<ThemeTagProps> = (props) => {
+  const { tagOptions } = props;
+  return (
+    <LayoutBase {...props}>
+      <div>
+        <div id="tags-list" className="flex flex-wrap duration-200">
+          {tagOptions.map((tag) => {
+            return (
+              <div key={tag.name} className="p-2">
+                <Link
+                  key={tag.id}
+                  href={`/tag/${encodeURIComponent(tag.name)}`}
+                  passHref
+                  className={`mr-2 inline-block cursor-pointer whitespace-nowrap rounded px-2 py-1 text-xs text-gray-600 duration-200 hover:bg-gray-500 hover:text-white hover:shadow-xl dark:border-gray-400 dark:hover:text-white notion-${tag.color}_background dark:bg-gray-800`}
+                >
+                  <div className="font-light dark:text-gray-400">
+                    <i className="fas fa-tag mr-1" />{' '}
+                    {tag.name + (tag.count ? `(${tag.count})` : '')}{' '}
+                  </div>
+                </Link>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </LayoutBase>
+  );
+};
+
+export default ContextWrapper(Tag);

package/themes/nobelium/providers/index.tsx

@@ -0,0 +1,60 @@
+import React, {
+  type ReactNode,
+  createContext,
+  useRef,
+  useContext,
+} from 'react';
+import { useStore } from 'zustand';
+
+import { type NobeliumStore, createNobeliumStore } from '../stores';
+
+export type NobeliumStoreApi = ReturnType<typeof createNobeliumStore>;
+
+export const NobeliumStoreContext = createContext<NobeliumStoreApi | undefined>(
+  undefined,
+);
+
+export interface NobeliumStoreProviderProps {
+  children: ReactNode;
+}
+
+export const NobeliumStoreProvider = ({
+  children,
+}: NobeliumStoreProviderProps) => {
+  const storeRef = useRef<NobeliumStoreApi>();
+  if (!storeRef.current) {
+    storeRef.current = createNobeliumStore();
+  }
+
+  return (
+    <NobeliumStoreContext.Provider value={storeRef.current}>
+      {children}
+    </NobeliumStoreContext.Provider>
+  );
+};
+
+export const useNobeliumStore = <T,>(
+  selector: (store: NobeliumStore) => T,
+): T => {
+  const nobeliumStoreContext = useContext(NobeliumStoreContext);
+
+  if (!nobeliumStoreContext) {
+    throw new Error(
+      `useNobeliumStore must be used within NobeliumStoreProvider`,
+    );
+  }
+
+  return useStore(nobeliumStoreContext, selector);
+};
+
+export const ContextWrapper = <P extends object>(
+  Component: React.ComponentType<P>,
+): React.FC<P> => {
+  const WrappedComponent: React.FC<P> = (props) => (
+    <NobeliumStoreProvider>
+      <Component {...props} />
+    </NobeliumStoreProvider>
+  );
+
+  return WrappedComponent;
+};

package/themes/nobelium/stores/index.tsx

@@ -0,0 +1,42 @@
+import { createStore } from 'zustand';
+
+import { SiteInfo, PageInfo } from '@/lib/notion/types';
+
+export interface NobeliumState {
+  siteInfo: SiteInfo;
+  latestPosts: PageInfo[];
+}
+
+export interface NobeliumAction {
+  updateSiteInfo: (siteInfo: NobeliumStore['siteInfo']) => void;
+  updateLatestPosts: (latestPosts: NobeliumStore['latestPosts']) => void;
+}
+
+export type NobeliumStore = NobeliumState & NobeliumAction;
+
+export const defaultInitState: NobeliumState = {
+  siteInfo: {
+    title: '',
+    description: '',
+    pageCover: '',
+    icon: '',
+  },
+  latestPosts: [],
+};
+
+export const createNobeliumStore = (
+  initState: NobeliumState = defaultInitState,
+) => {
+  return createStore<NobeliumStore>()((set) => ({
+    siteInfo: initState.siteInfo,
+    latestPosts: initState.latestPosts,
+    updateSiteInfo: (siteInfo) =>
+      set(() => ({
+        siteInfo: siteInfo,
+      })),
+    updateLatestPosts: (latestPosts) =>
+      set(() => ({
+        latestPosts: latestPosts,
+      })),
+  }));
+};

package/themes/nobelium/theme.config.ts

@@ -0,0 +1,17 @@
+const CONFIG = {
+  NAV_NOTION_ICON: true, // 是否读取Notion图标作为站点头像 ; 否则默认显示黑色SVG方块
+
+  // 特殊菜单
+  MENU_RANDOM_POST: true, // 是否显示随机跳转文章按钮
+  MENU_SEARCH_BUTTON: false, // 是否显示搜索按钮，该按钮支持Algolia搜索
+  MENU_LANGUAGE_SWITCH: true,
+  MENU_DARK_MODE_SWITCH: true,
+
+  // 默认菜单配置 （开启自定义菜单后，以下配置则失效，请在Notion中自行配置菜单）
+  MENU_CATEGORY: true, // 显示分类
+  MENU_TAG: true, // 显示标签
+  MENU_ARCHIVE: true, // 显示归档
+  MENU_SEARCH: true, // 显示搜索
+  MENU_RSS: true, // 显示订阅
+};
+export default CONFIG;

package/themes/nobelium/types/index.ts

@@ -0,0 +1,10 @@
+export type NavLink = {
+  id?: string;
+  icon?: string;
+  name: string;
+  to: string;
+  show: boolean;
+  target?: string;
+  subMenus?: NavLink[];
+  title?: '';
+};

package/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "baseUrl": ".",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    },
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.d.ts"],
+  "exclude": ["node_modules"]
+}

package/types/index.ts

@@ -0,0 +1 @@
+export * from './page';