ดาวน์โหลด startertab - การดาวน์โหลดซอร์สโค้ด startertab

startertab

โค้ดแหล่งที่มา AI

1.0.0

ดาวน์โหลด

แท็บเริ่มต้น

videopreview.mp4

ฉันเบื่อหน้าแท็บใหม่เก่าเหมือนกัน ฉันต้องการมีแดชบอร์ดสำหรับทุกสิ่งที่ฉันไปถึงในวันทำงานทั่วไปของฉันดังนั้นฉันจึงสร้างมันขึ้นมา

StarterTab อยู่ที่นี่เพื่อปฏิวัติวิธีที่คุณเริ่มต้นวันใหม่บนอินเทอร์เน็ต ด้วย WebApp ที่ปรับแต่งได้อย่างสมบูรณ์เพื่อแทนที่หน้าแรกของแท็บใหม่ของคุณคุณสามารถปรับแต่งประสบการณ์ออนไลน์ของคุณอย่างที่ไม่เคยมีมาก่อน

คุณสามารถติดตั้งส่วนขยาย Chrome ได้ที่นี่หรือส่วนขยาย Firefox ที่นี่และทำให้ StarterTab เป็นเว็บไซต์ที่เปิดขึ้นบนแท็บใหม่ของคุณทุกครั้ง

เทค

พื้นที่จัดเก็บในท้องถิ่นกำลังใช้สำหรับการจัดเก็บการปรับแต่งทั้งหมดของคุณซึ่งหมายความว่าคุณเป็นเจ้าของข้อมูลของคุณ! การตั้งค่าโทเค็นและธีมทั้งหมดนั่งบนเบราว์เซอร์ของคุณเอง บางคนอาจเรียกว่าความเกียจคร้านที่ฉันไม่ต้องการรักษาฐานข้อมูลคุณสามารถเห็นมันในขณะที่ฉันช่วยป้องกันไม่ให้ข้อมูลของคุณอยู่ในบริการคลาวด์อื่น

เขียนใน nextjs กับ Charkaui ส่วนหน้าและฟังก์ชั่นโฮสต์บน Vercel ฐานข้อมูลบนนีออน

การรวม API ปัจจุบัน

Strava API สำหรับการว่ายน้ำ/วิ่งของฉันสำหรับสัปดาห์
Spotify API สำหรับการควบคุม Spotify และศิลปินที่คุณชื่นชอบ
Weather API สำหรับข้อมูลสภาพอากาศสำหรับเมืองของฉัน
ข่าวแฮ็กเกอร์สำหรับโพสต์ถามด้านบนสำหรับวันนี้
หุ้น API สำหรับข้อมูลแทคเกอร์แท่ง
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. เริ่มแอปพลิเคชัน

ในการเรียกใช้ StarterTab ของคุณในพื้นที่ให้ใช้:

 yarn dev

หากต้องการเรียกใช้ในโหมดการผลิตให้ใช้:

 yarn build && yarn start

การสร้างกระเบื้องใหม่

สร้างองค์ประกอบไทล์ใหม่ของคุณในโฟลเดอร์ src/components/tiles กระเบื้อง ตรวจสอบให้แน่ใจว่าได้ยอมรับเสา 'tileid' สิ่งนี้ช่วยให้คุณสามารถเปลี่ยนสีของข้อความตามการตั้งค่าที่เปลี่ยนไปในแถบด้านข้าง

 type PageProps = {
  tileId : number ;
} ;

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

  return ( ) ;
}

เพิ่มประเภทไทล์ของคุณลงใน tileType ใน src/types/settings.ts
เพิ่มกระเบื้องใหม่ของคุณลงในขนาดที่สอดคล้องกันที่คุณต้องการสำหรับกระเบื้องของคุณในคำสั่งสวิตช์สำหรับ tileSize ใน src/components/sidebar/OptionsForTileTypeSelect.tsx
เพิ่มประเภทไทล์ของคุณลงในคำสั่งสวิตช์สำหรับ tileType ใน src/components/TileContainer.tsx

หากคุณต้องการที่เก็บข้อมูลถาวร

เพิ่มค่าใหม่ของคุณลงในประเภท TileSettings ภายใน src/types/settings.ts
สร้างตัวเลือกใหม่ในการหดตัวสำหรับค่าการตั้งค่าใหม่ของคุณใน 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 > ] ;