startertab

Tab starter

Videopreview.mp4

Saya muak dengan halaman tab baru yang sama. Saya ingin memiliki dasbor untuk semua yang saya raih di hari kerja khas saya, jadi saya membangunnya.

Startertab ada di sini untuk merevolusi cara Anda memulai hari Anda di internet. Dengan Webapp yang sepenuhnya dapat disesuaikan untuk mengganti beranda tab baru Anda, Anda dapat mempersonalisasikan pengalaman online Anda tidak seperti sebelumnya.

Anda dapat menginstal ekstensi chrome di sini, atau ekstensi Firefox di sini dan menjadikan Startertab situs yang terbuka pada setiap tab baru Anda.

Tech

Penyimpanan lokal digunakan untuk menyimpan semua kustomisasi Anda, artinya Anda memiliki data Anda! Semua pengaturan, token dan tema duduk di browser Anda sendiri. Beberapa orang mungkin menyebutnya kemalasan bahwa saya tidak ingin mempertahankan database, Anda juga bisa melihatnya karena saya membantu mencegah data Anda berada di layanan cloud lain.

Ditulis di NextJs dengan Charkaui. Frontend dan fungsi di -host di Vercel, database di neon.

Integrasi API saat ini

• Strava API untuk renang/lari saya untuk minggu ini
• Spotify API untuk kontrol Spotify dan artis favorit Anda
• API cuaca untuk data cuaca untuk kota saya
• Berita peretas untuk post posting teratas untuk hari itu
• API stok untuk info ticker stick
• API Twitter untuk Feed Anda
• Google Calendar API untuk Kalender Google Anda
• API Kalender Microsoft Outlook untuk Kalender Outlook Anda

Ide Integrasi API Masa Depan

• Penyedia Transportasi Umum

Memulai

1. Kloning repositori dan instal dependensi

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

2. Konfigurasikan lingkungan lokal Anda

Salin file .env.local.example di direktori ini ke .env.local (yang akan diabaikan oleh git):

 cp .env.local.example .env.local

Tambahkan detail untuk semua penyedia yang ingin Anda gunakan:

 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. Mulai aplikasi

Untuk menjalankan startertab Anda secara lokal, gunakan:

 yarn dev

Untuk menjalankannya dalam mode produksi, gunakan:

 yarn build && yarn start

Membuat ubin baru

1. Buat komponen ubin baru Anda di folder src/components/tiles . Pastikan untuk menerima prop 'ubin', ini memungkinkan Anda untuk mengubah warna teks berdasarkan pengaturan yang diubah di bilah samping.

 type PageProps = {
  tileId : number ;
} ;

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

  return ( ) ;
}

2. Tambahkan jenis ubin Anda ke tiletype di src/types/settings.ts .
3. Tambahkan ubin baru Anda ke dalam ukuran yang sesuai yang Anda inginkan tersedia untuk ubin Anda di Pernyataan Switch untuk tileSize di src/components/sidebar/OptionsForTileTypeSelect.tsx
4. Tambahkan jenis ubin Anda ke pernyataan sakelar untuk tileType di src/components/TileContainer.tsx

Jika Anda membutuhkan penyimpanan yang persisten

1. Tambahkan nilai baru Anda ke dalam jenis TileSettings dalam src/types/settings.ts
2. Buat pemilih baru di Recoil untuk nilai pengaturan baru Anda di src/recoil/UserSettingsSelectors.tsx
3. Gunakan pemilih itu di dalam ubin Anda

Contoh Pemilih:

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

Menggunakan pemilih itu dalam ubin:

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

Membuat item menu bilah samping untuk opsi

1. Tambahkan opsi baru Anda ke OptionType di src/types/settings.ts
2. Tambahkan opsi Anda ke dalam ukuran yang berkaitan dengan itu di src/helpers/sideBarOptions.ts
3. Edit src/components/sidebar/SettingOptionContainer.tsx untuk memasukkan jenis opsi baru