woogi/modern-glance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update implementation

Browse Source
This commit is contained in:
Svilen Markov
2025-05-04 16:49:20 +01:00
parent a2d8410fec
commit c2286f9a22
17 changed files with 583 additions and 402 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/glance/templates/document.html
+14 -4
View File
@@ -1,22 +1,32 @@
<!DOCTYPE html>
<html {{ block "document-root-attrs" . }}{{ end }} lang="en" id="top">
<html {{ block "document-root-attrs" . }}{{ end }} lang="en" id="top" data-scheme="{{ if .Request.Theme.Light }}light{{ else }}dark{{ end }}">
<head>
{{ block "document-head-before" . }}{{ end }}
<script>
if (navigator.platform === 'iPhone') document.documentElement.classList.add('ios');
const pageData = {
slug: "{{ .Page.Slug }}",
baseURL: "{{ .App.Config.Server.BaseURL }}",
theme: "{{ .Request.Theme.Key }}",
};
</script>
<title>{{ block "document-title" . }}{{ end }}</title>
<script>if (navigator.platform === 'iPhone') document.documentElement.classList.add('ios');</script>
<meta charset="UTF-8">
<meta name="color-scheme" content="light">
<meta name="color-scheme" content="dark">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="{{ .App.Config.Branding.AppName }}">
<meta name="theme-color" content="{{ .App.Config.Theme.BackgroundColorAsHex }}">
<meta name="theme-color" content="{{ .Request.Theme.BackgroundColorAsHex }}">
<link rel="apple-touch-icon" sizes="512x512" href='{{ .App.Config.Branding.AppIconURL }}'>
<link rel="manifest" href='{{ .App.VersionedAssetPath "manifest.json" }}'>
<link rel="icon" type="image/png" href="{{ .App.Config.Branding.FaviconURL }}" />
<link rel="stylesheet" href='{{ .App.StaticAssetPath "css/bundle.css" }}'>
<script type="module" src='{{ .App.StaticAssetPath "js/main.js" }}'></script>
<style id="theme-style">
{{ .Request.Theme.CSS }}
</style>
{{ block "document-head-after" . }}{{ end }}
</head>
<body>
internal/glance/templates/page.html
+36 -46
View File
@@ -2,25 +2,7 @@
{{ define "document-title" }}{{ .Page.Title }}{{ end }}
{{ define "document-head-before" }}
<script>
const pageData = {
slug: "{{ .Page.Slug }}",
baseURL: "{{ .App.Config.Server.BaseURL }}",
};
/**
* @type ThemeCollection
*/
const userThemes = JSON.parse("{{ .Presets }}");
</script>
{{ end }}
{{ define "document-root-attrs" }}class="{{ if .App.Config.Theme.Light }}light-scheme {{ end }}{{ if .Page.CenterVertically }}page-center-vertically{{ end }}"{{ end }}
{{ define "document-head-after" }}
{{ .App.ParsedThemeStyle }}
{{ if ne "" .App.Config.Theme.CustomCSSFile }}
<link rel="stylesheet" href="{{ .App.Config.Theme.CustomCSSFile }}?v={{ .App.CreatedAt.Unix }}">
{{ end }}
@@ -34,23 +16,6 @@
{{ end }}
{{ end }}
{{ define "theme-switcher" }}
<div class="theme-dropdown">
<button class="dropdown-button">
<span>Theme</span>
<i class="arrow"></i>
</button>
<div class="dropdown-content">
<div class="theme-option" data-theme="default" data-scheme="dark">default</div>
<div class="theme-option" data-theme="light" data-scheme="light">light</div>
<div class="theme-option" data-theme="dark" data-scheme="dark">dark</div>
<div class="separator"></div>
<div class="custom-presets">
</div>
</div>
</div>
{{ end }}
{{ define "document-body" }}
<div class="flex flex-column body-content">
{{ if not .Page.HideDesktopNavigation }}
@@ -58,11 +23,21 @@
<div class="header flex padding-inline-widget widget-content-frame">
<!-- TODO: Replace G with actual logo, first need an actual logo -->
<div class="logo" aria-hidden="true">{{ if ne "" .App.Config.Branding.LogoURL }}<img src="{{ .App.Config.Branding.LogoURL }}" alt="">{{ else if ne "" .App.Config.Branding.LogoText }}{{ .App.Config.Branding.LogoText }}{{ else }}G{{ end }}</div>
<nav class="nav flex grow">
<nav class="nav flex grow hide-scrollbars">
{{ template "navigation-links" . }}
</nav>
<div class="flex items-center">
{{ template "theme-switcher" . }}
<div class="theme-picker self-center" data-popover-type="html" data-popover-position="below" data-popover-show-delay="0" data-popover-offset="0.7">
<div class="current-theme-preview">
{{ .Request.Theme.PreviewHTML }}
</div>
<div data-popover-html>
<div class="theme-choices">
{{ .App.Config.Theme.PreviewHTML }}
{{ range $_, $preset := .App.Config.Theme.Presets.Items }}
{{ $preset.PreviewHTML }}
{{ end }}
</div>
</div>
</div>
</div>
</div>
@@ -74,20 +49,35 @@
{{ range $i, $column := .Page.Columns }}
<label class="mobile-navigation-label"><input type="radio" class="mobile-navigation-input" name="column" value="{{ $i }}" autocomplete="off"{{ if eq $i $.Page.PrimaryColumnIndex }} checked{{ end }}><div class="mobile-navigation-pill"></div></label>
{{ end }}
<label class="mobile-navigation-label"><input type="checkbox" class="mobile-navigation-page-links-input" autocomplete="on"{{ if .Page.ExpandMobilePageNavigation }} checked{{ end }}><div class="hamburger-icon"></div></label>
<label class="mobile-navigation-label"><input type="checkbox" class="mobile-navigation-page-links-input" autocomplete="on"><div class="hamburger-icon"></div></label>
</div>
<div class="mobile-navigation-page-links">
<div class="flex grow">
{{ template "navigation-links" . }}
</div>
<div class="flex items-center">
{{ template "theme-switcher" . }}
<div class="mobile-navigation-page-links hide-scrollbars">
{{ template "navigation-links" . }}
</div>
<div class="mobile-navigation-actions flex flex-column margin-block-10">
<div class="theme-picker flex justify-between items-center" data-popover-type="html" data-popover-position="above" data-popover-show-delay="0" data-popover-hide-delay="100" data-popover-anchor=".current-theme-preview" data-popover-trigger="click">
<div data-popover-html>
<div class="theme-choices"></div>
</div>
<div class="size-h3 pointer-events-none">Change theme</div>
<div class="flex gap-15 items-center pointer-events-none">
<div class="current-theme-preview">
{{ .Request.Theme.PreviewHTML }}
</div>
<svg class="ui-icon" stroke="var(--color-text-subdue)" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.098 19.902a3.75 3.75 0 0 0 5.304 0l6.401-6.402M6.75 21A3.75 3.75 0 0 1 3 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 0 0 3.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88M6.75 17.25h.008v.008H6.75v-.008Z" />
</svg>
</div>
</div>
</div>
</div>
<div class="content-bounds grow{{ if ne "" .Page.Width }} content-bounds-{{ .Page.Width }} {{ end }}">
<main class="page" id="page" aria-live="polite" aria-busy="true">
<main class="page{{ if .Page.CenterVertically }} page-center-vertically{{ end }}" id="page" aria-live="polite" aria-busy="true">
<h1 class="visually-hidden">{{ .Page.Title }}</h1>
<div class="page-content" id="page-content"></div>
<div class="page-loading-container">
internal/glance/templates/theme-preset-preview.html
+19
View File
@@ -0,0 +1,19 @@
{{- $background := "hsl(240, 8%, 9%)" | safeCSS }}
{{- $primary := "hsl(43, 50%, 70%)" | safeCSS }}
{{- $positive := "hsl(43, 50%, 70%)" | safeCSS }}
{{- $negative := "hsl(0, 70%, 70%)" | safeCSS }}
{{- if .BackgroundColor }}{{ $background = .BackgroundColor.String | safeCSS }}{{ end }}
{{- if .PrimaryColor }}
{{- $primary = .PrimaryColor.String | safeCSS }}
{{- if not .PositiveColor }}
{{- $positive = $primary }}
{{- else }}
{{- $positive = .PositiveColor.String | safeCSS }}
{{- end }}
{{- end }}
{{- if .NegativeColor }}{{ $negative = .NegativeColor.String | safeCSS }}{{ end }}
<button class="theme-preset{{ if .Light }} theme-preset-light{{ end }}" style="--color: {{ $background }}" data-key="{{ .Key }}">
<div class="theme-color" style="--color: {{ $primary }}"></div>
<div class="theme-color" style="--color: {{ $positive }}"></div>
<div class="theme-color" style="--color: {{ $negative }}"></div>
</button>
internal/glance/templates/theme-style.gotmpl
+4 -23
View File
@@ -1,31 +1,12 @@
<style>
.default {
:root {
{{ if .BackgroundColor }}
--bgh: {{ .BackgroundColor.Hue }};
--bgs: {{ .BackgroundColor.Saturation }}%;
--bgl: {{ .BackgroundColor.Lightness }}%;
--bgh: {{ .BackgroundColor.H }};
--bgs: {{ .BackgroundColor.S }}%;
--bgl: {{ .BackgroundColor.L }}%;
{{ end }}
{{ if ne 0.0 .ContrastMultiplier }}--cm: {{ .ContrastMultiplier }};{{ end }}
{{ if ne 0.0 .TextSaturationMultiplier }}--tsm: {{ .TextSaturationMultiplier }};{{ end }}
{{ if .PrimaryColor }}--color-primary: {{ .PrimaryColor.String | safeCSS }};{{ end }}
{{ if .PositiveColor }}--color-positive: {{ .PositiveColor.String | safeCSS }};{{ end }}
{{ if .NegativeColor }}--color-negative: {{ .NegativeColor.String | safeCSS }};{{ end }}
}
{{ range $name,$theme := .Presets }}
.{{ $name }} {
{{ if .BackgroundColor }}
--bgh: {{ $theme.BackgroundColor.Hue }};
--bgs: {{ $theme.BackgroundColor.Saturation }}%;
--bgl: {{ $theme.BackgroundColor.Lightness }}%;
{{ end }}
{{ if ne 0.0 $theme.ContrastMultiplier }}--cm: {{ $theme.ContrastMultiplier }};{{ end }}
{{ if ne 0.0 $theme.TextSaturationMultiplier }}--tsm: {{ $theme.TextSaturationMultiplier }};{{ end }}
{{ if $theme.PrimaryColor }}--color-primary: {{ $theme.PrimaryColor.String | safeCSS }};{{ end }}
{{ if $theme.PositiveColor }}--color-positive: {{ $theme.PositiveColor.String | safeCSS }};{{ end }}
{{ if $theme.NegativeColor }}--color-negative: {{ $theme.NegativeColor.String | safeCSS }};{{ end }}
}
{{ end }}
</style>