project-logbook 0.4.0 → 0.4.1

package/dist/commands/build.js

@@ -5,7 +5,7 @@ import { getConfig, getWorkspaces, getLogbookDirPath, getOutputDirPath } from '.
 import { layout, timelineTemplate } from '../lib/templates.js';
 import { buildProjectMdFiles, renderPost, generateBuildMeta } from '../lib/build-helpers.js';
 import { getGitCommits, getGitTags } from '../lib/git-helpers.js';
-import { setupOutputDirectory, processReadme, copyReadmeImages, processAboutContent } from '../lib/build-steps.js';
+import { setupOutputDirectory, processReadme, copyReadmeImages, processAboutContent, processWelcomeContent, } from '../lib/build-steps.js';
 import { formatAbsoluteDate, getMonthYear, getSortTime, formatDateTimeForDisplay } from '../utils/date.js';
 import { getLogbookEntries } from '../utils/fs.js';
 import { toDisplayString, asString, asStringArray } from '../utils/frontmatter.js';
@@ -29,6 +29,7 @@ export async function build() {
     const { html: readmeHtml, imagePaths: readmeImages } = await processReadme(projectRoot);
     await copyReadmeImages(projectRoot, outputDir, readmeImages);
     const aboutHtml = await processAboutContent(getAboutContent());
+    const welcomeHtml = await processWelcomeContent();
     const logbookEntries = await getLogbookEntries(logbookDir);
     const timelineEntries = [];
     const availableWorkspaces = getWorkspaces();
@@ -129,6 +130,7 @@ export async function build() {
             groups: pageGroups,
             readmeHtml,
             aboutHtml,
+            welcomeHtml,
             jiraBaseUrl: config.jiraBaseUrl,
             jiraPrefix: config.jiraPrefix,
             repositoryUrl: config.repositoryUrl,

package/dist/lib/build-steps.d.ts

@@ -18,3 +18,7 @@ export declare function copyReadmeImages(projectRoot: string, outputDir: string,
  * Process the About content and return rendered HTML.
  */
 export declare function processAboutContent(aboutContent: string): Promise<string>;
+/**
+ * Process the Welcome content and return rendered HTML.
+ */
+export declare function processWelcomeContent(): Promise<string>;

package/dist/lib/build-steps.js

@@ -5,7 +5,7 @@
 import fs from 'fs-extra';
 import { join } from 'node:path';
 import { warning } from './theme.js';
-import { URL } from 'node:url';
+import { URL, fileURLToPath } from 'node:url';
 import { mdToHtmlWithImages, copyImages } from './image-helpers.js';
 import { getStyles } from './styles.js';
 import { getClientScript } from './logbook-client.js';
@@ -55,3 +55,20 @@ export async function copyReadmeImages(projectRoot, outputDir, imagePaths) {
 export async function processAboutContent(aboutContent) {
     return await mdToHtml(aboutContent);
 }
+/**
+ * Process the Welcome content and return rendered HTML.
+ */
+export async function processWelcomeContent() {
+    try {
+        const welcomeUrl = new URL('../templates/WELCOME.md', import.meta.url);
+        const welcomePath = fileURLToPath(welcomeUrl);
+        if (await fs.pathExists(welcomePath)) {
+            const welcomeContent = await fs.readFile(welcomePath, 'utf8');
+            return await mdToHtml(welcomeContent);
+        }
+    }
+    catch (error) {
+        console.warn(warning(`Warning: Failed to read WELCOME.md: ${error instanceof Error ? error.message : error}`));
+    }
+    return '';
+}

package/dist/lib/template-types.d.ts

@@ -16,6 +16,7 @@ export interface TimelineTemplateProps {
     groups: TimelineGroup[];
     readmeHtml: string;
     aboutHtml: string;
+    welcomeHtml?: string;
     jiraBaseUrl?: string;
     jiraPrefix?: string;
     repositoryUrl?: string;

package/dist/lib/templates.js

@@ -31,12 +31,19 @@ export const layout = ({ title, header, content, projectName, basePath = './', d
     <script src="${basePath}logbook.js"></script>
 </body></html>`;
 export const timelineTemplate = (props) => {
-    const { projectName, groups, readmeHtml, aboutHtml, jiraBaseUrl, jiraPrefix, repositoryUrl, currentPage, totalPages, } = props;
-    const timelineTab = html `<div class="timeline">
-    ${groups
+    const { projectName, groups, readmeHtml, aboutHtml, welcomeHtml, jiraBaseUrl, jiraPrefix, repositoryUrl, currentPage, totalPages, } = props;
+    const welcomeBannerHtml = welcomeHtml
+        ? `<div id="welcome-banner" class="welcome-banner" style="display:none;">
+         <button id="welcome-banner-close" class="welcome-banner-close" aria-label="Dismiss welcome banner">&times;</button>
+         <div class="welcome-banner-content">${welcomeHtml}</div>
+       </div>`
+        : '';
+    const timelineTab = html `${welcomeBannerHtml}
+    <div class="timeline">
+      ${groups
         .map((g) => html `<section class="month-group">
-            <h2>${g.month}</h2>
-            ${g.items
+              <h2>${g.month}</h2>
+              ${g.items
         .map((item) => {
         if (item.kind === 'entry')
             return renderTimelineEntryItem(item);
@@ -45,10 +52,10 @@ export const timelineTemplate = (props) => {
         return renderTimelineCommitItem(item, jiraBaseUrl, jiraPrefix, repositoryUrl);
     })
         .join('')}
-          </section>`)
+            </section>`)
         .join('')}
-    ${paginationLinks(currentPage, totalPages)}
-  </div>`;
+      ${paginationLinks(currentPage, totalPages)}
+    </div>`;
     const header = html `<header>
     <h1><a href="./index.html">${escapeHtml(projectName)}</a></h1>
     <p class="tagline">A brief summary of the recent changes to the project.</p>

package/dist/templates/WELCOME.md

@@ -0,0 +1,12 @@
+# Welcome to the Project Logbook!
+
+This website is a **Project Logbook** — a chronological timeline of this project's evolution, design decisions, and development history.
+
+Unlike traditional static documentation, a logbook behaves like a **dev log** or **news feed** of the codebase. Each item in the timeline below represents a completed feature or bugfix, containing:
+- **Original Specifications:** The initial requirements and user stories.
+- **Technical Log:** Step-by-step notes and decisions made during development.
+- **The Story:** An engaging narrative explaining the rationale, pivots, and solutions.
+
+Click around to explore how this project was built step by step!
+
+Wait, did we mention it has an [**RSS Feed**](rss.xml)? Yes, you can subscribe to stay updated on new logbook entries in real-time!

package/dist/templates/logbook-client.js

@@ -168,6 +168,32 @@
     }
   }
 
+  /* ── 4. Welcome banner functionality ────────────────────────────────────── */
+  function initWelcomeBanner() {
+    var banner = document.getElementById('welcome-banner');
+    if (!banner) return;
+    try {
+      if (localStorage.getItem('welcome-banner-dismissed') !== 'true') {
+        banner.style.display = 'block';
+      }
+    } catch (e) {
+      // In case localStorage is disabled/unavailable, default to showing
+      banner.style.display = 'block';
+    }
+
+    var closeBtn = document.getElementById('welcome-banner-close');
+    if (closeBtn) {
+      closeBtn.addEventListener('click', function () {
+        banner.style.display = 'none';
+        try {
+          localStorage.setItem('welcome-banner-dismissed', 'true');
+        } catch (e) {
+          /* localStorage unavailable */
+        }
+      });
+    }
+  }
+
   /* ── Bootstrap ─────────────────────────────────────────────────────────── */
   document.addEventListener('DOMContentLoaded', function () {
     updateRelativeDates();
@@ -181,6 +207,9 @@
 
     // Initialize tab functionality
     initTabs();
+
+    // Initialize welcome banner if present
+    initWelcomeBanner();
   });
 
   // Expose showTab globally for onclick handlers

package/dist/templates/styles.css

@@ -812,3 +812,69 @@ article img[src$='.svg'] {
   font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
   font-size: 0.8125rem;
 }
+
+/* Welcome Banner */
+.welcome-banner {
+  background: var(--bg-card, #ffffff);
+  border: 1px solid var(--border, #e2e8f0);
+  padding: 1.5rem;
+  border-radius: 0.5rem;
+  margin-top: 1.5rem;
+  margin-bottom: 2rem;
+  position: relative;
+  box-shadow:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px -1px rgba(0, 0, 0, 0.1);
+}
+
+.welcome-banner-content h1 {
+  font-size: 1.25rem;
+  margin-top: 0;
+  margin-bottom: 0.75rem;
+  color: var(--text-main, #1e293b);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.welcome-banner-content p {
+  margin: 0 0 0.75rem 0;
+  line-height: 1.5;
+  color: var(--text, #334155);
+}
+
+.welcome-banner-content ul {
+  margin: 0 0 1rem 0;
+  padding-left: 1.25rem;
+  color: var(--text, #334155);
+}
+
+.welcome-banner-content li {
+  margin-bottom: 0.5rem;
+  line-height: 1.4;
+}
+
+.welcome-banner-close {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  background: none;
+  border: none;
+  font-size: 1.25rem;
+  cursor: pointer;
+  color: var(--text-muted, #64748b);
+  line-height: 1;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    background-color 0.2s,
+    color 0.2s;
+}
+
+.welcome-banner-close:hover {
+  background-color: var(--primary-soft, #f0fdf4);
+  color: var(--text-main, #1e293b);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-logbook",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "A command-line tool for project logbooks.",
   "workspaces": [
     "demo-app"

package/src/templates/WELCOME.md

@@ -0,0 +1,12 @@
+# Welcome to the Project Logbook!
+
+This website is a **Project Logbook** — a chronological timeline of this project's evolution, design decisions, and development history.
+
+Unlike traditional static documentation, a logbook behaves like a **dev log** or **news feed** of the codebase. Each item in the timeline below represents a completed feature or bugfix, containing:
+- **Original Specifications:** The initial requirements and user stories.
+- **Technical Log:** Step-by-step notes and decisions made during development.
+- **The Story:** An engaging narrative explaining the rationale, pivots, and solutions.
+
+Click around to explore how this project was built step by step!
+
+Wait, did we mention it has an [**RSS Feed**](rss.xml)? Yes, you can subscribe to stay updated on new logbook entries in real-time!

package/src/templates/logbook-client.js

@@ -168,6 +168,32 @@
     }
   }
 
+  /* ── 4. Welcome banner functionality ────────────────────────────────────── */
+  function initWelcomeBanner() {
+    var banner = document.getElementById('welcome-banner');
+    if (!banner) return;
+    try {
+      if (localStorage.getItem('welcome-banner-dismissed') !== 'true') {
+        banner.style.display = 'block';
+      }
+    } catch (e) {
+      // In case localStorage is disabled/unavailable, default to showing
+      banner.style.display = 'block';
+    }
+
+    var closeBtn = document.getElementById('welcome-banner-close');
+    if (closeBtn) {
+      closeBtn.addEventListener('click', function () {
+        banner.style.display = 'none';
+        try {
+          localStorage.setItem('welcome-banner-dismissed', 'true');
+        } catch (e) {
+          /* localStorage unavailable */
+        }
+      });
+    }
+  }
+
   /* ── Bootstrap ─────────────────────────────────────────────────────────── */
   document.addEventListener('DOMContentLoaded', function () {
     updateRelativeDates();
@@ -181,6 +207,9 @@
 
     // Initialize tab functionality
     initTabs();
+
+    // Initialize welcome banner if present
+    initWelcomeBanner();
   });
 
   // Expose showTab globally for onclick handlers

package/src/templates/styles.css

@@ -812,3 +812,69 @@ article img[src$='.svg'] {
   font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
   font-size: 0.8125rem;
 }
+
+/* Welcome Banner */
+.welcome-banner {
+  background: var(--bg-card, #ffffff);
+  border: 1px solid var(--border, #e2e8f0);
+  padding: 1.5rem;
+  border-radius: 0.5rem;
+  margin-top: 1.5rem;
+  margin-bottom: 2rem;
+  position: relative;
+  box-shadow:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px -1px rgba(0, 0, 0, 0.1);
+}
+
+.welcome-banner-content h1 {
+  font-size: 1.25rem;
+  margin-top: 0;
+  margin-bottom: 0.75rem;
+  color: var(--text-main, #1e293b);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.welcome-banner-content p {
+  margin: 0 0 0.75rem 0;
+  line-height: 1.5;
+  color: var(--text, #334155);
+}
+
+.welcome-banner-content ul {
+  margin: 0 0 1rem 0;
+  padding-left: 1.25rem;
+  color: var(--text, #334155);
+}
+
+.welcome-banner-content li {
+  margin-bottom: 0.5rem;
+  line-height: 1.4;
+}
+
+.welcome-banner-close {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  background: none;
+  border: none;
+  font-size: 1.25rem;
+  cursor: pointer;
+  color: var(--text-muted, #64748b);
+  line-height: 1;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    background-color 0.2s,
+    color 0.2s;
+}
+
+.welcome-banner-close:hover {
+  background-color: var(--primary-soft, #f0fdf4);
+  color: var(--text-main, #1e293b);
+}