├── .vscode
    └── extensions.json
├── demo
    ├── vue
    │   ├── .vscode
    │   │   └── extensions.json
    │   ├── public
    │   │   └── favicon.ico
    │   ├── src
    │   │   ├── assets
    │   │   │   └── logo.png
    │   │   ├── App.vue
    │   │   ├── main.ts
    │   │   ├── router
    │   │   │   └── index.ts
    │   │   ├── view
    │   │   │   ├── Index.vue
    │   │   │   └── Page.vue
    │   │   └── components
    │   │   │   └── HelloWorld.vue
    │   ├── tsconfig.node.json
    │   ├── vite.config.ts
    │   ├── .gitignore
    │   ├── index.html
    │   ├── package.json
    │   ├── tsconfig.json
    │   ├── README.md
    │   └── pnpm-lock.yaml
    └── nuxt
    │   ├── public
    │       └── logo.png
    │   ├── server
    │       └── api
    │       │   └── page
    │       │       └── [pageId].ts
    │   ├── composables
    │       └── useProps.ts
    │   ├── pages
    │       ├── index.vue
    │       └── page
    │       │   └── [id].vue
    │   ├── tsconfig.json
    │   ├── nuxt.config.ts
    │   ├── package.json
    │   └── app.vue
├── src
    ├── components
    │   ├── index.ts
    │   ├── notion-renderer.vue
    │   └── block.vue
    ├── lib
    │   ├── props.ts
    │   ├── constant.ts
    │   ├── api.ts
    │   ├── composables.ts
    │   ├── types.ts
    │   ├── utils.ts
    │   └── blockable.ts
    ├── blocks
    │   ├── sync-block.vue
    │   ├── helpers
    │   │   ├── default-page-icon.vue
    │   │   ├── column-spacer.vue
    │   │   ├── page-header.vue
    │   │   ├── katex.vue
    │   │   ├── text-renderer.vue
    │   │   ├── table-of-contents-item.vue
    │   │   ├── tweet.ts
    │   │   ├── nested-list.vue
    │   │   ├── header-renderer.vue
    │   │   ├── prism.vue
    │   │   ├── page-icon.vue
    │   │   ├── figure.vue
    │   │   ├── prism.ts
    │   │   ├── asset.vue
    │   │   ├── image.vue
    │   │   └── google-drive.vue
    │   ├── table.vue
    │   ├── quote.vue
    │   ├── toggle.vue
    │   ├── text.vue
    │   ├── equation.vue
    │   ├── sync-pointer-block.vue
    │   ├── column.vue
    │   ├── todo.vue
    │   ├── header.vue
    │   ├── callout.vue
    │   ├── tweet.vue
    │   ├── table-row.vue
    │   ├── bookmark.vue
    │   ├── list.vue
    │   ├── table-of-contents.vue
    │   ├── code.vue
    │   ├── page.vue
    │   └── decorator.vue
    ├── index.ts
    └── style.css
├── assets
    └── vue3-notion.png
├── playground
    ├── assets
    │   └── logo.png
    ├── public
    │   └── favicon.ico
    ├── tsconfig.json
    ├── App.vue
    ├── main.ts
    ├── vite.config.ts
    ├── index.html
    ├── router
    │   └── index.ts
    └── view
    │   ├── Page.vue
    │   └── Index.vue
├── .gitignore
├── env.d.ts
├── scripts
    └── postpublish.sh
├── nuxt
    ├── plugin.ts
    └── index.ts
├── tsconfig.json
├── .github
    └── ISSUE_TEMPLATE
    │   ├── feature_request.md
    │   └── bug_report.md
├── vite.config.ts
├── LICENSE
├── package.json
└── README.md


/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["Vue.volar"]
3 | }
4 | 


--------------------------------------------------------------------------------
/demo/vue/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["johnsoncodehk.volar"]
3 | }
4 | 


--------------------------------------------------------------------------------
/src/components/index.ts:
--------------------------------------------------------------------------------
1 | export { default as NotionRenderer } from "./notion-renderer.vue"
2 | 


--------------------------------------------------------------------------------
/assets/vue3-notion.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zernonia/vue3-notion/HEAD/assets/vue3-notion.png


--------------------------------------------------------------------------------
/demo/nuxt/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zernonia/vue3-notion/HEAD/demo/nuxt/public/logo.png


--------------------------------------------------------------------------------
/playground/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zernonia/vue3-notion/HEAD/playground/assets/logo.png


--------------------------------------------------------------------------------
/demo/vue/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zernonia/vue3-notion/HEAD/demo/vue/public/favicon.ico


--------------------------------------------------------------------------------
/demo/vue/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zernonia/vue3-notion/HEAD/demo/vue/src/assets/logo.png


--------------------------------------------------------------------------------
/playground/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zernonia/vue3-notion/HEAD/playground/public/favicon.ico


--------------------------------------------------------------------------------
/playground/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../tsconfig.json",
3 |   "compilerOptions": {
4 |     "types": ["vite/client"]
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | .DS_Store
 3 | dist
 4 | dist-ssr
 5 | *.log
 6 | *.local
 7 | .nuxt
 8 | .output
 9 | .env
10 | .log
11 | .vercel
12 | 


--------------------------------------------------------------------------------
/playground/App.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div id="app">
3 |     <router-view :key="$route.params.id?.toString()"></router-view>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/env.d.ts:
--------------------------------------------------------------------------------
1 | declare module "*.vue" {
2 |   import { DefineComponent } from "vue";
3 |   const component: DefineComponent<{}, {}, any>;
4 |   export default component;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/lib/props.ts:
--------------------------------------------------------------------------------
1 | export const mapPageUrl = (pageId: String) => {
2 |   return `/page/${pageId}`
3 | }
4 | export const pageLinkOptions = {
5 |   component: "RouterLink",
6 |   href: "to",
7 | }
8 | 


--------------------------------------------------------------------------------
/demo/vue/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "composite": true,
4 |     "module": "esnext",
5 |     "moduleResolution": "node"
6 |   },
7 |   "include": ["vite.config.ts"]
8 | }
9 | 


--------------------------------------------------------------------------------
/demo/vue/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import vue from '@vitejs/plugin-vue'
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [vue()]
7 | })
8 | 


--------------------------------------------------------------------------------
/playground/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from "vue";
2 | import App from "./App.vue";
3 | import { router } from "./router";
4 | import "@/style.css";
5 | 
6 | createApp(App).use(router).mount("#app");
7 | 


--------------------------------------------------------------------------------
/demo/vue/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view :key="$route.params.id"></router-view>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style>
 8 | body {
 9 |   margin: 0;
10 |   box-sizing: border-box;
11 | }
12 | </style>
13 | 


--------------------------------------------------------------------------------
/src/blocks/sync-block.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts"></script>
 2 | 
 3 | <template>
 4 |   <div class="notion-sync-block"><slot /></div>
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 | export default {
 9 |   name: "NotionSyncBlock",
10 | }
11 | </script>
12 | 


--------------------------------------------------------------------------------
/scripts/postpublish.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | 
 3 | GIT_TAG=$(git describe --abbrev=0 --tags)
 4 | 
 5 | $(cd demo && npm install -f vue3-notion@latest)
 6 | 
 7 | git add --all
 8 | git commit -m 'Update demo'
 9 | git push --tags
10 | 
11 | gh release create $GIT_TAG -t "$GIT_TAG"


--------------------------------------------------------------------------------
/src/blocks/helpers/default-page-icon.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <svg viewBox="0 0 30 30" width="20">
3 |     <path
4 |       d="M16,1H4v28h22V11L16,1z M16,3.828L23.172,11H16V3.828z M24,27H6V3h8v10h10V27z M8,17h14v-2H8V17z M8,21h14v-2H8V21z M8,25h14v-2H8V25z"
5 |     ></path>
6 |   </svg>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/demo/vue/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { createApp } from "vue";
 2 | import App from "./App.vue";
 3 | import { router } from "./router";
 4 | 
 5 | import "vue3-notion/dist/style.css";
 6 | import "prismjs/themes/prism.css";
 7 | import "katex/dist/katex.min.css";
 8 | 
 9 | createApp(App).use(router).mount("#app");
10 | 


--------------------------------------------------------------------------------
/demo/nuxt/server/api/page/[pageId].ts:
--------------------------------------------------------------------------------
 1 | import { NotionAPI } from "notion-client";
 2 | 
 3 | export default defineEventHandler(async (event) => {
 4 |   const pageId = event.context.params.pageId;
 5 | 
 6 |   const api = new NotionAPI();
 7 |   const page = await api.getPage(pageId.toString());
 8 | 
 9 |   return page;
10 | });
11 | 


--------------------------------------------------------------------------------
/src/blocks/table.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | export default {
 3 |   name: "NotionTable",
 4 | }
 5 | </script>
 6 | 
 7 | <template>
 8 |   <div class="notion-simple-table-wrapper">
 9 |     <table class="notion-simple-table">
10 |       <tbody>
11 |         <slot />
12 |       </tbody>
13 |     </table>
14 |   </div>
15 | </template>
16 | 


--------------------------------------------------------------------------------
/playground/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import path from "path";
 2 | import { defineConfig } from "vite";
 3 | import vue from "@vitejs/plugin-vue";
 4 | 
 5 | // https://vitejs.dev/config/
 6 | export default defineConfig({
 7 |   plugins: [vue()],
 8 |   resolve: {
 9 |     alias: {
10 |       "@": path.resolve(__dirname, "../src"),
11 |     },
12 |   },
13 | });
14 | 


--------------------------------------------------------------------------------
/demo/nuxt/composables/useProps.ts:
--------------------------------------------------------------------------------
 1 | export const useProps = () => {
 2 |   const mapPageUrl = (pageId: String) => {
 3 |     return `/page/${pageId}`
 4 |   }
 5 | 
 6 |   const pageLinkOptions = computed(() => ({
 7 |     component: defineNuxtLink({}),
 8 |     href: "to",
 9 |   }))
10 | 
11 |   return {
12 |     mapPageUrl,
13 |     pageLinkOptions,
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/demo/vue/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/src/blocks/helpers/column-spacer.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { computed } from "vue"
 3 | 
 4 | const baseWidth = 46 // todo: add magic numbers to a config json
 5 | 
 6 | const spacerStyle = computed(() => {
 7 |   return { width: `${baseWidth}px` }
 8 | })
 9 | </script>
10 | 
11 | <template>
12 |   <div class="notion-spacer" :style="spacerStyle" />
13 | </template>
14 | 


--------------------------------------------------------------------------------
/nuxt/plugin.ts:
--------------------------------------------------------------------------------
 1 | import VueNotion from "vue3-notion";
 2 | import { getPageBlocks, getPageTable } from "vue3-notion";
 3 | import { defineNuxtPlugin } from "#app";
 4 | 
 5 | export default defineNuxtPlugin(({ vueApp }) => {
 6 |   const notion = { getPageBlocks, getPageTable };
 7 |   vueApp.use(VueNotion);
 8 |   return {
 9 |     provide: {
10 |       notion,
11 |     },
12 |   };
13 | });
14 | 


--------------------------------------------------------------------------------
/demo/vue/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" href="/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vite App</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script type="module" src="/src/main.ts"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/playground/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" href="/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vite App</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script type="module" src="/main.ts"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/demo/vue/src/router/index.ts:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHistory } from "vue-router";
 2 | import Home from "../view/Index.vue";
 3 | import Page from "../view/Page.vue";
 4 | 
 5 | const routes = [
 6 |   { path: "/", name: "Home", component: Home },
 7 |   { path: "/:id", name: "Page", component: Page },
 8 | ];
 9 | 
10 | export const router = createRouter({
11 |   history: createWebHistory(),
12 |   routes,
13 | });
14 | 


--------------------------------------------------------------------------------
/playground/router/index.ts:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHistory } from "vue-router";
 2 | import Home from "../view/Index.vue";
 3 | import Page from "../view/Page.vue";
 4 | 
 5 | const routes = [
 6 |   { path: "/", name: "Home", component: Home },
 7 |   { path: "/:id", name: "Page", component: Page },
 8 | ];
 9 | 
10 | export const router = createRouter({
11 |   history: createWebHistory(),
12 |   routes,
13 | });
14 | 


--------------------------------------------------------------------------------
/demo/nuxt/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const { $notion } = useNuxtApp();
 3 | const { data } = await useAsyncData("notion-index", () => $notion.getPageBlocks("4b2dc28a5df74034a943f8c8e639066a"));
 4 | const { mapPageUrl, pageLinkOptions } = useProps();
 5 | </script>
 6 | 
 7 | <template>
 8 |   <div>
 9 |     <NotionRenderer :blockMap="data" fullPage prism katex :mapPageUrl="mapPageUrl" :pageLinkOptions="pageLinkOptions" />
10 |   </div>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/demo/nuxt/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./.nuxt/tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "target": "esnext",
 5 |     "module": "esnext",
 6 |     "moduleResolution": "node",
 7 |     "strict": true,
 8 |     "jsx": "preserve",
 9 |     "sourceMap": true,
10 |     "resolveJsonModule": true,
11 |     "esModuleInterop": true,
12 |     "allowSyntheticDefaultImports": true,
13 |     "lib": ["esnext", "dom"],
14 |     "types": ["@nuxt/types"]
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/demo/vue/src/view/Index.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { NotionRenderer, useGetPageBlocks } from "vue3-notion";
 3 | 
 4 | const { data: blockMap } = useGetPageBlocks("4b2dc28a5df74034a943f8c8e639066a");
 5 | </script>
 6 | 
 7 | <template>
 8 |   <div v-if="blockMap">
 9 |     <NotionRenderer :blockMap="blockMap" fullPage prism katex />
10 |   </div>
11 | </template>
12 | 
13 | <style>
14 | body {
15 |   margin: 0;
16 |   box-sizing: border-box;
17 | }
18 | </style>
19 | 


--------------------------------------------------------------------------------
/demo/nuxt/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | export default defineNuxtConfig({
 2 |   app: {
 3 |     head: {
 4 |       title: "Nuxt3 Notion",
 5 |       meta: [{ charset: "utf-8" }, { name: "viewport", content: "width=device-width, initial-scale=1" }],
 6 |       link: [{ rel: "icon", type: "image/png", href: "/logo.png" }],
 7 |     },
 8 |   },
 9 |   modules: ["@nuxt/devtools", ["vue3-notion/nuxt", { css: true }]],
10 |   routeRules:{
11 |     '**': { isr: 120 } // every 2 * 60 seconds
12 |   }
13 | });
14 | 


--------------------------------------------------------------------------------
/demo/nuxt/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt3-notion",
 3 |   "version": "0.0.1",
 4 |   "type": "module",
 5 |   "description": "Nuxt 3 Notion Renderer.",
 6 |   "license": "MIT",
 7 |   "scripts": {
 8 |     "dev": "nuxt dev",
 9 |     "build": "nuxt build",
10 |     "preview": "nuxt preview",
11 |     "start": "node .output/server/index.mjs"
12 |   },
13 |   "dependencies": {
14 |     "notion-client": "^6.15.6",
15 |     "nuxt": "^3.13.2",
16 |     "vue3-notion": "^0.1.46"
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/src/blocks/helpers/page-header.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useNotionBlock } from "../../lib/blockable";
 3 | import Decorator from "../../blocks/decorator.vue";
 4 | </script>
 5 | 
 6 | <script lang="ts">
 7 | export default {
 8 |   name: "NotionPageHeader",
 9 | };
10 | </script>
11 | 
12 | <template>
13 |   <header class="notion-page-header">
14 |     <div class="notion-nav-breadcrumbs">
15 |       <!-- todo: breadcrumbs -->
16 |     </div>
17 |   </header>
18 | </template>
19 | 


--------------------------------------------------------------------------------
/src/blocks/helpers/katex.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import katex from "katex"
 3 | import { computed } from "vue"
 4 | 
 5 | const props = defineProps({
 6 |   expression: {
 7 |     type: String,
 8 |     required: true,
 9 |   },
10 | })
11 | 
12 | const html = computed(() => katex.renderToString(props.expression))
13 | </script>
14 | 
15 | <script lang="ts">
16 | export default {
17 |   name: "Katex",
18 | }
19 | </script>
20 | 
21 | <template>
22 |   <span v-html="html"></span>
23 | </template>
24 | 


--------------------------------------------------------------------------------
/demo/vue/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "scripts": {
 6 |     "dev": "vite",
 7 |     "build": "vite build",
 8 |     "preview": "vite preview"
 9 |   },
10 |   "dependencies": {
11 |     "vue": "^3.2.25",
12 |     "vue-router": "^4.0.14",
13 |     "vue3-notion": "^0.1.46"
14 |   },
15 |   "devDependencies": {
16 |     "@vitejs/plugin-vue": "^2.2.0",
17 |     "typescript": "^4.5.4",
18 |     "vite": "^2.8.6",
19 |     "vue-tsc": "^0.29.8"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/demo/vue/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "useDefineForClassFields": true,
 5 |     "module": "esnext",
 6 |     "moduleResolution": "node",
 7 |     "strict": true,
 8 |     "jsx": "preserve",
 9 |     "sourceMap": true,
10 |     "resolveJsonModule": true,
11 |     "esModuleInterop": true,
12 |     "lib": ["esnext", "dom"]
13 |   },
14 |   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
15 |   "references": [{ "path": "./tsconfig.node.json" }]
16 | }
17 | 


--------------------------------------------------------------------------------
/demo/vue/src/view/Page.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useRoute } from "vue-router";
 3 | import { NotionRenderer, useGetPageBlocks } from "vue3-notion";
 4 | 
 5 | const route = useRoute();
 6 | 
 7 | const { data: blockMap } = useGetPageBlocks(route.params.id?.toString());
 8 | </script>
 9 | 
10 | <template>
11 |   <div v-if="blockMap">
12 |     <NotionRenderer :blockMap="blockMap" fullPage prism katex />
13 |   </div>
14 | </template>
15 | 
16 | <style>
17 | body {
18 |   margin: 0;
19 |   box-sizing: border-box;
20 | }
21 | </style>
22 | 


--------------------------------------------------------------------------------
/demo/nuxt/app.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts"></script>
 2 | 
 3 | <template>
 4 |   <NuxtPage></NuxtPage>
 5 | </template>
 6 | 
 7 | <style>
 8 | body {
 9 |   margin: 0;
10 |   padding: 2rem;
11 |   box-sizing: border-box;
12 | }
13 | .notion {
14 |   display: flex;
15 |   flex-direction: column;
16 |   align-items: center;
17 | }
18 | .notion-page-cover {
19 |   max-width: 1000px;
20 |   box-sizing: border-box;
21 |   border-radius: 25px;
22 | }
23 | 
24 | @media screen and (max-width: 600px) {
25 |   body {
26 |     padding: 2rem 1rem;
27 |   }
28 | }
29 | </style>
30 | 


--------------------------------------------------------------------------------
/demo/nuxt/pages/page/[id].vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const route = useRoute()
 3 | const { $notion } = useNuxtApp()
 4 | const { data, pending } = useLazyAsyncData(`notion-${route.params.id}`, () =>
 5 |   $notion.getPageBlocks(route.params.id.toString())
 6 | )
 7 | const { mapPageUrl, pageLinkOptions } = useProps()
 8 | </script>
 9 | 
10 | <template>
11 |   <div v-if="pending" class="notion">Loading...</div>
12 |   <div v-else>
13 |     <NotionRenderer :blockMap="data" fullPage prism katex :mapPageUrl="mapPageUrl" :pageLinkOptions="pageLinkOptions" />
14 |   </div>
15 | </template>
16 | 


--------------------------------------------------------------------------------
/src/lib/constant.ts:
--------------------------------------------------------------------------------
 1 | export const availableType = [
 2 |   "page",
 3 |   "header",
 4 |   "sub_header",
 5 |   "sub_sub_header",
 6 |   "bookmark",
 7 |   "callout",
 8 |   "code",
 9 |   "equation",
10 |   "text",
11 |   "quote",
12 |   "to_do",
13 |   "toggle",
14 |   "column_list",
15 |   "column",
16 |   "bulleted_list",
17 |   "numbered_list",
18 |   "image",
19 |   "embed",
20 |   "figma",
21 |   "video",
22 |   "audio",
23 |   "table",
24 |   "table_row",
25 |   "tweet",
26 |   "divider",
27 |   "table_of_contents",
28 |   "transclusion_container",
29 |   "transclusion_reference",
30 | ]
31 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "useDefineForClassFields": true,
 5 |     "module": "esnext",
 6 |     "moduleResolution": "node",
 7 |     "strict": true,
 8 |     "jsx": "preserve",
 9 |     "sourceMap": true,
10 |     "resolveJsonModule": true,
11 |     "esModuleInterop": true,
12 |     "declaration": false,
13 |     "lib": ["esnext", "dom"],
14 |     "baseUrl": ".",
15 |     "outDir": "dist",
16 |     "skipLibCheck": true,
17 |     "paths": {
18 |       "@/*": ["src/*"],
19 |     }
20 |   },
21 | 
22 |   "include": ["src/**/*.ts", "src/**/*.vue"]
23 | }
24 | 


--------------------------------------------------------------------------------
/src/blocks/quote.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useNotionBlock, defineNotionProps } from "../lib/blockable";
 3 | import NotionTextRenderer from "../blocks/helpers/text-renderer.vue";
 4 | 
 5 | const props = defineProps({ ...defineNotionProps });
 6 | //@ts-ignore
 7 | const { properties, title, pass } = useNotionBlock(props);
 8 | </script>
 9 | 
10 | <script lang="ts">
11 | export default {
12 |   name: "NotionQuote",
13 | };
14 | </script>
15 | 
16 | <template>
17 |   <blockquote v-if="properties" class="notion-quote">
18 |     <NotionTextRenderer :text="title" v-bind="pass" />
19 |   </blockquote>
20 | </template>
21 | 


--------------------------------------------------------------------------------
/src/blocks/toggle.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useNotionBlock, defineNotionProps } from "../lib/blockable";
 3 | import NotionTextRenderer from "../blocks/helpers/text-renderer.vue";
 4 | 
 5 | const props = defineProps({ ...defineNotionProps });
 6 | //@ts-ignore
 7 | const { title, pass } = useNotionBlock(props);
 8 | </script>
 9 | 
10 | <script lang="ts">
11 | export default {
12 |   name: "NotionToggle",
13 | };
14 | </script>
15 | 
16 | <template>
17 |   <details class="notion-toggle">
18 |     <summary><NotionTextRenderer :text="title" v-bind="pass" /></summary>
19 |     <div><slot /></div>
20 |   </details>
21 | </template>
22 | 


--------------------------------------------------------------------------------
/src/lib/api.ts:
--------------------------------------------------------------------------------
 1 | import { BlockMap } from "../lib/types";
 2 | 
 3 | const getPageTable = async (pageId: string, apiUrl = "https://api.vue-notion.workers.dev/v1"): Promise<BlockMap> =>
 4 |   await fetch(`${apiUrl}/table/${pageId}`)
 5 |     .then((res) => res.json())
 6 |     .then((data) => data as BlockMap)
 7 |     .catch((err) => err);
 8 | 
 9 | const getPageBlocks = async (pageId: string, apiUrl = "https://api.vue-notion.workers.dev/v1"): Promise<BlockMap> =>
10 |   await fetch(`${apiUrl}/page/${pageId}`)
11 |     .then((res) => res.json())
12 |     .then((data) => data as BlockMap)
13 |     .catch((err) => err);
14 | 
15 | export { getPageTable, getPageBlocks };
16 | 


--------------------------------------------------------------------------------
/src/blocks/helpers/text-renderer.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useNotionBlock, defineNotionProps } from "../../lib/blockable";
 3 | import NotionDecorator from "../../blocks/decorator.vue";
 4 | import { PropType } from "vue";
 5 | 
 6 | const props = defineProps({ text: Object as PropType<string[]>, ...defineNotionProps });
 7 | //@ts-ignore
 8 | const { pass, format } = useNotionBlock(props);
 9 | </script>
10 | 
11 | <script lang="ts">
12 | export default {
13 |   name: "NotionTextRenderer",
14 | };
15 | </script>
16 | 
17 | <template>
18 |   <span>
19 |     <NotionDecorator v-for="(t, i) in text" :key="i" :content="t" v-bind="pass" />
20 |   </span>
21 | </template>
22 | 


--------------------------------------------------------------------------------
/src/blocks/helpers/table-of-contents-item.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { PropType, computed } from "vue";
 3 | 
 4 | const props = defineProps({ text: Object as PropType<string[]>, level: { type: Number, default: 0 } });
 5 | const computedText = computed(() => (props.text ? props.text.map((i) => i[0]).join("") : ""));
 6 | const computedStyle = computed(() => ({
 7 |   paddingLeft: 1.5 * props.level + "rem",
 8 | }));
 9 | </script>
10 | 
11 | <script lang="ts">
12 | export default {
13 |   name: "NotionTableOfContentItem",
14 | };
15 | </script>
16 | 
17 | <template>
18 |   <span class="notion-table-of-contents-item" :style="computedStyle">{{ computedText }}</span>
19 | </template>
20 | 


--------------------------------------------------------------------------------
/src/blocks/text.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useNotionBlock, defineNotionProps } from "../lib/blockable";
 3 | import NotionTextRenderer from "../blocks/helpers/text-renderer.vue";
 4 | 
 5 | const props = defineProps({ ...defineNotionProps });
 6 | //@ts-ignore
 7 | const { properties, title, pass, blockColorClass } = useNotionBlock(props);
 8 | </script>
 9 | 
10 | <script lang="ts">
11 | export default {
12 |   name: "NotionText",
13 | };
14 | </script>
15 | <template>
16 |   <p v-if="properties" :class="['notion-text', blockColorClass()]">
17 |     <NotionTextRenderer :text="title" v-bind="pass" />
18 |   </p>
19 |   <div v-else class="notion-blank">&nbsp;</div>
20 | </template>
21 | 


--------------------------------------------------------------------------------
/src/blocks/helpers/tweet.ts:
--------------------------------------------------------------------------------
 1 | import { reactive, onBeforeMount } from "vue"
 2 | 
 3 | const store = reactive({
 4 |   callbacks: [] as any[],
 5 | })
 6 | 
 7 | export const useTwttr = (cb: () => any) => {
 8 |   onBeforeMount(() => {
 9 |     let twttrScript = document.getElementById("twitter-widgets-js")
10 |     if (!twttrScript) {
11 |       store.callbacks.push(cb)
12 |       var s = document.createElement("script")
13 |       s.id = "twitter-widgets-js"
14 |       s.src = "https://platform.twitter.com/widgets.js"
15 |       s.onload = () => store.callbacks.forEach((cb) => cb())
16 |       document.body.appendChild(s)
17 |     } else {
18 |       store.callbacks.push(cb)
19 |     }
20 |   })
21 | }
22 | 


--------------------------------------------------------------------------------
/src/blocks/helpers/nested-list.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useNotionBlock, defineNotionProps } from "../../lib/blockable";
 3 | import { getListNumber } from "../../lib/utils";
 4 | import { computed } from "vue";
 5 | 
 6 | const props = defineProps({ ...defineNotionProps });
 7 | //@ts-ignore
 8 | const { block, type } = useNotionBlock(props);
 9 | </script>
10 | 
11 | <script lang="ts">
12 | export default {
13 |   name: "NotionNestedList",
14 | };
15 | </script>
16 | 
17 | <template>
18 |   <ul v-if="type === 'bulleted_list'" class="notion-list notion-list-disc">
19 |     <slot />
20 |   </ul>
21 |   <ol v-else class="notion-list notion-list-numbered">
22 |     <slot />
23 |   </ol>
24 | </template>
25 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Is your feature request related to a problem? Please describe.**
11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12 | 
13 | **Describe the solution you'd like**
14 | A clear and concise description of what you want to happen.
15 | 
16 | **Describe alternatives you've considered**
17 | A clear and concise description of any alternative solutions or features you've considered.
18 | 
19 | **Additional context**
20 | Add any other context or screenshots about the feature request here.
21 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "vite";
 2 | import path from "path";
 3 | import vue from "@vitejs/plugin-vue";
 4 | import dts from "vite-plugin-dts";
 5 | 
 6 | // https://vitejs.dev/config/
 7 | export default defineConfig({
 8 |   plugins: [
 9 |     vue(),
10 |     dts({
11 |       insertTypesEntry: true,
12 |     }),
13 |   ],
14 |   build: {
15 |     target: "esnext",
16 |     lib: {
17 |       entry: path.resolve(__dirname, "src/index.ts"),
18 |       name: "vue3-notion",
19 |     },
20 |     rollupOptions: {
21 |       external: ["vue"],
22 |       output: {
23 |         globals: {
24 |           vue: "Vue",
25 |         },
26 |         exports: "named",
27 |       },
28 |     },
29 |   },
30 | });
31 | 


--------------------------------------------------------------------------------
/src/lib/composables.ts:
--------------------------------------------------------------------------------
 1 | import { onMounted, ref } from "vue"
 2 | import { getPageBlocks, getPageTable } from "./api"
 3 | import { BlockMap } from "./types"
 4 | 
 5 | const useGetPageBlocks = (...arg: Parameters<typeof getPageBlocks>) => {
 6 |   const data = ref<BlockMap>()
 7 | 
 8 |   onMounted(async () => {
 9 |     data.value = await getPageBlocks(...arg)
10 |   })
11 | 
12 |   return {
13 |     data,
14 |   }
15 | }
16 | 
17 | const useGetPageTable = (...arg: Parameters<typeof getPageTable>) => {
18 |   const data = ref<BlockMap>()
19 | 
20 |   onMounted(async () => {
21 |     data.value = await getPageTable(...arg)
22 |   })
23 | 
24 |   return {
25 |     data,
26 |   }
27 | }
28 | 
29 | export { useGetPageBlocks, useGetPageTable }
30 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | import { App } from "vue";
 2 | import * as components from "./components";
 3 | import "./style.css";
 4 | 
 5 | // Default export is library as a whole, registered via Vue.use()
 6 | export default {
 7 |   install: (app: App) => {
 8 |     Object.entries(components).forEach(([componentName, component]) => {
 9 |       app.component(componentName, component);
10 |     });
11 |   },
12 | };
13 | 
14 | // To allow individual component use, export components
15 | // each can be registered via Vue.component()
16 | export * from "./components";
17 | 
18 | // export additional js methods
19 | export * from "./lib/api";
20 | 
21 | // export types
22 | export * from "./lib/types";
23 | 
24 | // export composables
25 | export * from "./lib/composables";
26 | 


--------------------------------------------------------------------------------
/playground/view/Page.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { NotionRenderer } from "@/components";
 3 | import { getPageBlocks } from "@/lib/api";
 4 | import { onMounted, ref } from "vue";
 5 | import { useRoute } from "vue-router";
 6 | import { mapPageUrl, pageLinkOptions } from "@/lib/props";
 7 | 
 8 | const route = useRoute();
 9 | const blockMap = ref();
