nnbb 0.0.1

package/styles/nprogress.css

@@ -0,0 +1,84 @@
+/* Make clicks pass-through */
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: #29d;
+
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 2px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
+  opacity: 1;
+
+  -webkit-transform: rotate(3deg) translate(0px, -4px);
+  -ms-transform: rotate(3deg) translate(0px, -4px);
+  transform: rotate(3deg) translate(0px, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+  display: block;
+  position: fixed;
+  z-index: 1031;
+  top: 15px;
+  right: 15px;
+}
+
+#nprogress .spinner-icon {
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+
+  border: solid 2px transparent;
+  border-top-color: #29d;
+  border-left-color: #29d;
+  border-radius: 50%;
+
+  -webkit-animation: nprogress-spinner 400ms linear infinite;
+  animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+  overflow: hidden;
+  position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+
+@-webkit-keyframes nprogress-spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@keyframes nprogress-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/styles/prism-theme.css

@@ -0,0 +1,119 @@
+/* prism theme adjustments */
+
+.notion-code {
+  background-color: rgba(249, 250, 251, 1);
+  border: 1px solid rgba(229, 231, 235, 1);
+  border-radius: 0.375rem;
+  padding: 1.5em !important;
+}
+
+@media (min-width: 1300px) {
+  .notion-code {
+    max-width: var(--notion-max-width);
+  }
+}
+
+@media (max-width: 640px) {
+  .notion-code {
+    max-width: 100vw;
+  }
+}
+
+.dark-mode .notion-code {
+  background-color: rgba(17, 24, 39, 1);
+  border-color: rgba(55, 65, 81, 1);
+}
+.notion code {
+  color: rgba(31, 41, 55, 1);
+  border: 0 none !important;
+  box-shadow: none !important;
+  background: none !important;
+  padding: 0 !important;
+}
+.dark-mode .notion code {
+  color: rgba(229, 231, 235, 1);
+}
+.token.cdata,
+.token.doctype,
+.token.prolog {
+  color: rgba(55, 65, 81, 1);
+}
+.token.comment {
+  color: #5b9b4c;
+}
+.dark-mode .token.cdata,
+.dark-mode .token.doctype,
+.dark-mode .token.prolog {
+  color: rgba(209, 213, 219, 1);
+}
+.token.punctuation {
+  color: rgba(55, 65, 81, 1);
+}
+.dark-mode .token.punctuation {
+  color: rgba(209, 213, 219, 1);
+}
+.token.boolean,
+.token.constant,
+.token.deleted,
+.token.number,
+.token.property,
+.token.symbol,
+.token.tag {
+  color: rgba(16, 185, 129, 1);
+}
+.token.attr-name,
+.token.builtin,
+.token.char,
+.token.inserted,
+.token.selector,
+.token.string {
+  color: rgba(139, 92, 246, 1);
+}
+.language-css .token.string,
+.style .token.string,
+.token.entity,
+.token.operator,
+.token.url {
+  color: rgba(245, 158, 11, 1);
+}
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: rgba(59, 130, 246, 1);
+}
+.token.class-name,
+.token.function {
+  color: rgba(236, 72, 153, 1);
+}
+.token.important,
+.token.regex,
+.token.variable {
+  color: rgba(245, 158, 11, 1);
+}
+code[class*='language-'],
+pre[class*='language-'] {
+  color: rgba(31, 41, 55, 1);
+}
+.dark-mode code[class*='language-'],
+.dark-mode pre[class*='language-'] {
+  color: rgba(249, 250, 251, 1);
+}
+pre::-webkit-scrollbar {
+  display: none;
+}
+pre {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.token.operator,
+.token.entity,
+.token.url,
+.token.variable {
+  background: none;
+}
+
+pre[class*='language-'] > code {
+  border-left: 0 none !important;
+  box-shadow: none !important;
+  background: none !important;
+}

package/styles/utility-patterns.css

@@ -0,0 +1,79 @@
+/* Typography */
+.h1 {
+    @apply text-4xl font-extrabold leading-tight tracking-tighter;
+}
+
+.h2 {
+    @apply text-3xl font-extrabold leading-tight tracking-tighter;
+}
+
+.h3 {
+    @apply text-3xl font-bold leading-tight;
+}
+
+.h4 {
+    @apply text-2xl font-bold leading-snug tracking-tight;
+}
+
+@screen md {
+    .h1 {
+        @apply text-5xl;
+    }
+
+    .h2 {
+        @apply text-4xl;
+    }
+}
+
+/* Buttons */
+.btn,
+.btn-sm {
+    @apply font-medium inline-flex items-center justify-center border border-transparent rounded leading-snug transition duration-150 ease-in-out;
+}
+
+.btn {
+    @apply px-8 py-3 shadow-lg;
+}
+
+.btn-sm {
+    @apply px-4 py-2 shadow;
+}
+
+/* Forms */
+.form-input,
+.form-textarea,
+.form-multiselect,
+.form-select,
+.form-checkbox,
+.form-radio {
+    @apply bg-white border border-gray-300 focus:border-gray-500;
+}
+
+.form-input,
+.form-textarea,
+.form-multiselect,
+.form-select,
+.form-checkbox {
+    @apply rounded;
+}
+
+.form-input,
+.form-textarea,
+.form-multiselect,
+.form-select {
+    @apply py-3 px-4;
+}
+
+.form-input,
+.form-textarea {
+    @apply placeholder-gray-500;
+}
+
+.form-select {
+    @apply pr-10;
+}
+
+.form-checkbox,
+.form-radio {
+    @apply text-gray-800 rounded-sm;
+}

package/tailwind.config.js

@@ -0,0 +1,37 @@
+const BLOG = require('./blog.config');
+const { fontFamilies } = require('./lib/font');
+
+module.exports = {
+  content: [
+    './pages/**/*.{js,jsx,ts,tsx}',
+    './components/**/*.{js,jsx,ts,tsx}',
+    './layouts/**/*.{js,jsx,ts,tsx}',
+    './themes/**/*.{js,jsx,ts,tsx}',
+  ],
+  darkMode: BLOG.APPEARANCE === 'class' ? 'media' : 'class', // or 'media' or 'class'
+  theme: {
+    fontFamily: fontFamilies,
+    extend: {
+      colors: {
+        day: {
+          DEFAULT: BLOG.BACKGROUND_LIGHT || '#ffffff',
+        },
+        night: {
+          DEFAULT: BLOG.BACKGROUND_DARK || '#111827',
+        },
+        hexo: {
+          'background-gray': '#f5f5f5',
+          'black-gray': '#101414',
+          'light-gray': '#e5e5e5',
+        },
+      },
+      maxWidth: {
+        side: '14rem',
+      },
+    },
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+};

package/theme/index.ts

@@ -0,0 +1,6 @@
+export * from './useLayout';
+export * from './utils';
+import getConfig from 'next/config';
+
+// Scan all themes in next.config.js
+export const { THEMES = [] } = getConfig().publicRuntimeConfig;

package/theme/types/@theme-components.d.ts

@@ -0,0 +1,29 @@
+declare module '@theme-components' {
+  export const Home: React.FC<import('@/pages/types').ThemeHomeProps>;
+  export const Page: React.FC<import('@/pages/types').ThemePageProps>;
+  export const Archive: React.FC<import('@/pages/types').ThemeArchiveProps>;
+  export const Category: React.FC<import('@/pages/types').ThemeCategoryProps>;
+  export const CategoryDetail: React.FC<
+    import('@/pages/types').ThemeCategoryDetailProps
+  >;
+  export const CategoryPage: React.FC<
+    import('@/pages/types').ThemeCategoryPageCoProps
+  >;
+  export const Tag: React.FC<import('@/pages/types').ThemeTagProps>;
+  export const TagDetail: React.FC<import('@/pages/types').ThemeTagDetailProps>;
+  export const TagPage: React.FC<import('@/pages/types').ThemeTagPageProps>;
+  export const Search: React.FC<import('@/pages/types').ThemeSearchProps>;
+  export const SearchDetail: React.FC<
+    import('@/pages/types').ThemeSearchDetailProps
+  >;
+  export const SearchPage: React.FC<
+    import('@/pages/types').ThemeSearchPageProps
+  >;
+  export const Slug: React.FC<import('@/pages/types').ThemePrefixProps>;
+  export const PrefixSlug: React.FC<
+    import('@/pages/types').ThemePrefixSlugProps
+  >;
+  export const PageNotFound: React.FC<
+    import('@/pages/types').ThemePageNotFoundProps
+  >;
+}

package/theme/useLayout.ts

@@ -0,0 +1,41 @@
+import BLOG from '@/blog.config';
+import dynamic from 'next/dynamic';
+import { useSearchParams } from 'next/navigation';
+import * as ThemeComponents from '@theme-components';
+import { useRouter } from 'next/router';
+
+/**
+ * Route path-to-layout mapping
+ */
+const layoutNameMapping: Record<string, string> = {
+  '/': 'Home',
+  '/archive': 'Archive',
+  '/page/[page]': 'Page',
+  '/category': 'Category',
+  '/category/[category]': 'CategoryDetail',
+  '/category/[category]/page/[page]': 'CategoryPage',
+  '/tag': 'Tag',
+  '/tag/[tag]': 'TagDetail',
+  '/tag/[tag]/page/[page]': 'TagPage',
+  '/search': 'Search',
+  '/search/[keyword]': 'SearchDetail',
+  '/search/[keyword]/page/[page]': 'SearchPage',
+  '/[prefix]': 'Prefix',
+  '/[prefix]/[slug]': 'PrefixSlug',
+  '/404': 'PageNotFound',
+};
+
+export const useLayout = (): React.ComponentType<any> => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const theme = searchParams.get('theme') || BLOG.THEME;
+  const layoutName = (layoutNameMapping[router.pathname] ||
+    'PageNotFound') as keyof typeof ThemeComponents;
+
+  return theme !== BLOG.THEME
+    ? dynamic(() => import(`@/themes/${theme}`).then((m) => m[layoutName]), {
+        ssr: true,
+      })
+    : ThemeComponents[layoutName];
+};

package/theme/utils.ts

@@ -0,0 +1,108 @@
+import store from 'store';
+import { getQueryVariable, isBrowser } from '../lib/utils';
+import BLOG from '@/blog.config';
+
+/**
+ * 初始化主题 , 优先级 query > cookies > systemPrefer
+ * @param isDarkMode
+ * @description 读取cookie中存的用户主题
+ */
+export const initDarkMode = () => {
+  // 查看用户设备浏览器是否深色模型
+  let isDarkMode = isPreferDark();
+
+  // 查看cookie中是否用户强制设置深色模式
+  const storageDarkMode = loadDarkModeFromLocalStorage();
+  if (storageDarkMode) {
+    isDarkMode = JSON.parse(storageDarkMode);
+  }
+
+  // url查询条件中是否深色模式
+  const queryMode = getQueryVariable('mode');
+  if (queryMode) {
+    isDarkMode = queryMode === 'dark';
+  }
+
+  return isDarkMode;
+};
+
+export const operateDarkMode = (isDarkMode: boolean) => {
+  const htmlElement = document.getElementsByTagName('html')[0];
+  htmlElement.classList.toggle('light', !isDarkMode);
+  htmlElement.classList.toggle('dark', isDarkMode);
+};
+
+/**
+ * 是否优先深色模式， 根据系统深色模式以及当前时间判断
+ * @returns {*}
+ */
+export function isPreferDark() {
+  if (BLOG.APPEARANCE === 'dark') {
+    return true;
+  }
+  if (BLOG.APPEARANCE === 'auto') {
+    // 系统深色模式或时间是夜间时，强行置为夜间模式
+    const date = new Date();
+    const prefersDarkMode = window.matchMedia(
+      '(prefers-color-scheme: dark)',
+    ).matches;
+    return (
+      prefersDarkMode ||
+      (BLOG.APPEARANCE_DARK_TIME &&
+        (date.getHours() >= BLOG.APPEARANCE_DARK_TIME[0] ||
+          date.getHours() < BLOG.APPEARANCE_DARK_TIME[1]))
+    );
+  }
+  return false;
+}
+
+/**
+ * 读取深色模式
+ * @returns {*}
+ */
+export const loadDarkModeFromLocalStorage = () => {
+  return store.get('isDarkMode');
+};
+
+/**
+ * 保存深色模式
+ * @param isDarkMode
+ */
+export const saveDarkModeToLocalStorage = (isDarkMode: boolean) => {
+  store.set('isDarkMode', isDarkMode);
+};
+
+/**
+ * 读取默认主题
+ * @returns {*}
+ */
+export const loadThemeFromLocalStorage = () => {
+  return store.get('theme');
+};
+
+/**
+ * 保存默认主题
+ * @param newTheme
+ */
+export const saveThemeToLocalStorage = (newTheme: string) => {
+  store.set('theme', newTheme);
+};
+
+/**
+ * 切换主题时的特殊处理
+ * @param {*} setTheme
+ */
+export const initTheme = () => {
+  if (isBrowser) {
+    setTimeout(() => {
+      const elements = document.querySelectorAll('[id^="theme-"]');
+      if (elements?.length > 1) {
+        elements[elements.length - 1].scrollIntoView();
+        // 删除前面的元素，只保留最后一个元素
+        for (let i = 0; i < elements.length - 1; i++) {
+          elements[i]?.parentNode?.removeChild(elements[i]);
+        }
+      }
+    }, 500);
+  }
+};

package/themes/innocent/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "innocent",
+  "version": "0.0.1",
+  "description": "Innocent theme for NotionNextBlogBase",
+  "main": "index.js",
+  "license": "MIT"
+}

