🌐 Add ESP-MX language for Readme
Mexican Spanish README Localization
This commit is contained in:
Miguel R. Ávila
GitHub
commit
865e323e6b
229
README-ES-MX.md
Normal file
229
README-ES-MX.md
Normal file
@ -0,0 +1,229 @@
|
||||
|
||||
|
||||
|
||||
<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 */
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user