What is added:
- bun.sh support (builds under a minute on an base m1 running a docker vm)
- docker support (around ~260 mb images) Note that caching isn't implemented as the build sizes balloon (~1 gb) and it builds fast anyways : P
- removed analytics
what does not work:
- public themes (could be fixed if allister sets cors to public on the api / if you setup your own db).
- maybe some stuff I dont use (open an issue !) remember to set the enviorment variables in .env.local first.
The orginal readme follows:
VideoPreview.mp4
I was getting sick of the same old new tab page. I wanted to have a dashboard for everything I reach for in my typical workday, so I built it.
StarterTab is here to revolutionize the way you start your day on the internet. With a completely customizable webapp to replace your new tab homepage, you can personalize your online experience like never before.
You can install the chrome extension here, or the firefox extension here and make StarterTab the site that opens up on every one of your new tabs.
Local storage is being used for storing all of your customizations, meaning you own your data! All of the settings, tokens and themes sit on your own browser. Some may call it laziness that I don't want to maintain a database, you could also see it as me helping prevent your data being in yet another cloud service.
Written in NextJS with CharkaUI. The frontend and functions are hosted on Vercel, the database on Neon.
- Strava API for my swims/runs for the week
- Spotify API for Spotify controls and your favorite artists
- Weather API for the weather data for my city
- Hacker News for the top ask posts for the day
- Stocks API for the stick ticker info
- Twitter API for your feed
- Google Calendar API for your Google Calendar
- Microsoft Outlook Calendar API for your Outlook calendar
- Public transport provider
git clone https://github.com/allister-grange/startertab.git
cd startertab
yarn install
Copy the .env.local.example
file in this directory to .env.local
(which will be ignored by Git):
cp .env.local.example .env.local
Add details for all providers you want to use:
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>
ANALYTICS_ENABLED=<true or false>
To run your startertab locally, use:
yarn dev
To run it in production mode, use:
yarn build && yarn start
- Create your new Tile component in the
src/components/tiles
folder. Make sure to accept a 'tileId' prop, this enables you to change the color of the text based off the settings changed in the sidebar.
type PageProps = {
tileId: number;
};
export const YourNewTile: React.FC<PageProps> = ({ tileId }) => {
const color = `var(--text-color-${tileId})`;
return ();
}
- Add your tile type to the TileType in
src/types/settings.ts
. - Add your new tile into the corresponding sizes you want available for your tile in the switch statement for
tileSize
insrc/components/sidebar/OptionsForTileTypeSelect.tsx
- Add your tile type to the switch statement for the
tileType
insrc/components/TileContainer.tsx
if you need persistent storage
- Add your new value into the
TileSettings
type withinsrc/types/settings.ts
- Create a new selector in recoil for your new setting value in
src/recoil/UserSettingsSelectors.tsx
- Use that selector within your tile
selector example:
export const imageFilePathSelector = createTilePropertySelector<string>(
"imageFilePath",
(theme, newValue) => {
theme.imageFilePath = newValue;
}
);
using that selector in a tile:
const [fileValue, setFileValue] = useRecoilState(
imageFilePathSelector (tileId)
) as [string | undefined, SetterOrUpdater<string | undefined>];