startertab下載startertab源代碼下載

startertab

Ai源碼

1.0.0

下載

入門標籤

VIDEOPREVIEW.MP4

我厭倦了同一個舊的新標籤頁面。我想為我在典型的工作日所涉及的所有儀表板提供一個儀表板，所以我建造了它。

首發塔布（Startertab）在這裡徹底改變了您在互聯網上開始一天的方式。通過完全可自定義的WebApp來替換您的新標籤主頁，您可以像以前一樣個性化在線體驗。

您可以在此處安裝Chrome Extension，也可以在此處安裝Firefox擴展名，並將StarterTab成為在每個新標籤上打開的站點。

技術

本地存儲用於存儲所有自定義，這意味著您擁有數據！所有設置，令牌和主題都位於您自己的瀏覽器上。有些人可能稱我不想維護數據庫的懶惰，您也可以將其視為幫助您防止您的數據進入另一個雲服務。

用Charkaui寫作。前端和函數託管在霓虹燈上的數據庫Vercel上。

當前的API集成

我的游泳/跑步的Strava API
Spotify API用於Spotify控件和您最喜歡的藝術家
天氣API用於我城市的天氣數據
黑客新聞當天的頂級詢問帖子
庫存API用於Stick Ticker信息
提要的Twitter API
Google日曆API用於您的Google日曆
Microsoft Outlook Calendar API用於您的Outlook日曆

未來的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。啟動應用程序

要在本地運行啟動圖，請使用：

 yarn dev

要在生產模式下運行它，請使用：

 yarn build && yarn start

創建一個新瓷磚

在src/components/tiles文件夾中創建您的新圖塊組件。確保接受“瓷磚”道具，這使您能夠根據側邊欄上更改的設置更改文本的顏色。

 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 > ] ;