From 6c218a45cbf50e9787f503089ede5aee787b47e7 Mon Sep 17 00:00:00 2001 From: "Gustavo L de Mello (Guz)" Date: Fri, 29 Nov 2024 19:06:47 -0300 Subject: [PATCH] feat: radix color for labels and custom styling --- capytal/default.nix | 8 +- capytal/forgejo/assets/js/capytal-theme.js | 69 ++++++++ capytal/forgejo/assets/js/custom-theme.js | 156 ------------------- capytal/forgejo/customization.nix | 40 ++--- capytal/forgejo/templates/custom/header.tmpl | 2 +- homelab/default.nix | 6 + homelab/ghostfolio.nix | 44 ++++++ homelab/media_server/default.nix | 5 + homelab/media_server/jellyfin.nix | 86 ++++++++++ modules/ghostfolio/default.nix | 18 +++ modules/ghostfolio/derivation.nix | 40 +++++ 11 files changed, 290 insertions(+), 184 deletions(-) create mode 100644 capytal/forgejo/assets/js/capytal-theme.js delete mode 100644 capytal/forgejo/assets/js/custom-theme.js create mode 100644 homelab/default.nix create mode 100644 homelab/ghostfolio.nix create mode 100644 homelab/media_server/default.nix create mode 100644 homelab/media_server/jellyfin.nix create mode 100644 modules/ghostfolio/default.nix create mode 100644 modules/ghostfolio/derivation.nix diff --git a/capytal/default.nix b/capytal/default.nix index 97dd930..0fde560 100644 --- a/capytal/default.nix +++ b/capytal/default.nix @@ -1,11 +1,5 @@ -{inputs, ...}: let - catppuccin-base16 = builtins.fetchurl { - url = "https://raw.githubusercontent.com/tinted-theming/schemes/spec-0.11/base16/catppuccin-mocha.yaml"; - sha256 = "1vmw5fqqsg8vsbg6pr44r61pxq1r8kycwd35j3ffmd9s3pxddcvf"; - }; -in { +{inputs, ...}: { imports = [ - inputs.base16.nixosModule ./caddy.nix ./cloudflare.nix ./forgejo diff --git a/capytal/forgejo/assets/js/capytal-theme.js b/capytal/forgejo/assets/js/capytal-theme.js new file mode 100644 index 0000000..fb486db --- /dev/null +++ b/capytal/forgejo/assets/js/capytal-theme.js @@ -0,0 +1,69 @@ +const CAPYTAL_THEME_NAME = "capytal-dark"; + +(() => { + let version = document.querySelector('div.left-links > a[href="/admin/config"]')?.textContent + if (!version) { + console.warn(`${CAPYTAL_THEME_NAME}: unable to find Forgejo instance version!`) + return + } + + console.debug(`${CAPYTAL_THEME_NAME}: version found ${version}`) + + let style = document.querySelector(`link[href="/assets/css/theme-${CAPYTAL_THEME_NAME}.css?v=${version}"`) + if (!style) { + console.warn(`${CAPYTAL_THEME_NAME}: capytal theme not selected, skipping!`) + return + } + + console.log(`${CAPYTAL_THEME_NAME}: starting to apply theme modifications`) + + labelStyles() +})() + +function labelStyles() { + /** @type {Element[]} */ + let labels = []; + document.querySelectorAll('.labels-list').forEach(e => labels = labels.concat(...e.children)) + document.querySelectorAll('ul.issue-label-list').forEach(e => labels = labels.concat(...e.children)) + document.querySelectorAll('div.filter.menu.ugc-labels').forEach(e => { + for (let c of e.children) { + let label = c.querySelector('span.ui.label.scope-parent') ?? c.querySelector('div.ui.label') + if (label) { + labels.push(label) + } + } + }) + + for (let label of labels) { + console.log(label) + + let left = label.querySelector('.scope-left') + let right = label.querySelector('.scope-right') + + if (!left && !right) { + label = (label.querySelector('div.ui.label')?? label) + + let color = label.getAttribute('style')?.split(' ')?.at(-2) + label.setAttribute('style', `color: ${color} !important;`+ + `border: solid 1px ${color} !important;`+ + `background-color: ${color.slice(0, -2) + '22'} !important;`) + } + + if (left) { + let color = left.getAttribute('style')?.split(' ')?.at(-2) + left.setAttribute('style', `color: ${color} !important;`+ + `border: solid 1px ${color} !important;`+ + `border-right: solid 0px !important;`+ + `background-color: transparent !important;`) + } + + if (right) { + let color = right.getAttribute('style')?.split(' ')?.at(-2) + right.setAttribute('style', `color: ${color} !important;`+ + `border: solid 1px ${color} !important;`+ + `border-left: solid 0px !important;`+ + `background-color: ${color.slice(0, -2) + '22'} !important;`) + } + } + +} diff --git a/capytal/forgejo/assets/js/custom-theme.js b/capytal/forgejo/assets/js/custom-theme.js deleted file mode 100644 index 34b6b0b..0000000 --- a/capytal/forgejo/assets/js/custom-theme.js +++ /dev/null @@ -1,156 +0,0 @@ -/** - * This is was a attempt to change the icons of the instance. The code works, - * but finding every single icon takes a lot of work, for little reward. - * - * For now this will be unused, until it is completed ~~some day~~. - */ - -/** - * SVG icons source code used below as strings are from the Solar Icon Set, - * by 480 Design, licensed under the Creative Commons' CC-BY 4.0 license. - * Source code were accessed via the Iconify API, via the icones.js.org front-end. - * - * Original set can be found here: - * https://www.figma.com/community/file/1166831539721848736/solar-icons-set - * - * Collection on icones.js.org can be found here: - * https://icones.js.org/collection/solar - */ - -// solar:bookmark-opened-bold-duotone -const REPO_ICON = ''; - -// solar:bookmark-opened-line-duotone -const REPO_TEMPLATE_ICON = ''; - -// solar:floor-lamp-broken -const REPO_FORK_ICON = ''; - -// solar:flip-horizontal-bold-duotone -const REPO_MIRROR_ICON = ''; - -// solar:lock-unlocked-bold-duotone -const LOCK_ICON = ''; - -// solar:buildings-bold-duotone -const ORG_ICON = ''; - -// solar:bookmark-circle-line-duotone -const COMMIT_ICON = ''; - -// solar:minus-circle-line-duotone -const ISSUE_OPENED_ICON = ''; - -// solar:bell-bold-duotone -const BELL_ICON = ''; - -// solar:hamburger-menu-broken -const MENU_ICON = ''; - -// solar:filter-bold-duotone -const MENU_FILTERS_ICON = ''; - -// solar:menu-dots-bold -const MENU_DOTS_ICON = ''; - -// solar:add-circle-bold-duotone -const PLUS_ICON = ''; - -// solar:alt-arrow-right-bold -const ARROW_RIGHT = ''; - -// solar:alt-arrow-left-bold -const ARROW_LEFT = ''; - -// solar:double-alt-arrow-right-bold-duotone -const DOUBLE_ARROW_RIGHT = ''; - -// solar:double-alt-arrow-right-left-duotone -const DOUBLE_ARROW_LEFT = ''; - -const VERSION = document.querySelector('.left-links > a[href="/admin/config"]')?.textContent || "0.0.0"; -if (VERSION === '0.0.0') { - console.warn('[Custom theme] Unable to find Forgejo version') -} - -const THEME_ELEM = - document.querySelector(`link[href="/assets/css/theme-capytal-dark-a.css?v=${VERSION}"]`) || - document.querySelector(`link[href="/assets/css/theme-capytal-light-a.css?v=${VERSION}"]`) -if (!THEME_ELEM) { - console.warn('[Custom theme] Capytal theme element not found') -} - -const IS_CAPYTAL_THEME = THEME_ELEM ? true : false; -if (IS_CAPYTAL_THEME) { - console.log('[Custom theme] Applying changes to Capytal theme') - main() -} else { - console.warn('[Custom theme] Not applying custom theme changes'); -} - -function main() { - applyChanges(); - - setTimeout(() => { - applyChanges(); - }, 500) - setTimeout(() => { - applyChanges(); - }, 1000) - setTimeout(() => { - applyChanges(); - }, 2000) -} - -function applyChanges() { - changeIcon('svg.svg.octicon-bell', BELL_ICON) - changeIcon('svg.svg.octicon-three-bars', MENU_ICON) - changeIcon('svg.svg.octicon-filter', MENU_FILTERS_ICON) - changeIcon('svg.svg.octicon-kebab-horizontal', MENU_DOTS_ICON) - changeIcon('svg.svg.octicon-plus', PLUS_ICON) - - changeIcon('svg.svg.octicon-chevron-right', ARROW_RIGHT) - changeIcon('svg.svg.octicon-chevron-left', ARROW_LEFT) - changeIcon('svg.svg.gitea-double-chevron-right', DOUBLE_ARROW_RIGHT) - changeIcon('svg.svg.gitea-double-chevron-left', DOUBLE_ARROW_LEFT) - - changeIcon('svg.svg.octicon-repo', REPO_ICON) - changeIcon('svg.svg.octicon-repo-push', REPO_ICON) - changeIcon('svg.svg.octicon-repo-template', REPO_TEMPLATE_ICON) - changeIcon('svg.svg.octicon-repo-forked', REPO_FORK_ICON) - changeIcon('svg.svg.octicon-mirror', REPO_MIRROR_ICON) - changeIcon('svg.svg.octicon-lock', LOCK_ICON) - - changeIcon('svg.svg.octicon-organization', ORG_ICON) - - changeIcon('svg.svg.octicon-git-commit', COMMIT_ICON) - changeIcon('svg.svg.octicon-issue-opened', ISSUE_OPENED_ICON) -} - -/** - * @param {string} html - The html to parse - * @returns {Element} - The resulting element - */ -function parseHTML(html) { - let el = document.createElement('div'); - el.innerHTML = html; - return el.children.item(0); -} - -/** - * @param {string} original - CSS selector of the original icon - * @param {string} newIcon - SVG text for the new icon - */ -function changeIcon(original, newIcon) { - let originalIcons = document.querySelectorAll(original); - for (const icon of originalIcons) { - let newEl = parseHTML(newIcon); - - newEl.setAttribute('width', icon.getAttribute('width') ?? "") - newEl.setAttribute('height', icon.getAttribute('height') ?? "") - newEl.setAttribute('class', icon.getAttribute('class') ?? "") - - icon.before(newEl) - icon.remove() - } -} diff --git a/capytal/forgejo/customization.nix b/capytal/forgejo/customization.nix index d160595..6909d39 100644 --- a/capytal/forgejo/customization.nix +++ b/capytal/forgejo/customization.nix @@ -33,102 +33,102 @@ in { "capytal-dark" = ./themes/theme-capytal-dark.css; "bthree-dark" = ./themes/theme-bthree-dark.css; }; - options.label."Default" = with config.scheme.withHashtag; { + options.label."Default" = { "scope/a11y" = { - color = base06; + color = "d4b3a5"; description = "Accessibility issues and improvements"; exclusive = true; }; "scope/i18n" = { - color = base0F; + color = "dbb594"; description = "Internationalization issues and improvements"; exclusive = true; }; "scope/security" = { - color = base08; + color = "ff977d"; description = "Test suite changes"; exclusive = true; }; "scope/documentation" = { - color = base0E; + color = "e796f3"; description = "Documentation changes"; exclusive = true; }; "scope/testing" = { - color = base0E; + color = "ff949d"; description = "Test suite changes"; exclusive = true; }; "kind/enhancement" = { - color = base0C; + color = "4ccce6"; description = "Improvement on existing functionality"; exclusive = true; }; "kind/bug" = { - color = base0D; + color = "70b8ff"; description = "Something isn't working"; exclusive = true; }; "kind/feature" = { - color = base07; + color = "9eb1ff"; description = "New functionality"; exclusive = true; }; "priority/low" = { - color = base0B; + color = "bde56c"; description = "The priority is low"; exclusive = true; priority = "low"; }; "priority/medium" = { - color = base0A; + color = "f5e147"; description = "The priority is medium"; exclusive = true; priority = "medium"; }; "priority/high" = { - color = base09; + color = "ff9592"; description = "The priority is high"; exclusive = true; priority = "high"; }; "priority/critical" = { - color = base08; + color = "ff977d"; description = "The priority is high"; exclusive = true; priority = "critical"; }; "BREAKING-CHANGE" = { - color = base05; + color = "b4b4b4"; description = "This change breaks existing functionality"; }; "status/to-do" = { - color = base0B; + color = "71d083"; description = "This is confirmed and needs work"; exclusive = true; }; "status/in-progress" = { - color = base0A; + color = "f5e147"; description = "This is being worked on"; exclusive = true; }; "status/needs-info" = { - color = base09; + color = "ffa057"; description = "This needs more information to continue"; exclusive = true; }; "status/blocked" = { - color = base08; + color = "ff977d"; description = "This is blocked due to something"; exclusive = true; }; "status/abandoned" = { - color = base05; + color = "b6ecf7"; description = "This is in hiatus/abandoned until further notice"; exclusive = true; }; "status/wont-fix" = { - color = base0E; + color = "b5b3ad"; description = "This issue won't be fixed"; exclusive = true; }; diff --git a/capytal/forgejo/templates/custom/header.tmpl b/capytal/forgejo/templates/custom/header.tmpl index 06e83e3..864546a 100644 --- a/capytal/forgejo/templates/custom/header.tmpl +++ b/capytal/forgejo/templates/custom/header.tmpl @@ -1,6 +1,6 @@ - +