diff --git a/examples/next-notion-blog/.babelrc b/examples/next-notion-blog/.babelrc deleted file mode 100644 index 1ff94f7..0000000 --- a/examples/next-notion-blog/.babelrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "presets": ["next/babel"] -} diff --git a/examples/next-notion-blog/.eslintignore b/examples/next-notion-blog/.eslintignore deleted file mode 100644 index 35e915e..0000000 --- a/examples/next-notion-blog/.eslintignore +++ /dev/null @@ -1,3 +0,0 @@ -**/node_modules/* -**/out/* -**/.next/* diff --git a/examples/next-notion-blog/.eslintrc.json b/examples/next-notion-blog/.eslintrc.json deleted file mode 100644 index 6dd5286..0000000 --- a/examples/next-notion-blog/.eslintrc.json +++ /dev/null @@ -1,47 +0,0 @@ -{ - "parser": "@typescript-eslint/parser", - "plugins": ["@typescript-eslint"], - "extends": [ - "eslint:recommended", - "plugin:react/recommended", - "plugin:@typescript-eslint/recommended" - // Uncomment the following lines to enable eslint-config-prettier - // Is not enabled right now to avoid issues with the Next.js repo - // "prettier", - ], - "env": { - "es6": true, - "browser": true, - "jest": true, - "node": true - }, - "settings": { - "react": { - "version": "detect" - } - }, - "rules": { - "react/react-in-jsx-scope": 0, - "react/display-name": 0, - "react/prop-types": 0, - "@typescript-eslint/explicit-function-return-type": 0, - "@typescript-eslint/explicit-member-accessibility": 0, - "@typescript-eslint/indent": 0, - "@typescript-eslint/member-delimiter-style": 0, - "@typescript-eslint/no-explicit-any": 0, - "@typescript-eslint/no-var-requires": 0, - "@typescript-eslint/no-use-before-define": 0, - "@typescript-eslint/no-unused-vars": [ - 2, - { - "argsIgnorePattern": "^_" - } - ], - "no-console": [ - 2, - { - "allow": ["warn", "error"] - } - ] - } -} diff --git a/examples/next-notion-blog/.gitignore b/examples/next-notion-blog/.gitignore deleted file mode 100644 index 1437c53..0000000 --- a/examples/next-notion-blog/.gitignore +++ /dev/null @@ -1,34 +0,0 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.js - -# testing -/coverage - -# next.js -/.next/ -/out/ - -# production -/build - -# misc -.DS_Store -*.pem - -# debug -npm-debug.log* -yarn-debug.log* -yarn-error.log* - -# local env files -.env.local -.env.development.local -.env.test.local -.env.production.local - -# vercel -.vercel diff --git a/examples/next-notion-blog/.prettierignore b/examples/next-notion-blog/.prettierignore deleted file mode 100644 index 4c1112d..0000000 --- a/examples/next-notion-blog/.prettierignore +++ /dev/null @@ -1,5 +0,0 @@ -node_modules -.next -yarn.lock -package-lock.json -public diff --git a/examples/next-notion-blog/.prettierrc b/examples/next-notion-blog/.prettierrc deleted file mode 100644 index b2095be..0000000 --- a/examples/next-notion-blog/.prettierrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "semi": false, - "singleQuote": true -} diff --git a/examples/next-notion-blog/README.md b/examples/next-notion-blog/README.md deleted file mode 100644 index c55475c..0000000 --- a/examples/next-notion-blog/README.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: NextJS Notion Blog -description: A NextJS app using Notion as a CMS for a blog -tags: - - next - - notion - - tailwindcss - - typescript ---- - -# NextJS Notion blog example - -This is an example [NextJS](https://nextjs.org/) app that uses [Notion](https://www.notion.so/) as a CMS for a blog. - -[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/new?template=https%3A%2F%2Fgithub.com%2Frailwayapp%2Fexamples%2Ftree%2Fmaster%2Fexamples%2Fnext-notion-blog&envs=BLOG_INDEX_ID%2CNOTION_TOKEN) - -## ✨ Features - -- NextJS -- TypeScript -- TailwindCSS -- Notion as a CMS - -## 💁‍♀️ How to use - -- When you deploy your application using the link above, we will ask you for the `NOTION_TOKEN` and the `BLOG_INDEX_ID`. This section will guide you on how to get those variables and deploy your blog to Railway. - - - **Blog index ID**: If the URL of your page is https://www.notion.so/Blog-eb3df599cd9b4a8284c0f41bf5563966, then your BLOG_INDEX_ID would be eb3df599cd9b4a8284c0f41bf5563966. Basically, the part after your page title in the URL bar. - - ![Blog index ID](https://user-images.githubusercontent.com/10681116/116751615-4a514b00-a9d2-11eb-86ed-5780e8f3c54c.jpeg) - - - **Notion token**: To get this, just look for the token_v2 cookie while on Notion. - - ![Notion token](https://user-images.githubusercontent.com/10681116/116751809-94d2c780-a9d2-11eb-8ae0-ed8c58ff75b3.jpeg) - -## 📝 Notes - -- Based on what your source for the images is, you will need to update the `images` key inside `next.config.js` otherwise your images will not render properly. diff --git a/examples/next-notion-blog/components/Button.tsx b/examples/next-notion-blog/components/Button.tsx deleted file mode 100644 index 7b6209d..0000000 --- a/examples/next-notion-blog/components/Button.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React, { ButtonHTMLAttributes } from 'react' - -const Button: React.FC> = (props) => ( - - - - - )} - - {(!post.content || post.content.length === 0) && ( -

This post has no content

- )} - - {(post.content || []).map((block, blockIdx) => { - const { value } = block - const { type, properties, id, parent_id } = value - const isLast = blockIdx === post.content.length - 1 - const isList = listTypes.has(type) - const toRender: Array = [] - - if (isList) { - listTagName = components[type === 'bulleted_list' ? 'ul' : 'ol'] - listLastId = `list${id}` - - listMap[id] = { - key: id, - nested: [], - children: textBlock(properties.title, true, id), - } - - if (listMap[parent_id]) { - listMap[id].isNested = true - listMap[parent_id].nested.push(id) - } - } - - if (listTagName && (isLast || !isList)) { - toRender.push( - React.createElement( - listTagName, - { key: listLastId! }, - Object.keys(listMap).map((itemId) => { - if (listMap[itemId].isNested) return null - - const createEl = (item) => - React.createElement( - components.li || 'ul', - { key: item.key }, - item.children, - item.nested.length > 0 - ? React.createElement( - components.ul || 'ul', - { key: item + 'sub-list' }, - item.nested.map((nestedId) => - createEl(listMap[nestedId]) - ) - ) - : null - ) - return createEl(listMap[itemId]) - }) - ) - ) - listMap = {} - listLastId = null - listTagName = null - } - - const renderHeading = (Type: string | React.ComponentType) => { - toRender.push( - - {textBlock(properties.title, true, id)} - - ) - } - - switch (type) { - case 'page': - case 'divider': - break - case 'text': - if (properties) { - toRender.push(textBlock(properties.title, false, id)) - } - break - case 'image': - case 'video': - case 'embed': { - const { format = {} } = value - const { - block_width, - block_height, - display_source, - block_aspect_ratio, - } = format - const baseBlockWidth = 768 - const roundFactor = Math.pow(10, 2) - // calculate percentages - const width = block_width - ? `${ - Math.round( - (block_width / baseBlockWidth) * 100 * roundFactor - ) / roundFactor - }%` - : block_height || '100%' - - const isImage = type === 'image' - const Comp = isImage ? 'img' : 'video' - const useWrapper = block_aspect_ratio && !block_height - const childStyle: CSSProperties = useWrapper - ? { - width: '100%', - height: '100%', - border: 'none', - position: 'absolute', - top: 0, - } - : { - width, - border: 'none', - height: block_height, - display: 'block', - maxWidth: '100%', - } - - let child: React.ReactElement | null = null - - if (!isImage && !value.file_ids) { - // external resource use iframe - child = ( -