Skip to content

Fix/arquivos de configuracoes #114

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .env
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
BLOG_INDEX_ID=
NOTION_TOKEN=
BLOG_INDEX_ID='200db82dcf57803e9070f02f6f083452'
NOTION_TOKEN='v03%3AeyJhbGciOiJkaXIiLCJraWQiOiJwcm9kdWN0aW9uOnRva2VuLXYzOjIwMjQtMTEtMDciLCJlbmMiOiJBMjU2Q0JDLUhTNTEyIn0..W_5-HH8B5ts3X2NFB7CcPg.Z-SO64g0qT5UmTZ0xEgyOCRGov6eYrx_gZemw3E1pgPQua7Jm4WGXivH1u6sQOIoE8_s7lwEY4PMWvDB38o0ih83FXw09WriXix2pRhsJRqAEDw7Rhsi9LgT8jlKJ1dfEbHXjy4AxBAynw2UVTNtTVGxCASnI_SSYTz9hkWR1r9jsvDXTuFwn10FwLw9jLj4AhyIcc2Mbix_VDAi0LZpFwKNE643FPEUQuy9pDHaycUAgILozjX3Lz0YA8XjkMqVu3nhGVaAi_juBhSKSwD5buh9t-L-Ya6R-449hnLla4zjTcLLxwcQQS4LtSFshcNvba9un7r4Q_q1qzR3pf3WxXWrB86F0STsJxIyY3sKZFs.fm2uuw2PcIhsV5h-bRS6JBCWHOvxHS1l_fl9Sszt4n8'
6 changes: 5 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -27,5 +27,9 @@ yarn-error.log*
.blog_index_data
.blog_index_data_previews

# local env files
.now
.vercel
.vercel
.env
.idea
.vscode
8 changes: 5 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
"start": "next start",
"build": "next build && node .next/server/build-rss.js",
"format": "prettier --write \"**/*.{js,jsx,json,ts,tsx,md,mdx,css,html,yml,yaml,scss,sass}\" --ignore-path .gitignore",
"lint-staged": "lint-staged"
"lint-staged": "lint-staged",
"vercel-build": "ts-node src/lib/build-rss.ts && next build"
},
"pre-commit": "lint-staged",
"dependencies": {
Expand All @@ -22,11 +23,12 @@
},
"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"
"ts-node": "^10.9.2",
"typescript": "^5.8.3"
}
}
25 changes: 25 additions & 0 deletions public/atom
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>My Blog</title>
<subtitle>Blog</subtitle>
<link href="/atom" rel="self" type="application/rss+xml"/>
<link href="/" />
<updated>2025-05-30T03:16:49.770Z</updated>
<id>My Notion Blog</id>
<entry>
<id>/blog/meu-primeiro-post</id>
<title>Teste - Sempre um teste</title>
<link href="/blog/meu-primeiro-post"/>
<updated>2025-05-27T03:00:00.625Z</updated>
<content type="xhtml">
<div xmlns="http://www.w3.org/1999/xhtml">
<p>📝 Um parágrafo curto como introdução.</p><p>
📝 Segundo parágrafo como resumo.</p>
<p class="more">
<a href="/blog/meu-primeiro-post">Read more</a>
</p>
</div>
</content>
<author><name>Kellen Xavier</name></author>
</entry>
</feed>
94 changes: 31 additions & 63 deletions readme.md
Original file line number Diff line number Diff line change
@@ -1,85 +1,53 @@
# 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
## Rodar Localmente

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.
## Instale dependências

## Deploy Your Own
yarn install

Deploy your own Notion blog with Vercel.
## Compile e gere o RSS

