nnbb 0.0.1

package/themes/nobelium/components/MenuItemDrop.tsx

@@ -0,0 +1,83 @@
+import Link from 'next/link';
+import { useState } from 'react';
+import useToggleClickOutSide from '@/hooks/useToggleClickOutSide';
+import { useTranslation } from 'next-i18next';
+import { useRef } from 'react';
+
+import type { FC } from 'react';
+import type { NavLink } from '../types';
+
+export interface MenuItemDropProps {
+  link: NavLink;
+}
+export const MenuItemDrop: FC<MenuItemDropProps> = ({ link }) => {
+  const [show, changeShow] = useState(false);
+  const menuRef = useRef(null);
+  const { t } = useTranslation('nav');
+
+  useToggleClickOutSide(menuRef, () => {
+    changeShow(false);
+  });
+
+  const toggleShow = () => {
+    changeShow(!show);
+  };
+
+  if (!link || !link.show) {
+    return null;
+  }
+
+  const hasSubMenu = link.subMenus && link?.subMenus.length > 0;
+
+  return (
+    <div
+      className="relative cursor-pointer rounded-full px-3 py-2 hover:bg-black hover:bg-opacity-10 dark:hover:bg-white dark:hover:bg-opacity-10"
+      ref={menuRef}
+    >
+      {!hasSubMenu && (
+        <Link
+          className={`block text-black dark:text-gray-50`}
+          href={link?.to}
+          target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
+        >
+          {link?.icon && <i className={link?.icon} />} {t(link.name)}
+        </Link>
+      )}
+
+      {hasSubMenu && (
+        <div
+          className={`block text-black dark:text-gray-50`}
+          onClick={toggleShow}
+        >
+          {link?.icon && <i className={link?.icon} />} {link?.name}
+          <i
+            className={`fas fa-chevron-down px-2 transition-all duration-500 ${show ? ' rotate-180' : ''}`}
+          ></i>
+        </div>
+      )}
+
+      {/* 子菜单 */}
+      {hasSubMenu && (
+        <div
+          className={`${show ? 'visible top-10 opacity-100 ' : 'invisible top-8 opacity-0 '} absolute z-20 block w-40 rounded border border-gray-100 bg-white drop-shadow-lg transition-all duration-300 dark:border-gray-800 dark:bg-black`}
+        >
+          {link.subMenus?.map((sLink) => {
+            return (
+              <Link
+                key={sLink.id}
+                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"
+                href={sLink.to}
+                target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
+              >
+                <span className="text-nowrap">
+                  {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
+                  {sLink.title}
+                </span>
+              </Link>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};

package/themes/nobelium/components/Nav/Nav.module.css

@@ -0,0 +1,50 @@
+.stickyNav {
+  position: sticky;
+  z-index: 10;
+  top: 0;
+  backdrop-filter: blur(5px);
+  transition: all 0.5s cubic-bezier(0.4, 0, 0, 1);
+  border-bottom-color: transparent;
+}
+
+.stickyNavFull {
+  @apply border-b border-gray-200 border-opacity-50 dark:border-gray-600 dark:border-opacity-50;
+}
+
+.article-tags::-webkit-scrollbar {
+  width: 0 !important;
+}
+
+.tag-container ul::-webkit-scrollbar {
+  width: 0 !important;
+}
+
+.tag-container ul {
+  -ms-overflow-style: none;
+  overflow: -moz-scrollbars-none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  -khtml-user-select: none;
+  user-select: none;
+}
+
+@media (min-width: 768px) {
+  .stickyNavFull {
+    @apply max-w-full border-b border-gray-200 border-opacity-50 dark:border-gray-600 dark:border-opacity-50;
+  }
+  .headerName {
+    display: block;
+    transition: all 0.5s cubic-bezier(0.4, 0, 0, 1);
+  }
+  .stickyNavFull .headerName {
+    @apply text-gray-600 dark:text-gray-300;
+  }
+}
+
+@supports not (backdrop-filter: none) {
+  .stickyNav {
+    backdrop-filter: none;
+    @apply bg-day dark:bg-gray-800;
+  }
+}

package/themes/nobelium/components/Nav/Nav.tsx

@@ -0,0 +1,187 @@
+import { useEffect, useRef, useState } from 'react';
+import Link from 'next/link';
+import BLOG from '@/blog.config';
+import CONFIG from '../../theme.config';
+import { SvgIcon } from '../SvgIcon';
+import { MenuItemDrop } from '../MenuItemDrop';
+import Collapse from '@/components/Collapse';
+import { MenuItemCollapse } from '../MenuItemCollapse';
+import LazyImage from '@/components/LazyImage';
+import DarkModeButton from '../DarkModeButton';
+import RandomPostButton from '../RandomPostButton';
+import SearchButton from '../SearchButton';
+import LanguageSwitchButton from '../LanguageSwitchButton';
+import useToggleClickOutSide from '@/hooks/useToggleClickOutSide';
+import { useNobeliumStore } from '../../providers';
+import styles from './Nav.module.css';
+
+import type { FC } from 'react';
+import type { NavLink } from '../../types';
+import type { CollapseHandle } from '@/components/Collapse';
+
+const Nav: FC = () => {
+  const navRef = useRef<HTMLDivElement>(null);
+  const sentinelRef = useRef<HTMLDivElement>(null);
+  const { siteInfo } = useNobeliumStore((state) => state);
+
+  const handler: IntersectionObserverCallback = ([entry]) => {
+    if (navRef && navRef.current) {
+      if (!entry.isIntersecting && entry !== undefined) {
+        navRef.current?.classList.add(styles.stickyNavFull);
+      } else {
+        navRef.current?.classList.remove(styles.stickyNavFull);
+      }
+    } else {
+      navRef.current?.classList.add('remove-sticky');
+    }
+  };
+
+  useEffect(() => {
+    const observer = new window.IntersectionObserver(handler);
+    const sentinelRefCurrent = sentinelRef.current;
+    if (sentinelRefCurrent) observer.observe(sentinelRefCurrent);
+    return () => {
+      if (sentinelRefCurrent) observer.unobserve(sentinelRefCurrent);
+    };
+  }, [sentinelRef]);
+
+  return (
+    <>
+      <div className="h-4 md:h-12" ref={sentinelRef} />
+      <div
+        className={`${styles.stickyNav} m-auto mb-2 flex h-6 w-full max-w-3xl flex-row items-center justify-between bg-opacity-60 px-4 py-8 md:mb-12`}
+        ref={navRef}
+      >
+        <Link
+          className="flex items-center rounded-full px-3 py-2 hover:bg-black hover:bg-opacity-10 dark:hover:bg-white dark:hover:bg-opacity-10"
+          href="/"
+          aria-label={BLOG.TITLE}
+        >
+          <div className="h-6 w-6">
+            {/* <SvgIcon/> */}
+            {CONFIG.NAV_NOTION_ICON ? (
+              <LazyImage
+                src={siteInfo?.icon}
+                width={24}
+                height={24}
+                alt={BLOG.AUTHOR}
+              />
+            ) : (
+              <SvgIcon />
+            )}
+          </div>
+          <p
+            className={`${styles.headerName} ml-2 overflow-hidden font-medium text-gray-800 dark:text-gray-300`}
+          >
+            {siteInfo?.title}
+          </p>
+        </Link>
+        <NavBar />
+      </div>
+    </>
+  );
+};
+
+const NavBar: FC = () => {
+  const [isOpen, changeOpen] = useState(false);
+  const collapseRef = useRef<CollapseHandle>(null);
+  const mobileMenuRef = useRef(null);
+  const mobileMenuToggleButtonRef = useRef(null);
+
+  const toggleOpen = () => {
+    changeOpen(!isOpen);
+  };
+
+  useToggleClickOutSide([mobileMenuRef, mobileMenuToggleButtonRef], () => {
+    changeOpen(false);
+  });
+
+  const links: NavLink[] = [
+    {
+      id: 'rss',
+      icon: 'fas fa-rss',
+      name: 'rss',
+      to: '/feed',
+      show: !!(BLOG.ENABLE_RSS && CONFIG.MENU_RSS),
+      target: '_blank',
+    },
+    {
+      id: 'search',
+      icon: 'fas fa-search',
+      name: 'search',
+      to: '/search',
+      show: CONFIG.MENU_SEARCH,
+    },
+    {
+      id: 'archive',
+      icon: 'fas fa-archive',
+      name: 'archive',
+      to: '/archive',
+      show: CONFIG.MENU_ARCHIVE,
+    },
+    {
+      id: 'category',
+      icon: 'fas fa-folder',
+      name: 'category',
+      to: '/category',
+      show: CONFIG.MENU_CATEGORY,
+    },
+    {
+      id: 'tags',
+      icon: 'fas fa-tag',
+      name: 'tags',
+      to: '/tag',
+      show: CONFIG.MENU_TAG,
+    },
+  ];
+
+  if (!links || links.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-shrink-0">
+      <ul className="hidden flex-row md:flex">
+        {links.map((link) => (
+          <MenuItemDrop key={link?.id} link={link} />
+        ))}
+      </ul>
+
+      {CONFIG.MENU_RANDOM_POST && <RandomPostButton />}
+      {CONFIG.MENU_SEARCH_BUTTON && <SearchButton />}
+      {CONFIG.MENU_LANGUAGE_SWITCH && <LanguageSwitchButton />}
+      {CONFIG.MENU_DARK_MODE_SWITCH && <DarkModeButton />}
+
+      {/* 移动端菜单按钮 */}
+      <div
+        onClick={toggleOpen}
+        ref={mobileMenuToggleButtonRef}
+        className="flex h-10 w-10 cursor-pointer items-center justify-center md:hidden"
+      >
+        <i className="fas fa-bars"></i>
+      </div>
+
+      {/* 移动端使用的菜单 */}
+      <div className="md:hidden" ref={mobileMenuRef}>
+        <Collapse
+          collapseRef={collapseRef}
+          isOpen={isOpen}
+          type="vertical"
+          className="fixed right-6 top-16"
+        >
+          <div className="flex w-48 flex-col rounded border bg-white py-2 text-sm dark:border-black dark:bg-black">
+            {links.map((link) => (
+              <MenuItemCollapse
+                key={link?.id}
+                link={link}
+                onHeightChange={collapseRef.current?.updateCollapseHeight}
+              />
+            ))}
+          </div>
+        </Collapse>
+      </div>
+    </div>
+  );
+};
+
+export default Nav;

package/themes/nobelium/components/RandomPostButton.tsx

@@ -0,0 +1,31 @@
+import BLOG from '@/blog.config';
+import { useRouter } from 'next/router';
+import { useTranslation } from 'next-i18next';
+import { useNobeliumStore } from '../providers';
+
+/**
+ * 随机跳转到一个文章
+ */
+export default function RandomPostButton() {
+  const router = useRouter();
+  const { t } = useTranslation('menu');
+  const { latestPosts } = useNobeliumStore((state) => state);
+  /**
+   * 随机跳转文章
+   */
+  function handleClick() {
+    const randomIndex = Math.floor(Math.random() * latestPosts.length);
+    const randomPost = latestPosts[randomIndex];
+    router.push(`${BLOG.SUB_PATH}/${randomPost?.slug}`);
+  }
+
+  return (
+    <div
+      title={t('walk-around')}
+      className="flex h-10 w-10 cursor-pointer items-center justify-center rounded-full hover:bg-black hover:bg-opacity-10 dark:hover:bg-white dark:hover:bg-opacity-10"
+      onClick={handleClick}
+    >
+      <i className="fa-solid fa-podcast"></i>
+    </div>
+  );
+}

package/themes/nobelium/components/SearchButton.tsx

@@ -0,0 +1,31 @@
+// import BLOG from '@/blog.config';
+import { useRouter } from 'next/router';
+import { useTranslation } from 'next-i18next';
+
+/**
+ * 搜索按钮
+ * @returns
+ */
+export default function SearchButton() {
+  // const { searchModal } = useNobeliumGlobal();
+  const { t } = useTranslation('nav');
+  const router = useRouter();
+
+  function handleSearch() {
+    // if (BLOG.ALGOLIA_APP_ID) {
+    //   searchModal.current.openSearch();
+    // } else {
+    router.push('/search');
+    // }
+  }
+
+  return (
+    <div
+      onClick={handleSearch}
+      title={t('search')}
+      className="flex h-10 w-10 cursor-pointer items-center justify-center rounded-full  hover:bg-black hover:bg-opacity-10 dark:hover:bg-white dark:hover:bg-opacity-10"
+    >
+      <i title={t('search')} className="fa-solid fa-magnifying-glass" />
+    </div>
+  );
+}

package/themes/nobelium/components/SearchInput.tsx

@@ -0,0 +1,94 @@
+import { useRouter } from 'next/router';
+import { type FC, useRef, useState } from 'react';
+import { useTranslation } from 'next-i18next';
+
+export interface SearchInputProps {
+  tag: string;
+  keyword: string;
+}
+
+const SearchInput: FC<SearchInputProps> = ({ tag, keyword }) => {
+  const router = useRouter();
+  const { t } = useTranslation('common');
+  const [showClean, setShowClean] = useState(false);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const lock = useRef(false);
+
+  const handleSearch = () => {
+    const key = searchInputRef.current?.value.trim();
+    if (key) {
+      router.push(`/search/${key}`);
+    } else {
+      router.push('/');
+    }
+  };
+
+  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') handleSearch();
+    else if (e.key === 'Escape') cleanSearch();
+  };
+
+  const cleanSearch = () => {
+    (searchInputRef.current as HTMLInputElement).value = '';
+    setShowClean(false);
+  };
+
+  function lockSearchInput() {
+    lock.current = true;
+  }
+
+  function unLockSearchInput() {
+    lock.current = false;
+  }
+  const updateSearchKey = () => {
+    if (lock.current) {
+      return;
+    }
+    if (searchInputRef.current?.value) {
+      setShowClean(true);
+    } else {
+      setShowClean(false);
+    }
+  };
+
+  return (
+    <section className="flex w-full bg-gray-100">
+      <input
+        ref={searchInputRef}
+        type="text"
+        placeholder={tag ? `${t('tags')} #${tag}` : `${t('search-articles')}`}
+        className={
+          'w-full bg-gray-100 pl-4 text-sm font-light leading-10 text-black outline-none transition focus:shadow-lg dark:bg-gray-900 dark:text-white'
+        }
+        onKeyUp={handleKeyUp}
+        onCompositionStart={lockSearchInput}
+        onCompositionUpdate={lockSearchInput}
+        onCompositionEnd={unLockSearchInput}
+        onChange={updateSearchKey}
+        defaultValue={keyword || ''}
+      />
+
+      <div
+        className="float-right -ml-8 cursor-pointer items-center justify-center py-2"
+        onClick={handleSearch}
+      >
+        <i
+          className={
+            'fas fa-search transform  cursor-pointer text-gray-500 duration-200 hover:text-black'
+          }
+        />
+      </div>
+
+      {showClean && (
+        <div className="float-right -ml-12 cursor-pointer items-center justify-center py-2 dark:bg-gray-600 dark:hover:bg-gray-800">
+          <i
+            className="fas fa-times transform cursor-pointer text-gray-400 duration-200 hover:text-black"
+            onClick={cleanSearch}
+          />
+        </div>
+      )}
+    </section>
+  );
+};
+
+export default SearchInput;

package/themes/nobelium/components/SearchNavBar.js

@@ -0,0 +1,19 @@
+import SearchInput from './SearchInput';
+import Tags from './Tags';
+
+/**
+ * 搜索页面上方嵌入内容
+ * @param {*} props
+ * @returns
+ */
+export default function SearchNavBar(props) {
+  return (
+    <>
+      <div className="pb-12">
+        <SearchInput {...props} />
+      </div>
+
+      <Tags tagOptions={props.tagOptions} tag={props.keyword} />
+    </>
+  );
+}

package/themes/nobelium/components/SideBar.js

@@ -0,0 +1,83 @@
+import BLOG from '@/blog.config';
+import Live2D from '@/components/Live2D';
+import Link from 'next/link';
+import dynamic from 'next/dynamic';
+import { useTranslation } from 'next-i18next';
+
+const ExampleRecentComments = dynamic(() => import('./ExampleRecentComments'));
+
+export const SideBar = (props) => {
+  const { latestPosts, categories } = props;
+  const { t } = useTranslation('common');
+
+  return (
+    <div className="sticky top-8 w-full md:w-64">
+      <aside className="mb-6 overflow-hidden rounded shadow">
+        <h3 className="border-b bg-gray-100 px-4 py-3 text-sm text-gray-700 dark:border-hexo-black-gray dark:bg-hexo-black-gray dark:text-gray-200">
+          {t('category')}
+        </h3>
+
+        <div className="p-4">
+          <ul className="list-reset leading-normal">
+            {categories?.map((category) => {
+              return (
+                <Link
+                  key={category.name}
+                  href={`/category/${category.name}`}
+                  passHref
+                  legacyBehavior
+                >
+                  <li>
+                    {' '}
+                    <a href="#" className="text-gray-darkest text-sm">
+                      {category.name}({category.count})
+                    </a>
+                  </li>
+                </Link>
+              );
+            })}
+          </ul>
+        </div>
+      </aside>
+
+      <aside className="mb-6 overflow-hidden rounded shadow">
+        <h3 className="border-b bg-gray-100 px-4 py-3 text-sm text-gray-700 dark:border-hexo-black-gray dark:bg-hexo-black-gray dark:text-gray-200">
+          {t('latest-posts')}
+        </h3>
+
+        <div className="p-4">
+          <ul className="list-reset leading-normal">
+            {latestPosts?.map((p) => {
+              return (
+                <Link key={p.id} href={`/${p.slug}`} passHref legacyBehavior>
+                  <li>
+                    {' '}
+                    <a href="#" className="text-gray-darkest text-sm">
+                      {p.title}
+                    </a>
+                  </li>
+                </Link>
+              );
+            })}
+          </ul>
+        </div>
+      </aside>
+
+      {BLOG.COMMENT_WALINE_SERVER_URL && BLOG.COMMENT_WALINE_RECENT && (
+        <aside className="mb-6 overflow-hidden rounded shadow">
+          <h3 className="border-b bg-gray-100 px-4 py-3 text-sm text-gray-700 dark:border-hexo-black-gray dark:bg-hexo-black-gray dark:text-gray-200">
+            {t('recent-comments')}
+          </h3>
+
+          <div className="p-4">
+            <ExampleRecentComments />
+          </div>
+        </aside>
+      )}
+
+      <aside className="mb-6  overflow-hidden rounded">
+        <Live2D />
+      </aside>
+    </div>
+  );
+};

package/themes/nobelium/components/SvgIcon.js

@@ -0,0 +1,29 @@
+export const SvgIcon = () => {
+  return <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <rect
+            width="24"
+            height="24"
+            className="fill-current text-black dark:text-white"
+        />
+        <rect width="24" height="24" fill="url(#paint0_radial)" />
+        <defs>
+            <radialGradient
+                id="paint0_radial"
+                cx="0"
+                cy="0"
+                r="1"
+                gradientUnits="userSpaceOnUse"
+                gradientTransform="rotate(45) scale(39.598)"
+            >
+                <stop stopColor="#CFCFCF" stopOpacity="0.6" />
+                <stop offset="1" stopColor="#E9E9E9" stopOpacity="0" />
+            </radialGradient>
+        </defs>
+    </svg>
+}

package/themes/nobelium/components/TagItem.js

@@ -0,0 +1,13 @@
+import Link from 'next/link'
+
+const TagItem = ({ tag }) => (
+  (<Link href={`/tag/${encodeURIComponent(tag)}`}>
+
+    <p className="mr-1 rounded-full px-2 py-1 border leading-none text-sm dark:border-gray-600">
+      {tag}
+    </p>
+
+  </Link>)
+)
+
+export default TagItem

package/themes/nobelium/components/Tags.tsx

@@ -0,0 +1,44 @@
+import Link from 'next/link';
+import type { TagInfo } from '@/lib/notion/types';
+import type { FC } from 'react';
+
+export interface TagsProps {
+  tagOptions: TagInfo[];
+  tag: string;
+}
+
+const Tags: FC<TagsProps> = ({ tagOptions, tag: currentTag }) => {
+  if (!tagOptions) return null;
+  return (
+    <div className="tag-container">
+      <ul className="mt-4 flex max-w-full overflow-x-auto">
+        {tagOptions.map((tag) => {
+          return (
+            <li
+              key={tag.id}
+              className={`mr-3 whitespace-nowrap border font-medium dark:text-gray-300 ${
+                tag.name === currentTag
+                  ? 'border-black bg-black text-white dark:border-gray-600 dark:bg-gray-600'
+                  : 'border-gray-100 bg-gray-100 text-gray-400 dark:border-gray-800 dark:bg-night'
+              }`}
+            >
+              <Link
+                key={tag.id}
+                href={
+                  tag.name === currentTag
+                    ? '/search'
+                    : `/tag/${encodeURIComponent(tag.name)}`
+                }
+                className="block px-4 py-2"
+              >
+                {`${tag.name} (${tag.count})`}
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
+
+export default Tags;

package/themes/nobelium/components/Title.js

@@ -0,0 +1,19 @@
+import BLOG from '@/blog.config'
+
+/**
+ * 标题栏
+ * @param {*} props
+ * @returns
+ */
+export const Title = (props) => {
+  const { siteInfo, post } = props
+  const title = post?.title || siteInfo?.description
+  const description = post?.description || BLOG.AUTHOR
+
+  return <div className="text-center px-6 py-12 mb-6 bg-gray-100 dark:bg-hexo-black-gray dark:border-hexo-black-gray border-b">
+        <h1 className=" text-xl md:text-4xl pb-4">{title}</h1>
+        <p className="leading-loose text-gray-dark">
+            {description}
+        </p>
+    </div>
+}