From 66ce122d08f79e08adc1518cc67988655bf762b7 Mon Sep 17 00:00:00 2001 From: Lewis Wood Date: Fri, 20 Oct 2023 17:41:23 +0100 Subject: [PATCH 1/3] Added support for custom fonts Set the values under the `font` object in the config to adjust Supports both google and local fonts --- config.ts | 212 +++++++++++++++++++------------------ src/App.vue | 5 +- src/index.css | 8 ++ src/scripts/updateTheme.ts | 60 ++++++----- src/types/config.d.ts | 16 +-- 5 files changed, 167 insertions(+), 134 deletions(-) diff --git a/config.ts b/config.ts index 5fee62d3..4d5ac4ae 100644 --- 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', }, ], }, diff --git a/src/App.vue b/src/App.vue index 4e4d0a12..8a6c7df1 100644 --- a/src/App.vue +++ b/src/App.vue @@ -11,7 +11,7 @@ import { useConfigStore } from './store/store'; import { config } from '../config'; import { getIcon, getWeather } from './scripts/weather'; import { onBeforeMount } from 'vue'; -import { setTheme } from './scripts/updateTheme'; +import { setTheme, setFont } from './scripts/updateTheme'; const store = useConfigStore(); document.title = config.title; @@ -19,6 +19,7 @@ document.title = config.title; onBeforeMount(() => { useConfigStore(); setTheme(); + setFont(); }), // Fetch the weather every 30 minutes setInterval(async () => { @@ -48,7 +49,7 @@ onBeforeMount(() => { -