craigary/nobelium

A static blog build on top of Notion and NextJS, deployed on Vercel.

Nobelium

A static blog build on top of Notion and Nextjs, deployed on Vercel.

Demo: https://nobelium.vercel.app/

Screenshot

Highlights ✨

🚀  Fast and responsive

• Fast page render and responsive design
• Fast static generation with efficient compiler

🤖  Deploy instantly

• Deploy on Vercel in minutes
• Incremental regeneration and no need to redeploy after update the content in notion

🚙  Fully functional

• Comments, full width page, quick search and tag filter
• RSS, analytics, web vital... and much more

🎨  Easy for customization

• Rich config options, support English & Chinese interface
• Built with Tailwind CSS, easy for customization

🕸  Pretty URLs and SEO friendly

Quick Start

• Star this repo 😉
• Duplicate this Notion template, and share it to the public
• Fork this project
• Customize blog.config.js
• (Optional) Replace favicon.svg, and favicon.ico in /public folder with your own
• Deploy on Vercel, 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
  • NOTION_ACCESS_TOKEN (Optional, not recommended): If you decide not to share your database, you can use token to let Nobelium grab data from Notion database. You can find it in your browser cookies called token_v2
    • Keep in mind Notion token is only valid for 180 days, make sure to update manually in vercel dashboard, we probably switch to Official API to resolve this issue in the future. Also, images in Notion database will not properly rendered
• That's it! Easy-peasy?

Wait for a sec, what is Page ID？

Play With Docker

Unofficial, thanks to @Vaayne's work!

Build Docker image yourself

# set env
export NOTION_PAGE_ID=xxx # your NOTION_PAGE_ID
export IMAGE=nobelium:latest

# build with docker
docker build -t ${IMAGE} --build-arg NOTION_PAGE_ID .

# run with docker
docker run -d --name nobelium -p 3000:3000 -e NOTION_PAGE_ID=${NOTION_PAGE_ID} nobelium:latest

Use default docker image

# pull image
docker pull ghcr.io/craigary/nobelium:main

# run with docker
docker run -d --name nobelium -p 3000:3000 -e NOTION_PAGE_ID=${NOTION_PAGE_ID} ghcr.io/craigary/nobelium:main

Roadmap

Check out our roadmap here

• Better SEO
• Dark mode
• Open Graph support
• Switch to react-notion-x
• Sitemap
• ...

Technical details

• Generation: Next.js and Incremental Static Regeneration
• Page render: react-notion-x
• Style: Tailwind CSS and @tailwindcss/jit compiler
• Comments: Gitalk, Cusdis and more

FAQ

How can I change my avatar?

Nobelium fetches avatars from Gravatar. You need to set your avatar there with the same email address that you defined in blog.config.js.

My posts disappear after I set up grouping in Notion database!

Nobelium currently doesn’t support Notion database grouping. If you really want to manage your posts by groups, you can create views with filters instead.

Special Thanks

Notion CN Community

SilentDepth

Lee Robinson

Spencer Woo

Contributors

Craig Hart 🎫 🔧 🎨 🐛

yokinist 🔧 🐛

Reynard 🎨 🐛

Niin 🔧 🐛

Ruter 🔧 🐛

License

The MIT License.

nobelium's Issues

Error: Command "next build" exited with 1

Vercel Deployment error: Error: Command "next build" exited with 1

The function sortByDate seems doesn't work

Describe the bug
I set the sortByDate to true in blog.config.js and find my blog posts don't sort by date.

To Reproduce
My blog link:
https://invisprints.vercel.app

GitHub repo:
https://github.com/invisprints/nobelium

Notion Page:
https://www.notion.so/c23506baa9334516ad2fb7f684cc37d1?v=60fbc9083a6d42328f314aa4ad120982

The nobelium version I use is [4bcc8b9]

Screenshots

Platform:

• OS: [macOS]
• Browser [safari]
• Version [4bcc8b9]

Add support for giscus as comments provider

Is your feature request related to a problem? Please describe.
Gitalk and utterances are great, but they (ab)use GitHub Issues. Given enough time, they would flood the repository's issues.

Describe the solution you'd like
Add support for giscus, a comments widget powered by GitHub Discussions.

Describe alternatives you've considered
None.

Additional context
None.

Thanks!

关于评论插件的ID保护

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
现在的评论插件的ID是明文存放在仓库中，有泄漏风险

