startertab

علامة تبويب بداية

videopreview.mp4

كنت سئمت من نفس صفحة علامة التبويب الجديدة القديمة. كنت أرغب في الحصول على لوحة معلومات لكل ما وصلت إليه في يوم العمل النموذجي ، لذلك قمت ببنائه.

Startertab هنا لإحداث ثورة في الطريقة التي تبدأ بها يومك على الإنترنت. من خلال webapp القابلة للتخصيص تمامًا لاستبدال صفحة Tab الجديدة الخاصة بك ، يمكنك تخصيص تجربتك عبر الإنترنت كما لم يحدث من قبل.

يمكنك تثبيت امتداد Chrome هنا ، أو امتداد Firefox هنا وجعل StarterTab الموقع الذي يفتح على كل علامات تبويب جديدة.

التكنولوجيا

يتم استخدام التخزين المحلي لتخزين جميع التخصيصات الخاصة بك ، مما يعني أنك تملك بياناتك! جميع الإعدادات والرموز والموضوعات تجلس على متصفحك. قد يسميها البعض كسلًا لا أريد الحفاظ على قاعدة بيانات ، يمكنك أيضًا رؤيتها وأنا أساعد في منع بياناتك في خدمة سحابية أخرى.

مكتوبة في NextJS مع charkaui. يتم استضافة الواجهة الأمامية والوظائف على Vercel ، قاعدة البيانات على النيون.

تكامل API الحالي

• API Strava للسباحة/الركض لهذا الأسبوع
• Spotify API لعناصر التحكم في Spotify والفنانين المفضلين لديك
• API الطقس لبيانات الطقس لمدينتي
• أخبار Hacker لأفضل مشاركات Ask لهذا اليوم
• أسهم API لمعلومات Tick Ticker
• واجهة برمجة تطبيقات Twitter لخلاصتك
• واجهة برمجة تطبيقات تقويم Google لتقويم 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. ابدأ التطبيق

لتشغيل 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. أضف البلاط الجديد الخاص بك إلى الأحجام المقابلة التي تريدها متاحًا للبلاط الخاص بك في بيان التبديل tileSize في src/components/sidebar/OptionsForTileTypeSelect.tsx
4. أضف نوع البلاط الخاص بك إلى عبارة التبديل ل 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 لتضمين نوع الخيار الجديد