pict-docuserve 0.0.8 → 0.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pict-docuserve",
-    "version": "0.0.8",
+    "version": "0.0.11",
     "description": "Pict Documentation Server - A single-page documentation viewer built on Pict",
     "main": "source/Pict-Application-Docuserve.js",
     "bin": {
@@ -18,7 +18,7 @@
         "build-docs": "npx quack build && npx quack copy && node source/cli/Docuserve-CLI-Run.js inject ./docs && node example_applications/build-examples.js stage-docs",
         "serve-docs": "node source/cli/Docuserve-CLI-Run.js serve ./docs",
         "serve-examples": "node example_applications/build-examples.js",
-        "test": "echo \"Error: no test specified\" && exit 0",
+        "test": "npx mocha -u tdd --exit -R spec",
         "tests": "npx mocha -u tdd --exit -R spec --grep",
         "coverage": "npx nyc --reporter=lcov --reporter=text-lcov npx mocha -- -u tdd -R spec"
     },
@@ -29,10 +29,13 @@
         "pict": "^1.0.343",
         "pict-application": "^1.0.30",
         "pict-provider": "^1.0.7",
+        "pict-section-content": "file:../pict-section-content",
         "pict-service-commandlineutility": "^1.0.17",
         "pict-view": "^1.0.64"
     },
     "devDependencies": {
+        "chai": "^6.2.2",
+        "mocha": "^11.7.5",
         "quackage": "^1.0.47"
     },
     "copyFilesSettings": {

package/source/providers/Pict-Provider-Docuserve-Documentation.js

@@ -1,5 +1,7 @@
 const libPictProvider = require('pict-provider');
 const libLunr = require('lunr');
+const libPictSectionContent = require('pict-section-content');
+const libPictContentProvider = libPictSectionContent.PictContentProvider;
 
 /**
  * Documentation Provider for Docuserve
@@ -16,6 +18,42 @@ class DocuserveDocumentationProvider extends libPictProvider
 
 		this._Catalog = null;
 		this._ContentCache = {};
+
+		// Create an instance of the content provider for markdown parsing
+		this._ContentProvider = this.pict.addProvider('Pict-Content', libPictContentProvider.default_configuration, libPictContentProvider);
+	}
+
+	/**
+	 * Create a link resolver closure for the content provider.
+	 *
+	 * Wraps docuserve-specific link resolution (catalog-aware routing,
+	 * GitHub URL matching) into a callback compatible with the
+	 * pict-section-content link resolver pattern.
+	 *
+	 * @param {string} [pCurrentGroup] - The current group key
+	 * @param {string} [pCurrentModule] - The current module name
+	 * @param {string} [pCurrentDocPath] - The current document path
+	 * @returns {Function} A link resolver callback
+	 */
+	_createLinkResolver(pCurrentGroup, pCurrentModule, pCurrentDocPath)
+	{
+		return (pHref, pLinkText) =>
+		{
+			// Convert internal doc links to hash routes
+			if (pHref.match(/^\//) || pHref.match(/^[^:]+\.md/))
+			{
+				let tmpRoute = this.convertDocLink(pHref, pCurrentGroup, pCurrentModule, pCurrentDocPath);
+				return { href: tmpRoute };
+			}
+			// Check if this is a GitHub URL that matches a catalog module
+			let tmpCatalogRoute = this.resolveGitHubURLToRoute(pHref);
+			if (tmpCatalogRoute)
+			{
+				return { href: tmpCatalogRoute };
+			}
+			// Use default behavior for other links
+			return null;
+		};
 	}
 
 	/**
@@ -495,7 +533,7 @@ class DocuserveDocumentationProvider extends libPictProvider
 					return tmpCallback();
 				}
 
-				this.pict.AppData.Docuserve.ErrorPageHTML = this.parseMarkdown(pMarkdown);
+				this.pict.AppData.Docuserve.ErrorPageHTML = this._ContentProvider.parseMarkdown(pMarkdown);
 				this.pict.AppData.Docuserve.ErrorPageLoaded = true;
 				return tmpCallback();
 			})
@@ -714,13 +752,13 @@ class DocuserveDocumentationProvider extends libPictProvider
 		if (this.pict.AppData.Docuserve.ErrorPageLoaded && this.pict.AppData.Docuserve.ErrorPageHTML)
 		{
 			// Replace the {{path}} placeholder with the actual requested path
-			return this.pict.AppData.Docuserve.ErrorPageHTML.replace(/\{\{path\}\}/g, this.escapeHTML(tmpPath));
+			return this.pict.AppData.Docuserve.ErrorPageHTML.replace(/\{\{path\}\}/g, this._ContentProvider.escapeHTML(tmpPath));
 		}
 
 		// Default fallback
 		return '<div class="docuserve-not-found">'
 			+ '<h2>Page Not Found</h2>'
-			+ '<p>The document <code>' + this.escapeHTML(tmpPath) + '</code> could not be loaded.</p>'
+			+ '<p>The document <code>' + this._ContentProvider.escapeHTML(tmpPath) + '</code> could not be loaded.</p>'
 			+ '<p><a href="#/Home">Return to the home page</a></p>'
 			+ '</div>';
 	}
@@ -994,6 +1032,57 @@ class DocuserveDocumentationProvider extends libPictProvider
 		return null;
 	}
 
+	/**
+	 * Resolve a GitHub repository URL to an internal hash route.
+	 *
+	 * If the URL matches a module in the loaded catalog, returns the
+	 * corresponding #/doc/ route so the link navigates within docuserve
+	 * instead of leaving to GitHub.
+	 *
+	 * @param {string} pURL - A GitHub URL (e.g. "https://github.com/stevenvelozo/fable")
+	 * @returns {string|null} The hash route (e.g. "#/doc/fable/fable") or null if not a catalog module
+	 */
+	resolveGitHubURLToRoute(pURL)
+	{
+		if (!this._Catalog || !this._Catalog.Groups || !pURL)
+		{
+			return null;
+		}
+
+		// Match https://github.com/{org}/{repo} with optional trailing path/slash
+		let tmpMatch = pURL.match(/^https?:\/\/github\.com\/([^/]+)\/([^/]+)/);
+		if (!tmpMatch)
+		{
+			return null;
+		}
+
+		let tmpOrg = tmpMatch[1];
+		let tmpRepo = tmpMatch[2];
+
+		// Only resolve URLs that match the catalog's GitHub org
+		if (tmpOrg !== this._Catalog.GitHubOrg)
+		{
+			return null;
+		}
+
+		// Search catalog for a module with a matching Repo
+		for (let i = 0; i < this._Catalog.Groups.length; i++)
+		{
+			let tmpGroup = this._Catalog.Groups[i];
+
+			for (let j = 0; j < tmpGroup.Modules.length; j++)
+			{
+				let tmpModule = tmpGroup.Modules[j];
+				if (tmpModule.Repo === tmpRepo)
+				{
+					return '#/doc/' + tmpGroup.Key + '/' + tmpModule.Name;
+				}
+			}
+		}
+
+		return null;
+	}
+
 	/**
 	 * Get the module-specific sidebar entries for a given group/module.
 	 *
@@ -1071,7 +1160,7 @@ class DocuserveDocumentationProvider extends libPictProvider
 					return tmpCallback('Document not found', this.getErrorPageHTML(pURL));
 				}
 
-				let tmpHTML = this.parseMarkdown(pMarkdown, pCurrentGroup, pCurrentModule, pCurrentDocPath);
+				let tmpHTML = this._ContentProvider.parseMarkdown(pMarkdown, this._createLinkResolver(pCurrentGroup, pCurrentModule, pCurrentDocPath));
 				this._ContentCache[pURL] = tmpHTML;
 				return tmpCallback(null, tmpHTML);
 			})
@@ -1098,357 +1187,6 @@ class DocuserveDocumentationProvider extends libPictProvider
 		this.fetchDocument(tmpURL, fCallback, pCurrentGroup, pCurrentModule, pCurrentDocPath);
 	}
 
-	/**
-	 * Parse a markdown string into HTML.
-	 *
-	 * This is a basic markdown parser that handles the most common constructs:
-	 * headings, paragraphs, code blocks, inline code, links, bold, italic,
-	 * lists, blockquotes, and horizontal rules.
-	 *
-	 * @param {string} pMarkdown - The raw markdown text
-	 * @param {string} [pCurrentGroup] - The current group key for link resolution
-	 * @param {string} [pCurrentModule] - The current module name for link resolution
-	 * @param {string} [pCurrentDocPath] - The current document path for link resolution
-	 * @returns {string} The parsed HTML
-	 */
-	parseMarkdown(pMarkdown, pCurrentGroup, pCurrentModule, pCurrentDocPath)
-	{
-		if (!pMarkdown)
-		{
-			return '';
-		}
-
-		let tmpLines = pMarkdown.split('\n');
-		let tmpHTML = [];
-		let tmpInCodeBlock = false;
-		let tmpCodeFenceLength = 0;
-		let tmpCodeLang = '';
-		let tmpCodeLines = [];
-		let tmpInList = false;
-		let tmpListType = '';
-		let tmpInBlockquote = false;
-		let tmpBlockquoteLines = [];
-		let tmpInMathBlock = false;
-		let tmpMathLines = [];
-
-		for (let i = 0; i < tmpLines.length; i++)
-		{
-			let tmpLine = tmpLines[i];
-
-			// Display math blocks ($$...$$) — skip if inside a code block
-			if (!tmpInCodeBlock && tmpLine.trim().match(/^\$\$/))
-			{
-				if (tmpInMathBlock)
-				{
-					// End math block
-					tmpHTML.push('<div class="docuserve-katex-display">' + tmpMathLines.join('\n') + '</div>');
-					tmpInMathBlock = false;
-					tmpMathLines = [];
-				}
-				else
-				{
-					// Close any open list or blockquote
-					if (tmpInList)
-					{
-						tmpHTML.push(tmpListType === 'ul' ? '</ul>' : '</ol>');
-						tmpInList = false;
-					}
-					if (tmpInBlockquote)
-					{
-						tmpHTML.push('<blockquote>' + this.parseMarkdown(tmpBlockquoteLines.join('\n'), pCurrentGroup, pCurrentModule, pCurrentDocPath) + '</blockquote>');
-						tmpInBlockquote = false;
-						tmpBlockquoteLines = [];
-					}
-					tmpInMathBlock = true;
-				}
-				continue;
-			}
-
-			if (tmpInMathBlock)
-			{
-				tmpMathLines.push(tmpLine);
-				continue;
-			}
-
-			// Code blocks (fenced) — track fence length so ````x```` nests around ```y```
-			let tmpFenceMatch = tmpLine.match(/^(`{3,})/);
-			if (tmpFenceMatch)
-			{
-				let tmpFenceLen = tmpFenceMatch[1].length;
-
-				if (tmpInCodeBlock)
-				{
-					// Only close if the closing fence is at least as long as the opening
-					if (tmpFenceLen >= tmpCodeFenceLength && tmpLine.trim() === tmpFenceMatch[1])
-					{
-						// End code block
-						if (tmpCodeLang === 'mermaid')
-						{
-							// Mermaid diagrams: output raw content for client-side rendering
-							tmpHTML.push('<pre class="mermaid">' + tmpCodeLines.join('\n') + '</pre>');
-						}
-						else
-						{
-							tmpHTML.push('<pre><code class="language-' + this.escapeHTML(tmpCodeLang) + '">' + this.escapeHTML(tmpCodeLines.join('\n')) + '</code></pre>');
-						}
-						tmpInCodeBlock = false;
-						tmpCodeFenceLength = 0;
-						tmpCodeLang = '';
-						tmpCodeLines = [];
-						continue;
-					}
-					else
-					{
-						// Inner fence with fewer backticks — treat as content
-						tmpCodeLines.push(tmpLine);
-						continue;
-					}
-				}
-				else
-				{
-					// Close any open list or blockquote
-					if (tmpInList)
-					{
-						tmpHTML.push(tmpListType === 'ul' ? '</ul>' : '</ol>');
-						tmpInList = false;
-					}
-					if (tmpInBlockquote)
-					{
-						tmpHTML.push('<blockquote>' + this.parseMarkdown(tmpBlockquoteLines.join('\n'), pCurrentGroup, pCurrentModule, pCurrentDocPath) + '</blockquote>');
-						tmpInBlockquote = false;
-						tmpBlockquoteLines = [];
-					}
-					// Start code block — record fence length
-					tmpCodeFenceLength = tmpFenceLen;
-					tmpCodeLang = tmpLine.replace(/^`{3,}/, '').trim();
-					tmpInCodeBlock = true;
-					continue;
-				}
-			}
-
-			if (tmpInCodeBlock)
-			{
-				tmpCodeLines.push(tmpLine);
-				continue;
-			}
-
-			// Blockquotes
-			if (tmpLine.match(/^>\s?/))
-			{
-				if (!tmpInBlockquote)
-				{
-					// Close any open list
-					if (tmpInList)
-					{
-						tmpHTML.push(tmpListType === 'ul' ? '</ul>' : '</ol>');
-						tmpInList = false;
-					}
-					tmpInBlockquote = true;
-					tmpBlockquoteLines = [];
-				}
-				tmpBlockquoteLines.push(tmpLine.replace(/^>\s?/, ''));
-				continue;
-			}
-			else if (tmpInBlockquote)
-			{
-				tmpHTML.push('<blockquote>' + this.parseMarkdown(tmpBlockquoteLines.join('\n'), pCurrentGroup, pCurrentModule, pCurrentDocPath) + '</blockquote>');
-				tmpInBlockquote = false;
-				tmpBlockquoteLines = [];
-			}
-
-			// Horizontal rule
-			if (tmpLine.match(/^(-{3,}|\*{3,}|_{3,})\s*$/))
-			{
-				if (tmpInList)
-				{
-					tmpHTML.push(tmpListType === 'ul' ? '</ul>' : '</ol>');
-					tmpInList = false;
-				}
-				tmpHTML.push('<hr>');
-				continue;
-			}
-
-			// Headings
-			let tmpHeadingMatch = tmpLine.match(/^(#{1,6})\s+(.+)/);
-			if (tmpHeadingMatch)
-			{
-				if (tmpInList)
-				{
-					tmpHTML.push(tmpListType === 'ul' ? '</ul>' : '</ol>');
-					tmpInList = false;
-				}
-				let tmpLevel = tmpHeadingMatch[1].length;
-				let tmpText = this.parseInline(tmpHeadingMatch[2], pCurrentGroup, pCurrentModule, pCurrentDocPath);
-				let tmpID = tmpHeadingMatch[2].toLowerCase().replace(/[^\w\s-]/g, '').replace(/\s+/g, '-');
-				tmpHTML.push('<h' + tmpLevel + ' id="' + tmpID + '">' + tmpText + '</h' + tmpLevel + '>');
-				continue;
-			}
-
-			// Unordered list items
-			let tmpULMatch = tmpLine.match(/^(\s*)[-*+]\s+(.*)/);
-			if (tmpULMatch)
-			{
-				if (!tmpInList || tmpListType !== 'ul')
-				{
-					if (tmpInList)
-					{
-						tmpHTML.push(tmpListType === 'ul' ? '</ul>' : '</ol>');
-					}
-					tmpHTML.push('<ul>');
-					tmpInList = true;
-					tmpListType = 'ul';
-				}
-				tmpHTML.push('<li>' + this.parseInline(tmpULMatch[2], pCurrentGroup, pCurrentModule, pCurrentDocPath) + '</li>');
-				continue;
-			}
-
-			// Ordered list items
-			let tmpOLMatch = tmpLine.match(/^(\s*)\d+\.\s+(.*)/);
-			if (tmpOLMatch)
-			{
-				if (!tmpInList || tmpListType !== 'ol')
-				{
-					if (tmpInList)
-					{
-						tmpHTML.push(tmpListType === 'ul' ? '</ul>' : '</ol>');
-					}
-					tmpHTML.push('<ol>');
-					tmpInList = true;
-					tmpListType = 'ol';
-				}
-				tmpHTML.push('<li>' + this.parseInline(tmpOLMatch[2], pCurrentGroup, pCurrentModule, pCurrentDocPath) + '</li>');
-				continue;
-			}
-
-			// Close list if we've left list items
-			if (tmpInList && tmpLine.trim() !== '')
-			{
-				tmpHTML.push(tmpListType === 'ul' ? '</ul>' : '</ol>');
-				tmpInList = false;
-			}
-
-			// Empty line
-			if (tmpLine.trim() === '')
-			{
-				continue;
-			}
-
-			// Table detection
-			if (tmpLine.match(/^\|/) && i + 1 < tmpLines.length && tmpLines[i + 1].match(/^\|[\s-:|]+\|/))
-			{
-				// Close any open list
-				if (tmpInList)
-				{
-					tmpHTML.push(tmpListType === 'ul' ? '</ul>' : '</ol>');
-					tmpInList = false;
-				}
-
-				let tmpTableHTML = '<table>';
-
-				// Header row
-				let tmpHeaders = tmpLine.split('|').filter((pCell) => { return pCell.trim() !== ''; });
-				tmpTableHTML += '<thead><tr>';
-				for (let h = 0; h < tmpHeaders.length; h++)
-				{
-					tmpTableHTML += '<th>' + this.parseInline(tmpHeaders[h].trim(), pCurrentGroup, pCurrentModule, pCurrentDocPath) + '</th>';
-				}
-				tmpTableHTML += '</tr></thead>';
-
-				// Skip separator row
-				i++;
-
-				// Body rows
-				tmpTableHTML += '<tbody>';
-				while (i + 1 < tmpLines.length && tmpLines[i + 1].match(/^\|/))
-				{
-					i++;
-					let tmpCells = tmpLines[i].split('|').filter((pCell) => { return pCell.trim() !== ''; });
-					tmpTableHTML += '<tr>';
-					for (let c = 0; c < tmpCells.length; c++)
-					{
-						tmpTableHTML += '<td>' + this.parseInline(tmpCells[c].trim(), pCurrentGroup, pCurrentModule, pCurrentDocPath) + '</td>';
-					}
-					tmpTableHTML += '</tr>';
-				}
-				tmpTableHTML += '</tbody></table>';
-				tmpHTML.push(tmpTableHTML);
-				continue;
-			}
-
-			// Regular paragraph
-			tmpHTML.push('<p>' + this.parseInline(tmpLine, pCurrentGroup, pCurrentModule, pCurrentDocPath) + '</p>');
-		}
-
-		// Close any trailing open elements
-		if (tmpInList)
-		{
-			tmpHTML.push(tmpListType === 'ul' ? '</ul>' : '</ol>');
-		}
-		if (tmpInBlockquote)
-		{
-			tmpHTML.push('<blockquote>' + this.parseMarkdown(tmpBlockquoteLines.join('\n'), pCurrentGroup, pCurrentModule, pCurrentDocPath) + '</blockquote>');
-		}
-		if (tmpInCodeBlock)
-		{
-			tmpHTML.push('<pre><code>' + this.escapeHTML(tmpCodeLines.join('\n')) + '</code></pre>');
-		}
-
-		return tmpHTML.join('\n');
-	}
-
-	/**
-	 * Parse inline markdown elements (bold, italic, code, links, images).
-	 *
-	 * @param {string} pText - The text to parse
-	 * @param {string} [pCurrentGroup] - The current group key for link resolution
-	 * @param {string} [pCurrentModule] - The current module name for link resolution
-	 * @param {string} [pCurrentDocPath] - The current document path for link resolution
-	 * @returns {string} HTML with inline elements
-	 */
-	parseInline(pText, pCurrentGroup, pCurrentModule, pCurrentDocPath)
-	{
-		if (!pText)
-		{
-			return '';
-		}
-
-		let tmpResult = pText;
-
-		// Inline code (backticks) - handle first to avoid interfering with other patterns
-		tmpResult = tmpResult.replace(/`([^`]+)`/g, '<code>$1</code>');
-
-		// Inline LaTeX equations ($...$) — must be processed before other inline patterns
-		// Match single $ delimiters that aren't adjacent to spaces (to avoid false positives with currency)
-		tmpResult = tmpResult.replace(/\$([^\$\s][^\$]*?[^\$\s])\$/g, '<span class="docuserve-katex-inline">$1</span>');
-		// Also match single-character inline math like $x$
-		tmpResult = tmpResult.replace(/\$([^\$\s])\$/g, '<span class="docuserve-katex-inline">$1</span>');
-
-		// Images
-		tmpResult = tmpResult.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1">');
-
-		// Links
-		tmpResult = tmpResult.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (pMatch, pLinkText, pHref) =>
-		{
-			// Convert internal doc links to hash routes
-			if (pHref.match(/^\//) || pHref.match(/^[^:]+\.md/))
-			{
-				let tmpRoute = this.convertDocLink(pHref, pCurrentGroup, pCurrentModule, pCurrentDocPath);
-				return '<a href="' + tmpRoute + '">' + pLinkText + '</a>';
-			}
-			return '<a href="' + pHref + '" target="_blank" rel="noopener">' + pLinkText + '</a>';
-		});
-
-		// Bold
-		tmpResult = tmpResult.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
-		tmpResult = tmpResult.replace(/__([^_]+)__/g, '<strong>$1</strong>');
-
-		// Italic
-		tmpResult = tmpResult.replace(/\*([^*]+)\*/g, '<em>$1</em>');
-		tmpResult = tmpResult.replace(/_([^_]+)_/g, '<em>$1</em>');
-
-		return tmpResult;
-	}
-
 	/**
 	 * Convert a docsify-style internal link to a hash route for docuserve.
 	 *
@@ -1506,25 +1244,6 @@ class DocuserveDocumentationProvider extends libPictProvider
 		return '#/page/' + tmpPath;
 	}
 
-	/**
-	 * Escape HTML special characters.
-	 *
-	 * @param {string} pText - The text to escape
-	 * @returns {string} The escaped text
-	 */
-	escapeHTML(pText)
-	{
-		if (!pText)
-		{
-			return '';
-		}
-		return pText
-			.replace(/&/g, '&amp;')
-			.replace(/</g, '&lt;')
-			.replace(/>/g, '&gt;')
-			.replace(/"/g, '&quot;')
-			.replace(/'/g, '&#39;');
-	}
 }
 
 module.exports = DocuserveDocumentationProvider;

package/source/views/PictView-Docuserve-Content.js

@@ -1,4 +1,4 @@
-const libPictView = require('pict-view');
+const libPictContentView = require('pict-section-content');
 
 const _ViewConfiguration =
 {
@@ -10,139 +10,6 @@ const _ViewConfiguration =
 	AutoRender: false,
 
 	CSS: /*css*/`
-		.docuserve-content {
-			padding: 2em 3em;
-			max-width: 900px;
-			margin: 0 auto;
-		}
-		.docuserve-content-loading {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			min-height: 200px;
-			color: #8A7F72;
-			font-size: 1em;
-		}
-		.docuserve-content h1 {
-			font-size: 2em;
-			color: #3D3229;
-			border-bottom: 1px solid #DDD6CA;
-			padding-bottom: 0.3em;
-			margin-top: 0;
-		}
-		.docuserve-content h2 {
-			font-size: 1.5em;
-			color: #3D3229;
-			border-bottom: 1px solid #EAE3D8;
-			padding-bottom: 0.25em;
-			margin-top: 1.5em;
-		}
-		.docuserve-content h3 {
-			font-size: 1.25em;
-			color: #3D3229;
-			margin-top: 1.25em;
-		}
-		.docuserve-content h4, .docuserve-content h5, .docuserve-content h6 {
-			color: #5E5549;
-			margin-top: 1em;
-		}
-		.docuserve-content p {
-			line-height: 1.7;
-			color: #423D37;
-			margin: 0.75em 0;
-		}
-		.docuserve-content a {
-			color: #2E7D74;
-			text-decoration: none;
-		}
-		.docuserve-content a:hover {
-			text-decoration: underline;
-		}
-		.docuserve-content pre {
-			background: #3D3229;
-			color: #E8E0D4;
-			padding: 1.25em;
-			border-radius: 6px;
-			overflow-x: auto;
-			line-height: 1.5;
-			font-size: 0.9em;
-		}
-		.docuserve-content code {
-			background: #F0ECE4;
-			padding: 0.15em 0.4em;
-			border-radius: 3px;
-			font-size: 0.9em;
-			color: #9E6B47;
-		}
-		.docuserve-content pre code {
-			background: none;
-			padding: 0;
-			color: inherit;
-			font-size: inherit;
-		}
-		.docuserve-content blockquote {
-			border-left: 4px solid #2E7D74;
-			margin: 1em 0;
-			padding: 0.5em 1em;
-			background: #F7F5F0;
-			color: #5E5549;
-		}
-		.docuserve-content blockquote p {
-			margin: 0.25em 0;
-		}
-		.docuserve-content ul, .docuserve-content ol {
-			padding-left: 2em;
-			line-height: 1.8;
-		}
-		.docuserve-content li {
-			margin: 0.25em 0;
-			color: #423D37;
-		}
-		.docuserve-content hr {
-			border: none;
-			border-top: 1px solid #DDD6CA;
-			margin: 2em 0;
-		}
-		.docuserve-content table {
-			width: 100%;
-			border-collapse: collapse;
-			margin: 1em 0;
-		}
-		.docuserve-content table th {
-			background: #F5F0E8;
-			border: 1px solid #DDD6CA;
-			padding: 0.6em 0.8em;
-			text-align: left;
-			font-weight: 600;
-			color: #3D3229;
-		}
-		.docuserve-content table td {
-			border: 1px solid #DDD6CA;
-			padding: 0.5em 0.8em;
-			color: #423D37;
-		}
-		.docuserve-content table tr:nth-child(even) {
-			background: #F7F5F0;
-		}
-		.docuserve-content img {
-			max-width: 100%;
-			height: auto;
-		}
-		.docuserve-content pre.mermaid {
-			background: #fff;
-			color: #3D3229;
-			text-align: center;
-			padding: 1em;
-		}
-		.docuserve-content .docuserve-katex-display {
-			text-align: center;
-			margin: 1em 0;
-			padding: 0.5em;
-			overflow-x: auto;
-		}
-		.docuserve-content .docuserve-katex-inline {
-			display: inline;
-		}
 		.docuserve-not-found {
 			text-align: center;
 			padding: 3em 1em;
@@ -167,8 +34,8 @@ const _ViewConfiguration =
 		{
 			Hash: "Docuserve-Content-Template",
 			Template: /*html*/`
-<div class="docuserve-content" id="Docuserve-Content-Body">
-	<div class="docuserve-content-loading">Loading documentation...</div>
+<div class="pict-content" id="Docuserve-Content-Body">
+	<div class="pict-content-loading">Loading documentation...</div>
 </div>
 `
 		}
@@ -185,7 +52,7 @@ const _ViewConfiguration =
 	]
 };
 
-class DocuserveContentView extends libPictView
+class DocuserveContentView extends libPictContentView
 {
 	constructor(pFable, pOptions, pServiceHash)
 	{
@@ -199,101 +66,7 @@ class DocuserveContentView extends libPictView
 	 */
 	displayContent(pHTMLContent)
 	{
-		this.pict.ContentAssignment.assignContent('#Docuserve-Content-Body', pHTMLContent);
-
-		// Scroll to top of content area
-		let tmpContentContainer = document.getElementById('Docuserve-Content-Container');
-		if (tmpContentContainer)
-		{
-			tmpContentContainer.scrollTop = 0;
-		}
-
-		// Post-render: initialize Mermaid diagrams if mermaid is available
-		this.renderMermaidDiagrams();
-
-		// Post-render: render KaTeX equations if katex is available
-		this.renderKaTeXEquations();
-	}
-
-	/**
-	 * Render any Mermaid diagram blocks in the content area.
-	 * Mermaid blocks are `<pre class="mermaid">` elements produced by parseMarkdown.
-	 */
-	renderMermaidDiagrams()
-	{
-		if (typeof mermaid === 'undefined')
-		{
-			return;
-		}
-
-		let tmpContentBody = document.getElementById('Docuserve-Content-Body');
-		if (!tmpContentBody)
-		{
-			return;
-		}
-
-		let tmpMermaidElements = tmpContentBody.querySelectorAll('pre.mermaid');
-		if (tmpMermaidElements.length < 1)
-		{
-			return;
-		}
-
-		// mermaid.run() will process all pre.mermaid elements in the container
-		try
-		{
-			mermaid.run({ nodes: tmpMermaidElements });
-		}
-		catch (pError)
-		{
-			this.log.error('Mermaid rendering error: ' + pError.message);
-		}
-	}
-
-	/**
-	 * Render KaTeX inline and display math elements in the content area.
-	 * Inline: `<span class="docuserve-katex-inline">`
-	 * Display: `<div class="docuserve-katex-display">`
-	 */
-	renderKaTeXEquations()
-	{
-		if (typeof katex === 'undefined')
-		{
-			return;
-		}
-
-		let tmpContentBody = document.getElementById('Docuserve-Content-Body');
-		if (!tmpContentBody)
-		{
-			return;
-		}
-
-		// Render inline math
-		let tmpInlineElements = tmpContentBody.querySelectorAll('.docuserve-katex-inline');
-		for (let i = 0; i < tmpInlineElements.length; i++)
-		{
-			try
-			{
-				katex.render(tmpInlineElements[i].textContent, tmpInlineElements[i], { throwOnError: false, displayMode: false });
-			}
-			catch (pError)
-			{
-				this.log.warn('KaTeX inline error: ' + pError.message);
-			}
-		}
-
-		// Render display math
-		let tmpDisplayElements = tmpContentBody.querySelectorAll('.docuserve-katex-display');
-		for (let i = 0; i < tmpDisplayElements.length; i++)
-		{
-			try
-			{
-				katex.render(tmpDisplayElements[i].textContent, tmpDisplayElements[i], { throwOnError: false, displayMode: true });
-			}
-			catch (pError)
-			{
-				this.log.warn('KaTeX display error: ' + pError.message);
-			}
-		}
+		super.displayContent(pHTMLContent, 'Docuserve-Content-Body');
 	}
 
 	/**
@@ -301,7 +74,7 @@ class DocuserveContentView extends libPictView
 	 */
 	showLoading()
 	{
-		this.pict.ContentAssignment.assignContent('#Docuserve-Content-Body', '<div class="docuserve-content-loading">Loading documentation...</div>');
+		super.showLoading('Loading documentation...', 'Docuserve-Content-Body');
 	}
 }