package/themes/innocent/theme.config.js

@@ -0,0 +1 @@
+export default {};

package/themes/nobelium/components/Announcement.tsx

@@ -0,0 +1,27 @@
+import { PageInfo } from '@/lib/notion/types';
+import dynamic from 'next/dynamic';
+import type { FC } from 'react';
+
+const NotionPage = dynamic(() => import('@/components/NotionPage'));
+
+export interface AnnouncementProps {
+  notice: PageInfo | null;
+}
+
+const Announcement: FC<AnnouncementProps> = ({ notice }) => {
+  if (notice && notice?.blockMap) {
+    return (
+      <div>
+        <section id="announcement-wrapper" className="mb-10">
+          <div id="announcement-content">
+            <NotionPage post={notice} className="text-center " />
+          </div>
+        </section>
+      </div>
+    );
+  } else {
+    return null;
+  }
+};
+
+export default Announcement;

package/themes/nobelium/components/ArticleFooter.tsx

@@ -0,0 +1,39 @@
+import { useRouter } from 'next/router';
+import { useTranslation } from 'next-i18next';
+
+/**
+ * 加密文章校验组件
+ * @param {password, validPassword} props
+ * @param password 正确的密码
+ * @param validPassword(bool) 回调函数，校验正确回调入参为true
+ * @returns
+ */
+export const ArticleFooter = () => {
+  const router = useRouter();
+  const { t } = useTranslation('common');
+
+  return (
+    <div className="flex justify-between font-medium text-gray-500 dark:text-gray-400">
+      <a>
+        <button
+          onClick={() => router.back()}
+          className="mt-2 cursor-pointer hover:text-black dark:hover:text-gray-100"
+        >
+          <i className="fas fa-angle-left mr-1" />
+          {t('back')}
+        </button>
+      </a>
+      <a>
+        <button
+          onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+          className="mt-2 cursor-pointer hover:text-black dark:hover:text-gray-100"
+        >
+          <i className="fas fa-angle-up mr-1" />
+          {t('top')}
+        </button>
+      </a>
+    </div>
+  );
+};
+
+export default ArticleFooter;

