create-portfoliable 1.2.15 → 1.2.17

package/cli/portfoliable.mjs

@@ -456,6 +456,37 @@ function runThumbnailOptions(flags) {
   return 0;
 }
 
+// Emits case media files so authored src/content URLs survive production builds.
+function createCaseContentAssetPlugin() {
+  return {
+    name: 'portfoliable-case-content-assets',
+    generateBundle() {
+      const casesRoot = path.resolve(process.cwd(), 'src', 'content', 'cases');
+      if (!fs.existsSync(casesRoot)) return;
+
+      const emitDirectory = (directory) => {
+        for (const entry of fs.readdirSync(directory, { withFileTypes: true })) {
+          const entryPath = path.join(directory, entry.name);
+          if (entry.isDirectory()) {
+            emitDirectory(entryPath);
+            continue;
+          }
+          if (entry.name.toLowerCase().endsWith('.md')) continue;
+
+          const relativePath = path.relative(process.cwd(), entryPath).replace(/\\/g, '/');
+          this.emitFile({
+            type: 'asset',
+            fileName: relativePath,
+            source: fs.readFileSync(entryPath)
+          });
+        }
+      };
+
+      emitDirectory(casesRoot);
+    }
+  };
+}
+
 // Prints startup summary box for dev server sessions.
 function printStartupBox({ localUrl, networkUrl, localVersion, latestVersion }) {
   const lines = [
@@ -649,9 +680,10 @@ async function runBuild() {
   printRailSegment({ dot: true, label: `${cyan}${bold}Starting build...${reset}` });
   console.log(`${cyan}${bold}Building Portfoliable...${reset}`);
   const runtimeAliases = resolveConsumerRuntimeAliases(process.cwd());
-  await viteBuild(runtimeAliases.length > 0
-    ? { resolve: { alias: runtimeAliases } }
-    : undefined);
+  await viteBuild({
+    ...(runtimeAliases.length > 0 ? { resolve: { alias: runtimeAliases } } : {}),
+    plugins: [createCaseContentAssetPlugin()]
+  });
   console.log(`${green}Build complete.${reset}`);
   printRailSegment({ dot: true, label: `${green}${bold}Build complete.${reset}` });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-portfoliable",
-  "version": "1.2.15",
+  "version": "1.2.17",
   "description": "Unified Portfoliable package with initializer and runtime CLI",
   "private": false,
   "type": "module",

package/scripts/release-orchestrator.mjs

@@ -12,6 +12,7 @@ import { pathToFileURL } from "node:url";
 const REPO_URL = "https://github.com/portfoliablejs/portfoliable";
 // Enables dry-run behavior when --dry-run is provided on process args.
 const isDryRun = process.argv.includes("--dry-run");
+const isPreparePr = process.argv.includes("--prepare-pr");
 // Enables signing release commit and tag objects when RELEASE_SIGN=true.
 const shouldSign = process.env.RELEASE_SIGN === "true";
 
@@ -410,6 +411,11 @@ function run() {
   }
   git(commitArgs);
 
+  if (isPreparePr) {
+    console.log("Release PR preparation enabled; skipping tag creation until merge.");
+    return;
+  }
+
   // Creates annotated or signed tags for each release if tag is not already present.
   for (const plan of releases) {
     // Checks whether target tag already exists in repository.

package/src/App.js

@@ -35,6 +35,7 @@ import {
     A11Y_THEME_TOKEN_KEYS,
     Header,
     HomeView,
+    MermaidDiagram,
     Summary,
     Thumbnail,
     Toast,
@@ -49,6 +50,7 @@ void Summary;
 void Thumbnail;
 void Toast;
 void VideoPlayer;
+void MermaidDiagram;
 
 // MARK: HEADER DEFAULTS
 // Resolves runtime defaults and persistence keys used across navigation and resume flows.
@@ -4662,7 +4664,7 @@ class AppShell extends HTMLElement {
                 ].join('::');
 
                 if (this._caseViewRenderSignature !== caseRenderSignature) {
-                    caseView.innerHTML = caseMarkup;
+                    caseView.innerHTML = this._normalizeArticleMediaUrls(caseMarkup);
                     this._caseViewRenderSignature = caseRenderSignature;
                 }
 
@@ -5365,7 +5367,9 @@ class AppShell extends HTMLElement {
         const thumbBrand = activeCase.thumbBrand || 'apple';
         const thumbModel = activeCase.thumbModel || 'Apple iPhone 12';
         const thumbColor = activeCase.thumbColor || 'Black';
-        const subtitleSrc = String(this.getLangCurrentLocaleOnly(this._resolveCasePrimaryVttProp(activeCase)) || '').trim();
+        const subtitleSrc = this._resolveRuntimeMediaUrl(
+            this.getLangCurrentLocaleOnly(this._resolveCasePrimaryVttProp(activeCase))
+        );
         const rawSubtitleConfig = this._resolveCasePrimaryVttProp(activeCase);
         const {
             breadcrumbMenuLabels,
@@ -5547,7 +5551,7 @@ class AppShell extends HTMLElement {
         const composedHtml = this.getLang(aboutPayload.bodyHtml) || '';
 
         if (aboutArticle.dataset.aboutHtml !== composedHtml) {
-            aboutArticle.innerHTML = composedHtml;
+            aboutArticle.innerHTML = this._normalizeArticleMediaUrls(composedHtml);
             aboutArticle.dataset.aboutHtml = composedHtml;
         }
 
@@ -5648,6 +5652,34 @@ class AppShell extends HTMLElement {
         });
     }
 
+    _normalizeArticleMediaUrls(html) {
+        if (typeof document === 'undefined') return String(html || '');
+
+        const template = document.createElement('template');
+        template.innerHTML = String(html || '');
+        template.content.querySelectorAll('[src]').forEach((element) => {
+            const source = element.getAttribute('src');
+            if (source) element.setAttribute('src', this._resolveRuntimeMediaUrl(source));
+        });
+        template.content.querySelectorAll('[poster]').forEach((element) => {
+            const poster = element.getAttribute('poster');
+            if (poster) element.setAttribute('poster', this._resolveRuntimeMediaUrl(poster));
+        });
+        template.content.querySelectorAll('[srcset]').forEach((element) => {
+            const srcset = element.getAttribute('srcset');
+            if (!srcset) return;
+            const normalizedSrcset = srcset.split(',').map((candidate) => {
+                const parts = candidate.trim().split(/\s+/);
+                if (!parts[0]) return candidate;
+                parts[0] = this._resolveRuntimeMediaUrl(parts[0]);
+                return parts.join(' ');
+            }).join(', ');
+            element.setAttribute('srcset', normalizedSrcset);
+        });
+
+        return template.innerHTML;
+    }
+
     _resolveLocalizedConfigText(value) {
         if (typeof value === 'string') return value;
         if (!value || typeof value !== 'object') return '';

package/src/parser/markdown-rendering.test.js

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest';
+
+import { renderLocalizedMarkdownHtml } from './markdown.js';
+
+describe('case markdown rendering', () => {
+  it('preserves authored HTML image sizing attributes', () => {
+    const html = renderLocalizedMarkdownHtml(
+      '<img src="src/content/cases/example/image.avif" alt="Example" width="300">',
+      ['en']
+    ).htmlByLocale.en;
+
+    expect(html).toContain('<img src="src/content/cases/example/image.avif" alt="Example" width="300">');
+  });
+
+  it('renders Mermaid fences as diagram elements', () => {
+    const html = renderLocalizedMarkdownHtml('```mermaid\ngraph TD\n  A --> B\n```', ['en'])
+      .htmlByLocale.en;
+
+    expect(html).toContain('<mermaid-diagram>');
+    expect(html).toContain('graph TD');
+    expect(html).not.toContain('<pre><code>');
+  });
+
+  it('keeps ordinary fenced code blocks as code', () => {
+    const html = renderLocalizedMarkdownHtml('```javascript\nconst answer = 42;\n```', ['en'])
+      .htmlByLocale.en;
+
+    expect(html).toContain('<pre><code>');
+    expect(html).toContain('const answer = 42;');
+  });
+});

package/src/parser/markdown.js

@@ -10,7 +10,7 @@ import markdownItTaskLists from 'markdown-it-task-lists';
 // MARK: MARKDOWN RENDERER
 // Uses markdown-it + plugins to support broad markdown syntax for case content.
 const markdownRenderer = new MarkdownIt({
-  html: false,
+  html: true,
   linkify: true,
   typographer: true,
   breaks: false
@@ -56,6 +56,16 @@ markdownRenderer.renderer.rules.link_open = (tokens, idx, options, env, self) =>
   return self.renderToken(tokens, idx, options);
 };
 
+// Emits Mermaid fences as the Valence custom element instead of a code block.
+markdownRenderer.renderer.rules.fence = (tokens, idx) => {
+  const token = tokens[idx];
+  if (String(token.info || '').trim().split(/\s+/)[0].toLowerCase() !== 'mermaid') {
+    return `<pre><code>${markdownRenderer.utils.escapeHtml(token.content)}</code></pre>\n`;
+  }
+
+  return `<mermaid-diagram>${markdownRenderer.utils.escapeHtml(token.content)}</mermaid-diagram>\n`;
+};
+
 // MARK: VALIDATION CONTRACTS
 // Lists required scalar config fields that every case must define.
 const REQUIRED_SCALAR_FIELDS = ['id', 'thumbCategory', 'thumbBrand', 'thumbModel', 'thumbColor'];

package/templates/src/parser/markdown.js

@@ -10,7 +10,7 @@ import markdownItTaskLists from 'markdown-it-task-lists';
 // MARK: MARKDOWN RENDERER
 // Uses markdown-it + plugins to support broad markdown syntax for case content.
 const markdownRenderer = new MarkdownIt({
-  html: false,
+  html: true,
   linkify: true,
   typographer: true,
   breaks: false
@@ -56,6 +56,16 @@ markdownRenderer.renderer.rules.link_open = (tokens, idx, options, env, self) =>
   return self.renderToken(tokens, idx, options);
 };
 
+// Emits Mermaid fences as the Valence custom element instead of a code block.
+markdownRenderer.renderer.rules.fence = (tokens, idx) => {
+  const token = tokens[idx];
+  if (String(token.info || '').trim().split(/\s+/)[0].toLowerCase() !== 'mermaid') {
+    return `<pre><code>${markdownRenderer.utils.escapeHtml(token.content)}</code></pre>\n`;
+  }
+
+  return `<mermaid-diagram>${markdownRenderer.utils.escapeHtml(token.content)}</mermaid-diagram>\n`;
+};
+
 // MARK: VALIDATION CONTRACTS
 // Lists required scalar config fields that every case must define.
 const REQUIRED_SCALAR_FIELDS = ['id', 'thumbCategory', 'thumbBrand', 'thumbModel', 'thumbColor'];
@@ -107,6 +117,56 @@ function markdownToHtml(markdown) {
   return markdownRenderer.render(source);
 }
 
+// Renders localized markdown sections into HTML using the shared markdown-it pipeline.
+export function renderLocalizedMarkdownHtml(bodyText, localeCodes = DEFAULT_LOCALE_CODES) {
+  const normalizedBodyText = String(bodyText || '').replace(/<!--\s*config\s*[\s\S]*?-->/gi, '').trim();
+  const targetLocales = normalizeLocaleCodes(localeCodes);
+  const sections = Object.fromEntries(targetLocales.map((localeCode) => [localeCode, '']));
+  const markerLocales = new Set();
+  const langRegex = /<!--\s*lang:([a-z0-9-]+)\s*-->/gi;
+  let activeLang = null;
+  let lastIndex = 0;
+  let match;
+
+  while ((match = langRegex.exec(normalizedBodyText)) !== null) {
+    const markerLocale = String(match[1] || '').trim().toLowerCase();
+    if (!markerLocale) continue;
+    markerLocales.add(markerLocale);
+    if (!(markerLocale in sections)) {
+      sections[markerLocale] = '';
+    }
+
+    if (activeLang) {
+      sections[activeLang] += normalizedBodyText.slice(lastIndex, match.index);
+    }
+    activeLang = markerLocale;
+    lastIndex = langRegex.lastIndex;
+  }
+
+  if (activeLang) {
+    sections[activeLang] += normalizedBodyText.slice(lastIndex);
+  } else {
+    Object.keys(sections).forEach((localeCode) => {
+      sections[localeCode] = normalizedBodyText;
+    });
+  }
+
+  const resolvedLocales = normalizeLocaleCodes([...targetLocales, ...Object.keys(sections)]);
+  const htmlByLocale = Object.fromEntries(resolvedLocales.map((localeCode) => {
+    const sectionRaw = String(sections[localeCode] || '').trim();
+    return [localeCode, markdownToHtml(sectionRaw)];
+  }));
+
+  return {
+    htmlByLocale,
+    meta: {
+      localeCodes: resolvedLocales,
+      hasAnyLangMarker: markerLocales.size > 0,
+      hasLangMarkerByLocale: Object.fromEntries(resolvedLocales.map((localeCode) => [localeCode, markerLocales.has(localeCode)]))
+    }
+  };
+}
+
 // MARK: CONFIG BLOCK PARSING
 // Parses a top-level config JSON comment block and returns metadata + remaining body text.
 function parseConfigMetadata(rawText, contextLabel) {