@docmd/template-summer 0.8.6

package/dist/index.js

@@ -0,0 +1,79 @@
+/**
+ * --------------------------------------------------------------------
+ * @docmd/template-summer
+ * A bright, hopeful, summer-feel layout for docmd 0.8.7+.
+ *
+ *   • Top:    logo + (new) centred search bar + menubar at the BOTTOM of the logo bar
+ *   • Side:   clean section list with icons
+ *   • Main:   airy content with right-rail TOC
+ *   • Below:  centred "last updated + edit" footer
+ *
+ * Implements the `template` plugin capability. Partial override set
+ * intentionally small — the resolver will fall back to the default
+ * for any slot not listed here.
+ *
+ * File-system layout: this package ships `.ejs`, `.css`, and `.js` files
+ * alongside the compiled JS. Path resolution uses `import.meta.url`
+ * (URL-relative) so the same code works in dev (`src/index.ts`) and
+ * after `tsc` (`dist/index.js`). The build step copies `templates/` and
+ * `assets/` into `dist/` so the URL math is identical in both places.
+ * --------------------------------------------------------------------
+ */
+import { fileURLToPath } from 'node:url';
+// ── Resolve asset paths relative to this source file ─────────────────────
+//
+// `import.meta.url` points at:
+//   - src/index.ts      (during development / pnpm exec)
+//   - dist/index.js     (after `tsc`)
+//
+// Using `new URL('../templates/...', import.meta.url)` keeps both paths
+// correct as long as the `templates/` and `assets/` directories sit
+// next to the entry point file (one level up from `src/` or `dist/`).
+//
+const here = import.meta.url;
+const urlOf = (relPath) => new URL(relPath, here).href;
+const pathOf = (relPath) => fileURLToPath(urlOf(relPath));
+// ── Plugin descriptor ────────────────────────────────────────────────────
+export const plugin = {
+    name: 'template-summer',
+    version: '0.8.7',
+    capabilities: ['template'],
+};
+// ── Template file overrides ──────────────────────────────────────────────
+const templates = [
+    // Full layout override — biggest change vs default.
+    { type: 'layout', templatePath: pathOf('../templates/layout.ejs') },
+    // Standalone Summer-styled 404 page (uses summer.css, halo gradient, glass card).
+    { type: '404', templatePath: pathOf('../templates/404.ejs') },
+    // Re-style the menubar so it sits below the logo (not above).
+    { type: 'menubar', templatePath: pathOf('../templates/partials/menubar.ejs') },
+    // Tighter, more modern footer.
+    { type: 'footer', templatePath: pathOf('../templates/partials/footer.ejs') },
+    // Right-rail TOC styled for summer + scroll-spy hooks.
+    { type: 'toc', templatePath: pathOf('../templates/toc.ejs') },
+    // Custom options-menu (omits search — we render that in the topbar).
+    { type: 'options-menu', templatePath: pathOf('../templates/partials/options-menu.ejs') },
+];
+// ── Asset bundles ───────────────────────────────────────────────────────
+const templateAssets = [
+    {
+        type: 'css',
+        path: pathOf('../assets/css/summer.css'),
+        // Priority 25 so it loads AFTER plugin CSS (20), giving the template full style precedence.
+        priority: 25,
+        position: 'head',
+    },
+    {
+        type: 'js',
+        path: pathOf('../assets/js/summer.js'),
+        priority: 25,
+        position: 'body',
+    },
+];
+// ── Default export (PluginModule) ────────────────────────────────────────
+const summerTemplate = {
+    plugin,
+    templates,
+    templateAssets,
+};
+export default summerTemplate;

package/dist/templates/404.ejs

