From f086d5eb5ac54654fa6b083a2ac5ef9052752f03 Mon Sep 17 00:00:00 2001 From: kellen xavier Date: Tue, 27 May 2025 01:08:18 -0300 Subject: [PATCH 1/6] fix: add vercel.json com node para build compatibility --- vercel.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 vercel.json diff --git a/vercel.json b/vercel.json new file mode 100644 index 00000000..d272b3d7 --- /dev/null +++ b/vercel.json @@ -0,0 +1,7 @@ +{ + "build": { + "env": { + "NODE_OPTIONS": "--openssl-legacy-provider" + } + } +} From ba72c9c769e16df4064b66a2c6b9eb4011b6c99f Mon Sep 17 00:00:00 2001 From: kellen xavier Date: Tue, 27 May 2025 01:16:01 -0300 Subject: [PATCH 2/6] feat: add ajuste no titulo --- src/pages/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 6426ae61..9cee9621 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -14,7 +14,7 @@ export default function Index() { width="250" alt="Vercel + Notion" /> -

My Notion Blog

+

Meu Blog

Blazing Fast Notion Blog with Next.js'{' '} Date: Thu, 29 May 2025 23:54:58 -0300 Subject: [PATCH 3/6] fix: autalizar blog-notion + add ajustes de layout --- package.json | 4 +- public/atom | 25 ++++++++++ readme.md | 83 ++++++++------------------------ src/components/ext-link.tsx | 4 +- src/components/features.tsx | 44 ++--------------- src/components/footer.tsx | 26 +++------- src/components/header.tsx | 7 ++- src/components/heading.tsx | 14 +++--- src/components/spotifyPlayer.tsx | 20 ++++++++ src/lib/notion/getBlogIndex.ts | 16 +++--- src/pages/_app.tsx | 2 + src/pages/contact.tsx | 23 ++------- src/pages/index.tsx | 45 ++--------------- tsconfig.json | 6 +-- yarn.lock | 23 ++++++--- 15 files changed, 128 insertions(+), 214 deletions(-) create mode 100644 public/atom create mode 100644 src/components/spotifyPlayer.tsx diff --git a/package.json b/package.json index 8634d680..353aab24 100644 --- a/package.json +++ b/package.json @@ -22,11 +22,11 @@ }, "devDependencies": { "@types/katex": "0.11.0", - "@types/node": "14.14.31", + "@types/node": "^22.15.26", "@types/react": "17.0.2", "lint-staged": "10.5.4", "pre-commit": "1.2.2", "prettier": "2.2.1", - "typescript": "^4.4.4" + "typescript": "^5.8.3" } } diff --git a/public/atom b/public/atom new file mode 100644 index 00000000..792994fe --- /dev/null +++ b/public/atom @@ -0,0 +1,25 @@ + + + My Blog + Blog + + + 2025-05-30T02:06:39.566Z + My Notion Blog + + /blog/meu-primeiro-post + Teste - Sempre um teste + + 2025-05-27T03:00:00.883Z + +
+

📝 Um parágrafo curto como introdução.

+📝 Segundo parágrafo como resumo.

+

+ Read more +

+
+ + Kellen Xavier + + \ No newline at end of file diff --git a/readme.md b/readme.md index 2fe537bd..136004f0 100644 --- a/readme.md +++ b/readme.md @@ -1,82 +1,37 @@ -# Notion Blog +# Meu Notion Blog -This is an example Next.js project that shows Next.js' upcoming SSG (static-site generation) support using Notion's **private** API for a backend. +## Sobre esse template -**Note**: This example uses the experimental SSG hooks only available in the Next.js canary branch! The APIs used within this example will change over time. Since it is using a private API and experimental features, use at your own risk as these things could change at any moment. +Esse template foi feito um fork a partir deste aqui [template original](https://github.com/ijjk/notion-blog). +Estou realizando os ajustes, e como tenho alguns textos e documentações, algumas estão no Notion +então esse template é perfeito! -**Live Example hosted on Vercel**: https://notion-blog.vercel.app/ +> Este é um projeto de exemplo em Next.js que demonstra o suporte à geração de site estático (SSG - static-site generation) usando a API privada do Notion como backend. ## Getting Started -To view the steps to setup Notion to work with this example view the post at https://notion-blog.vercel.app/blog/my-first-post or follow the steps below. +| Comandos para executar - desenvolvimento local -## Deploy Your Own +´´´ +export NODE_OPTIONS=--openssl-legacy-provider -Deploy your own Notion blog with Vercel. +NODE_OPTIONS=--openssl-legacy-provider yarn dev -[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/ijjk/notion-blog/tree/main&project-name=notion-blog&repository-name=notion-blog) +yarn build && yarn start -or +´´´ -1. Clone this repo `git clone https://github.com/ijjk/notion-blog.git` -2. Configure project with [`vc`](https://vercel.com/download) -3. Add your `NOTION_TOKEN` and `BLOG_INDEX_ID` as environment variables in [your project](https://vercel.com/docs/integrations?query=envir#project-level-apis/project-based-environment-variables). See [here](#getting-blog-index-and-token) for how to find these values -4. Do final deployment with `vc` - -Note: if redeploying with `vc` locally and you haven't made any changes to the application's source and only edited in Notion you will need use `vc -f` to bypass build de-duping - -## Creating Your Pages Table - -**Note**: this is auto run if a table isn't detected the first time visiting `/blog` - -### Using the Pre-Configured Script - -1. Create a blank page in Notion -2. Clone this repo `git clone https://github.com/ijjk/notion-blog.git` -3. Install dependencies `cd notion-blog && yarn` -4. Run script to create table `NOTION_TOKEN='token' BLOG_INDEX_ID='new-page-id' node scripts/create-table.js` See [here](#getting-blog-index-and-token) for finding the id for the new page - -### Manually Creating the Table - -1. Create a blank page in Notion -2. Create a **inline** table on that page, don't use a full page table as it requires querying differently -3. Add the below fields to the table - -The table should have the following properties: +## Deploy -- `Page`: this the blog post's page -- `Slug`: this is the blog post's slug relative to `/blog`, it should be a text property -- `Published`: this filters blog posts in **production**, it should be a checkbox property -- `Date`: this is when the blog post appears as posted, it should be a date property -- `Authors`: this is a list of Notion users that wrote the post, it should be a person property +Deploy esta configurado na Vercel. -![Example Blog Posts Table](./assets/table-view.png) +[Link do deploy](https://notion-blog-lake-two.vercel.app/) -## Getting Blog Index and Token - -To get your blog index value, open Notion and Navigate to the Notion page with the table you created above. While on this page you should be able to get the page id from either: - -- the URL, if the URL of your page is https://www.notion.so/Blog-S5qv1QbUzM1wxm3H3SZRQkupi7XjXTul then your `BLOG_INDEX_ID` is `S5qv1QbU-zM1w-xm3H-3SZR-Qkupi7XjXTul` -- the `loadPageChunk` request, if you open your developer console and go to the network tab then reload the page you should see a request for `loadPageChunk` and in the request payload you should see a `pageId` and that is your `BLOG_INDEX_ID` - -To get your Notion token, open Notion and look for the `token_v2` cookie. - -## Creating Blog Posts - -1. In Notion click new on the table to add a new row -2. Fill in the Page name, slug, Date, and Authors -3. At the top of the content area add the content you want to show as a preview (keep this under 2 paragraphs) -4. Add a divider block under your preview content -5. Add the rest of your content under the divider block - -## Running Locally - -To run the project locally you need to follow steps 1 and 2 of [deploying](#deploy-your-own) and then follow the below steps +1. Clone this repo `git clone https://github.com/ijjk/notion-blog.git` +2. Configure project with [`vc`](https://vercel.com/download) +3. Add your `NOTION_TOKEN` and `BLOG_INDEX_ID` as environment variables in [your project](https://vercel.com/docs/integrations?query=envir#project-level-apis/project-based-environment-variables). See [here](#getting-blog-index-and-token) for how to find these values -1. Install dependencies `yarn` -2. Expose `NOTION_TOKEN` and `BLOG_INDEX_ID` in your environment `export NOTION_TOKEN=''`and `export BLOG_INDEX_ID=''` or `set NOTION_TOKEN="" && set BLOG_INDEX_ID=""` for Windows -3. Run next in development mode `yarn dev` -4. Build and run in production mode `yarn build && yarn start` +4. Do final deployment with `vc` ## Credits diff --git a/src/components/ext-link.tsx b/src/components/ext-link.tsx index 745956a0..7e5ae179 100644 --- a/src/components/ext-link.tsx +++ b/src/components/ext-link.tsx @@ -1,4 +1,6 @@ const ExtLink = (props) => ( - + + {props.children} + ) export default ExtLink diff --git a/src/components/features.tsx b/src/components/features.tsx index 2f3957cb..abfc0017 100644 --- a/src/components/features.tsx +++ b/src/components/features.tsx @@ -1,45 +1,7 @@ -import Lightning from './svgs/lightning' -import Jamstack from './svgs/jamstack' -import Wifi from './svgs/wifi' -import Lighthouse from './svgs/lighthouse' -import Plus from './svgs/plus' -import Notion from './svgs/notion' -import Edit from './svgs/edit' -import Scroll from './svgs/scroll' - const features = [ - { - text: 'Blazing fast', - icon: Lightning, - }, - { - text: 'JAMstack based', - icon: Jamstack, - }, - { - text: 'Always available', - icon: Wifi, - }, - { - text: 'Customizable', - icon: Edit, - }, - { - text: 'Incremental SSG', - icon: Plus, - }, - { - text: 'MIT Licensed', - icon: Scroll, - }, - { - text: 'Edit via Notion', - icon: Notion, - }, - { - text: 'Great scores', - icon: Lighthouse, - }, + // Add your features here + { text: 'Feature 1', icon: null }, + { text: 'Feature 2', icon: null }, ] const Features = () => ( diff --git a/src/components/footer.tsx b/src/components/footer.tsx index 54a3f5d6..752ced55 100644 --- a/src/components/footer.tsx +++ b/src/components/footer.tsx @@ -2,24 +2,14 @@ import ExtLink from './ext-link' export default function Footer() { return ( - <> -
- Deploy your own! - - deploy to Vercel button +
+ Kellen Xavier + + {' '} + + | Esse template encontra-se no GitHub - - or{' '} - - view source - - -
- + +
) } diff --git a/src/components/header.tsx b/src/components/header.tsx index 122d87b3..a5a5ff84 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -7,7 +7,7 @@ import styles from '../styles/header.module.css' const navItems: { label: string; page?: string; link?: string }[] = [ { label: 'Home', page: '/' }, { label: 'Blog', page: '/blog' }, - { label: 'Contact', page: '/contact' }, + { label: 'Contato', page: '/contact' }, { label: 'Source Code', link: 'https://github.com/ijjk/notion-blog' }, ] @@ -35,7 +35,10 @@ const Header = ({ titlePre = '' }) => {
  • {page ? ( - + {label} diff --git a/src/components/heading.tsx b/src/components/heading.tsx index 674a5383..135e5f3c 100644 --- a/src/components/heading.tsx +++ b/src/components/heading.tsx @@ -1,8 +1,8 @@ const collectText = (el, acc = []) => { if (el) { if (typeof el === 'string') acc.push(el) - if (Array.isArray(el)) el.map((item) => collectText(item, acc)) - if (typeof el === 'object') collectText(el.props && el.props.children, acc) + if (Array.isArray(el)) el.forEach((item) => collectText(item, acc)) + if (typeof el === 'object') collectText(el.props?.children, acc) } return acc.join('').trim() } @@ -11,12 +11,10 @@ const Heading = ({ children: component, id }: { children: any; id?: any }) => { const children = component.props.children || '' let text = children - if (null == id) { - id = collectText(text) - .toLowerCase() - .replace(/\s/g, '-') - .replace(/[?!:]/g, '') - } + id ??= collectText(text) + .toLowerCase() + .replace(/\s/g, '-') + .replace(/[?!:]/g, '') return ( diff --git a/src/components/spotifyPlayer.tsx b/src/components/spotifyPlayer.tsx new file mode 100644 index 00000000..ebc6369e --- /dev/null +++ b/src/components/spotifyPlayer.tsx @@ -0,0 +1,20 @@ +// components/SpotifyPlayer.tsx +const SpotifyPlayer = () => { + return ( +
    + +
    + ) +} + +export default SpotifyPlayer diff --git a/src/lib/notion/getBlogIndex.ts b/src/lib/notion/getBlogIndex.ts index 2c02622a..4e52563c 100644 --- a/src/lib/notion/getBlogIndex.ts +++ b/src/lib/notion/getBlogIndex.ts @@ -13,8 +13,11 @@ export default async function getBlogIndex(previews = true) { if (useCache) { try { postsTable = JSON.parse(await readFile(cacheFile, 'utf8')) - } catch (_) { - /* not fatal */ + } catch (err) { + console.warn( + 'Failed to load blog index cache, will generate new one:', + err + ) } } @@ -22,7 +25,7 @@ export default async function getBlogIndex(previews = true) { try { const data = await rpc('loadPageChunk', { pageId: BLOG_INDEX_ID, - limit: 100, // TODO: figure out Notion's way of handling pagination + limit: 100, cursor: { stack: [] }, chunkNumber: 0, verticalColumns: false, @@ -36,9 +39,10 @@ export default async function getBlogIndex(previews = true) { postsTable = await getTableData(tableBlock, true) } catch (err) { console.warn( - `Failed to load Notion posts, have you run the create-table script?` + `Failed to load Notion posts, have you run the create-table script?`, + err ) - return {} + throw new Error('Failed to load Notion posts: ' + (err as Error).message) } // only get 10 most recent post's previews @@ -49,7 +53,7 @@ export default async function getBlogIndex(previews = true) { if (previews) { await Promise.all( postsKeys - .sort((a, b) => { + .toSorted((a, b) => { const postA = postsTable[a] const postB = postsTable[b] const timeA = postA.Date diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index e27ab7f9..4c80453d 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,11 +1,13 @@ import '../styles/global.css' import 'katex/dist/katex.css' import Footer from '../components/footer' +import Features from '../components/spotifyPlayer' export default function MyApp({ Component, pageProps }) { return ( <> +