10 | onMounted(async () => {
11 |   blockMap.value = await getPageBlocks(route.params.id as string);
12 | });
13 | </script>
14 | 
15 | <template>
16 |   <div v-if="blockMap">
17 |     <NotionRenderer
18 |       :blockMap="blockMap"
19 |       fullPage
20 |       prism
21 |       katex
22 |       :mapPageUrl="mapPageUrl"
23 |       :pageLinkOptions="pageLinkOptions"
24 |     />
25 |   </div>
26 | </template>
27 | 


--------------------------------------------------------------------------------
/src/components/notion-renderer.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { defineNotionProps, useNotionBlock } from "../lib/blockable";
 3 | import NotionBlock from "../components/block.vue";
 4 | 
 5 | const props = defineProps({ ...defineNotionProps });
 6 | //@ts-ignore
 7 | const { pass, block } = useNotionBlock(props);
 8 | </script>
 9 | 
10 | <script lang="ts">
11 | export default {
12 |   name: "NotionRenderer",
13 | };
14 | </script>
15 | 
16 | <template>
17 |   <NotionBlock v-bind="pass" v-if="block">
18 |     <NotionRenderer
19 |       v-for="(contentId, contentIndex) in block.value.content"
20 |       v-bind="pass"
21 |       :key="contentId"
22 |       :level="pass.level + 1"
23 |       :content-id="contentId"
24 |       :content-index="contentIndex"
25 |     />
26 |   </NotionBlock>
27 | </template>
28 | 


--------------------------------------------------------------------------------
/src/blocks/equation.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useNotionBlock, defineNotionProps } from "../lib/blockable";
 3 | import NotionCode from "./code.vue";
 4 | import NotionKatek from "../blocks/helpers/katex.vue";
 5 | import { computed } from "vue";
 6 | 
 7 | const props = defineProps({ ...defineNotionProps });
 8 | //@ts-ignore
 9 | const { properties, pass } = useNotionBlock(props);
10 | 
11 | const equation = computed(() => properties.value.title?.[0]?.[0]);
12 | </script>
13 | 
14 | <script lang="ts">
15 | export default {
16 |   name: "NotionEquation",
17 | };
18 | </script>
19 | 
20 | <template>
21 |   <div v-if="props.katex">
22 |     <NotionKatek :expression="equation" />
23 |   </div>
24 |   <NotionCode v-else v-bind="pass" overrideLang="latex" overrideLangClass="language-latex" />
25 | </template>
26 | 


--------------------------------------------------------------------------------
/nuxt/index.ts:
--------------------------------------------------------------------------------
 1 | import { defineNuxtModule, addPlugin, createResolver } from "@nuxt/kit";
 2 | 
 3 | export default defineNuxtModule({
 4 |   meta: {
 5 |     name: "vue3-notion",
 6 |     configKey: "notion",
 7 |     compatibility: {
 8 |       nuxt: "^3.0.0-rc.8",
 9 |     },
10 |   },
11 |   setup(options, nuxt) {
12 |     const { resolve } = createResolver(import.meta.url);
13 |     addPlugin(resolve("./plugin"));
14 | 
15 |     const notionDeps = ["katex", "prismjs"];
16 | 
17 |     notionDeps.forEach((dep) => {
18 |       nuxt.options.build.transpile.push(dep);
19 |     });
20 | 
21 |     if (options.css) {
22 |       nuxt.options.css.push("vue3-notion/dist/style.css");
23 |       nuxt.options.css.push("prismjs/themes/prism.css");
24 |       nuxt.options.css.push("katex/dist/katex.min.css");
25 |     }
26 |   },
27 | });
28 | 


--------------------------------------------------------------------------------
/src/blocks/sync-pointer-block.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { computed } from "vue";
 3 | import { useNotionBlock, defineNotionProps } from "../lib/blockable";
 4 | import NotionRenderer from "../components/notion-renderer.vue";
 5 | 
 6 | const props = defineProps({ ...defineNotionProps });
 7 | //@ts-ignore
 8 | const { block, pass } = useNotionBlock(props);
 9 | 
10 | const referencePointerId = computed(
11 |   () => (block.value.value.format?.transclusion_reference_pointer?.id as string) ?? ""
12 | );
13 | </script>
14 | 
15 | <template>
16 |   <NotionRenderer
17 |     v-bind="pass"
18 |     :key="referencePointerId"
19 |     :level="pass.level + 1"
20 |     :content-id="referencePointerId"
21 |   ></NotionRenderer>
22 | </template>
23 | 
24 | <script lang="ts">
25 | export default {
26 |   name: "NotionSyncPointerBlock",
27 | };
28 | </script>
29 | 


--------------------------------------------------------------------------------
/src/blocks/column.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { computed } from "vue";
 3 | 
 4 | const baseWidth = 46; // todo: add magic numbers to a config json
 5 | 
 6 | const props = defineProps({
 7 |   format: { type: Object, required: true },
 8 | });
 9 | 
10 | const columnStyle = computed(() => {
11 |   const columns = Number((1 / props.format.column_ratio).toFixed(0));
12 |   const totalWidth = (columns - 1) * baseWidth;
13 |   return {
14 |     width: `calc((100% - ${totalWidth}px) * ${props.format.column_ratio})`,
15 |   };
16 | });
17 | 
18 | const spacerStyle = computed(() => ({ width: `${baseWidth}px` }));
19 | </script>
20 | 
21 | <script lang="ts">
22 | export default {
23 |   name: "NotionColumn",
24 | };
25 | </script>
26 | 
27 | <template>
28 |   <div class="notion-column" :style="columnStyle">
29 |     <slot />
30 |   </div>
31 |   <div class="notion-spacer" :style="spacerStyle" />
32 | </template>
33 | 


--------------------------------------------------------------------------------
/src/blocks/todo.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useNotionBlock, defineNotionProps } from "../lib/blockable";
 3 | import NotionTextRenderer from "../blocks/helpers/text-renderer.vue";
 4 | import { computed } from "vue";
 5 | 
 6 | const props = defineProps({ ...defineNotionProps });
 7 | //@ts-ignore
 8 | const { title, properties, pass } = useNotionBlock(props);
 9 | const checked = computed(() => properties.value?.checked?.[0] == "Yes");
10 | </script>
11 | 
12 | <script lang="ts">
13 | export default {
14 |   name: "NotionTodo",
15 | };
16 | </script>
17 | 
18 | <template>
19 |   <label class="notion-to-do-item">
20 |     <input type="checkbox" class="notion-property-checkbox" :value="checked" :checked="checked" disabled="true" />
21 |     <label :class="{ 'notion-to-do-checked': checked }">
22 |       <NotionTextRenderer :text="title" v-bind="pass" />
23 |     </label>
24 |   </label>
25 | </template>
26 | 


--------------------------------------------------------------------------------
/src/blocks/helpers/header-renderer.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useNotionBlock, defineNotionProps } from "../../lib/blockable";
 3 | import NotionTextRenderer from "../../blocks/helpers/text-renderer.vue";
 4 | 
 5 | const props = defineProps({ ...defineNotionProps });
 6 | //@ts-ignore
 7 | const { type, title, pass, block } = useNotionBlock(props);
 8 | </script>
 9 | 
10 | <script lang="ts">
11 | export default {
12 |   name: "NotionHeaderRenderer",
13 | };
14 | </script>
15 | 
16 | <template>
17 |   <h1 class="notion-h1" :id="block.value.id" v-if="type === 'header'">
18 |     <NotionTextRenderer :text="title" v-bind="pass" />
19 |   </h1>
20 |   <h2 class="notion-h2" :id="block.value.id" v-else-if="type === 'sub_header'">
21 |     <NotionTextRenderer :text="title" v-bind="pass" />
22 |   </h2>
23 |   <h3 class="notion-h3" :id="block.value.id" v-else-if="type === 'sub_sub_header'">
24 |     <NotionTextRenderer :text="title" v-bind="pass" />
25 |   </h3>
26 | </template>
27 | 


--------------------------------------------------------------------------------
/demo/vue/README.md:
--------------------------------------------------------------------------------
 1 | # Vue 3 + Typescript + Vite
 2 | 
 3 | This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
 4 | 
 5 | ## Recommended IDE Setup
 6 | 
 7 | - [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
 8 | 
 9 | ## Type Support For `.vue` Imports in TS
10 | 
11 | Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's `.vue` type support plugin by running `Volar: Switch TS Plugin on/off` from VSCode command palette.
12 | 


--------------------------------------------------------------------------------
/playground/view/Index.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { NotionRenderer } from "@/components";
 3 | import { useGetPageBlocks } from "@/lib/composables";
 4 | import { mapPageUrl, pageLinkOptions } from "@/lib/props";
 5 | 
 6 | // const blockMap = ref()
 7 | 
 8 | // onMounted(async () => {
 9 | //   // react-notion tester: 2e22de6b770e4166be301490f6ffd420
10 | //   // equation tester: 2a1d5226d68246deba627012081693f9
11 | //   // table tester: bd1de400a8b349dc824f4f00e61d0797
12 | //   // todo tester: 235057194b954a60ace89c052a65d102
13 | //   blockMap.value = await getPageBlocks("4b2dc28a5df74034a943f8c8e639066a")
14 | // })
15 | 
16 | const { data: blockMap } = useGetPageBlocks("4b2dc28a5df74034a943f8c8e639066a");
17 | </script>
18 | 
19 | <template>
20 |   <div v-if="blockMap">
21 |     <NotionRenderer
22 |       :blockMap="blockMap"
23 |       fullPage
24 |       prism
25 |       katex
26 |       :mapPageUrl="mapPageUrl"
27 |       :pageLinkOptions="pageLinkOptions"
28 |     />
29 |   </div>
30 | </template>
31 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Describe the bug**
11 | A clear and concise description of what the bug is.
12 | 
13 | **To Reproduce**
14 | Steps to reproduce the behavior:
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 | 
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 | 
23 | **Screenshots**
24 | If applicable, add screenshots to help explain your problem.
25 | 
26 | **Desktop (please complete the following information):**
27 |  - OS: [e.g. iOS]
28 |  - Browser [e.g. chrome, safari]
29 |  - Version [e.g. 22]
30 | 
31 | **Smartphone (please complete the following information):**
32 |  - Device: [e.g. iPhone6]
33 |  - OS: [e.g. iOS8.1]
34 |  - Browser [e.g. stock browser, safari]
35 |  - Version [e.g. 22]
36 | 
37 | **Additional context**
38 | Add any other context about the problem here.
39 | 


--------------------------------------------------------------------------------
/src/blocks/helpers/prism.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import Prism from "prismjs"
 3 | import { computed, toRefs, useSlots } from "vue"
 4 | 
 5 | const slots = useSlots()
 6 | const props = defineProps({
 7 |   code: {
 8 |     type: String,
 9 |   },
10 |   inline: {
11 |     type: Boolean,
12 |     default: false,
13 |   },
14 |   language: {
15 |     type: String,
16 |     default: "markup",
17 |   },
18 | })
19 | 
20 | const { inline, language } = toRefs(props)
21 | const className = computed(() => `language-${language.value}`)
22 | 
23 | const defaultSlot = (slots && slots.default && slots.default()) || []
24 | const code =
25 |   props.code || (defaultSlot && defaultSlot.length && defaultSlot[0]?.children)
26 |     ? (defaultSlot[0].children as string)
27 |     : ""
28 | const d = computed(() => Prism?.highlight(code, Prism?.languages[language.value], "en"))
29 | </script>
30 | 
31 | <template>
32 |   <div :class="className" v-if="inline" v-html="d"></div>
33 |   <pre :class="className" v-else><div v-html="d"></div></pre>
34 | </template>
35 | 


--------------------------------------------------------------------------------
/src/blocks/helpers/page-icon.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useNotionBlock, defineNotionProps } from "../../lib/blockable";
 3 | import { getTextContent } from "../../lib/utils";
 4 | import DefaultPageIcon from "./default-page-icon.vue";
 5 | 
 6 | const props = defineProps({ big: Boolean, ...defineNotionProps });
 7 | //@ts-ignore
 8 | const { icon, format, block, title } = useNotionBlock(props);
 9 | </script>
10 | 
11 | <script lang="ts">
12 | export default {
13 |   name: "NotionPageIcon",
14 | };
15 | </script>
16 | 
17 | <template>
18 |   <div :class="[format?.page_cover && 'notion-page-icon-offset', big ? 'notion-page-icon-cover' : 'notion-page-icon']">
19 |     <img
20 |       v-if="icon?.includes('http')"
21 |       :src="props.mapImageUrl(icon, block)"
22 |       :alt="title ? getTextContent(title) : 'Icon'"
23 |       class="notion-page-icon"
24 |     />
25 |     <span v-else-if="icon" role="img" :aria-label="icon" class="notion-page-icon">
26 |       {{ icon }}
27 |     </span>
28 |     <DefaultPageIcon class="notion-page-icon" v-else-if="!big"></DefaultPageIcon>
29 |   </div>
30 | </template>
31 | 


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


--------------------------------------------------------------------------------
/src/blocks/header.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useNotionBlock, defineNotionProps } from "../lib/blockable";
 3 | import NotionHeaderRenderer from "../blocks/helpers/header-renderer.vue";
 4 | import NotionRenderer from "../components/notion-renderer.vue";
 5 | 
 6 | const props = defineProps({ ...defineNotionProps });
 7 | //@ts-ignore
 8 | const { type, title, pass, block, format } = useNotionBlock(props);
 9 | </script>
10 | 
11 | <script lang="ts">
12 | export default {
13 |   name: "NotionHeader",
14 | };
15 | </script>
16 | 
17 | <template>
18 |   <details v-if="format?.toggleable" class="notion-toggle">
19 |     <summary><NotionHeaderRenderer class="notion-h" v-bind="pass"></NotionHeaderRenderer></summary>
20 |     <div>
21 |       <NotionRenderer
22 |         v-for="(contentId, contentIndex) in block.value.content"
23 |         v-bind="pass"
24 |         :key="contentId"
25 |         :level="pass.level + 1"
26 |         :content-id="contentId"
27 |         :content-index="contentIndex"
28 |       ></NotionRenderer>
29 |     </div>
30 |   </details>
31 |   <NotionHeaderRenderer v-else v-bind="pass"></NotionHeaderRenderer>
32 | </template>
33 | 


--------------------------------------------------------------------------------
/src/blocks/helpers/figure.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useNotionBlock, defineNotionProps } from "../../lib/blockable";
 3 | import NotionAsset from "../../blocks/helpers/asset.vue";
 4 | import NotionImage from "../../blocks/helpers/image.vue";
 5 | import NotionGoogleDrive from "../../blocks/helpers/google-drive.vue";
 6 | import NotionTextRenderer from "../../blocks/helpers/text-renderer.vue";
 7 | 
 8 | const props = defineProps({ ...defineNotionProps });
 9 | //@ts-ignore
10 | const { pass, width, caption, isType } = useNotionBlock(props);
11 | </script>
12 | 
13 | <script lang="ts">
14 | export default {
15 |   name: "NotionFigure",
16 | };
17 | </script>
18 | <template>
19 |   <figure class="notion-asset-wrapper" :style="[isType('image') ? 'width:100%' : '']">
20 |     <NotionImage v-if="isType('image')" v-bind="pass" />
21 |     <NotionAsset v-else-if="isType(['embed', 'video', 'figma', 'maps'])" v-bind="pass" />
22 |     <NotionGoogleDrive v-else-if="isType('drive')" v-bind="pass" />
23 |     <figcaption v-if="caption" class="notion-image-caption">
24 |       <NotionTextRenderer :text="caption" v-bind="pass" />
25 |     </figcaption>
26 |   </figure>
27 | </template>
28 | 


--------------------------------------------------------------------------------
/demo/vue/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ref } from 'vue'
 3 | 
 4 | defineProps<{ msg: string }>()
 5 | 
 6 | const count = ref(0)
 7 | </script>
 8 | 
 9 | <template>
10 |   <h1>{{ msg }}</h1>
11 | 
12 |   <p>
13 |     Recommended IDE setup:
14 |     <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
15 |     +
16 |     <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
17 |   </p>
18 | 
19 |   <p>See <code>README.md</code> for more information.</p>
20 | 
21 |   <p>
22 |     <a href="https://vitejs.dev/guide/features.html" target="_blank">
23 |       Vite Docs
24 |     </a>
25 |     |
26 |     <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
27 |   </p>
28 | 
29 |   <button type="button" @click="count++">count is: {{ count }}</button>
30 |   <p>
31 |     Edit
32 |     <code>components/HelloWorld.vue</code> to test hot module replacement.
33 |   </p>
34 | </template>
35 | 
36 | <style scoped>
37 | a {
38 |   color: #42b983;
39 | }
40 | 
41 | label {
42 |   margin: 0 0.5em;
43 |   font-weight: bold;
44 | }
45 | 
46 | code {
47 |   background-color: #eee;
48 |   padding: 2px 4px;
49 |   border-radius: 4px;
50 |   color: #304455;
51 | }
52 | </style>
53 | 


--------------------------------------------------------------------------------
/src/blocks/callout.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useNotionBlock, defineNotionProps } from "../lib/blockable";
 3 | import NotionPageIcon from "../blocks/helpers/page-icon.vue";
 4 | import NotionTextRenderer from "../blocks/helpers/text-renderer.vue";
 5 | import NotionRenderer from "../components/notion-renderer.vue";
 6 | 
 7 | const props = defineProps({ ...defineNotionProps });
 8 | //@ts-ignore
 9 | const { pass, title, blockColorClass, block } = useNotionBlock(props);
10 | </script>
11 | 
12 | <script lang="ts">
13 | export default {
14 |   name: "NotionCallout",
15 | };
16 | </script>
17 | 
18 | <template>
19 |   <div :class="['notion-callout', blockColorClass()]">
20 |     <div style="font-size: 12px">
21 |       <NotionPageIcon v-bind="pass" />
22 |     </div>
23 |     <div class="notion-callout-text">
24 |       <NotionRenderer
25 |         v-if="block.value.content"
26 |         v-for="(contentId, contentIndex) in block.value.content"
27 |         v-bind="pass"
28 |         :key="contentId"
29 |         :level="pass.level + 1"
30 |         :content-id="contentId"
31 |         :content-index="contentIndex"
32 |       />
33 |       <NotionTextRenderer v-else :text="title" v-bind="pass" />
34 |     </div>
35 |   </div>
36 | </template>
37 | 


--------------------------------------------------------------------------------
/src/blocks/tweet.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useNotionBlock, defineNotionProps } from "../lib/blockable";
 3 | import { computed, onBeforeMount, getCurrentInstance, ref, onMounted } from "vue";
 4 | import { useTwttr } from "./helpers/tweet";
 5 | 
 6 | const props = defineProps({ ...defineNotionProps });
 7 | //@ts-ignore
 8 | const { properties } = useNotionBlock(props);
 9 | 
10 | const tweetId = computed(() => properties.value?.source?.[0]?.[0].split("status/")?.[1].split("?")[0]);
11 | const el = ref<HTMLElement>();
12 | const error = ref();
13 | 
14 | const renderTweet = () => {
15 |   //@ts-ignore
16 |   const twttr = window["twttr"];
17 |   //@ts-ignore
18 |   twttr?.ready().then(({ widgets }) => {
19 |     widgets
20 |       .createTweetEmbed(tweetId.value, el.value, {})
21 |       .then((element: any) => {
22 |         error.value = element ? undefined : "error";
23 |       })
24 |       .catch((err: any) => {
25 |         error.value = err;
26 |       });
27 |   });
28 | };
29 | useTwttr(renderTweet);
30 | onMounted(() => {
31 |   renderTweet();
32 | });
33 | </script>
34 | 
35 | <script lang="ts">
36 | export default {
37 |   name: "NotionTweet",
38 | };
39 | </script>
40 | 
41 | <template>
42 |   <div v-if="!error" class="notion-tweet" ref="el"></div>
43 |   <div v-else class="notion-tweet-error">Error loading Tweet</div>
44 | </template>
45 | 


--------------------------------------------------------------------------------
/src/blocks/helpers/prism.ts:
--------------------------------------------------------------------------------
 1 | import * as Vue from "vue"
 2 | import Prism from "prismjs"
 3 | import { Slots, VNode } from "vue"
 4 | 
 5 | declare type Data = Record<string, unknown>
 6 | 
 7 | export default Vue.defineComponent({
 8 |   props: {
 9 |     code: {
10 |       type: String,
11 |     },
12 |     inline: {
13 |       type: Boolean,
14 |       default: false,
15 |     },
16 |     language: {
17 |       type: String,
18 |       default: "markup",
19 |     },
20 |   },
21 |   setup(props, { slots, attrs }: { slots: Slots; attrs: Data }) {
22 |     const { h } = Vue
23 |     const slotsData = (slots && slots.default && slots.default()) || []
24 |     const code = props.code || (slotsData.length > 0 ? slotsData[0].children : "")
25 |     const { inline, language } = props
26 |     const prismLanguage = Prism.languages[language]
27 |     const className = `language-${language}`
28 | 
29 |     if (inline) {
30 |       return (): VNode =>
31 |         //@ts-ignore
32 |         h("code", { ...attrs, class: [attrs.class, className], innerHTML: Prism.highlight(code, prismLanguage) })
33 |     }
34 | 
35 |     //@ts-ignore
36 |     const d = Prism.highlight(code, prismLanguage)
37 |     return (): VNode =>
38 |       h("pre", { ...attrs, class: [attrs.class] }, [
39 |         h("code", {
40 |           class: className,
41 |           innerHTML: d,
42 |         }),
43 |       ])
44 |   },
45 | })
46 | 


--------------------------------------------------------------------------------
/src/blocks/table-row.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useNotionBlock, defineNotionProps } from "../lib/blockable";
 3 | import NotionTextRenderer from "../blocks/helpers/text-renderer.vue";
 4 | import { computed, toRefs } from "vue";
 5 | 
 6 | const props = defineProps({ ...defineNotionProps });
 7 | //@ts-ignore
 8 | const { parent, properties, pass } = useNotionBlock(props);
 9 | 
10 | const {
11 |   table_block_column_header: hasHeaderColumn,
12 |   table_block_row_header: hasHeaderRow,
13 |   table_block_column_order: columns,
14 | } = parent.value.value.format;
15 | 
16 | const cell = (columnId: string) => {
17 |   return properties.value[columnId];
18 | };
19 | const isHeader = (columnIndex: number) => {
20 |   return (hasHeaderColumn && props.contentIndex == 0) || (hasHeaderRow && columnIndex == 0);
21 | };
22 | </script>
23 | 
24 | <script lang="ts">
25 | export default {
26 |   name: "NotionTableRow",
27 | };
28 | </script>
29 | 
30 | <template>
31 |   <tr class="notion-simple-table-row">
32 |     <td v-for="(columnId, columnIndex) in columns" :key="columnIndex" class="notion-simple-table-data">
33 |       <div :class="{ 'notion-simple-table-header': isHeader(columnIndex) }">
34 |         <div class="notion-simple-table-cell-text">
35 |           <NotionTextRenderer :text="cell(columnId)" v-bind="pass" />
36 |         </div>
37 |       </div>
38 |     </td>
39 |   </tr>
40 | </template>
41 | 


--------------------------------------------------------------------------------
/src/blocks/helpers/asset.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { defineNotionProps, useNotionBlock } from "../../lib/blockable";
 3 | import { computed, StyleValue } from "vue";
 4 | 
 5 | const props = defineProps({ ...defineNotionProps });
 6 | //@ts-ignore
 7 | const { properties, f, format } = useNotionBlock(props);
 8 | 
 9 | const src = computed(() => {
10 |   return f.value.display_source ?? properties.value?.source?.[0];
11 | });
12 | 
13 | const aspectRatioStyle = computed(() => {
14 |   let aspectRatio =
15 |     f.value.block_width == 1 || f.value.block_height == 1
16 |       ? 1 / f.value.block_aspect_ratio
17 |       : `${f.value.block_width} / ${f.value.block_height} `;
18 | 
19 |   return {
20 |     width: format.value.block_full_width
21 |       ? "calc(100vw - 46px)"
22 |       : format.value.block_page_width
23 |       ? "100%"
24 |       : `${f.value.block_width}px`,
25 |     height: f.value.block_height == 1 ? `auto` : `${f.value.block_height}px`,
26 |     maxWidth: "100%",
27 |     position: "relative",
28 |     aspectRatio: f.value.block_height == 1 ? aspectRatio : undefined,
29 |   } as StyleValue;
30 | });
31 | </script>
32 | 
33 | <script lang="ts">
34 | export default {
35 |   name: "NotionAsset",
36 | };
37 | </script>
38 | 
39 | <template>
40 |   <div :style="aspectRatioStyle" v-if="src">
41 |     <iframe class="notion-asset-object-fit" :src="src" :allow="props.embedAllow" />
42 |   </div>
43 | </template>
44 | 


--------------------------------------------------------------------------------
/src/blocks/helpers/image.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useNotionBlock, defineNotionProps } from "../../lib/blockable";
 3 | import { computed, StyleValue } from "vue";
 4 | 
 5 | const props = defineProps({ ...defineNotionProps });
 6 | //@ts-ignore
 7 | const { caption, properties, block, f } = useNotionBlock(props);
 8 | const alt = computed(() => {
 9 |   return caption?.value?.[0][0];
10 | });
11 | 
12 | const src = computed(() => {
13 |   return props.mapImageUrl(properties.value?.source[0][0], block.value);
14 | });
15 | 
16 | const aspectRatioStyle = computed(() => {
17 |   let aspectRatio =
18 |     f.value.block_width == 1 || f.value.block_height == 1
19 |       ? 1 / f.value.block_aspect_ratio
20 |       : `${f.value.block_width} / ${f.value.block_height} `;
21 | 
22 |   return {
23 |     width: `${f.value.block_width}px`,
24 |     height: `100%`,
25 |     maxWidth: "100%",
26 |     position: "relative",
27 |     aspectRatio,
28 |   } as StyleValue;
29 | });
30 | 
31 | const basicStyle = computed(() => {
32 |   return {
33 |     width: f.value.block_width == 1 ? "100%" : `${f.value.block_width}px`,
34 |     height: f.value.block_height == 1 ? "100%" : `${f.value.block_height}px`,
35 |   };
36 | });
37 | </script>
38 | 
39 | <script lang="ts">
40 | export default {
41 |   name: "NotionImage",
42 | };
43 | </script>
44 | 
45 | <template>
46 |   <div v-if="f.block_aspect_ratio" :style="aspectRatioStyle">
47 |     <img class="notion-image-inset" :alt="alt || 'Notion image'" :src="src" />
48 |   </div>
49 |   <img v-else :alt="alt" :src="src" :style="basicStyle" />
50 | </template>
51 | 


--------------------------------------------------------------------------------
/src/blocks/bookmark.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useNotionBlock, defineNotionProps } from "../lib/blockable";
 3 | import { getTextContent } from "../lib/utils";
 4 | import NotionTextRenderer from "../blocks/helpers/text-renderer.vue";
 5 | 
 6 | const props = defineProps({ ...defineNotionProps });
 7 | //@ts-ignore
 8 | const { f, properties, title, description, pass } = useNotionBlock(props);
 9 | </script>
10 | 
11 | <script lang="ts">
12 | export default {
13 |   name: "NotionBookmark",
14 | };
15 | </script>
16 | 
17 | <template>
18 |   <div class="notion-row">
19 |     <a
20 |       target="_blank"
21 |       rel="noopener noreferrer"
22 |       :class="['notion-bookmark', f.block_color && `notion-${f.block_color}`]"
23 |       :href="properties.link[0][0]"
24 |     >
25 |       <div>
26 |         <div class="notion-bookmark-title">
27 |           <NotionTextRenderer :text="title || properties.link" v-bind="pass" />
28 |         </div>
29 |         <div v-if="description" class="notion-bookmark-description">
30 |           <NotionTextRenderer :text="description" v-bind="pass" />
31 |         </div>
32 |         <div class="notion-bookmark-link">
33 |           <img v-if="f.bookmark_icon" :alt="getTextContent(title || properties.link)" :src="f.bookmark_icon" />
34 |           <div>
35 |             <NotionTextRenderer :text="properties.link" v-bind="pass" />
36 |           </div>
37 |         </div>
38 |       </div>
39 |       <div v-if="f.bookmark_cover" class="notion-bookmark-image">
40 |         <img :alt="getTextContent(title || properties.link)" :src="f.bookmark_cover" />
41 |       </div>
42 |     </a>
43 |   </div>
44 | </template>
45 | 


--------------------------------------------------------------------------------
/src/blocks/list.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useNotionBlock, defineNotionProps } from "../lib/blockable";
 3 | import NotionNestedList from "../blocks/helpers/nested-list.vue";
 4 | import NotionTextRenderer from "../blocks/helpers/text-renderer.vue";
 5 | import { getListNumber } from "../lib/utils";
 6 | import { computed } from "vue";
 7 | 
 8 | const props = defineProps({ ...defineNotionProps });
 9 | //@ts-ignore
10 | const { block, type, title, pass } = useNotionBlock(props);
11 | 
12 | const start = computed(() => {
13 |   return props.blockMap
14 |     ? block.value?.value?.format?.list_start_index || getListNumber(block.value.value.id, props.blockMap)
15 |     : 0;
16 | });
17 | const isTopLevel = computed(() => type.value != props.blockMap?.[block.value.value.parent_id].value.type);
18 | </script>
19 | 
20 | <script lang="ts">
21 | export default {
22 |   name: "NotionList",
23 | };
24 | </script>
25 | 
26 | <template>
27 |   <ul v-if="isTopLevel && type === 'bulleted_list'" class="notion-list notion-list-disc">
28 |     <li><NotionTextRenderer :text="title" v-bind="pass" /></li>
29 |     <NotionNestedList v-if="block.value.content" v-bind="pass">
30 |       <slot />
31 |     </NotionNestedList>
32 |   </ul>
33 |   <ol v-else-if="isTopLevel && type === 'numbered_list'" class="notion-list notion-list-numbered" :start="start">
34 |     <li><NotionTextRenderer :text="title" v-bind="pass" /></li>
35 |     <NotionNestedList :class="[level == 1 ? 'notion-list-flat' : '']" v-if="block.value.content" v-bind="pass">
36 |       <slot />
37 |     </NotionNestedList>
38 |   </ol>
39 |   <span v-else>
40 |     <li :class="[level != 1 ? 'notion-list-indent' : '']"><NotionTextRenderer :text="title" v-bind="pass" /></li>
41 |     <NotionNestedList v-if="block.value.content" v-bind="pass">
42 |       <slot />
43 |     </NotionNestedList>
44 |   </span>
45 | </template>
46 | 


