DEV Community

Marcelle Vargas
Marcelle Vargas

Posted on • Originally published at marcellecode.Medium on

Criando meu primeiro Widget para o Notion


Photo by Sigmund on Unsplash

Notion é uma ferramenta que faz parte do meu dia a dia, toda a minha vida é organizada nele. E algo que sempre me chamou a atenção foram os widgets que podemos adicionar nele. E recentemente eu descobri uma forma de criar os meus e é isso que nós vamos fazer nesse artigo.

Pré-requisitos

  • Ter o node.js instalado
  • Ter uma conta no github

Setup do projeto

Criar um projeto react

npx create-react-app notion-clock-widget
Enter fullscreen mode Exit fullscreen mode

Instalar a bibioteca react-gh-pages (ela irá agilizar o processo de deploy no Github pages)

npm install gh-pages --save-dev
Enter fullscreen mode Exit fullscreen mode

Criando o componente de relógio

Vamos começar criando a estrutura básica de um function component

//relogio.js

import React from 'react';
function Relogio() 
  return (
    <div>
      <h2>relogio</h2>
    </div>
  );
}

export default Relogio;
Enter fullscreen mode Exit fullscreen mode

E como estamos criando um relógio eu preciso que ele sempre me mostre o horário atualizado. Para isso vamos utilizar dois hooks do react o useState (para armazenar a hora) e o useEffect (para manter a atualização do estado mesmo depois da página ser renderizada).

import React, { useState, useEffect } from 'react';

function Relogio() {
  const [horarioAtual, setHorarioAtual] = useState(new Date());

  useEffect(() => {
    const timerID = setInterval(() => updateTime(), 1000);

    return function cleanup() {
      clearInterval(timerID);   
    };
  }, []);

  function updateTime() {
    setHorarioAtual(new Date());
  }

  return (
    <div className='clock-container'>
      <h2>{horarioAtual.toLocaleTimeString()}</h2>
    </div>
  );
}

export default Relogio;
Enter fullscreen mode Exit fullscreen mode

Como um relógio tem atualizações a cada 1s nós usamos a função setInterval para chamar a função que irá realizar a atualização do estado do relógio.

Fazendo o deploy no Github Pages

Com o código criado vamos fazer a configuração para o deploy. No arquivo package.json logo abaixo de version adicione o nome “homepage” e na URL substitua pelo seu nome de usuário e o nome do repositório criado.

  "name": "my-app",
  "version": "0.1.0",
+ "homepage": "https://{SEU NOME DE USUARIO}.github.io/{NOME DO REPOSITÓRIO}",
  "private": true,
Enter fullscreen mode Exit fullscreen mode

Depois adicione os comandos de deploy e predeploy em “scripts”

"scripts": {
   "predeploy": "npm run build",
   "deploy": "gh-pages -d build",
Enter fullscreen mode Exit fullscreen mode

Quando finalizar faça o commit dessas alterações e o push para o repositório remoto.

Configurando o Github pages

No Github abra o seu repositório e vá em settings e depois em pages e em “Build and deployment” altere a branch para “gh-pages” e a pasta para “/root”.


Tela do github para configuração do Github Pages

Importando o widget no Notion

Com a url que foi gerada para o seu site, abra o notion e adicione o bloco “integrar”


tela do notion

E cole o link que foi utilizado na “homepage” do seu package.json, se tudo funcionar você vai ter um relógio parecido com esse


Captura da tela do Notion com o widget

Se você gostou desse artigo e quer utilizar esse widget, você encontra o link para ele e outras coisas mais na minha página

Marcelle Vargas

Fonte

Biblioteca React Gh Pages

GitHub - gitname/react-gh-pages: Deploying a React App (created using create-react-app) to GitHub Pages

Imagem do Bulbasauro, por Dhiogo Luis (https://pin.it/2FJguai)

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)