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