notion-x

My customization of NotionX's react-notion-x. Personal use only!

See it in action?

• dinhanhthi.com (source)
• math2it.com

Install (as a standalone package)

yarn add github:dinhanhthi/notion-x
# update
yarn upgrade notion-x

For tailwind v3,

// add to tailwind.config.ts
content: [
  './node_modules/notion-x/**/*.{js,ts,jsx,tsx}'
]

// in your main app
import '../../node_modules/notion-x/src/style/notion-x.scss' // relative path

For tailwind v4, in your global style file,

@import '../../node_modules/notion-x/src/style/notion-x.scss';
@source '../../node_modules/notion-x/**/*.{js,ts,jsx,tsx}';

Install (as a submodule)

You have to install Tailwind CSS in your project.

🚨 You have to install globally Nodejs >=18 (recommend using nvm) and Yarn first.

Install this repo as a submodule in your project under the root folder.

npm i --g yarn
npm i -g rimraf

# first install only
git submodule add https://github.com/dinhanhthi/notion-x.git

# in case your repo has already added this repo as a submodule
# and this is the first time you clone your repo to local
git submodule update --init --recursive

# to update submodule
git submodule update --recursive --remote

You have to install the packages lised in package.json for both "dependencies" and "devDependencies".

You have to have following environment variables (put them in .env.local),

NOTION_TOKEN = "secret_xxx"
NOTION_VERSION = "2022-06-28"
# For Unofficial Posts DB
NOTION_API_WEB = "https://www.notion.so/api/v3"
SPACE_ID = "xxx"
SOURCE_ID = "xxx"
COLLECTION_VIEW_ID = "xxx"
# "dev" or "prod"
ENV_MODE = "dev"

Put in your tsconfig.json,

"compilerOptions": {
  "paths": {
    "@/*": ["./*"],
    "@notion-x/*": ["./notion-x/*"]
  }
}

Put below line in tailwind.config.ts,

{
  content: ['./notion-x/**/*.{js,ts,jsx,tsx,mdx,css,scss}'],
  theme: {
    extend: {
      fontWeight: {
        inherit: "inherit",
      },
    },
  }
}

💡 Tip: You can edit the files in the submodule BUT don't commit and push it. After finishing editing, just cd notion-x and then git checkout <file-path> to discard all changes.

For Code Editor to work with Yarn's PnP (Plug'n'Play), follow this official guide.

Troubleshooting

Problem with react-syntax-highlighter, install @types/react-syntax-highlighter.

Problem with react-copy-to-clipboard, copy file src/react-copy-to-clipboard.d.ts to your project and include it in your tsconfig.json!

Update something new (for me only)

Read the steps in the repo dinhanhthi.com.