AtaraxiaDev/Bento
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

🌱 Add Layouts feature.

Browse Source 
🌱 Add `Layouts` feature.
This commit is contained in:
Miguel Ávila 2022-02-14 14:52:15 -06:00 committed by GitHub
commit 5e21c8e0f5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 464 additions and 478 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

248
README-ES-MX.md
View File

@ -1,248 +0,0 @@
![image](assets/img/header.png)
<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](#-índice)
- [✨ Características](#-características)
- [🚀 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](#-general-nombre-imagen-de-fondo-y-saludos)
- [🏷️ Botones de Enlace****](#️-botones-de-enlace)
- [📑 Lista de enlaces](#-lista-de-enlaces)
- [⛈️ Clima: Clave De La Api, Iconos y Grupos](#️-clima-clave-de-la-api-iconos-y-grupos)
- [💛 Colores](#-colores)
- [🌑 Cambio automatico de tema](#-cambio-automatico-de-tema)
## ✨ 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`.
![](assets/img/previewbg.png)
### 🏷️ 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:
![](assets/img/icons.png)
- **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 */
}
```
### 🌑 Cambio automatico de tema
The theme can be automatically changed by the OS' current theme or personalized hours
that you can change in the `config.js` file:
```js
// Autochange
autoChangeTheme: true,
// Autochabge by OS
changeThemeByOS: false,
// Autochange by hour options (24hrs format, string must be in: hh:mm)
changeThemeByHour: true, // If it's true, it will use the values below:
hourDarkThemeActive: '18:30', // Turn on the dark theme after this hour
hourDarkThemeInactive: '07:00', // Turn off the dark theme after this hour and before the above hour
```
![](assets/img/subheader.png)

154
README.md
View File

@ -1,6 +1,5 @@
![image](assets/img/header.png)
<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" />
@ -8,11 +7,7 @@
<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>
<a href="https://github.com/migueravila/Bento/blob/master/README-ES-MX.md" target="_blank" style='margin-right:0px; margin-top:5px'>
<img align="center" src="https://github.com/migueravila/Bento/blob/master/assets/img/spanish.png" alt="live-preview" height="35px" />
</a>
</a>
</p>
<br />
@ -21,12 +16,13 @@
- [👇 Index](#-index)
- [✨ Features](#-features)
- [🚀 Usage](#-usage)
- [As Home Page](#as-home-page)
- [As New Tab](#as-new-tab)
- [🏡 As Home Page](#-as-home-page)
- [➕ As New Tab](#-as-new-tab)
- [🎨 Customization](#-customization)
- [👋 General: Name, Image Background and Greetings](#-general-name-image-background-and-greetings)
- [🏷️ Button Links](#️-button-links)
- [📑 List Links](#-list-links)
- [📐 Layouts: Bento, Lists and Buttons.](#-layouts-bento-lists-and-buttons)
- [🏷️ Buttons & Links](#️-buttons--links)
- [📑 Lists & Links](#-lists--links)
- [⛈️ Weather: Api Key, Icons and Unit](#️-weather-api-key-icons-and-unit)
- [💛 Colors](#-colors)
- [🌑 Auto change theme](#-auto-change-theme)
@ -35,25 +31,26 @@
## ✨ Features
- **Easy configuration** file.
- **Dark/Light** mode, you can toggle them and It'll be saved in local storage.
- **Dark/Light** mode, you can toggle it and will be saved in local storage.
- **Layouts!** to customize your experience following your workflow.
- **Clock and Date** format can be set to 24 hour (default) or 12 hour.
- **Greetings** are easy to modify.
- **Variables** for custom colors and font sizes in the `style.css` code.
- **Icons** all icons are from Feather Icons (Some others I made them with the Feather icons as a base)
- **Variables** for custom colors and font sizes in the `app.css` code.
- **Icons** all icons are from [Lucide icons](https://lucide.dev).
- **Modular** javascript files for an easy read.
## 🚀 Usage
#### As Home Page
### 🏡 As Home Page
1. Fork this repo
2. Enable the Github Pages service `Settings > GitHub Pages > Source [master branch] > Save`
2. Enable the Github Pages service `Settings → GitHub Pages → Source [master branch] → Save`
3. Set it as Home Page:
- Click the menu button. and select Options. Preferences.
- Click the Home panel.
- Click the menu next to Homepage and new windows and choose to show custom URLs and add your `Github Pages link`
#### As New Tab
### ➕ As New Tab
You can use different Add-ons/Extensions for it
@ -62,7 +59,7 @@ You can use different Add-ons/Extensions for it
## 🎨 Customization
Almost all customization can be managed in the `config.js` file:
All customization can be managed in the `config.js` file:
### 👋 General: Name, Image Background and Greetings
@ -82,16 +79,30 @@ To change the default name, the greetings and if you want to have an image backg
```
> You cah change the background by substituting the `background.jpg` file in `assets` folder.
> You can change the background by substituting the `background.jpg` file in `assets` folder.
![](assets/img/previewbg.png)
![](assets/img/backgroundImage.png)
### 🏷️ Button Links
### 📐 Layouts: Bento, Lists and Buttons.
To edit the buttons you just need to change the follow list in the `config.js` file by choosing a link, an icon from [Feather icons](https://feathericons.com/) and a name:
Bento has three different layouts `bento`, `lists` & `buttons`. It allows you to cutomize your experience giving you more buttons or lists depending on how are you more comfortable. To modify the laout you need to change the following line in the `config.js` file:
```js
cards: [
// Layout
bentoLayout: 'bento', // 'bento', 'lists', 'buttons'
```
If you want to customize all your extra buttons and lists go to [🏷️ Buttons & Links](#️-buttons--links) & [📑 Lists & Links](#-lists--links) sections.
![](assets/img/bentoLayouts.png)
### 🏷️ Buttons & Links
To edit the buttons you just need to change the follow list in the `config.js` file by choosing a link, an icon from [Lucide icons](https://lucide.dev) and a name. If you're using the `buttons` [layout](#-layouts-bento-lists-and-buttons) you can customize `secondButtonsContainer`
```js
firstButtonsContainer: [
{
id: '1',
name: 'Github',
@ -108,7 +119,7 @@ cards: [
id: '3',
name: 'Todoist',
icon: 'trello',
link: 'https://calendar.google.com/calendar/r',
link: 'https://todoist.com',
},
{
id: '4',
@ -119,7 +130,7 @@ cards: [
{
id: '5',
name: 'Reddit',
icon: 'bookmark',
icon: 'glasses',
link: 'https://reddit.com',
},
{
@ -131,54 +142,57 @@ cards: [
],
```
### 📑 List Links
### 📑 Lists & Links
The same happens with the list links, you can change the list icon (also using feather icons) and the links:
The same happens with the list links, you can change the list icon (also using Lucide icons) and the links. If you're using the `lists` [layout](#-layouts-bento-lists-and-buttons) you can customize `secondListsContainer`, you can find it bellow `firstListsContainer`.
```js
//Icons
firstListIcon: 'music',
secondListIcon: 'coffee',
// Links
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',
},
],
},
firstlistsContainer: [
{
icon: 'music',
id: '1',
links: [
{
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',
},
],
},
{
icon: 'coffee',
id: '2',
links: [
{
name: 'Linkedin',
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
},
{
name: 'Dribbble',
link: 'https://www.linkedin.com',
},
{
name: 'Trello',
link: 'https://www.trello.com',
},
{
name: 'Slack',
link: 'https://www.slack.com',
},
],
},
],
```
### ⛈️ Weather: Api Key, Icons and Unit
@ -249,4 +263,4 @@ that you can change in the `config.js` file:
hourDarkThemeInactive: '07:00', // Turn off the dark theme after this hour and before the above hour
```
![](assets/img/subheader.png)
![](assets/img/darkMode.png)

60
app.css
View File

@ -25,7 +25,7 @@
--sfg: #494949; /* Sceondary Foreground color */
/* Light Colors */
--accent: #61b0f1; /* Hover color */
--accent: #57a0d9; /* Hover color */
--background: #f5f5f5; /* Background color */
--cards: #e4e6e6; /* Cards color */
@ -39,13 +39,13 @@
.darktheme {
/* Dark Colors */
--accent: #61b0f1; /* Hover color */
--accent: #57a0d9; /* Hover color */
--background: #19171a; /* Background color */
--cards: #201e21; /* Cards color */
/* Fonts Color */
--fg: #d8dee9; /* Foreground color */
--sfg: #3a3a3a; /* Secondary Foreground color */
--sfg: #2c292e; /* Secondary Foreground color */
/* Image background */
--imgcol: linear-gradient(
@ -205,9 +205,36 @@ body {
color: var(--fg);
}
.buttonsBlock {
.reduceGap {
grid-gap: 2rem !important;
}
.removeGap {
grid-gap: 0 !important;
}
.linksBlock {
grid-row: 3 / span 2;
grid-column: 1 / span 4;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 1.5rem;
}
.linksBlockLeft {
grid-row: 1 / span 2;
grid-column: 1 / span 2;
}
.linksBlockRight {
grid-row: 1 / span 2;
grid-column: 3 / span 2;
}
.buttonsContainer {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
@ -259,22 +286,33 @@ body {
stroke: var(--sfg);
}
.listsContainer {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 3rem;
padding: 0.4rem;
}
.list {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.list__1 {
grid-column: 3;
grid-row: 3 / span 2;
grid-column: 1;
grid-row: 1 / span 2;
}
.list__2 {
grid-column: 4;
grid-row: 3 / span 2;
grid-column: 2;
grid-row: 1 / span 2;
}
.listIcon {
margin-top: 3vh;
/* margin-top: 3vh; */
margin-bottom: 2vh;
color: var(--fg);
width: var(--icon);
@ -317,11 +355,11 @@ body {
font-size: var(--fg-secondary);
}
.list {
.linksBlockRight {
display: none;
}
.buttons {
.linksBlockLeft {
grid-column: 1 / span 4;
}

BIN
assets/img/backgroundImage.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 596 KiB

BIN
assets/img/bentoLayouts.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 565 KiB

BIN
assets/img/darkMode.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 975 KiB

BIN
assets/img/previewbg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 950 KiB

BIN
assets/img/spanish.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.5 KiB

BIN
assets/img/subheader.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 239 KiB

56
assets/js/buttons.js Normal file
View File

@ -0,0 +1,56 @@
// ┌┐ ┬ ┬┌┬┐┌┬┐┌─┐┌┐┌┌─┐
// ├┴┐│ │ │ │ │ ││││└─┐
// └─┘└─┘ ┴ ┴ └─┘┘└┘└─┘
// Function to print Button Cards.
const generateFirstButtonsContainer = () => {
for (const button of CONFIG.firstButtonsContainer) {
let item = `
<a
href="${button.link}"
target="${CONFIG.openInNewTab ? '_blank' : ''}"
class="card button button__${button.id}"
>
<i class="buttonIcon" icon-name="${button.icon}"></i>
</a>
`;
const position = 'beforeend';
buttons_1.insertAdjacentHTML(position, item);
}
};
const generateSecondButtonsContainer = () => {
for (const button of CONFIG.secondButtonsContainer) {
let item = `
<a
href="${button.link}"
target="${CONFIG.openInNewTab ? '_blank' : ''}"
class="card button button__${button.id}"
>
<i class="buttonIcon" icon-name="${button.icon}"></i>
</a>
`;
const position = 'beforeend';
buttons_2.insertAdjacentHTML(position, item);
}
};
const generateButtons = () => {
switch (CONFIG.bentoLayout) {
case 'bento':
generateFirstButtonsContainer();
break;
case 'buttons':
generateFirstButtonsContainer();
generateSecondButtonsContainer();
break;
default:
break;
}
};
generateButtons();

24
assets/js/cards.js
View File

@ -1,24 +0,0 @@
// ┌─┐┌─┐┬─┐┌┬┐┌─┐
// │ ├─┤├┬┘ ││└─┐
// └─┘┴ ┴┴└──┴┘└─┘
// Function to print Button Cards.
const printCards = () => {
for (const card of CONFIG.cards) {
let item = `
<a
href="${card.link}"
target="${CONFIG.openInNewTab ? '_blank' : ''}"
class="card button button__${card.id}"
>
<i class="buttonIcon" icon-name="${card.icon}"></i>
</a>
`;
const position = 'beforeend';
buttonsContainer.insertAdjacentHTML(position, item);
}
};
printCards();

6
assets/js/greeting.js
View File

@ -1,21 +1,17 @@
// ┌─┐┬─┐┌─┐┌─┐┌┬┐┬┌┐┌┌─┐┌─┐
// │ ┬├┬┘├┤ ├┤ │ │││││ ┬└─┐
// └─┘┴└─└─┘└─┘ ┴ ┴┘└┘└─┘└─┘
// Function to set Greetings
// Get the hour
const today = new Date();
const hour = today.getHours();
// Here you can change your name
const name = CONFIG.name;
// Here you can change your greetings
const gree1 = `${CONFIG.greetingNight}\xa0`;
const gree2 = `${CONFIG.greetingMorning}\xa0`;
const gree3 = `${CONFIG.greetingAfternoon}\xa0`;
const gree4 = `${CONFIG.greetingEvening}\xa0`;
// Define the hours of the greetings
if (hour >= 23 || hour < 5) {
document.getElementById('greetings').innerText = gree1 + name;
} else if (hour >= 6 && hour < 12) {

45
assets/js/layout.js Normal file
View File

@ -0,0 +1,45 @@
// ┬ ┌─┐┬ ┬┌─┐┬ ┬┌┬┐
// │ ├─┤└┬┘│ ││ │ │
// ┴─┘┴ ┴ ┴ └─┘└─┘ ┴
// Generate Layout.
const generateLayout = () => {
let firstButtonsContainer = `
<div class="buttonsContainer" id="buttons_1"></div>
`;
let secondButtonsContainer = `
<div class="buttonsContainer" id="buttons_2"></div>
`;
let firstListsContainer = `
<div class="listsContainer" id="lists_1"></div>
`;
let secondListsContainer = `
<div class="listsContainer" id="lists_2"></div>
`;
const position = 'beforeend';
switch (CONFIG.bentoLayout) {
case 'bento':
linksBlockLeft.insertAdjacentHTML(position, firstButtonsContainer);
linksBlockRight.insertAdjacentHTML(position, firstListsContainer);
linksBlock.classList.remove('reduceGap');
linksBlock.classList.remove('removeGap');
break;
case 'lists':
linksBlockLeft.insertAdjacentHTML(position, firstListsContainer);
linksBlockRight.insertAdjacentHTML(position, secondListsContainer);
linksBlock.classList.add('reduceGap');
break;
case 'buttons':
linksBlockLeft.insertAdjacentHTML(position, firstButtonsContainer);
linksBlockRight.insertAdjacentHTML(position, secondButtonsContainer);
linksBlock.classList.add('removeGap');
break;
default:
break;
}
};
generateLayout();

99
assets/js/lists.js
View File

@ -3,41 +3,82 @@
// ┴─┘┴└─┘ ┴ └─┘
// Functions for printing both lists
const printFirstList = () => {
let icon = `<i class="listIcon" icon-name="${CONFIG.firstListIcon}"></i>`;
const position = 'beforeend';
list_1.insertAdjacentHTML(position, icon);
for (const link of CONFIG.lists.firstList) {
let item = `
<a
target="${CONFIG.openInNewTab ? '_blank' : ''}"
href="${link.link}"
class="listItem"
>${link.name}</a
>
`;
const position = 'beforeend';
list_1.insertAdjacentHTML(position, item);
}
};
const printSecondList = () => {
let icon = `<i class="listIcon" icon-name="${CONFIG.secondListIcon}"></i>`;
const position = 'beforeend';
list_2.insertAdjacentHTML(position, icon);
for (const link of CONFIG.lists.secondList) {
const generateFirstListsContainer = () => {
for (const list of CONFIG.firstlistsContainer) {
let item = `
<div class="card list list__${list.id}" id="list_${list.id}">
<i class="listIcon" icon-name="${list.icon}"></i>
<a
target="${CONFIG.openInNewTab ? '_blank' : ''}"
href="${link.link}"
href="${list.links[0].link}"
class="listItem"
>${link.name}</a
>
>${list.links[0].name}</a>
<a
target="${CONFIG.openInNewTab ? '_blank' : ''}"
href="${list.links[1].link}"
class="listItem"
>${list.links[1].name}</a>
<a
target="${CONFIG.openInNewTab ? '_blank' : ''}"
href="${list.links[2].link}"
class="listItem"
>${list.links[2].name}</a>
<a
target="${CONFIG.openInNewTab ? '_blank' : ''}"
href="${list.links[3].link}"
class="listItem"
>${list.links[3].name}</a>
</div>
`;
const position = 'beforeend';
list_2.insertAdjacentHTML(position, item);
lists_1.insertAdjacentHTML(position, item);
}
};
printFirstList();
printSecondList();
const generateSecondListsContainer = () => {
for (const list of CONFIG.secondListsContainer) {
let item = `
<div class="card list list__${list.id}" id="list_${list.id}">
<i class="listIcon" icon-name="${list.icon}"></i>
<a
target="${CONFIG.openInNewTab ? '_blank' : ''}"
href="${list.links[0].link}"
class="listItem"
>${list.links[0].name}</a>
<a
target="${CONFIG.openInNewTab ? '_blank' : ''}"
href="${list.links[1].link}"
class="listItem"
>${list.links[1].name}</a>
<a
target="${CONFIG.openInNewTab ? '_blank' : ''}"
href="${list.links[2].link}"
class="listItem"
>${list.links[2].name}</a>
<a
target="${CONFIG.openInNewTab ? '_blank' : ''}"
href="${list.links[3].link}"
class="listItem"
>${list.links[3].name}</a>
</div>
`;
const position = 'beforeend';
lists_2.insertAdjacentHTML(position, item);
}
};
const generateLists = () => {
switch (CONFIG.bentoLayout) {
case 'bento':
generateFirstListsContainer();
break;
case 'lists':
generateFirstListsContainer();
generateSecondListsContainer();
break;
default:
break;
}
};
generateLists();

17
assets/js/theme.js
View File

@ -1,13 +1,12 @@
// ┌┬┐┬ ┬┌─┐┌┬┐┌─┐
// ┌┬┐┬ ┬┌─┐┌┬┐┌─┐
// │ ├─┤├┤ │││├┤
// ┴ ┴ ┴└─┘┴ ┴└─┘
// Set theme based on Configurations and Preferences
// Store the theme
let darkTheme = localStorage.getItem('darkTheme');
const themeToggle = document.querySelector('#themeButton');
const bodyBackground = document.getElementById('#body');
// Apply Dark theme
const enableDark = () => {
document.body.classList.add('darktheme');
localStorage.setItem('darkTheme', 'enabled');
@ -15,7 +14,6 @@ const enableDark = () => {
lucide.createIcons();
};
// Remove Dark theme
const disableDark = () => {
document.body.classList.remove('darktheme');
localStorage.setItem('darkTheme', null);
@ -23,18 +21,14 @@ const disableDark = () => {
lucide.createIcons();
};
//Toggle theme
if (darkTheme === 'enabled') {
// Temporarily disable transitions when changing theme on startup
document.body.classList.add('notransition');
enableDark();
document.body.offsetHeight; // Trigger reflow to flush CSS changes
document.body.classList.remove('notransition');
} else {
disableDark();
}
// Toggle Theme Listener
themeToggle.addEventListener('click', () => {
darkTheme = localStorage.getItem('darkTheme');
if (darkTheme !== 'enabled') {
@ -59,8 +53,11 @@ if (CONFIG.changeThemeByOS && CONFIG.autoChangeTheme) {
}
}
// Theme Autochanger
if (CONFIG.changeThemeByHour && CONFIG.autoChangeTheme && !CONFIG.changeThemeByOS) {
if (
CONFIG.changeThemeByHour &&
CONFIG.autoChangeTheme &&
!CONFIG.changeThemeByOS
) {
const date = new Date();
const hours =
date.getHours() < 10

5
assets/js/time.js
View File

@ -1,9 +1,9 @@
// ┌┬┐┬┌┬┐┌─┐
// │ ││││├┤
// ┴ ┴┴ ┴└─┘
// Set time and Date
window.onload = displayClock();
// Clock function
function displayClock() {
const monthNames = [
'Jan',
@ -20,7 +20,6 @@ function displayClock() {
'Dec',
];
// Get clock elements
var d = new Date();
var mm = monthNames[d.getMonth()];
var dd = d.getDate();
@ -28,14 +27,12 @@ function displayClock() {
var hh = d.getHours();
var ampm = '';
// Hour format
if (CONFIG.twelveHourFormat) {
ampm = hh >= 12 ? ' pm' : ' am';
hh = hh % 12;
hh = hh ? hh : 12;
}
// Display clock elements
document.getElementById('hour').innerText = hh;
document.getElementById('separator').innerHTML = ' : ';
document.getElementById('minutes').innerText = min + ampm;

10
assets/js/weather.js
View File

@ -1,12 +1,12 @@
// ┬ ┬┌─┐┌─┐┌┬┐┬ ┬┌─┐┬─┐
// │││├┤ ├─┤ │ ├─┤├┤ ├┬┘
// └┴┘└─┘┴ ┴ ┴ ┴ ┴└─┘┴└─
// Functions to setup Weather windget.
const iconElement = document.querySelector('.weatherIcon');
const tempElement = document.querySelector('.weatherValue p');
const descElement = document.querySelector('.weatherDescription p');
// App data
const weather = {};
weather.temperature = {
unit: 'celsius',
@ -15,10 +15,7 @@ weather.temperature = {
var tempUnit = CONFIG.weatherUnit;
const KELVIN = 273.15;
// Use your own key for the Weather, Get it here: https://openweathermap.org/
const key = `${CONFIG.weatherKey}`;
// Set Position function
setPosition();
function setPosition(position) {
@ -43,12 +40,8 @@ function setPosition(position) {
);
}
// Get the Weather data
function getWeather(latitude, longitude) {
let api = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&lang=${CONFIG.language}&appid=${key}`;
console.log(api);
fetch(api)
.then(function (response) {
let data = response.json();
@ -66,7 +59,6 @@ function getWeather(latitude, longitude) {
});
}
// Display Weather info
function displayWeather() {
iconElement.innerHTML = `<img src="assets/icons/${CONFIG.weatherIcons}/${weather.iconId}.png"/>`;
tempElement.innerHTML = `${weather.temperature.value.toFixed(

191
config.js
View File

@ -22,6 +22,9 @@ const CONFIG = {
greetingEvening: 'Good evening,',
greetingNight: 'Go to Sleep!',
// Layout
bentoLayout: 'bento', // 'bento', 'lists', 'buttons'
// Weather
weatherKey: 'InsertYourAPIKeyHere123456', // Write here your API Key
weatherIcons: 'OneDark', // 'Onedark', 'Nord', 'Dark', 'White'
@ -36,19 +39,18 @@ const CONFIG = {
autoChangeTheme: true,
// Autochabge by OS
changeThemeByOS: false,
changeThemeByOS: true,
// Autochange by hour options (24hrs format, string must be in: hh:mm)
changeThemeByHour: true,
changeThemeByHour: false,
hourDarkThemeActive: '18:30',
hourDarkThemeInactive: '07:00',
// ┌─┐┌─┐┬─┐┌┬┐┌─┐
// │ ├─┤├┬┘ ││└─┐
// └─┘┴ ┴┴└──┴┘└─┘
// ┌┐ ┬ ┬┌┬┐┌┬┐┌─┐┌┐┌┌─┐
// ├┴┐│ │ │ │ │ ││││└─┐
// └─┘└─┘ ┴ ┴ └─┘┘└┘└─┘
// Links
cards: [
firstButtonsContainer: [
{
id: '1',
name: 'Github',
@ -87,51 +89,142 @@ const CONFIG = {
},
],
secondButtonsContainer: [
{
id: '1',
name: 'Music',
icon: 'headphones',
link: 'https://open.spotify.com',
},
{
id: '2',
name: 'twitter',
icon: 'twitter',
link: 'https://twitter.com/',
},
{
id: '3',
name: 'bot',
icon: 'bot',
link: 'https://discord.com/app',
},
{
id: '4',
name: 'Amazon',
icon: 'shopping-bag',
link: 'https://amazon.com/',
},
{
id: '5',
name: 'Hashnode',
icon: 'pen-tool',
link: 'https://hashnode.com/',
},
{
id: '6',
name: 'Figma',
icon: 'figma',
link: 'https://figma.com/',
},
],
// ┬ ┬┌─┐┌┬┐┌─┐
// │ │└─┐ │ └─┐
// ┴─┘┴└─┘ ┴ └─┘
//Icons
firstListIcon: 'music',
secondListIcon: 'coffee',
// First Links Container
firstlistsContainer: [
{
icon: 'music',
id: '1',
links: [
{
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',
},
],
},
{
icon: 'coffee',
id: '2',
links: [
{
name: 'Linkedin',
link: 'https://www.linkedin.com',
},
{
name: 'Dribbble',
link: 'https://www.dribbble.com',
},
{
name: 'Trello',
link: 'https://www.trello.com',
},
{
name: 'Slack',
link: 'https://www.slack.com',
},
],
},
],
// Links
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',
},
],
},
// Second Links Container
secondListsContainer: [
{
icon: 'binary',
id: '1',
links: [
{
name: 'Spotify',
link: 'https://www.spotify.com',
},
{
name: 'Reddit',
link: 'https://www.reddit.com',
},
{
name: 'Hashnode',
link: 'https://www.hashnode.com',
},
{
name: 'Pocket',
link: 'https://www.pocket.com',
},
],
},
{
icon: 'github',
id: '2',
links: [
{
name: 'Front',
link: 'https://www.reddit.com/r/Frontend/',
},
{
name: 'Rust',
link: 'https://www.reddit.com/r/rust/',
},
{
name: 'Go',
link: 'https://www.reddit.com/r/golang/',
},
{
name: 'Repos',
link: 'https://github.com/migueravila,
},
],
},
],
};

27
index.html
View File

@ -54,35 +54,24 @@
</div>
</div>
<!--
┌┐ ┬ ┬┌┬┐┌┬┐┌─┐┌┐┌┌─┐
├┴┐│ │ │ │ │ ││││└─┐
└─┘└─┘ ┴ ┴ └─┘┘└┘└─┘
-->
<div class="buttonsBlock" id="buttonsContainer"></div>
<!--
┬ ┬┌─┐┌┬┐┌─┐
│ │└─┐ │ └─┐
┴─┘┴└─┘ ┴ └─┘
-->
<div class="card list list__1" id="list_1"></div>
<div class="card list list__2" id="list_2"></div>
<div class="linksBlock" id="linksBlock">
<div class="linksBlockLeft" id="linksBlockLeft"></div>
<div class="linksBlockRight" id="linksBlockRight"></div>
</div>
</div>
<!-- Config -->
<script src="config.js"></script>
<!-- Scripts -->
<script src="assets/js/time.js"></script>
<script src="assets/js/layout.js"></script>
<script src="assets/js/theme.js"></script>
<script src="assets/js/time.js"></script>
<script src="assets/js/greeting.js"></script>
<script src="assets/js/weather.js"></script>
<script src="assets/js/cards.js"></script>
<!-- Generators -->
<script src="assets/js/buttons.js"></script>
<script src="assets/js/lists.js"></script>
<!-- Icons -->