package/themes/nobelium/components/ArticleInfo.tsx

@@ -0,0 +1,58 @@
+import Image from 'next/image';
+import BLOG from '@/blog.config';
+import TagItem from './TagItem';
+import md5 from 'js-md5';
+import dayjs from 'dayjs';
+
+import type { FC } from 'react';
+import type { PageInfo } from '@/lib/notion/types';
+
+export interface ArticleInfoProps {
+  post: PageInfo;
+}
+
+export const ArticleInfo: FC<ArticleInfoProps> = ({ post }) => {
+  const emailHash = md5(BLOG.CONTACT_EMAIL);
+
+  return (
+    <section className="text-gray--600 mt-2 flex flex-wrap font-light leading-8 dark:text-gray-400">
+      <div>
+        <div className="text-3xl font-bold text-black dark:text-white">
+          {post?.title}
+        </div>
+
+        {post?.type !== 'Page' && (
+          <nav className="mt-7 flex items-start text-gray-500 dark:text-gray-400">
+            <div className="mb-4 flex">
+              <a href={BLOG.CONTACT_GITHUB || '#'} className="flex">
+                <Image
+                  alt={BLOG.AUTHOR}
+                  width={24}
+                  height={24}
+                  src={`https://gravatar.com/avatar/${emailHash}`}
+                  className="rounded-full"
+                />
+                <p className="ml-2 md:block">{BLOG.AUTHOR}</p>
+              </a>
+              <span className="mx-1 block">/</span>
+            </div>
+            <div className="mb-4 mr-2 md:ml-0">
+              {dayjs(post?.publishDate).format('YYYY-MM-DD')}
+            </div>
+            {post?.tags && (
+              <div className="article-tags mr-2 flex max-w-full flex-nowrap overflow-x-auto">
+                {post?.tags.map((tag) => <TagItem key={tag} tag={tag} />)}
+              </div>
+            )}
+            <span className="busuanzi_container_page_pv mr-2 hidden">
+              <i className="fas fa-eye mr-1" />
+              <span className="busuanzi_value_page_pv mr-2" />
+            </span>
+          </nav>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default ArticleInfo;