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

📝 Updated new documentation

Browse Source
This commit is contained in:
Miguel R. Ávila 2021-07-20 22:31:19 -05:00
parent 7ff381c334
commit dcb87107f7
6 changed files with 172 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.github/FUNDING.yml vendored
View File

@ -1 +0,0 @@
ko_fi: miguelravila

310
README.md
View File

@ -1,32 +1,29 @@
<div align="center">
<h1>Bento</h1>
<b>🍱 A Clean and Simple Startpage</b>
<b>🍱 Minimalist, elegant and simple startpage inspired by the Bento box!</b>
</div>
<p align="center">
<img src="https://github.com/MiguelRAvila/Bento/blob/master/assets/Header.png">
</p>
![image](assets/img/Header.png)
> Wallpaper by [anima_contritum](https://www.reddit.com/user/anima_contritum)
[!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](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
<a
href="https://github.com/"
target="blank"
class="buttonLink__link card buttonLink__link-1"
>
<i class="buttonLink__icon" data-feather="github"></i>
</a>
```
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 backgriund by substituting the `background.jpg` file in `assets` folder.
![](assets/img/previewbg.png)
### 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:
![](assets/img/icons.png)
- **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: '15fe26a8e22e4783054e3273824c5e7b',
weatherIcons: 'OneDark',
weatherUnit: 'C',
weatherLatitude: '37.774929',
weatherLongitude: '-122.419418',
```
### Colors
In the CSS code you can always change the variables for both themes (Dark and Light)
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
}
```
<p align="center">
<img src="https://github.com/MiguelRAvila/Bento/blob/master/assets/SubHeader.png">
</p>
### 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:
<p align="center">
<img src="https://github.com/MiguelRAvila/Bento/blob/master/assets/previewbg.png">
</p>
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
<p align="center">
<img src="https://github.com/MiguelRAvila/Bento/blob/master/assets/previewico.png">
</p>
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
<div class="weather-icon">
<img src="icons/OneDark/unknown.png" />
</div>
<!-- Change it to: -->
<div class="weather-icon">
<img src="icons/Dark/unknown.png" />
</div>
```
```js
function displayWeather() {
iconElement.innerHTML = `<img src="icons/OneDark/${weather.iconId}.png"/>`;
tempElement.innerHTML = `${weather.temperature.value}°<span class="darkfg">${tempUnit}</span>`;
descElement.innerHTML = weather.description;
}
//Change it to:
function displayWeather() {
iconElement.innerHTML = `<img src="icons/Dark/${weather.iconId}.png"/>`;
tempElement.innerHTML = `${weather.temperature.value}°<span class="darkfg">${tempUnit}</span>`;
descElement.innerHTML = weather.description;
}
```
![](assets/img/subheader.png)

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 599 KiB

BIN
assets/img/header.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 670 KiB

6
assets/js/weather.js
View File

@ -19,12 +19,8 @@ const key = `${CONFIG.weatherKey}`;
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);
getWeather(CONFIG.weatherLatitude, CONFIG.weatherLongitude);
}
// Get the Weather data

15
config.js
View File

@ -15,17 +15,22 @@ const CONFIG = {
imageBackground: false,
openInNewTab: true,
// Weather
weatherKey: '15fe26a8e22e4783054e3273824c5e7b',
weatherIcons: 'OneDark',
weatherUnit: 'C',
// Greetings
greetingMorning: 'Good morning!',
greetingAfternoon: 'Good afternoon,',
greetingEvening: 'Good evening,',
greetingNight: 'Go to Sleep!',
// Weather
weatherKey: '15fe26a8e22e4783054e3273824c5e7b',
weatherIcons: 'OneDark', // 'Nord', 'Dark', 'White'
weatherUnit: 'C',
weatherLatitude: '37.774929',
weatherLongitude: '-122.419418',
// ┌─┐┌─┐┬─┐┌┬┐┌─┐
// │ ├─┤├┬┘ ││└─┐
// └─┘┴ ┴┴└──┴┘└─┘