notion blog

Blog de noção

Este é um exemplo do próximo.js do projeto que mostra o suporte SSG (geração de sítio estático) do Next.JS usando a API privada da Noção para um back-end.

NOTA : Este exemplo usa os ganchos SSG experimentais disponíveis apenas no próximo.js Branch Canary! As APIs usadas neste exemplo mudarão com o tempo. Como está usando uma API privada e recursos experimentais, use por seu próprio risco, pois essas coisas podem mudar a qualquer momento.

Exemplo ao vivo hospedado no vercel : https://notion-blog.vercel.app/

Começando

Para visualizar as etapas para configurar a noção para funcionar com este exemplo, visualize a postagem em https://notion-blog.vercel.app/blog/my-first-post ou siga as etapas abaixo.

Implantar o seu próprio

Implante seu próprio blog de noção com o Vercel.

ou

1. Clone este repo git clone https://github.com/ijjk/notion-blog.git
2. Configure o projeto com vc
3. Adicione sua NOTION_TOKEN e BLOG_INDEX_ID como variáveis de ambiente em seu projeto. Veja aqui como encontrar esses valores
4. Faça a implantação final com vc

NOTA: Se a reimplantando com vc localmente e você não fez nenhuma alteração na fonte do aplicativo e apenas editada em noção, você precisará usar vc -f para ignorar a construção de construção

Criando sua tabela de páginas

Nota : Esta é a execução automática se uma tabela não for detectada na primeira vez em visita /blog

Usando o script pré-configurado

1. Crie uma página em branco em noção
2. Clone este repo git clone https://github.com/ijjk/notion-blog.git
3. Instale dependências cd notion-blog && yarn
4. Execute o script para criar tabela NOTION_TOKEN='token' BLOG_INDEX_ID='new-page-id' node scripts/create-table.js Veja aqui para encontrar o id para a nova página

Criando manualmente a tabela

1. Crie uma página em branco em noção
2. Crie uma tabela em linha nessa página, não use uma tabela de página inteira, pois requer consulta de maneira diferente
3. Adicione os campos abaixo à tabela

A tabela deve ter as seguintes propriedades:

• Page : esta é a página da postagem do blog
• Slug : Esta é a lesma da postagem do blog em relação a /blog , deve ser uma propriedade de texto
• Published : este filtros postagens no blog em produção , deve ser uma propriedade de caixa de seleção
• Date : É quando a postagem do blog aparece como publicado, deve ser uma propriedade de data
• Authors : Esta é uma lista de usuários de noção que escreveram a postagem, deve ser uma propriedade de pessoa

Obtendo Índice de Blog e Token

Para obter o valor do seu índice do blog, abra a noção e navegue até a página de noção com a tabela que você criou acima. Enquanto estiver nesta página, você poderá obter o ID da página de qualquer um deles:

• 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
• A solicitação loadPageChunk , se você abrir seu console de desenvolvedor e ir para a guia Rede e recarregar a página Você deverá ver uma solicitação de loadPageChunk e, na carga útil da solicitação, você deve ver um pageId e esse é o seu BLOG_INDEX_ID

Para obter seu token de noção, abra a noção e procure o biscoito token_v2 .

Criando postagens no blog

1. Na noção, clique em novo na tabela para adicionar uma nova linha
2. Preencha o nome da página, lesma, data e autores
3. Na parte superior da área de conteúdo, adicione o conteúdo que você deseja mostrar como uma prévia (mantenha isso com menos de 2 parágrafos)
4. Adicione um bloco de divisor sob o seu conteúdo de visualização
5. Adicione o restante do seu conteúdo sob o bloco de divisor

Executando localmente

Para executar o projeto localmente, você precisa seguir as etapas 1 e 2 da implantação e depois siga as etapas abaixo

1. Instale yarn de dependências
2. Exponha NOTION_TOKEN e BLOG_INDEX_ID em seu ambiente export NOTION_TOKEN='<your-token>' e export BLOG_INDEX_ID='<your-blog-index-id>' ou set NOTION_TOKEN="<your-token>" && set BLOG_INDEX_ID="<your-blog-index-id>" para Windows
3. Corra a seguir no modo de desenvolvimento yarn dev
4. Construa e execute no modo de produção yarn build && yarn start

Créditos

• Guillermo Rauch @rauchg para a ideia inicial
• Shu ding @shuding_ para a ajuda do design
• Luis Alvarez @luis_fades para ajuda de design e captura de bugs