Code🤣

Author: tangly1024

.eslintrc.js

@@ -0,0 +1,31 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    node: true
+  },
+  extends: [
+    'plugin:react/recommended',
+    'plugin:@next/next/recommended',
+    'standard'
+  ],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true
+    },
+    ecmaVersion: 12,
+    sourceType: 'module'
+  },
+  plugins: ['react'],
+  settings: {
+    react: {
+      version: 'detect'
+    }
+  },
+  rules: {
+    'react/prop-types': 'off'
+  },
+  globals: {
+    React: true
+  }
+}

.gitignore

@@ -0,0 +1,42 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# sitemap
+/public/robots.txt
+/public/sitemap.xml
+/data.json
+/yarn.lock
+.idea
+.vscode

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "semi": false,
+  "trailingComma": "none",
+  "arrowParens": "avoid"
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present, tangly1024
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

Nobelium-Logo.svg

@@ -14,8 +14,6 @@
   </a>
 </p>
 
-[中文说明 / [English](README.md)]
-
 演示地址：[https://www.tangly1024.com/](https://www.tangly1024.com/)
 
 <details><summary>截图</summary>

README.md

@@ -0,0 +1,60 @@
+const BLOG = {
+  title: '塘里博客',
+  author: 'tangly',
+  email: '[email protected]',
+  link: 'https://tangly1024.com',
+  description: '唐风集里，收卷波澜',
+  lang: 'zh-CN', // ['zh-CN','en-US']
+  appearance: 'auto', // ['light', 'dark', 'auto'],
+  font: 'font-sans', // ['font-sans', 'font-serif', 'font-mono']
+  lightBackground: '#ffffff', // use hex value, don't forget '#' e.g #fffefc
+  darkBackground: '#111827', // use hex value, don't forget '#'
+  path: '', // leave this empty unless you want to deploy in a folder
+  since: 2020, // if leave this empty, current year will be used.
+  postsPerPage: 6,
+  sortByDate: false,
+  showAbout: true, // WIP
+  showArchive: true, // WIP
+  autoCollapsedNavBar: false, // the automatically collapsed navigation bar
+  socialLink: 'https://weibo.com/u/2245301913',
+  seo: {
+    keywords: ['Blog', 'Website', 'Notion'],
+    googleSiteVerification: '' // Remove the value or replace it with your own google site verification code
+  },
+  notionPageId: process.env.NOTION_PAGE_ID || 'bee1fccfa3bd47a1a7be83cc71372d83', // DO NOT CHANGE THIS！！！
+  notionAccessToken: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public
+  analytics: {
+    provider: 'ga', // Currently we support Google Analytics and Ackee, please fill with 'ga' or 'ackee', leave it empty to disable it.
+    ackeeConfig: {
+      tracker: '', // e.g 'https://ackee.tangly1024.net/tracker.js'
+      dataAckeeServer: '', // e.g https://ackee.tangly1024.net , don't end with a slash
+      domainId: '' // e.g '0e2257a8-54d4-4847-91a1-0311ea48cc7b'
+    },
+    gaConfig: {
+      measurementId: 'G-5EV4HZD0XX' // e.g: G-XXXXXXXXXX
+    }
+  },
+  comment: {
+    // support provider: gitalk, utterances, cusdis
+    provider: 'cusdis', // leave it empty if you don't need any comment plugin
+    gitalkConfig: {
+      repo: 'NotionNext', // The repository of store comments
+      owner: 'tangly1024',
+      admin: ['tangly1024'],
+      clientID: 'be7864a16b693e256f8f',
+      clientSecret: 'dbd0f6d9ceea8940f6ed20936b415274b8fe66a2',
+      distractionFreeMode: false
+    },
+    cusdisConfig: {
+      appId: '445ba48e-f751-487f-b22f-cdbe3310d28f', // data-app-id
+      host: 'https://cusdis.com', // data-host, change this if you're using self-hosted version
+      scriptSrc: 'https://cusdis.com/js/cusdis.es.js' // change this if you're using self-hosted version
+    },
+    utterancesConfig: {
+      repo: 'tangly1024/NotionNext'
+    }
+  },
+  isProd: process.env.VERCEL_ENV === 'production' // distinguish between development and production environment (ref: https://vercel.com/docs/environment-variables#system-environment-variables)
+}
+// export default BLOG
+module.exports = BLOG

blog.config.js

@@ -0,0 +1,14 @@
+import { useRouter } from 'next/router'
+import useAckee from 'use-ackee'
+
+const Ackee = ({ ackeeServerUrl, ackeeDomainId }) => {
+  const router = useRouter()
+  useAckee(
+    router.asPath,
+    { server: ackeeServerUrl, domainId: ackeeDomainId },
+    { detailed: false, ignoreLocalhost: true }
+  )
+  return null
+}
+
+export default Ackee

components/Ackee.js

@@ -0,0 +1,25 @@
+import BLOG from '@/blog.config'
+
+const BlogPost = ({ post }) => {
+  return (
+    <article key={post.id}
+             className='md:mx-2 w-full md:max-w-md duration-200 transform hover:scale-105 hover:shadow-2xl bg-white dark:bg-gray-800 dark:hover:bg-gray-600 overflow-hidden'>
+        {/*  封面图 */}
+        {post.page_cover && post.page_cover.length > 1 && (
+          <a href={`${BLOG.path}/article/${post.slug}`} className='md:flex-shrink-0 md:w-52 md:h-52 rounded-lg'>
+            <img className='w-full max-h-60 object-cover p-3 cursor-pointer' src={post.page_cover} alt={post.title} />
+          </a>
+        )}
+
+        <main className='px-8 py-2'>
+          <a href={`${BLOG.path}/article/${post.slug}`}
+             className='block my-3 text-2xl leading-tight font-semibold text-black dark:text-gray-200 hover:underline'>
+            {post.title}
+          </a>
+          <p className='mt-2 text-gray-500 dark:text-gray-400 text-sm'>{post.summary}</p>
+        </main>
+    </article>
+  )
+}
+
+export default BlogPost

components/BlogPost.js

@@ -0,0 +1,24 @@
+import BLOG from '@/blog.config'
+
+const BlogPostMini = ({ post }) => {
+  return (
+    <a key={post.id} href={`${BLOG.path}/article/${post.slug}`}
+             className='md:flex w-full border my-2 duration-200 transform hover:scale-105 hover:shadow-2xl bg-white dark:bg-gray-800 dark:hover:bg-gray-600'>
+        {/*  封面图 */}
+        {post.page_cover && post.page_cover.length > 1 && (
+            <img className='md:w-40 w-full max-h-32 object-cover cursor-pointer' src={post.page_cover} alt={post.title} />
+        )}
+
+        <main className='px-2 py-1'>
+          <a href={`${BLOG.path}/article/${post.slug}`}
+             className='block my-3 leading-tight font-semibold text-black dark:text-gray-200 hover:underline'>
+            {post.title}
+          </a>
+          <p className='mt-2 text-gray-500 dark:text-gray-400 text-xs overflow-x-hidden'>{post.summary}</p>
+          <p className='mt-2 text-gray-500 dark:text-gray-400 text-xs overflow-x-hidden'>{BLOG.link}/article/{post.slug}</p>
+        </main>
+    </a>
+  )
+}
+
+export default BlogPostMini

components/BlogPostMini.js

@@ -0,0 +1,67 @@
+import BLOG from '@/blog.config'
+import dynamic from 'next/dynamic'
+import { useRouter } from 'next/router'
+
+const GitalkComponent = dynamic(
+  () => {
+    return import('gitalk/dist/gitalk-component')
+  },
+  { ssr: false }
+)
+const UtterancesComponent = dynamic(
+  () => {
+    return import('@/components/Utterances')
+  },
+  { ssr: false }
+)
+const CusdisComponent = dynamic(
+  () => {
+    return import('react-cusdis').then(m => m.ReactCusdis)
+  },
+  { ssr: false }
+)
+
+const Comment = ({ frontMatter }) => {
+  const router = useRouter()
+
+  return <div className='comment'>
+    <div className='font-bold text-gray-800 pt-2 pb-4 dark:text-gray-300'>留下评论</div>
+
+    {/* 评论插件 */}
+    {BLOG.comment.provider === 'gitalk' && (
+      <GitalkComponent
+        options={{
+          id: frontMatter.id,
+          title: frontMatter.title,
+          clientID: BLOG.comment.gitalkConfig.clientID,
+          clientSecret: BLOG.comment.gitalkConfig.clientSecret,
+          repo: BLOG.comment.gitalkConfig.repo,
+          owner: BLOG.comment.gitalkConfig.owner,
+          admin: BLOG.comment.gitalkConfig.admin,
+          distractionFreeMode: BLOG.comment.gitalkConfig.distractionFreeMode
+        }}
+      />
+    )}
+    {BLOG.comment.provider === 'utterances' && (
+      <UtterancesComponent issueTerm={frontMatter.id} className='px-2' />
+    )}
+    {BLOG.comment.provider === 'cusdis' && (
+      <>
+        <script defer src='https://cusdis.com/js/widget/lang/zh-cn.js' />
+        <CusdisComponent
+          attrs={{
+            host: BLOG.comment.cusdisConfig.host,
+            appId: BLOG.comment.cusdisConfig.appId,
+            pageId: frontMatter.id,
+            pageTitle: frontMatter.title,
+            pageUrl: BLOG.link + router.asPath,
+            theme: BLOG.appearance
+          }}
+          lang={BLOG.lang.toLowerCase()}
+        />
+      </>
+
+    )}</div>
+}
+
+export default Comment

components/Comment.js

@@ -0,0 +1,45 @@
+import BLOG from '@/blog.config'
+import Head from 'next/head'
+
+const CommonHead = ({ meta }) => {
+  const url = BLOG.path.length ? `${BLOG.link}/${BLOG.path}` : BLOG.link
+
+  return <Head>
+    <title>{meta.title}</title>
+    <meta content={BLOG.darkBackground} name='theme-color' />
+    <meta name='robots' content='follow, index' />
+    <meta charSet='UTF-8' />
+    {BLOG.seo.googleSiteVerification && (
+      <meta
+        name='google-site-verification'
+        content={BLOG.seo.googleSiteVerification}
+      />
+    )}
+    {BLOG.seo.keywords && (
+      <meta name='keywords' content={BLOG.seo.keywords.join(', ')} />
+    )}
+    <meta name='description' content={meta.description} />
+    <meta property='og:locale' content={BLOG.lang} />
+    <meta property='og:title' content={meta.title} />
+    <meta property='og:description' content={meta.description} />
+    <meta
+      property='og:url'
+      content={meta.slug ? `${url}/${meta.slug}` : url}
+    />
+    <meta property='og:type' content={meta.type} />
+    <meta name='twitter:card' content='summary_large_image' />
+    <meta name='twitter:description' content={meta.description} />
+    <meta name='twitter:title' content={meta.title} />
+    {meta.type === 'article' && (
+      <>
+        <meta
+          property='article:published_time'
+          content={meta.date || meta.createdTime}
+        />
+        <meta property='article:author' content={BLOG.author} />
+      </>
+    )}
+  </Head>
+}
+
+export default CommonHead

components/CommonHead.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import Link from 'next/link'
+
+/**
+ * 悬浮在屏幕右下角,联系我的按钮
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const ContactButton = () => {
+  return (
+    <Link href='/article/about'>
+      <a className={'fixed right-10 bottom-40 animate__fadeInRight animate__animated animate__faster'}>
+      <span
+        className='dark:bg-black bg-white px-5 py-3 cursor-pointer shadow-card text-xl hover:bg-blue-500 transform duration-200 hover:text-white hover:shadow'>
+        <span className='dark:text-gray-200 fa fa-info' title='about' />
+      </span>
+      </a>
+    </Link>
+  )
+}
+
+export default ContactButton