{"id":13425848,"url":"https://github.com/migueravila/Bento","last_synced_at":"2025-03-15T20:31:29.117Z","repository":{"id":37685965,"uuid":"287464616","full_name":"migueravila/Bento","owner":"migueravila","description":"🍱 The minimalist, elegant and hackable startpage.","archived":false,"fork":false,"pushed_at":"2024-05-19T14:25:38.000Z","size":15217,"stargazers_count":1920,"open_issues_count":24,"forks_count":2450,"subscribers_count":15,"default_branch":"master","last_synced_at":"2024-05-21T18:51:14.447Z","etag":null,"topics":["bento","feather-icons","newtab","newtabpage","open-source","startpage","tab"],"latest_commit_sha":null,"homepage":"https://migueravila.github.io/Bento/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/migueravila.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"License","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-14T06:50:27.000Z","updated_at":"2024-07-22T23:28:44.315Z","dependencies_parsed_at":"2023-02-16T00:00:47.714Z","dependency_job_id":"2b29bb64-8537-4e56-89b1-f1b0d389b03b","html_url":"https://github.com/migueravila/Bento","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/migueravila%2FBento","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/migueravila%2FBento/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/migueravila%2FBento/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/migueravila%2FBento/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/migueravila","download_url":"https://codeload.github.com/migueravila/Bento/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243790939,"owners_count":20348378,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bento","feather-icons","newtab","newtabpage","open-source","startpage","tab"],"created_at":"2024-07-31T00:01:20.348Z","updated_at":"2025-03-15T20:31:24.108Z","avatar_url":"https://github.com/migueravila.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","open-source"],"sub_categories":[],"readme":"![image](assets/img/header.png)\n\n\u003cbr /\u003e\n\n## 👇 Index\n- [👇 Index](#-index)\n- [✨ Features](#-features)\n- [🚀 Usage](#-usage)\n  - [🏡 As Home Page](#-as-home-page)\n  - [➕ As New Tab](#-as-new-tab)\n  - [🐳 In a Docker Container](#-in-a-docker-container)\n    - [Docker run](#docker-run)\n    - [docker-compose](#docker-compose)\n- [🎨 Customization](#-customization)\n  - [👋 General: Name, Image Background and Greetings](#-general-name-image-background-and-greetings)\n  - [📐 Layouts: Bento, Lists and Buttons.](#-layouts-bento-lists-and-buttons)\n  - [🏷️ Buttons \\\u0026 Links](#️-buttons--links)\n  - [📑 Lists \\\u0026 Links](#-lists--links)\n  - [⛈️ Weather: Api Key, Icons and Unit](#️-weather-api-key-icons-and-unit)\n  - [💛 Colors](#-colors)\n  - [🌑 Auto change theme](#-auto-change-theme)\n\n## ✨ Features\n\n- **Easy configuration** file.\n- **Dark/Light** mode, you can toggle it and will be saved in local storage.\n- **Layouts!** to customize your experience following your workflow.\n- **Clock and Date** format can be set to 24 hour (default) or 12 hour.\n- **Greetings** are easy to modify.\n- **Variables** for custom colors and font sizes in the `app.css` code.\n- All **icons** are from [Lucide icons](https://lucide.dev).\n- **Modular** javascript files for an easy read.\n\n## 🚀 Usage\n\n### 🏡 As Home Page\n\n1. Fork this repo\n2. Enable the Github Pages service `Settings → GitHub Pages → Source [master branch] → Save`\n3. Set it as Home Page:\n   - Click the menu button. and select Options. Preferences.\n   - Click the Home panel.\n   - Click the menu next to Homepage and new windows and choose to show custom URLs and add your `Github Pages link`\n\n### ➕ As New Tab\n\nYou can use different Add-ons/Extensions for it\n\n- If you use Firefox: [Custom New Tab Page](https://addons.mozilla.org/en-US/firefox/addon/custom-new-tab-page/?src=search) and make sure you enable \"Force links to open in the top frame (experimental)\" in the extension's preferences page.\n- If you use Chromium (Brave, Vivaldi, Chrome): [Custom New Tab URL](https://chrome.google.com/webstore/detail/custom-new-tab-url/mmjbdbjnoablegbkcklggeknkfcjkjia)\n\n### 🐳 In a Docker Container\n\nYou can run Bento in a Docker Container, either with `docker run`, or with the included `docker-compose` file.\n\n#### Docker run\n 1. Clone this repo to pull the `config.js` file: `git clone https://github.com/migueravila/Bento/`\n 2. Run the following `docker` command, providing the path to the `config.js` file, changing port mappings if needed.\n 3. `# docker run -it -d -p 80:80 -v \u003cconfig.js location\u003e:/usr/share/nginx/html/config.js lewisdoesstuff/bento`\n\n#### docker-compose\n  1. Clone this repo with `git clone https://github.com/migueravila/Bento/`\n  2. Edit port mappings, and provide a path to the `config.js` file in `docker-compose.yml`\n  3. `cd` into the cloned repo, then run `# docker-compose -d up` to start. \n\n## 🎨 Customization\n\nAll customization can be managed in the `config.js` file:\n\n### 👋 General: Name, Image Background and Greetings\n\nTo 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`.\n\n```js\n // General\n  name: 'John',\n  imageBackground: false,\n  openInNewTab: true,\n\n  // Greetings\n  greetingMorning: 'Good morning!',\n  greetingAfternoon: 'Good afternoon,',\n  greetingEvening: 'Good evening,',\n  greetingNight: 'Go to Sleep!',\n\n```\n\n\u003e You can change the background by substituting the `background.jpg` file in `assets` folder.\n\n![](assets/img/backgroundImage.png)\n\n### 📐 Layouts: Bento, Lists and Buttons.\n\nBento has three different layouts `bento`, `lists` \u0026 `buttons`. It allows you to customise 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:\n\n```js\n  // Layout\n  bentoLayout: 'bento', // 'bento', 'lists', 'buttons'\n\n```\n\nIf you want to customize all your extra buttons and lists go to [🏷️ Buttons \u0026 Links](#️-buttons--links) \u0026 [📑 Lists \u0026 Links](#-lists--links) sections.\n\n![](assets/img/bentoLayouts.png)\n\n### 🏷️ Buttons \u0026 Links\n\nTo 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`\n\n```js\n  firstButtonsContainer: [\n    {\n      id: '1',\n      name: 'Github',\n      icon: 'github',\n      link: 'https://github.com/',\n    },\n    {\n      id: '2',\n      name: 'Mail',\n      icon: 'mail',\n      link: 'https://mail.protonmail.com/',\n    },\n    {\n      id: '3',\n      name: 'Todoist',\n      icon: 'trello',\n      link: 'https://todoist.com',\n    },\n    {\n      id: '4',\n      name: 'Calendar',\n      icon: 'calendar',\n      link: 'https://calendar.google.com/calendar/r',\n    },\n    {\n      id: '5',\n      name: 'Reddit',\n      icon: 'glasses',\n      link: 'https://reddit.com',\n    },\n    {\n      id: '6',\n      name: 'Odysee',\n      icon: 'youtube',\n      link: 'https://odysee.com/',\n    },\n  ],\n```\n\n### 📑 Lists \u0026 Links\n\nThe 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`.\n\n```js\n   firstlistsContainer: [\n    {\n      icon: 'music',\n      id: '1',\n      links: [\n        {\n          name: 'Inspirational',\n          link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',\n        },\n        {\n          name: 'Classic',\n          link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',\n        },\n        {\n          name: 'Oldies',\n          link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',\n        },\n        {\n          name: 'Rock',\n          link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',\n        },\n      ],\n    },\n    {\n      icon: 'coffee',\n      id: '2',\n      links: [\n        {\n          name: 'Linkedin',\n          link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',\n        },\n        {\n          name: 'Dribbble',\n          link: 'https://www.linkedin.com',\n        },\n        {\n          name: 'Trello',\n          link: 'https://www.trello.com',\n        },\n        {\n          name: 'Slack',\n          link: 'https://www.slack.com',\n        },\n      ],\n    },\n  ],\n```\n\n### ⛈️ Weather: Api Key, Icons and Unit\n\nFor 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. \n\nFinally, choose an Icon set:\n\n![](assets/img/icons.png)\n\n- **Nord** Using the Nord Color Scheme and easy-to-eyes colors\n- **OneDark** (_Default one_) Using the One Dark Pro color scheme\n- **Dark** For White theme only users that want a minimalist look\n- **White** For Dark theme only users that want a minimalist look\n\nFinally just add them to the `config.js` file.\n\n```js\n  // Weather\n  weatherKey: 'InsertYourAPIKeyHere123456',\n  weatherIcons: 'OneDark',\n  weatherUnit: 'C',\n  weatherLatitude: '37.774929',\n  weatherLongitude: '-122.419418',\n```\n\n### 💛 Colors\n\nIn the `app.css` file you can change the variables for both themes (Dark and Light):\n\n```css\n/* Light theme  */\n\n:root {\n  --accent: #61b0f1; /* Hover color */\n  --bg: #f5f5f5; /* Background color */\n  --sbg: #e4e6e6; /* Cards color */\n  --fg: #3a3a3a; /* Foreground color */\n  --sfg: #3a3a3a; /* Sceondary Foreground color */\n}\n\n/* Dark theme  */\n\n.darktheme {\n  --accent: #61b0f1; /* Hover color */\n  --bg: #19171a; /* Background color */\n  --sbg: #201e21; /* Cards color */\n  --fg: #d8dee9; /* Foreground color */\n  --sfg: #3a3a3a; /* Secondary Foreground color */\n}\n```\n\n### 🌑 Auto change theme\n\nThe theme can be automatically changed by the OS' current theme or personalized hours\nthat you can change in the `config.js` file:\n\n```js\n  // Autochange\n  autoChangeTheme: true,\n\n  // Autochange by OS\n  changeThemeByOS: false, \n\n  // Autochange by hour options (24hrs format, string must be in: hh:mm)\n  changeThemeByHour: true, // If it's true, it will use the values below:\n  hourDarkThemeActive: '18:30', // Turn on the dark theme after this hour\n  hourDarkThemeInactive: '07:00', // Turn off the dark theme after this hour and before the above hour\n```\n\n![](assets/img/darkMode.png)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmigueravila%2FBento","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmigueravila%2FBento","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmigueravila%2FBento/lists"}