startertabダウンロードstartertabソースコードのダウンロード

startertab

AI ソースコード

1.0.0

ダウンロード

スタータータブ

videopreview.mp4

私は同じ古い新しいタブページにうんざりしていました。典型的な勤務日に手を伸ばすすべてのダッシュボードが欲しいので、それを作りました。

Startertabは、インターネットで一日を始める方法に革命をもたらすためにここにいます。完全にカスタマイズ可能なWebAppを使用して、新しいタブホームページを置き換えると、これまでにないようにオンラインエクスペリエンスをパーソナライズできます。

ここにChrome拡張機能をインストールするか、ここからFirefox拡張機能をインストールして、StarterTabを新しいタブのすべてに開くサイトにすることができます。

技術

ローカルストレージは、すべてのカスタマイズを保存するために使用されています。つまり、データを所有しています。すべての設定、トークン、テーマはあなた自身のブラウザにあります。データベースを維持したくないという怠inessと呼ぶ人もいるかもしれません。また、あなたのデータがさらに別のクラウドサービスに入るのを防ぐのに役立つと思うこともあります。

CharkauiでNextjsで書かれています。フロントエンドと機能は、NeonのデータベースであるVercelでホストされています。

現在のAPI統合

私の水泳/走りのためのStrava API
Spotifyコントロールとお気に入りのアーティストのSpotify API
私の街の天気データの天気API
その日のトップに質問するハッカーニュース
スティックティッカー情報のAPIをストックします
フィード用のTwitter API
GoogleカレンダーのGoogleカレンダーAPI
OutlookカレンダーのMicrosoft OutlookカレンダーAPI

将来のAPI統合のアイデア

公共交通機関プロバイダー

はじめる

1.リポジトリをクローンし、依存関係をインストールします

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

2。ローカル環境を構成します

このディレクトリの.env.local.exampleファイルを.env.localにコピーします（gitで無視されます）：

 cp .env.local.example .env.local

使用するすべてのプロバイダーに詳細を追加します。

 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。アプリケーションを開始します

StarterTabをローカルに実行するには、次を使用します。

 yarn dev

生産モードで実行するには、使用してください。

 yarn build && yarn start

新しいタイルを作成します

src/components/tilesフォルダーに新しいタイルコンポーネントを作成します。「Tileid」プロップを受け入れるようにしてください。これにより、サイドバーで変更された設定に基づいてテキストの色を変更できます。

 type PageProps = {
  tileId : number ;
} ;

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

  return ( ) ;
}

src/types/settings.tsのtiletypeにタイルタイプを追加します。
src/components/sidebar/OptionsForTileTypeSelect.tsxのtileSizeのスイッチステートメントでタイルで利用できる対応するサイズに新しいタイルを追加する
src/components/TileContainer.tsxのtileTypeのスイッチステートメントにタイルタイプを追加する

永続的なストレージが必要な場合

src/types/settings.ts内のTileSettingsタイプに新しい値を追加する
src/recoil/UserSettingsSelectors.tsxで新しい設定値のために反動で新しいセレクターを作成する
タイル内のそのセレクターを使用します

セレクターの例：

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

タイルでそのセレクターを使用してください：

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