feat: initial commit

phuctm97 · phuctm97 · commit 5ccd07b3f7dc · 2022-08-09T19:50:59.000+08:00
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -0,0 +1,11 @@
+version: 2
+
+updates:
+  - package-ecosystem: npm
+    directory: /
+    schedule:
+      interval: monthly
+  - package-ecosystem: github-actions
+    directory: /
+    schedule:
+      interval: monthly
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -0,0 +1,22 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: yarn
+      - run: yarn install --frozen-lockfile
+      - name: Run yarn commitlint --from=head_commit.message
+        run: echo "${{ github.event.head_commit.message }}" | yarn commitlint
+      - run: yarn prettier --check .
+      - run: yarn cspell --no-must-find-files '**'
+      - run: yarn build
diff --git a/.github/workflows/pr-metadata.yml b/.github/workflows/pr-metadata.yml
@@ -0,0 +1,37 @@
+name: PR / Metadata
+
+on:
+  pull_request:
+    branches: [main]
+    types: [opened, synchronize, reopened, edited]
+
+permissions:
+  pull-requests: write
+  contents: write
+
+jobs:
+  validate-metadata:
+    name: Validate metadata
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: yarn
+      - run: yarn install --frozen-lockfile
+      - name: Run yarn commitlint --from=pull_request.title
+        run: echo "${{ github.event.pull_request.title }}" | yarn commitlint
+  auto-merge:
+    name: Auto-merge
+    if: ${{ github.actor == 'dependabot[bot]' }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: dependabot/fetch-metadata@v1.3.3
+        id: dependabot-metadata
+        with:
+          github-token: "${{ secrets.GITHUB_TOKEN }}"
+      - run: gh pr merge --auto --squash ${{ github.event.pull_request.html_url }}
+        if: ${{ steps.dependabot-metadata.outputs.update-type != 'version-update:semver-major' }}
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.github/workflows/pr-sources.yml b/.github/workflows/pr-sources.yml
@@ -0,0 +1,20 @@
+name: PR / Sources
+
+on:
+  pull_request:
+    branches: [main]
+
+jobs:
+  validate-sources:
+    name: Validate sources
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: yarn
+      - run: yarn install --frozen-lockfile
+      - run: yarn prettier --check .
+      - run: yarn cspell --no-must-find-files '**'
+      - run: yarn build
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+out
+.env
+.DS_Store
diff --git a/.husky/commit-msg b/.husky/commit-msg
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn commitlint --edit $1
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn lint-staged
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1 @@
+out
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "streetsidesoftware.code-spell-checker",
+    "vivaxy.vscode-conventional-commits"
+  ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,14 @@
+{
+  "javascript.suggestionActions.enabled": false,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "files.trimTrailingWhitespace": true,
+  "files.trimFinalNewlines": true,
+  "files.insertFinalNewline": true,
+  "files.exclude": {
+    "**/node_modules": true,
+    "yarn.lock": true,
+    ".husky": true
+  },
+  "conventionalCommits.gitmoji": false
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,63 @@
+# Notion Outline
+
+Show floating sticky outline (table of contents) for Notion pages, powered by nbundle.
+
+> This is an [nbundle-powered][nbundle for developers] [Notion app][nbundle] bootstrapped with [create-notion-app].
+
+## Prerequisite
+
+To develop this app, make sure to have the following products installed:
+
+- [Node.js] 14+
+
+- [Yarn] 1.22+
+
+- [nbundle App Store][nbundle] for browsers and/or desktop apps
+
+Open your terminal, go to the project directory, and run the following command to install dependencies:
+
+```shell
+yarn install
+```
+
+## Develop
+
+Open your terminal, go to the project directory, and run the following command:
+
+```shell
+yarn develop --target chrome
+```
+
+The nbundle CLI will open Google Chrome with the app automatically loaded in development mode (hot reloading, error reporting, sourcemap, etc).
+
+Change the `--target` parameter to `edge` or `firefox` if you want to develop on Microsoft Edge or Firefox instead of Google Chrome.
+
+You can edit the app by modifying [`app/index.jsx`](app/index.jsx). The app auto-updates as you edit the file.
+
+## Ship
+
+Open your terminal, go to your project directory, and run the following command:
+
+```shell
+yarn ship
+```
+
+The nbundle CLI will ask you to log into your [nbundle for Developers] account if you haven't already, then build & publish the app to all supported platforms. Depending on the target platform, the app may be pending for review & approval.
+
+## Learn
+
+To learn more about [nbundle] and [nbundle for Developers], take a look at the following resources:
+
+- [nbundle App Store](https://nbundle.com) - get the App Store to see how Notion users discover and use apps.
+
+- [nbundle Documentation](https://developers.nbundle.com) - learn about nbundle features, architecture, and APIs.
+
+- [nbundle API Reference](https://developers.nbundle.com/docs/api) - see a complete reference of the nbundle APIs.
+
+<!-- Links -->
+
+[node.js]: https://nodejs.org
+[yarn]: https://classic.yarnpkg.com
+[nbundle]: https://www.nbundle.com
+[nbundle for developers]: https://developers.nbundle.com
+[create-notion-app]: https://www.github.com/nbundle/create-notion-app
diff --git a/commitlint.config.js b/commitlint.config.js
@@ -0,0 +1,4 @@
+module.exports = {
+  extends: ["@commitlint/config-angular"],
+  ignores: [(commit) => /^build\((deps|deps-dev)\): bump/.test(commit)],
+};
diff --git a/cspell.json b/cspell.json
@@ -0,0 +1,11 @@
+{
+  "ignorePaths": [
+    "package.json",
+    "cspell.json",
+    ".env",
+    "node_modules",
+    ".vscode",
+    "out"
+  ],
+  "words": ["commitlint", "nbundle", "sourcemaps", "topbar"]
+}
diff --git a/icon.png b/icon.png
diff --git a/lint-staged.config.js b/lint-staged.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  "*": ["prettier --write --ignore-unknown", "cspell --no-must-find-files"],
+};
diff --git a/package.json b/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "nbundle-app-vv26h",
+  "version": "0.0.2",
+  "productName": "Notion Outline",
+  "description": "Show floating sticky outline (table of contents) for Notion pages",
+  "private": true,
+  "engines": {
+    "node": ">=14.0.0",
+    "yarn": "^1.22.0"
+  },
+  "dependencies": {
+    "@nbundle/react": "^1.0.29",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.4.0"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^17.0.3",
+    "@commitlint/config-angular": "^17.0.3",
+    "@commitlint/prompt-cli": "^17.0.3",
+    "@nbundle/cli": "^1.0.64",
+    "cspell": "^6.5.0",
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.3",
+    "prettier": "^2.7.1"
+  },
+  "scripts": {
+    "develop": "nbundle develop",
+    "dev": "nbundle develop",
+    "build": "nbundle build",
+    "preview": "nbundle preview",
+    "start": "nbundle preview",
+    "ship": "nbundle ship",
+    "deploy": "nbundle ship",
+    "prepare": "husky install"
+  }
+}
diff --git a/src/app.jsx b/src/app.jsx
@@ -0,0 +1,89 @@
+import { useCallback, useEffect, useState } from "react";
+import {
+  TopbarMenuItem,
+  Sidebar,
+  SidebarIsEmpty,
+  useOpenSidebar,
+  useCloseSidebar,
+  useNotionFullPageContentBlockHtml,
+} from "@nbundle/react";
+
+function Outline({ autoToggle }) {
+  // Get the table of contents block element (if any) in the user's current Notion page
+  const toc = useNotionFullPageContentBlockHtml({ type: "table_of_contents" });
+
+  // Sync inner HTML of the block element with the sidebar element
+  const [html, setHtml] = useState("");
+  useEffect(() => {
+    if (!toc) {
+      setHtml("");
+      return;
+    }
+    const update = () => {
+      setHtml(toc.innerHTML);
+    };
+    const mutationObserver = new MutationObserver(update);
+    mutationObserver.observe(toc, {
+      subtree: true, // For content
+      childList: true,
+      characterData: true,
+      attributeFilter: ["style"], // For light/dark mode
+    });
+    update();
+    return () => mutationObserver.disconnect();
+  }, [toc, setHtml]);
+
+  // Auto show/hide the sidebar when there is/isn't outline
+  const hasHtml = !!html;
+  const openSidebar = useOpenSidebar();
+  const closeSidebar = useCloseSidebar();
+  useEffect(() => {
+    if (!autoToggle) return;
+    if (hasHtml) openSidebar();
+    else closeSidebar();
+  }, [autoToggle, hasHtml, openSidebar, closeSidebar]);
+
+  return (
+    // Show outline in the sidebar
+    <Sidebar name="Outline">
+      {html ? (
+        <div
+          className="nbundle-m-4"
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
+      ) : (
+        <SidebarIsEmpty message="No table of contents. To see outline, add a table of contents block to the page." />
+      )}
+    </Sidebar>
+  );
+}
+
+export default function App() {
+  // Whether or not to automatically toggle the sidebar when the outline should be shown
+  const [autoToggle, setAutoToggle] = useState(
+    () => localStorage.getItem("notion-outline-auto-toggle") !== "false" // Get user preference from local storage, default is true
+  );
+
+  // Save user preference to local storage
+  useEffect(() => {
+    if (autoToggle) localStorage.removeItem("notion-outline-auto-toggle");
+    else localStorage.setItem("notion-outline-auto-toggle", "false");
+  }, [autoToggle]);
+
+  const toggleAutoToggle = useCallback(
+    () => setAutoToggle((autoToggle) => !autoToggle),
+    [setAutoToggle]
+  );
+  return (
+    <>
+      {/* User can turn on/off auto-toggle via the topbar menu */}
+      <TopbarMenuItem
+        type="toggle"
+        text="Auto show/hide outline"
+        checked={autoToggle}
+        onClick={toggleAutoToggle}
+      />
+      <Outline autoToggle={autoToggle} />
+    </>
+  );
+}
diff --git a/src/background.js b/src/background.js
diff --git a/src/content.js b/src/content.js
diff --git a/yarn.lock b/yarn.lock

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +node_modules
 +out
 +.env
 +.DS_Store