@karaoke-cms/module-tags 0.18.0 → 0.19.0

package/README.md

@@ -52,6 +52,10 @@ tags: [javascript, tutorial]
 
 No additional frontmatter fields are added by this module.
 
+## What's new in 0.18.2
+
+No user-facing changes in this release.
+
 ## What's new in 0.18.0
 
 - **Dynamic content source indexing** — the tags module now discovers and indexes all enabled content sources (blog and every active docs section) automatically, instead of querying a hardcoded blog collection. Adding or removing modules updates the tag index without any config changes.

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@karaoke-cms/module-tags",
   "type": "module",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "Tags module for karaoke-cms — cross-collection tag index with per-tag RSS feeds",
   "main": "./src/index.ts",
   "exports": {
     ".": "./src/index.ts",
     "./pages/index": "./src/pages/index.astro",
     "./pages/tag": "./src/pages/tag.astro",
-    "./pages/tag-rss": "./src/pages/tag-rss.ts"
+    "./pages/tag-rss": "./src/pages/tag-rss.ts",
+    "./tags-styles.css": "./src/styles/tags-styles.css"
   },
   "files": [
     "src/"
@@ -25,14 +26,14 @@
   },
   "peerDependencies": {
     "astro": ">=6.0.0",
-    "@karaoke-cms/contracts": "^0.18.0",
-    "@karaoke-cms/astro": "^0.18.0"
+    "@karaoke-cms/contracts": "^0.19.0",
+    "@karaoke-cms/astro": "^0.19.0"
   },
   "devDependencies": {
     "astro": "^6.0.8",
     "vitest": "^4.1.1",
-    "@karaoke-cms/contracts": "0.18.0",
-    "@karaoke-cms/astro": "0.18.0"
+    "@karaoke-cms/contracts": "0.19.0",
+    "@karaoke-cms/astro": "0.19.0"
   },
   "scripts": {
     "test": "vitest run test/module-tags.test.js"

package/src/index.ts

@@ -1,6 +1,11 @@
 import type { ModuleInstance } from '@karaoke-cms/contracts';
+import { fileURLToPath } from 'url';
+import { join } from 'path';
 import { cssContract } from './css-contract.js';
 
+const _srcDir = fileURLToPath(new URL('.', import.meta.url));
+const _defaultCssPath = join(_srcDir, 'styles', 'tags-styles.css');
+
 export interface TagsConfig {
   /** Mount path for the tags section. Default: '/tags'. */
   mount?: string;
@@ -36,6 +41,12 @@ export function tags(config: TagsConfig = {}): ModuleInstance {
     id: 'tags',
     mount,
     enabled: config.enabled ?? true,
+    moduleNamespace: 'karaoke.tags',
+    pageVariants: ['list', 'tag'],
+    variantLayouts: {
+      list: { main: [{ component: 'body', weight: 20 }] },
+      tag:  { main: [{ component: 'body', weight: 20 }] },
+    },
     routes: [
       { pattern: mount,                    entrypoint: '@karaoke-cms/module-tags/pages/index' },
       { pattern: `${mount}/[tag]`,         entrypoint: '@karaoke-cms/module-tags/pages/tag' },
@@ -43,8 +54,9 @@ export function tags(config: TagsConfig = {}): ModuleInstance {
     ],
     menuEntries: [{ id: 'tags', name: 'Tags', path: mount, section: 'main', weight: 30 }],
     cssContract,
-    hasDefaultCss: false,
-    defaultCssPath: undefined,
+    hasUx: true,
+    hasDefaultCss: true,
+    defaultCssPath: _defaultCssPath,
     scaffoldPages: undefined,
   };
 }

package/src/styles/tags-styles.css

@@ -0,0 +1,86 @@
+/* Tags module default styles
+ *
+ * Targets the CSS contract class names declared in @karaoke-cms/module-tags.
+ * Themes override these via the cascade: base → modules → theme → app.
+ */
+
+/* ── Tag index page ───────────────────────────────────────────────────────── */
+
+.tag-listing-header {
+    margin-bottom: var(--spacing-lg, 2rem);
+}
+
+.tag-listing-header h1 {
+    font-size: var(--font-size-xl, 1.875rem);
+    margin-bottom: 0;
+}
+
+.tag-list {
+    list-style: none;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs, 0.25rem);
+}
+
+.tag-list li {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm, 0.5rem);
+}
+
+.tag-count {
+    font-size: var(--font-size-sm, 0.875rem);
+    color: var(--color-muted, #737373);
+}
+
+/* ── Per-tag page ─────────────────────────────────────────────────────────── */
+
+.tag-page-header {
+    margin-bottom: var(--spacing-lg, 2rem);
+}
+
+.tag-page-header h1 {
+    font-size: var(--font-size-xl, 1.875rem);
+    margin-bottom: var(--spacing-sm, 0.5rem);
+}
+
+.tag-post-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.tag-post-list li {
+    padding: var(--spacing-sm, 0.5rem) 0;
+    border-bottom: 1px solid var(--color-border, #e5e5e5);
+    display: flex;
+    gap: var(--spacing-md, 1rem);
+    align-items: baseline;
+}
+
+.tag-post-list li:first-child {
+    border-top: 1px solid var(--color-border, #e5e5e5);
+}
+
+.tag-post-date {
+    color: var(--color-muted, #737373);
+    font-size: var(--font-size-sm, 0.875rem);
+    white-space: nowrap;
+    flex-shrink: 0;
+    font-variant-numeric: tabular-nums;
+}
+
+.tag-post-collection {
+    font-size: var(--font-size-sm, 0.875rem);
+    color: var(--color-muted, #737373);
+}
+
+.tag-empty-state {
+    color: var(--color-muted, #737373);
+    padding: var(--spacing-lg, 2rem) 0;
+}
+
+.tag-empty-state p {
+    margin: 0 0 var(--spacing-sm, 0.5rem);
+}