NotionX / NotionX/react-notion-x

Missing Getting Started Documentation with Critical Notion Information

Open
#474 4 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
5.4k
Forks
645
PR merge metrics
No merged PRs in 30d

Description

Description

print-notion-page.ts

import { NotionAPI } from 'notion-client'

function getPage(id: string) {
  const notion = new NotionAPI()
  return notion.getPage(id)
}

async function printPage(id: string) {
  console.log('id: ', id)
  const recordMap = await getPage(id)
  console.log(typeof recordMap)
}

// take page id from argv and print it
printPage(process.argv[2])
  1. copy above into print-notion-page.ts
  2. sign up to notion, basic free account
  3. change workspace to public
  4. make a page
  5. copy it's id
  6. run below
> npx tsx ./print-notion-page.ts the-page-id

results in :

Error: Notion page not found "efdb8bdfe54c4f279588f765652c5978"
    at Object.getPage (🚧💋/node_modules/notion-client/build/index.js:1:641)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at printPage ((🚧💋/test.ts:13:21)

image

Notion Test Page ID

efdb8bdfe54c4f279588f765652c5978


> cat ./package.json

{
  "name": "nextjs-notion-starter-kit",
  "version": "2.0.0",
  "private": true,
  "description": "The perfect starter kit for building beautiful websites with Next.js and Notion.",
  "author": "Travis Fischer <travis@transitivebullsh.it>",
  "repository": "transitive-bullshit/nextjs-notion-starter-kit",
  "license": "MIT",
  "engines": {
    "node": ">=16"
  },
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "deploy": "vercel deploy",
    "deps": "run-s deps:*",
    "deps:update": "[ -z $GITHUB_ACTIONS ] && yarn add notion-client notion-types notion-utils react-notion-x || echo 'Skipping deps:update on CI'",
    "deps:link": "[ -z $GITHUB_ACTIONS ] && yarn link notion-client notion-types notion-utils react-notion-x || echo 'Skipping deps:link on CI'",
    "analyze": "cross-env ANALYZE=true next build",
    "analyze:server": "cross-env BUNDLE_ANALYZE=server next build",
    "analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build",
    "test": "run-p test:*",
    "test:lint": "eslint '**/*.{ts,tsx}'",
    "test:prettier": "prettier '**/*.{js,jsx,ts,tsx}' --check"
  },
  "dependencies": {
    "@fisch0920/use-dark-mode": "^2.4.0",
    "@keyvhq/core": "^1.6.9",
    "@keyvhq/redis": "^1.6.10",
    "@react-icons/all-files": "^4.1.0",
    "@vercel/og": "^0.0.19",
    "classnames": "^2.3.1",
    "date-fns": "^2.28.0",
    "expiry-map": "^2.0.0",
    "fathom-client": "^3.4.1",
    "got": "^12.0.3",
    "isomorphic-unfetch": "^3.1.0",
    "lqip-modern": "^1.2.0",
    "next": "^12.3.1",
    "notion-client": "6.16.0",
    "notion-types": "6.16.0",
    "notion-utils": "6.16.0",
    "p-map": "^5.3.0",
    "p-memoize": "^6.0.1",
    "posthog-js": "^1.20.2",
    "react": "^18.2.0",
    "react-body-classname": "^1.3.1",
    "react-dom": "^18.2.0",
    "react-notion-x": "6.16.0",
    "react-tweet-embed": "^2.0.0",
    "react-use": "^17.3.2",
    "rss": "^1.2.2",
    "ts-node": "^10.9.1",
    "tsx": "^3.12.6"
  },
  "devDependencies": {
    "@next/bundle-analyzer": "^12.3.1",
    "@trivago/prettier-plugin-sort-imports": "^3.3.1",
    "@types/node": "^18.8.5",
    "@types/react": "^18.0.21",
    "@typescript-eslint/eslint-plugin": "^5.40.0",
    "@typescript-eslint/parser": "^5.40.0",
    "cross-env": "^7.0.2",
    "eslint": "^8.25.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-react": "^7.31.10",
    "eslint-plugin-react-hooks": "^4.6.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.7.1",
    "typescript": "^4.8.4"
  },
  "overrides": {
    "cacheable-request": {
      "keyv": "npm:@keyvhq/core@~1.6.6"
    }
  }
}

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the reproduction shown in print-notion-page.ts and the notion-client entry in package.json; run it with the supplied page ID to confirm the behavior. Then locate the getting-started documentation and document the required Notion workspace, page visibility, and page-ID steps. Done means a newcomer can follow the guide and retrieve the public page successfully.

Written by the indexing model from the issue text.

Assessment

Tech stack
nextjs, react, typescript
Domain
documentation
Issue type
Documentation
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.