startertab

Guia de partida

Videopreview.mp4

Eu estava ficando cansado da mesma nova página de guia nova. Eu queria ter um painel para tudo o que pego no meu dia de trabalho típico, então eu o construí.

O startertab está aqui para revolucionar a maneira como você começa o dia na internet. Com um WebApp completamente personalizável para substituir sua nova página inicial da guia, você pode personalizar sua experiência on -line como nunca antes.

Você pode instalar a extensão do Chrome aqui, ou a extensão do Firefox aqui e tornar o startertab o site que se abre em todas as suas novas guias.

Tecnologia

O armazenamento local está sendo usado para armazenar todas as suas personalizações, o que significa que você possui seus dados! Todas as configurações, fichas e temas ficam no seu próprio navegador. Alguns podem chamar de preguiça de que eu não quero manter um banco de dados, você também pode vê -lo como eu ajudando a impedir que seus dados estivessem em outro serviço em nuvem.

Escrito em NextJs com Charkaui. O front -end e as funções estão hospedados no Vercel, o banco de dados no neon.

Integrações atuais da API

• API Strava para meus banhos/corridas para a semana
• Spotify API para controles do Spotify e seus artistas favoritos
• API meteorológica para os dados meteorológicos para minha cidade
• Notícias de hacker para as postagens principais do dia
• API de ações para o stick Ticker Info
• API do Twitter para o seu feed
• API do Google Calendar para o seu calendário do Google
• API do calendário do Microsoft Outlook para o seu calendário do Outlook

Idéias futuras de integrações da API

• Provedor de transporte público

Começando

1. Clone o repositório e instale dependências

 git clone https://github.com/allister-grange/startertab.git
cd startertab
yarn install

2. Configure seu ambiente local

Copie o arquivo .env.local.example neste diretório para .env.local (que será ignorado pelo git):

 cp .env.local.example .env.local

Adicione detalhes para todos os provedores que você deseja usar:

 STRAVA_CLIENT_ID=<YOUR_SECRET_HERE>
STRAVA_SECRET=<YOUR_SECRET_HERE>
WEATHERAPI_TOKEN=<YOUR_SECRET_HERE>
SPOTIFY_CLIENT_ID=<YOUR_SECRET_HERE>
SPOTIFY_CLIENT_SECRET=<YOUR_SECRET_HERE>
FINNHUB_SECRET=<YOUR_SECRET_HERE>
TWITTER_CLIENT_ID=<YOUR_SECRET_HERE>
TWITTER_CLIENT_SECRET=<YOUR_SECRET_HERE>
TWITTER_CODE_CHALLENGE_KEY=<YOUR_SECRET_HERE>
TOKEN_ENCRYPT_KEY=<YOUR_SECRET_HERE>
OUTLOOK_CLIENT_ID=<YOUR_SECRET_HERE>
OUTLOOK_CLIENT_SECRET=<YOUR_SECRET_HERE>
GOOGLE_CLIENT_ID=<YOUR_SECRET_HERE>
GOOGLE_CLIENT_SECRET=<YOUR_SECRET_HERE>
DATABASE_URL=<YOUR_SECRET_HERE>
DATABASE_URL_UNPOOLED=<YOUR_SECRET_HERE>
ANALYTICS_ENABLED=<true or false>

3. Inicie o aplicativo

Para executar seu startertab localmente, use:

 yarn dev

Para executá -lo no modo de produção, use:

 yarn build && yarn start

Criando um novo ladrilho

1. Crie seu novo componente de ladrilhos na pasta src/components/tiles . Certifique -se de aceitar um suporte 'tileid', isso permite alterar a cor do texto com base nas configurações alteradas na barra lateral.

 type PageProps = {
  tileId : number ;
} ;

export const YourNewTile : React . FC < PageProps > = ( { tileId } ) => {
    const color = `var(--text-color- ${ tileId } )` ;

  return ( ) ;
}

2. Adicione seu tipo de ladrilho ao tileType no src/types/settings.ts .
3. Adicione seu novo ladrilho nos tamanhos correspondentes que você deseja disponível para o seu azulejo na instrução SWITCH para tileSize em src/components/sidebar/OptionsForTileTypeSelect.tsx
4. Adicione seu tipo de ladrilho à instrução Switch para o tileType em src/components/TileContainer.tsx

Se você precisa de armazenamento persistente

1. Adicione seu novo valor ao tipo TileSettings no src/types/settings.ts
2. Crie um novo seletor em recuo para o seu novo valor de configuração em src/recoil/UserSettingsSelectors.tsx
3. Use esse seletor em seu ladrilho

Exemplo de seletor:

 export const imageFilePathSelector = createTilePropertySelector < string > (
  "imageFilePath" ,
  ( theme , newValue ) => {
    theme . imageFilePath = newValue ;
  }
) ;

Usando esse seletor em um ladrilho:

  const [ fileValue , setFileValue ] = useRecoilState (
    imageFilePathSelector ( tileId )
  ) as [ string | undefined , SetterOrUpdater < string | undefined > ] ;

Criando um item de menu da barra lateral para opções

1. Adicione sua nova opção ao OptionType em src/types/settings.ts
2. Adicione sua opção aos tamanhos que o pertencem a src/helpers/sideBarOptions.ts
3. Edite o src/components/sidebar/SettingOptionContainer.tsx para incluir o novo tipo de opção