Describe the solution you'd like
A clear and concise description of what you want to happen.
可以将评论插件的ID做成secret，以免被他人滥用

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Audio's caption is not shown

Describe the bug
Notion support adding caption for audio embedded but nobelium can't show it in article. The image caption in contrast doesn't have this problem.

`yarn build` yield `Cannot read property '0' of undefined` error with some pages

Describe the bug

yarn build will yield TypeError: Cannot read property '0' of undefined for some pages/blocks.

To Reproduce

Take this page for example, above error will occur.

One special thing about this page is that it was imported from a markdown file using md2notion, and the rendering error came out from react-notion-x at Block level(see screenshot bellow), so it might be an issue from upstream? Can you guide me about how to fix it or looking for futher help? Thanks in advance.

Expected behavior
No such errors.

Screenshots

Platform:

• OS: macOS/Ubuntu/Vercel
• Browser N/A
• Version N/A

Additional context
Add any other context about the problem here.

Embedded item in Toggle not 100% width

Describe the bug
The embedded item (iframe) inside unable 100% width

To Reproduce
Steps to reproduce the behavior:
Example of Spotify Web Player

1. Copy Spotify Code
2. Copy URL
3. Pasted in toggle

Expected behavior
Show in 100% width.

Screenshots

Platform:

• OS: macOS Big Sur
• Browser: Chrome, Brave, Safari
• Version [e.g. 22]

Error while deploying with docker

Platform:

• OS: alpine3.12（使用 Dockerfile 构建）

Dockerfile:

FROM node:14.13.0-alpine3.12
WORKDIR /app
RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories && \
    apk add tzdata git && cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime && \
    echo "Asia/Shanghai" > /etc/timezone && \
    apk del tzdata && \
    git clone https://github.com/craigary/nobelium.git
WORKDIR /app/nobelium
COPY . .
ENV NOTION_PAGE_ID XXXXXXXX
RUN npm install && \
    npm run build
CMD npm run start

错误信息:

