Merge branch 'dev'

lewisdoesstuff · Oct 20, 2023 · 53610da · 53610da
2 parents d5e2d96 + e69b748
commit 53610da
Show file tree

Hide file tree

Showing 7 changed files with 184 additions and 134 deletions.
diff --git a/README.md b/README.md
@@ -30,6 +30,7 @@
     - [:hammer\_and\_wrench: General](#hammer_and_wrench-general)
     - [:clock5: Clock](#clock5-clock)
     - [:art: Themes](#art-themes)
+    - [🗚 Fonts](#-fonts)
     - [:mag: Search Bar](#mag-search-bar)
     - [:wave: Greetings](#wave-greetings)
     - [:triangular\_ruler: Layouts](#triangular_ruler-layouts)
@@ -183,6 +184,22 @@ You're also able to set a custom background image in the config. You can either
   ],
 ```
 
+### 🗚 Fonts
+
+Bento-next supports custom fonts, either locally installed, or from Google Fonts!
+
+To configure, edit the `font` object in the config:
+
+```js
+  // Font Family
+  font: {
+    // 'google' or 'local'
+    source: 'google',
+    // Font name, e.g. 'Roboto' (case sensitive)
+    name: 'Overpass',
+  },
+```
+
 ### :mag: Search Bar
 
 Bento-next includes a search bar by default. You can change the search engine and placeholder text as below

diff --git a/assets/header.png b/assets/header.png
diff --git a/config.ts b/config.ts
@@ -5,76 +5,84 @@
 //
 //    https://github.com/migueravila/Bento - upstream
 
-import { Config } from "./src/types/config";
+import { Config } from './src/types/config';
 
 // Bento-next config
 // Use an editor with Typescript support to get autocomplete and validity checking!
 export const config: Config = {
   // General
-  name: "John",
+  name: 'John',
   openInNewTab: true,
-  title: "Bento",
+  title: 'Bento',
 
   // Clock
   twelveHourFormat: false,
   flashSeparator: false,
 
+  // Font Family
+  font: {
+    // 'google' or 'local'
+    source: 'google',
+    // Font name, e.g. 'Roboto' (case sensitive)
+    name: 'Overpass',
+  },
+
   // Theme
-  theme: "bento",
+  theme: 'bento',
 
   // Place a background image in ./src/assets/images/ and provide the file name.
   // Alternatively, provide a URL to an image. If the page is served over https, you may have issues loading images from insecure origins.
   // Set to "" to disable.
-  backgroundImage: "", 
+  backgroundImage: '',
   themes: [
     // List of installed themes, add your own themes in ./src/assets/css/themes and include it in the array below.
-    "arc",
-    "bento",
-    "catppuccin-frappe",
-    "catppuccin-macchiato",
-    "catppuccin-mocha",
-    "conceptdark", // dark mode only
-    "monokai",
-    "nord",
-    "sakura",
-    "solarized",
+    'arc',
+    'bento',
+    'catppuccin-frappe',
+    'catppuccin-macchiato',
+    'catppuccin-mocha',
+    'conceptdark', // dark mode only
+    'monokai',
+    'nord',
+    'sakura',
+    'solarized',
   ],
 
   // Search Bar
   searchBar: true,
-  searchEngine: "google", // google, ddg
-  barPlaceholder: "", // if blank, use search engine name. Set to ' ' for no placeholder.
+  searchEngine: 'google', // google, ddg
+  barPlaceholder: '', // if blank, use search engine name. Set to ' ' for no placeholder.
   autoFocusBar: true,
 
   // Greetings
-  greetingMorning: "Good morning,",
-  greetingAfternoon: "Good afternoon,",
-  greetingEvening: "Good evening,",
-  greetingNight: "Sweet dreams,",
+  greetingMorning: 'Good morning,',
+  greetingAfternoon: 'Good afternoon,',
+  greetingEvening: 'Good evening,',
+  greetingNight: 'Sweet dreams,',
 
   // Layout
-  layout: "bento", // 'bento', 'lists', 'buttons'
+  layout: 'bento', // 'bento', 'lists', 'buttons'
 
   // Weather
   weatherKey: import.meta.env.VITE_API_KEY, // Set your OpenWeatherMap key in .env - Move the included .env.example to .env
-  weatherIcons: "OneDark", // 'Onedark', 'Nord', 'Dark', 'White'
-  weatherUnit: "C", // 'F', 'C'
-  language: "en", // More languages in https://openweathermap.org/current#multi
+  weatherIcons: 'OneDark', // 'Onedark', 'Nord', 'Dark', 'White'
+  weatherUnit: 'C', // 'F', 'C'
+  language: 'en', // More languages in https://openweathermap.org/current#multi
 
   trackLocation: true, // Request location from the browser. If false, or location is denied, use the coordinates below.
-  defaultLatitude: "37.775",
-  defaultLongitude: "-122.419",
+  defaultLatitude: '37.775',
+  defaultLongitude: '-122.419',
 
   // Automatic theme switching:
   // "system" - Switches based on OS color preference
   // "location" - Switches based on local sunrise/sunset (requires OpenWeatherMap API key)
   // "preset" - Switches based on set hours
   // "none" - No automatic switching
-  autoTheme: "system",
+  autoTheme: 'system',
 
   // If autoTheme is set to "preset", set the hours below.
-  darkModeOnTime: "18:30",
-  lightModeOnTime: "07:00",
+  darkModeOnTime: '18:30',
+  lightModeOnTime: '07:00',
 
   // Set any of the below options to false to disable drawing the component on the page.
   // If themeButton is set to false, the theme can only be set in this file.
@@ -94,68 +102,68 @@ export const config: Config = {
     // If you're using the 'bento' layout, this is the only group that will be used.
     [
       {
-        name: "Github", // set the name of the card
-        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-"
-        url: "https://github.com/", // provide a link to the page.
+        name: 'Github', // set the name of the card
+        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-"
+        url: 'https://github.com/', // provide a link to the page.
       },
       {
-        name: "Mail",
-        icon: "envelope",
-        url: "https://mail.protonmail.com/",
+        name: 'Mail',
+        icon: 'envelope',
+        url: 'https://mail.protonmail.com/',
       },
       {
-        name: "Todoist",
-        icon: "list-ol",
-        url: "https://todoist.com",
+        name: 'Todoist',
+        icon: 'list-ol',
+        url: 'https://todoist.com',
       },
       {
-        name: "Calendar",
-        icon: "calendar",
-        url: "https://calendar.google.com/calendar/r",
+        name: 'Calendar',
+        icon: 'calendar',
+        url: 'https://calendar.google.com/calendar/r',
       },
       {
-        name: "Reddit",
-        icon: "fab-reddit",
-        url: "https://reddit.com",
+        name: 'Reddit',
+        icon: 'fab-reddit',
+        url: 'https://reddit.com',
       },
       {
-        name: "Odysee",
-        icon: "fab-youtube",
-        url: "https://odysee.com/",
+        name: 'Odysee',
+        icon: 'fab-youtube',
+        url: 'https://odysee.com/',
       },
     ],
     // Second buttons group
     // You muse use the 'buttons' layout to use this group.
     [
       {
-        name: "Music",
-        icon: "fab-spotify",
-        url: "https://open.spotify.com",
+        name: 'Music',
+        icon: 'fab-spotify',
+        url: 'https://open.spotify.com',
       },
       {
-        name: "twitter",
-        icon: "fab-twitter",
-        url: "https://twitter.com/",
+        name: 'twitter',
+        icon: 'fab-twitter',
+        url: 'https://twitter.com/',
       },
       {
-        name: "bot",
-        icon: "fab-discord",
-        url: "https://discord.com/app",
+        name: 'bot',
+        icon: 'fab-discord',
+        url: 'https://discord.com/app',
       },
       {
-        name: "Amazon",
-        icon: "fab-amazon",
-        url: "https://amazon.com/",
+        name: 'Amazon',
+        icon: 'fab-amazon',
+        url: 'https://amazon.com/',
       },
       {
-        name: "Hashnode",
-        icon: "fab-hashnode",
-        url: "https://hashnode.com/",
+        name: 'Hashnode',
+        icon: 'fab-hashnode',
+        url: 'https://hashnode.com/',
       },
       {
-        name: "Figma",
-        icon: "fab-figma",
-        url: "https://figma.com/",
+        name: 'Figma',
+        icon: 'fab-figma',
+        url: 'https://figma.com/',
       },
     ],
   ],
@@ -166,44 +174,44 @@ export const config: Config = {
     // If you're using the 'bento' layout, this is the only group that will be used.
     [
       {
-        icon: "music", // Icon for the list to use. The same as the buttons.
+        icon: 'music', // Icon for the list to use. The same as the buttons.
         links: [
           {
-            name: "Inspirational", // Display text for the link
-            url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ", // URL to the page
+            name: 'Inspirational', // Display text for the link
+            url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ', // URL to the page
           },
           {
-            name: "Classic",
-            url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
+            name: 'Classic',
+            url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
           },
           {
-            name: "Oldies",
-            url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
+            name: 'Oldies',
+            url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
           },
           {
-            name: "Rock",
-            url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
+            name: 'Rock',
+            url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
           },
         ],
       },
       {
-        icon: "coffee",
+        icon: 'coffee',
         links: [
           {
-            name: "Linkedin",
-            url: "https://www.linkedin.com",
+            name: 'Linkedin',
+            url: 'https://www.linkedin.com',
           },
           {
-            name: "Dribbble",
-            url: "https://www.dribbble.com",
+            name: 'Dribbble',
+            url: 'https://www.dribbble.com',
           },
           {
-            name: "Trello",
-            url: "https://www.trello.com",
+            name: 'Trello',
+            url: 'https://www.trello.com',
           },
           {
-            name: "Slack",
-            url: "https://www.slack.com",
+            name: 'Slack',
+            url: 'https://www.slack.com',
           },
         ],
       },
@@ -212,44 +220,44 @@ export const config: Config = {
     // You muse use the 'lists' layout to use this group.
     [
       {
-        icon: "house-user",
+        icon: 'house-user',
         links: [
           {
-            name: "Spotify",
-            url: "https://www.spotify.com",
+            name: 'Spotify',
+            url: 'https://www.spotify.com',
           },
           {
-            name: "Reddit",
-            url: "https://www.reddit.com",
+            name: 'Reddit',
+            url: 'https://www.reddit.com',
           },
           {
-            name: "Hashnode",
-            url: "https://www.hashnode.com",
+            name: 'Hashnode',
+            url: 'https://www.hashnode.com',
           },
           {
-            name: "Pocket",
-            url: "https://www.pocket.com",
+            name: 'Pocket',
+            url: 'https://www.pocket.com',
           },
         ],
       },
       {
-        icon: "fab-github",
+        icon: 'fab-github',
         links: [
           {
-            name: "Front",
-            url: "https://www.reddit.com/r/Frontend/",
+            name: 'Front',
+            url: 'https://www.reddit.com/r/Frontend/',
           },
           {
-            name: "Rust",
-            url: "https://www.reddit.com/r/rust/",
+            name: 'Rust',
+            url: 'https://www.reddit.com/r/rust/',
           },
           {
-            name: "Go",
-            url: "https://www.reddit.com/r/golang/",
+            name: 'Go',
+            url: 'https://www.reddit.com/r/golang/',
           },
           {
-            name: "Repos",
-            url: "https://github.com/migueravila",
+            name: 'Repos',
+            url: 'https://github.com/migueravila',
           },
         ],
       },