Bento

🍱 A Clean and Simple Startpage

New Design

Wallpaper by anima_contritum

Index

• Bento
  • Features
  • Usage
    • Config
    • Home Page
    • New Tab
  • Customization
    • Links
    • Colors
    • Theme Depending at the time
    • Image Background
    • Greetings
    • Weather Info
    • Weather Icons

Features:

• 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.

• 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)

• Modular javascript files for an easy read.

• Templates Usage of doT.js as template-engine for link-cards and link-lists

• Data Decoupled data from view. Check out list-data.js

• Tested on

  • Mozilla Firefox
  • Google Chrome
  • iOS

Usage:

Config:

• Update your cerdentials and preferences in config.js
• The structure for your parent/child-list can be updated in list-data.js

As Home Page:

1. Fork this repo
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:

You can use different Add-ons/Extensions for it

• If you use Firefox: Custom New Tab Page
• If you use Chromium (Brave, Vivaldi, Chrome): Custom New Tab URL

Customization

Most of the code is using variables and is commented, It's easy to customize the project to your own, and this sections are the principal customizable elements in the Startpage. This fork relies heavily on doT.js templating. You can find them in the index.html.

Templates

<script id="buttonLinksTemplate" type="text/x-dot-template">
    {{~it :val:index}}
        <a
          href="{{=val.link}}"
          target="_blank"
          class="buttonLink__link card buttonLink__link-{{=index+1}}"
        >
          {{? val.icon}}
            <i class="buttonLink__icon" data-feather="{{=val.icon}}"></i>
          {{?}}
          {{? val.title}}
            <span>{{=val.title}}</span>
          {{?}}
        </a>
    {{~}}
</script>

Links

You can change the links (and the icons too) in the list-data.js:

const DATA = {
    "buttonLinks": [
        {
            "title": "GitHub",
            "link": "https://github.com/jwa-7",
            "icon": "github"
        }...
    ],
    "lists": {
        "parentListIcon": "arrow-up-right",
        "model":
            [
                {
                    "title": "Server",
                    "targetChildListId": "serverList",
                    "icon": "server",
                    "childListEntries": [
                        {
                            "title": "Docker",
                            "link": "https://www.docker.com/"
                        }
                    ]
                }
            ]
    }
};

The Project uses Feather icons for the icons, and you can change them in the data-feather="" property with the name of the icon in the page.

Colors

In the SCSS code you can always change the variables for both themes (Dark and Light)

/* Light theme  */
:root {
  --accent: #4b8ec4; /* Hover color */
  --bg: #f5f5f5; /* Background color */
  --sbg: #e4e6e6; /* Cards color */
  --fg: #3a3a3a; /* Foreground color */
  --sfg: #3a3a3a; /* Sceondary Foreground color */
}

/* Dark theme  */
.darktheme {
  --accent: #4b8ec4; /* Hover color */
  --bg: #19171a; /* Background color */
  --sbg: #201e21; /* Cards color */
  --fg: #d8dee9; /* Foreground color */
  --sfg: #3a3a3a; /* Secondary Foreground color */
}

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 in the config.js and change the greetings in greeting.js.

var name = YOUR_NAME;
const greeting1 = 'Go to Sleep!';
const greeting2 = 'Good morning!';
const greeting3 = 'Good afternoon';
const greeting4 = '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 config.js in the js folder. Then it gets used in weather.js:

// Use your own key for the Weather, Get it here: https://openweathermap.org/
const key = OPEN_WEATHER_MAP_API_KEY;

setPosition();

function setPosition() {
  // 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 = LOCATION_LATITUDE;
  let longitude = LOCATION_LONGITUDE;

  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:

<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>

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;
}