Release: Notionic 1.0

1. Change the components layout and animation 2. Rename the project 3. New Open Graph and SEO optimization 4. New cover
izuolan · Oct 21, 2022 · 416a29d · 416a29d
1 parent 66ce71a
commit 416a29d
Show file tree

Hide file tree

Showing 49 changed files with 369 additions and 361 deletions.
diff --git a/README.md b/README.md
@@ -1,22 +1,49 @@
-Forked from [Nobelium](https://github.com/craigary/nobelium)
+# Notionic
 
-# Nobelium Plus
+Notionic is a static blog that updates in real time, synchronizing changes to Notion pages without rebuilding the deployment.
 
-![Screenshot](https://repository-images.githubusercontent.com/485388882/c88f927b-0f1c-47da-88af-14f12e63bfcd)
+![Notionic](./banner.png)
 
-Demo: [https://zuolan.me](https://zuolan.me)
+## Demo
+
+- Notionic: [https://notionic.vercel.app](https://notionic.vercel.app)
+- My Blog: [https://zuolan.me](https://zuolan.me)
+
+## Features
+
+- Incremental static regeneration
+- Outline
+- Theme switch
+- Multi-language
+- Native style comments
+- Loading and transition animation
+- Block page support
+- SEO and Open Graph optimization
+- Newsletter support
+- Contact Form
+- Telegram bot integration
 
 ## Quick Start
 
-- Duplicate [Craigary's Notion template](https://craigary.notion.site/adc3552cfc73442ab5048d4b1eb0079a), and share it to the public
-- [Fork](https://github.com/izuolan/nobelium-plus/fork) this project
-- **Customize `blog.config.js`**
-- _(Optional)_ Replace `favicon.svg`, and `favicon.ico` in `/public` folder with your own
+- Duplicate [Notionic template](https://izuolan.notion.site/87d5fa7c98e04cb79ef55f60989dc765), and share it to the public
+- [Fork](https://github.com/izuolan/notionic/fork) this project
+- **Customize `blog.config.js` file**
+- _(Optional)_ Replace `favicon.svg/png/ico` in `public` folder with your own
 - Modify `lib/lang.js` with your self introduction
 - Deploy on [Vercel](https://vercel.com), set following environment variables：
   - `NOTION_PAGE_ID` (Required): The ID of the Notion page you previously shared to the web, usually has 32 digits after your workspace address
-- More about Nobelium Plus: [My Blog Post](https://zuolan.me/nobelium_plus)
+  - eg: `https://your-username.notion.site/<NOTION_PAGE_ID>?v=<view_id>`
+
+More details about Notionic deployment:
+
+- [English](https://zuolan.me/en/notionic_en)
+- [中文](https://zuolan.me/notionic)
+
+
+## Reference & License
 
-## License
+- [Notion-X](https://github.com/NotionX/react-notion-x)
+- [Nobelium](https://github.com/craigary/nobelium)
+- [NotionNext](https://github.com/tangly1024/NotionNext)
 
 The MIT License.
diff --git a/banner.png b/banner.png
diff --git a/blog.config.js b/blog.config.js
@@ -10,23 +10,23 @@ const BLOG = {
   font: 'sans-serif', // ['sans-serif', 'serif']
   lightBackground: '#F6F8FA', // use hex value, don't forget '#' e.g #fffefc
   darkBackground: '#212936', // use hex value, don't forget '#'
-  path: '', // leave this empty unless you want to deploy Nobelium in a folder
+  path: '', // leave this empty unless you want to deploy Notionic in a folder
   since: 2015, // If leave this empty, current year will be used.
   postsPerPage: 10,
   sortByDate: true,
   showNewsletter: true,
   previewImagesEnabled: true,
   showTitlebarText: false, // Craft Docs page show title bar text on desktop
   autoCollapsedNavBar: false, // The automatically collapsed navigation bar
-  ogImageGenerateURL: 'https://og-zl.vercel.app', // The link to generate OG image, don't end with a slash
-  defaultCover: '/secret_preview.png',
+  ogImageGenerateHost: 'og-zl.vercel.app', // The link to generate OG image, don't end with a slash
+  defaultCover: '/cover.jpg',
   socialLink: {
     twitter: 'https://twitter.com/izuolan',
     github: 'https://github.com/izuolan',
     telegram: 'https://t.me/zuolan'
   },
   seo: {
-    keywords: ['左蓝', 'Zuolan', 'Blog'],
+    keywords: ['Notionic', 'Zuolan', 'Blog'],
     googleSiteVerification: '' // Remove the value or replace it with your own google site verification code
   },
   notionPageId: process.env.NOTION_PAGE_ID, // DO NOT CHANGE THIS! Edit .env file!
@@ -45,28 +45,23 @@ const BLOG = {
       websiteId: '' // The website id of your Umami instance
     },
     ackeeConfig: {
-      tracker: '', // e.g 'https://ackee.craigary.net/tracker.js'
-      dataAckeeServer: '', // e.g https://ackee.craigary.net , don't end with a slash
+      tracker: '', // e.g 'https://ackee.example.com/tracker.js'
+      dataAckeeServer: '', // e.g https://ackee.example.com , don't end with a slash
       domainId: '' // e.g '0e2257a8-54d4-4847-91a1-0311ea48cc7b'
     },
     gaConfig: {
       measurementId: '' // e.g: G-XXXXXXXXXX
     }
   },
   comment: {
-    // support provider: utterances, cusdis, supacomments
+    // support provider: utterances, supacomments
     provider: '', // leave it empty if you don't need any comment plugin
     supaCommentsConfig: {
       supabaseUrl: '', // The url of your Supabase instance
-      supabaseAnonKey: '', // The anonymous key of your Supabase instance
+      supabaseAnonKey: '' // The anonymous key of your Supabase instance
     },
     utterancesConfig: {
       repo: ''
-    },
-    cusdisConfig: {
-      appId: '', // data-app-id
-      host: '', // data-host, change this if you're using self-hosted version
-      scriptSrc: '' // change this if you're using self-hosted version
     }
   },
   isProd: process.env.VERCEL_ENV === 'production' // distinguish between development and production environment (ref: https://vercel.com/docs/environment-variables#system-environment-variables)

diff --git a/components/Avatar.js b/components/Avatar.js
diff --git a/components/Comments.js b/components/Comments.js
diff --git a/components/Ackee.js → components/Common/Ackee.js b/components/Ackee.js → components/Common/Ackee.js
diff --git a/components/Gtag.js → components/Common/Gtag.js b/components/Gtag.js → components/Common/Gtag.js
diff --git a/components/ImageFallback.js → components/Common/ImageFallback.js b/components/ImageFallback.js → components/Common/ImageFallback.js
diff --git a/components/Common/SEO.js b/components/Common/SEO.js
@@ -0,0 +1,68 @@
+import BLOG from '@/blog.config'
+import Head from 'next/head'
+import { useRouter } from 'next/router'
+
+const SEO = ({ meta }) => {
+  const ogImage = `https://${BLOG.ogImageGenerateHost}/api/default?logo=${
+    BLOG.link
+  }/favicon.png&siteName=${encodeURIComponent(
+    BLOG.title?.trim()
+  )}&description=${encodeURIComponent(
+    BLOG.description?.trim()
+  )}&title=${encodeURIComponent(
+    meta.title?.trim()
+  )}&summary=${encodeURIComponent(
+    meta.description?.trim()
+  )}&theme=light&border=solid`
+
+  const router = useRouter()
+  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}${router.asPath}`}
+      />
+      <meta
+        property='og:image'
+        content={ogImage || BLOG.defaultCover}
+      />
+      <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
+        name='twitter:image'
+        content={ogImage || BLOG.defaultCover}
+      />
+      {meta.type === 'article' && (
+        <>
+          <meta
+            property='article:published_time'
+            content={meta.date || meta.createdTime}
+          />
+          <meta property='article:author' content={BLOG.author} />
+        </>
+      )}
+    </Head>
+  )
+}
+
+export default SEO
diff --git a/components/Scripts.js → components/Common/Scripts.js b/components/Scripts.js → components/Common/Scripts.js
diff --git a/components/Social.js → components/Common/Social.js b/components/Social.js → components/Common/Social.js
diff --git a/components/TagItem.js → components/Common/TagItem.js b/components/TagItem.js → components/Common/TagItem.js
diff --git a/components/Tags.js → components/Common/Tags.js b/components/Tags.js → components/Common/Tags.js
@@ -16,9 +16,7 @@ const Tags = ({ tags, currentTag }) => {
                   : 'text-gray-400 bg-gray-100 dark:bg-night'
               }`}
             >
-              <Link
-                key={key}
-                scroll={false}
+              <Link key={key} scroll={false}
                 href={selected ? '/search' : `/tag/${encodeURIComponent(key)}`}
               >
                 <a className='px-4 py-2 block'>{`${key} (${tags[key]})`}</a>

diff --git a/components/TransitionEffect.js → components/Common/TransitionEffect.js b/components/TransitionEffect.js → components/Common/TransitionEffect.js
diff --git a/components/Container.js b/components/Container.js
@@ -1,98 +1,24 @@
-import Header from '@/components/Header'
-import Footer from '@/components/Footer'
+import SEO from '@/components/Common/SEO'
 import BLOG from '@/blog.config'
-import Head from 'next/head'
 import PropTypes from 'prop-types'
-// import BlogPost from './BlogPost'
 
-const Container = ({ children, layout, fullWidth, ...customMeta }) => {
-  const url = BLOG.path.length ? `${BLOG.link}/${BLOG.path}` : BLOG.link
+const Container = ({ children, fullWidth, ...customMeta }) => {
   const meta = {
     title: BLOG.title,
     type: 'website',
     ...customMeta
   }
   return (
-    <div>
-      <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:image'
-          content={`${BLOG.ogImageGenerateURL}/${encodeURIComponent(
-            meta.title
-          )}.png?theme=light&md=1&siteName=${encodeURIComponent(
-            BLOG.title
-          )}%20|%20${encodeURIComponent(
-            BLOG.description
-          )}&signature=${encodeURIComponent(
-            BLOG.link
-          )}`}
-        />
-        <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
-          name='twitter:image'
-          content={`${BLOG.ogImageGenerateURL}/${encodeURIComponent(
-            meta.title
-          )}.png?theme=light&md=1&siteName=${encodeURIComponent(
-            BLOG.title
-          )}%20|%20${encodeURIComponent(
-            BLOG.description
-          )}&signature=${encodeURIComponent(
-            BLOG.link
-          )}`}
-        />
-        {meta.type === 'article' && (
-          <>
-            <meta
-              property='article:published_time'
-              content={meta.date || meta.createdTime}
-            />
-            <meta property='article:author' content={BLOG.author} />
-          </>
-        )}
-      </Head>
-      <div
-        className={`wrapper ${
-          BLOG.font === 'serif' ? 'font-serif' : 'font-sans'
+    <>
+      <SEO meta={meta} />
+      <main
+        className={`m-auto flex-grow w-full transition-all ${
+          !fullWidth ? 'max-w-2xl px-4' : 'px-4 md:px-24'
         }`}
       >
-        <Header
-          navBarTitle={layout === 'blog' ? meta.title : null}
-          fullWidth={fullWidth}
-        />
-        <main
-          className={`m-auto flex-grow w-full transition-all ${
-            !fullWidth ? 'max-w-2xl px-4' : 'px-4 md:px-24'
-          }`}
-        >
-          {children}
-        </main>
-        <Footer fullWidth={fullWidth} />
-      </div>
-    </div>
+        {children}
+      </main>
+    </>
   )
 }