picocrank 1.23.1 → 1.25.0

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/FormField.vue

@@ -1,7 +1,35 @@
 <template>
 	<label v-if="!fake" :for="controlId" :class="{ disabled }">{{ label }}</label>
 	<span v-else class="fake-label" :class="{ disabled }">{{ label }}</span>
-	<slot />
+	<div v-if="hasFieldMeta" class="form-field-control">
+		<template v-if="descriptionAbove">
+			<div v-if="description || docsUrl" class="form-field-meta">
+				<p v-if="description" class="subtle form-field-description">{{ description }}</p>
+				<a
+					v-if="docsUrl"
+					class="form-field-docs-link"
+					:href="docsUrl"
+					target="_blank"
+					rel="noopener noreferrer"
+				>{{ docsLinkTitle }}</a>
+			</div>
+			<slot />
+		</template>
+		<template v-else>
+			<slot />
+			<div v-if="description || docsUrl" class="form-field-meta">
+				<p v-if="description" class="subtle form-field-description">{{ description }}</p>
+				<a
+					v-if="docsUrl"
+					class="form-field-docs-link"
+					:href="docsUrl"
+					target="_blank"
+					rel="noopener noreferrer"
+				>{{ docsLinkTitle }}</a>
+			</div>
+		</template>
+	</div>
+	<slot v-else />
 </template>
 
 <script setup>
@@ -12,6 +40,22 @@ const props = defineProps({
 		type: String,
 		required: true,
 	},
+	description: {
+		type: String,
+		default: '',
+	},
+	descriptionAbove: {
+		type: Boolean,
+		default: false,
+	},
+	docsUrl: {
+		type: String,
+		default: '',
+	},
+	docsUrlTitle: {
+		type: String,
+		default: '',
+	},
 	for: {
 		type: String,
 		default: '',
@@ -31,6 +75,8 @@ const props = defineProps({
 })
 
 const controlId = computed(() => props.htmlFor || props.for)
+const hasFieldMeta = computed(() => Boolean(props.description || props.docsUrl))
+const docsLinkTitle = computed(() => props.docsUrlTitle || props.docsUrl)
 </script>
 
 <style scoped>
@@ -39,4 +85,26 @@ label.disabled,
 	color: var(--disabled-text-color);
 	cursor: not-allowed;
 }
+
+.form-field-control {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	width: 100%;
+}
+
+.form-field-meta {
+	display: flex;
+	flex-direction: column;
+	gap: 0.35rem;
+}
+
+.form-field-description {
+	margin: 0;
+}
+
+.form-field-docs-link {
+	font-size: 0.9em;
+	align-self: flex-start;
+}
 </style>

package/vue/components/Header.vue

@@ -205,7 +205,7 @@
 .header-actions :deep(button) {
 	border: 0;
 	border-radius: 0;
-	color: #fff;
+	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-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-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

@@ -420,7 +420,8 @@ button {
 	cursor: pointer;
 }
 
-.nav-section-header:hover {
+.nav-section-header:hover,
+.nav-section-header:focus-visible {
 	background-color: var(--hover-background-color);
 	color: var(--hover-text-color);
 }

package/vue/components/SidebarNavLink.vue

@@ -154,6 +154,12 @@ html[data-theme="dark"] {
 		color: #f8f9fa;
 	}
 
+	a:hover,
+	a:focus-visible {
+		background-color: var(--hover-background-color);
+		color: var(--hover-text-color, #fff);
+	}
+
 	.separator {
 		background-color: #444;
 	}