startertab

Onglet STARTER

VideoPreview.mp4

J'en avais marre de la même vieille page d'onglet. Je voulais avoir un tableau de bord pour tout ce que j'atteins dans ma journée de travail typique, alors je l'ai construit.

Startertab est là pour révolutionner la façon dont vous commencez votre journée sur Internet. Avec un WebApp entièrement personnalisable pour remplacer votre nouvelle page d'accueil d'onglet, vous pouvez personnaliser votre expérience en ligne comme jamais auparavant.

Vous pouvez installer l'extension Chrome ici, ou l'extension Firefox ici et faire de StarterTab le site qui s'ouvre sur chacun de vos nouveaux onglets.

Technologie

Le stockage local est utilisé pour stocker toutes vos personnalisations, ce qui signifie que vous possédez vos données! Tous les paramètres, jetons et thèmes sont assis sur votre propre navigateur. Certains peuvent appeler la paresse que je ne veux pas maintenir une base de données, vous pouvez également le voir comme moi aidant à empêcher vos données de faire un autre service cloud.

Écrit dans NextJS avec Charkaui. Le frontend et les fonctions sont hébergés sur Vercel, la base de données sur le néon.

Intégrations API actuelles

• API Strava pour mes nages / courses pour la semaine
• API Spotify pour les contrôles Spotify et vos artistes préférés
• API météo pour les données météorologiques pour ma ville
• Hacker News for the Top Demandez les messages pour la journée
• API Stocks pour les informations de ticker de bâton
• API Twitter pour votre flux
• API du calendrier Google pour votre calendrier Google
• API du calendrier Microsoft Outlook pour votre calendrier Outlook

Idées de futures idées d'intégrations API

• Fournisseur de transports publics

Commencer

1. Clone le référentiel et les dépendances d'installation

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

2. Configurez votre environnement local

Copiez le fichier .env.local.example dans ce répertoire à .env.local (qui sera ignoré par Git):

 cp .env.local.example .env.local

Ajoutez des détails pour tous les fournisseurs que vous souhaitez utiliser:

 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. Démarrez l'application

Pour exécuter votre startertab localement, utilisez:

 yarn dev

Pour l'exécuter en mode de production, utilisez:

 yarn build && yarn start

Créer une nouvelle tuile

1. Créez votre nouveau composant de carreaux dans le dossier src/components/tiles . Assurez-vous d'accepter un accessoire «tileid», cela vous permet de modifier la couleur du texte en fonction des paramètres modifiés dans la barre latérale.

 type PageProps = {
  tileId : number ;
} ;

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

  return ( ) ;
}

2. Ajoutez votre type de carreau à la tileType dans src/types/settings.ts .
3. Ajoutez votre nouvelle tuile dans les tailles correspondantes que vous souhaitez disponibles pour votre carreau dans l'instruction Switch pour tileSize en src/components/sidebar/OptionsForTileTypeSelect.tsx
4. Ajoutez votre type de carreau à l'instruction Switch pour le tileType dans src/components/TileContainer.tsx

Si vous avez besoin d'un stockage persistant

1. Ajoutez votre nouvelle valeur dans le type TileSettings dans src/types/settings.ts
2. Créez un nouveau sélecteur dans Recul pour votre nouvelle valeur de réglage dans src/recoil/UserSettingsSelectors.tsx
3. Utilisez ce sélecteur dans votre tuile

Exemple de sélecteur:

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

Utilisation de ce sélecteur dans une tuile:

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

Création d'un élément de menu de barre latérale pour les options

1. Ajoutez votre nouvelle option à l' OptionType dans src/types/settings.ts
2. Ajoutez votre option dans les tailles qui lui concernent dans src/helpers/sideBarOptions.ts
3. Modifiez le src/components/sidebar/SettingOptionContainer.tsx pour inclure le nouveau type d'option