230 lines
6.8 KiB
Markdown
230 lines
6.8 KiB
Markdown
|
||
|
||
|
||
<p style="margin: -20px 0 30px">
|
||
<a href="https://www.buymeacoffee.com/migueravila" target="_blank" style='margin-right:0px; margin-top:5px'>
|
||
<img align="center" src="https://github.com/migueravila/Bento/blob/master/assets/img/donation.png" alt="donation" height="35px" />
|
||
</a>
|
||
|
||
<a href="https://migueravila.github.io/Bento/" target="_blank" style='margin-right:0px; margin-top:5px'>
|
||
<img align="center" src="https://github.com/migueravila/Bento/blob/master/assets/img/live.png" alt="live-preview" height="35px" />
|
||
</a>
|
||
</p>
|
||
|
||
<br />
|
||
|
||
## 👇 Índice
|
||
- [👇 Índice](#-indice)
|
||
- [✨ Características](#-caracteistícas)
|
||
- [🚀 Usos](#-usos)
|
||
- [Como página de inicio](#como-página-de-inicio)
|
||
- [Como una nueva pestaña](#como-una-nueva-pestaña)
|
||
- [🎨 Personalización](#-personalización)
|
||
- [👋 General: Nombre, Imagen De Fondo y Saludos](#-nombre-imagen-de-fondo-y-saludos)
|
||
- [🏷️ Botones de enlace](#️-enlaces-de-botones)
|
||
- [📑 Lista de enlaces](#-lista-de-enlaces)
|
||
- [⛈️ Clima: Clave De La Api, Iconos y Grupos](#️-Clima-clave-de-la-api-iconos-y-grupos)
|
||
- [💛 Colores](#-colores)
|
||
|
||
|
||
## ✨ Características
|
||
|
||
- **Configuración Sencilla** de archivos.
|
||
- **Modo Claro/Obscuro** puedes alternarlos y se guardara en tu almacenamiento local.
|
||
- **Fecha y Hora**, puedes utilizar el formato de 24 horas (predeterminado) o el de 12 horas.
|
||
- **Saludos** fáciles de modificar.
|
||
- **Variables** para colores y tamaños de fuente personalizados en el código del archivo `style.css`.
|
||
- **Iconos** todos los iconos provienen de [Feather Icons](https://feathericons.com/) (Otros los hice yo mismo, tomando los iconos de Feather Icons como base).
|
||
- **Archivos Modulares** de JavaScript para una lectura sencilla.
|
||
|
||
## 🚀 Usos
|
||
|
||
#### Como página de inicio
|
||
|
||
1. Haz un Fork de este repositorio
|
||
2. Activa el servicio de GitHub Pages `Settings > GitHub Pages > Source [rama master] > Save`
|
||
3. Configúrala como página de inicio:
|
||
- Haz click en el botón Menú, selecciona Opciones, selecciona Preferencias
|
||
- Haz click en el panel de inicio.
|
||
- Haz click en el menú al lado de Inicio y Nuevas Ventanas. Elige la opción de mostrar URL's personalizadas, después, añade el enlace de tu GitHub Pages.
|
||
|
||
#### Como una nueva pestaña
|
||
|
||
Puedes utilizar distintos Add-ons/Extensiones para ello
|
||
|
||
- Si usas Firefox: [Custom New Tab Page](https://addons.mozilla.org/en-US/firefox/addon/custom-new-tab-page/?src=search)
|
||
- Si usas Chromium (Brave, Vivaldi, Chrome): [Custom New Tab URL](https://chrome.google.com/webstore/detail/custom-new-tab-url/mmjbdbjnoablegbkcklggeknkfcjkjia)
|
||
|
||
## 🎨 Personalización
|
||
|
||
Casi todas la personalización puede ser configurada desde el archivo `config.js`:
|
||
|
||
### 👋 General: Nombre, Imagen De Fondo y Saludos
|
||
|
||
Para cambiar el nombre por defecto, los saludos y si deseas tener una imagen de fondo o abrir los enlaces en una nueva pestaña, edita las primeras configuraciones en el archivo `config.js`.
|
||
|
||
```js
|
||
// General
|
||
name: 'John',
|
||
imageBackground: false,
|
||
openInNewTab: true,
|
||
|
||
// Saludos
|
||
greetingMorning: 'Good morning!',
|
||
greetingAfternoon: 'Good afternoon,',
|
||
greetingEvening: 'Good evening,',
|
||
greetingNight: 'Go to Sleep!',
|
||
|
||
```
|
||
|
||
> Puedes cambiar el fondo, sustituyendo el archivo `background.jpg` en la carpeta `assets`.
|
||
|
||
|
||
|
||
### 🏷️ Botones de Enlace****
|
||
|
||
Para editar los botones solo tienes que cambiar la siguiente lista en el archivo `config.js` eligiendo un enlace, un icono proveniente de [Feather Icons](https://feathericons.com/) y un nombre:
|
||
|
||
```js
|
||
cards: [
|
||
{
|
||
id: '1',
|
||
name: 'Github',
|
||
icon: 'github',
|
||
link: 'https://github.com/',
|
||
},
|
||
{
|
||
id: '2',
|
||
name: 'Mail',
|
||
icon: 'mail',
|
||
link: 'https://mail.protonmail.com/',
|
||
},
|
||
{
|
||
id: '3',
|
||
name: 'Todoist',
|
||
icon: 'trello',
|
||
link: 'https://calendar.google.com/calendar/r',
|
||
},
|
||
{
|
||
id: '4',
|
||
name: 'Calendar',
|
||
icon: 'calendar',
|
||
link: 'https://calendar.google.com/calendar/r',
|
||
},
|
||
{
|
||
id: '5',
|
||
name: 'Reddit',
|
||
icon: 'bookmark',
|
||
link: 'https://reddit.com',
|
||
},
|
||
{
|
||
id: '6',
|
||
name: 'Odysee',
|
||
icon: 'youtube',
|
||
link: 'https://odysee.com/',
|
||
},
|
||
],
|
||
```
|
||
|
||
### 📑 Lista de enlaces
|
||
|
||
Lo mismo pasa con la lista de enlaces, puedes cambiar la lista de iconos (también provenientes de [Feather Icons](https://feathericons.com/)) y los enlaces:
|
||
|
||
```js
|
||
//Iconos
|
||
firstListIcon: 'music',
|
||
secondListIcon: 'coffee',
|
||
|
||
// Enlaces
|
||
lists: {
|
||
firstList: [
|
||
{
|
||
name: 'Inspirational',
|
||
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
|
||
},
|
||
{
|
||
name: 'Classic',
|
||
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
|
||
},
|
||
{
|
||
name: 'Oldies',
|
||
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
|
||
},
|
||
{
|
||
name: 'Rock',
|
||
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
|
||
},
|
||
],
|
||
secondList: [
|
||
{
|
||
name: 'Linkedin',
|
||
link: 'https://linkedin.com/',
|
||
},
|
||
{
|
||
name: 'Figma',
|
||
link: 'https://figma.com/',
|
||
},
|
||
{
|
||
name: 'Dribbble',
|
||
link: 'https://dribbble.com',
|
||
},
|
||
{
|
||
name: 'Telegram',
|
||
link: 'https://webk.telegram.org',
|
||
},
|
||
],
|
||
},
|
||
```
|
||
|
||
### ⛈️ Clima: Clave De La Api, Iconos y Grupos
|
||
|
||
Para configurar el widget del clima necesitaras una clave de API proveniente de: `https://openweathermap.org/`. Una vez que hayas obtenido tu clave, necesitaras configurar tu latitud y longitud, para ello puedes usar: `https://www.latlong.net/` para obtenerlas.
|
||
|
||
Finalmente, escoge un set de iconos:
|
||
|
||
|
||
|
||
- **Nord** Usa el esquema de colores Nord si te encantan los colores agradables a la vista.
|
||
- **OneDark** (_Predeterminado_) Usa el esquema de colores One Dark Pro.
|
||
- **Dark** Para usuarios que solo usan temas claros y quieren un look minimalista.
|
||
- **White** Para usuarios que solo usan temas oscuros y quieren un look minimalista.
|
||
|
||
Finalmente, solo añádelos al archivo `config.js`.
|
||
|
||
```js
|
||
// clima
|
||
weatherKey: 'InsertYourAPIKeyHere123456',
|
||
weatherIcons: 'OneDark',
|
||
weatherUnit: 'C',
|
||
weatherLatitude: '37.774929',
|
||
weatherLongitude: '-122.419418',
|
||
```
|
||
|
||
### 💛 Colores
|
||
|
||
En el archivo `app.css` puedes cambiar las variables para cualquiera de los temas (Oscuro y Claro):
|
||
|
||
```css
|
||
/* Tema Claro */
|
||
|
||
:root {
|
||
--accent: #61b0f1; /* Hover color */
|
||
--bg: #f5f5f5; /* Background color */
|
||
--sbg: #e4e6e6; /* Cards color */
|
||
--fg: #3a3a3a; /* Foreground color */
|
||
--sfg: #3a3a3a; /* Sceondary Foreground color */
|
||
}
|
||
|
||
/* Tema Oscuro */
|
||
|
||
.darktheme {
|
||
--accent: #61b0f1; /* Hover color */
|
||
--bg: #19171a; /* Background color */
|
||
--sbg: #201e21; /* Cards color */
|
||
--fg: #d8dee9; /* Foreground color */
|
||
--sfg: #3a3a3a; /* Secondary Foreground color */
|
||
}
|
||
```
|
||
|
||
|