@@ -0,0 +1,156 @@
+<!--
+  ============================================================================
+  @docmd/template-summer  —  404.ejs
+
+  Summer-themed 404 page. Standalone HTML so it renders correctly even when
+  the regular layout can't be resolved (e.g. broken template install).
+  Loads assets/css/summer.css (priority 25, set by src/index.ts) and
+  falls back to the project's theme colour overlay if present.
+  ============================================================================
+-->
+<!DOCTYPE html>
+<html lang="<%= (locals.activeLocale && locals.activeLocale.id) ? locals.activeLocale.id : 'en' %>"
+  <%= (locals.activeLocale && locals.activeLocale.dir && locals.activeLocale.dir !== 'ltr') ? ' dir="' + locals.activeLocale.dir + '"' : '' %>>
+<head>
+  <meta charset="UTF-8">
+  <meta name="generator" content="docmd template-summer v0.8.7">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+  <meta name="theme-color" content="#fbfaf6" media="(prefers-color-scheme: light)">
+  <meta name="theme-color" content="#13110d" media="(prefers-color-scheme: dark)">
+  <title>404 · <%= siteTitle || 'docmd' %></title>
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
+
+  <link rel="stylesheet" href="<%= relativePathToRoot %>assets/css/summer.css?v=<%= buildHash %>">
+
+  <% if (theme && theme.name && theme.name !== 'default') { %>
+    <link rel="stylesheet" href="<%= relativePathToRoot %>assets/css/docmd-theme-<%= theme.name %>.css?v=<%= buildHash %>">
+  <% } %>
+
+  <% (customCssFiles || []).forEach(cssFile => {
+    const cleanPath = cssFile.startsWith('/') ? cssFile.substring(1) : cssFile;
+  %>
+    <link rel="stylesheet" href="<%= relativePathToRoot %><%= cleanPath %>?v=<%= buildHash %>">
+  <% }); %>
+
+  <%- themeInitScript %>
+
+  <style>
+    .summer-404 {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      min-height: 100vh;
+      text-align: center;
+      padding: 24px;
+      position: relative;
+      overflow: hidden;
+    }
+    .summer-404::before {
+      content: "";
+      position: absolute;
+      top: -30%;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 720px;
+      height: 720px;
+      max-width: 140vw;
+      background: radial-gradient(circle at center, var(--summer-halo, rgba(255, 196, 84, 0.18)) 0%, transparent 65%);
+      filter: blur(20px);
+      pointer-events: none;
+      z-index: 0;
+    }
+    .summer-404__card {
+      position: relative;
+      z-index: 1;
+      max-width: 520px;
+      padding: 40px 32px;
+      border-radius: 20px;
+      background: var(--summer-card-bg, rgba(255, 255, 255, 0.6));
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+      border: 1px solid var(--summer-border, rgba(0, 0, 0, 0.06));
+      box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.12);
+    }
+    .summer-404__code {
+      font-size: 7rem;
+      line-height: 1;
+      font-weight: 800;
+      letter-spacing: -0.04em;
+      margin: 0 0 8px;
+      background: linear-gradient(135deg, #ffb347 0%, #ff6b6b 50%, #c084fc 100%);
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+      color: transparent;
+    }
+    .summer-404__title {
+      font-size: 1.5rem;
+      font-weight: 600;
+      margin: 0 0 8px;
+      color: var(--text-color, #1a1a1a);
+    }
+    .summer-404__msg {
+      font-size: 1rem;
+      line-height: 1.6;
+      color: var(--text-muted, #6b6b6b);
+      margin: 0 0 28px;
+    }
+    .summer-404__actions {
+      display: flex;
+      gap: 12px;
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+    .summer-404__btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 10px 20px;
+      border-radius: 10px;
+      font-size: 0.95rem;
+      font-weight: 500;
+      text-decoration: none;
+      transition: transform 0.15s ease, box-shadow 0.15s ease;
+    }
+    .summer-404__btn--primary {
+      background: linear-gradient(135deg, #ffb347 0%, #ff8c5a 100%);
+      color: #fff;
+      box-shadow: 0 4px 14px -4px rgba(255, 140, 90, 0.5);
+    }
+    .summer-404__btn--primary:hover { transform: translateY(-1px); }
+    .summer-404__btn--ghost {
+      background: transparent;
+      color: var(--text-color, #1a1a1a);
+      border: 1px solid var(--summer-border, rgba(0, 0, 0, 0.12));
+    }
+    .summer-404__btn--ghost:hover { background: rgba(0, 0, 0, 0.04); }
+    :root[data-theme="dark"] .summer-404__card,
+    :root[data-theme="dark"] .summer-404__btn--ghost:hover {
+      background: rgba(30, 28, 24, 0.7);
+    }
+  </style>
+</head>
+<body>
+  <main class="summer-404" role="main">
+    <div class="summer-404__card">
+      <div class="summer-404__code" aria-hidden="true">404</div>
+      <h1 class="summer-404__title"><%= typeof t === 'function' ? t('pageNotFound') : 'Page not found' %></h1>
+      <p class="summer-404__msg"><%= content || (typeof t === 'function' ? t('pageNotFoundMsg') : 'The page you’re looking for doesn’t exist or has moved.') %></p>
+      <div class="summer-404__actions">
+        <a href="<%= relativePathToRoot %>" class="summer-404__btn summer-404__btn--primary">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+          <%= typeof t === 'function' ? t('returnHome') : 'Return home' %>
+        </a>
+        <a href="javascript:history.length > 1 ? history.back() : (location.href = '<%= relativePathToRoot %>')" class="summer-404__btn summer-404__btn--ghost">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5M12 19l-7-7 7-7"></path></svg>
+          <%= typeof t === 'function' ? t('goBack') : 'Go back' %>
+        </a>
+      </div>
+    </div>
+  </main>
+</body>
+</html>