diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
deleted file mode 100644
index b6b4873..0000000
--- a/.github/FUNDING.yml
+++ /dev/null
@@ -1,2 +0,0 @@
-# These are supported funding model platforms
-ko_fi: miguelravila
diff --git a/.gitignore b/.gitignore
deleted file mode 100644
index b512c09..0000000
--- a/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-node_modules
\ No newline at end of file
diff --git a/README.md b/README.md
index 1d0218e..a3050c1 100644
--- a/README.md
+++ b/README.md
@@ -1,32 +1,29 @@
Bento
- π± A Clean and Simple Startpage
+ π± Minimalist, elegant and simple startpage inspired by the Bento box!
-
-
-
+
-> Wallpaper by [anima_contritum](https://www.reddit.com/user/anima_contritum)
+[](https://www.buymeacoffee.com/migueravila)
## Index
+- [Index](#index)
+- [β¨ Features:](#-features)
+- [π Usage:](#-usage)
+ - [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)
+ - [βοΈ Weather: Api Key, Icons and Unit](#οΈ-weather-api-key-icons-and-unit)
+ - [π Colors](#-colors)
-- [Bento](#)
- - [Features](#features)
- - [Usage](#usage)
- - [Home Page](#as-home-page)
- - [New Tab](#as-new-tab)
- - [Customization](#customization)
- - [Links](#links)
- - [Colors](#colors)
- - [Theme Depending at the time](#theme-depending-at-the-time)
- - [Image Background](#image-background)
- - [Greetings](#greetings)
- - [Weather Info](#weather-info)
- - [Weather Icons](#weather-icons)
-### Features:
+## β¨ Features:
+- **Easy configuration** file.
- **Dark/Light** mode, you can toggle them and It'll be saved in local storage.
- **Clock and Date** format can be set to 24 hour (default) or 12 hour.
- **Greetings** are easy to modify.
@@ -34,7 +31,7 @@
- **Icons** all icons are from Feather Icons (Some others I made them with the Feather icons as a base)
- **Modular** javascript files for an easy read.
-## Usage:
+## π Usage:
#### As Home Page:
@@ -52,35 +49,160 @@ You can use different Add-ons/Extensions for it
- If you use Firefox: [Custom New Tab Page](https://addons.mozilla.org/en-US/firefox/addon/custom-new-tab-page/?src=search)
- If you use Chromium (Brave, Vivaldi, Chrome): [Custom New Tab URL](https://chrome.google.com/webstore/detail/custom-new-tab-url/mmjbdbjnoablegbkcklggeknkfcjkjia)
-## Customization
+## π¨ Customization
-> All the code is using variables and is comented, It's easy to customize the project to your own, and this sections are the principal customizable elements in the Startpage:
+Almost all customization can be managed in the `config.js` file:
-### Links
+### π General: Name, Image Background and Greetings
-You can change the links (and the icons too) in the HTML Code:
+To change the default name, the greetings and if you want to have an image background or open your links in new tabs, edit the first configs in the `config.js`.
+
+```js
+ // General
+ name: 'John',
+ imageBackground: false,
+ openInNewTab: true,
+
+ // Greetings
+ greetingMorning: 'Good morning!',
+ greetingAfternoon: 'Good afternoon,',
+ greetingEvening: 'Good evening,',
+ greetingNight: 'Go to Sleep!',
-```html
-
-
-
```
-Change the link in the `href` property with the link you want. (The `target="blank"` makes the link to open a new tab with the link you choose).
-The Project uses [Feather icons](https://feathericons.com/) for the icons, and you can change them in the `data-feather=""` property with the name of the icon in the page.
+> You cah change the background by substituting the `background.jpg` file in `assets` folder.
-### Colors
+
-In the CSS code you can always change the variables for both themes (Dark and Light)
+### π·οΈ Button 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 [Feather icons](https://feathericons.com/) and a name:
+
+```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/',
+ },
+ ],
+```
+
+### π List Links
+
+The same happens with the list links, you can change the list icon (also using feather icons) and the links:
+
+```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',
+ },
+ ],
+ },
+```
+
+### βοΈ Weather: Api Key, Icons and Unit
+
+For setting up the Weather widget you'll need an API Key from: `https://openweathermap.org/`. Once you have your Key you'll need to set your latitude and longitude, you can use: `https://www.latlong.net/` to get them.
+
+Finally, choose an Icon set:
+
+
+
+- **Nord** Using the Nord Color Scheme and easy-to-eyes colors
+- **OneDark** (_Default one_) Using the One Dark Pro color scheme
+- **Dark** For White theme only users that want a minimalist look
+- **White** For Dark theme only users that want a minimalist look
+
+Finally just add them to the `config.js` file.
+
+```js
+ // Weather
+ weatherKey: 'InsertYourAPIKeyHere123456',
+ weatherIcons: 'OneDark',
+ weatherUnit: 'C',
+ weatherLatitude: '37.774929',
+ weatherLongitude: '-122.419418',
+```
+
+### π Colors
+
+In the `app.css` file you can change the variables for both themes (Dark and Light):
```css
/* Light theme */
+
:root {
- --accent: #4b8ec4; /* Hover color */
+ --accent: #61b0f1; /* Hover color */
--bg: #f5f5f5; /* Background color */
--sbg: #e4e6e6; /* Cards color */
--fg: #3a3a3a; /* Foreground color */
@@ -88,8 +210,9 @@ In the CSS code you can always change the variables for both themes (Dark and Li
}
/* Dark theme */
+
.darktheme {
- --accent: #4b8ec4; /* Hover color */
+ --accent: #61b0f1; /* Hover color */
--bg: #19171a; /* Background color */
--sbg: #201e21; /* Cards color */
--fg: #d8dee9; /* Foreground color */
@@ -97,115 +220,4 @@ In the CSS code you can always change the variables for both themes (Dark and Li
}
```
-
-
-
-
-### Theme Depending at the time
-
-In the `theme.js` file there's a section about changing the theme depending in the time. You have to 'Uncomment' that section to enable it:
-
-```js
-const today = new Date();
-const Hr = today.getHours();
-
-if (Hr >= 19 || Hr < 5) {
- enableDark();
-} else {
- disableDark();
-}
-```
-
-### Image Background
-
-You can set your own background image with the variable `--imgbg` and set the route to the image you want It's disable by default. If you uncomment the variable, it has by default this image:
-
-
-
-
-
-It has a black filter by default in `--imgcol`, and it'ts value is: `rgba(255, 255, 255, 0.7)` and `rgba(0, 0, 0, 0.7)` for the dark theme. You can change them and the opacity for a better experience with your image.
-
-### Greetings
-
-You can put your name and change the greetings.
-
-```js
-var name = "John Doe";
-const gree1 = "Go to Sleep! ";
-const gree2 = "Good morning! ";
-const gree3 = "Good afternoon ";
-const gree4 = "Good evening, ";
-```
-
-It'll change in order of the hour.
-
-### Weather Info
-
-For setting up the Weather widget you're going to need an API Key in: `https://openweathermap.org/`. Once you have your Key you'll need to set yourlatitude and longitude, you can use: `https://www.latlong.net/` to get them. Then you just have to fill them in the `weather.js` in the **js** folder:
-
-```js
-// Use your own key for the Weather, Get it here: https://openweathermap.org/
-const key = "XXXXXXXXXXXXXXXXXXXXXXXXXXX";
-
-setPosition();
-
-function setPosition(position) {
- // Here you can change your position
- // You can use https://www.latlong.net/ to get it! (I use San Francisco as an example)
- let latitude = 37.774929;
- let longitude = -122.419418;
-
- getWeather(latitude, longitude);
-}
-```
-
-> If you don't like to have your API Key public, you can make the repo into a private one. You can still use the Github Pages service.
-
-### Weather Icons
-
-
-
-
-
-The weather icons are based in Feather icons and I made 4 sets of them:
-
-- **Nord** Using the Nord Color Scheme and easy-to-eyes colors
-- **OneDark** (_Default one_) Using the One Dark Pro color scheme
-- **Dark** For White theme only users that want a minimalist look
-- **White** For Dark theme only users that want a minimalist look
-
-You set the icon theme changing this two lines of code in the `index.html` and `weather.js` files:
-
-- If you want the Dark icon theme, change the `OneDark` to `Dark`
-- If you want the White icon theme, change the `OneDark` to `White`
-- If you want the Nord icon theme, change the `OneDark` to `Nord`
-
-For example if I'd like to use the `Dark` icon theme:
-
-```html
-