[![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

or
## Inicie o servidor (porta 3000)

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`
yarn start

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
## 📦 Requisitos

## Creating Your Pages Table
- Node.js `>=18.x` (recomendado)
- Yarn `>=1.22`
- Conta no Notion com acesso à API
- Conta na Vercel (conectada ao GitHub)

**Note**: this is auto run if a table isn't detected the first time visiting `/blog`
## ⚙️ Variáveis de ambiente

### Using the Pre-Configured Script
Crie um arquivo `.env.local` com:

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
```env
NOTION_TOKEN=seu_token_do_notion
BLOG_INDEX_ID=id_da_tabela_do_blog

### 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
### Deploy esta configurado na Vercel

The table should have the following properties:
[Link do deploy](https://notion-blog-lake-two.vercel.app/)

- `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 automático (Vercel)

![Example Blog Posts Table](./assets/table-view.png)
´´´
yarn vercel-build

## 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. Install dependencies `yarn`
2. Expose `NOTION_TOKEN` and `BLOG_INDEX_ID` in your environment `export NOTION_TOKEN='<your-token>'`and `export BLOG_INDEX_ID='<your-blog-index-id>'` or `set NOTION_TOKEN="<your-token>" && set BLOG_INDEX_ID="<your-blog-index-id>"` for Windows
3. Run next in development mode `yarn dev`
4. Build and run in production mode `yarn build && yarn start`

## Credits

- Guillermo Rauch [@rauchg](https://twitter.com/rauchg) for the initial idea
- Shu Ding [@shuding\_](https://twitter.com/shuding_) for the design help
- Luis Alvarez [@luis_fades](https://twitter.com/luis_fades) for design help and bug catching
## Feito com 💻 por Kellen Xavier
4 changes: 3 additions & 1 deletion src/components/ext-link.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
const ExtLink = (props) => (
<a {...props} rel="noopener" target={props.target || '_blank'} />
<a {...props} rel="noopener" target={props.target || '_blank'}>
{props.children}
</a>
)
export default ExtLink
44 changes: 3 additions & 41 deletions src/components/features.tsx
Original file line number Diff line number Diff line change
@@ -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 = () => (
Expand Down
26 changes: 8 additions & 18 deletions src/components/footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,14 @@ import ExtLink from './ext-link'

export default function Footer() {
return (
<>
<footer>
<span>Deploy your own!</span>
<ExtLink href="https://vercel.com/new/git/external?repository-url=https://github.com/ijjk/notion-blog/tree/main&project-name=notion-blog&repository-name=notion-blog">
<img
src="https://vercel.com/button"
height={46}
width={132}
alt="deploy to Vercel button"
/>
<footer>
<span>Kellen Xavier</span>
<span>
{' '}
<ExtLink href="https://github.com/ijjk/notion-blog">
| Esse template encontra-se no GitHub
</ExtLink>
<span>
or{' '}
<ExtLink href="https://github.com/ijjk/notion-blog">
view source
</ExtLink>
</span>
</footer>
</>
</span>
</footer>
)
}
7 changes: 5 additions & 2 deletions src/components/header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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' },
]

Expand Down Expand Up @@ -35,7 +35,10 @@ const Header = ({ titlePre = '' }) => {
<li key={label}>
{page ? (
<Link href={page}>
<a className={pathname === page ? 'active' : undefined}>
<a
href={page}
className={pathname === page ? 'active' : undefined}
>
{label}
</a>
</Link>
Expand Down
14 changes: 6 additions & 8 deletions src/components/heading.tsx
Original file line number Diff line number Diff line change
@@ -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()
}
Expand All @@ -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 (
<a href={`#${id}`} id={id} style={{ color: 'inherit' }}>
Expand Down
20 changes: 20 additions & 0 deletions src/components/spotifyPlayer.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
// components/SpotifyPlayer.tsx
const SpotifyPlayer = () => {
return (
<div
style={{ marginTop: '2rem', display: 'flex', justifyContent: 'center' }}
>
<iframe
style={{ borderRadius: '12px' }}
src="https://open.spotify.com/embed/playlist/4FSHMpz18dKJuCIVJj3i06?utm_source=generator"
width="30%"
height="100"
allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
loading="lazy"
title="Spotify playlist player"
></iframe>
</div>
)
}

export default SpotifyPlayer
Loading