--------------------------------------------------------------------------------
/src/lib/types.ts:
--------------------------------------------------------------------------------
 1 | export interface BlockMap {
 2 |   [key: string]: Block
 3 | }
 4 | 
 5 | export interface Block {
 6 |   role: Role
 7 |   value: BlockValue
 8 | }
 9 | 
10 | export interface BlockValue {
11 |   id: string
12 |   version: number
13 |   type: string
14 |   properties: Properties
15 |   content: string[]
16 |   format: Format
17 |   permissions: Permission[]
18 |   created_time: number
19 |   last_edited_time: number
20 |   parent_id: string
21 |   parent_table: string
22 |   alive: boolean
23 |   created_by_table: string
24 |   created_by_id: string
25 |   last_edited_by_table: string
26 |   last_edited_by_id: string
27 |   space_id: string
28 | }
29 | 
30 | export interface Format {
31 |   domain?: string
32 |   original_url?: string
33 |   page_icon?: string
34 |   drive_properties: GoogleDriveProperties
35 |   [key: string]: any
36 | }
37 | 
38 | export interface GoogleDriveProperties {
39 |   file_id: string
40 |   icon: string
41 |   modified_time: number
42 |   thumbnail: string
43 |   title: string
44 |   trashed: boolean
45 |   url: string
46 |   user_name: string
47 |   version: string
48 | }
49 | 
50 | export interface Permission {
51 |   role: Role
52 |   type: string
53 |   added_timestamp: number
54 | }
55 | 
56 | export interface Properties {
57 |   title: string[]
58 |   caption?: string[]
59 |   description?: string[]
60 |   language?: string[]
61 |   [key: string]: any
62 | }
63 | 
64 | export enum Role {
65 |   Reader = "reader",
66 | }
67 | 
68 | export interface PageLinkOptions {
69 |   component: any
70 |   href: string
71 | }
72 | 
73 | export type NotionBlockProps = {
74 |   blockMap: BlockMap
75 |   contentId?: string
76 |   contentIndex: number
77 |   embedAllow: string
78 |   fullPage: boolean
79 |   hideList?: string[]
80 |   level: number
81 |   mapImageUrl: Function
82 |   mapPageUrl: Function
83 |   pageLinkOptions?: PageLinkOptions
84 |   pageLinkTarget: string
85 |   prism: boolean
86 |   katex: boolean
87 |   textLinkTarget: string
88 | }
89 | 


--------------------------------------------------------------------------------
/src/blocks/table-of-contents.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { Block } from "../lib/types";
 3 | import { useNotionBlock, defineNotionProps } from "../lib/blockable";
 4 | import NotionTableOfContentsItem from "../blocks/helpers/table-of-contents-item.vue";
 5 | import { computed } from "vue";
 6 | 
 7 | interface BlockLevel extends Block {
 8 |   level: number;
 9 | }
10 | 
11 | const props = defineProps({ ...defineNotionProps });
12 | //@ts-ignore
13 | const { block, parent, hasPageLinkOptions, pageLinkProps } = useNotionBlock(props);
14 | const headers = ["header", "sub_header", "sub_sub_header"];
15 | const headerObjects = computed(() => {
16 |   if (!props.blockMap) return;
17 |   let temp: BlockLevel[] = [];
18 |   Object.entries(props.blockMap).forEach(([key, value]) => {
19 |     if (headers.includes(value.value.type) && value.value.parent_id == parent.value.value.id) {
20 |       let level = 0;
21 |       if (temp.length) {
22 |         let prevBlock = temp[temp.length - 1];
23 |         if (value.value.type == "header") {
24 |         } else if (value.value.type == "sub_header") {
25 |           level = 1;
26 |         } else if (value.value.type == prevBlock.value.type) {
27 |           level = prevBlock.level;
28 |         } else if (value.value.type != prevBlock.value.type) {
29 |           level = prevBlock.level + 1;
30 |         }
31 |       }
32 |       temp.push({ ...value, level });
33 |     }
34 |   });
35 | 
36 |   return temp;
37 | });
38 | console.log(headerObjects);
39 | </script>
40 | 
41 | <script lang="ts">
42 | export default {
43 |   name: "NotionTableOfContent",
44 | };
45 | </script>
46 | 
47 | <template>
48 |   <div class="notion-table-of-contents">
49 |     <template v-for="header in headerObjects">
50 |       <a class="notion-page-link" :target="props.pageLinkTarget" :href="`#${header.value.id}`">
51 |         <NotionTableOfContentsItem :text="header.value.properties.title" :level="header.level" />
52 |       </a>
53 |     </template>
54 |   </div>
55 | </template>
56 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue3-notion",
 3 |   "version": "0.1.46",
 4 |   "description": "Vue 3 Unofficial Notion Renderer",
 5 |   "homepage": "https://vue3-notion.vercel.app/",
 6 |   "repository": "github:zernonia/vue3-notion",
 7 |   "type": "module",
 8 |   "main": "./dist/vue3-notion.umd.cjs",
 9 |   "module": "./dist/vue3-notion.js",
10 |   "types": "./dist/index.d.ts",
11 |   "exports": {
12 |     ".": {
13 |       "import": "./dist/vue3-notion.js",
14 |       "require": "./dist/vue3-notion.umd.cjs"
15 |     },
16 |     "./nuxt": {
17 |       "require": "./nuxt/index.ts",
18 |       "import": "./nuxt/index.ts"
19 |     },
20 |     "./dist/style.css": {
21 |       "import": "./dist/style.css",
22 |       "require": "./dist/style.css"
23 |     }
24 |   },
25 |   "files": [
26 |     "dist",
27 |     "nuxt"
28 |   ],
29 |   "keywords": [
30 |     "vue",
31 |     "vue3",
32 |     "nuxt",
33 |     "nuxt3",
34 |     "notion"
35 |   ],
36 |   "license": "MIT",
37 |   "scripts": {
38 |     "dev": "vite serve playground",
39 |     "dev:build": "vite build playground",
40 |     "build": "vue-tsc --noEmit && vite build",
41 |     "preview": "vite preview",
42 |     "version": " git add -A src",
43 |     "postversion": "git push && git push --tags",
44 |     "deploy": "npm run build && npm version patch && npm publish"
45 |   },
46 |   "dependencies": {
47 |     "katex": "^0.15.1",
48 |     "prismjs": "^1.25.0",
49 |     "vue": "^3.2.26"
50 |   },
51 |   "devDependencies": {
52 |     "@nuxt/kit": "^3.13.2",
53 |     "@types/katex": "^0.11.1",
54 |     "@types/node": "^20.1.1",
55 |     "@types/prismjs": "^1.16.6",
56 |     "@vitejs/plugin-vue": "^4.2.1",
57 |     "@vueuse/core": "^8.7.5",
58 |     "typescript": "^5.0.4",
59 |     "vite": "^4.3.5",
60 |     "vite-plugin-dts": "^2.3.0",
61 |     "vue-router": "4",
62 |     "vue-tsc": "^2.1.6"
63 |   },
64 |   "peerDependencies": {
65 |     "katex": "^0.15.1",
66 |     "prismjs": "^1.25.0",
67 |     "vue": "^3.2.20"
68 |   },
69 |   "packageManager": "pnpm@9.6.0"
70 | }
71 | 


--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
 1 | import { Block, BlockMap } from "./types"
 2 | 
 3 | // utils from react-notion
 4 | export const getTextContent = (text: string[]) => {
 5 |   return text.reduce((prev, current) => prev + current[0], "")
 6 | }
 7 | 
 8 | const groupBlockContent = (blockMap: BlockMap) => {
 9 |   const output: any[] = []
10 | 
11 |   let lastType: any = undefined
12 |   let index = -1
13 | 
14 |   Object.keys(blockMap).forEach((id) => {
15 |     const blockValue = blockMap[id]?.value
16 |     if (!blockValue?.content) return
17 | 
18 |     blockValue.content.forEach((blockId) => {
19 |       const nestedBlock = blockMap[blockId]?.value
20 |       if (!nestedBlock) return
21 | 
22 |       const blockType = nestedBlock.type
23 | 
24 |       if (blockType && blockType !== lastType) {
25 |         index++
26 |         lastType = blockType
27 |         output[index] = []
28 |       }
29 | 
30 |       output[index].push(blockId)
31 |     })
32 | 
33 |     lastType = undefined
34 |   })
35 | 
36 |   return output
37 | }
38 | 
39 | export const getListNumber = (blockId: string, blockMap: BlockMap) => {
40 |   const groups = groupBlockContent(blockMap)
41 |   const group = groups.find((g) => g.includes(blockId))
42 | 
43 |   if (!group) {
44 |     return
45 |   }
46 | 
47 |   return group.indexOf(blockId) + 1
48 | }
49 | 
50 | export const defaultMapImageUrl = (image = "", block: Block) => {
51 |   const url = new URL(
52 |     `https://www.notion.so${image.startsWith("/image") ? image : `/image/${encodeURIComponent(image)}`}`
53 |   )
54 | 
55 |   if (block && !image.includes("/images/page-cover/")) {
56 |     const table = block.value.parent_table === "space" ? "block" : block.value.parent_table
57 |     url.searchParams.set("table", table)
58 |     url.searchParams.set("id", block.value.id)
59 |     url.searchParams.set("cache", "v2")
60 |   }
61 | 
62 |   return url.toString()
63 | }
64 | 
65 | export const defaultMapPageUrl = (pageId = "") => {
66 |   pageId = pageId.replace(/-/g, "")
67 | 
68 |   return `/${pageId}`
69 | }
70 | 


--------------------------------------------------------------------------------
/src/blocks/helpers/google-drive.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useNotionBlock, defineNotionProps } from "../../lib/blockable";
 3 | import { computed } from "vue";
 4 | import { useTimeAgo } from "@vueuse/core";
 5 | 
 6 | const props = defineProps({ ...defineNotionProps });
 7 | //@ts-ignore
 8 | const { format, block, hasPageLinkOptions, pageLinkProps } = useNotionBlock(props);
 9 | 
10 | const properties = computed(() => format.value.drive_properties);
11 | 
12 | const constructThumbnail = (src?: string) => {
13 |   if (!src) return;
14 |   const q = new URLSearchParams({
15 |     table: "block",
16 |     id: block.value.value.id,
17 |     cache: "v2",
18 |   });
19 |   return "https://www.notion.so/image/" + encodeURIComponent(src) + "?" + q;
20 | };
21 | const constructDomain = (src?: string) => {
22 |   if (!src) return;
23 |   return new URL(src).hostname;
24 | };
25 | </script>
26 | 
27 | <script lang="ts">
28 | export default {
29 |   name: "NotionGoogleDrive",
30 | };
31 | </script>
32 | 
33 | <template>
34 |   <div class="notion-google-drive">
35 |     <a rel="noopener noreferrer" target="_blank" :href="properties.url" class="notion-google-drive-link">
36 |       <div class="notion-google-drive-preview">
37 |         <img :src="constructThumbnail(properties.thumbnail)" :alt="properties.title" />
38 |       </div>
39 | 
40 |       <div className="notion-google-drive-body">
41 |         <div className="notion-google-drive-body-title">
42 |           {{ properties.title }}
43 |         </div>
44 | 
45 |         <div className="notion-google-drive-body-modified-time">
46 |           Last modified
47 |           {{ properties.user_name ? `by ${properties.user_name} ` : "" }}
48 |           {{ useTimeAgo(properties.modified_time).value }}
49 |         </div>
50 | 
51 |         <div className="notion-google-drive-body-source">
52 |           <div
53 |             className="notion-google-drive-body-source-icon"
54 |             :style="{ backgroundImage: 'url(' + properties.icon + ')' }"
55 |           />
56 |           <div className="notion-google-drive-body-source-domain">{{ constructDomain(properties.url) }}</div>
57 |         </div>
58 |       </div>
59 |     </a>
60 |   </div>
61 | </template>
62 | 


--------------------------------------------------------------------------------
/src/blocks/code.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import Prism from "prismjs";
 3 | import PrismBlock from "./helpers/prism.vue";
 4 | import { useNotionBlock, defineNotionProps } from "../lib/blockable";
 5 | import { computed } from "vue";
 6 | 
 7 | import "prismjs/components/prism-markup-templating";
 8 | import "prismjs/components/prism-markup";
 9 | import "prismjs/components/prism-bash";
10 | import "prismjs/components/prism-c";
11 | import "prismjs/components/prism-cpp";
12 | import "prismjs/components/prism-csharp";
13 | import "prismjs/components/prism-docker";
14 | import "prismjs/components/prism-java";
15 | import "prismjs/components/prism-js-templates";
16 | import "prismjs/components/prism-typescript";
17 | import "prismjs/components/prism-coffeescript";
18 | import "prismjs/components/prism-diff";
19 | import "prismjs/components/prism-git";
20 | import "prismjs/components/prism-go";
21 | import "prismjs/components/prism-graphql";
22 | import "prismjs/components/prism-handlebars";
23 | import "prismjs/components/prism-json";
24 | import "prismjs/components/prism-less";
25 | import "prismjs/components/prism-makefile";
26 | import "prismjs/components/prism-markdown";
27 | import "prismjs/components/prism-objectivec";
28 | import "prismjs/components/prism-ocaml";
29 | import "prismjs/components/prism-python";
30 | import "prismjs/components/prism-reason";
31 | import "prismjs/components/prism-rust";
32 | import "prismjs/components/prism-sass";
33 | import "prismjs/components/prism-scss";
34 | import "prismjs/components/prism-solidity";
35 | import "prismjs/components/prism-sql";
36 | import "prismjs/components/prism-stylus";
37 | import "prismjs/components/prism-swift";
38 | import "prismjs/components/prism-wasm";
39 | import "prismjs/components/prism-yaml";
40 | 
41 | const props = defineProps({ overrideLang: String, overrideLangClass: String, ...defineNotionProps });
42 | //@ts-ignore
43 | const { properties } = useNotionBlock(props);
44 | const lang = computed(() => {
45 |   return props.overrideLang || properties.value?.language?.[0]?.[0]?.toLowerCase();
46 | });
47 | 
48 | const langClass = computed(() => {
49 |   return props.overrideLangClass || `language-${lang.value}`;
50 | });
51 | 
52 | const supported = computed(() => {
53 |   return lang.value ? Prism?.languages[lang.value] : false;
54 | });
55 | 
56 | const computedSlot = computed(() => properties.value?.title.map((i) => i?.[0]).join(""));
57 | </script>
58 | 
59 | <script lang="ts">
60 | export default {
61 |   name: "NotionCode",
62 | };
63 | </script>
64 | 
65 | <template>
66 |   <div v-if="supported" :class="['notion-code']">
67 |     <PrismBlock :language="lang">{{ computedSlot }}</PrismBlock>
68 |   </div>
69 |   <div v-else :class="['notion-code']">
70 |     <pre><div :class="langClass">{{ computedSlot }}</div></pre>
71 |   </div>
72 | </template>
73 | 


--------------------------------------------------------------------------------
/src/blocks/page.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useNotionBlock, defineNotionProps } from "../lib/blockable";
 3 | import NotionPageIcon from "../blocks/helpers/page-icon.vue";
 4 | import NotionTextRenderer from "../blocks/helpers/text-renderer.vue";
 5 | import { computed, StyleValue } from "vue";
 6 | import { getTextContent } from "../lib/utils";
 7 | 
 8 | const props = defineProps({ ...defineNotionProps });
 9 | //@ts-ignore
10 | const { format, title, block, pass, hasPageLinkOptions, pageLinkProps } = useNotionBlock(props);
11 | 
12 | const coverStyle = computed(() => {
13 |   const coverPosition = (1 - (format.value.page_cover_position || 0.5)) * 100;
14 |   return { objectPosition: `center ${coverPosition}%` };
15 | });
16 | const computedFont = computed(() => {
17 |   let font = (block.value.value.format?.page_font as string) || "";
18 |   if (font == "serif") {
19 |     return { fontFamily: "Lyon-Text, Georgia, ui-serif, serif" };
20 |   } else if (font == "mono") {
21 |     return { fontFamily: "iawriter-mono, Nitti, Menlo, Courier, monospace" };
22 |   }
23 | });
24 | </script>
25 | 
26 | <script lang="ts">
27 | export default {
28 |   name: "NotionPage",
29 | };
30 | </script>
31 | 
32 | <template>
33 |   <div v-if="props.level === 0 && props.fullPage" class="notion" :style="computedFont">
34 |     <!-- todo: add header -->
35 |     <!-- <NotionPageHeader v-if="!hideHeader" v-bind="pass" /> -->
36 |     <!-- todo: hide image if no .format is available -->
37 |     <img
38 |       v-if="format && format.page_cover"
39 |       class="notion-page-cover"
40 |       :style="coverStyle"
41 |       :alt="getTextContent(title)"
42 |       :src="props.mapImageUrl(format.page_cover, block)"
43 |     />
44 |     <main
45 |       :class="[
46 |         'notion-page',
47 |         format && !format.page_cover && 'notion-page-offset',
48 |         format && format.page_full_width && 'notion-full-width',
49 |         format && format.page_small_text && 'notion-small-text',
50 |       ]"
51 |     >
52 |       <NotionPageIcon v-bind="pass" big />
53 |       <div class="notion-title">
54 |         <NotionTextRenderer :text="title" v-bind="pass" />
55 |       </div>
56 |       <slot />
57 |     </main>
58 |   </div>
59 |   <main v-else-if="props.level === 0" class="notion"><slot /></main>
60 |   <component
61 |     v-else-if="hasPageLinkOptions"
62 |     class="notion-page-link"
63 |     v-bind="pageLinkProps(block.value.id)"
64 |     :is="props.pageLinkOptions?.component"
65 |   >
66 |     <div class="notion-page-icon">
67 |       <NotionPageIcon v-bind="pass" />
68 |     </div>
69 |     <div class="notion-page-text">
70 |       <NotionTextRenderer :text="title" v-bind="pass" />
71 |     </div>
72 |   </component>
73 |   <a v-else class="notion-page-link" :target="props.pageLinkTarget" :href="props.mapPageUrl(block.value.id)">
74 |     <div class="notion-page-icon">
75 |       <NotionPageIcon v-bind="pass" />
76 |     </div>
77 |     <div class="notion-page-text">
78 |       <NotionTextRenderer :text="title" v-bind="pass" />
79 |     </div>
80 |   </a>
81 | </template>
82 | 


--------------------------------------------------------------------------------
/src/components/block.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { defineAsyncComponent } from "vue";
 3 | import { defineNotionProps, useNotionBlock } from "../lib/blockable";
 4 | import { availableType } from "../lib/constant";
 5 | import NotionBookmark from "../blocks/bookmark.vue";
 6 | import NotionCallout from "../blocks/callout.vue";
 7 | import NotionColumn from "../blocks/column.vue";
 8 | import NotionEquation from "../blocks/equation.vue";
 9 | import NotionFigure from "../blocks/helpers/figure.vue";
10 | import NotionHeader from "../blocks/header.vue";
11 | import NotionList from "../blocks/list.vue";
12 | import NotionPage from "../blocks/page.vue";
13 | import NotionQuote from "../blocks/quote.vue";
14 | import NotionTable from "../blocks/table.vue";
15 | import NotionTableRow from "../blocks/table-row.vue";
16 | import NotionText from "../blocks/text.vue";
17 | import NotionTodo from "../blocks/todo.vue";
18 | import NotionToggle from "../blocks/toggle.vue";
19 | import NotionTableOfContents from "../blocks/table-of-contents.vue";
20 | import NotionSyncBlock from "../blocks/sync-block.vue";
21 | import NotionSyncPointerBlock from "../blocks/sync-pointer-block.vue";
22 | 
23 | const NotionCode = defineAsyncComponent(() => import("../blocks/code.vue"));
24 | const NotionTweet = defineAsyncComponent(() => import("../blocks/tweet.vue"));
25 | 
26 | const props = defineProps({ ...defineNotionProps });
27 | //@ts-ignore
28 | const { pass, type, format, isType } = useNotionBlock(props);
29 | if (!availableType.includes(type.value)) console.warn(`${type.value.toUpperCase()} is not implemented yet`);
30 | </script>
31 | 
32 | <template>
33 |   <div style="width: 100%" v-if="isType('page')">
34 |     <NotionPage class="notion-page-content" v-bind="pass">
35 |       <slot />
36 |     </NotionPage>
37 |   </div>
38 |   <NotionHeader v-else-if="isType(['header', 'sub_header', 'sub_sub_header'])" v-bind="pass" />
39 |   <NotionBookmark v-else-if="isType('bookmark')" v-bind="pass" />
40 |   <NotionCallout v-else-if="isType('callout')" v-bind="pass" />
41 |   <NotionCode v-else-if="isType('code')" v-bind="pass" />
42 |   <NotionEquation v-else-if="isType('equation')" v-bind="pass" />
43 |   <NotionText v-else-if="isType('text')" v-bind="pass" />
44 |   <NotionQuote v-else-if="isType('quote')" v-bind="pass" />
45 |   <NotionTodo v-else-if="isType('to_do')" v-bind="pass" />
46 |   <NotionToggle v-else-if="isType('toggle')" v-bind="pass">
47 |     <slot />
48 |   </NotionToggle>
49 |   <div v-else-if="isType('column_list')" class="notion-row">
50 |     <slot />
51 |   </div>
52 |   <NotionColumn v-else-if="isType('column')" :format="format">
53 |     <slot />
54 |   </NotionColumn>
55 |   <NotionList v-else-if="isType(['bulleted_list', 'numbered_list'])" v-bind="pass">
56 |     <slot />
57 |   </NotionList>
58 |   <NotionFigure v-else-if="isType(['image', 'embed', 'figma', 'video', 'audio', 'drive', 'maps'])" v-bind="pass" />
59 |   <NotionTable v-else-if="isType('table')" v-bind="pass"><slot /></NotionTable>
60 |   <NotionTableRow v-else-if="isType('table_row')" v-bind="pass" />
61 |   <NotionTableOfContents v-else-if="isType('table_of_contents')" v-bind="pass"></NotionTableOfContents>
62 |   <NotionSyncBlock v-else-if="isType('transclusion_container')"><slot /></NotionSyncBlock>
63 |   <NotionSyncPointerBlock v-else-if="isType('transclusion_reference')" v-bind="pass"></NotionSyncPointerBlock>
64 |   <NotionTweet v-else-if="isType('tweet')" v-bind="pass"></NotionTweet>
65 |   <hr v-else-if="isType('divider')" class="notion-hr" />
66 | </template>
67 | 


--------------------------------------------------------------------------------
/src/blocks/decorator.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { useNotionBlock, defineNotionProps } from "../lib/blockable";
  3 | import NotionKatek from "../blocks/helpers/katex.vue";
  4 | import { computed, PropType } from "vue";
  5 | 
  6 | const props = defineProps({
  7 |   content: Object as PropType<string[] | string>,
  8 |   ...defineNotionProps,
  9 | });
 10 | //@ts-ignore
 11 | const { props: blockProps, pass, type, hasPageLinkOptions, pageLinkProps } = useNotionBlock(props);
 12 | 
 13 | const text = computed(() => props.content?.[0]);
 14 | const decorators = computed(() => props.content?.[1] || []);
 15 | const decoratorKey = computed(() => decorators.value?.[0]?.[0]);
 16 | const decoratorValue = computed(() => decorators.value?.[0]?.[1]);
 17 | const unappliedDecorators = computed(() => {
 18 |   const clonedDecorators = JSON.parse(JSON.stringify(decorators.value || []));
 19 |   clonedDecorators.shift(); // remove applied decorator
 20 |   return clonedDecorators;
 21 | });
 22 | const nextContent = computed(() => [text.value, unappliedDecorators.value]);
 23 | const isPageLink = computed(() => text.value === "‣");
 24 | const isInlinePageLink = computed(() => decoratorValue.value?.[0] === "/");
 25 | const pageLinkTitle = computed(
 26 |   () => blockProps.blockMap?.[decoratorValue.value]?.value?.properties?.title?.[0]?.[0] || "link"
 27 | );
 28 | const target = computed(() => {
 29 |   if (type.value === "page") {
 30 |     return blockProps.pageLinkTarget;
 31 |   }
 32 |   return blockProps.textLinkTarget;
 33 | });
 34 | </script>
 35 | 
 36 | <script lang="ts">
 37 | export default {
 38 |   name: "NotionDecorator",
 39 | };
 40 | </script>
 41 | 
 42 | <template>
 43 |   <component
 44 |     v-if="isPageLink && hasPageLinkOptions"
 45 |     class="notion-link"
 46 |     v-bind="pageLinkProps(decoratorValue)"
 47 |     :is="blockProps.pageLinkOptions?.component"
 48 |   >
 49 |     {{ pageLinkTitle }}
 50 |   </component>
 51 |   <a
 52 |     v-else-if="isPageLink"
 53 |     class="notion-link"
 54 |     :target="blockProps.pageLinkTarget"
 55 |     :href="blockProps.mapPageUrl(decoratorValue)"
 56 |     >{{ pageLinkTitle }}</a
 57 |   >
 58 |   <component
 59 |     v-else-if="decoratorKey === 'a' && hasPageLinkOptions && isInlinePageLink"
 60 |     class="notion-link"
 61 |     v-bind="pageLinkProps(decoratorValue.slice(1))"
 62 |     :is="blockProps.pageLinkOptions?.component"
 63 |   >
 64 |     <NotionDecorator :content="nextContent" v-bind="pass" />
 65 |   </component>
 66 |   <a
 67 |     v-else-if="decoratorKey === 'a' && isInlinePageLink"
 68 |     class="notion-link"
 69 |     :target="target"
 70 |     :href="blockProps.mapPageUrl(decoratorValue.slice(1))"
 71 |   >
 72 |     <NotionDecorator :content="nextContent" v-bind="pass" />
 73 |   </a>
 74 |   <a v-else-if="decoratorKey === 'a'" class="notion-link" :target="target" :href="decoratorValue">
 75 |     <NotionDecorator :content="nextContent" v-bind="pass" />
 76 |   </a>
 77 |   <span v-else-if="decorators.length === 0">{{ text }}</span>
 78 |   <span v-else-if="decoratorKey === 'h'" :class="'notion-' + decoratorValue"
 79 |     ><NotionDecorator :content="nextContent" v-bind="pass" />
 80 |   </span>
 81 |   <code v-else-if="decoratorKey === 'c'" class="notion-inline-code">
 82 |     <NotionDecorator :content="nextContent" v-bind="pass" />
 83 |   </code>
 84 |   <b v-else-if="decoratorKey === 'b'">
 85 |     <NotionDecorator :content="nextContent" v-bind="pass" />
 86 |   </b>
 87 |   <em v-else-if="decoratorKey === 'i'">
 88 |     <NotionDecorator :content="nextContent" v-bind="pass" />
 89 |   </em>
 90 |   <s v-else-if="decoratorKey === 's'">
 91 |     <NotionDecorator :content="nextContent" v-bind="pass" />
 92 |   </s>
 93 |   <u v-else-if="decoratorKey === '_'" class="notion-underline">
 94 |     <NotionDecorator :content="nextContent" v-bind="pass" />
 95 |   </u>
 96 |   <NotionKatek v-else-if="decoratorKey === 'e' && blockProps.katex" :expression="decoratorValue" />
 97 |   <code v-else-if="decoratorKey === 'e'" class="notion-inline-code">
 98 |     {{ decoratorValue }}
 99 |   </code>
100 |   <NotionDecorator v-else :content="nextContent" v-bind="pass" />
101 | </template>
102 | 


