startertab

Вкладка стартера

VideoPreview.mp4

Я заболел той же старой новой страницей. Я хотел иметь приборную панель для всего, что я достигаю в своем типичном рабочем дне, поэтому я построил ее.

Startertab здесь, чтобы революционизировать то, как вы начинаете свой день в Интернете. Благодаря полностью настраиваемому веб -приложению для замены вашей новой домашней страницы вкладки вы можете персонализировать свой онлайн -опыт, как никогда раньше.

Вы можете установить здесь расширение Chrome или расширение Firefox здесь и сделать Startertab сайтом, который открывается на каждом из ваших новых вкладок.

Технический

Локальное хранилище используется для хранения всех ваших настройки, что означает, что вы владеете вашими данными! Все настройки, токены и темы находятся в вашем собственном браузере. Некоторые могут называть это леньем, что я не хочу поддерживать базу данных, вы также можете увидеть ее как я помогаю предотвратить, как ваши данные находятся в еще одном облачном сервисе.

Написано в NextJs с Charkaui. Фронта и функции размещаются в Vercel, базе данных на Neon.

Текущие интеграции API

• Strava API для моих купаний/пробежек на неделю
• Spotify API для контроля Spotify и ваших любимых художников
• Погодный API для данных о погоде для моего города
• Хакерские новости для лучших постов за день
• API акций для информации о тикере палки
• API Twitter для вашего корма
• Google Calendar API для вашего календаря Google
• Microsoft Outlook Calendar API для вашего календаря Outlook

Идеи интеграции API API

• Поставщик общественного транспорта

Начиная

1. Клонировать репозиторий и установить зависимости

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

2. Настройте локальную среду

Скопируйте файл .env.local.example в этом каталоге .env.local

 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

Создание новой плитки

1. Создайте свой новый компонент плитки в папке src/components/tiles . Обязательно принимайте опору «Tileid», это позволяет изменить цвет текста на основе настройки, измененных на боковой панели.

 type PageProps = {
  tileId : number ;
} ;

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

  return ( ) ;
}

2. Добавьте свой тип плитки в Tiletype в src/types/settings.ts .
3. Добавьте свою новую плитку в соответствующие размеры, которые вы хотите, доступны для вашей плитки в операторе Switch для tileSize в src/components/sidebar/OptionsForTileTypeSelect.tsx
4. Добавьте свой тип плитки в оператор Switch для tileType в src/components/TileContainer.tsx

Если вам нужно постоянное хранилище

1. Добавьте свое новое значение в тип TileSettings в src/types/settings.ts
2. Создайте новый селектор с отдачей для вашего нового значения настройки в src/recoil/UserSettingsSelectors.tsx
3. Используйте этот селектор в пределах своей плитки

Пример селектора:

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

Используя этот селектор в плите:

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

Создание элемента меню боковой панели для вариантов

1. Добавьте свою новую опцию в OptionType в src/types/settings.ts
2. Добавьте свой вариант в размеры, которые относятся к нему в src/helpers/sideBarOptions.ts
3. Редактировать src/components/sidebar/SettingOptionContainer.tsx чтобы включить новый тип опции