{"id":13752684,"url":"https://github.com/lewisdoesstuff/bento-next","last_synced_at":"2025-04-10T21:39:14.335Z","repository":{"id":140537006,"uuid":"472897282","full_name":"lewisdoesstuff/bento-next","owner":"lewisdoesstuff","description":"A fork of Bento written in Vue 3 with TailwindCSS and Typescript","archived":false,"fork":false,"pushed_at":"2025-04-04T15:57:51.000Z","size":30732,"stargazers_count":56,"open_issues_count":0,"forks_count":60,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-04T16:42:57.194Z","etag":null,"topics":["bento","homepage","startpage","tailwind","typescript","vue"],"latest_commit_sha":null,"homepage":"https://dash.lew.ooo","language":"Vue","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/lewisdoesstuff.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":"2022-03-22T18:52:28.000Z","updated_at":"2025-04-04T15:57:38.000Z","dependencies_parsed_at":"2024-05-19T12:30:52.388Z","dependency_job_id":null,"html_url":"https://github.com/lewisdoesstuff/bento-next","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/lewisdoesstuff%2Fbento-next","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lewisdoesstuff%2Fbento-next/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lewisdoesstuff%2Fbento-next/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lewisdoesstuff%2Fbento-next/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lewisdoesstuff","download_url":"https://codeload.github.com/lewisdoesstuff/bento-next/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248305305,"owners_count":21081555,"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","homepage","startpage","tailwind","typescript","vue"],"created_at":"2024-08-03T09:01:09.361Z","updated_at":"2025-04-10T21:39:14.325Z","avatar_url":"https://github.com/lewisdoesstuff.png","language":"Vue","funding_links":[],"categories":["App Theming"],"sub_categories":["Firefox"],"readme":"# 🖥 Bento-next\n\n## An elegant dashboard, written with Vue, Tailwind, and Typescript\u003c!-- omit from toc --\u003e\n\n**Note:** If you're upgrading from Bento-next v1, you'll need to pull the new `config.ts`\n\n## [Demo](https://dash.lew.ooo)\n\n![image](assets/header.png)\n\n\u003cbr /\u003e\n\n[Upstream](https://github.com/migueravila/Bento)\n\n## :point_down: Index\n\n- [🖥 Bento-next](#-bento-next)\n  - [Demo](#demo)\n  - [:point\\_down: Index](#point_down-index)\n  - [:sparkles: Features](#sparkles-features)\n  - [:rocket: Usage](#rocket-usage)\n    - [:dolphin: In a Docker Container](#dolphin-in-a-docker-container)\n      - [docker run](#docker-run)\n      - [docker-compose](#docker-compose)\n    - [:cloud: On GitHub Pages](#cloud-on-github-pages)\n    - [:robot: On Vercel](#robot-on-vercel)\n    - [:floppy\\_disk: With a web server (nginx, apache, etc...)](#floppy_disk-with-a-web-server-nginx-apache-etc)\n    - [:lock: SSL](#lock-ssl)\n  - [:wrench: Customization](#wrench-customization)\n    - [:hammer\\_and\\_wrench: General](#hammer_and_wrench-general)\n    - [:clock5: Clock](#clock5-clock)\n    - [:art: Themes](#art-themes)\n    - [🗚 Fonts](#-fonts)\n    - [:mag: Search Bar](#mag-search-bar)\n    - [:wave: Greetings](#wave-greetings)\n    - [:triangular\\_ruler: Layouts](#triangular_ruler-layouts)\n    - [:cloud\\_with\\_rain: Weather](#cloud_with_rain-weather)\n      - [Setting the OpenWeatherMap API key](#setting-the-openweathermap-api-key)\n    - [:moon: Auto change theme](#moon-auto-change-theme)\n    - [:card\\_file\\_box: Buttons \\\u0026 Lists](#card_file_box-buttons--lists)\n    - [:stop\\_sign: Disabling components](#stop_sign-disabling-components)\n  - [:fork\\_and\\_knife: Changes and Contributing](#fork_and_knife-changes-and-contributing)\n    - [:paintbrush: Custom Themes](#paintbrush-custom-themes)\n    - [:open\\_file\\_folder: Contributing Changes](#open_file_folder-contributing-changes)\n    - [:keyboard: Development Environment](#keyboard-development-environment)\n      - [Prerequisites:](#prerequisites)\n      - [Setup:](#setup)\n      - [Building:](#building)\n        - [Docker:](#docker)\n        - [With an HTTP server (e.g. NGINX):](#with-an-http-server-eg-nginx)\n        - [GitHub Pages:](#github-pages)\n\n## :sparkles: Features\n\n- **Themes**: Bento-next ships with 9 included themes, such as Catppuccin, Nord, Arc, and Solarized, each with their own light/dark palletes.\n- **Local storage**: Using someone else's instance? Change the theme and name for you and you only with the theme menu, or by clicking the name text.\n- **Easy configuration**: with the included `config.ts` file.\n- **Dark/Light**: toggleable through your browser or [automatically](#moon-auto-change-theme).\n- **Layouts**: adjust the layout of Bento to fit your needs and workflow.\n- **Clock and Date**: 24/12 hour, with an optional animated separator.\n- **Icons**: Bento-next supports a huge array of icons from [FontAwesome](https://fontawesome.com).\n\n## :rocket: Usage\n\nBento-next currently supports running in a Docker container (recommended), on GitHub Pages, Vercel, or hosted with your own web server.\n\n### :dolphin: 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\n 1. Clone this repo to pull the config.ts file: `git clone https://github.com/lewisdoesstuff/bento-next/`\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:8080 -v \u003cconfig.ts location\u003e:/usr/share/nginx/html/config.ts lewisdoesstuff/bento-next`\n\n#### docker-compose\n\n  1. Clone this repo with `git clone https://github.com/lewisdoesstuff/bento-next/`\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### :cloud: On GitHub Pages\n\nBento supports being hosted through GitHub Pages using a workflow action\n\n   1. Fork this repo from GitHub.\n   2. Clone your fork with `git clone https://github.com/{YOUR_GITHUB_ACCOUNT}/{FORK_NAME}`.\n   3. Make any changes to the config you require.\n   4. Edit `./github/pages.yml`, changing `lewisdoesstuff` to your GitHub username.\n   5. If the name of your repo is not `bento-next`, edit `package.json`, changing the `base` path for `build-pages` (line 7) to the name of your repo, including the leading and trailing `/`\n   6. Create a new commit and push your changes to `origin/master`.\n   7. Once pushed, you should see the \"Build and Publish to Pages\" workflow running under the Actions tab. (I'd recommend also removing the Docker build workflow while here.)\n   8. Create a new github page with `gh-pages` branch.\n   9. Access your Bento-next install at `https://{YOUR_GITHUB_ACCOUNT}.github.io/{FORK_NAME}`\n\n### :robot: On Vercel\n\nBento can also be hosted easily on [vercel](https://vercel.com/dashboard).\n\n  1. Fork this repo from GitHub.\n  2. Clone your fork with `git clone https://github.com/{YOUR_GITHUB_ACCOUNT}/{FORK_NAME}`.\n  3. Make any changes to the config you require and push the changes.\n  4. Add new project on Vercel.\n  5. Connect your GitHub account and Import your Forked Repo.\n  6. Change framework preset to Vue.js and Click on Deploy.\n  7. Access your deployment at `https://{VERCEL_PROJECT_NAME}-{VERCEL_USER_NAME}.vercel.app`\n\n### :floppy_disk: With a web server (nginx, apache, etc...)\n\n  1. Clone this repo with `git clone https://github.com/lewisdoesstuff/bento-next/`\n  2. `cd bento-next` to enter the cloned repo.\n  3. `npm install` to install node modules.\n  4. `npm run build` to build the app.\n  5. Copy the files placed in `./dist` to your webservers html directory. eg: `cp ./dist/* /usr/share/nginx/html -r`\n\n### :lock: SSL\n\nBento-next doesn't support SSL (https) connections by default, serving the page over port 8080.\nIf you'd like to add SSL support (recommended), I recommend using a reverse-proxy such as [NGINX Proxy Manager](https://github.com/NginxProxyManager/nginx-proxy-manager) to add your SSL certificate to the host.\n\n## :wrench: Customization\n\nAll settings can be managed in the `config.ts` file:\n\n### :hammer_and_wrench: General\n\nChange the default name (displayed to all users), choose if links open in a new tab, and change the window title.\n\n```js\n  // General\n  name: \"John\",\n  openInNewTab: true,\n  title: \"Bento\",\n```\n\n### :clock5: Clock\n\nAdjust 12/24hr format, or enable an animated separator.\n\n```js\n  // Clock\n  twelveHourFormat: false,\n  flashSeparator: false,\n```\n\n### :art: Themes\n\nBento-next supports 9 pre-included themes, if you'd like to add more, please see the steps at [Custom Themes](#paintbrush-custom-themes)\nIncluded themes:\n  \n- [Arc](https://github.com/horst3180/arc-theme)\n- Bento (default)\n- [Catppuccin (Frappe, Macchiato, Mocha)](https://github.com/catppuccin/catppuccin)\n- [Concept-Dark](https://www.deviantart.com/zb652/art/Concept-Dark-885878180)\n- [Monokai (free)](https://monokai.pro/)\n- [Nord](https://www.nordtheme.com/)\n- Sakura\n- [Solarized](https://ethanschoonover.com/solarized/)\n- [Summer](https://github.com/JhonnyRice/summer)\n\nYou're also able to set a custom background image in the config. You can either place the file in `./src/assets/images/` and provide the file name, or provide a link to the image.\n\n```js\n  // Theme\n  theme: \"bento\",\n\n  // Place a background image in ./src/assets/images/ and provide the file name.\n  // Alternatively, provide a URL to an image. If the page is served over https, you may have issues loading images from insecure origins.\n  // Set to \"\" to disable.\n  backgroundImage: \"\", \n  themes: [\n    // List of installed themes, add your own themes in ./src/assets/css/themes and include it in the array below.\n    \"arc\",\n    \"bento\",\n    \"catppuccin-frappe\",\n    \"catppuccin-macchiato\",\n    \"catppuccin-mocha\",\n    \"conceptdark\", // dark mode only\n    \"monokai\",\n    \"nord\",\n    \"sakura\",\n    \"solarized\",\n  ],\n```\n\n### 🗚 Fonts\n\nBento-next supports custom fonts, either locally installed, or from Google Fonts!\n\nTo configure, edit the `font` object in the config:\n\n```js\n  // Font Family\n  font: {\n    // 'google' or 'local'\n    source: 'google',\n    // Font name, e.g. 'Roboto' (case sensitive)\n    name: 'Overpass',\n  },\n```\n\n### :mag: Search Bar\n\nBento-next includes a search bar by default. You can change the search engine and placeholder text as below\n\n```js\n  // Search Bar\n  searchBar: true,\n  searchEngine: \"google\", // google, ddg\n  barPlaceholder: \"\", // if blank, use search engine name. Set to ' ' for no placeholder.\n  autoFocusBar: true,\n```\n\n### :wave: Greetings\n\nEdit the displayed greetings for morning, afternoon, evening, and night.\n\n```js\n  // Greetings\n  greetingMorning: \"Good morning,\",\n  greetingAfternoon: \"Good afternoon,\",\n  greetingEvening: \"Good evening,\",\n  greetingNight: \"Sweet dreams,\",\n```\n\n### :triangular_ruler: Layouts\n\nBento has three different layouts `bento`, `lists`, and `buttons`. `Bento` is a split with buttons on the left and lists on the right. `Lists` swaps the buttons out for another list container, and `buttons` does the same with buttons.\n\n```js\n  // Layout\n  bentoLayout: 'bento', // 'bento', 'lists', 'buttons'\n```\n\nIf you want to customize all your extra buttons and lists go to [:card_file_box: Buttons \u0026 Lists](#card_file_box-buttons--lists)\n\n### :cloud_with_rain: Weather\n\nBento provides a weather widget that pulls data from OpenWeatherMap. To use this, you'll need to add an API key to the settings. You can generate a free API key from [OpenWeatherMap](https://openweathermap.org/api). You'll need a \"Current Weather Data\" key.\n\nYou can provide a default lat/long, or have Bento automatically pull your location from your browsers location data.\nIf this isn't available, or you deny location permissions, Bento will fall back to using the lat/long set in the config.\n\nFinally, choose an icon set:\n\n- **OneDark** (_Default_) Using the One Dark Pro color scheme\n- **Nord** Using the Nord 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\n```js\n  // Weather\n  weatherKey: import.meta.env.VITE_API_KEY, // Set your OpenWeatherMap key in .env - Move the included .env.example to .env\n  weatherIcons: \"OneDark\", // 'Onedark', 'Nord', 'Dark', 'White'\n  weatherUnit: \"C\", // 'F', 'C'\n  language: \"en\", // More languages in https://openweathermap.org/current#multi\n\n  trackLocation: true, // Request location from the browser. If false, or location is denied, use the coordinates below.\n  defaultLatitude: \"37.775\",\n  defaultLongitude: \"-122.419\",\n```\n\n#### Setting the OpenWeatherMap API key\n\nTo set the OpenWeatherMap API key, you'll need to create a `.env` file.  \nBento-next includes a `.env.example` file, just move this to `.env`, and add your API key inside.\n\n### :moon: Auto change theme\n\nBento-next can automatically swap your theme (light/dark) using 1 of 4 modes\n\n```js\n  // Automatic theme switching:\n  // \"system\" - Switches based on OS color preference\n  // \"location\" - Switches based on local sunrise/sunset (requires OpenWeatherMap API key)\n  // \"preset\" - Switches based on set hours\n  // \"none\" - No automatic switching\n  autoTheme: \"system\",\n```\n\nIf you're using `'preset'` as the theme switching mode, you can set the hours to switch below\n\n```js\n  // If autoTheme is set to \"preset\", set the hours below.\n  darkModeOnTime: \"18:30\",\n  lightModeOnTime: \"07:00\",\n```\n\n### :card_file_box: Buttons \u0026 Lists\n\nEvery entry in the buttons or lists containers are editable through here! A breakdown of the object is below.\n\n```js\n  // Buttons\n  buttons: [\n    // First buttons group\n    // If you're using the 'bento' layout, this is the only group that will be used.\n    [\n      {\n        name: \"Github\", // set the name of the card\n        icon: \"fab-github\", // provide a FontAwesome icon name. Regular icons (fa-) don't require a prefix, while FA-Brands icons must be prefixed with \"fab-\"\n        url: \"https://github.com/\", // provide a link to the page.\n      },\n    ]\n  ]\n```\n\n```js\n  // Lists\n  lists: [\n    // First list group\n    // If you're using the 'bento' layout, this is the only group that will be used.\n    [\n      {\n        icon: \"music\", // Icon for the list to use. The same as the buttons.\n        links: [\n          {\n            name: \"Inspirational\", // Display text for the link\n            url: \"https://www.youtube.com/watch?v=dQw4w9WgXcQ\", // URL to the page\n          },\n          {\n            name: \"Classic\",\n            url: \"https://www.youtube.com/watch?v=dQw4w9WgXcQ\",\n          },\n          {\n            name: \"Oldies\",\n            url: \"https://www.youtube.com/watch?v=dQw4w9WgXcQ\",\n          },\n          {\n            name: \"Rock\",\n            url: \"https://www.youtube.com/watch?v=dQw4w9WgXcQ\",\n          },\n        ],\n      }\n    ]\n```\n\n### :stop_sign: Disabling components\n\nIf you don't want to have a specific component enabled, you can disable it in `config.js`  \nTo disable, just set the component you'd like to remove to `false`.  \nPlease note disabling some components won't scale the others to fill in the gaps, but the layout should be usable. Disabling the theme button requires you to set the theme in `config.js`.\n\n```js\n  // Set any of the below options to false to disable drawing the component on the page.\n  // If themeButton is set to false, the theme can only be set in this file.\n  // Disabling the weather component may cause issues with location-based light/dark switching.\n  componentsEnabled: {\n    searchBar: true,\n    themeButton: true,\n    clock: true,\n    greeter: true,\n    date: true,\n    weather: true\n  }\n```\n\n## :fork_and_knife: Changes and Contributing\n\n### :paintbrush: Custom Themes\n\nBento can be expanded with user-defined themes! To create one, add a new .css file to `./public/css/themes/`, then add it to the array of themes in `config.ts`.\nIf you've got a theme you'd like to see included, please open a PR, or open an issue with a link to the color palette.\nExample:\n\n```css\n:root {\n  /* Light Colors  */\n\n  --background: #f5f5f5; /* Background color */\n  --accent: #57a0d9; /* Hover color */\n  --cards: #e4e6e6; /* Cards color */\n\n  /* Fonts Color */\n  --fg: #3a3a3a; /* Foreground color */\n  --sfg: #494949; /* Sceondary Foreground color */\n\n  /* Image background  */\n  --imgcol: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)); /* Filter color */\n\n  /* Dark Colors  */\n\n  --darkbackground: #19171a; /* Background color */\n  --darkaccent: #57a0d9; /* Hover color */\n  --darkcards: #201e21; /* Cards color */\n\n  /* Fonts Color */\n  --darkfg: #d8dee9; /* Foreground color */\n  --darksfg: #2c292e; /* Secondary Foreground color */\n\n  /* Image background  */\n  --darkimgcol: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)); /* Filter color */\n}\n```\n\n### :open_file_folder: Contributing Changes\n\nI'd be thrilled to hear about any changes that you've made to the project!  \nIf you feel that these would work as a default feature, please submit a PR with your changes!  \nFor anything that you feel may be better suited to the upstream project, please port your changes to vanilla HTML/JS and open a PR on [migueravila/Bento](https://github.com/migueravila/Bento).\n\nWhile I don't have a specific contributing guide, or code style to follow, please ensure your changes follow the general style of the program, and respect any existing features (no breaking changes, please!)  \nPlease ensure that any PR's don't contain changes to the default `config.js` values, unless you need to add another. Please also ensure to remove your OpenWeatherMap API key!\n\n### :keyboard: Development Environment\n\nTo make changes to Bento-next, you'll need to follow a few steps to set up your development environment.\nFor this, we'll assume a Linux system, but this will work the same on Windows with WSL.\n\n#### Prerequisites:\n\n- Node JS\n- NPM\n- A text editor (VSCode is recommended.)\n\n#### Setup:\n\nSetting up a working dev environment is fairly straightforward with the below steps. These are platform agnostic, so you shouldn't need to make any changes depending on platform.\n\n 1. Clone the repo with `git clone https://github.com/lewisdoesstuff/bento-next`, or your preffered Git client.\n 2. `cd bento-next` to enter the cloned repo.\n 3. Install dependencies with `npm install`\n 4. Open the folder in your preffered text editor to begin developing!\n 5. Start the dev server with `npm run dev`.\n 6. Connect to the local instance at `https://localhost:5173`.\n\n#### Building:\n\nOnce you've made your changes, you'll want to build for production to remove any unused CSS (a lot), and generally speed up the site.\n\n##### Docker:\n\nDocker is the recommended way to run Bento-next, and building a docker container with your changes is very straightforward!\nYou'll need `docker` installed to build and run the image.\n\n  1. Ensure you're in the repo's root directory\n  2. Build the docker container with `docker build . -t bento-next`\n  3. Wait for the build to complete, then run the image in a new container with `docker run -it -d -p 8080:8080 --rm --name bento-next bento-next`. You can edit port mappings (left side port), or remove the `-d` flag if you'd like to see the output of the build and HTTP server.\n\n##### With an HTTP server (e.g. NGINX):\n\nYou're able to run the production build of Bento-next with any HTTP server, as you don't need Node installed to host the page.\nThis isn't the recommended way to run Bento, and I won't be able to offer support for web server-specific issues.\n\n  1. Build Bento-next for production with `npm run build`.\n  2. Wait for the script to complete, then `cd dist/` to enter the output folder.\n  3. Copy the files to your webservers HTML directory, or point a web server at the `./dist` folder.\n  4. Start your web server, and access Bento-next over your assigned port.\n\n##### GitHub Pages:\n\nIf you're hosting Bento-next on GitHub Pages, this will be automatically built and published once you push your changes to `master`!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flewisdoesstuff%2Fbento-next","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flewisdoesstuff%2Fbento-next","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flewisdoesstuff%2Fbento-next/lists"}