nnbb 0.0.1

package/themes/nobelium/components/ArticleLock.tsx

@@ -0,0 +1,86 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'next-i18next';
+
+import type { FC } from 'react';
+
+export interface ArticleInfoProps {
+  validPassword: (password: string) => boolean;
+}
+
+/**
+ * 加密文章校验组件
+ * @param {password, validPassword} props
+ * @param password 正确的密码
+ * @param validPassword(bool) 回调函数，校验正确回调入参为true
+ * @returns
+ */
+const ArticleLock: FC<ArticleInfoProps> = (props) => {
+  const { validPassword } = props;
+  const { t } = useTranslation('common');
+  const [password, setPassword] = useState('');
+  const [isShowTip, setIsShowTip] = useState(false);
+  const passwordInputRef = useRef<HTMLInputElement>(null);
+
+  const submitPassword = useCallback(() => {
+    if (!validPassword(password)) {
+      setIsShowTip(true);
+    } else {
+      setIsShowTip(false);
+    }
+  }, [password, validPassword]);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      submitPassword();
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) =>
+    setPassword(e.target.value);
+
+  useEffect(() => {
+    // 选中密码输入框并将其聚焦
+    passwordInputRef.current?.focus();
+  }, []);
+
+  return (
+    <div
+      id="container"
+      className="flex h-96 w-full items-center justify-center font-sans"
+    >
+      <div className="space-y-3 text-center">
+        <div className="font-bold">{t('article-lock-tips')}</div>
+        <div className="flex">
+          <input
+            id="password"
+            type="password"
+            value={password}
+            onKeyDown={handleKeyDown}
+            onChange={handleChange}
+            ref={passwordInputRef} // 绑定ref到passwordInputRef变量
+            className="w-full rounded-l bg-gray-50 pl-5 text-sm font-light leading-10 text-black outline-none transition focus:shadow-lg dark:bg-gray-500"
+          ></input>
+          <div
+            onClick={submitPassword}
+            className="cursor-pointer items-center justify-center whitespace-nowrap rounded-r bg-gray-300 px-3 py-2 duration-300"
+          >
+            <i
+              className={
+                'fas fa-key cursor-pointer duration-200 dark:text-black'
+              }
+            >
+              {t('submit')}
+            </i>
+          </div>
+        </div>
+        {isShowTip && (
+          <div className="animate__shakeX animate__animated text-red-500">
+            ${t('password-error')}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ArticleLock;

package/themes/nobelium/components/BlogArchiveItem.js

@@ -0,0 +1,41 @@
+import BLOG from '@/blog.config'
+import Link from 'next/link'
+
+/**
+ * 归档分组文章
+ * @param {*} param0
+ * @returns
+ */
+export default function BlogArchiveItem({ archiveTitle, archivePosts }) {
+  return (
+        <div key={archiveTitle}>
+            <div id={archiveTitle} className="pt-16 pb-4 text-3xl dark:text-gray-300" >
+                {archiveTitle}
+            </div>
+
+            <ul>
+                {archivePosts[archiveTitle].map(post => (
+                    <li
+                        key={post.id}
+                        className="border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500"
+                    >
+                        <div id={post?.publishDay}>
+                            <span className="text-gray-400">
+                                {post.date?.start_date}
+                            </span>{' '}
+                            &nbsp;
+                            <Link
+                                href={`${BLOG.SUB_PATH}/${post.slug}`}
+                                passHref
+                                className="dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
+
+                                {post.title}
+
+                            </Link>
+                        </div>
+                    </li>
+                ))}
+            </ul>
+        </div>
+  )
+}

package/themes/nobelium/components/BlogListBar.js

@@ -0,0 +1,39 @@
+import Tags from './Tags';
+
+export default function BlogListBar(props) {
+  const { tag, setFilterKey } = props;
+  const handleSearchChange = (val) => {
+    setFilterKey(val);
+  };
+  if (tag) {
+    return (
+      <div className="mb-4">
+        <div className="relative">
+          <input
+            type="text"
+            placeholder={tag ? `Search in #${tag}` : 'Search Articles'}
+            className="block w-full border border-black bg-white px-4 py-2 text-black outline-none dark:border-white dark:bg-night dark:text-white"
+            onChange={(e) => handleSearchChange(e.target.value)}
+          />
+          <svg
+            className="absolute right-3 top-3 h-5 w-5 text-black dark:text-white"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+            ></path>
+          </svg>
+        </div>
+        <Tags {...props} />
+      </div>
+    );
+  } else {
+    return <></>;
+  }
+}

package/themes/nobelium/components/BlogListPage.tsx

@@ -0,0 +1,67 @@
+import BLOG from '@/blog.config';
+import { useRouter } from 'next/router';
+import Link from 'next/link';
+import BlogPost from './BlogPost';
+import { useTranslation } from 'next-i18next';
+
+import type { FC } from 'react';
+import { PageInfo } from '@/lib/notion/types';
+
+export interface BlogListPageProps {
+  posts: PageInfo[];
+  page?: number;
+  postCount: number;
+}
+
+const BlogListPage: FC<BlogListPageProps> = (props) => {
+  const { t } = useTranslation('common');
+  const { page = 1, posts, postCount } = props;
+  const router = useRouter();
+  const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE);
+  const currentPage = +page;
+
+  const showPrev = currentPage > 1;
+  const showNext = currentPage < totalPage && posts?.length > 0;
+  const pagePrefix = router.asPath
+    .split('?')[0]
+    .replace(/\/page\/[1-9]\d*/, '')
+    .replace(/\/$/, '');
+
+  return (
+    <div className="my-6 w-full">
+      <div id="posts-wrapper">
+        {posts?.map((post) => <BlogPost key={post.id} post={post} />)}
+      </div>
+
+      <div className="flex justify-between text-xs">
+        <Link
+          href={{
+            pathname:
+              currentPage - 1 === 1
+                ? `${pagePrefix}/`
+                : `${pagePrefix}/page/${currentPage - 1}`,
+            query: router.query.s ? { s: router.query.s } : {},
+          }}
+          className={`${showPrev ? '  ' : ' pointer-events-none invisible block '}no-underline rounded px-3 py-2`}
+        >
+          <button rel="prev" className="block cursor-pointer">
+            {t('prev')}
+          </button>
+        </Link>
+        <Link
+          href={{
+            pathname: `${pagePrefix}/page/${currentPage + 1}`,
+            query: router.query.s ? { s: router.query.s } : {},
+          }}
+          className={`${showNext ? '  ' : 'pointer-events-none invisible '}  rounded px-3 py-2 no-underline`}
+        >
+          <button rel="next" className="block cursor-pointer">
+            {t('next')}
+          </button>
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default BlogListPage;

package/themes/nobelium/components/BlogListScroll.tsx

@@ -0,0 +1,96 @@
+import { useEffect, useState, useRef, useCallback, useMemo } from 'react';
+import BLOG from '@/blog.config';
+import Link from 'next/link';
+import React from 'react';
+import { throttle } from 'lodash';
+import { useTranslation } from 'next-i18next';
+import dayjs from 'dayjs';
+
+import type { FC } from 'react';
+import { PageInfo } from '@/lib/notion/types';
+
+export interface BlogListScrollProps {
+  posts: PageInfo[];
+}
+
+const BlogListScroll: FC<BlogListScrollProps> = (props) => {
+  const { posts } = props;
+  const { t } = useTranslation('common');
+  const [page, setPage] = useState(1);
+  const targetRef = useRef<HTMLDivElement>(null);
+
+  const hasMore = useMemo(
+    () => page * BLOG.POSTS_PER_PAGE < posts.length,
+    [posts, page],
+  );
+
+  const postsToShow = useMemo(
+    () => posts.slice(0, BLOG.POSTS_PER_PAGE * page),
+    [posts, page],
+  );
+
+  const handleGetMore = useCallback(() => {
+    if (hasMore) {
+      setPage((prevPage) => prevPage + 1);
+    }
+  }, [hasMore]);
+
+  // 监听滚动自动分页加载
+  const scrollTrigger = useCallback(() => {
+    const scrollPosition = window.scrollY + window.innerHeight;
+    const clientHeight = targetRef.current?.clientHeight || 0;
+    if (scrollPosition > clientHeight + 100) {
+      handleGetMore();
+    }
+  }, [handleGetMore]);
+
+  useEffect(() => {
+    const scrollTriggerThrottled = throttle(scrollTrigger, 500);
+    window.addEventListener('scroll', scrollTriggerThrottled);
+    return () => {
+      window.removeEventListener('scroll', scrollTriggerThrottled);
+    };
+  }, [scrollTrigger]);
+
+  return (
+    <div id="posts-wrapper" className="mb-12 w-full md:pr-12" ref={targetRef}>
+      {postsToShow.map((post) => (
+        <article key={post.id} className="mb-12">
+          <h2 className="mb-4">
+            <Link
+              href={`/${post.slug}`}
+              className="text-xl text-black no-underline hover:underline md:text-2xl"
+            >
+              {post.title}
+            </Link>
+          </h2>
+
+          <div className="mb-4 text-sm text-gray-700">
+            by
+            <a href="#" className="text-gray-700">
+              {BLOG.AUTHOR}
+            </a>
+            on {dayjs(post.publishDate).format('YYYY-MM-DD')}
+            <span className="mx-1 font-bold"> | </span>
+            <a href="#" className="text-gray-700">
+              {post.category}
+            </a>
+            <span className="mx-1 font-bold"> | </span>
+            {/* <a href="#" className="text-gray-700">2 Comments</a> */}
+          </div>
+
+          <p className="leading-normal text-gray-700">{post.summary}</p>
+        </article>
+      ))}
+
+      <div
+        onClick={handleGetMore}
+        className="my-4 w-full cursor-pointer py-4 text-center "
+      >
+        {hasMore ? t('more') : `${t('no-more')} 😰`}{' '}
+      </div>
+    </div>
+  );
+};
+
+export default BlogListScroll;

package/themes/nobelium/components/BlogPost.tsx

@@ -0,0 +1,33 @@
+import Link from 'next/link';
+import BLOG from '@/blog.config';
+import dayjs from 'dayjs';
+
+import type { FC } from 'react';
+import type { PageInfo } from '@/lib/notion/types';
+
+export interface BlogPostProps {
+  post: PageInfo;
+}
+const BlogPost: FC<BlogPostProps> = ({ post }) => {
+  return (
+    <Link href={`${BLOG.SUB_PATH}/${post.slug}`}>
+      <article key={post.id} className="mb-6 md:mb-8">
+        <header className="flex flex-col justify-between md:flex-row md:items-baseline">
+          <div className="mb-2 mr-4 cursor-pointer text-lg font-medium text-black dark:text-gray-100 md:text-xl">
+            {post.title}
+          </div>
+          <time className="flex-shrink-0 text-gray-600 dark:text-gray-400">
+            {dayjs(post?.publishDate).format('YYYY-MM-DD')}
+          </time>
+        </header>
+        <main>
+          <p className="hidden leading-8 text-gray-700 dark:text-gray-300 md:block">
+            {post.summary}
+          </p>
+        </main>
+      </article>
+    </Link>
+  );
+};
+
+export default BlogPost;

package/themes/nobelium/components/DarkModeButton.tsx

@@ -0,0 +1,50 @@
+import { useGlobal } from '@/lib/global';
+import { Moon, Sun } from '@/components/HeroIcons';
+import { useImperativeHandle } from 'react';
+
+import type { FC, RefObject } from 'react';
+
+export interface DarkModeButtonProps {
+  className?: string;
+  cRef?: RefObject<{ handleChangeDarkMode: () => void }>;
+}
+
+/**
+ * 深色模式按钮
+ */
+const DarkModeButton: FC<DarkModeButtonProps> = (props) => {
+  const { cRef, className } = props;
+  const { isDarkMode, updateDarkMode } = useGlobal();
+
+  /**
+   * 对外暴露方法
+   */
+  useImperativeHandle(cRef, () => {
+    return {
+      handleChangeDarkMode: () => {
+        handleChangeDarkMode();
+      },
+    };
+  });
+
+  // 用户手动设置主题
+  const handleChangeDarkMode = () => {
+    const newStatus = !isDarkMode;
+    updateDarkMode(newStatus);
+  };
+
+  return (
+    <div
+      onClick={handleChangeDarkMode}
+      className={`${
+        className || ''
+      } flex h-10 w-10 items-center justify-center rounded-full text-gray-800 hover:bg-black hover:bg-opacity-10 dark:text-gray-200 dark:hover:bg-white dark:hover:bg-opacity-10`}
+    >
+      <div id="darkModeButton" className=" h-5 w-5 transform cursor-pointer ">
+        {isDarkMode ? <Sun /> : <Moon />}
+      </div>
+    </div>
+  );
+};
+
+export default DarkModeButton;

package/themes/nobelium/components/ExampleRecentComments.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import BLOG from '@/blog.config'
+import Link from 'next/link'
+import { RecentComments } from '@waline/client'
+
+/**
+ * @see https://waline.js.org/guide/get-started.html
+ * @param {*} props
+ * @returns
+ */
+const ExampleRecentComments = (props) => {
+  const [comments, updateComments] = React.useState([])
+  const [onLoading, changeLoading] = React.useState(true)
+  React.useEffect(() => {
+    RecentComments({
+      serverURL: BLOG.COMMENT_WALINE_SERVER_URL,
+      count: 5
+    }).then(({ comments }) => {
+      changeLoading(false)
+      updateComments(comments)
+    })
+  }, [])
+
+  return <>
+         {onLoading && <div>Loading...<i className='ml-2 fas fa-spinner animate-spin' /></div>}
+        {!onLoading && comments && comments.length === 0 && <div>No Comments</div>}
+        {!onLoading && comments && comments.length > 0 && comments.map((comment) => <div key={comment.objectId} className='pb-2'>
+            <div className='dark:text-gray-300 text-gray-600 text-xs waline-recent-content wl-content' dangerouslySetInnerHTML={{ __html: comment.comment }} />
+            <div className='dark:text-gray-400 text-gray-400 font-sans text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } }}>--{comment.nick}</Link></div>
+        </div>)}
+
+  </>
+}
+
+export default ExampleRecentComments

package/themes/nobelium/components/Footer.tsx

@@ -0,0 +1,35 @@
+import BLOG from '@/blog.config';
+// import DarkModeButton from '@/components/DarkModeButton'
+import Vercel from '@/components/Vercel';
+
+const Footer = () => {
+  const d = new Date();
+  const currentYear = d.getFullYear();
+
+  const copyrightDate = (function () {
+    if (Number.isInteger(BLOG.SINCE) && BLOG.SINCE < currentYear) {
+      return BLOG.SINCE + '-' + currentYear;
+    }
+    return currentYear;
+  })();
+
+  return (
+    <footer className="relative z-10 m-auto mt-6 w-full max-w-2xl flex-shrink-0 px-4 text-gray-500 transition-all dark:text-gray-400">
+      {/* <DarkModeButton className="text-center py-4" /> */}
+      <hr className="border-gray-200 dark:border-gray-600" />
+      <div className="my-4 text-sm leading-6">
+        <div className="flex flex-col items-center md:flex-row">
+          <div className="mr-0 md:mr-2">
+            © {BLOG.AUTHOR} {copyrightDate}.
+          </div>
+          <div className="mb-2 mr-0 md:mb-0 md:mr-auto">
+            Licensed under <a href={BLOG.LICENSE_URL}>{BLOG.LICENSE}</a>.
+          </div>
+          <Vercel />
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

package/themes/nobelium/components/JumpToTopButton.tsx

@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'next-i18next';
+
+/**
+ * 跳转到网页顶部
+ * 当屏幕下滑500像素后会出现该控件
+ * @param targetRef 关联高度的目标html标签
+ * @param showPercent 是否显示百分比
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const JumpToTopButton = () => {
+  const { t } = useTranslation('common');
+  const [isShowButton, setIsShowButton] = useState(false);
+
+  useEffect(() => {
+    const scrollHandler = () => {
+      if (window.scrollY > 500) {
+        setIsShowButton(true);
+      } else {
+        setIsShowButton(false);
+      }
+    };
+    window.addEventListener('scroll', scrollHandler);
+    return () => window.removeEventListener('scroll', scrollHandler);
+  }, []);
+
+  return (
+    <div
+      title={t('top')}
+      className={`cursor-pointer transition-all ${isShowButton ? 'opacity-100' : 'opacity-0'}`}
+      onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+    >
+      <i className="fas fa-angle-up text-2xl" />
+    </div>
+  );
+};
+
+export default JumpToTopButton;

package/themes/nobelium/components/LanguageSwitchButton.tsx

@@ -0,0 +1,58 @@
+import { useRouter } from 'next/router';
+import Collapse from '@/components/Collapse';
+import { useRef, useState } from 'react';
+import { Language } from '@/components/HeroIcons';
+import useToggleClickOutSide from '@/hooks/useToggleClickOutSide';
+import nextI18NextConfig from '@/next-i18next.config.js';
+
+import type { RefObject } from 'react';
+
+/**
+ * 语言切换
+ */
+export default function LanguageSwitchButton() {
+  const [isOpen, setIsOpen] = useState(false);
+  const menuRef = useRef<HTMLElement>(null) as RefObject<HTMLDivElement>;
+  const router = useRouter();
+  const { locales } = nextI18NextConfig.i18n;
+
+  useToggleClickOutSide(menuRef, () => {
+    setIsOpen(false);
+  });
+
+  const changeLanguage = (locale: string) => {
+    router.push(
+      {
+        pathname: router.pathname,
+        query: router.query,
+      },
+      router.asPath,
+      { locale },
+    );
+  };
+
+  return (
+    <div className="relative" onClick={() => setIsOpen(!isOpen)} ref={menuRef}>
+      <div
+        className={`flex h-10 w-10 transform cursor-pointer items-center justify-center rounded-full text-gray-800 hover:bg-black hover:bg-opacity-10 dark:text-gray-200 dark:hover:bg-white dark:hover:bg-opacity-10`}
+      >
+        <Language className="h-5 w-5" />
+      </div>
+      <div
+        className={`${isOpen ? 'top-10 block opacity-100 ' : 'none top-8 opacity-0 '} absolute w-40 rounded border border-gray-100 bg-white drop-shadow-lg transition-all duration-300 dark:border-gray-800 dark:bg-black`}
+      >
+        <Collapse isOpen={isOpen}>
+          {locales.map((locale) => (
+            <div
+              className="p-3 text-gray-700 transition-all duration-200  hover:bg-gray-50 dark:border-gray-800 dark:text-gray-200 dark:hover:bg-gray-900"
+              key={locale}
+              onClick={() => changeLanguage(locale)}
+            >
+              {locale}
+            </div>
+          ))}
+        </Collapse>
+      </div>
+    </div>
+  );
+}

package/themes/nobelium/components/MenuItemCollapse.tsx

@@ -0,0 +1,92 @@
+import Collapse from '@/components/Collapse';
+import Link from 'next/link';
+import { useState } from 'react';
+
+import type { FC } from 'react';
+import type { NavLink } from '../types';
+
+export interface MenuItemCollapseProps {
+  link: NavLink;
+  onHeightChange?: (params: { height: number }) => void;
+}
+
+/**
+ * 折叠菜单
+ * @param {*} param0
+ * @returns
+ */
+export const MenuItemCollapse: FC<MenuItemCollapseProps> = (props) => {
+  const { link } = props;
+  const [isOpen, changeIsOpen] = useState(false);
+
+  const hasSubMenu = link?.subMenus?.length && link?.subMenus?.length > 0;
+
+  const toggleOpenSubMenu = () => {
+    changeIsOpen(!isOpen);
+  };
+
+  if (!link || !link.show) {
+    return null;
+  }
+
+  return (
+    <div className="mb-2 transition-all duration-200  last:mb-0 dark:border-black dark:bg-hexo-black-gray">
+      {!hasSubMenu && (
+        <Link
+          href={link?.to}
+          target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
+          className="flex px-4 dark:text-gray-200 "
+        >
+          {link?.icon && (
+            <div className="mr-2">
+              <i className={link.icon} />
+            </div>
+          )}
+          <div>{link?.name}</div>
+        </Link>
+      )}
+      {hasSubMenu && (
+        <div
+          onClick={hasSubMenu ? toggleOpenSubMenu : undefined}
+          className="flex cursor-pointer justify-center px-4 dark:text-gray-200 "
+        >
+          {link?.icon && (
+            <div className="mr-2">
+              <i className={link.icon} />
+            </div>
+          )}
+          <div className="mr-auto">{link?.name}</div>
+          <div className="flex items-center">
+            {isOpen ? (
+              <i className="fa fa-minus" />
+            ) : (
+              <i className="fa fa-plus" />
+            )}
+          </div>
+        </div>
+      )}
+      {/* 折叠子菜单 */}
+      {hasSubMenu && (
+        <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
+          <div className="flex flex-col">
+            {link.subMenus &&
+              link.subMenus.map((sLink) => {
+                return (
+                  <Link
+                    key={sLink.id}
+                    href={sLink.to}
+                    target={
+                      link?.to?.indexOf('http') === 0 ? '_blank' : '_self'
+                    }
+                    className="mt-2 px-12"
+                  >
+                    {sLink.title}
+                  </Link>
+                );
+              })}
+          </div>
+        </Collapse>
+      )}
+    </div>
+  );
+};