startertab

Pestaña de arranque

VideoPreview.mp4

Me estaba cansando de la misma vieja página de pestaña nueva. Quería tener un tablero para todo lo que busque en mi día de trabajo típico, así que lo construí.

StarterTab está aquí para revolucionar la forma en que comienza el día en Internet. Con una aplicación web completamente personalizable para reemplazar su nueva página de inicio de pestañas, puede personalizar su experiencia en línea como nunca antes.

Puede instalar la extensión de Chrome aquí, o la extensión de Firefox aquí y hacer de StarterTab el sitio que se abre en cada una de sus nuevas pestañas.

Técnico

El almacenamiento local se está utilizando para almacenar todas sus personalizaciones, ¡lo que significa que es propietario de sus datos! Todas las configuraciones, fichas y temas se encuentran en su propio navegador. Algunos pueden llamarlo pereza que no quiero mantener una base de datos, también podría verlo como yo ayudando a evitar que sus datos estén en otro servicio en la nube.

Escrito en Nextjs con Charkaui. El frontend y las funciones se alojan en Vercel, la base de datos en Neon.

Integraciones API actuales

• API Strava para mis nadadas/carreras para la semana
• API de Spotify para controles de Spotify y sus artistas favoritos
• API meteorológica para los datos meteorológicos para mi ciudad
• Hacker News para los mejores publicaciones de solicitar el día
• API de stocks para la información de ticker de palo
• API de Twitter para tu feed
• API del calendario de Google para su calendario de Google
• API del calendario de Microsoft Outlook para su calendario de Outlook

Ideas futuras de integraciones de API

• Proveedor de transporte público

Empezando

1. Clonar el repositorio e instalar dependencias

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

2. Configure su entorno local

Copie el archivo .env.local.example en este directorio a .env.local (que será ignorado por Git):

 cp .env.local.example .env.local

Agregue detalles para todos los proveedores que desea usar:

 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. Inicie la aplicación

Para ejecutar su StarterTab localmente, use:

 yarn dev

Para ejecutarlo en modo de producción, use:

 yarn build && yarn start

Creando un nuevo mosaico

1. Cree su nuevo componente de mosaico en la carpeta src/components/tiles . Asegúrese de aceptar un accesorio de 'mosaico', esto le permite cambiar el color del texto basado en la configuración cambiada en la barra lateral.

 type PageProps = {
  tileId : number ;
} ;

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

  return ( ) ;
}

2. Agregue su tipo de mosaico al TileType en src/types/settings.ts .
3. Agregue su nuevo mosaico a los tamaños correspondientes que desee disponibles para su mosaico en la instrucción Switch para tileSize en src/components/sidebar/OptionsForTileTypeSelect.tsx
4. Agregue su tipo de mosaico a la instrucción Switch para el tileType en src/components/TileContainer.tsx

Si necesita almacenamiento persistente

1. Agregue su nuevo valor al tipo de TileSettings dentro de src/types/settings.ts
2. Cree un nuevo selector en retroceso para su nuevo valor de configuración en src/recoil/UserSettingsSelectors.tsx
3. Usa ese selector dentro de tu mosaico

Ejemplo selector:

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

Usando ese selector en un mosaico:

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

Creación de un elemento de menú de barra lateral para opciones

1. Agregue su nueva opción al OptionType en src/types/settings.ts
2. Agregue su opción a los tamaños que pertenecen a ella en src/helpers/sideBarOptions.ts
3. Edite el src/components/sidebar/SettingOptionContainer.tsx para incluir el nuevo tipo de opción