docula 1.9.1 → 1.10.1

package/dist/docula.d.ts

@@ -139,6 +139,7 @@ type DoculaChangelogEntry = {
     content: string;
     generatedHtml: string;
     preview: string;
+    draft?: boolean;
     previewImage?: string;
     urlPath: string;
     lastModified: string;
@@ -180,6 +181,7 @@ type DoculaData = {
     enableLlmsTxt?: boolean;
     hasFeed?: boolean;
     lastModified?: string;
+    homeUrl?: string;
     baseUrl: string;
     docsPath: string;
     apiPath: string;
@@ -334,6 +336,11 @@ declare class DoculaOptions {
      * When true, suppresses all non-error console output during the build.
      */
     quiet: boolean;
+    /**
+     * URL for the logo/home link in the header. Defaults to baseUrl or "/".
+     * Useful when hosting docs under a subpath but the logo should link to the parent site.
+     */
+    homeUrl?: string;
     /**
      * Base URL path prefix for all generated paths (e.g., "/docs").
      * When set, all asset and navigation URLs are prefixed with this path.

package/dist/docula.js

@@ -1307,7 +1307,10 @@ import path5 from "path";
 import { Writr as Writr4 } from "writr";
 var writrOptions4 = {
   throwOnEmitError: false,
-  throwOnEmptyListeners: false
+  throwOnEmptyListeners: false,
+  renderOptions: {
+    rawHtml: true
+  }
 };
 function getChangelogEntries(changelogPath, options, hash, cachedEntries, previousHashes, currentHashes) {
   const entries = [];
@@ -1330,6 +1333,9 @@ function getChangelogEntries(changelogPath, options, hash, cachedEntries, previo
         }
       }
       const entry = parseChangelogEntry(filePath, options);
+      if (entry.draft) {
+        continue;
+      }
       entries.push(entry);
     }
   }
@@ -1375,6 +1381,7 @@ function parseChangelogEntry(filePath, options) {
     });
   }
   const previewImage = matterData.previewImage;
+  const draft = matterData.draft === true;
   return {
     title: matterData.title ?? fileName,
     date: dateString,
@@ -1387,6 +1394,7 @@ function parseChangelogEntry(filePath, options) {
       mdx: isMdx
     }),
     preview: generateChangelogPreview(markdownContent, 500, isMdx),
+    draft,
     previewImage,
     urlPath: `${buildUrlPath(options.baseUrl, options.changelogPath, slug)}/index.html`,
     lastModified: fs5.statSync(filePath).mtime.toISOString().split("T")[0]
@@ -1402,7 +1410,53 @@ function generateChangelogPreview(markdown, maxLength = 500, mdx = false) {
   if (cleaned.length <= minLength) {
     return new Writr4(cleaned, writrOptions4).renderSync({ mdx });
   }
-  const searchArea = cleaned.slice(0, maxLength);
+  const htmlBlocks = [];
+  const tagPattern = /<\/?(\w+)\b[^>]*>/g;
+  const blockStarts = [];
+  for (const tagMatch of cleaned.matchAll(tagPattern)) {
+    const fullMatch = tagMatch[0];
+    const tagName = tagMatch[1];
+    const isClosing = fullMatch.startsWith("</");
+    if (isClosing) {
+      for (let i = blockStarts.length - 1; i >= 0; i--) {
+        if (blockStarts[i].tag === tagName) {
+          if (blockStarts[i].depth === 0) {
+            htmlBlocks.push({
+              start: blockStarts[i].index,
+              end: tagMatch.index + fullMatch.length
+            });
+            blockStarts.splice(i, 1);
+          } else {
+            blockStarts[i].depth--;
+          }
+          break;
+        }
+      }
+    } else if (!fullMatch.endsWith("/>")) {
+      const existing = blockStarts.find((s) => s.tag === tagName);
+      if (existing) {
+        existing.depth++;
+      } else {
+        blockStarts.push({ tag: tagName, index: tagMatch.index, depth: 0 });
+      }
+    }
+  }
+  let effectiveMax = maxLength;
+  let extended = true;
+  while (extended) {
+    extended = false;
+    for (const block of htmlBlocks) {
+      if (effectiveMax > block.start && effectiveMax < block.end) {
+        let end = block.end;
+        while (end < cleaned.length && cleaned[end] === "\n") {
+          end++;
+        }
+        effectiveMax = end;
+        extended = true;
+      }
+    }
+  }
+  const searchArea = cleaned.slice(0, effectiveMax);
   let splitIndex = -1;
   let pos = searchArea.lastIndexOf("\n\n");
   while (pos >= 0) {
@@ -1429,7 +1483,7 @@ function generateChangelogPreview(markdown, maxLength = 500, mdx = false) {
       let lastItemEnd = -1;
       for (const line of lines) {
         const lineEnd = charCount + line.length;
-        if (lineEnd <= maxLength && (/^[-*]\s/.test(line) || /^\d+\.\s/.test(line))) {
+        if (lineEnd <= effectiveMax && (/^[-*]\s/.test(line) || /^\d+\.\s/.test(line))) {
           if (charCount > 0 && charCount >= minLength) {
             lastItemEnd = charCount - 1;
           }
@@ -1445,7 +1499,7 @@ function generateChangelogPreview(markdown, maxLength = 500, mdx = false) {
     const truncated2 = cleaned.slice(0, splitIndex).trim();
     return new Writr4(truncated2, writrOptions4).renderSync({ mdx });
   }
-  let truncated = cleaned.slice(0, maxLength);
+  let truncated = cleaned.slice(0, effectiveMax);
   const lastSpace = truncated.lastIndexOf(" ");
   if (lastSpace > 0) {
     truncated = truncated.slice(0, lastSpace);
@@ -2918,6 +2972,11 @@ var DoculaOptions = class {
    * When true, suppresses all non-error console output during the build.
    */
   quiet = false;
+  /**
+   * URL for the logo/home link in the header. Defaults to baseUrl or "/".
+   * Useful when hosting docs under a subpath but the logo should link to the parent site.
+   */
+  homeUrl;
   /**
    * Base URL path prefix for all generated paths (e.g., "/docs").
    * When set, all asset and navigation URLs are prefixed with this path.
@@ -3074,6 +3133,9 @@ var DoculaOptions = class {
     if (options.cache && typeof options.cache === "object" && options.cache.github !== null && typeof options.cache.github === "object" && typeof options.cache.github.ttl === "number") {
       this.cache = options.cache;
     }
+    if (options.homeUrl !== void 0 && typeof options.homeUrl === "string") {
+      this.homeUrl = options.homeUrl === "/" ? "/" : trimTrailingSlashes(options.homeUrl);
+    }
     if (options.baseUrl !== void 0 && typeof options.baseUrl === "string") {
       this.baseUrl = trimTrailingSlashes(options.baseUrl);
     }
@@ -3229,6 +3291,7 @@ var DoculaBuilder = class {
       cookieAuth: this.options.cookieAuth,
       headerLinks: this.options.headerLinks,
       enableLlmsTxt: this.options.enableLlmsTxt,
+      homeUrl: this.options.homeUrl,
       baseUrl: this.options.baseUrl,
       docsPath: this.options.docsPath,
       apiPath: this.options.apiPath,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docula",
-  "version": "1.9.1",
+  "version": "1.10.1",
   "description": "Beautiful Website for Your Projects",
   "type": "module",
   "main": "./dist/docula.js",
@@ -48,14 +48,14 @@
     "colorette": "^2.0.20",
     "ecto": "^4.8.3",
     "feed": "^5.2.0",
-    "hashery": "^1.5.0",
+    "hashery": "^1.5.1",
     "jiti": "^2.6.1",
     "serve-handler": "^6.1.7",
     "update-notifier": "^7.3.1",
-    "writr": "^6.0.1"
+    "writr": "^6.1.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.4.7",
+    "@biomejs/biome": "^2.4.8",
     "@playwright/test": "^1.58.2",
     "@types/express": "^5.0.6",
     "@types/js-yaml": "^4.0.9",

package/templates/modern/css/styles.css

@@ -68,10 +68,12 @@ body {
   gap: 12px;
 }
 
+.logo-link { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--fg); }
 .logo__img {
   height: 75px;
   width: auto;
 }
+.logo__text { font-size: 18px; font-weight: 600; }
 
 .theme-button {
   border: 1px solid transparent;
@@ -354,8 +356,17 @@ body {
 .article__main li, .release-body li, .changelog-entry-body li, .home-content li { margin-bottom: 6px; list-style: disc; }
 .article__main ol li, .release-body ol li, .changelog-entry-body ol li, .home-content ol li { list-style: decimal; }
 .article__main a, .release-body a, .changelog-entry-body a, .home-content a { color: var(--link); text-decoration: underline; }
-.article__main pre, .release-body pre, .changelog-entry-body pre, .home-content pre { background: var(--pre-bg); border-radius: 6px; padding: 12px 16px; margin-bottom: 20px; overflow-x: auto; }
+.article__main pre, .release-body pre, .changelog-entry-body pre, .home-content pre { background: var(--pre-bg); border-radius: 6px; padding: 12px 16px; margin-bottom: 20px; overflow-x: auto; position: relative; }
 .article__main pre code, .release-body pre code, .changelog-entry-body pre code, .home-content pre code { background: none; padding: 0; font-size: 13.5px; line-height: 1.5; }
+.copy-code-btn { position: absolute; top: 8px; right: 8px; padding: 4px; line-height: 0; border-radius: 4px; background: transparent; color: var(--muted); border: none; cursor: pointer; opacity: 0; transition: opacity 0.15s; }
+pre:hover .copy-code-btn { opacity: 1; }
+.copy-code-btn:hover { color: var(--fg); }
+.article__main img, .changelog-entry-body img { cursor: zoom-in; }
+.lightbox-overlay { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, 0.8); justify-content: center; align-items: center; cursor: pointer; }
+.lightbox-overlay--visible { display: flex !important; }
+.lightbox-overlay img { max-width: 90vw; max-height: 90vh; border-radius: 8px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); cursor: default; }
+.lightbox-close { position: absolute; top: 16px; right: 16px; background: none; border: none; color: #fff; cursor: pointer; padding: 4px; line-height: 0; }
+.lightbox-close:hover { opacity: 0.7; }
 .article__main blockquote, .release-body blockquote, .changelog-entry-body blockquote, .home-content blockquote { border-left: 3px solid var(--border-strong); padding: 10px 16px; margin-bottom: 15px; color: var(--muted); }
 .article__main img, .release-body img, .changelog-entry-body img, .home-content img { max-width: 100%; border-radius: 6px; }
 .article__main table, .release-body table, .changelog-entry-body table, .home-content table { width: 100%; border-collapse: collapse; margin-bottom: 15px; }
@@ -799,6 +810,11 @@ body {
   color: var(--muted);
 }
 
+.changelog-entry-preview img {
+  max-width: 100%;
+  border-radius: 6px;
+}
+
 .changelog-read-more {
   display: inline-block;
   margin-top: 8px;

package/templates/modern/includes/header-bar.hbs

@@ -4,10 +4,17 @@
       <button class="mobile-menu-toggle" id="mobile-menu-toggle" aria-label="Toggle navigation menu">
         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
       </button>
-      <a href="{{baseUrl}}/">
+      <a href="{{baseUrl}}/" class="logo-link">
         <img alt="{{siteTitle}}" class="logo__img" src="{{baseUrl}}/logo.svg">
+        <span class="logo__text">{{siteTitle}}</span>
       </a>
       <nav class="header-bottom__nav">
+        {{#if homeUrl}}
+        <a class="header-bottom__item header-bottom__item--home" href="{{homeUrl}}">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
+          <span>Back to Home</span>
+        </a>
+        {{/if}}
         {{#if hasDocuments}}
         <a class="header-bottom__item" href="{{docsUrl}}/" id="nav-docs">
           <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 7v14"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>
@@ -67,6 +74,12 @@
 </header>
 <aside class="mobile-sidebar" id="mobile-sidebar">
   <nav class="mobile-nav">
+    {{#if homeUrl}}
+    <a class="mobile-nav__item" href="{{homeUrl}}">
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
+      <span>Back to Home</span>
+    </a>
+    {{/if}}
     {{#if hasDocuments}}
     <a class="mobile-nav__item" href="{{docsUrl}}/">
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 7v14"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>

package/templates/modern/includes/scripts.hbs

@@ -5,6 +5,25 @@
     hljs.highlightAll();
     var kbd = document.querySelector('.search-button__shortcut');
     if (kbd) kbd.textContent = navigator.platform.indexOf('Mac') > -1 ? '⌘K' : 'Ctrl K';
+
+    // Copy code buttons
+    const copyIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
+    const checkIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';
+    document.querySelectorAll('pre').forEach(function(pre) {
+      const btn = document.createElement('button');
+      btn.className = 'copy-code-btn';
+      btn.innerHTML = copyIcon;
+      btn.setAttribute('aria-label', 'Copy code');
+      btn.addEventListener('click', function() {
+        const code = pre.querySelector('code');
+        const text = code ? code.textContent : pre.textContent;
+        navigator.clipboard.writeText(text || '').then(function() {
+          btn.innerHTML = checkIcon;
+          setTimeout(function() { btn.innerHTML = copyIcon; }, 2000);
+        });
+      });
+      pre.appendChild(btn);
+    });
   });
 </script>
 <script>
@@ -115,6 +134,7 @@
     function setAuthUI(loggedIn, displayName) {
       window.__doculaAuth = { loggedIn: loggedIn, displayName: displayName };
       try { localStorage.setItem('docula-auth-state', JSON.stringify(window.__doculaAuth)); } catch(e) {}
+      document.documentElement.classList.toggle('docula-auth-logged-in', loggedIn);
       document.dispatchEvent(new CustomEvent('docula-auth-change'));
       var els = [
         { login: document.getElementById('cookie-auth-login'), logout: document.getElementById('cookie-auth-logout'), user: document.getElementById('cookie-auth-user') },
@@ -243,5 +263,29 @@
       const aside = tocSidebar.closest('.content-aside');
       if (aside) { aside.style.display = 'none'; }
     }
+
+    // Image lightbox
+    const lightboxOverlay = document.createElement('div');
+    lightboxOverlay.className = 'lightbox-overlay';
+    lightboxOverlay.addEventListener('click', function(e) {
+      if (e.target !== lightboxImg) lightboxOverlay.classList.remove('lightbox-overlay--visible');
+    });
+    const lightboxClose = document.createElement('button');
+    lightboxClose.className = 'lightbox-close';
+    lightboxClose.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';
+    lightboxClose.addEventListener('click', function() {
+      lightboxOverlay.classList.remove('lightbox-overlay--visible');
+    });
+    const lightboxImg = document.createElement('img');
+    lightboxOverlay.appendChild(lightboxClose);
+    lightboxOverlay.appendChild(lightboxImg);
+    document.body.appendChild(lightboxOverlay);
+
+    document.querySelectorAll('.article__main img, .changelog-entry-body img').forEach(function(img) {
+      img.addEventListener('click', function() {
+        lightboxImg.src = img.src;
+        lightboxOverlay.classList.add('lightbox-overlay--visible');
+      });
+    });
   });
 </script>