> Build error occurred
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /app/nobelium/node_modules/react-notion-x/build/cjs/index.js
require() of ES modules is not supported.
require() of /app/nobelium/node_modules/react-notion-x/build/cjs/index.js from /app/nobelium/.next/server/pages/[slug].js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /app/nobelium/node_modules/react-notion-x/package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1102:13)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:791:14)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.R1xE (/app/nobelium/.next/server/pages/[slug].js:901:18)
    at __webpack_require__ (/app/nobelium/.next/server/pages/[slug].js:29:31)
    at Module.Ritt (/app/nobelium/.next/server/pages/[slug].js:934:32)
    at __webpack_require__ (/app/nobelium/.next/server/pages/[slug].js:29:31)
    at Object.0 (/app/nobelium/.next/server/pages/[slug].js:136:18) {
  type: 'NodeError',
  code: 'ERR_REQUIRE_ESM'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `next build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2021-04-07T08_57_55_151Z-debug.log

wei shen me bu shu zong shi shi bai

i keep failing the deployment
is there anything i missed in the config,js?

Duplicate comment section

Describe the bug
A clear and concise description of what the bug is.
i can see two utterances comment section below the post

To Reproduce
Steps to reproduce the behavior:

1. open a post page, scroll down to the comment section.
2. navigate to another page, say About, then scroll down.
3. two utterances are there.

Expected behavior
A clear and concise description of what you expected to happen.
one comment section

Screenshots
If applicable, add screenshots to help explain your problem.

Platform:
macOS firefox/safari

• OS: [e.g. iOS, Android, macOS]
• Browser [e.g. chrome, safari, firefox]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Syntax highlighting disappears due to refresh.

Describe the bug
A clear and concise description of what the bug is.

Syntax highlighting disappears due to refresh.

To Reproduce
Steps to reproduce the behavior:

• Open a post page with code.
• Click REFRESH
• Syntax highlighting disappears

Expected behavior
A clear and concise description of what you expected to happen.

Syntax highlighting outlives refresh

Screenshots
If applicable, add screenshots to help explain your problem.

Platform:
iOS Firefox and other environments

• OS: [e.g. iOS, Android, macOS]
• Browser [e.g. chrome, safari, firefox]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

#158 this issue was closed for beening hold too long.

Describe the bug
please this issue #158

To Reproduce
Steps to reproduce the behavior:

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Platform:

• OS: [e.g. iOS, Android, macOS]
• Browser [e.g. chrome, safari, firefox]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

please add tweet embeds.

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

• i really want twitter embed in the post

Describe the solution you'd like
A clear and concise description of what you want to happen.

• show tweets

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

• /

Additional context
Add any other context or screenshots about the feature request here.

• fyi: NotionX/react-notion-x#48 (comment)

please add utteranc.es for comments services

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
well, I'm always frustrated when i see gitalk not utteranc.es

Describe the solution you'd like
A clear and concise description of what you want to happen.
add utteranc.es

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
set utteranc.es as the default provider

Additional context
Add any other context or screenshots about the feature request here.
/

Add the 404

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

[Feature request] Migration from JavaScript to TypeScript

Is your feature request related to a problem? Please describe.

• Migration from JavaScript to TypeScript for type safe and better Developer Experience

Describe the solution you'd like

• I contribute it if considering or positive about this idea

Describe alternatives you've considered

• N/A

Additional context

• I tried it out, and it's already working with TypeScript in my repository.
• FYI: https://github.com/yokinist/nobelium

can you add password guarded access?

so i can share the blog with people who can enter the right password instead of showing to public?

Error Pages and Invisible Buttons

A invisible button there and I clicked be like ......

exp & Describe the bug & Screenshots :

Also, I did not modify Pagination.js & there are no extra blank pages in my NOBELIUM Tamplate.

Platform:

• OS: Windows 10 Pro N
• Browser: Chrome latest version.

text colour is wrong when i disable dark mode

Describe the bug
A clear and concise description of what the bug is.
when I change appearance from auto to light, the text colour is still in dark mode, which is light grey, but it's supposed to be black, as in the light mode.

To Reproduce
Steps to reproduce the behavior:

1. set appearance to light in blog.config.js
2. set Appearance to Light in macOS System Preferences/General
3. open navigator to see a post, things should be normal as expected
4. set Appearance to Dark in macOS System Preferences/General
5. see that post page again, the background colour is still white, but the text colour turns to light grey

Expected behavior
A clear and concise description of what you expected to happen.
test colour should be black when appearance is light

Screenshots
If applicable, add screenshots to help explain your problem.

Platform:
macOS firefox/safari (irrelevant)

• OS: [e.g. iOS, Android, macOS]
• Browser [e.g. chrome, safari, firefox]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Deployment Error On Vercel

notion page id:3ca0bcb51d224af9b020bad4fa1142a0

15:53:47	Cloning github.com/neo4dev/nobelium (Branch: main, Commit: 8e36743)
15:53:47	Cloning completed: 656.02ms
15:53:47	Analyzing source code...
15:53:48	Installing build runtime...
15:53:50	Build runtime installed: 1.952s
15:53:52	Looking up build cache...
15:53:53	Build cache not found
15:53:54	Installing dependencies...
15:53:54	yarn install v1.22.10
15:53:54	[1/4] Resolving packages...
15:53:54	[2/4] Fetching packages...
15:54:07	info [email protected]: The platform "linux" is incompatible with this module.
15:54:07	info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
15:54:07	[3/4] Linking dependencies...
15:54:07	warning "gitalk > [email protected]" has incorrect peer dependency "[email protected] || 0.14.x || 15.x.x".
15:54:07	warning "gitalk > [email protected]" has incorrect peer dependency "[email protected] || 0.14.x || 15.x.x".
15:54:07	warning "react-notion-x > [email protected]" has unmet peer dependency "@babel/runtime@>=7".
15:54:07	warning "react-notion-x > [email protected]" has incorrect peer dependency "react@^15 || ^16".
15:54:07	warning "react-notion-x > [email protected]" has incorrect peer dependency "react-dom@^15 || ^16".
15:54:07	warning "react-notion-x > [email protected]" has incorrect peer dependency "react@^16.3.0".
15:54:07	warning "react-notion-x > [email protected]" has incorrect peer dependency "react-dom@^16.3.0".
15:54:07	warning "react-notion-x > react-pdf > [email protected]" has unmet peer dependency "webpack@^3.0.0 || ^4.0.0-alpha.0 || ^4.0.0".
15:54:07	warning "react-notion-x > react-pdf > pdfjs-dist > [email protected]" has unmet peer dependency "webpack@^3.0.0 || ^4.0.0-alpha.0 || ^4.0.0".
15:54:07	warning " > [email protected]" has incorrect peer dependency "eslint-plugin-promise@^4.2.1".
15:54:17	[4/4] Building fresh packages...
15:54:17	Done in 23.42s.
15:54:17	Detected Next.js version: 10.2.2
15:54:17	Running "yarn run build"
15:54:18	yarn run v1.22.10
15:54:18	$ next build
15:54:18	info - Using webpack 5. Reason: future.webpack5 option enabled https://nextjs.org/docs/messages/webpack5
15:54:19	Attention: Next.js now collects completely anonymous telemetry regarding usage.
15:54:19	This information is used to shape Next.js' roadmap and prioritize features.
15:54:19	You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
15:54:19	https://nextjs.org/telemetry
15:54:19	info - Checking validity of types...
15:54:19	info - Creating an optimized production build...
15:54:48	info - Compiled successfully
15:54:48	info - Collecting page data...
15:54:49	pageId "3ca0bcb5-1d22-4af9-b020-bad4fa1142a0" is not a database
15:54:49	> Build error occurred
15:54:49	TypeError: Cannot read property 'filter' of null
15:54:49	at getAllTags (/vercel/path0/.next/server/chunks/440.js:194:26)
15:54:49	at processTicksAndRejections (internal/process/task_queues.js:93:5)
15:54:49	at async getStaticPaths (/vercel/path0/.next/server/pages/tag/[tag].js:53:16)
15:54:49	at async buildStaticPaths (/vercel/path0/node_modules/next/dist/build/utils.js:16:80)
15:54:49	at async /vercel/path0/node_modules/next/dist/build/utils.js:26:622
15:54:49	at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:6:584) {
15:54:49	type: 'TypeError'
15:54:49	}
15:54:49	error Command failed with exit code 1.
15:54:49	info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
15:54:49	Error: Command "yarn run build" exited with 1

Vercel被墙，请问是否有计划部署至其他平台

Is your feature request related to a problem? Please describe.
Vercel在大陆被墙

Describe the solution you'd like
Serverless、docker等

Describe alternatives you've considered

Additional context

notion table-inline show blank

as what I said , insert table-inline ,would not work!

has any solution?

Automatic conversion of links to the blog posts

Is your feature request related to a problem? Please describe.
Notion uses [[ or @ to refer another pages. However, I find the nobelium could not conversion the notion links if it is refer to another posts within the blog. At the moment, it just jumps into notion pages.

Describe the solution you'd like
When I click the link, it could jumps into the correct post.

It does not support embedding tables in notion？

Gitalk componment not refresh

Describe the bug
Gitalk Componment not refreshed and still showed the comments on the previous page.
It will show correctly when you refresh whole page.

To Reproduce
Click on Page A to load the comments,then click page B

Expected behavior
Show the correct comments on the page

Screenshots
https://www.v2ca.ca/EE

Platform:

• OS: macOS
• Browser :chrome
• Version :1.3.0

Additional context
N/A

Any schedule to convert to Notion official API?

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

• Well the notion public beta API is released for days, the token hack is less secure than notion official solution.

Describe the solution you'd like
A clear and concise description of what you want to happen.

• Use notion API, and nobelium is a perfect use case for that
  • per https://developers.notion.com/

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

• Wait until the formal release API

Additional context
Add any other context or screenshots about the feature request here.

Toggle background color didn't function well

Is your feature request related to a problem? Please describe.

• I gave a background-color to the toggle, but it didn't appear in the nobelium.

Describe the solution you'd like

• Add the background-color to the toggle.

Additional context
The first img is what I write in the notion

the second img is what I see in nobelium

Errors about TOC

Describe the bug
The TOC will not be displayed if it is placed on the left side so that it is in the left and right columns with the text.

To Reproduce
Placing the TOC and the title left and right will produce.

Expected behavior
TOC can display correctly.

Screenshots

Platform:

• OS: Windows
• Browser: Edge
• Version: 90.0.818.51

Additional context
N/A

Attempt to add FR as French; need help to understand my mistake before PR

I basically replicated what @GermanHeim did with Spanish but when I generate my website, only the next.js part is translated, and what is in lang.js js ignored. So before doing my PR I would like to make it work ;)

• my line 7 in blog.config is now:
  lang: 'fr-CA', // ['en-US', 'zh-CN', 'zh-HK', 'zh-TW', 'ja-JP', 'es-ES', 'fr-FR', 'fr-CA']
• and I added those line in ./lib/lang.js for French

  fr: {
    NAV: {
      INDEX: 'Blog',
      RSS: 'RSS',
      SEARCH: 'Chercher',
      ABOUT: 'À propos'
    },
    PAGINATION: {
      PREV: 'Précédent',
      NEXT: 'Suivant'
    },
    POST: {
      BACK: 'Retour',
      TOP: 'Haut'
    }
  }

...

    case 'fr':
    case 'fr-CA':
    case 'fr-FR':
      return lang.fr

部署到 vercel 报错失败

部署日志：

09:47:48.496 Cloning github.com/yefoenix/nobelium (Branch: main, Commit: 1a56904)
09:47:49.075 Cloning completed in 579ms
09:47:49.078 Analyzing source code...
09:47:49.481 Installing build runtime...
09:47:51.398 Build runtime installed: 1916.795ms
09:47:53.147 Build cache not provided
09:47:53.876 Installing dependencies...
09:47:54.221 yarn install v1.22.10
09:47:54.286 [1/4] Resolving packages...
09:47:54.535 [2/4] Fetching packages...
09:48:06.916 info [email protected]: The platform "linux" is incompatible with this module.
09:48:06.916 info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
09:48:06.926 [3/4] Linking dependencies...
09:48:06.927 warning "gitalk > [email protected]" has incorrect peer dependency "[email protected] || 0.14.x || 15.x.x".
09:48:06.928 warning "gitalk > [email protected]" has incorrect peer dependency "[email protected] || 0.14.x || 15.x.x".
09:48:06.929 warning "react-notion-x > [email protected]" has unmet peer dependency "@babel/runtime@>=7".
09:48:06.929 warning "react-notion-x > [email protected]" has incorrect peer dependency "react@^15 || ^16".
09:48:06.929 warning "react-notion-x > [email protected]" has incorrect peer dependency "react-dom@^15 || ^16".
09:48:06.930 warning "react-notion-x > [email protected]" has incorrect peer dependency "react@^16.3.0".
09:48:06.930 warning "react-notion-x > [email protected]" has incorrect peer dependency "react-dom@^16.3.0".
09:48:06.930 warning "react-notion-x > react-pdf > [email protected]" has unmet peer dependency "webpack@^3.0.0 || ^4.0.0-alpha.0 || ^4.0.0".
09:48:06.931 warning "react-notion-x > react-pdf > pdfjs-dist > [email protected]" has unmet peer dependency "webpack@^3.0.0 || ^4.0.0-alpha.0 || ^4.0.0".
09:48:16.959 [4/4] Building fresh packages...
09:48:18.195 Done in 23.98s.
09:48:18.223 Detected Next.js version: 10.0.7
09:48:18.224 Running "yarn run build"
09:48:18.486 yarn run v1.22.10
09:48:18.511 $ next build
09:48:19.083 info - Creating an optimized production build...
09:48:19.100 Attention: Next.js now collects completely anonymous telemetry regarding usage.
09:48:19.100 This information is used to shape Next.js' roadmap and prioritize features.
09:48:19.100 You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
09:48:19.100 https://nextjs.org/telemetry
09:48:20.012 info - Using external babel configuration from /vercel/workpath0/.babelrc.js
09:48:20.437 [styled-jsx] Loading plugin from path: /vercel/workpath0/node_modules/styled-jsx-plugin-postcss/index.js
09:48:40.270 info - Compiled successfully
09:48:40.271 info - Collecting page data...
09:48:41.508 info - Generating static pages (0/37)
09:48:43.385 info - Generating static pages (9/37)
09:48:44.045 Unhandled error during request: TypeError: Cannot read property 'id' of undefined
09:48:44.046 at getStaticProps (/vercel/workpath0/.next/serverless/pages/[slug].js:1746:71)
09:48:44.046 at runMicrotasks ()
09:48:44.046 at processTicksAndRejections (internal/process/task_queues.js:93:5)
09:48:44.046 at async renderToHTML (/vercel/workpath0/node_modules/next/dist/next-server/server/render.js:28:109)
09:48:44.046 at async renderReqToHTML (/vercel/workpath0/.next/serverless/pages/[slug].js:873:334)
09:48:44.046 at async /vercel/workpath0/node_modules/next/dist/export/worker.js:12:92
09:48:44.046 at async /vercel/workpath0/node_modules/next/dist/build/tracer.js:3:470
09:48:44.046 Error occurred prerendering page "/null". Read more: https://err.sh/next.js/prerender-error
09:48:44.046 TypeError: Cannot read property 'id' of undefined
09:48:44.046 at getStaticProps (/vercel/workpath0/.next/serverless/pages/[slug].js:1746:71)
09:48:44.046 at runMicrotasks ()
09:48:44.046 at processTicksAndRejections (internal/process/task_queues.js:93:5)
09:48:44.046 at async renderToHTML (/vercel/workpath0/node_modules/next/dist/next-server/server/render.js:28:109)
09:48:44.047 at async renderReqToHTML (/vercel/workpath0/.next/serverless/pages/[slug].js:873:334)
09:48:44.047 at async /vercel/workpath0/node_modules/next/dist/export/worker.js:12:92
09:48:44.047 at async /vercel/workpath0/node_modules/next/dist/build/tracer.js:3:470
09:48:45.112 info - Generating static pages (18/37)
09:48:46.419 info - Generating static pages (27/37)
09:48:47.663 info - Generating static pages (37/37)
09:48:47.663 > Build error occurred
09:48:47.665 Error: Export encountered errors on following paths:
09:48:47.665 /null
09:48:47.665 at /vercel/workpath0/node_modules/next/dist/export/index.js:30:1103
09:48:47.665 at async /vercel/workpath0/node_modules/next/dist/build/tracer.js:3:470
09:48:47.665 at async /vercel/workpath0/node_modules/next/dist/build/index.js:39:69
09:48:47.665 at async /vercel/workpath0/node_modules/next/dist/build/tracer.js:3:470
09:48:47.665 at async /vercel/workpath0/node_modules/next/dist/build/index.js:21:731
09:48:47.665 at async /vercel/workpath0/node_modules/next/dist/build/tracer.js:3:470
09:48:47.727 error Command failed with exit code 1.
09:48:47.727 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
09:48:47.739 Error: Command "yarn run build" exited with 1
09:48:50.320 Done with "package.json"

blog config：https://github.com/yefoenix/nobelium/blob/main/blog.config.js
notion 页面地址：https://www.notion.so/e7988de46ee34a78872ed12fb74f58eb

Suggest:Outline

Is your feature request related to a problem? Please describe.
It's hard to read without outline(or table of content?) when i wrote a long post.

Describe the solution you'd like
I think a sider outline will be good likes other blog.

Describe alternatives you've considered
I am a fans of Notion but i hate there is no a TOC always be there.
I work with Notion on Edge through the plugin named notion-boost.
it help me to generate a outline on the right side.
maybe it can help

Additional context
i think nobelium is cool and i love it,but i am a backend developer so i could not to make it better....holp you can see this,,,,thanks

failed to show images

Describe the bug
A clear and concise description of what the bug is.
images failed to load

To Reproduce
Steps to reproduce the behavior:
insert a photo in Notion, then in nobelium it doesn't show as expected

Expected behavior
A clear and concise description of what you expected to happen.
show pics as in Notion

Screenshots
If applicable, add screenshots to help explain your problem.

Platform:
macOS firefox

• OS: [e.g. iOS, Android, macOS]
• Browser [e.g. chrome, safari, firefox]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

post link https://nobelium-gules-eta.vercel.app/well-hello-you

Support the Notion Serif Font

Is your feature request related to a problem? Please describe.
Hope for adding support for serif font in the notion page configuration. It's a very beautiful font for publishing-like page, especially for articles written in Chinese or Japanese characters.

Describe the solution you'd like
Is possible to get the font configuration of certain notion pages and choose different fonts. Just like nobelium can use different page layout according to the notion's Full-width option.

Describe alternatives you've considered
A font type property (e.g default or serif) assigned to every pages can be an alternative but less graceful.

Additional context
an example of page using serif font

The Less code block do not display

Describe the bug

The Less code block do not display, If I turn the less or css block to text or qoute, It can be render correctly.
images follow:

The original notion page:
https://www.notion.so/Vue-Js-Loading-40d9bae0cef64fb2bf1a7280b10141e1
The web page with error:
https://blog.432000.xyz/vue-loading-mask

To Reproduce

copy a less code to notion, turn it to code block, select code type as 'less'

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

Platform:

• OS: [Windows NT 10.0; Win64; x64]
• Browser [ Chrome/90.0.4430.93 ]
• Version [Latest version]

Additional context
Add any other context about the problem here.

How to change the img in the header

1. I want to change the img but I can't find where to change it.I already deleted the logo-for-dark-bg.svg in /public.
   

2. I didn't find the use of the avatar.svg in /public. Where was this img originally used?
   

部署到vercel报错

invalid notion pageId "undefined" at NotionAPI.

Build failed when deploy on vercel

Couldn't get nobelium deployed after modified blog.config.js.
Then I reverted the commit and deployed again, but the same error ensued.
Command "yarn run build" exited with 1
Full build log attached.
build.log

Render Notion page cover in post list

Pardon my Ps 😐

Trobles w/ cacheable-lookup: Module not found: Can't resolve 'dns'

Describe the bug
doesn't build

To Reproduce

1. I run yarn && yarn dev
2. when build complete,
3. browser shows: 'Module not found: Can't resolve 'dns''. Also I see many similar errors in console

Expected behavior
I must see my notion mirror site

Screenshots

Platform:

• OS: macOS
• Browser N/A, chrome, any other will so
• Version N/A

Additional context
repo: https://github.com/a-x-/nobelium

Code area in li tag will expand the width of device, so the mobile device to be unable to view normally

Describe the bug
Code area in li tag will expand the width of device, so the mobile device to be unable to view normally

Expected behavior
Wish the max width will be restricted

Screenshots

Platform:

• OS: Android
• Browser Edge
• Version MIUI 12.5 Andoird 11 Edge 46.04.4.5157

Additional context
Add any other context about the problem here.

Add VALINE as one of comment provider

Is your feature request related to a problem? Please describe.
for existing comment provider, like gitalk, utterances, cusdis, those was not support Anonymous + Immediate comment.

Describe the solution you'd like
I would like to recommend a new comment provider, named valine

Describe alternatives you've considered
N/A

Additional context
https://valine.js.org/en/index.html

Hello, I have a question about the failure of deployment in vercel

I have the following errors in the deployment of vercel, which lead to the correct deployment. I hope you can solve my problems. Thank you very much

18:39:32.295	pageId "7a69a86e-a02c-4505-880c-82b1b02ba7cb" is not a database
18:39:32.296	> Build error occurred
18:39:32.298	TypeError: Cannot read property 'filter' of null
18:39:32.298	at getStaticPaths (/vercel/path0/.next/server/pages/page/[page].js:69:17)
18:39:32.299	at processTicksAndRejections (internal/process/task_queues.js:93:5)
18:39:32.299	at async buildStaticPaths (/vercel/path0/node_modules/next/dist/build/utils.js:16:80)
18:39:32.299	at async /vercel/path0/node_modules/next/dist/build/utils.js:26:622
18:39:32.299	at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:6:584) {
18:39:32.299	type: 'TypeError'
18:39:32.299	}
18:39:32.345	error Command failed with exit code 1.
18:39:32.345	info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
18:39:32.363	Error: Command "yarn run build" exited with 1

code syntax highlighting bug

Describe the bug
On the post page, the code has syntax highlighting when entering it. After refreshing the page, the syntax highlighting disappears. .

Platform:

• OS: iOS, macOS
• Browser edge

Fail to revise the date or add a new record

Hi, sometimes when I add a new record in the Notion and then delete it. Later, I add a record which contains some same slug of the deleted record. In this case, I click the new blog in the homepage, the details page does not update, which is still the deleted blog.

部署失败

😀你好，按照教程安装部署：

• Fork 项目到 github 中，什么也没有修改；
• 将 Notion 模板拷贝 Notion 账户，分享出去，并得到 NOTION_PAGE_ID 的32位 ID；
• vercel 用 githu b账户登录，并选择 nobelium 项目，一直下一步；
• 在环境变量中 add→NOTION_PAGE_ID→32位ID；
• 然后部署→报错

报错如下😒：

BRANCH
 main
`0cbac81 — :bug: Fix notion.js`


14:12:42.825 | warning "gitalk > [email protected]" has incorrect peer dependency "[email protected] \|\| 0.14.x \|\| 15.x.x".
-- | --
14:12:42.825 | warning "gitalk > [email protected]" has incorrect peer dependency "[email protected] \|\| 0.14.x \|\| 15.x.x".
14:12:42.827 | warning "react-notion-x > [email protected]" has unmet peer dependency "@babel/runtime@>=7".
14:12:42.828 | warning "react-notion-x > [email protected]" has incorrect peer dependency "react@^15 \|\| ^16".
14:12:42.828 | warning "react-notion-x > [email protected]" has incorrect peer dependency "react-dom@^15 \|\| ^16".
14:12:42.828 | warning "react-notion-x > [email protected]" has incorrect peer dependency "react@^16.3.0".
14:12:42.829 | warning "react-notion-x > [email protected]" has incorrect peer dependency "react-dom@^16.3.0".
14:12:42.830 | warning "react-notion-x > react-pdf > [email protected]" has unmet peer dependency "webpack@^3.0.0 \|\| ^4.0.0-alpha.0 \|\| ^4.0.0".
14:12:42.830 | warning "react-notion-x > react-pdf > pdfjs-dist > [email protected]" has unmet peer dependency "webpack@^3.0.0 \|\| ^4.0.0-alpha.0 \|\| ^4.0.0".


14:13:29.751 | > Build error occurred
-- | --
14:13:29.755 | Error [HTTPError]: Response code 400 (Bad Request)
14:13:29.756 | at Request.<anonymous> (/vercel/workpath0/node_modules/got/dist/source/as-promise/index.js:117:42)
14:13:29.756 | at processTicksAndRejections (internal/process/task_queues.js:93:5) {


14:13:29.819 | error Command failed with exit code 1.
-- | --



14:13:29.841 | Error: Command "yarn run build" exited with 1
-- | --

请求支援🙋

vercel error

08:38:24	> Build error occurred
08:38:24	Error [HTTPError]: Response code 400 (Bad Request)
08:38:24	at Request. (/vercel/path0/node_modules/got/dist/source/as-promise/index.js:117:42)
08:38:24	at processTicksAndRejections (internal/process/task_queues.js:93:5) {

code block text color in dark mode NOT FIXED

Describe the bug
A clear and concise description of what the bug is.

• code block colour scheme is still the same in both mode

To Reproduce
Steps to reproduce the behavior:

• swith between dark/light
• code block remains untouched

Expected behavior
A clear and concise description of what you expected to happen.

• use a dark theme for code block in dark mode

Screenshots
If applicable, add screenshots to help explain your problem.

Platform:

• OS: [e.g. iOS, Android, macOS]
• Browser [e.g. chrome, safari, firefox]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

NotionAPI collectionQuery error Response code 400 (Bad Request)

When i deploy the blog ,i got the wrong info

18:44:27.890 | NotionAPI collectionQuery error Response code 400 (Bad Request)
-- | --
18:44:27.892 | > Build error occurred
18:44:27.894 | TypeError: Cannot convert undefined or null to object
18:44:27.895 | at Function.values (<anonymous>)
18:44:27.895 | at getAllPageIds (/vercel/path0/.next/server/chunks/272.js:37:12)
18:44:27.896 | at getAllPosts (/vercel/path0/.next/server/chunks/272.js:186:21)
18:44:27.896 | at processTicksAndRejections (internal/process/task_queues.js:95:5)
18:44:27.896 | at async getStaticPaths (/vercel/path0/.next/server/pages/tag/[tag].js:54:17)
18:44:27.896 | at async buildStaticPaths (/vercel/path0/node_modules/next/dist/build/utils.js:472:31)
18:44:27.897 | at async /vercel/path0/node_modules/next/dist/build/utils.js:615:119
18:44:27.897 | at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:60:20) {
18:44:27.897 | type: 'TypeError'
18:44:27.897 | }
18:44:27.954 | error Command failed with exit code 1.
18:44:27.955 | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
18:44:27.985 | Error: Command "yarn run build" exited with 1

I think I have set the env correctly,it still not work

Deployment Error On Vercel

Here are logs

Build error occurred

14:19:43.099

Build error occurred
14:19:43.102
TypeError: Cannot read property 'value' of undefined
14:19:43.102
at getAllPosts (/vercel/path0/.next/server/chunks/440.js:149:33)
14:19:43.102
at processTicksAndRejections (internal/process/task_queues.js:93:5)
14:19:43.102
at async getAllTags (/vercel/path0/.next/server/chunks/440.js:193:20)
14:19:43.102
at async getStaticPaths (/vercel/path0/.next/server/pages/tag/[tag].js:53:16)
14:19:43.102
at async buildStaticPaths (/vercel/path0/node_modules/next/dist/build/utils.js:16:80)
14:19:43.102
at async /vercel/path0/node_modules/next/dist/build/utils.js:26:622
14:19:43.102
at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:6:584) {
14:19:43.102
type: 'TypeError'
14:19:43.102
}
14:19:43.151
error Command failed with exit code 1.
14:19:43.151
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
14:19:43.175
Error: Command "yarn run build" exited with 1