--------------------------------------------------------------------------------
/src/lib/blockable.ts:
--------------------------------------------------------------------------------
  1 | import { defaultMapImageUrl, defaultMapPageUrl } from "../lib/utils";
  2 | import { computed, PropType } from "vue";
  3 | import { NotionBlockProps, BlockMap } from "./types";
  4 | 
  5 | export const defineNotionProps = {
  6 |   blockMap: { type: Object as PropType<BlockMap>, required: true },
  7 |   contentId: { type: String, required: false },
  8 |   contentIndex: { type: Number, default: 0 },
  9 |   embedAllow: { type: String, default: "fullscreen" },
 10 |   fullPage: { type: Boolean, default: false },
 11 |   hideList: { type: Array, default: () => [] },
 12 |   level: { type: Number, default: 0 },
 13 |   mapImageUrl: { type: Function, default: defaultMapImageUrl },
 14 |   mapPageUrl: { type: Function, default: defaultMapPageUrl },
 15 |   pageLinkOptions: Object,
 16 |   pageLinkTarget: { type: String, default: "_self" },
 17 |   prism: { type: Boolean, default: false },
 18 |   katex: { type: Boolean, default: false },
 19 |   textLinkTarget: { type: String, default: "_blank" },
 20 | };
 21 | 
 22 | export const useNotionBlock = (props: Readonly<NotionBlockProps>) => {
 23 |   const block = computed(() => {
 24 |     const id = props.contentId || Object.keys(props.blockMap)[0];
 25 |     return props.blockMap[id];
 26 |   });
 27 | 
 28 |   const pass = computed(() => {
 29 |     return {
 30 |       blockMap: props.blockMap,
 31 |       contentId: props.contentId,
 32 |       contentIndex: props.contentIndex,
 33 |       embedAllow: props.embedAllow,
 34 |       fullPage: props.fullPage,
 35 |       hideList: props.hideList,
 36 |       level: props.level,
 37 |       mapImageUrl: props.mapImageUrl,
 38 |       mapPageUrl: props.mapPageUrl,
 39 |       pageLinkOptions: props.pageLinkOptions,
 40 |       prism: props.prism,
 41 |       katex: props.katex,
 42 |     };
 43 |   });
 44 | 
 45 |   const f = computed(() => {
 46 |     return {
 47 |       block_aspect_ratio: block.value?.value?.format?.block_aspect_ratio,
 48 |       block_height: block.value?.value?.format?.block_height || 1,
 49 |       block_width: block.value?.value?.format?.block_width || 1,
 50 |       block_color: block.value?.value?.format?.block_color,
 51 |       bookmark_icon: block.value?.value?.format?.bookmark_icon,
 52 |       bookmark_cover: block.value?.value?.format?.bookmark_cover,
 53 |       display_source: block.value?.value?.format?.display_source,
 54 |     };
 55 |   });
 56 | 
 57 |   const format = computed(() => block.value?.value.format);
 58 |   const properties = computed(() => block.value?.value.properties);
 59 | 
 60 |   const icon = computed(() => format.value?.page_icon);
 61 |   const width = computed(() => format.value?.block_width);
 62 | 
 63 |   const title = computed(() => properties.value?.title);
 64 |   const caption = computed(() => properties.value?.caption);
 65 |   const description = computed(() => properties.value?.description);
 66 | 
 67 |   const type = computed(() => {
 68 |     return block.value?.value.type;
 69 |   });
 70 | 
 71 |   const visible = computed(() => {
 72 |     return type.value ? !props.hideList?.includes(type.value) : false;
 73 |   });
 74 | 
 75 |   const hasPageLinkOptions = computed(() => {
 76 |     return props.pageLinkOptions?.component && props.pageLinkOptions?.href;
 77 |   });
 78 |   const parent = computed(() => {
 79 |     return props.blockMap[block.value?.value.parent_id];
 80 |   });
 81 | 
 82 |   const isType = (t: string | string[]) => {
 83 |     if (Array.isArray(t)) {
 84 |       return visible.value && t.includes(type.value);
 85 |     }
 86 |     return visible.value && type.value === t;
 87 |   };
 88 | 
 89 |   const blockColorClass = (suffix = "") => {
 90 |     const blockColor = block.value?.value?.format?.block_color;
 91 |     return blockColor ? `notion-${blockColor}${suffix}` : undefined;
 92 |   };
 93 | 
 94 |   const pageLinkProps = (id: string) => {
 95 |     return props.pageLinkOptions
 96 |       ? {
 97 |           [props.pageLinkOptions.href]: props.mapPageUrl(id),
 98 |         }
 99 |       : {};
100 |   };
101 | 
102 |   return {
103 |     props,
104 |     block,
105 |     pass,
106 |     f,
107 |     format,
108 |     properties,
109 |     icon,
110 |     width,
111 |     title,
112 |     caption,
113 |     description,
114 |     type,
115 |     visible,
116 |     hasPageLinkOptions,
117 |     parent,
118 | 
119 |     isType,
120 |     blockColorClass,
121 |     pageLinkProps,
122 |   };
123 | };
124 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <div align="center">
  2 |   <img src="https://github.com/zernonia/vue3-notion/raw/master/assets/vue3-notion.png" alt="vue3-notion" width="398px" />
  3 |   <p>An unofficial Notion renderer (Vue 3) version</p>
  4 | </div>
  5 | 
  6 | <h3 align="center">
  7 |   <a href="#features">Features</a>
  8 |   <span> · </span>
  9 |   <a href="#install">Install</a>
 10 |   <span> · </span>
 11 |   <a href="#examples">Examples</a>
 12 |   <span> · </span>
 13 |   <a href="#credits">Credits</a>
 14 | </h3>
 15 | 
 16 | <p align="center">
 17 |   <a href="https://www.npmjs.org/package/vue3-notion">
 18 |     <img src="https://img.shields.io/npm/v/vue3-notion.svg" alt="Package version" />
 19 |   </a>
 20 |   <a href="https://github.com/janniks/vue3-notion/blob/master/LICENSE">
 21 |     <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="MIT license" />
 22 |   </a>
 23 |   <a href="https://twitter.com/intent/follow?screen_name=zernonia">
 24 |     <img src="https://img.shields.io/twitter/url?label=Follow&style=social&url=https%3A%2F%2Ftwitter.com%2Fzernonia" alt="Follow on Twitter" />
 25 |   </a>
 26 | </p>
 27 | 
 28 | ---
 29 | 
 30 | A **Vue 3** renderer for Notion pages (ported from [vue-notion](https://github.com/janniks/vue-notion)). Special thanks to [Jannik Siebert](https://twitter.com/jnnksbrt) & all the `vue-notion` contributors that made the `vue-notion` possible!
 31 | 
 32 | Use **Notion as CMS** for your blog, documentation or personal site.
 33 | Also check out [react-notion](https://github.com/splitbee/react-notion) (developed by [Splitbee 🐝](https://splitbee.io/) – a fast, reliable, free, and modern analytics for any team)
 34 | 
 35 | This package doesn't handle the communication with the API (I planned to add this!). Check out [notion-api-worker](https://github.com/splitbee/notion-api-worker) from [Splitbee](https://splitbee.io/) for an easy solution.
 36 | 
 37 | <sub>Created by <a href="https://twitter.com/zernonia">Zernonia</a></sub>
 38 | 
 39 | ## Features
 40 | 
 41 | 🌎 **SSR / Static Generation Support** – Functions to work with [**Nuxt3**](https://v3.nuxtjs.org/) and other frameworks
 42 | 
 43 | 🎯 **Accurate** – Results are _almost_ identical
 44 | 
 45 | 🎨 **Custom Styles** – Styles are easily adaptable. Optional styles included
 46 | 
 47 | 🔮 **Syntax-Highlighting** – Beautiful themeable code highlighting using Prism.js
 48 | 
 49 | ## Install
 50 | 
 51 | ### Vue 3
 52 | 
 53 | ```bash
 54 | npm install vue3-notion
 55 | # yarn add vue3-notion
 56 | ```
 57 | 
 58 | ### Nuxt3 Module
 59 | 
 60 | Install as a dev-dependency and add `"vue3-notion/nuxt"` to the `buildModules` array in `nuxt.config.js`.
 61 | 
 62 | ```bash
 63 | npm install vue3-notion --save-dev
 64 | ```
 65 | 
 66 | ```ts
 67 | // nuxt.config.ts
 68 | import { defineNuxtConfig } from "nuxt3"
 69 | 
 70 | export default defineNuxtConfig({
 71 |   //...
 72 |   modules: [
 73 |     ["vue3-notion/nuxt", { css: true }], // css is not imported by default. Set `true` to import css
 74 |   ],
 75 | })
 76 | ```
 77 | 
 78 | ## Examples
 79 | 
 80 | These examples use a simple wrapper around the [`notion-api-worker`](https://github.com/splitbee/notion-api-worker) to access the Notion page data.
 81 | It is also possible to store a page received from the Notion API in `.json` and use it without the `async/await` part.
 82 | 
 83 | > Use the `getPageBlocks` and `getPageTable` methods with caution!
 84 | > They are based on the private Notion API.
 85 | > We can NOT guarantee that it will stay stable.
 86 | > The private API is warpped by [notion-api-worker](https://github.com/splitbee/notion-api-worker).
 87 | 
 88 | ### Basic Example for **Vue 3**
 89 | 
 90 | This example is a part of [`demo/`](https://github.com/zeronnia/vue3-notion/demo/) and is hosted at [vue3-notion.vercel.app](https://vue3-notion.vercel.app).
 91 | 
 92 | ```vue
 93 | <script setup lang="ts">
 94 | import { NotionRenderer, getPageBlocks, useGetPageBlocks } from "vue3-notion"
 95 | import { ref, onMounted } from "vue"
 96 | 
 97 | const data = ref()
 98 | 
 99 | onMounted(async () => {
100 |   data.value = await getPageBlocks("4b2dc28a5df74034a943f8c8e639066a")
101 | })
102 | 
103 | // ---- or using Composables ----
104 | 
105 | const { data } = useGetPageBlocks("4b2dc28a5df74034a943f8c8e639066a")
106 | </script>
107 | 
108 | <template>
109 |   <NotionRenderer v-if="data" :blockMap="data" fullPage />
110 | </template>
111 | 
112 | <style>
113 | @import "vue3-notion/dist/style.css"; /* optional Notion-like styles */
114 | @import "prismjs/themes/prism.css";
115 | @import "katex/dist/katex.min.css";
116 | </style>
117 | ```
118 | 
119 | ### Basic Example for **Nuxt3**
120 | 
121 | This example is a part of [`demo/`](https://github.com/zeronnia/vue3-notion/demo/) and is hosted at [vue3-notion.vercel.app](https://vue3-notion.vercel.app).
122 | 
123 | ```vue
124 | <script setup lang="ts">
125 | const { $notion } = useNuxtApp()
126 | const { data } = await useAsyncData("notion", () => $notion.getPageBlocks("2e22de6b770e4166be301490f6ffd420"))
127 | </script>
128 | 
129 | <template>
130 |   <NotionRenderer :blockMap="data" fullPage prism />
131 | </template>
132 | ```
133 | 
134 | ## Supported Blocks
135 | 
136 | Most common block types are supported. We happily accept pull requests to add support for the missing blocks.
137 | 
138 | | Block Type        | Supported  | Notes                  |
139 | | ----------------- | ---------- | ---------------------- |
140 | | Text              | ✅ Yes     |                        |
141 | | Heading           | ✅ Yes     |                        |
142 | | Image             | ✅ Yes     |                        |
143 | | Image Caption     | ✅ Yes     |                        |
144 | | Bulleted List     | ✅ Yes     |                        |
145 | | Numbered List     | ✅ Yes     |                        |
146 | | Quote             | ✅ Yes     |                        |
147 | | Callout           | ✅ Yes     |                        |
148 | | Column            | ✅ Yes     |                        |
149 | | iframe            | ✅ Yes     |                        |
150 | | Video             | ✅ Yes     | Only embedded videos   |
151 | | Divider           | ✅ Yes     |                        |
152 | | Link              | ✅ Yes     |                        |
153 | | Code              | ✅ Yes     |                        |
154 | | Web Bookmark      | ✅ Yes     |                        |
155 | | Toggle List       | ✅ Yes     |                        |
156 | | Page Links        | ✅ Yes     |                        |
157 | | Cover             | ✅ Yes     | Enable with `fullPage` |
158 | | Equations         | ✅ Yes     |                        |
159 | | Checkbox          | ✅ Yes     |                        |
160 | | Simple Tables     | ✅ Yes     |                        |
161 | | Table Of Contents | ✅ Yes     |                        |
162 | | Databases         | ☑️ Planned |                        |
163 | 
164 | Please, feel free to [open an issue](https://github.com/zernonia/vue3-notion/issues/new) if you notice any important blocks missing or anything wrong with existing blocks.
165 | 
166 | # 🌎 Local Development
167 | 
168 | ## Prerequisites
169 | 
170 | Yarn
171 | 
172 | - ```sh
173 |   npm install --global yarn
174 |   ```
175 | 
176 | ## Development
177 | 
178 | 1. Clone the repo
179 |    ```sh
180 |    git clone https://github.com/zernonia/vue3-notion.git
181 |    ```
182 | 2. Install NPM packages
183 |    ```sh
184 |    yarn
185 |    ```
186 | 3. Run Development instance
187 |    ```sh
188 |    yarn dev
189 |    ```
190 | 
191 | ## Credits
192 | 
193 | - [Jannik Siebert](https://twitter.com/jnnksbrt) – vue-notion Code
194 | - [All vue-notion contributors!](https://github.com/janniks/vue-notion/graphs/contributors)
195 | 
196 | ## License ⚖️
197 | 
198 | MIT © [zernonia](https://twitter.com/zernonia)
199 | 


--------------------------------------------------------------------------------
/demo/vue/pnpm-lock.yaml:
--------------------------------------------------------------------------------
   1 | lockfileVersion: '9.0'
   2 | 
   3 | settings:
   4 |   autoInstallPeers: true
   5 |   excludeLinksFromLockfile: false
   6 | 
   7 | importers:
   8 | 
   9 |   .:
  10 |     dependencies:
  11 |       vue:
  12 |         specifier: ^3.2.25
  13 |         version: 3.5.12(typescript@4.9.5)
  14 |       vue-router:
  15 |         specifier: ^4.0.14
  16 |         version: 4.4.5(vue@3.5.12(typescript@4.9.5))
  17 |       vue3-notion:
  18 |         specifier: ^0.1.46
  19 |         version: 0.1.46(katex@0.15.6)(prismjs@1.29.0)(vue@3.5.12(typescript@4.9.5))
  20 |     devDependencies:
  21 |       '@vitejs/plugin-vue':
  22 |         specifier: ^2.2.0
  23 |         version: 2.3.4(vite@2.9.18)(vue@3.5.12(typescript@4.9.5))
  24 |       typescript:
  25 |         specifier: ^4.5.4
  26 |         version: 4.9.5
  27 |       vite:
  28 |         specifier: ^2.8.6
  29 |         version: 2.9.18
  30 |       vue-tsc:
  31 |         specifier: ^0.29.8
  32 |         version: 0.29.8(typescript@4.9.5)
  33 | 
  34 | packages:
  35 | 
  36 |   '@babel/helper-string-parser@7.25.9':
  37 |     resolution: {integrity: sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==}
  38 |     engines: {node: '>=6.9.0'}
  39 | 
  40 |   '@babel/helper-validator-identifier@7.25.9':
  41 |     resolution: {integrity: sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==}
  42 |     engines: {node: '>=6.9.0'}
  43 | 
  44 |   '@babel/parser@7.26.2':
  45 |     resolution: {integrity: sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==}
  46 |     engines: {node: '>=6.0.0'}
  47 |     hasBin: true
  48 | 
  49 |   '@babel/types@7.26.0':
  50 |     resolution: {integrity: sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==}
  51 |     engines: {node: '>=6.9.0'}
  52 | 
  53 |   '@emmetio/abbreviation@2.3.3':
  54 |     resolution: {integrity: sha512-mgv58UrU3rh4YgbE/TzgLQwJ3pFsHHhCLqY20aJq+9comytTXUDNGG/SMtSeMJdkpxgXSXunBGLD8Boka3JyVA==}
  55 | 
  56 |   '@emmetio/css-abbreviation@2.1.8':
  57 |     resolution: {integrity: sha512-s9yjhJ6saOO/uk1V74eifykk2CBYi01STTK3WlXWGOepyKa23ymJ053+DNQjpFcy1ingpaO7AxCcwLvHFY9tuw==}
  58 | 
  59 |   '@emmetio/scanner@1.0.4':
  60 |     resolution: {integrity: sha512-IqRuJtQff7YHHBk4G8YZ45uB9BaAGcwQeVzgj/zj8/UdOhtQpEIupUhSk8dys6spFIWVZVeK20CzGEnqR5SbqA==}
  61 | 
  62 |   '@esbuild/linux-loong64@0.14.54':
  63 |     resolution: {integrity: sha512-bZBrLAIX1kpWelV0XemxBZllyRmM6vgFQQG2GdNb+r3Fkp0FOh1NJSvekXDs7jq70k4euu1cryLMfU+mTXlEpw==}
  64 |     engines: {node: '>=12'}
  65 |     cpu: [loong64]
  66 |     os: [linux]
  67 | 
  68 |   '@jridgewell/sourcemap-codec@1.5.0':
  69 |     resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
  70 | 
  71 |   '@vitejs/plugin-vue@2.3.4':
  72 |     resolution: {integrity: sha512-IfFNbtkbIm36O9KB8QodlwwYvTEsJb4Lll4c2IwB3VHc2gie2mSPtSzL0eYay7X2jd/2WX02FjSGTWR6OPr/zg==}
  73 |     engines: {node: '>=12.0.0'}
  74 |     peerDependencies:
  75 |       vite: ^2.5.10
  76 |       vue: ^3.2.25
  77 | 
  78 |   '@volar/code-gen@0.29.8':
  79 |     resolution: {integrity: sha512-eohLLUqPChHRPDFT5gXn4V6pr/CeTri7Ou5GI26lUvBRRAbP8p+oYfQRcbMPGeKmVkYjfVj0chsxQGx6T8PQ4Q==}
  80 | 
  81 |   '@volar/html2pug@0.29.8':
  82 |     resolution: {integrity: sha512-bhSNXg8A2aD3w0B+CwmHjqCAaKtj5rORbE5C/q/UdGqptJbC6STCmi30KuRTdfPhR++Xb18Hauf3s/WCmtNAPA==}
  83 |     deprecated: 'WARNING: This project has been renamed to @johnsoncodehk/html2pug. Install using @johnsoncodehk/html2pug instead.'
  84 | 
  85 |   '@volar/shared@0.29.8':
  86 |     resolution: {integrity: sha512-Y1NN6irkIukD+T0wf4p/dHWYL90sacN2e2lYoDXxRlvoYxwANnHgw0J0Rcp+yw58ElWRScdG7/YntEIuZWeJsw==}
  87 | 
  88 |   '@volar/source-map@0.29.8':
  89 |     resolution: {integrity: sha512-7w+UoYtnc6UQu30CgMVvx0YN4dzDgP4TIsSmUaW62AGmxU9Lxwp3Kkn/4N8efi91z8ma5Z78v/HddyJPwAC3LA==}
  90 | 
  91 |   '@volar/transforms@0.29.8':
  92 |     resolution: {integrity: sha512-o2hRa8CoDwYTO1Mu5KA47+1elUnYUjDaVhCvbyKlRfd8qpHea2llotArq7B6OORSL2M9DVs1IRJ5NGURBFeZ3Q==}
  93 | 
  94 |   '@volar/vue-code-gen@0.29.8':
  95 |     resolution: {integrity: sha512-E1e7P2oktNC/DzgDBditfla4s8+HlUlluZ+BtcLvEdbkl3QEjujkB0x1wxguWzXmpWgLIDPtrS3Jzll5cCOkTg==}
  96 | 
  97 |   '@vscode/emmet-helper@2.9.3':
  98 |     resolution: {integrity: sha512-rB39LHWWPQYYlYfpv9qCoZOVioPCftKXXqrsyqN1mTWZM6dTnONT63Db+03vgrBbHzJN45IrgS/AGxw9iiqfEw==}
  99 | 
 100 |   '@vue/compiler-core@3.5.12':
 101 |     resolution: {integrity: sha512-ISyBTRMmMYagUxhcpyEH0hpXRd/KqDU4ymofPgl2XAkY9ZhQ+h0ovEZJIiPop13UmR/54oA2cgMDjgroRelaEw==}
 102 | 
 103 |   '@vue/compiler-dom@3.5.12':
 104 |     resolution: {integrity: sha512-9G6PbJ03uwxLHKQ3P42cMTi85lDRvGLB2rSGOiQqtXELat6uI4n8cNz9yjfVHRPIu+MsK6TE418Giruvgptckg==}
 105 | 
 106 |   '@vue/compiler-sfc@3.5.12':
 107 |     resolution: {integrity: sha512-2k973OGo2JuAa5+ZlekuQJtitI5CgLMOwgl94BzMCsKZCX/xiqzJYzapl4opFogKHqwJk34vfsaKpfEhd1k5nw==}
 108 | 
 109 |   '@vue/compiler-ssr@3.5.12':
 110 |     resolution: {integrity: sha512-eLwc7v6bfGBSM7wZOGPmRavSWzNFF6+PdRhE+VFJhNCgHiF8AM7ccoqcv5kBXA2eWUfigD7byekvf/JsOfKvPA==}
 111 | 
 112 |   '@vue/devtools-api@6.6.4':
 113 |     resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
 114 | 
 115 |   '@vue/reactivity@3.5.12':
 116 |     resolution: {integrity: sha512-UzaN3Da7xnJXdz4Okb/BGbAaomRHc3RdoWqTzlvd9+WBR5m3J39J1fGcHes7U3za0ruYn/iYy/a1euhMEHvTAg==}
 117 | 
 118 |   '@vue/runtime-core@3.5.12':
 119 |     resolution: {integrity: sha512-hrMUYV6tpocr3TL3Ad8DqxOdpDe4zuQY4HPY3X/VRh+L2myQO8MFXPAMarIOSGNu0bFAjh1yBkMPXZBqCk62Uw==}
 120 | 
 121 |   '@vue/runtime-dom@3.5.12':
 122 |     resolution: {integrity: sha512-q8VFxR9A2MRfBr6/55Q3umyoN7ya836FzRXajPB6/Vvuv0zOPL+qltd9rIMzG/DbRLAIlREmnLsplEF/kotXKA==}
 123 | 
 124 |   '@vue/server-renderer@3.5.12':
 125 |     resolution: {integrity: sha512-I3QoeDDeEPZm8yR28JtY+rk880Oqmj43hreIBVTicisFTx/Dl7JpG72g/X7YF8hnQD3IFhkky5i2bPonwrTVPg==}
 126 |     peerDependencies:
 127 |       vue: 3.5.12
 128 | 
 129 |   '@vue/shared@3.5.12':
 130 |     resolution: {integrity: sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg==}
 131 | 
 132 |   acorn@7.4.1:
 133 |     resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==}
 134 |     engines: {node: '>=0.4.0'}
 135 |     hasBin: true
 136 | 
 137 |   asap@2.0.6:
 138 |     resolution: {integrity: sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==}
 139 | 
 140 |   assert-never@1.3.0:
 141 |     resolution: {integrity: sha512-9Z3vxQ+berkL/JJo0dK+EY3Lp0s3NtSnP3VCLsh5HDcZPrh0M+KQRK5sWhUeyPPH+/RCxZqOxLMR+YC6vlviEQ==}
 142 | 
 143 |   babel-walk@3.0.0-canary-5:
 144 |     resolution: {integrity: sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw==}
 145 |     engines: {node: '>= 10.0.0'}
 146 | 
 147 |   call-bind@1.0.7:
 148 |     resolution: {integrity: sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==}
 149 |     engines: {node: '>= 0.4'}
 150 | 
 151 |   character-parser@2.2.0:
 152 |     resolution: {integrity: sha512-+UqJQjFEFaTAs3bNsF2j2kEN1baG/zghZbdqoYEDxGZtJo9LBzl1A+m0D4n3qKx8N2FNv8/Xp6yV9mQmBuptaw==}
 153 | 
 154 |   commander@8.3.0:
 155 |     resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
 156 |     engines: {node: '>= 12'}
 157 | 
 158 |   constantinople@4.0.1:
 159 |     resolution: {integrity: sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==}
 160 | 
 161 |   csstype@3.1.3:
 162 |     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 163 | 
 164 |   define-data-property@1.1.4:
 165 |     resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
 166 |     engines: {node: '>= 0.4'}
 167 | 
 168 |   doctypes@1.1.0:
 169 |     resolution: {integrity: sha512-LLBi6pEqS6Do3EKQ3J0NqHWV5hhb78Pi8vvESYwyOy2c31ZEZVdtitdzsQsKb7878PEERhzUk0ftqGhG6Mz+pQ==}
 170 | 
 171 |   dom-serializer@1.4.1:
 172 |     resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==}
 173 | 
 174 |   domelementtype@2.3.0:
 175 |     resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
 176 | 
 177 |   domhandler@4.3.1:
 178 |     resolution: {integrity: sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==}
 179 |     engines: {node: '>= 4'}
 180 | 
 181 |   domutils@2.8.0:
 182 |     resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==}
 183 | 
 184 |   emmet@2.4.11:
 185 |     resolution: {integrity: sha512-23QPJB3moh/U9sT4rQzGgeyyGIrcM+GH5uVYg2C6wZIxAIJq7Ng3QLT79tl8FUwDXhyq9SusfknOrofAKqvgyQ==}
 186 | 
 187 |   entities@2.2.0:
 188 |     resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}
 189 | 
 190 |   entities@3.0.1:
 191 |     resolution: {integrity: sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==}
 192 |     engines: {node: '>=0.12'}
 193 | 
 194 |   entities@4.5.0:
 195 |     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
 196 |     engines: {node: '>=0.12'}
 197 | 
 198 |   es-define-property@1.0.0:
 199 |     resolution: {integrity: sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==}
 200 |     engines: {node: '>= 0.4'}
 201 | 
 202 |   es-errors@1.3.0:
 203 |     resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
 204 |     engines: {node: '>= 0.4'}
 205 | 
 206 |   esbuild-android-64@0.14.54:
 207 |     resolution: {integrity: sha512-Tz2++Aqqz0rJ7kYBfz+iqyE3QMycD4vk7LBRyWaAVFgFtQ/O8EJOnVmTOiDWYZ/uYzB4kvP+bqejYdVKzE5lAQ==}
 208 |     engines: {node: '>=12'}
 209 |     cpu: [x64]
 210 |     os: [android]
 211 | 
 212 |   esbuild-android-arm64@0.14.54:
 213 |     resolution: {integrity: sha512-F9E+/QDi9sSkLaClO8SOV6etqPd+5DgJje1F9lOWoNncDdOBL2YF59IhsWATSt0TLZbYCf3pNlTHvVV5VfHdvg==}
 214 |     engines: {node: '>=12'}
 215 |     cpu: [arm64]
 216 |     os: [android]
 217 | 
 218 |   esbuild-darwin-64@0.14.54:
 219 |     resolution: {integrity: sha512-jtdKWV3nBviOd5v4hOpkVmpxsBy90CGzebpbO9beiqUYVMBtSc0AL9zGftFuBon7PNDcdvNCEuQqw2x0wP9yug==}
 220 |     engines: {node: '>=12'}
 221 |     cpu: [x64]
 222 |     os: [darwin]
 223 | 
 224 |   esbuild-darwin-arm64@0.14.54:
 225 |     resolution: {integrity: sha512-OPafJHD2oUPyvJMrsCvDGkRrVCar5aVyHfWGQzY1dWnzErjrDuSETxwA2HSsyg2jORLY8yBfzc1MIpUkXlctmw==}
 226 |     engines: {node: '>=12'}
 227 |     cpu: [arm64]
 228 |     os: [darwin]
 229 | 
 230 |   esbuild-freebsd-64@0.14.54:
 231 |     resolution: {integrity: sha512-OKwd4gmwHqOTp4mOGZKe/XUlbDJ4Q9TjX0hMPIDBUWWu/kwhBAudJdBoxnjNf9ocIB6GN6CPowYpR/hRCbSYAg==}
 232 |     engines: {node: '>=12'}
 233 |     cpu: [x64]
 234 |     os: [freebsd]
 235 | 
 236 |   esbuild-freebsd-arm64@0.14.54:
 237 |     resolution: {integrity: sha512-sFwueGr7OvIFiQT6WeG0jRLjkjdqWWSrfbVwZp8iMP+8UHEHRBvlaxL6IuKNDwAozNUmbb8nIMXa7oAOARGs1Q==}
 238 |     engines: {node: '>=12'}
 239 |     cpu: [arm64]
 240 |     os: [freebsd]
 241 | 
 242 |   esbuild-linux-32@0.14.54:
 243 |     resolution: {integrity: sha512-1ZuY+JDI//WmklKlBgJnglpUL1owm2OX+8E1syCD6UAxcMM/XoWd76OHSjl/0MR0LisSAXDqgjT3uJqT67O3qw==}
 244 |     engines: {node: '>=12'}
 245 |     cpu: [ia32]
 246 |     os: [linux]
 247 | 
 248 |   esbuild-linux-64@0.14.54:
 249 |     resolution: {integrity: sha512-EgjAgH5HwTbtNsTqQOXWApBaPVdDn7XcK+/PtJwZLT1UmpLoznPd8c5CxqsH2dQK3j05YsB3L17T8vE7cp4cCg==}
 250 |     engines: {node: '>=12'}
 251 |     cpu: [x64]
 252 |     os: [linux]
 253 | 
 254 |   esbuild-linux-arm64@0.14.54:
 255 |     resolution: {integrity: sha512-WL71L+0Rwv+Gv/HTmxTEmpv0UgmxYa5ftZILVi2QmZBgX3q7+tDeOQNqGtdXSdsL8TQi1vIaVFHUPDe0O0kdig==}
 256 |     engines: {node: '>=12'}
 257 |     cpu: [arm64]
 258 |     os: [linux]
 259 | 
 260 |   esbuild-linux-arm@0.14.54:
 261 |     resolution: {integrity: sha512-qqz/SjemQhVMTnvcLGoLOdFpCYbz4v4fUo+TfsWG+1aOu70/80RV6bgNpR2JCrppV2moUQkww+6bWxXRL9YMGw==}
 262 |     engines: {node: '>=12'}
 263 |     cpu: [arm]
 264 |     os: [linux]
 265 | 
 266 |   esbuild-linux-mips64le@0.14.54:
 267 |     resolution: {integrity: sha512-qTHGQB8D1etd0u1+sB6p0ikLKRVuCWhYQhAHRPkO+OF3I/iSlTKNNS0Lh2Oc0g0UFGguaFZZiPJdJey3AGpAlw==}
 268 |     engines: {node: '>=12'}
 269 |     cpu: [mips64el]
 270 |     os: [linux]
 271 | 
 272 |   esbuild-linux-ppc64le@0.14.54:
 273 |     resolution: {integrity: sha512-j3OMlzHiqwZBDPRCDFKcx595XVfOfOnv68Ax3U4UKZ3MTYQB5Yz3X1mn5GnodEVYzhtZgxEBidLWeIs8FDSfrQ==}
 274 |     engines: {node: '>=12'}
 275 |     cpu: [ppc64]
 276 |     os: [linux]
 277 | 
 278 |   esbuild-linux-riscv64@0.14.54:
 279 |     resolution: {integrity: sha512-y7Vt7Wl9dkOGZjxQZnDAqqn+XOqFD7IMWiewY5SPlNlzMX39ocPQlOaoxvT4FllA5viyV26/QzHtvTjVNOxHZg==}
 280 |     engines: {node: '>=12'}
 281 |     cpu: [riscv64]
 282 |     os: [linux]
 283 | 
 284 |   esbuild-linux-s390x@0.14.54:
 285 |     resolution: {integrity: sha512-zaHpW9dziAsi7lRcyV4r8dhfG1qBidQWUXweUjnw+lliChJqQr+6XD71K41oEIC3Mx1KStovEmlzm+MkGZHnHA==}
 286 |     engines: {node: '>=12'}
 287 |     cpu: [s390x]
 288 |     os: [linux]
 289 | 
 290 |   esbuild-netbsd-64@0.14.54:
 291 |     resolution: {integrity: sha512-PR01lmIMnfJTgeU9VJTDY9ZerDWVFIUzAtJuDHwwceppW7cQWjBBqP48NdeRtoP04/AtO9a7w3viI+PIDr6d+w==}
 292 |     engines: {node: '>=12'}
 293 |     cpu: [x64]
 294 |     os: [netbsd]
 295 | 
 296 |   esbuild-openbsd-64@0.14.54:
 297 |     resolution: {integrity: sha512-Qyk7ikT2o7Wu76UsvvDS5q0amJvmRzDyVlL0qf5VLsLchjCa1+IAvd8kTBgUxD7VBUUVgItLkk609ZHUc1oCaw==}
 298 |     engines: {node: '>=12'}
 299 |     cpu: [x64]
 300 |     os: [openbsd]
 301 | 
 302 |   esbuild-sunos-64@0.14.54:
 303 |     resolution: {integrity: sha512-28GZ24KmMSeKi5ueWzMcco6EBHStL3B6ubM7M51RmPwXQGLe0teBGJocmWhgwccA1GeFXqxzILIxXpHbl9Q/Kw==}
 304 |     engines: {node: '>=12'}
 305 |     cpu: [x64]
 306 |     os: [sunos]
 307 | 
 308 |   esbuild-windows-32@0.14.54:
 309 |     resolution: {integrity: sha512-T+rdZW19ql9MjS7pixmZYVObd9G7kcaZo+sETqNH4RCkuuYSuv9AGHUVnPoP9hhuE1WM1ZimHz1CIBHBboLU7w==}
 310 |     engines: {node: '>=12'}
 311 |     cpu: [ia32]
 312 |     os: [win32]
 313 | 
 314 |   esbuild-windows-64@0.14.54:
 315 |     resolution: {integrity: sha512-AoHTRBUuYwXtZhjXZbA1pGfTo8cJo3vZIcWGLiUcTNgHpJJMC1rVA44ZereBHMJtotyN71S8Qw0npiCIkW96cQ==}
 316 |     engines: {node: '>=12'}
 317 |     cpu: [x64]
 318 |     os: [win32]
 319 | 
 320 |   esbuild-windows-arm64@0.14.54:
 321 |     resolution: {integrity: sha512-M0kuUvXhot1zOISQGXwWn6YtS+Y/1RT9WrVIOywZnJHo3jCDyewAc79aKNQWFCQm+xNHVTq9h8dZKvygoXQQRg==}
 322 |     engines: {node: '>=12'}
 323 |     cpu: [arm64]
 324 |     os: [win32]
 325 | 
 326 |   esbuild@0.14.54:
 327 |     resolution: {integrity: sha512-Cy9llcy8DvET5uznocPyqL3BFRrFXSVqbgpMJ9Wz8oVjZlh/zUSNbPRbov0VX7VxN2JH1Oa0uNxZ7eLRb62pJA==}
 328 |     engines: {node: '>=12'}
 329 |     hasBin: true
 330 | 
 331 |   estree-walker@2.0.2:
 332 |     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
 333 | 
 334 |   fsevents@2.3.3:
 335 |     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
 336 |     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
 337 |     os: [darwin]
 338 | 
 339 |   function-bind@1.1.2:
 340 |     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 341 | 
 342 |   get-intrinsic@1.2.4:
 343 |     resolution: {integrity: sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==}
 344 |     engines: {node: '>= 0.4'}
 345 | 
 346 |   gopd@1.0.1:
 347 |     resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
 348 | 
 349 |   has-property-descriptors@1.0.2:
 350 |     resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
 351 | 
 352 |   has-proto@1.0.3:
 353 |     resolution: {integrity: sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==}
 354 |     engines: {node: '>= 0.4'}
 355 | 
 356 |   has-symbols@1.0.3:
 357 |     resolution: {integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==}
 358 |     engines: {node: '>= 0.4'}
 359 | 
 360 |   has-tostringtag@1.0.2:
 361 |     resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
 362 |     engines: {node: '>= 0.4'}
 363 | 
 364 |   hasown@2.0.2:
 365 |     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
 366 |     engines: {node: '>= 0.4'}
 367 | 
 368 |   htmlparser2@7.2.0:
 369 |     resolution: {integrity: sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==}
 370 | 
 371 |   is-core-module@2.15.1:
 372 |     resolution: {integrity: sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==}
 373 |     engines: {node: '>= 0.4'}
 374 | 
 375 |   is-expression@4.0.0:
 376 |     resolution: {integrity: sha512-zMIXX63sxzG3XrkHkrAPvm/OVZVSCPNkwMHU8oTX7/U3AL78I0QXCEICXUM13BIa8TYGZ68PiTKfQz3yaTNr4A==}
 377 | 
 378 |   is-promise@2.2.2:
 379 |     resolution: {integrity: sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==}
 380 | 
 381 |   is-regex@1.1.4:
 382 |     resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
 383 |     engines: {node: '>= 0.4'}
 384 | 
 385 |   js-stringify@1.0.2:
 386 |     resolution: {integrity: sha512-rtS5ATOo2Q5k1G+DADISilDA6lv79zIiwFd6CcjuIxGKLFm5C+RLImRscVap9k55i+MOZwgliw+NejvkLuGD5g==}
 387 | 
 388 |   jsonc-parser@2.3.1:
 389 |     resolution: {integrity: sha512-H8jvkz1O50L3dMZCsLqiuB2tA7muqbSg1AtGEkN0leAqGjsUzDJir3Zwr02BhqdcITPg3ei3mZ+HjMocAknhhg==}
 390 | 
 391 |   jsonc-parser@3.3.1:
 392 |     resolution: {integrity: sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==}
 393 | 
 394 |   jstransformer@1.0.0:
 395 |     resolution: {integrity: sha1-7Yvwkh4vPx7U1cGkT2hwntJHIsM=}
 396 | 
 397 |   katex@0.15.6:
 398 |     resolution: {integrity: sha512-UpzJy4yrnqnhXvRPhjEuLA4lcPn6eRngixW7Q3TJErjg3Aw2PuLFBzTkdUb89UtumxjhHTqL3a5GDGETMSwgJA==}
 399 |     hasBin: true
 400 | 
 401 |   magic-string@0.30.12:
 402 |     resolution: {integrity: sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==}
 403 | 
 404 |   nanoid@3.3.7:
 405 |     resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
 406 |     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
 407 |     hasBin: true
 408 | 
 409 |   object-assign@4.1.1:
 410 |     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
 411 |     engines: {node: '>=0.10.0'}
 412 | 
 413 |   path-parse@1.0.7:
 414 |     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 415 | 
 416 |   picocolors@1.1.1:
 417 |     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 418 | 
 419 |   postcss@8.4.47:
 420 |     resolution: {integrity: sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==}
 421 |     engines: {node: ^10 || ^12 || >=14}
 422 | 
 423 |   prismjs@1.29.0:
 424 |     resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
 425 |     engines: {node: '>=6'}
 426 | 
 427 |   promise@7.3.1:
 428 |     resolution: {integrity: sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==}
 429 | 
 430 |   pug-attrs@3.0.0:
 431 |     resolution: {integrity: sha512-azINV9dUtzPMFQktvTXciNAfAuVh/L/JCl0vtPCwvOA21uZrC08K/UnmrL+SXGEVc1FwzjW62+xw5S/uaLj6cA==}
 432 | 
 433 |   pug-code-gen@3.0.3:
 434 |     resolution: {integrity: sha512-cYQg0JW0w32Ux+XTeZnBEeuWrAY7/HNE6TWnhiHGnnRYlCgyAUPoyh9KzCMa9WhcJlJ1AtQqpEYHc+vbCzA+Aw==}
 435 | 
 436 |   pug-error@2.1.0:
 437 |     resolution: {integrity: sha512-lv7sU9e5Jk8IeUheHata6/UThZ7RK2jnaaNztxfPYUY+VxZyk/ePVaNZ/vwmH8WqGvDz3LrNYt/+gA55NDg6Pg==}
 438 | 
 439 |   pug-filters@4.0.0:
 440 |     resolution: {integrity: sha512-yeNFtq5Yxmfz0f9z2rMXGw/8/4i1cCFecw/Q7+D0V2DdtII5UvqE12VaZ2AY7ri6o5RNXiweGH79OCq+2RQU4A==}
 441 | 
 442 |   pug-lexer@5.0.1:
 443 |     resolution: {integrity: sha512-0I6C62+keXlZPZkOJeVam9aBLVP2EnbeDw3An+k0/QlqdwH6rv8284nko14Na7c0TtqtogfWXcRoFE4O4Ff20w==}
 444 | 
 445 |   pug-linker@4.0.0:
 446 |     resolution: {integrity: sha512-gjD1yzp0yxbQqnzBAdlhbgoJL5qIFJw78juN1NpTLt/mfPJ5VgC4BvkoD3G23qKzJtIIXBbcCt6FioLSFLOHdw==}
 447 | 
 448 |   pug-load@3.0.0:
 449 |     resolution: {integrity: sha512-OCjTEnhLWZBvS4zni/WUMjH2YSUosnsmjGBB1An7CsKQarYSWQ0GCVyd4eQPMFJqZ8w9xgs01QdiZXKVjk92EQ==}
 450 | 
 451 |   pug-parser@6.0.0:
 452 |     resolution: {integrity: sha512-ukiYM/9cH6Cml+AOl5kETtM9NR3WulyVP2y4HOU45DyMim1IeP/OOiyEWRr6qk5I5klpsBnbuHpwKmTx6WURnw==}
 453 | 
 454 |   pug-runtime@3.0.1:
 455 |     resolution: {integrity: sha512-L50zbvrQ35TkpHwv0G6aLSuueDRwc/97XdY8kL3tOT0FmhgG7UypU3VztfV/LATAvmUfYi4wNxSajhSAeNN+Kg==}
 456 | 
 457 |   pug-strip-comments@2.0.0:
 458 |     resolution: {integrity: sha512-zo8DsDpH7eTkPHCXFeAk1xZXJbyoTfdPlNR0bK7rpOMuhBYb0f5qUVCO1xlsitYd3w5FQTK7zpNVKb3rZoUrrQ==}
 459 | 
 460 |   pug-walk@2.0.0:
 461 |     resolution: {integrity: sha512-yYELe9Q5q9IQhuvqsZNwA5hfPkMJ8u92bQLIMcsMxf/VADjNtEYptU+inlufAFYcWdHlwNfZOEnOOQrZrcyJCQ==}
 462 | 
 463 |   pug@3.0.3:
 464 |     resolution: {integrity: sha512-uBi6kmc9f3SZ3PXxqcHiUZLmIXgfgWooKWXcwSGwQd2Zi5Rb0bT14+8CJjJgI8AB+nndLaNgHGrcc6bPIB665g==}
 465 | 
 466 |   request-light@0.5.8:
 467 |     resolution: {integrity: sha512-3Zjgh+8b5fhRJBQZoy+zbVKpAQGLyka0MPgW3zruTF4dFFJ8Fqcfu9YsAvi/rvdcaTeWG3MkbZv4WKxAn/84Lg==}
 468 | 
 469 |   resolve@1.22.8:
 470 |     resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
 471 |     hasBin: true
 472 | 
 473 |   rollup@2.77.3:
 474 |     resolution: {integrity: sha512-/qxNTG7FbmefJWoeeYJFbHehJ2HNWnjkAFRKzWN/45eNBBF/r8lo992CwcJXEzyVxs5FmfId+vTSTQDb+bxA+g==}
 475 |     engines: {node: '>=10.0.0'}
 476 |     hasBin: true
 477 | 
 478 |   semver@7.6.3:
 479 |     resolution: {integrity: sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==}
 480 |     engines: {node: '>=10'}
 481 |     hasBin: true
 482 | 
 483 |   set-function-length@1.2.2:
 484 |     resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
 485 |     engines: {node: '>= 0.4'}
 486 | 
 487 |   source-map-js@1.2.1:
 488 |     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
 489 |     engines: {node: '>=0.10.0'}
 490 | 
 491 |   supports-preserve-symlinks-flag@1.0.0:
 492 |     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
 493 |     engines: {node: '>= 0.4'}
 494 | 
 495 |   token-stream@1.0.0:
 496 |     resolution: {integrity: sha1-zCAOqyYT9BZtJ/+a/HylbUnfbrQ=}
 497 | 
 498 |   typescript@4.9.5:
 499 |     resolution: {integrity: sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==}
 500 |     engines: {node: '>=4.2.0'}
 501 |     hasBin: true
 502 | 
 503 |   upath@2.0.1:
 504 |     resolution: {integrity: sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==}
 505 |     engines: {node: '>=4'}
 506 | 
 507 |   vite@2.9.18:
 508 |     resolution: {integrity: sha512-sAOqI5wNM9QvSEE70W3UGMdT8cyEn0+PmJMTFvTB8wB0YbYUWw3gUbY62AOyrXosGieF2htmeLATvNxpv/zNyQ==}
 509 |     engines: {node: '>=12.2.0'}
 510 |     hasBin: true
 511 |     peerDependencies:
 512 |       less: '*'
 513 |       sass: '*'
 514 |       stylus: '*'
 515 |     peerDependenciesMeta:
 516 |       less:
 517 |         optional: true
 518 |       sass:
 519 |         optional: true
 520 |       stylus:
 521 |         optional: true
 522 | 
 523 |   void-elements@3.1.0:
 524 |     resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
 525 |     engines: {node: '>=0.10.0'}
 526 | 
 527 |   vscode-css-languageservice@5.4.2:
 528 |     resolution: {integrity: sha512-DT7+7vfdT2HDNjDoXWtYJ0lVDdeDEdbMNdK4PKqUl2MS8g7PWt7J5G9B6k9lYox8nOfhCEjLnoNC3UKHHCR1lg==}
 529 | 
 530 |   vscode-html-languageservice@4.2.5:
 531 |     resolution: {integrity: sha512-dbr10KHabB9EaK8lI0XZW7SqOsTfrNyT3Nuj0GoPi4LjGKUmMiLtsqzfedIzRTzqY+w0FiLdh0/kQrnQ0tLxrw==}
 532 | 
 533 |   vscode-json-languageservice@4.2.1:
 534 |     resolution: {integrity: sha512-xGmv9QIWs2H8obGbWg+sIPI/3/pFgj/5OWBhNzs00BkYQ9UaB2F6JJaGB/2/YOZJ3BvLXQTC4Q7muqU25QgAhA==}
 535 | 
 536 |   vscode-jsonrpc@8.1.0:
 537 |     resolution: {integrity: sha512-6TDy/abTQk+zDGYazgbIPc+4JoXdwC8NHU9Pbn4UJP1fehUyZmM4RHp5IthX7A6L5KS30PRui+j+tbbMMMafdw==}
 538 |     engines: {node: '>=14.0.0'}
 539 | 
 540 |   vscode-jsonrpc@8.2.1:
 541 |     resolution: {integrity: sha512-kdjOSJ2lLIn7r1rtrMbbNCHjyMPfRnowdKjBQ+mGq6NAW5QY2bEZC/khaC5OR8svbbjvLEaIXkOq45e2X9BIbQ==}
 542 |     engines: {node: '>=14.0.0'}
 543 | 
 544 |   vscode-languageserver-protocol@3.17.3:
 545 |     resolution: {integrity: sha512-924/h0AqsMtA5yK22GgMtCYiMdCOtWTSGgUOkgEDX+wk2b0x4sAfLiO4NxBxqbiVtz7K7/1/RgVrVI0NClZwqA==}
 546 | 
 547 |   vscode-languageserver-textdocument@1.0.12:
 548 |     resolution: {integrity: sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA==}
 549 | 
 550 |   vscode-languageserver-types@3.17.3:
 551 |     resolution: {integrity: sha512-SYU4z1dL0PyIMd4Vj8YOqFvHu7Hz/enbWtpfnVbJHU4Nd1YNYx8u0ennumc6h48GQNeOLxmwySmnADouT/AuZA==}
 552 | 
 553 |   vscode-languageserver-types@3.17.5:
 554 |     resolution: {integrity: sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg==}
 555 | 
 556 |   vscode-languageserver@8.1.0:
 557 |     resolution: {integrity: sha512-eUt8f1z2N2IEUDBsKaNapkz7jl5QpskN2Y0G01T/ItMxBxw1fJwvtySGB9QMecatne8jFIWJGWI61dWjyTLQsw==}
 558 |     hasBin: true
 559 | 
 560 |   vscode-nls@5.2.0:
 561 |     resolution: {integrity: sha512-RAaHx7B14ZU04EU31pT+rKz2/zSl7xMsfIZuo8pd+KZO6PXtQmpevpq3vxvWNcrGbdmhM/rr5Uw5Mz+NBfhVng==}
 562 | 
 563 |   vscode-pug-languageservice@0.29.8:
 564 |     resolution: {integrity: sha512-QHYAzDSJLg7GOLxCZ12qsM0dAM0dPeMSS1t4kKfzLsfpErmZpFzkAIXbidVrNMdMffGZMtTuIlcpEyWHbx96Iw==}
 565 |     deprecated: 'WARNING: This project has been renamed to @volar/pug-language-service. Install using @volar/pug-language-service instead.'
 566 | 
 567 |   vscode-typescript-languageservice@0.29.8:
 568 |     resolution: {integrity: sha512-eecDqHk4WjEvy6VHQ6teHczppQ9yJO2wExCy7yu7WiFj35qbw0h4G6Erv46MvP3ClL8FggFzD7s1qM6vdqJUfw==}
 569 |     deprecated: 'WARNING: This project has been renamed to @volar/typescript-language-service. Install using @volar/typescript-language-service instead.'
 570 | 
 571 |   vscode-uri@2.1.2:
 572 |     resolution: {integrity: sha512-8TEXQxlldWAuIODdukIb+TR5s+9Ds40eSJrw+1iDDA9IFORPjMELarNQE3myz5XIkWWpdprmJjm1/SxMlWOC8A==}
 573 | 
 574 |   vscode-uri@3.0.8:
 575 |     resolution: {integrity: sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==}
 576 | 
 577 |   vscode-vue-languageservice@0.29.8:
 578 |     resolution: {integrity: sha512-qSJdvW5ttyGUB/8uWDKgo8vnIoFnXYlBP4Z/cn54btsRn6ZMw7IJGJU1381e7p/yGvMTLeGbugD53SghbnSa6g==}
 579 |     deprecated: 'WARNING: This project has been renamed to @volar/vue-language-service. Install using @volar/vue-language-service instead.'
 580 | 
 581 |   vue-router@4.4.5:
 582 |     resolution: {integrity: sha512-4fKZygS8cH1yCyuabAXGUAsyi1b2/o/OKgu/RUb+znIYOxPRxdkytJEx+0wGcpBE1pX6vUgh5jwWOKRGvuA/7Q==}
 583 |     peerDependencies:
 584 |       vue: ^3.2.0
 585 | 
 586 |   vue-tsc@0.29.8:
 587 |     resolution: {integrity: sha512-pT0wLRjvRuSmB+J4WJT6uuV9mO0KtSSXEAtaVXZQzyk5+DJdbLIQTbRce/TXSkfqt1l1WogO78RjtOJFiMCgfQ==}
 588 |     hasBin: true
 589 |     peerDependencies:
 590 |       typescript: '*'
 591 | 
 592 |   vue3-notion@0.1.46:
 593 |     resolution: {integrity: sha512-Y+d/rjZtTfMcpy0IVtsIXKw+0gXXZSBjrlfgqGGccDi8MTMOcxAaXlo1tiTRuJHEjSZpTmdHtuC+Ve5ZZdkPng==}
 594 |     peerDependencies:
 595 |       katex: ^0.15.1
 596 |       prismjs: ^1.25.0
 597 |       vue: ^3.2.20
 598 | 
 599 |   vue@3.5.12:
 600 |     resolution: {integrity: sha512-CLVZtXtn2ItBIi/zHZ0Sg1Xkb7+PU32bJJ8Bmy7ts3jxXTcbfsEfBivFYYWz1Hur+lalqGAh65Coin0r+HRUfg==}
 601 |     peerDependencies:
 602 |       typescript: '*'
 603 |     peerDependenciesMeta:
 604 |       typescript:
 605 |         optional: true
 606 | 
 607 |   with@7.0.2:
 608 |     resolution: {integrity: sha512-RNGKj82nUPg3g5ygxkQl0R937xLyho1J24ItRCBTr/m1YnZkzJy1hUiHUJrc/VlsDQzsCnInEGSg3bci0Lmd4w==}
 609 |     engines: {node: '>= 10.0.0'}
 610 | 
 611 | snapshots:
 612 | 
 613 |   '@babel/helper-string-parser@7.25.9': {}
 614 | 
 615 |   '@babel/helper-validator-identifier@7.25.9': {}
 616 | 
 617 |   '@babel/parser@7.26.2':
 618 |     dependencies:
 619 |       '@babel/types': 7.26.0
 620 | 
 621 |   '@babel/types@7.26.0':
 622 |     dependencies:
 623 |       '@babel/helper-string-parser': 7.25.9
 624 |       '@babel/helper-validator-identifier': 7.25.9
 625 | 
 626 |   '@emmetio/abbreviation@2.3.3':
 627 |     dependencies:
 628 |       '@emmetio/scanner': 1.0.4
 629 | 
 630 |   '@emmetio/css-abbreviation@2.1.8':
 631 |     dependencies:
 632 |       '@emmetio/scanner': 1.0.4
 633 | 
 634 |   '@emmetio/scanner@1.0.4': {}
 635 | 
 636 |   '@esbuild/linux-loong64@0.14.54':
 637 |     optional: true
 638 | 
 639 |   '@jridgewell/sourcemap-codec@1.5.0': {}
 640 | 
 641 |   '@vitejs/plugin-vue@2.3.4(vite@2.9.18)(vue@3.5.12(typescript@4.9.5))':
 642 |     dependencies:
 643 |       vite: 2.9.18
 644 |       vue: 3.5.12(typescript@4.9.5)
 645 | 
 646 |   '@volar/code-gen@0.29.8':
 647 |     dependencies:
 648 |       '@volar/shared': 0.29.8
 649 |       '@volar/source-map': 0.29.8
 650 | 
 651 |   '@volar/html2pug@0.29.8':
 652 |     dependencies:
 653 |       domelementtype: 2.3.0
 654 |       domhandler: 4.3.1
 655 |       htmlparser2: 7.2.0
 656 |       pug: 3.0.3
 657 | 
 658 |   '@volar/shared@0.29.8':
 659 |     dependencies:
 660 |       upath: 2.0.1
 661 |       vscode-jsonrpc: 8.2.1
 662 |       vscode-uri: 3.0.8
 663 | 
 664 |   '@volar/source-map@0.29.8':
 665 |     dependencies:
 666 |       '@volar/shared': 0.29.8
 667 | 
 668 |   '@volar/transforms@0.29.8':
 669 |     dependencies:
 670 |       '@volar/shared': 0.29.8
 671 |       vscode-languageserver: 8.1.0
 672 | 
 673 |   '@volar/vue-code-gen@0.29.8':
 674 |     dependencies:
 675 |       '@volar/code-gen': 0.29.8
 676 |       '@volar/shared': 0.29.8
 677 |       '@volar/source-map': 0.29.8
 678 |       '@vue/compiler-core': 3.5.12
 679 |       '@vue/compiler-dom': 3.5.12
 680 |       '@vue/shared': 3.5.12
 681 |       upath: 2.0.1
 682 | 
 683 |   '@vscode/emmet-helper@2.9.3':
 684 |     dependencies:
 685 |       emmet: 2.4.11
 686 |       jsonc-parser: 2.3.1
 687 |       vscode-languageserver-textdocument: 1.0.12
 688 |       vscode-languageserver-types: 3.17.5
 689 |       vscode-uri: 2.1.2
 690 | 
 691 |   '@vue/compiler-core@3.5.12':
 692 |     dependencies:
 693 |       '@babel/parser': 7.26.2
 694 |       '@vue/shared': 3.5.12
 695 |       entities: 4.5.0
 696 |       estree-walker: 2.0.2
 697 |       source-map-js: 1.2.1
 698 | 
 699 |   '@vue/compiler-dom@3.5.12':
 700 |     dependencies:
 701 |       '@vue/compiler-core': 3.5.12
 702 |       '@vue/shared': 3.5.12
 703 | 
 704 |   '@vue/compiler-sfc@3.5.12':
 705 |     dependencies:
 706 |       '@babel/parser': 7.26.2
 707 |       '@vue/compiler-core': 3.5.12
 708 |       '@vue/compiler-dom': 3.5.12
 709 |       '@vue/compiler-ssr': 3.5.12
 710 |       '@vue/shared': 3.5.12
 711 |       estree-walker: 2.0.2
 712 |       magic-string: 0.30.12
 713 |       postcss: 8.4.47
 714 |       source-map-js: 1.2.1
 715 | 
 716 |   '@vue/compiler-ssr@3.5.12':
 717 |     dependencies:
 718 |       '@vue/compiler-dom': 3.5.12
 719 |       '@vue/shared': 3.5.12
 720 | 
 721 |   '@vue/devtools-api@6.6.4': {}
 722 | 
 723 |   '@vue/reactivity@3.5.12':
 724 |     dependencies:
 725 |       '@vue/shared': 3.5.12
 726 | 
 727 |   '@vue/runtime-core@3.5.12':
 728 |     dependencies:
 729 |       '@vue/reactivity': 3.5.12
 730 |       '@vue/shared': 3.5.12
 731 | 
 732 |   '@vue/runtime-dom@3.5.12':
 733 |     dependencies:
 734 |       '@vue/reactivity': 3.5.12
 735 |       '@vue/runtime-core': 3.5.12
 736 |       '@vue/shared': 3.5.12
 737 |       csstype: 3.1.3
 738 | 
 739 |   '@vue/server-renderer@3.5.12(vue@3.5.12(typescript@4.9.5))':
 740 |     dependencies:
 741 |       '@vue/compiler-ssr': 3.5.12
 742 |       '@vue/shared': 3.5.12
 743 |       vue: 3.5.12(typescript@4.9.5)
 744 | 
 745 |   '@vue/shared@3.5.12': {}
 746 | 
 747 |   acorn@7.4.1: {}
 748 | 
 749 |   asap@2.0.6: {}
 750 | 
 751 |   assert-never@1.3.0: {}
 752 | 
 753 |   babel-walk@3.0.0-canary-5:
 754 |     dependencies:
 755 |       '@babel/types': 7.26.0
 756 | 
 757 |   call-bind@1.0.7:
 758 |     dependencies:
 759 |       es-define-property: 1.0.0
 760 |       es-errors: 1.3.0
 761 |       function-bind: 1.1.2
 762 |       get-intrinsic: 1.2.4
 763 |       set-function-length: 1.2.2
 764 | 
 765 |   character-parser@2.2.0:
 766 |     dependencies:
 767 |       is-regex: 1.1.4
 768 | 
 769 |   commander@8.3.0: {}
 770 | 
 771 |   constantinople@4.0.1:
 772 |     dependencies:
 773 |       '@babel/parser': 7.26.2
 774 |       '@babel/types': 7.26.0
 775 | 
 776 |   csstype@3.1.3: {}
 777 | 
 778 |   define-data-property@1.1.4:
 779 |     dependencies:
 780 |       es-define-property: 1.0.0
 781 |       es-errors: 1.3.0
 782 |       gopd: 1.0.1
 783 | 
 784 |   doctypes@1.1.0: {}
 785 | 
 786 |   dom-serializer@1.4.1:
 787 |     dependencies:
 788 |       domelementtype: 2.3.0
 789 |       domhandler: 4.3.1
 790 |       entities: 2.2.0
 791 | 
 792 |   domelementtype@2.3.0: {}
 793 | 
 794 |   domhandler@4.3.1:
 795 |     dependencies:
 796 |       domelementtype: 2.3.0
 797 | 
 798 |   domutils@2.8.0:
 799 |     dependencies:
 800 |       dom-serializer: 1.4.1
 801 |       domelementtype: 2.3.0
 802 |       domhandler: 4.3.1
 803 | 
 804 |   emmet@2.4.11:
 805 |     dependencies:
 806 |       '@emmetio/abbreviation': 2.3.3
 807 |       '@emmetio/css-abbreviation': 2.1.8
 808 | 
 809 |   entities@2.2.0: {}
 810 | 
 811 |   entities@3.0.1: {}
 812 | 
 813 |   entities@4.5.0: {}
 814 | 
 815 |   es-define-property@1.0.0:
 816 |     dependencies:
 817 |       get-intrinsic: 1.2.4
 818 | 
 819 |   es-errors@1.3.0: {}
 820 | 
 821 |   esbuild-android-64@0.14.54:
 822 |     optional: true
 823 | 
 824 |   esbuild-android-arm64@0.14.54:
 825 |     optional: true
 826 | 
 827 |   esbuild-darwin-64@0.14.54:
 828 |     optional: true
 829 | 
 830 |   esbuild-darwin-arm64@0.14.54:
 831 |     optional: true
 832 | 
 833 |   esbuild-freebsd-64@0.14.54:
 834 |     optional: true
 835 | 
 836 |   esbuild-freebsd-arm64@0.14.54:
 837 |     optional: true
 838 | 
 839 |   esbuild-linux-32@0.14.54:
 840 |     optional: true
 841 | 
 842 |   esbuild-linux-64@0.14.54:
 843 |     optional: true
 844 | 
 845 |   esbuild-linux-arm64@0.14.54:
 846 |     optional: true
 847 | 
 848 |   esbuild-linux-arm@0.14.54:
 849 |     optional: true
 850 | 
 851 |   esbuild-linux-mips64le@0.14.54:
 852 |     optional: true
 853 | 
 854 |   esbuild-linux-ppc64le@0.14.54:
 855 |     optional: true
 856 | 
 857 |   esbuild-linux-riscv64@0.14.54:
 858 |     optional: true
 859 | 
 860 |   esbuild-linux-s390x@0.14.54:
 861 |     optional: true
 862 | 
 863 |   esbuild-netbsd-64@0.14.54:
 864 |     optional: true
 865 | 
 866 |   esbuild-openbsd-64@0.14.54:
 867 |     optional: true
 868 | 
 869 |   esbuild-sunos-64@0.14.54:
 870 |     optional: true
 871 | 
 872 |   esbuild-windows-32@0.14.54:
 873 |     optional: true
 874 | 
 875 |   esbuild-windows-64@0.14.54:
 876 |     optional: true
 877 | 
 878 |   esbuild-windows-arm64@0.14.54:
 879 |     optional: true
 880 | 
 881 |   esbuild@0.14.54:
 882 |     optionalDependencies:
 883 |       '@esbuild/linux-loong64': 0.14.54
 884 |       esbuild-android-64: 0.14.54
 885 |       esbuild-android-arm64: 0.14.54
 886 |       esbuild-darwin-64: 0.14.54
 887 |       esbuild-darwin-arm64: 0.14.54
 888 |       esbuild-freebsd-64: 0.14.54
 889 |       esbuild-freebsd-arm64: 0.14.54
 890 |       esbuild-linux-32: 0.14.54
 891 |       esbuild-linux-64: 0.14.54
 892 |       esbuild-linux-arm: 0.14.54
 893 |       esbuild-linux-arm64: 0.14.54
 894 |       esbuild-linux-mips64le: 0.14.54
 895 |       esbuild-linux-ppc64le: 0.14.54
 896 |       esbuild-linux-riscv64: 0.14.54
 897 |       esbuild-linux-s390x: 0.14.54
 898 |       esbuild-netbsd-64: 0.14.54
 899 |       esbuild-openbsd-64: 0.14.54
 900 |       esbuild-sunos-64: 0.14.54
 901 |       esbuild-windows-32: 0.14.54
 902 |       esbuild-windows-64: 0.14.54
 903 |       esbuild-windows-arm64: 0.14.54
 904 | 
 905 |   estree-walker@2.0.2: {}
 906 | 
 907 |   fsevents@2.3.3:
 908 |     optional: true
 909 | 
 910 |   function-bind@1.1.2: {}
 911 | 
 912 |   get-intrinsic@1.2.4:
 913 |     dependencies:
 914 |       es-errors: 1.3.0
 915 |       function-bind: 1.1.2
 916 |       has-proto: 1.0.3
 917 |       has-symbols: 1.0.3
 918 |       hasown: 2.0.2
 919 | 
 920 |   gopd@1.0.1:
 921 |     dependencies:
 922 |       get-intrinsic: 1.2.4
 923 | 
 924 |   has-property-descriptors@1.0.2:
 925 |     dependencies:
 926 |       es-define-property: 1.0.0
 927 | 
 928 |   has-proto@1.0.3: {}
 929 | 
 930 |   has-symbols@1.0.3: {}
 931 | 
 932 |   has-tostringtag@1.0.2:
 933 |     dependencies:
 934 |       has-symbols: 1.0.3
 935 | 
 936 |   hasown@2.0.2:
 937 |     dependencies:
 938 |       function-bind: 1.1.2
 939 | 
 940 |   htmlparser2@7.2.0:
 941 |     dependencies:
 942 |       domelementtype: 2.3.0
 943 |       domhandler: 4.3.1
 944 |       domutils: 2.8.0
 945 |       entities: 3.0.1
 946 | 
 947 |   is-core-module@2.15.1:
 948 |     dependencies:
 949 |       hasown: 2.0.2
 950 | 
 951 |   is-expression@4.0.0:
 952 |     dependencies:
 953 |       acorn: 7.4.1
 954 |       object-assign: 4.1.1
 955 | 
 956 |   is-promise@2.2.2: {}
 957 | 
 958 |   is-regex@1.1.4:
 959 |     dependencies:
 960 |       call-bind: 1.0.7
 961 |       has-tostringtag: 1.0.2
 962 | 
 963 |   js-stringify@1.0.2: {}
 964 | 
 965 |   jsonc-parser@2.3.1: {}
 966 | 
 967 |   jsonc-parser@3.3.1: {}
 968 | 
 969 |   jstransformer@1.0.0:
 970 |     dependencies:
 971 |       is-promise: 2.2.2
 972 |       promise: 7.3.1
 973 | 
 974 |   katex@0.15.6:
 975 |     dependencies:
 976 |       commander: 8.3.0
 977 | 
 978 |   magic-string@0.30.12:
 979 |     dependencies:
 980 |       '@jridgewell/sourcemap-codec': 1.5.0
 981 | 
 982 |   nanoid@3.3.7: {}
 983 | 
 984 |   object-assign@4.1.1: {}
 985 | 
 986 |   path-parse@1.0.7: {}
 987 | 
 988 |   picocolors@1.1.1: {}
 989 | 
 990 |   postcss@8.4.47:
 991 |     dependencies:
 992 |       nanoid: 3.3.7
 993 |       picocolors: 1.1.1
 994 |       source-map-js: 1.2.1
 995 | 
 996 |   prismjs@1.29.0: {}
 997 | 
 998 |   promise@7.3.1:
 999 |     dependencies:
1000 |       asap: 2.0.6
1001 | 
1002 |   pug-attrs@3.0.0:
1003 |     dependencies:
1004 |       constantinople: 4.0.1
1005 |       js-stringify: 1.0.2
1006 |       pug-runtime: 3.0.1
1007 | 
1008 |   pug-code-gen@3.0.3:
1009 |     dependencies:
1010 |       constantinople: 4.0.1
1011 |       doctypes: 1.1.0
1012 |       js-stringify: 1.0.2
1013 |       pug-attrs: 3.0.0
1014 |       pug-error: 2.1.0
1015 |       pug-runtime: 3.0.1
1016 |       void-elements: 3.1.0
1017 |       with: 7.0.2
1018 | 
1019 |   pug-error@2.1.0: {}
1020 | 
1021 |   pug-filters@4.0.0:
1022 |     dependencies:
1023 |       constantinople: 4.0.1
1024 |       jstransformer: 1.0.0
1025 |       pug-error: 2.1.0
1026 |       pug-walk: 2.0.0
1027 |       resolve: 1.22.8
1028 | 
1029 |   pug-lexer@5.0.1:
1030 |     dependencies:
1031 |       character-parser: 2.2.0
1032 |       is-expression: 4.0.0
1033 |       pug-error: 2.1.0
1034 | 
1035 |   pug-linker@4.0.0:
1036 |     dependencies:
1037 |       pug-error: 2.1.0
1038 |       pug-walk: 2.0.0
1039 | 
1040 |   pug-load@3.0.0:
1041 |     dependencies:
1042 |       object-assign: 4.1.1
1043 |       pug-walk: 2.0.0
1044 | 
1045 |   pug-parser@6.0.0:
1046 |     dependencies:
1047 |       pug-error: 2.1.0
1048 |       token-stream: 1.0.0
1049 | 
1050 |   pug-runtime@3.0.1: {}
1051 | 
1052 |   pug-strip-comments@2.0.0:
1053 |     dependencies:
1054 |       pug-error: 2.1.0
1055 | 
1056 |   pug-walk@2.0.0: {}
1057 | 
1058 |   pug@3.0.3:
1059 |     dependencies:
1060 |       pug-code-gen: 3.0.3
1061 |       pug-filters: 4.0.0
1062 |       pug-lexer: 5.0.1
1063 |       pug-linker: 4.0.0
1064 |       pug-load: 3.0.0
1065 |       pug-parser: 6.0.0
1066 |       pug-runtime: 3.0.1
1067 |       pug-strip-comments: 2.0.0
1068 | 
1069 |   request-light@0.5.8: {}
1070 | 
1071 |   resolve@1.22.8:
1072 |     dependencies:
1073 |       is-core-module: 2.15.1
1074 |       path-parse: 1.0.7
1075 |       supports-preserve-symlinks-flag: 1.0.0
1076 | 
1077 |   rollup@2.77.3:
1078 |     optionalDependencies:
1079 |       fsevents: 2.3.3
1080 | 
1081 |   semver@7.6.3: {}
1082 | 
1083 |   set-function-length@1.2.2:
1084 |     dependencies:
1085 |       define-data-property: 1.1.4
1086 |       es-errors: 1.3.0
1087 |       function-bind: 1.1.2
1088 |       get-intrinsic: 1.2.4
1089 |       gopd: 1.0.1
1090 |       has-property-descriptors: 1.0.2
1091 | 
1092 |   source-map-js@1.2.1: {}
1093 | 
1094 |   supports-preserve-symlinks-flag@1.0.0: {}
1095 | 
1096 |   token-stream@1.0.0: {}
1097 | 
1098 |   typescript@4.9.5: {}
1099 | 
1100 |   upath@2.0.1: {}
1101 | 
1102 |   vite@2.9.18:
1103 |     dependencies:
1104 |       esbuild: 0.14.54
1105 |       postcss: 8.4.47
1106 |       resolve: 1.22.8
1107 |       rollup: 2.77.3
1108 |     optionalDependencies:
1109 |       fsevents: 2.3.3
1110 | 
1111 |   void-elements@3.1.0: {}
1112 | 
1113 |   vscode-css-languageservice@5.4.2:
1114 |     dependencies:
1115 |       vscode-languageserver-textdocument: 1.0.12
1116 |       vscode-languageserver-types: 3.17.5
1117 |       vscode-nls: 5.2.0
1118 |       vscode-uri: 3.0.8
1119 | 
1120 |   vscode-html-languageservice@4.2.5:
1121 |     dependencies:
1122 |       vscode-languageserver-textdocument: 1.0.12
1123 |       vscode-languageserver-types: 3.17.5
1124 |       vscode-nls: 5.2.0
1125 |       vscode-uri: 3.0.8
1126 | 
1127 |   vscode-json-languageservice@4.2.1:
1128 |     dependencies:
1129 |       jsonc-parser: 3.3.1
1130 |       vscode-languageserver-textdocument: 1.0.12
1131 |       vscode-languageserver-types: 3.17.5
1132 |       vscode-nls: 5.2.0
1133 |       vscode-uri: 3.0.8
1134 | 
1135 |   vscode-jsonrpc@8.1.0: {}
1136 | 
1137 |   vscode-jsonrpc@8.2.1: {}
1138 | 
1139 |   vscode-languageserver-protocol@3.17.3:
1140 |     dependencies:
1141 |       vscode-jsonrpc: 8.1.0
1142 |       vscode-languageserver-types: 3.17.3
1143 | 
1144 |   vscode-languageserver-textdocument@1.0.12: {}
1145 | 
1146 |   vscode-languageserver-types@3.17.3: {}
1147 | 
1148 |   vscode-languageserver-types@3.17.5: {}
1149 | 
1150 |   vscode-languageserver@8.1.0:
1151 |     dependencies:
1152 |       vscode-languageserver-protocol: 3.17.3
1153 | 
1154 |   vscode-nls@5.2.0: {}
1155 | 
1156 |   vscode-pug-languageservice@0.29.8:
1157 |     dependencies:
1158 |       '@volar/code-gen': 0.29.8
1159 |       '@volar/shared': 0.29.8
1160 |       '@volar/source-map': 0.29.8
1161 |       '@volar/transforms': 0.29.8
1162 |       pug-lexer: 5.0.1
1163 |       pug-parser: 6.0.0
1164 |       vscode-languageserver: 8.1.0
1165 | 
1166 |   vscode-typescript-languageservice@0.29.8:
1167 |     dependencies:
1168 |       '@volar/shared': 0.29.8
1169 |       semver: 7.6.3
1170 |       upath: 2.0.1
1171 |       vscode-languageserver: 8.1.0
1172 |       vscode-languageserver-textdocument: 1.0.12
1173 | 
1174 |   vscode-uri@2.1.2: {}
1175 | 
1176 |   vscode-uri@3.0.8: {}
1177 | 
1178 |   vscode-vue-languageservice@0.29.8:
1179 |     dependencies:
1180 |       '@volar/code-gen': 0.29.8
1181 |       '@volar/html2pug': 0.29.8
1182 |       '@volar/shared': 0.29.8
1183 |       '@volar/source-map': 0.29.8
1184 |       '@volar/transforms': 0.29.8
1185 |       '@volar/vue-code-gen': 0.29.8
1186 |       '@vscode/emmet-helper': 2.9.3
1187 |       '@vue/reactivity': 3.5.12
1188 |       '@vue/shared': 3.5.12
1189 |       request-light: 0.5.8
1190 |       upath: 2.0.1
1191 |       vscode-css-languageservice: 5.4.2
1192 |       vscode-html-languageservice: 4.2.5
1193 |       vscode-json-languageservice: 4.2.1
1194 |       vscode-languageserver: 8.1.0
1195 |       vscode-languageserver-textdocument: 1.0.12
1196 |       vscode-pug-languageservice: 0.29.8
1197 |       vscode-typescript-languageservice: 0.29.8
1198 | 
1199 |   vue-router@4.4.5(vue@3.5.12(typescript@4.9.5)):
1200 |     dependencies:
1201 |       '@vue/devtools-api': 6.6.4
1202 |       vue: 3.5.12(typescript@4.9.5)
1203 | 
1204 |   vue-tsc@0.29.8(typescript@4.9.5):
1205 |     dependencies:
1206 |       '@volar/shared': 0.29.8
1207 |       typescript: 4.9.5
1208 |       vscode-vue-languageservice: 0.29.8
1209 | 
1210 |   vue3-notion@0.1.46(katex@0.15.6)(prismjs@1.29.0)(vue@3.5.12(typescript@4.9.5)):
1211 |     dependencies:
1212 |       katex: 0.15.6
1213 |       prismjs: 1.29.0
1214 |       vue: 3.5.12(typescript@4.9.5)
1215 | 
1216 |   vue@3.5.12(typescript@4.9.5):
1217 |     dependencies:
1218 |       '@vue/compiler-dom': 3.5.12
1219 |       '@vue/compiler-sfc': 3.5.12
1220 |       '@vue/runtime-dom': 3.5.12
1221 |       '@vue/server-renderer': 3.5.12(vue@3.5.12(typescript@4.9.5))
1222 |       '@vue/shared': 3.5.12
1223 |     optionalDependencies:
1224 |       typescript: 4.9.5
1225 | 
1226 |   with@7.0.2:
1227 |     dependencies:
1228 |       '@babel/parser': 7.26.2
1229 |       '@babel/types': 7.26.0
1230 |       assert-never: 1.3.0
1231 |       babel-walk: 3.0.0-canary-5
1232 | 


--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
   1 | :root {
   2 |   --fg-color: rgb(55, 53, 47);
   3 |   --fg-color-0: rgba(55, 53, 47, 0.09);
   4 |   --fg-color-1: rgba(55, 53, 47, 0.16);
   5 |   --fg-color-2: rgba(55, 53, 47, 0.4);
   6 |   --fg-color-3: rgba(55, 53, 47, 0.6);
   7 |   --fg-color-4: #000;
   8 |   --fg-color-5: rgba(55, 53, 47, 0.024);
   9 |   --fg-color-6: rgba(55, 53, 47, 0.8);
  10 |   --fg-color-icon: var(--fg-color);
  11 | 
  12 |   --bg-color: #fff;
  13 |   --bg-color-0: rgba(135, 131, 120, 0.15);
  14 |   --bg-color-1: rgb(247, 246, 243);
  15 |   --bg-color-2: rgba(135, 131, 120, 0.15);
  16 | 
  17 |   --select-color-0: rgb(46, 170, 220);
  18 |   --select-color-1: rgba(45, 170, 219, 0.3);
  19 |   --select-color-2: #d9eff8;
  20 | 
  21 |   --notion-red: rgb(224, 62, 62);
  22 |   --notion-pink: rgb(173, 26, 114);
  23 |   --notion-blue: rgb(11, 110, 153);
  24 |   --notion-purple: rgb(105, 64, 165);
  25 |   --notion-teal: rgb(15, 123, 108);
  26 |   --notion-yellow: rgb(223, 171, 1);
  27 |   --notion-orange: rgb(217, 115, 13);
  28 |   --notion-brown: rgb(100, 71, 58);
  29 |   --notion-gray: rgb(155, 154, 151);
  30 | 
  31 |   --notion-red_background: rgb(251, 228, 228);
  32 |   --notion-pink_background: rgb(244, 223, 235);
  33 |   --notion-blue_background: rgb(221, 235, 241);
  34 |   --notion-purple_background: rgb(234, 228, 242);
  35 |   --notion-teal_background: rgb(221, 237, 234);
  36 |   --notion-yellow_background: rgb(251, 243, 219);
  37 |   --notion-orange_background: rgb(250, 235, 221);
  38 |   --notion-brown_background: rgb(233, 229, 227);
  39 |   --notion-gray_background: rgb(235, 236, 237);
  40 | 
  41 |   --notion-red_background_co: rgba(251, 228, 228, 0.3);
  42 |   --notion-pink_background_co: rgba(244, 223, 235, 0.3);
  43 |   --notion-blue_background_co: rgba(221, 235, 241, 0.3);
  44 |   --notion-purple_background_co: rgba(234, 228, 242, 0.3);
  45 |   --notion-teal_background_co: rgba(221, 237, 234, 0.3);
  46 |   --notion-yellow_background_co: rgba(251, 243, 219, 0.3);
  47 |   --notion-orange_background_co: rgba(250, 235, 221, 0.3);
  48 |   --notion-brown_background_co: rgba(233, 229, 227, 0.3);
  49 |   --notion-gray_background_co: rgba(235, 236, 237, 0.3);
  50 | 
  51 |   --notion-item-blue: rgba(0, 120, 223, 0.2);
  52 |   --notion-item-orange: rgba(245, 93, 0, 0.2);
  53 |   --notion-item-green: rgba(0, 135, 107, 0.2);
  54 |   --notion-item-pink: rgba(221, 0, 129, 0.2);
  55 |   --notion-item-brown: rgba(140, 46, 0, 0.2);
  56 |   --notion-item-red: rgba(255, 0, 26, 0.2);
  57 |   --notion-item-yellow: rgba(233, 168, 0, 0.2);
  58 |   --notion-item-default: rgba(206, 205, 202, 0.5);
  59 |   --notion-item-purple: rgba(103, 36, 222, 0.2);
  60 |   --notion-item-gray: rgba(155, 154, 151, 0.4);
  61 | 
  62 |   --notion-max-width: 720px;
  63 |   --notion-header-height: 45px;
  64 | }
  65 | 
  66 | .dark-mode {
  67 |   --fg-color: rgba(255, 255, 255, 0.9);
  68 |   --fg-color-0: var(--fg-color);
  69 |   --fg-color-1: var(--fg-color);
  70 |   --fg-color-2: var(--fg-color);
  71 |   --fg-color-3: var(--fg-color);
  72 |   --fg-color-4: var(--fg-color);
  73 |   --fg-color-5: rgba(255, 255, 255, 0.7);
  74 |   --fg-color-6: #fff;
  75 |   --fg-color-icon: #fff;
  76 | 
  77 |   --bg-color: #2f3437;
  78 |   --bg-color-0: rgb(71, 76, 80);
  79 |   --bg-color-1: rgb(63, 68, 71);
  80 |   --bg-color-2: rgba(135, 131, 120, 0.15);
  81 | 
  82 |   --notion-red: rgb(255, 115, 105);
  83 |   --notion-pink: rgb(226, 85, 161);
  84 |   --notion-blue: rgb(82, 156, 202);
  85 |   --notion-purple: rgb(154, 109, 215);
  86 |   --notion-teal: rgb(77, 171, 154);
  87 |   --notion-yellow: rgb(255, 220, 73);
  88 |   --notion-orange: rgb(255, 163, 68);
  89 |   --notion-brown: rgb(147, 114, 100);
  90 |   --notion-gray: rgba(151, 154, 155, 0.95);
  91 |   --notion-red_background: rgb(89, 65, 65);
  92 |   --notion-pink_background: rgb(83, 59, 76);
  93 |   --notion-blue_background: rgb(54, 73, 84);
  94 |   --notion-purple_background: rgb(68, 63, 87);
  95 |   --notion-teal_background: rgb(53, 76, 75);
  96 |   --notion-yellow_background: rgb(89, 86, 59);
  97 |   --notion-orange_background: rgb(89, 74, 58);
  98 |   --notion-brown_background: rgb(67, 64, 64);
  99 |   --notion-gray_background: rgb(69, 75, 78);
 100 |   --notion-red_background_co: rgba(89, 65, 65, 0.3);
 101 |   --notion-pink_background_co: rgba(83, 59, 76, 0.3);
 102 |   --notion-blue_background_co: rgba(120, 162, 187, 0.3);
 103 |   --notion-purple_background_co: rgba(68, 63, 87, 0.3);
 104 |   --notion-teal_background_co: rgba(53, 76, 75, 0.3);
 105 |   --notion-yellow_background_co: rgba(89, 86, 59, 0.3);
 106 |   --notion-orange_background_co: rgba(89, 74, 58, 0.3);
 107 |   --notion-brown_background_co: rgba(67, 64, 64, 0.3);
 108 |   --notion-gray_background_co: rgba(69, 75, 78, 0.3);
 109 | }
 110 | 
 111 | ::-webkit-scrollbar {
 112 |   background: transparent;
 113 |   width: 10px;
 114 |   height: 10px;
 115 | }
 116 | ::-webkit-scrollbar-thumb {
 117 |   background: #d3d1cb;
 118 | }
 119 | ::-webkit-scrollbar-thumb:hover {
 120 |   background: #c2c1bf;
 121 | }
 122 | ::-webkit-scrollbar-track {
 123 |   background: #edece9;
 124 | }
 125 | *::selection {
 126 |   background: rgba(45, 170, 219, 0.3);
 127 | }
 128 | 
 129 | .notion {
 130 |   box-sizing: border-box;
 131 |   font-size: 16px;
 132 |   line-height: 1.5;
 133 |   color: var(--fg-color);
 134 |   caret-color: var(--fg-color);
 135 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif,
 136 |     "Segoe UI Emoji", "Segoe UI Symbol";
 137 | }
 138 | 
 139 | .notion > * {
 140 |   padding: 3px 0;
 141 | }
 142 | 
 143 | .notion * {
 144 |   margin-block-start: 0;
 145 |   margin-block-end: 0;
 146 | }
 147 | 
 148 | .notion *::selection {
 149 |   background: var(--select-color-1);
 150 | }
 151 | 
 152 | .notion *,
 153 | .notion *:focus {
 154 |   outline: 0;
 155 | }
 156 | 
 157 | .notion-page-content {
 158 |   width: 100%;
 159 | }
 160 | 
 161 | @media (min-width: 1300px) and (min-height: 300px) {
 162 |   .notion-page-content-has-aside {
 163 |     display: flex;
 164 |     flex-direction: row;
 165 |     width: calc((100vw + var(--notion-max-width)) / 2);
 166 |   }
 167 | 
 168 |   .notion-page-content-has-aside .notion-aside {
 169 |     display: flex;
 170 |   }
 171 | 
 172 |   .notion-page-content-has-aside .notion-page-content-inner {
 173 |     width: var(--notion-max-width);
 174 |     max-width: var(--notion-max-width);
 175 |   }
 176 | }
 177 | 
 178 | .notion-page-content-inner {
 179 |   position: relative;
 180 |   display: flex;
 181 |   flex-direction: column;
 182 |   align-items: flex-start;
 183 | }
 184 | 
 185 | .notion-aside {
 186 |   position: sticky;
 187 |   top: 148px;
 188 |   /* top: calc((100vh - 48px - 100%) / 2); */
 189 | 
 190 |   align-self: flex-start;
 191 |   flex: 1;
 192 | 
 193 |   display: none;
 194 |   flex-direction: column;
 195 |   align-items: center;
 196 | }
 197 | 
 198 | .notion-aside-table-of-contents {
 199 |   display: flex;
 200 |   flex-direction: column;
 201 |   align-items: center;
 202 |   max-height: calc(100vh - 148px - 16px);
 203 |   overflow: hidden auto;
 204 |   min-width: 222px;
 205 |   overflow: auto;
 206 | }
 207 | 
 208 | .notion-aside-table-of-contents-header {
 209 |   text-transform: uppercase;
 210 |   font-weight: 400;
 211 |   font-size: 1.1em;
 212 |   word-break: break-word;
 213 | }
 214 | 
 215 | .notion-aside-table-of-contents .notion-table-of-contents-item {
 216 |   line-height: 1;
 217 | }
 218 | 
 219 | .notion-aside-table-of-contents .notion-table-of-contents-item-indent-level-0:first-of-type {
 220 |   margin-top: 0;
 221 | }
 222 | 
 223 | .notion-aside-table-of-contents .notion-table-of-contents-item-indent-level-0 {
 224 |   margin-top: 0.25em;
 225 | }
 226 | 
 227 | .notion-aside-table-of-contents .notion-table-of-contents-item-indent-level-1 {
 228 |   font-size: 13px;
 229 | }
 230 | 
 231 | .notion-aside-table-of-contents .notion-table-of-contents-item-indent-level-2 {
 232 |   font-size: 12px;
 233 | }
 234 | 
 235 | .notion-aside-table-of-contents .notion-table-of-contents-item-body {
 236 |   border: 0 none;
 237 | }
 238 | 
 239 | .notion-table-of-contents-active-item {
 240 |   color: var(--select-color-0) !important;
 241 | }
 242 | 
 243 | .notion-app {
 244 |   position: relative;
 245 |   background: var(--bg-color);
 246 |   min-height: 100vh;
 247 | }
 248 | 
 249 | .notion-viewport {
 250 |   position: fixed;
 251 |   top: 0;
 252 |   left: 0;
 253 |   right: 0;
 254 |   bottom: 0;
 255 | }
 256 | 
 257 | .medium-zoom-overlay {
 258 |   z-index: 300;
 259 | }
 260 | 
 261 | .medium-zoom-image {
 262 |   border-radius: 0;
 263 | }
 264 | 
 265 | .medium-zoom-image--opened {
 266 |   z-index: 301;
 267 | }
 268 | 
 269 | .notion-frame {
 270 |   display: flex;
 271 |   flex-direction: column;
 272 |   width: 100%;
 273 |   height: 100%;
 274 | }
 275 | 
 276 | .notion-page-scroller {
 277 |   position: relative;
 278 |   display: flex;
 279 |   flex-direction: column;
 280 |   flex-grow: 1;
 281 |   align-items: center;
 282 |   min-height: calc(100vh - var(--notion-header-height));
 283 | }
 284 | 
 285 | .notion-red,
 286 | .notion-red_co {
 287 |   color: var(--notion-red);
 288 | }
 289 | .notion-pink,
 290 | .notion-pink_co {
 291 |   color: var(--notion-pink);
 292 | }
 293 | .notion-blue,
 294 | .notion-blue_co {
 295 |   color: var(--notion-blue);
 296 | }
 297 | .notion-purple,
 298 | .notion-purple_co {
 299 |   color: var(--notion-purple);
 300 | }
 301 | .notion-teal,
 302 | .notion-teal_co {
 303 |   color: var(--notion-teal);
 304 | }
 305 | .notion-yellow,
 306 | .notion-yellow_co {
 307 |   color: var(--notion-yellow);
 308 | }
 309 | .notion-orange,
 310 | .notion-orange_co {
 311 |   color: var(--notion-orange);
 312 | }
 313 | .notion-brown,
 314 | .notion-brown_co {
 315 |   color: var(--notion-brown);
 316 | }
 317 | .notion-gray,
 318 | .notion-gray_co {
 319 |   color: var(--notion-gray);
 320 | }
 321 | .notion-red_background {
 322 |   background-color: var(--notion-red_background);
 323 | }
 324 | .notion-pink_background {
 325 |   background-color: var(--notion-pink_background);
 326 | }
 327 | .notion-blue_background {
 328 |   background-color: var(--notion-blue_background);
 329 | }
 330 | .notion-purple_background {
 331 |   background-color: var(--notion-purple_background);
 332 | }
 333 | .notion-teal_background {
 334 |   background-color: var(--notion-teal_background);
 335 | }
 336 | .notion-yellow_background {
 337 |   background-color: var(--notion-yellow_background);
 338 | }
 339 | .notion-orange_background {
 340 |   background-color: var(--notion-orange_background);
 341 | }
 342 | .notion-brown_background {
 343 |   background-color: var(--notion-brown_background);
 344 | }
 345 | .notion-gray_background {
 346 |   background-color: var(--notion-gray_background);
 347 | }
 348 | .notion-red_background_co {
 349 |   background-color: var(--notion-red_background_co);
 350 | }
 351 | .notion-pink_background_co {
 352 |   background-color: var(--notion-pink_background_co);
 353 | }
 354 | .notion-blue_background_co {
 355 |   background-color: var(--notion-blue_background_co);
 356 | }
 357 | .notion-purple_background_co {
 358 |   background-color: var(--notion-purple_background_co);
 359 | }
 360 | .notion-teal_background_co {
 361 |   background-color: var(--notion-teal_background_co);
 362 | }
 363 | .notion-yellow_background_co {
 364 |   background-color: var(--notion-yellow_background_co);
 365 | }
 366 | .notion-orange_background_co {
 367 |   background-color: var(--notion-orange_background_co);
 368 | }
 369 | .notion-brown_background_co {
 370 |   background-color: var(--notion-brown_background_co);
 371 | }
 372 | .notion-gray_background_co {
 373 |   background-color: var(--notion-gray_background_co);
 374 | }
 375 | 
 376 | .notion-item-blue {
 377 |   background-color: var(--notion-item-blue);
 378 | }
 379 | .notion-item-orange {
 380 |   background-color: var(--notion-item-orange);
 381 | }
 382 | .notion-item-green {
 383 |   background-color: var(--notion-item-green);
 384 | }
 385 | .notion-item-pink {
 386 |   background-color: var(--notion-item-pink);
 387 | }
 388 | .notion-item-brown {
 389 |   background-color: var(--notion-item-brown);
 390 | }
 391 | .notion-item-red {
 392 |   background-color: var(--notion-item-red);
 393 | }
 394 | .notion-item-yellow {
 395 |   background-color: var(--notion-item-yellow);
 396 | }
 397 | .notion-item-default {
 398 |   background-color: var(--notion-item-default);
 399 | }
 400 | .notion-item-purple {
 401 |   background-color: var(--notion-item-purple);
 402 | }
 403 | .notion-item-gray {
 404 |   background-color: var(--notion-item-gray);
 405 | }
 406 | 
 407 | .notion b {
 408 |   font-weight: 600;
 409 | }
 410 | 
 411 | .notion-title {
 412 |   width: 100%;
 413 |   font-size: 2.5em;
 414 |   font-weight: 700;
 415 |   margin-bottom: 20px;
 416 |   margin-top: 0.75em;
 417 |   line-height: 1.2;
 418 | }
 419 | 
 420 | .notion-h {
 421 |   position: relative;
 422 |   display: inline-block;
 423 |   font-weight: 600;
 424 |   line-height: 1.3;
 425 |   padding: 3px 2px;
 426 |   margin-bottom: 1px;
 427 |   max-width: 100%;
 428 |   white-space: pre-wrap;
 429 |   word-break: break-word;
 430 | }
 431 | 
 432 | .notion-h1 {
 433 |   font-size: 1.875em;
 434 |   font-weight: 600;
 435 |   margin-top: 1.08em;
 436 | }
 437 | 
 438 | .notion-header-anchor {
 439 |   position: absolute;
 440 |   top: -54px;
 441 |   left: 0;
 442 | }
 443 | 
 444 | .notion-title + .notion-h1,
 445 | .notion-title + .notion-h2,
 446 | .notion-title + .notion-h3 {
 447 |   margin-top: 0;
 448 | }
 449 | /* TODO: notion-page-content */
 450 | .notion-h1:first-child {
 451 |   margin-top: 0;
 452 | }
 453 | /* .notion-h1:first-of-type {
 454 |   margin-top: 2px;
 455 | } */
 456 | .notion-h2 {
 457 |   font-size: 1.5em;
 458 |   font-weight: 600;
 459 |   margin-top: 1.1em;
 460 | }
 461 | .notion-h3 {
 462 |   font-size: 1.25em;
 463 |   font-weight: 600;
 464 |   margin-top: 1em;
 465 | }
 466 | 
 467 | .notion-h:hover .notion-hash-link {
 468 |   opacity: 1;
 469 | }
 470 | 
 471 | .notion-hash-link {
 472 |   opacity: 0;
 473 |   text-decoration: none;
 474 |   float: left;
 475 |   margin-left: -20px;
 476 |   padding-right: 4px;
 477 |   fill: var(--fg-color-icon);
 478 | }
 479 | 
 480 | .notion-page-cover {
 481 |   display: block;
 482 |   object-fit: cover;
 483 |   width: 100%;
 484 |   height: 30vh;
 485 |   min-height: 30vh;
 486 |   max-height: 30vh;
 487 |   padding: 0;
 488 | }
 489 | 
 490 | .notion-page {
 491 |   box-sizing: border-box;
 492 |   position: relative;
 493 |   padding: 0;
 494 |   margin: 0 auto;
 495 |   display: flex;
 496 |   flex-direction: column;
 497 |   flex-grow: 1;
 498 |   flex-shrink: 0;
 499 |   align-items: flex-start;
 500 |   width: 100%;
 501 |   max-width: 100%;
 502 | }
 503 | 
 504 | .notion-full-page {
 505 |   padding-bottom: calc(max(10vh, 120px));
 506 | }
 507 | 
 508 | .notion-page-no-cover {
 509 |   margin-top: 48px !important;
 510 |   padding-top: 96px;
 511 | }
 512 | 
 513 | .notion-page-no-cover.notion-page-no-icon {
 514 |   padding-top: 0;
 515 | }
 516 | 
 517 | .notion-page-no-cover.notion-page-has-image-icon {
 518 |   padding-top: 148px;
 519 | }
 520 | 
 521 | .notion-page-has-cover.notion-page-no-icon {
 522 |   padding-top: 48px;
 523 | }
 524 | 
 525 | .notion-page-has-cover {
 526 |   padding-top: 112px;
 527 | }
 528 | 
 529 | .notion-page-has-cover.notion-page-has-text-icon {
 530 |   padding-top: 64px;
 531 | }
 532 | 
 533 | .notion-page-icon-wrapper {
 534 |   position: absolute;
 535 |   top: 0;
 536 |   left: 0;
 537 |   width: 100%;
 538 |   display: flex;
 539 |   flex-direction: row;
 540 |   justify-content: center;
 541 | }
 542 | 
 543 | .notion-page-icon-wrapper .notion-page-icon {
 544 |   position: relative;
 545 |   display: block;
 546 | }
 547 | 
 548 | .notion-page-has-cover .notion-page-icon-wrapper img.notion-page-icon {
 549 |   top: -62px;
 550 | }
 551 | 
 552 | .notion-page-has-cover .notion-page-icon-wrapper span.notion-page-icon {
 553 |   top: -42px;
 554 | }
 555 | 
 556 | .notion-page-icon-wrapper span.notion-page-icon {
 557 |   height: 78px;
 558 |   width: 78px;
 559 |   max-width: 78px;
 560 |   max-height: 78px;
 561 |   font-size: 78px;
 562 |   line-height: 1.1;
 563 |   margin-left: 0;
 564 |   color: var(--fg-color-icon);
 565 | }
 566 | 
 567 | .notion-page-icon-wrapper img.notion-page-icon {
 568 |   display: block;
 569 |   border-radius: 3px;
 570 |   width: 124px;
 571 |   height: 124px;
 572 |   max-width: 124px;
 573 |   max-height: 124px;
 574 | }
 575 | 
 576 | .notion-page-icon-cover span {
 577 |   height: 78px;
 578 |   width: 78px;
 579 |   font-size: 78px;
 580 |   display: inline-block;
 581 |   line-height: 1.1;
 582 |   margin-left: 0px;
 583 | }
 584 | 
 585 | .notion-page-icon-offset span {
 586 |   margin-top: -42px;
 587 | }
 588 | 
 589 | .notion-page-icon-cover img {
 590 |   border-radius: 3px;
 591 |   width: 124px;
 592 |   height: 124px;
 593 |   margin: 8px;
 594 | }
 595 | 
 596 | .notion-page-icon-offset img {
 597 |   margin-top: -80px;
 598 | }
 599 | 
 600 | .notion-page {
 601 |   width: var(--notion-max-width);
 602 |   padding-left: calc(min(12px, 8vw));
 603 |   padding-right: calc(min(12px, 8vw));
 604 | }
 605 | /* .notion-page > * {
 606 |   box-sizing: border-box;
 607 |   width: 100%;
 608 | } */
 609 | 
 610 | .notion-full-width {
 611 |   --notion-max-width: calc(min(1920px, 98vw));
 612 |   padding-left: calc(min(96px, 8vw));
 613 |   padding-right: calc(min(96px, 8vw));
 614 | }
 615 | 
 616 | .notion-small-text {
 617 |   font-size: 14px;
 618 | }
 619 | 
 620 | .notion-quote {
 621 |   display: block;
 622 |   width: 100%;
 623 |   white-space: pre-wrap;
 624 |   word-break: break-word;
 625 |   border-left: 3px solid currentcolor;
 626 |   padding: 0.2em 0.9em;
 627 |   margin: 6px 0;
 628 |   font-size: 1.2em;
 629 | }
 630 | 
 631 | .notion-hr {
 632 |   width: 100%;
 633 |   margin: 6px 0;
 634 |   padding: 0;
 635 |   border-top: none;
 636 |   border-color: var(--fg-color-0);
 637 | }
 638 | 
 639 | .notion-link {
 640 |   color: inherit;
 641 |   word-break: break-word;
 642 |   text-decoration: inherit;
 643 |   border-bottom: 0.05em solid;
 644 |   border-color: var(--fg-color-2);
 645 |   opacity: 0.7;
 646 |   transition: border-color 100ms ease-in, opacity 100ms ease-in;
 647 | }
 648 | 
 649 | .notion-link:hover {
 650 |   border-color: var(--fg-color-6);
 651 |   opacity: 1;
 652 | }
 653 | 
 654 | .notion-collection .notion-link {
 655 |   opacity: 1;
 656 | }
 657 | 
 658 | .notion-blank {
 659 |   width: 100%;
 660 |   min-height: 1rem;
 661 |   padding: 3px 2px;
 662 |   margin-top: 1px;
 663 |   margin-bottom: 1px;
 664 | }
 665 | 
 666 | .notion-page-link {
 667 |   display: flex;
 668 |   color: var(--fg-color);
 669 |   text-decoration: none;
 670 |   width: 100%;
 671 |   height: 30px;
 672 |   margin: 1px 0;
 673 |   transition: background 150ms ease-in-out 0s;
 674 |   align-items: center;
 675 | }
 676 | 
 677 | .notion-page-link:hover {
 678 |   background: var(--bg-color-0);
 679 | }
 680 | 
 681 | .notion-collection-card .notion-page-link {
 682 |   height: unset;
 683 |   margin: 0;
 684 |   transition: unset;
 685 | }
 686 | .notion-collection-card .notion-page-link {
 687 |   background: unset;
 688 | }
 689 | 
 690 | .notion-page-icon {
 691 |   font-family: "Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Noto Color Emoji", "Segoe UI Symbol",
 692 |     "Android Emoji", EmojiSymbols;
 693 |   font-size: 1.1em;
 694 |   margin: 0 6px 0 2px;
 695 |   fill: var(--fg-color-6);
 696 |   color: var(--fg-color-icon);
 697 | }
 698 | 
 699 | img.notion-page-icon,
 700 | svg.notion-page-icon {
 701 |   display: block;
 702 |   object-fit: fill;
 703 |   border-radius: 3px;
 704 |   /* padding: 1px; */
 705 |   max-width: 22px;
 706 |   max-height: 22px;
 707 | }
 708 | 
 709 | .notion-icon {
 710 |   display: block;
 711 |   width: 18px;
 712 |   height: 18px;
 713 |   color: var(--fg-color-icon);
 714 | }
 715 | 
 716 | .notion-page-text {
 717 |   white-space: nowrap;
 718 |   overflow: hidden;
 719 |   text-overflow: ellipsis;
 720 |   font-weight: 500;
 721 |   line-height: 1.3;
 722 |   border-bottom: 1px solid var(--fg-color-1);
 723 |   margin: 4px 0;
 724 | }
 725 | 
 726 | .notion-inline-code {
 727 |   color: #eb5757;
 728 |   padding: 0.2em 0.4em;
 729 |   background: var(--bg-color-2);
 730 |   border-radius: 3px;
 731 |   font-size: 85%;
 732 |   font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
 733 | }
 734 | 
 735 | .notion-underline {
 736 |   text-underline-offset: 6px;
 737 |   text-decoration-thickness: 1px;
 738 | }
 739 | 
 740 | .notion-list {
 741 |   margin: 0;
 742 |   margin-block-start: 0.6em;
 743 |   margin-block-end: 0.6em;
 744 | }
 745 | 
 746 | .notion-list-disc {
 747 |   list-style-type: disc;
 748 |   padding-inline-start: 1.7em;
 749 |   margin-top: 0;
 750 |   margin-bottom: 0;
 751 | }
 752 | .notion-list-numbered {
 753 |   list-style-type: decimal;
 754 |   padding-inline-start: 1.6em;
 755 |   margin-top: 0;
 756 |   margin-bottom: 0;
 757 | }
 758 | 
 759 | .notion-list-disc li {
 760 |   padding-left: 0.1em;
 761 | }
 762 | 
 763 | .notion-list-numbered li {
 764 |   padding-left: 0.2em;
 765 | }
 766 | 
 767 | .notion-list li {
 768 |   padding: 6px 0;
 769 |   white-space: pre-wrap;
 770 | }
 771 | 
 772 | .notion-list-flat {
 773 |   padding-inline-start: 0;
 774 | }
 775 | 
 776 | .notion-list-indent {
 777 |   margin-left: 1.6em;
 778 | }
 779 | 
 780 | .notion-asset-wrapper {
 781 |   margin: 0.5rem 0;
 782 |   max-width: 100vw;
 783 |   min-width: 100%;
 784 |   align-self: center;
 785 |   display: flex;
 786 |   flex-direction: column;
 787 |   align-items: center;
 788 | }
 789 | 
 790 | .notion-asset-wrapper-image {
 791 |   max-width: 100%;
 792 | }
 793 | 
 794 | .notion-asset-wrapper-full {
 795 |   max-width: 100vw;
 796 | }
 797 | 
 798 | .notion-asset-wrapper img {
 799 |   width: 100%;
 800 |   height: 100%;
 801 |   max-height: 100%;
 802 |   object-fit: cover;
 803 | }
 804 | 
 805 | .notion-asset-wrapper iframe {
 806 |   border: none;
 807 |   background: rgb(247, 246, 245);
 808 | }
 809 | 
 810 | .notion-text {
 811 |   width: 100%;
 812 |   white-space: pre-wrap;
 813 |   word-break: break-word;
 814 |   padding: 3px 2px;
 815 |   margin: 1px 0;
 816 | }
 817 | 
 818 | .notion-text:first-child {
 819 |   margin-top: 2px;
 820 | }
 821 | 
 822 | .notion-text-children {
 823 |   padding-left: 1.5em;
 824 |   display: flex;
 825 |   flex-direction: column;
 826 | }
 827 | 
 828 | .notion-block {
 829 |   padding: 3px 2px;
 830 | }
 831 | 
 832 | .notion .notion-code {
 833 |   font-size: 85%;
 834 | }
 835 | 
 836 | .notion-code {
 837 |   width: 100%;
 838 |   margin: 4px 0;
 839 |   border-radius: 3px;
 840 |   tab-size: 2;
 841 |   display: block;
 842 |   box-sizing: border-box;
 843 |   overflow: auto;
 844 |   background: var(--bg-color-1);
 845 |   font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
 846 | }
 847 | .notion-code > pre {
 848 |   padding: 34px 16px 32px 32px;
 849 |   margin: 0;
 850 | }
 851 | 
 852 | .notion-column {
 853 |   display: flex;
 854 |   flex-direction: column;
 855 |   padding-top: 12px;
 856 |   padding-bottom: 12px;
 857 | }
 858 | 
 859 | .notion-column > *:first-child {
 860 |   margin-top: 0;
 861 |   margin-left: 0;
 862 |   margin-right: 0;
 863 | }
 864 | 
 865 | .notion-column > *:last-child {
 866 |   margin-left: 0;
 867 |   margin-right: 0;
 868 |   margin-bottom: 0;
 869 | }
 870 | 
 871 | .notion-row {
 872 |   display: flex;
 873 |   overflow: hidden;
 874 |   width: 100%;
 875 |   max-width: 100%;
 876 | }
 877 | 
 878 | @media (max-width: 640px) {
 879 |   .notion-row {
 880 |     flex-direction: column;
 881 |   }
 882 | 
 883 |   .notion-row .notion-column {
 884 |     width: 100% !important;
 885 |   }
 886 | 
 887 |   .notion-row .notion-spacer {
 888 |     display: none;
 889 |   }
 890 | }
 891 | 
 892 | .notion-bookmark {
 893 |   margin: 4px 0;
 894 |   width: 100%;
 895 |   box-sizing: border-box;
 896 |   text-decoration: none;
 897 |   border: 1px solid var(--fg-color-1);
 898 |   border-radius: 3px;
 899 |   display: flex;
 900 |   overflow: hidden;
 901 |   user-select: none;
 902 |   transition: background 150ms ease-in-out 0s;
 903 | }
 904 | 
 905 | .dark-mode .notion-bookmark {
 906 |   border-color: var(--bg-color-0);
 907 | }
 908 | .notion-bookmark:hover {
 909 |   transition: background 150ms ease-in-out 0s;
 910 |   background: var(--bg-color-0);
 911 | }
 912 | 
 913 | .notion-bookmark > div:first-child {
 914 |   flex: 4 1 180px;
 915 |   padding: 12px 14px 14px;
 916 |   overflow: hidden;
 917 |   text-align: left;
 918 |   color: var(--fg-color);
 919 | }
 920 | 
 921 | .notion-bookmark-title {
 922 |   font-size: 14px;
 923 |   line-height: 20px;
 924 |   white-space: nowrap;
 925 |   overflow: hidden;
 926 |   text-overflow: ellipsis;
 927 |   min-height: 24px;
 928 |   margin-bottom: 2px;
 929 | }
 930 | 
 931 | .notion-bookmark-description {
 932 |   font-size: 12px;
 933 |   line-height: 16px;
 934 |   opacity: 0.8;
 935 |   height: 32px;
 936 |   overflow: hidden;
 937 | }
 938 | 
 939 | .notion-bookmark-link {
 940 |   display: flex;
 941 |   margin-top: 6px;
 942 | }
 943 | 
 944 | .notion-bookmark-link > img {
 945 |   width: 16px;
 946 |   height: 16px;
 947 |   min-width: 16px;
 948 |   margin-right: 6px;
 949 | }
 950 | 
 951 | .notion-bookmark-link > div {
 952 |   font-size: 12px;
 953 |   line-height: 16px;
 954 |   color: var(--fg-color);
 955 |   white-space: nowrap;
 956 |   overflow: hidden;
 957 |   text-overflow: ellipsis;
 958 | }
 959 | 
 960 | .notion-bookmark-image {
 961 |   flex: 1 1 180px;
 962 |   position: relative;
 963 | }
 964 | 
 965 | .notion-bookmark-image img {
 966 |   object-fit: cover;
 967 |   width: 100%;
 968 |   height: 100%;
 969 |   position: absolute;
 970 | }
 971 | 
 972 | .notion-column .notion-bookmark-image {
 973 |   display: none;
 974 | }
 975 | 
 976 | .notion-spacer {
 977 |   width: calc(min(32px, 4vw));
 978 | }
 979 | 
 980 | .notion-spacer:last-child {
 981 |   display: none;
 982 | }
 983 | 
 984 | .notion-asset-object-fit {
 985 |   position: absolute;
 986 |   left: 0;
 987 |   top: 0;
 988 |   right: 0;
 989 |   bottom: 0;
 990 |   width: 100%;
 991 |   height: 100%;
 992 |   border-radius: 1px;
 993 | }
 994 | 
 995 | .notion-image {
 996 |   display: block;
 997 |   width: 100%;
 998 |   border-radius: 1px;
 999 | }
1000 | 
1001 | .notion-image-inset {
1002 |   position: absolute;
1003 |   left: 0;
1004 |   top: 0;
1005 |   right: 0;
1006 |   bottom: 0;
1007 |   width: 100%;
1008 |   height: 100%;
1009 |   border-radius: 1px;
1010 | }
1011 | 
1012 | .notion-image-caption,
1013 | .notion-asset-caption {
1014 |   padding: 6px 0 6px 2px;
1015 |   white-space: pre-wrap;
1016 |   word-break: break-word;
1017 |   caret-color: var(--fg-color);
1018 |   font-size: 14px;
1019 |   line-height: 1.4;
1020 |   color: var(--fg-color-3);
1021 | }
1022 | 
1023 | .notion-callout {
1024 |   padding: 16px 16px 16px 12px;
1025 |   display: inline-flex;
1026 |   width: 100%;
1027 |   border-radius: 3px;
1028 |   border-width: 1px;
1029 |   align-items: center;
1030 |   box-sizing: border-box;
1031 |   margin: 4px 0;
1032 |   align-items: flex-start;
1033 |   /* border: 1px solid var(--fg-color-0); */
1034 | }
1035 | 
1036 | .dark-mode .notion-callout {
1037 |   border-color: var(--bg-color-2);
1038 | }
1039 | 
1040 | .notion-callout .notion-page-icon {
1041 |   align-self: flex-start;
1042 |   width: 24px;
1043 |   height: 24px;
1044 |   font-size: 1.3em;
1045 |   line-height: 1em;
1046 | }
1047 | 
1048 | .notion-callout-text {
1049 |   margin-left: 8px;
1050 |   white-space: pre-wrap;
1051 |   word-break: break-word;
1052 |   width: 100%;
1053 | }
1054 | 
1055 | .notion-toggle {
1056 |   padding: 3px 2px;
1057 | }
1058 | .notion-toggle > summary {
1059 |   cursor: pointer;
1060 |   outline: none;
1061 | }
1062 | .notion-toggle > div {
1063 |   margin-left: 1.4em;
1064 | }
1065 | .notion-toggle > summary > span {
1066 |   margin-left: 0.5em;
1067 | }
1068 | 
1069 | .notion-collection {
1070 |   align-self: center;
1071 |   min-width: 100%;
1072 | }
1073 | 
1074 | .notion-collection-header {
1075 |   display: flex;
1076 |   align-items: center;
1077 |   height: 42px;
1078 |   padding: 4px 2px;
1079 |   white-space: nowrap;
1080 |   overflow: hidden;
1081 | }
1082 | 
1083 | .notion-collection-header-title {
1084 |   display: inline-flex;
1085 |   align-items: center;
1086 |   font-size: 1.25em;
1087 |   line-height: 1.2;
1088 |   font-weight: 600;
1089 |   white-space: pre-wrap;
1090 |   word-break: break-word;
1091 |   margin-right: 0.5em;
1092 | }
1093 | 
1094 | .notion-collection-view-dropdown {
1095 |   cursor: pointer;
1096 |   padding: 4px 8px;
1097 |   border-radius: 3px;
1098 |   transition: background 120ms ease-in 0s;
1099 | }
1100 | 
1101 | .notion-collection-view-dropdown:hover {
1102 |   background: var(--bg-color-0);
1103 | }
1104 | 
1105 | .notion-collection-view-dropdown-icon {
1106 |   position: relative;
1107 |   top: 2px;
1108 |   margin-left: 4px;
1109 | }
1110 | 
1111 | .notion-collection-view-type-menu-item {
1112 |   cursor: pointer;
1113 | }
1114 | 
1115 | .notion-collection-view-type-menu-item .notion-collection-view-type {
1116 |   width: 340px;
1117 |   max-width: 100%;
1118 |   min-width: 100px;
1119 | }
1120 | 
1121 | .notion-collection-view-type {
1122 |   display: flex;
1123 |   align-items: center;
1124 |   font-size: 14px;
1125 | }
1126 | 
1127 | .notion-collection-view-type-icon {
1128 |   display: inline-block;
1129 |   width: 14px;
1130 |   height: 14px;
1131 |   /* fill: var(--fg-color); */
1132 |   fill: rgba(55, 53, 47);
1133 |   margin-right: 6px;
1134 | }
1135 | 
1136 | .notion-collection-view-type-title {
1137 |   white-space: nowrap;
1138 |   overflow: hidden;
1139 |   text-overflow: ellipsis;
1140 |   color: var(--fg-color);
1141 | }
1142 | 
1143 | .notion-table {
1144 |   width: 100vw;
1145 |   max-width: 100vw;
1146 |   align-self: center;
1147 |   overflow: auto hidden;
1148 | }
1149 | 
1150 | .notion-table-view {
1151 |   position: relative;
1152 |   float: left;
1153 |   min-width: var(--notion-max-width);
1154 |   padding-left: 0;
1155 |   transition: padding 200ms ease-out;
1156 | }
1157 | 
1158 | .notion-table-header {
1159 |   display: flex;
1160 |   position: absolute;
1161 |   z-index: 82;
1162 |   height: 33px;
1163 |   color: var(--fg-color-3);
1164 |   min-width: var(--notion-max-width);
1165 | }
1166 | 
1167 | .notion-table-header-inner {
1168 |   width: 100%;
1169 |   display: inline-flex;
1170 |   border-top: 1px solid var(--fg-color-1);
1171 |   border-bottom: 1px solid var(--fg-color-1);
1172 |   /* box-shadow: white -3px 0 0, rgba(55, 53, 47, 0.16) 0 1px 0; */
1173 | }
1174 | 
1175 | .notion-table-header-placeholder {
1176 |   height: 34px;
1177 | }
1178 | 
1179 | .notion-table-th {
1180 |   display: flex;
1181 |   position: relative;
1182 | }
1183 | 
1184 | .notion-table-view-header-cell {
1185 |   display: flex;
1186 |   flex-shrink: 0;
1187 |   overflow: hidden;
1188 |   height: 32px;
1189 |   font-size: 14px;
1190 |   padding: 0;
1191 | }
1192 | 
1193 | .notion-table-view-header-cell-inner {
1194 |   user-select: none;
1195 |   display: flex;
1196 |   width: 100%;
1197 |   height: 100%;
1198 |   padding-left: 8px;
1199 |   padding-right: 8px;
1200 |   border-right: 1px solid var(--fg-color-0);
1201 | }
1202 | 
1203 | .notion-table-th:last-child .notion-table-view-header-cell-inner {
1204 |   border-right: 0 none;
1205 | }
1206 | 
1207 | .notion-simple-table {
1208 |   border-collapse: collapse;
1209 |   border-spacing: 0;
1210 | }
1211 | 
1212 | .notion-simple-table-data {
1213 |   color: inherit;
1214 |   fill: inherit;
1215 |   border: 1px solid rgb(233, 233, 231);
1216 |   position: relative;
1217 |   vertical-align: top;
1218 |   min-width: 178px;
1219 |   max-width: 178px;
1220 |   min-height: 32px;
1221 | }
1222 | 
1223 | .notion-simple-table-cell-text {
1224 |   max-width: 100%;
1225 |   width: 100%;
1226 |   white-space: pre-wrap;
1227 |   word-break: break-word;
1228 |   caret-color: transparent;
1229 |   padding: 7px 9px;
1230 |   background-color: transparent;
1231 |   font-size: 14px;
1232 |   line-height: 20px;
1233 | }
1234 | 
1235 | .notion-simple-table-header {
1236 |   background: rgb(247, 246, 243);
1237 |   font-weight: 500;
1238 | }
1239 | 
1240 | .notion-collection-column-title {
1241 |   display: flex;
1242 |   align-items: center;
1243 |   line-height: 120%;
1244 |   min-width: 0;
1245 |   font-size: 14px;
1246 | }
1247 | 
1248 | .notion-collection-column-title-icon {
1249 |   display: inline-block;
1250 |   width: 14px;
1251 |   height: 14px;
1252 |   min-width: 14px;
1253 |   min-height: 14px;
1254 |   fill: var(--fg-color-2);
1255 |   margin-right: 6px;
1256 | }
1257 | 
1258 | .notion-collection-column-title-body {
1259 |   white-space: nowrap;
1260 |   overflow: hidden;
1261 |   text-overflow: ellipsis;
1262 | }
1263 | 
1264 | .notion-table-body {
1265 |   position: relative;
1266 |   min-width: var(--notion-max-width);
1267 | }
1268 | 
1269 | .notion-table-row {
1270 |   display: flex;
1271 |   border-bottom: 1px solid var(--fg-color-1);
1272 | }
1273 | 
1274 | .notion-table-cell {
1275 |   min-height: 32px;
1276 |   padding: 5px 8px 6px;
1277 |   font-size: 14px;
1278 |   line-height: 1;
1279 |   white-space: normal;
1280 |   overflow: hidden;
1281 |   word-break: break-word;
1282 |   border-right: 1px solid var(--fg-color-1);
1283 | }
1284 | 
1285 | .notion-table-cell:last-child {
1286 |   border-right: 0 none;
1287 | }
1288 | 
1289 | .notion-table-cell-title {
1290 |   font-weight: 500;
1291 | }
1292 | 
1293 | .notion-table-cell-text {
1294 |   white-space: pre-wrap;
1295 | }
1296 | 
1297 | .notion-table-cell-text,
1298 | .notion-table-cell-number,
1299 | .notion-table-cell-url,
1300 | .notion-table-cell-email,
1301 | .notion-table-cell-phone_number {
1302 |   line-height: 1.5;
1303 | }
1304 | 
1305 | .notion-table-cell-number {
1306 |   white-space: pre-wrap;
1307 | }
1308 | 
1309 | .notion-table-cell-select,
1310 | .notion-table-cell-multi_select {
1311 |   padding: 7px 8px 0;
1312 | }
1313 | 
1314 | .notion-property-select,
1315 | .notion-property-multi_select {
1316 |   display: flex;
1317 |   flex-wrap: wrap;
1318 | }
1319 | 
1320 | .notion-property-select-item,
1321 | .notion-property-multi_select-item {
1322 |   display: flex;
1323 |   align-items: center;
1324 |   padding: 0 6px;
1325 |   border-radius: 3px;
1326 |   height: 18px;
1327 |   white-space: nowrap;
1328 |   overflow: hidden;
1329 |   text-overflow: ellipsis;
1330 |   line-height: 120%;
1331 | }
1332 | 
1333 | .notion-property-multi_select-item {
1334 |   margin: 0 6px 6px 0;
1335 | }
1336 | 
1337 | .notion-collection-card .notion-property-multi_select-item {
1338 |   margin: 0 6px 0 0;
1339 | }
1340 | 
1341 | .notion-property-file {
1342 |   display: flex;
1343 |   flex-wrap: wrap;
1344 |   align-content: flex-start;
1345 | }
1346 | 
1347 | .notion-property-file img {
1348 |   max-height: 24px;
1349 |   max-width: 100%;
1350 |   margin-right: 6px;
1351 | }
1352 | 
1353 | .notion-collection-card-cover .notion-property-file {
1354 |   height: 100%;
1355 | }
1356 | 
1357 | .notion-collection-card-cover .notion-property-file img {
1358 |   width: 100%;
1359 |   margin: 0;
1360 |   max-height: 100%;
1361 | }
1362 | 
1363 | .notion-property-checkbox {
1364 |   margin-top: 4px;
1365 |   width: 16px;
1366 |   height: 16px;
1367 |   background: var(--bg-color);
1368 |   flex-shrink: 0;
1369 | }
1370 | 
1371 | .notion-to-do-item > input {
1372 |   -webkit-appearance: none;
1373 |   -moz-appearance: none;
1374 |   -o-appearance: none;
1375 |   appearance: none;
1376 |   border: 2px solid rgba(71, 71, 71, 0.918);
1377 |   outline: none;
1378 |   transition-duration: 0.3s;
1379 |   cursor: pointer;
1380 | }
1381 | 
1382 | .notion-to-do-item > input:checked {
1383 |   border: 2px solid var(--select-color-0);
1384 |   background-color: var(--select-color-0);
1385 |   background: var(--select-color-0)
1386 |     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' class='check' style='width: 12px; height: 12px; display: block; fill: white; flex-shrink: 0; backface-visibility: hidden;'%3E%3Cpolygon points='5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039'%3E%3C/polygon%3E%3C/svg%3E");
1387 | }
1388 | 
1389 | .notion-gallery {
1390 |   align-self: center;
1391 | }
1392 | 
1393 | .notion-gallery-view {
1394 |   position: relative;
1395 |   padding-left: 0;
1396 |   transition: padding 200ms ease-out;
1397 | }
1398 | 
1399 | .notion-gallery-grid {
1400 |   display: grid;
1401 |   position: relative;
1402 |   grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
1403 |   grid-auto-rows: 1fr;
1404 |   gap: 16px;
1405 |   border-top: 1px solid var(--fg-color-1);
1406 |   padding-top: 16px;
1407 |   padding-bottom: 4px;
1408 | }
1409 | 
1410 | .notion-gallery-grid-size-small {
1411 |   grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
1412 | }
1413 | 
1414 | .notion-gallery-grid-size-large {
1415 |   grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
1416 | }
1417 | 
1418 | .notion-collection-card {
1419 |   display: flex;
1420 |   flex-direction: column;
1421 |   overflow: hidden;
1422 | 
1423 |   text-decoration: none;
1424 |   box-shadow: rgba(15, 15, 15, 0.1) 0 0 0 1px, rgba(15, 15, 15, 0.1) 0 2px 4px;
1425 |   border-radius: 3px;
1426 |   background: var(--bg-color);
1427 |   color: var(--fg-color);
1428 |   transition: background 100ms ease-out 0s;
1429 | 
1430 |   user-select: none;
1431 |   cursor: pointer;
1432 | }
1433 | 
1434 | .notion-collection-card:hover {
1435 |   background: var(--bg-color-0);
1436 | }
1437 | 
1438 | .notion-collection-card-cover {
1439 |   position: relative;
1440 |   width: 100%;
1441 |   height: 190px;
1442 |   border-bottom: 1px solid var(--fg-color-0);
1443 |   overflow: hidden;
1444 | }
1445 | 
1446 | .notion-collection-card-cover img {
1447 |   width: 100%;
1448 |   height: 100%;
1449 |   border-radius: 1px 1px 0 0;
1450 |   /* object-fit: cover; */
1451 | }
1452 | 
1453 | .notion-collection-card-cover .notion-collection-card-cover-empty {
1454 |   width: 100%;
1455 |   height: 100%;
1456 |   pointer-events: none;
1457 |   overflow: hidden;
1458 |   background: var(--fg-color-5);
1459 |   box-shadow: var(--fg-color-0) 0 -1px 0 0 inset;
1460 |   padding: 8px 8px 0;
1461 | }
1462 | 
1463 | .notion-collection-card-size-small .notion-collection-card-cover {
1464 |   height: 124px;
1465 | }
1466 | 
1467 | .notion-collection-card-body {
1468 |   display: flex;
1469 |   flex-direction: column;
1470 |   padding: 4px 10px;
1471 | }
1472 | 
1473 | .notion-collection-card-property {
1474 |   padding: 4px 0;
1475 |   white-space: nowrap;
1476 |   word-break: break-word;
1477 |   overflow: hidden;
1478 |   text-overflow: ellipsis;
1479 |   font-size: 12px;
1480 | }
1481 | 
1482 | .notion-collection-card-property:first-child {
1483 |   font-size: 14px;
1484 |   font-weight: 500;
1485 | }
1486 | 
1487 | .notion-collection-card-property:not(:first-child) {
1488 |   white-space: nowrap;
1489 |   text-overflow: clip;
1490 | }
1491 | 
1492 | .notion-collection-card-property img {
1493 |   max-height: 18px;
1494 | }
1495 | 
1496 | .notion-list-collection {
1497 |   align-self: center;
1498 | }
1499 | 
1500 | .notion-list-collection {
1501 |   width: 100%;
1502 |   max-width: 100%;
1503 | }
1504 | 
1505 | .notion-list-view {
1506 |   position: relative;
1507 |   padding-left: 0;
1508 |   transition: padding 200ms ease-out;
1509 |   max-width: 100%;
1510 | }
1511 | 
1512 | .notion-list-body {
1513 |   display: flex;
1514 |   flex-direction: column;
1515 |   border-top: 1px solid var(--fg-color-1);
1516 |   padding-top: 8px;
1517 |   max-width: 100%;
1518 |   overflow: hidden;
1519 | }
1520 | 
1521 | .notion-list-item {
1522 |   display: flex;
1523 |   justify-content: space-between;
1524 |   align-items: center;
1525 |   padding: 0 4px;
1526 |   margin: 1px 0;
1527 |   max-width: 100%;
1528 |   overflow: hidden;
1529 | }
1530 | 
1531 | .notion-list-item-title {
1532 |   white-space: nowrap;
1533 |   overflow: hidden;
1534 |   text-overflow: ellipsis;
1535 |   font-weight: 500;
1536 |   line-height: 1.3;
1537 | }
1538 | 
1539 | .notion-list-item-body {
1540 |   display: flex;
1541 |   align-items: center;
1542 |   flex-wrap: nowrap;
1543 |   overflow: hidden;
1544 | }
1545 | 
1546 | .notion-list-item-property {
1547 |   /* display: flex;
1548 |   align-items: center; */
1549 |   margin-left: 14px;
1550 |   font-size: 14px;
1551 | }
1552 | 
1553 | .notion-list-item-property .notion-property-date,
1554 | .notion-list-item-property .notion-property-created_time,
1555 | .notion-list-item-property .notion-property-last_edited_time,
1556 | .notion-list-item-property .notion-property-url {
1557 |   display: inline-block;
1558 |   color: var(--fg-color-3);
1559 |   font-size: 12px;
1560 |   /* white-space: nowrap; */
1561 |   overflow: hidden;
1562 |   text-overflow: ellipsis;
1563 | }
1564 | 
1565 | .notion-board {
1566 |   width: 100vw;
1567 |   max-width: 100vw;
1568 |   align-self: center;
1569 |   overflow: auto hidden;
1570 | }
1571 | 
1572 | .notion-board-view {
1573 |   position: relative;
1574 |   float: left;
1575 |   min-width: 100%;
1576 |   padding-left: 0;
1577 |   transition: padding 200ms ease-out;
1578 | }
1579 | 
1580 | .notion-board-header {
1581 |   display: flex;
1582 |   position: absolute;
1583 |   z-index: 82;
1584 |   height: 44px;
1585 |   min-width: 100%;
1586 | }
1587 | 
1588 | .notion-board-header-inner {
1589 |   display: inline-flex;
1590 |   border-top: 1px solid var(--fg-color-1);
1591 |   border-bottom: 1px solid var(--fg-color-1);
1592 | }
1593 | 
1594 | .notion-board-header-placeholder {
1595 |   height: var(--notion-header-height);
1596 | }
1597 | 
1598 | .notion-board-th {
1599 |   display: flex;
1600 |   align-items: center;
1601 |   font-size: 14px;
1602 |   padding-right: 16px;
1603 |   box-sizing: content-box;
1604 |   flex-shrink: 0;
1605 | }
1606 | 
1607 | .notion-board-th-body {
1608 |   display: flex;
1609 |   align-items: center;
1610 |   font-size: 14px;
1611 |   line-height: 1.2;
1612 |   padding-left: 2px;
1613 |   padding-right: 4px;
1614 |   white-space: nowrap;
1615 |   overflow: hidden;
1616 | }
1617 | 
1618 | .notion-board-th-count {
1619 |   color: var(--fg-color-3);
1620 |   font-weight: 500;
1621 |   padding: 0 8px;
1622 | }
1623 | 
1624 | .notion-board-th-empty {
1625 |   margin-right: 4px;
1626 |   position: relative;
1627 |   top: 2px;
1628 | }
1629 | 
1630 | .notion-board-body {
1631 |   display: inline-flex;
1632 | }
1633 | 
1634 | .notion-board-group {
1635 |   flex: 0 0 auto;
1636 |   padding-right: 16px;
1637 |   box-sizing: content-box;
1638 | }
1639 | 
1640 | .notion-board-group-card {
1641 |   margin-bottom: 8px;
1642 | }
1643 | 
1644 | .notion-board-view .notion-board-th,
1645 | .notion-board-view .notion-board-group {
1646 |   width: 260px;
1647 | }
1648 | 
1649 | .notion-board-view-size-small .notion-board-th,
1650 | .notion-board-view-size-small .notion-board-group {
1651 |   width: 180px;
1652 | }
1653 | 
1654 | .notion-board-view-size-large .notion-board-th,
1655 | .notion-board-view-size-large .notion-board-group {
1656 |   width: 320px;
1657 | }
1658 | 
1659 | .notion-board-view .notion-collection-card .notion-collection-card-cover {
1660 |   height: 148px;
1661 | }
1662 | 
1663 | .notion-board-view-size-small .notion-collection-card .notion-collection-card-cover {
1664 |   height: 100px;
1665 | }
1666 | 
1667 | .notion-board-view-size-large .notion-collection-card .notion-collection-card-cover {
1668 |   height: 180px;
1669 | }
1670 | 
1671 | .notion-to-do {
1672 |   width: 100%;
1673 |   display: flex;
1674 |   flex-direction: column;
1675 | }
1676 | 
1677 | .notion-to-do-item {
1678 |   width: 100%;
1679 |   display: flex;
1680 |   align-items: flex-start;
1681 |   width: 100%;
1682 |   padding-left: 2px;
1683 |   min-height: calc(1.5em + 3px + 3px);
1684 |   position: relative;
1685 | }
1686 | 
1687 | .notion-to-do-children {
1688 |   padding-left: 1.5em;
1689 | }
1690 | 
1691 | .notion-to-do-item .notion-to-do-checked {
1692 |   text-decoration: line-through;
1693 |   text-decoration-color: #b9747459;
1694 |   opacity: 0.5;
1695 | }
1696 | 
1697 | .notion-to-do-body {
1698 |   white-space: pre-wrap;
1699 |   word-break: break-word;
1700 | }
1701 | 
1702 | .notion-to-do-item .notion-property-checkbox {
1703 |   margin-right: 8px;
1704 | }
1705 | 
1706 | .notion-google-drive {
1707 |   width: 100%;
1708 |   align-self: center;
1709 |   margin: 4px 0;
1710 | }
1711 | 
1712 | .notion-google-drive-link {
1713 |   position: relative;
1714 |   display: flex;
1715 |   flex-direction: column;
1716 |   color: inherit;
1717 |   text-decoration: none;
1718 |   width: 100%;
1719 |   border: 1px solid var(--fg-color-1);
1720 |   border-radius: 3px;
1721 | 
1722 |   user-select: none;
1723 |   transition: background 100ms ease-in 0s;
1724 |   cursor: pointer;
1725 | }
1726 | 
1727 | .notion-google-drive-link:hover {
1728 |   background: var(--bg-color-0);
1729 | }
1730 | 
1731 | .notion-google-drive-preview {
1732 |   display: block;
1733 |   position: relative;
1734 |   width: 100%;
1735 |   padding-bottom: 55%;
1736 |   overflow: hidden;
1737 | }
1738 | 
1739 | .notion-google-drive-preview img {
1740 |   position: absolute;
1741 |   width: 100%;
1742 |   top: 0;
1743 |   left: 0;
1744 |   bottom: 0;
1745 |   right: 0;
1746 |   object-fit: cover;
1747 |   object-position: center top;
1748 | }
1749 | 
1750 | .notion-google-drive-body {
1751 |   width: 100%;
1752 |   min-height: 60px;
1753 |   padding: 12px 14px 14px;
1754 |   overflow: hidden;
1755 |   border-top: 1px solid var(--fg-color-1);
1756 | }
1757 | 
1758 | .notion-google-drive-body-title {
1759 |   font-size: 14px;
1760 |   line-height: 20px;
1761 |   white-space: nowrap;
1762 |   overflow: hidden;
1763 |   text-overflow: ellipsis;
1764 |   margin-bottom: 2px;
1765 | }
1766 | 
1767 | .notion-google-drive-body-modified-time {
1768 |   font-size: 12px;
1769 |   line-height: 1.3;
1770 |   color: var(--fg-color-3);
1771 |   max-height: 32px;
1772 |   overflow: hidden;
1773 | }
1774 | 
1775 | .notion-google-drive-body-source {
1776 |   display: flex;
1777 |   align-items: center;
1778 |   margin-top: 6px;
1779 | }
1780 | 
1781 | .notion-google-drive-body-source-icon {
1782 |   flex-shrink: 0;
1783 |   background-size: cover;
1784 |   width: 16px;
1785 |   height: 16px;
1786 |   margin-right: 6px;
1787 | }
1788 | 
1789 | .notion-google-drive-body-source-domain {
1790 |   font-size: 12px;
1791 |   line-height: 16px;
1792 |   white-space: nowrap;
1793 |   overflow: hidden;
1794 |   text-overflow: ellipsis;
1795 | }
1796 | 
1797 | .notion-file {
1798 |   width: 100%;
1799 |   margin: 1px 0;
1800 | }
1801 | 
1802 | .notion-file-link {
1803 |   display: flex;
1804 |   align-items: center;
1805 |   padding: 3px 2px;
1806 |   border-radius: 3px;
1807 |   transition: background 20ms ease-in 0s;
1808 |   color: inherit;
1809 |   text-decoration: none;
1810 | }
1811 | 
1812 | .notion-file-link:hover {
1813 |   background: var(--bg-color-0);
1814 | }
1815 | 
1816 | .notion-file-icon {
1817 |   margin-right: 2px;
1818 |   width: 1.35em;
1819 |   display: flex;
1820 |   align-items: center;
1821 |   justify-content: center;
1822 |   flex-grow: 0;
1823 |   flex-shrink: 0;
1824 |   min-height: calc(1.5em + 3px + 3px);
1825 |   height: 1.35em;
1826 | }
1827 | 
1828 | .notion-file-info {
1829 |   display: flex;
1830 |   align-items: baseline;
1831 | }
1832 | 
1833 | .notion-file-title {
1834 |   white-space: nowrap;
1835 |   overflow: hidden;
1836 |   text-overflow: ellipsis;
1837 | }
1838 | 
1839 | .notion-file-size {
1840 |   white-space: nowrap;
1841 |   overflow: hidden;
1842 |   text-overflow: ellipsis;
1843 |   color: var(--fg-color-3);
1844 |   font-size: 12px;
1845 |   line-height: 16px;
1846 |   margin-left: 6px;
1847 | }
1848 | 
1849 | .notion-audio {
1850 |   width: 100%;
1851 | }
1852 | 
1853 | .notion-audio audio {
1854 |   width: 100%;
1855 | }
1856 | 
1857 | .notion-equation {
1858 |   position: relative;
1859 |   display: inline-flex;
1860 |   color: inherit;
1861 |   fill: inherit;
1862 |   user-select: none;
1863 |   border-radius: 3px;
1864 |   transition: background 20ms ease-in 0s;
1865 | }
1866 | 
1867 | .notion-equation-inline {
1868 |   -webkit-user-select: all;
1869 |   -moz-user-select: all;
1870 |   user-select: all;
1871 | }
1872 | 
1873 | .notion-equation-block {
1874 |   display: flex;
1875 |   flex-direction: column;
1876 |   overflow: auto;
1877 |   width: 100%;
1878 |   max-width: 100%;
1879 |   padding: 4px 8px;
1880 |   margin: 4px 0;
1881 |   cursor: pointer;
1882 | }
1883 | 
1884 | .notion-equation:hover {
1885 |   background: var(--bg-color-0);
1886 | }
1887 | 
1888 | .notion-equation:active,
1889 | .notion-equation:focus {
1890 |   background: var(--select-color-2);
1891 | }
1892 | 
1893 | .notion-frame .katex-display .katex {
1894 |   padding-right: 32px;
1895 | }
1896 | 
1897 | .notion-frame .katex > .katex-html {
1898 |   white-space: normal;
1899 | }
1900 | 
1901 | .notion-page-title {
1902 |   display: inline-flex;
1903 |   max-width: 100%;
1904 |   align-items: center;
1905 |   line-height: 1.3;
1906 |   transition: background 120ms ease-in 0s;
1907 | }
1908 | 
1909 | .notion-page-title-icon {
1910 |   display: flex;
1911 |   align-items: center;
1912 |   justify-content: center;
1913 |   height: 22px;
1914 |   width: 22px;
1915 |   border-radius: 3px;
1916 |   flex-shrink: 0;
1917 |   margin-left: 2px;
1918 |   margin-right: 6px;
1919 | }
1920 | 
1921 | .notion-collection-card-property .notion-link {
1922 |   border-bottom: 0 none;
1923 | }
1924 | 
1925 | .notion-collection-card-property .notion-page-title {
1926 |   transition: none;
1927 | }
1928 | 
1929 | .notion-collection-card-property .notion-page-title:hover {
1930 |   background: unset;
1931 | }
1932 | 
1933 | .notion-collection-card-property .notion-page-title-icon {
1934 |   margin-left: 0;
1935 |   height: 18px;
1936 |   width: 18px;
1937 | }
1938 | 
1939 | .notion-collection-card-property .notion-page-title-text {
1940 |   border-bottom: 0 none;
1941 | }
1942 | 
1943 | .notion-collection-card-property .notion-property-relation .notion-page-title-text {
1944 |   border-bottom: 1px solid;
1945 | }
1946 | 
1947 | .notion-page-title-text {
1948 |   position: relative;
1949 |   top: 1px;
1950 |   border-bottom: 1px solid var(--fg-color-1);
1951 |   line-height: 1.3;
1952 |   white-space: nowrap;
1953 |   overflow: hidden;
1954 |   text-overflow: ellipsis;
1955 |   font-weight: 500;
1956 | }
1957 | 
1958 | /* removes double underline with links */
1959 | .notion-link .notion-page-title-text {
1960 |   border-bottom: 0px;
1961 | }
1962 | 
1963 | .notion-collection-row {
1964 |   width: 100%;
1965 |   padding: 4px 0 8px;
1966 |   border-bottom: 1px solid var(--fg-color-0);
1967 |   margin-bottom: 1em;
1968 | }
1969 | 
1970 | .notion-collection-row-body {
1971 |   display: flex;
1972 |   flex-direction: column;
1973 | }
1974 | 
1975 | .notion-collection-row-property {
1976 |   display: flex;
1977 |   align-items: center;
1978 |   margin-bottom: 4px;
1979 | }
1980 | 
1981 | .notion-collection-row-value {
1982 |   flex: 1;
1983 |   padding: 6px 8px 7px;
1984 |   font-size: 14px;
1985 | }
1986 | 
1987 | .notion-collection-row-property .notion-collection-column-title {
1988 |   display: flex;
1989 |   align-items: center;
1990 |   width: 160px;
1991 |   height: 34px;
1992 |   color: var(--fg-color-3);
1993 |   padding: 0 6px;
1994 | }
1995 | 
1996 | .notion-collection-row-property .notion-property {
1997 |   width: 100%;
1998 | }
1999 | 
2000 | .notion-collection-row-property .notion-collection-column-title-icon {
2001 |   width: 16px;
2002 |   height: 16px;
2003 |   min-width: 16px;
2004 |   min-height: 16px;
2005 | }
2006 | 
2007 | .notion-collection-row-property .notion-link {
2008 |   border-bottom: 0 none;
2009 | }
2010 | 
2011 | .notion-collection-row-property .notion-property-relation .notion-page-title-text {
2012 |   border-bottom: 1px solid;
2013 | }
2014 | 
2015 | .notion-user {
2016 |   display: block;
2017 |   object-fit: cover;
2018 |   border-radius: 100%;
2019 |   width: 20px;
2020 |   height: 20px;
2021 | }
2022 | 
2023 | .notion-list-item-property .notion-property-multi_select-item {
2024 |   margin-bottom: 0;
2025 |   flex-wrap: none;
2026 | }
2027 | 
2028 | .notion-list-item-property .notion-property-multi_select-item:last-of-type {
2029 |   margin-right: 0;
2030 | }
2031 | 
2032 | .notion-toggle .notion-collection-header,
2033 | .notion-toggle .notion-table-view,
2034 | .notion-toggle .notion-board-view,
2035 | .notion-column .notion-collection-header,
2036 | .notion-column .notion-table-view,
2037 | .notion-column .notion-board-view {
2038 |   padding-left: 0 !important;
2039 |   padding-right: 0 !important;
2040 | }
2041 | 
2042 | .notion-toggle .notion-table,
2043 | .notion-toggle .notion-board,
2044 | .notion-column .notion-table,
2045 | .notion-column .notion-board {
2046 |   width: 100% !important;
2047 |   max-width: 100% !important;
2048 | }
2049 | 
2050 | @media only screen and (max-width: 730px) {
2051 |   .notion-page {
2052 |     padding-left: 2vw;
2053 |     padding-right: 2vw;
2054 |   }
2055 | 
2056 |   .notion-asset-wrapper {
2057 |     max-width: 100%;
2058 |   }
2059 | 
2060 |   .notion-asset-wrapper-full {
2061 |     max-width: 100vw;
2062 |   }
2063 | }
2064 | 
2065 | @media (max-width: 640px) {
2066 |   .notion-bookmark-image {
2067 |     display: none;
2068 |   }
2069 | }
2070 | 
2071 | .lazy-image-wrapper {
2072 |   position: relative;
2073 |   overflow: hidden;
2074 | }
2075 | 
2076 | .lazy-image-wrapper img {
2077 |   position: absolute;
2078 |   width: 100%;
2079 |   height: 100%;
2080 |   object-fit: cover;
2081 |   max-width: 100%;
2082 |   max-height: 100%;
2083 |   min-width: 100%;
2084 |   min-height: 100%;
2085 | }
2086 | 
2087 | .lazy-image-preview {
2088 |   filter: blur(20px);
2089 |   transform: scale(1.1);
2090 | 
2091 |   opacity: 1;
2092 |   transition: opacity 400ms ease-in !important;
2093 |   transition-delay: 100ms;
2094 |   will-change: opacity;
2095 | }
2096 | 
2097 | .lazy-image-wrapper img.lazy-image-real {
2098 |   position: relative;
2099 | }
2100 | 
2101 | .lazy-image-real {
2102 |   opacity: 0;
2103 |   transition: opacity 400ms ease-out !important;
2104 |   will-change: opacity;
2105 | }
2106 | 
2107 | .lazy-image-real.medium-zoom-image {
2108 |   transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1), opacity 400ms ease-out !important;
2109 |   will-change: opacity, transform;
2110 | }
2111 | 
2112 | .medium-zoom-image--opened {
2113 |   object-fit: cover;
2114 |   opacity: 1;
2115 | }
2116 | 
2117 | /* NOTE: if we hide the preview image, there's a weird bug with react hydration where
2118 |    the image will sometimes flicker to show the background during initial page load.
2119 |    So I'm removing this `opacity: 0` for now, but it will cause issues if the real
2120 |    image is transparent. */
2121 | .lazy-image-loaded .lazy-image-preview {
2122 |   opacity: 0;
2123 | }
2124 | 
2125 | .lazy-image-loaded .lazy-image-real {
2126 |   opacity: 1;
2127 | }
2128 | 
2129 | .notion-page-cover.lazy-image-wrapper {
2130 |   padding: 0 !important;
2131 | }
2132 | 
2133 | .notion-collection-card-cover .lazy-image-wrapper {
2134 |   padding: 0 !important;
2135 |   height: 100%;
2136 | }
2137 | 
2138 | .notion-page-cover .lazy-image-preview,
2139 | .notion-page-cover .lazy-image-real {
2140 |   will-change: unset !important;
2141 | }
2142 | 
2143 | .notion-page-cover .lazy-image-loaded .lazy-image-preview {
2144 |   opacity: 1;
2145 | }
2146 | 
2147 | .notion-lite {
2148 |   overflow-y: auto;
2149 | }
2150 | 
2151 | .notion-lite .notion-page {
2152 |   width: 100%;
2153 |   padding: 0;
2154 |   /* padding: calc(max(2vmin, 8px)); */
2155 | }
2156 | 
2157 | .notion-lite .notion-collection-header,
2158 | .notion-lite .notion-table-view,
2159 | .notion-lite .notion-board-view {
2160 |   padding-left: 0 !important;
2161 |   padding-right: 0 !important;
2162 | }
2163 | 
2164 | .notion-lite .notion-board,
2165 | .notion-lite .notion-table {
2166 |   width: 100% !important;
2167 | }
2168 | 
2169 | .notion-header {
2170 |   position: sticky;
2171 |   top: 0;
2172 |   left: 0;
2173 |   z-index: 200;
2174 | 
2175 |   width: 100%;
2176 |   max-width: 100vw;
2177 |   overflow: hidden;
2178 |   height: var(--notion-header-height);
2179 |   min-height: var(--notion-header-height);
2180 | 
2181 |   background: var(--bg-color);
2182 | }
2183 | 
2184 | .notion-header .nav-header {
2185 |   position: absolute;
2186 |   top: 0;
2187 |   left: 0;
2188 |   right: 0;
2189 |   height: 100%;
2190 |   display: flex;
2191 |   flex-direction: row;
2192 |   justify-content: space-between;
2193 |   align-items: center;
2194 |   padding: 0 12px;
2195 |   text-size-adjust: 100%;
2196 |   line-height: 1.5;
2197 |   line-height: 1.2;
2198 |   font-size: 14px;
2199 | }
2200 | 
2201 | .notion-header .breadcrumbs {
2202 |   display: flex;
2203 |   flex-direction: row;
2204 |   align-items: center;
2205 |   height: 100%;
2206 |   flex-grow: 0;
2207 |   min-width: 0;
2208 |   margin-right: 8px;
2209 | }
2210 | 
2211 | .notion-header .breadcrumb {
2212 |   display: inline-flex;
2213 |   flex-direction: row;
2214 |   justify-content: center;
2215 |   align-items: center;
2216 |   white-space: nowrap;
2217 |   text-overflow: ellipsis;
2218 | 
2219 |   color: var(--fg-color);
2220 |   text-decoration: none;
2221 |   margin: 1px 0px;
2222 |   padding: 4px 6px;
2223 |   border-radius: 3px;
2224 |   transition: background 120ms ease-in 0s;
2225 |   user-select: none;
2226 |   background: transparent;
2227 |   cursor: pointer;
2228 | }
2229 | 
2230 | .notion-header .breadcrumb .icon {
2231 |   position: relative;
2232 |   top: -1px;
2233 | }
2234 | 
2235 | .notion-header img.icon {
2236 |   width: 18px !important;
2237 |   height: 18px !important;
2238 | }
2239 | 
2240 | .notion-header .icon {
2241 |   font-size: 18px;
2242 |   margin-right: 6px;
2243 |   line-height: 1.1;
2244 | }
2245 | 
2246 | .notion-header .searchIcon {
2247 |   width: 14px;
2248 |   height: 14px;
2249 |   margin-right: 6px;
2250 |   color: var(--fg-color);
2251 |   fill: var(--fg-color);
2252 | }
2253 | 
2254 | .notion-header .breadcrumb:not(.active):hover {
2255 |   background: var(--bg-color-0);
2256 | }
2257 | 
2258 | .notion-header .breadcrumb:not(.active):active {
2259 |   background: var(--bg-color-1);
2260 | }
2261 | 
2262 | .notion-header .breadcrumb.active {
2263 |   cursor: default;
2264 | }
2265 | 
2266 | .notion-header .spacer {
2267 |   margin: 0 2px;
2268 |   color: var(--fg-color-2);
2269 | }
2270 | 
2271 | .notion-header .button {
2272 |   height: 28px;
2273 |   padding: 0 8px;
2274 | }
2275 | 
2276 | .notion-search-overlay {
2277 |   position: fixed;
2278 |   top: 0;
2279 |   left: 0;
2280 |   right: 0;
2281 |   bottom: 0;
2282 |   background: rgba(15, 15, 15, 0.6);
2283 | 
2284 |   display: flex;
2285 |   justify-content: center;
2286 |   align-items: flex-start;
2287 |   z-index: 1001;
2288 | }
2289 | 
2290 | .notion-search {
2291 |   box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 5px 10px,
2292 |     rgba(15, 15, 15, 0.2) 0px 15px 40px;
2293 |   border-radius: 3px;
2294 |   background: #fff;
2295 | 
2296 |   position: relative;
2297 |   top: 90px;
2298 |   max-width: 600px;
2299 |   min-height: 50px;
2300 |   max-height: 80vh;
2301 |   width: 75%;
2302 |   overflow: hidden;
2303 |   outline: none;
2304 | 
2305 |   font-size: 16px;
2306 |   line-height: 1.5;
2307 |   color: rgb(55, 53, 47);
2308 |   caret-color: rgb(55, 53, 47);
2309 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif,
2310 |     "Segoe UI Emoji", "Segoe UI Symbol";
2311 | }
2312 | 
2313 | .notion-search .quickFindMenu {
2314 |   display: flex;
2315 |   flex-direction: column;
2316 |   min-width: 100%;
2317 |   max-width: calc(100vw - 24px);
2318 |   height: 100%;
2319 |   max-height: 80vh;
2320 |   min-height: 50px;
2321 | }
2322 | 
2323 | .notion-search .searchBar {
2324 |   display: flex;
2325 |   flex-direction: row;
2326 |   align-items: center;
2327 |   height: 52px;
2328 |   box-shadow: rgba(55, 53, 47, 0.09) 0px 1px 0px;
2329 |   font-size: 18px;
2330 |   line-height: 27px;
2331 |   padding: 0 16px;
2332 | }
2333 | 
2334 | .notion-search .searchInput {
2335 |   resize: none;
2336 |   white-space: nowrap;
2337 |   border: none;
2338 |   outline: none;
2339 |   flex: 1;
2340 | 
2341 |   line-height: inherit;
2342 |   font-size: inherit;
2343 | }
2344 | 
2345 | .notion-search .inlineIcon {
2346 |   margin-right: 10px;
2347 |   fill: rgba(55, 53, 47, 0.4);
2348 | }
2349 | 
2350 | .notion-search .clearButton {
2351 |   user-select: none;
2352 |   border-radius: 20px;
2353 |   cursor: pointer;
2354 |   margin-left: 8px;
2355 | }
2356 | 
2357 | .notion-search .clearIcon {
2358 |   width: 14px;
2359 |   height: 14px;
2360 |   fill: rgba(55, 53, 47, 0.3);
2361 | }
2362 | 
2363 | .notion-search .clearButton:hover .clearIcon {
2364 |   fill: rgba(55, 53, 47, 0.4);
2365 | }
2366 | 
2367 | .notion-search .clearButton:active .clearIcon {
2368 |   fill: rgba(55, 53, 47, 0.8);
2369 | }
2370 | 
2371 | @keyframes spinner {
2372 |   to {
2373 |     transform: rotate(360deg);
2374 |   }
2375 | }
2376 | 
2377 | .notion-search .loadingIcon {
2378 |   animation: spinner 0.6s linear infinite;
2379 | }
2380 | 
2381 | .notion-search .noResultsPane {
2382 |   display: flex;
2383 |   flex-direction: column;
2384 |   justify-content: center;
2385 |   align-items: center;
2386 |   padding: 32px 16px;
2387 | }
2388 | 
2389 | .notion-search .noResults {
2390 |   font-size: 14px;
2391 |   font-weight: 500;
2392 |   line-height: 20px;
2393 |   color: rgba(55, 53, 47, 0.6);
2394 | }
2395 | 
2396 | .notion-search .noResultsDetail {
2397 |   font-size: 14px;
2398 |   margin-top: 2px;
2399 |   color: rgba(55, 53, 47, 0.4);
2400 | }
2401 | 
2402 | .notion-search .resultsFooter {
2403 |   box-shadow: rgba(55, 53, 47, 0.09) 0px -1px 0px;
2404 |   margin-top: 1px;
2405 |   font-size: 12px;
2406 |   min-height: 28px;
2407 |   color: rgba(55, 53, 47, 0.4);
2408 |   user-select: none;
2409 |   padding: 0 16px;
2410 |   display: flex;
2411 |   flex-direction: column;
2412 |   justify-content: center;
2413 | }
2414 | 
2415 | .notion-search .resultsCount {
2416 |   font-weight: 500;
2417 |   color: rgba(55, 53, 47, 0.6);
2418 | }
2419 | 
2420 | .notion-search .resultsPane {
2421 |   display: flex;
2422 |   flex-direction: column;
2423 |   height: 100%;
2424 |   flex: 1;
2425 |   overflow: auto;
2426 | }
2427 | 
2428 | .notion-search .result {
2429 |   padding: 8px 14px;
2430 |   border-bottom: 1px solid rgba(55, 53, 47, 0.06);
2431 |   min-height: 36px;
2432 |   font-size: 14px;
2433 |   user-select: none;
2434 |   display: flex;
2435 |   flex-direction: row;
2436 |   align-items: center;
2437 |   justify-content: flex-start;
2438 |   color: rgb(55, 53, 47);
2439 |   text-decoration: none;
2440 | }
2441 | 
2442 | .notion-search .resultsPane .result:hover {
2443 |   background: rgba(55, 53, 47, 0.08) !important;
2444 | }
2445 | 
2446 | .notion-search .resultsPane .result:active {
2447 |   background: rgba(55, 53, 47, 0.16) !important;
2448 | }
2449 | 
2450 | .notion-sync-block {
2451 |   width: 100%;
2452 | }
2453 | 
2454 | .notion-table-of-contents {
2455 |   width: 100%;
2456 |   margin: 4px 0;
2457 | }
2458 | 
2459 | .notion-table-of-contents-item {
2460 |   font-size: 14px;
2461 |   white-space: nowrap;
2462 |   overflow: hidden;
2463 |   color: var(--fg-color-6);
2464 |   text-overflow: ellipsis;
2465 |   text-decoration: underline;
2466 |   text-underline-offset: 2px;
2467 |   text-decoration-color: var(--fg-color-1);
2468 | }
2469 | 
2470 | .notion-tweet {
2471 |   display: flex;
2472 |   justify-content: center;
2473 |   width: 100%;
2474 | }
2475 | .notion-tweet-error {
2476 |   font-size: 0.8rem;
2477 |   padding: 0.5rem 1rem;
2478 |   border: 1px solid rgb(233, 233, 231);
2479 |   border-radius: 3px;
2480 | }
2481 | 
2482 | .token.operator,
2483 | .token.entity,
2484 | .token.url,
2485 | .language-css .token.string,
2486 | .style .token.string {
2487 |   background: none !important;
2488 | }
2489 | 
2490 | :not(pre) > code[class*="language-"],
2491 | pre[class*="language-"] {
2492 |   background: none !important;
2493 | }
2494 | 


--------------------------------------------------------------------------------