startertab

Starter Tab

Videopreview.mp4

Ich hatte die gleiche alte neue Registerkartenseite satt. Ich wollte ein Dashboard für alles haben, was ich in meinem typischen Arbeitstag greife, also habe ich es gebaut.

StarterTab ist hier, um die Art und Weise zu revolutionieren, wie Sie Ihren Tag im Internet beginnen. Mit einem vollständig anpassbaren WebApp, um Ihre neue Registerkarten -Homepage zu ersetzen, können Sie Ihre Online -Erfahrung wie nie zuvor personalisieren.

Sie können die Chrome -Erweiterung hier oder die Firefox -Erweiterung hier installieren und Startertab auf der Website erstellen, die sich auf jedem Ihrer neuen Registerkarten öffnet.

Technik

Lokaler Speicher wird zum Speichern aller Anpassungen verwendet, sodass Sie Ihre Daten besitzen! Alle Einstellungen, Token und Themen sitzen auf Ihrem eigenen Browser. Einige nennen es vielleicht Faulheit, dass ich keine Datenbank pflegen möchte. Sie können es auch als ich sehen, dass ich dazu beiträgt, dass Ihre Daten in einem weiteren Cloud -Dienst sind.

Geschrieben in NextJs mit charkaui. Das Frontend und die Funktionen werden auf Vercel, der Datenbank zu Neon, gehostet.

Aktuelle API -Integrationen

• Strava -API für meine Schwimmen/Läufe für die Woche
• Spotify -API für Spotify -Steuerelemente und Ihre Lieblingskünstler
• Wetterapi für die Wetterdaten für meine Stadt
• Hacker News für die Top -Fragen für den Tag
• Aktien -API für die Stick -Ticker -Info
• Twitter -API für Ihren Feed
• Google -Kalender -API für Ihren Google -Kalender
• Microsoft Outlook -Kalender -API für Ihren Outlook -Kalender

Zukünftige API -Integrationen Ideen

• Öffentlicher Verkehrsanbieter

Erste Schritte

1. Klonen Sie das Repository und installieren Sie Abhängigkeiten

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

2. Konfigurieren Sie Ihre lokale Umgebung

Kopieren Sie die Datei .env.local.example in diesem Verzeichnis in .env.local (das von Git ignoriert wird):

 cp .env.local.example .env.local

Fügen Sie Details für alle Anbieter hinzu, die Sie verwenden möchten:

 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. Starten Sie die Anwendung

Verwenden Sie: Um Ihren StarterTab lokal zu betreiben, verwenden Sie:

 yarn dev

Um es im Produktionsmodus auszuführen, verwenden Sie:

 yarn build && yarn start

Erstellen einer neuen Fliese

1. Erstellen Sie Ihre neue Fliesenkomponente im Ordner src/components/tiles . Stellen Sie sicher, dass Sie eine TileId -Requisite akzeptieren. Dadurch können Sie die Farbe des Textes basierend auf den in der Seitenleiste geänderten Einstellungen ändern.

 type PageProps = {
  tileId : number ;
} ;

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

  return ( ) ;
}

2. Fügen Sie Ihren Fliesentyp zum Tiletyp in src/types/settings.ts hinzu.
3. Fügen Sie Ihre neue Kachel in die entsprechenden Größen hinzu, die Sie für Ihre Fliese in der Switch -Anweisung für tileSize in src/components/sidebar/OptionsForTileTypeSelect.tsx zur Verfügung stellen möchten.
4. Fügen Sie Ihren Fliesentyp zur Switch -Anweisung für den tileType in src/components/TileContainer.tsx hinzu

Wenn Sie einen anhaltenden Speicher benötigen

1. Fügen Sie Ihren neuen Wert in den TileSettings -Typ in src/types/settings.ts hinzu
2. Erstellen Sie einen neuen Selektor in Rückstoß für Ihren neuen Einstellungswert in src/recoil/UserSettingsSelectors.tsx
3. Verwenden Sie diesen Selektor in Ihrer Fliese

Auswahlbeispiel:

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

Verwenden Sie diesen Selektor in einer Fliese:

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

Erstellen eines Sidebar -Menüelements für Optionen

1. Fügen Sie Ihre neue Option dem OptionType in src/types/settings.ts hinzu
2. Fügen Sie Ihre Option in die src/helpers/sideBarOptions.ts hinzu
3. Bearbeiten Sie die src/components/sidebar/SettingOptionContainer.tsx um den neuen Optionsartyp einzuschließen