startertab 다운로드 - startertab 소스 코드 다운로드

startertab

AI 소스 코드

1.0.0

다운로드

스타터 탭

videopreview.mp4

나는 같은 오래된 새 탭 페이지를 아프게하고있었습니다. 전형적인 근무일에 도달 할 수있는 모든 것에 대한 대시 보드를 갖고 싶었으므로 만들었습니다.

Startertab은 인터넷에서 하루를 시작하는 방식을 혁신하기 위해 여기에 있습니다. 새 탭 홈페이지를 교체하기위한 완전히 사용자 정의 할 수있는 WebApp을 사용하면 전례없이 온라인 경험을 개인화 할 수 있습니다.

여기에 Chrome Extension 또는 Firefox 확장을 여기에 설치하고 스타터 탭을 새로운 탭에서 열리는 사이트로 만들 수 있습니다.

기술

로컬 스토리지는 모든 사용자 정의를 저장하는 데 사용됩니다. 즉, 데이터를 소유하고 있음을 의미합니다! 모든 설정, 토큰 및 테마가 자신의 브라우저에 있습니다. 어떤 사람들은 데이터베이스를 유지하고 싶지 않다고 부르지 않을 수도 있습니다. 데이터가 다른 클라우드 서비스에있는 데이터를 방지하는 데 도움이 될 수도 있습니다.

Charkaui와 함께 Nextjs로 작성되었습니다. 프론트 엔드 및 기능은 Neon의 데이터베이스 인 Vercel에서 호스팅됩니다.

현재 API 통합

일주일 동안 수영/달리기를위한 Strava API
Spotify Controls 및 좋아하는 아티스트에 대한 Spotify API
내 도시의 날씨 데이터에 대한 날씨 API
탑에 대한 해커 뉴스는 하루를위한 게시물 게시물
스틱 티커 정보에 대한 API 주식
피드에 대한 트위터 API
Google 캘린더의 Google Calendar API
Outlook 캘린더에 대한 Microsoft Outlook Calendar API

미래의 API 통합 아이디어

대중 교통 제공자

시작하기

1. 저장소를 복제하고 종속성을 설치하십시오

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

2. 지역 환경을 구성하십시오

이 디렉토리의 .env.local.example 파일을 .env.local (git에 의해 무시 될 것)에 .env.local.example 파일을 복사하십시오.

 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. 응용 프로그램을 시작하십시오

로컬로 스타터를 실행하려면 다음을 사용하십시오.

 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 ( ) ;
}

src/types/settings.ts 의 Tiletype에 타일 유형을 추가하십시오.
src/components/sidebar/OptionsForTileTypeSelect.tsx 에서 tileSize 스위치 문에서 타일에 사용할 수있는 해당 크기에 새 타일을 추가하십시오.
src/components/TileContainer.tsx 의 tileType 에 대한 스위치 문에 타일 유형을 추가하십시오.

지속적인 스토리지가 필요한 경우

src/types/settings.ts 내에서 TileSettings 유형에 새 값을 추가하십시오.
src/recoil/UserSettingsSelectors.tsx 에서 새로운 설정 값에 대한 Recoil의 새 선택기 생성
타일 내에서 해당 선택기를 사용하십시오

선택기 예 :

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

타일에서 해당 선택기 사용 :

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