picocrank 1.24.0 → 1.25.1

package/{public/themes → supplemental-themes}/waffles/theme.css

@@ -9,21 +9,52 @@
 html {
 	--waffle-cream: #fff8e7;
 	--waffle-batter: #f5e6c8;
+	--waffle-section: #edd9b0;
+	--waffle-sidebar: #e5cf9a;
 	--waffle-crust: #c4863b;
 	--waffle-syrup: #8b4513;
 	--waffle-butter: #ffd966;
 	--waffle-berry: #c23b5a;
+	--waffle-accent: #a05020;
+
+	--body-bg-color: var(--waffle-cream);
+	--surface-bg-color: #fffdf6;
+	--standout-bg-color: var(--waffle-batter);
+	--section-header-bg-color: var(--waffle-batter);
+	--shadow-color: rgba(139, 69, 19, 0.12);
 
 	--text-color: var(--waffle-syrup);
+	--muted-text-color: #a88860;
+	--link-color: var(--waffle-accent);
 	--border-color: #e0c896;
-	--standout-bg-color: var(--waffle-batter);
+
 	--hover-background-color: #f0d9a8;
 	--hover-text-color: var(--waffle-syrup);
+
+	--header-fg-color: var(--waffle-cream);
 	--header-hover-background-color: var(--waffle-crust);
 	--header-hover-text-color: var(--waffle-cream);
+	--header-button-hover-bg-color: var(--waffle-crust);
+
+	--sidebar-bg-color: var(--waffle-sidebar);
+	--sidebar-link-color: var(--waffle-syrup);
+	--sidebar-hover-bg-color: var(--hover-background-color);
+	--sidebar-border-color: var(--waffle-crust);
+
+	--input-bg-color: var(--waffle-cream);
+	--input-fg-color: var(--waffle-syrup);
+	--control-option-bg-color: var(--waffle-butter);
+	--control-hover-bg-color: #ffe14d;
+
 	--disabled-background-color: #efe4cb;
 	--disabled-text-color: #a88860;
 
+	--button-good-bg: #9ccc65;
+	--button-good-hover-bg: #9ccc65;
+	--button-bad-bg: var(--waffle-berry);
+	--button-bad-hover-bg: var(--waffle-berry);
+	--button-on-accent-fg: #fff8e7;
+
 	--karma-good: #b8d98a;
 	--karma-bad: #f0a0a8;
 	--karma-warning: var(--waffle-butter);
@@ -44,8 +75,8 @@ html {
 }
 
 body {
-	background-color: var(--waffle-cream);
-	color: var(--waffle-syrup);
+	background-color: var(--body-bg-color);
+	color: var(--text-color);
 	background-image:
 		repeating-linear-gradient(
 			0deg,
@@ -66,45 +97,11 @@ body {
 header {
 	background: linear-gradient(180deg, var(--waffle-crust), #a86e2e);
 	border-bottom: 3px solid var(--waffle-syrup);
-	color: var(--waffle-cream);
 	box-shadow: 0 2px 8px rgba(139, 69, 19, 0.25);
 }
 
-header a,
-header button,
-header .button {
-	color: var(--waffle-cream);
-}
-
-#sidebar-toggler-button,
-#sidebar-toggler-button.neutral,
-header .theme-toggle,
-header .theme-toggle.neutral,
-header .search-trigger,
-header .search-trigger.neutral {
-	background-color: transparent;
-	border: 0;
-	color: var(--waffle-cream);
-}
-
-#sidebar-toggler-button:hover,
-header .theme-toggle:hover,
-header .search-trigger:hover,
-header .user-info:hover {
-	background-color: var(--header-hover-background-color);
-	color: var(--header-hover-text-color);
-}
-
-section {
-	background-color: #fffdf6;
-	border: 1px solid var(--border-color);
-	box-shadow: 0 2px 6px rgba(139, 69, 19, 0.12);
-}
-
 section .section-header {
-	background-color: var(--waffle-batter);
 	border-bottom: 2px solid var(--waffle-crust);
-	color: var(--waffle-syrup);
 }
 
 button,
@@ -121,23 +118,49 @@ button:hover,
 
 button.good,
 .button.good {
-	background-color: #9ccc65;
-	border-color: #6a9a38;
 	color: #2a4010;
 }
 
 button.bad,
 .button.bad {
-	background-color: var(--waffle-berry);
 	border-color: #8a2040;
-	color: #fff8e7;
-}
-
-a {
-	color: #a05020;
 }
 
 footer {
-	color: var(--waffle-syrup);
 	border-top: 1px dashed var(--border-color);
 }
+
+html[data-theme="dark"] {
+	--waffle-foreground: #3a1f08;
+	--waffle-foreground-muted: #5c3a18;
+	--waffle-accent-dark: #6b3410;
+
+	--text-color: var(--waffle-foreground);
+	--muted-text-color: var(--waffle-foreground-muted);
+	--link-color: var(--waffle-accent-dark);
+	--border-color: #c9a66a;
+	--standout-bg-color: var(--waffle-batter);
+	--hover-background-color: #f0d9a8;
+	--hover-text-color: var(--waffle-foreground);
+	--disabled-text-color: #7a6548;
+
+	--body-bg-color: var(--waffle-cream);
+	--surface-bg-color: var(--waffle-batter);
+	--section-header-bg-color: var(--waffle-section);
+	--sidebar-bg-color: var(--waffle-sidebar);
+	--sidebar-link-color: var(--waffle-foreground);
+	--sidebar-hover-bg-color: var(--hover-background-color);
+	--sidebar-border-color: var(--waffle-crust);
+
+	--input-bg-color: var(--waffle-cream);
+	--input-fg-color: var(--waffle-foreground);
+}
+
+html[data-theme="dark"] section .section-header,
+html[data-theme="dark"] section .section-subheader {
+	border-bottom: 2px solid var(--waffle-crust);
+}
+
+html[data-theme="dark"] a:visited {
+	color: #5c2d0e;
+}

package/vite.config.js

@@ -4,9 +4,13 @@ import Components from 'unplugin-vue-components/vite'
 import fs from 'node:fs'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
+import { createReadStream, existsSync } from 'node:fs'
+import { stat } from 'node:fs/promises'
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 const themesDir = path.join(__dirname, 'public', 'themes')
+const supplementalThemesDir = path.join(__dirname, 'supplemental-themes')
+const includeSupplementalThemes = process.env.VITE_INCLUDE_SUPPLEMENTAL_THEMES !== 'false'
 
 function scanThemeNames() {
   if (!fs.existsSync(themesDir)) {
@@ -58,6 +62,92 @@ function themesIndexPlugin() {
   }
 }
 
+function contentTypeFor(filePath) {
+  if (filePath.endsWith('.css')) {
+    return 'text/css; charset=utf-8'
+  }
+  if (filePath.endsWith('.json')) {
+    return 'application/json; charset=utf-8'
+  }
+  if (filePath.endsWith('.png')) {
+    return 'image/png'
+  }
+  if (filePath.endsWith('.jpg') || filePath.endsWith('.jpeg')) {
+    return 'image/jpeg'
+  }
+  if (filePath.endsWith('.webp')) {
+    return 'image/webp'
+  }
+  if (filePath.endsWith('.svg')) {
+    return 'image/svg+xml'
+  }
+  return 'application/octet-stream'
+}
+
+function copyDirectoryRecursive(sourceDir, targetDir) {
+  fs.mkdirSync(targetDir, { recursive: true })
+
+  for (const entry of fs.readdirSync(sourceDir, { withFileTypes: true })) {
+    const sourcePath = path.join(sourceDir, entry.name)
+    const targetPath = path.join(targetDir, entry.name)
+
+    if (entry.isDirectory()) {
+      copyDirectoryRecursive(sourcePath, targetPath)
+      continue
+    }
+
+    fs.copyFileSync(sourcePath, targetPath)
+  }
+}
+
+function supplementalThemesPlugin() {
+  return {
+    name: 'picocrank-supplemental-themes',
+    configureServer(server) {
+      if (!includeSupplementalThemes || !fs.existsSync(supplementalThemesDir)) {
+        return
+      }
+
+      server.middlewares.use('/supplemental-themes', (req, res, next) => {
+        const requestPath = decodeURIComponent((req.url || '/').split('?')[0])
+        const relativePath = requestPath.replace(/^\/+/, '')
+        const filePath = path.resolve(supplementalThemesDir, relativePath)
+
+        if (!filePath.startsWith(path.resolve(supplementalThemesDir))) {
+          res.statusCode = 403
+          res.end('Forbidden')
+          return
+        }
+
+        if (!existsSync(filePath)) {
+          next()
+          return
+        }
+
+        stat(filePath).then((fileStat) => {
+          if (!fileStat.isFile()) {
+            next()
+            return
+          }
+
+          res.setHeader('Content-Type', contentTypeFor(filePath))
+          createReadStream(filePath).pipe(res)
+        }).catch(() => {
+          next()
+        })
+      })
+    },
+    closeBundle() {
+      if (!includeSupplementalThemes || !fs.existsSync(supplementalThemesDir)) {
+        return
+      }
+
+      const outDir = path.resolve(__dirname, 'dist', 'supplemental-themes')
+      copyDirectoryRecursive(supplementalThemesDir, outDir)
+    },
+  }
+}
+
 export default defineConfig({
   base: '/',
   build: {
@@ -93,6 +183,7 @@ export default defineConfig({
   },
   plugins: [
     themesIndexPlugin(),
+    supplementalThemesPlugin(),
     Components({
       dirs: ['./vue/components/'],
       extensions: ['vue'],

package/vue/components/Header.vue

@@ -205,7 +205,7 @@
 .header-actions :deep(button) {
 	border: 0;
 	border-radius: 0;
-	color: #fff;
+	color: var(--header-fg-color, var(--header-text-color, #fff));
 	background-color: transparent;
 	align-self: stretch;
 	display: inline-flex;
@@ -227,7 +227,7 @@
 #sidebar-toggler-button {
 	border: 0;
 	border-radius: 0;
-	color: #fff;
+	color: var(--header-fg-color, var(--header-text-color, #fff));
 	background-color: transparent;
 	align-self: stretch;
 	display: inline-flex;
@@ -260,7 +260,7 @@ header .search-trigger,
 header .search-trigger.neutral {
 	border: 0;
 	border-radius: 0;
-	color: #fff;
+	color: var(--header-fg-color, var(--header-text-color, #fff));
 	background-color: transparent;
 	align-self: stretch;
 	height: 100%;

package/vue/components/Login.vue

@@ -7,6 +7,7 @@
 					<form @submit.prevent="handleLocalLogin" class="local-login-form">
 						<input
 							id="username"
+							type="text"
 							v-model="localLogin.username"
 							required
 							autocomplete="username"
@@ -240,11 +241,8 @@ defineExpose({
 
 .local-login-form input {
 	padding: 0.75rem;
-	border: 1px solid var(--border-color, #ccc);
 	border-radius: 4px;
 	font-size: 1em;
-	background-color: var(--input-bg, #fff);
-	color: var(--text-color, #000);
 	width: 100%;
 	box-sizing: border-box;
 }

package/vue/components/Section.vue

@@ -1,27 +1,41 @@
 <template>
-	<section :class = "'with-header-and-content ' + classes" :id = "id">
-		<div class = "section-header flex-row">
-			<div class = "fg1">
-				<h2 :title = "subtitle">
-					<slot name="title">{{ title }}</slot>
+	<section :class="'with-header-and-content ' + classes" :id="id">
+		<div class="section-header flex-row">
+			<div class="fg1">
+				<h2 :title="subtitle">
+					<span v-if="icon" class="section-title-with-icon">
+						<HugeiconsIcon
+							:icon="icon"
+							class="section-title-icon"
+							width="1.1em"
+							height="1.1em"
+							:strokeWidth="2"
+							aria-hidden="true"
+						/>
+						<span class="section-title-text">
+							<slot name="title">{{ title }}</slot>
+						</span>
+					</span>
+					<slot v-else name="title">{{ title }}</slot>
 				</h2>
 			</div>
-			<div role = "toolbar">
+			<div role="toolbar">
 				<slot name="toolbar" />
 			</div>
 		</div>
-		<div :class = "padding ? 'section-content padding' : 'section-content'">
+		<div :class="padding ? 'section-content padding' : 'section-content'">
 			<slot />
 		</div>
 	</section>
 </template>
 
 <script setup>
+import { HugeiconsIcon } from '@hugeicons/vue'
 
-const props = defineProps({
+defineProps({
 	title: {
 		type: String,
-		default: "Untitled Section",
+		default: 'Untitled Section',
 	},
 	padding: {
 		type: Boolean,
@@ -29,15 +43,32 @@ const props = defineProps({
 	},
 	subtitle: {
 		type: String,
-		default: "",
+		default: '',
 	},
 	id: {
 		type: String,
-		default: "",
+		default: '',
 	},
 	classes: {
 		type: String,
-		default: "",
+		default: '',
 	},
-});
-</script>
+	icon: {
+		type: [Object, Array, Function],
+		default: null,
+	},
+})
+</script>
+
+<style scoped>
+.section-title-with-icon {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.45em;
+	vertical-align: middle;
+}
+
+.section-title-icon {
+	flex: 0 0 auto;
+}
+</style>

package/vue/components/Sidebar.vue

@@ -414,14 +414,15 @@ button {
 	text-align: left;
 	font-weight: 600;
 	font-size: 1em;
-	color: inherit;
+	color: var(--text-color);
 	background: transparent;
 	border-radius: 0;
 	cursor: pointer;
 }
 
-.nav-section-header:hover {
-	background-color: var(--hover-background-color);
+.nav-section-header:hover,
+.nav-section-header:focus-visible {
+	background-color: var(--sidebar-hover-bg-color);
 	color: var(--hover-text-color);
 }
 
@@ -436,14 +437,8 @@ button {
 	text-align: center;
 }
 
-html[data-theme="dark"] {
-	.nav-section-header {
-		color: #f8f9fa;
-	}
-
-	.supplemental-links {
-		border-top: 1px solid #444;
-	}
+.supplemental-links {
+	border-top: 1px solid var(--border-color);
 }
 
 @media (max-width: 768px) {

package/vue/components/SidebarNavLink.vue

@@ -105,6 +105,7 @@ a {
 	padding: .75em;
 	border-radius: 0;
 	position: relative;
+	color: var(--text-color);
 }
 
 a.active {
@@ -145,17 +146,13 @@ li.disabled a {
 
 .separator {
 	height: 1px;
-	background-color: #eee;
+	background-color: var(--border-color);
 	margin: 0.5rem 0.75rem;
 }
 
-html[data-theme="dark"] {
-	a {
-		color: #f8f9fa;
-	}
-
-	.separator {
-		background-color: #444;
-	}
+a:hover,
+a:focus-visible {
+	background-color: var(--sidebar-hover-bg-color);
+	color: var(--hover-text-color);
 }
 </style>