docula 1.9.0 → 1.10.0

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

@@ -1330,6 +1330,9 @@ function getChangelogEntries(changelogPath, options, hash, cachedEntries, previo
         }
       }
       const entry = parseChangelogEntry(filePath, options);
+      if (entry.draft) {
+        continue;
+      }
       entries.push(entry);
     }
   }
@@ -1375,6 +1378,7 @@ function parseChangelogEntry(filePath, options) {
     });
   }
   const previewImage = matterData.previewImage;
+  const draft = matterData.draft === true;
   return {
     title: matterData.title ?? fileName,
     date: dateString,
@@ -1387,8 +1391,9 @@ function parseChangelogEntry(filePath, options) {
       mdx: isMdx
     }),
     preview: generateChangelogPreview(markdownContent, 500, isMdx),
+    draft,
     previewImage,
-    urlPath: `/${options.changelogPath}/${slug}/index.html`,
+    urlPath: `${buildUrlPath(options.baseUrl, options.changelogPath, slug)}/index.html`,
     lastModified: fs5.statSync(filePath).mtime.toISOString().split("T")[0]
   };
 }
@@ -1485,7 +1490,7 @@ function convertReleaseToChangelogEntry(release, options) {
     content: body,
     generatedHtml: new Writr4(body, writrOptions4).renderSync(),
     preview: generateChangelogPreview(body),
-    urlPath: `/${options.changelogPath}/${slug}/index.html`,
+    urlPath: `${buildUrlPath(options.baseUrl, options.changelogPath, slug)}/index.html`,
     lastModified: dateString
   };
 }
@@ -2918,6 +2923,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 +3084,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 +3242,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.0",
+  "version": "1.10.0",
   "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/classic/changelog-entry.hbs

@@ -58,7 +58,7 @@
   <main class="versions-container">
     <div class="versions-content">
       <div class="changelog-entry-nav">
-        <a href="/changelog/">&larr; Back to Changelog</a>
+        <a href="{{changelogUrl}}/">&larr; Back to Changelog</a>
       </div>
       <div class="changelog-entry changelog-entry-single">
         <div class="changelog-entry-header">

package/templates/classic/changelog.hbs

@@ -62,7 +62,7 @@
       {{#each entries as |entry|}}
       <div class="changelog-entry">
         <div class="changelog-entry-header">
-          <a class="changelog-entry-title" href="/changelog/{{entry.slug}}/">{{entry.title}}</a>
+          <a class="changelog-entry-title" href="{{@root.changelogUrl}}/{{entry.slug}}/">{{entry.title}}</a>
           {{#if entry.tag}}
           <span class="changelog-tag changelog-tag-{{entry.tagClass}}">{{entry.tag}}</span>
           {{/if}}

package/templates/classic/includes/multipage/home.hbs

@@ -49,7 +49,7 @@
 
         {{#if (gt github.releases.length 6)}}
         <div>
-            <a class="release-btn" href="/changelog">
+            <a class="release-btn" href="{{changelogUrl}}/">
                 Full Changelog
                 <span>→</span>
             </a>

package/templates/classic/includes/singlepage/content.hbs

@@ -51,7 +51,7 @@
 
         {{#if (gt github.releases.length 6)}}
           <div>
-            <a class="release-btn" href="/changelog">
+            <a class="release-btn" href="{{changelogUrl}}/">
               Full Changelog
               <span>→</span>
             </a>

package/templates/modern/changelog.hbs

@@ -17,7 +17,7 @@
         {{#each entries as |entry|}}
         <div class="changelog-entry">
           <div class="changelog-entry-header">
-            <a class="changelog-entry-title" href="{{changelogUrl}}/{{entry.slug}}/">{{entry.title}}</a>
+            <a class="changelog-entry-title" href="{{@root.changelogUrl}}/{{entry.slug}}/">{{entry.title}}</a>
             {{#if entry.tag}}
             <span class="changelog-tag changelog-tag-{{entry.tagClass}}">{{entry.tag}}</span>
             {{/if}}

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; }

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>
@@ -21,7 +28,7 @@
         </a>
         {{/if}}
         {{#if hasChangelog}}
-        <a class="header-bottom__item" href="{{changelogUrl}}" id="nav-changelog">
+        <a class="header-bottom__item" href="{{changelogUrl}}/" id="nav-changelog">
           <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="M11 6a13 13 0 0 0 8.4-2.8A1 1 0 0 1 21 4v12a1 1 0 0 1-1.6.8A13 13 0 0 0 11 14H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z"/><path d="M6 14a12 12 0 0 0 2.4 7.2 2 2 0 0 0 3.2-2.4A8 8 0 0 1 10 14"/><path d="M8 6v8"/></svg>
           <span>Changelog</span>
         </a>
@@ -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>
@@ -80,7 +93,7 @@
     </a>
     {{/if}}
     {{#if hasChangelog}}
-    <a class="mobile-nav__item" href="{{changelogUrl}}">
+    <a class="mobile-nav__item" href="{{changelogUrl}}/">
       <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="M11 6a13 13 0 0 0 8.4-2.8A1 1 0 0 1 21 4v12a1 1 0 0 1-1.6.8A13 13 0 0 0 11 14H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z"/><path d="M6 14a12 12 0 0 0 2.4 7.2 2 2 0 0 0 3.2-2.4A8 8 0 0 1 10 14"/><path d="M8 6v8"/></svg>
       <span>Changelog</span>
     </a>

package/templates/modern/includes/home.hbs

@@ -34,7 +34,7 @@
 
     {{#if (gt github.releases.length 6)}}
     <div>
-      <a class="release-btn" href="{{changelogUrl}}">
+      <a class="release-btn" href="{{changelogUrl}}/">
         Full Changelog
         <span>&rarr;</span>
       </a>

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>
@@ -243,5 +262,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>