👋 Hey! If you're using this fork for theming, auto switching, or docker support, I'd recommend checking out Bento-next

Bento-next is my fork of Bento, entirely rewritten in Vue 3, with many more features that don't fit as well upstream. You can now host it with a Docker image, or on GitHub Pages.

👇 Index

• 👇 Index
• ✨ Features
• 🚀 Usage
  • 🏡 As Home Page
  • ➕ As New Tab
  • 🐬 In a Docker Container
    • Docker run
    • docker-compose
• 🎨 Customization
  • 👋 General: Name, Image Background and Greetings
  • 📐 Layouts: Bento, Lists and Buttons.
  • 🏷️ Buttons & Links
  • 📑 Lists & Links
  • ⛈️ Weather: Api Key, Icons and Unit
  • 💛 Colors
  • 🖌️ Custom Colors
  • 🌑 Auto change theme

✨ Features

• Easy configuration file.
• 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 app.css code.
• Icons all icons are from Lucide icons.
• Modular javascript files for an easy read.

🚀 Usage

🏡 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 and make sure you enable "Force links to open in the top frame (experimental)" in the extension's preferences page.
• If you use Chromium (Brave, Vivaldi, Chrome): Custom New Tab URL

🐬 In a Docker Container

Note: the current published docker image is built from the upstream repo.*

You can run Bento in a Docker Container, either with docker run, or with the included docker-compose file.

Docker run

1. Clone this repo to pull the config.js file: git clone https://github.com/migueravila/Bento/
2. Run the following docker command, providing the path to the config.js file, changing port mappings if needed.
3. # docker run -it -d -p 80:80 -v <config.js location>:/usr/share/nginx/html/config.js lewisdoesstuff/bento

docker-compose

1. Clone this repo with git clone https://github.com/migueravila/Bento/
2. Edit port mappings, and provide a path to the config.js file in docker-compose.yml
3. cd into the cloned repo, then run # docker-compose -d up to start.

🎨 Customization

All customization can be managed in the config.js file:

👋 General: Name, Image Background and Greetings

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.

 // General
  name: 'John',
  openInNewTab: true,
  twelveHourFormat: false,
  title: 'Bento', 

  // Theme
  theme: 'bento',
  imageBackground: false,
  imageUrl: './assets/background.jpg', // Set custom background image URL. If the page is served insecurely, you may have issues loading images from pages over https.  

  // Greetings
  greetingMorning: 'Good morning!',
  greetingAfternoon: 'Good afternoon,',
  greetingEvening: 'Good evening,',
  greetingNight: 'Go to Sleep!',

You can change the background by providing a link to an image in config.js.

📐 Layouts: Bento, Lists and Buttons.

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:

  // Layout
  bentoLayout: 'bento', // 'bento', 'lists', 'buttons'

If you want to customize all your extra buttons and lists go to 🏷️ Buttons & Links & 📑 Lists & Links sections.

🏷️ 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 and a name. If you're using the buttons layout you can customize secondButtonsContainer

  firstButtonsContainer: [
    {
      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://todoist.com',
    },
    {
      id: '4',
      name: 'Calendar',
      icon: 'calendar',
      link: 'https://calendar.google.com/calendar/r',
    },
    {
      id: '5',
      name: 'Reddit',
      icon: 'glasses',
      link: 'https://reddit.com',
    },
    {
      id: '6',
      name: 'Odysee',
      icon: 'youtube',
      link: 'https://odysee.com/',
    },
  ],

📑 Lists & 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 you can customize secondListsContainer, you can find it bellow firstListsContainer.

   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

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.

  // Weather
  weatherKey: 'InsertYourAPIKeyHere123456',
  weatherIcons: 'OneDark',
  weatherUnit: 'C',
  weatherLatitude: '37.774929',
  weatherLongitude: '-122.419418',

💛 Colors

Bento supports custom theming with several pre-included presets to choose from! Change the current theme in config.js Included themes:

• Arc
• Bento (default)
• Catppuccin -- The full set of Catppuccin colors can be added to Bento using the themes found at catppuccin/bento
• Concept-Dark
• Monokai (free)
• Nord
• Sakura
• Solarized
• Summer

	// Theme
	theme: 'bento',

🖌️ Custom Colors

You can create your own themes by adding them to the ./assets/themes/ folder, with a .css extension!
Example:

:root {

  /* Light Colors  */

  --background: #f5f5f5; /* Background color */
  --accent: #57a0d9; /* Hover color */
  --cards: #e4e6e6; /* Cards color */

  /* Fonts Color */
  --fg: #3a3a3a; /* Foreground color */
  --sfg: #494949; /* Sceondary Foreground color */

  /* Image background  */
  --imgcol: linear-gradient(
    rgba(255, 255, 255, 0.7),
    rgba(255, 255, 255, 0.7)
  ); /* Filter color */
}

.darktheme {
  /* Dark Colors  */
  
  --background: #19171a; /* Background color */
  --accent: #57a0d9; /* Hover color */
  --cards: #201e21; /* Cards color */

  /* Fonts Color */
  --fg: #d8dee9; /* Foreground color */
  --sfg: #2c292e; /* Secondary Foreground color */

  /* Image background  */
  --imgcol: linear-gradient(
    rgba(0, 0, 0, 0.85),
    rgba(0, 0, 0, 0.85)
  ); /* Filter color */
}

🌑 Auto change theme

The theme can be automatically changed by the OS' current theme, set hours, or following sunrise/sunset. that you can change in the config.js file:

  // Autochange
  autoChangeTheme: true,

  // Autochange 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
  
  // Autochange automatically based on location (sunrise/sunset). Openweathermap API key required.
  changeThemeByLocation: false,