diff --git a/strategy/AbstractTemplateStrategy.cfc b/strategy/AbstractTemplateStrategy.cfc index 1f2b1b1..93ec5de 100644 --- a/strategy/AbstractTemplateStrategy.cfc +++ b/strategy/AbstractTemplateStrategy.cfc @@ -650,6 +650,9 @@ abstract component accessors="true" implements="IStrategy" { // If this is a class, output it if ( structKeyExists( itemValue, "$#arguments.classTerm#" ) ) { + if ( structIsEmpty( itemValue[ "$#arguments.classTerm#" ] ) ) { + continue; + } var linkData = itemValue[ "$#arguments.classTerm#" ]; writeOutput( "

" ); writeOutput( item ); diff --git a/strategy/CommandBox/CommandBoxStrategy.cfc b/strategy/CommandBox/CommandBoxStrategy.cfc index 39e06da..355962f 100644 --- a/strategy/CommandBox/CommandBoxStrategy.cfc +++ b/strategy/CommandBox/CommandBoxStrategy.cfc @@ -78,14 +78,24 @@ component extends="docbox.strategy.api.HTMLAPIStrategy" { */ function init( required outputDir, - string projectTitle = "Untitled" + string projectTitle = "Untitled", + string theme = "default" ){ super.init( argumentCollection = arguments ); // Override the parent's theme-based paths with CommandBox-specific paths - variables.TEMPLATE_PATH = "/docbox/strategy/CommandBox/resources/templates"; - variables.ASSETS_PATH = "/docbox/strategy/api/themes/frames/resources/static"; + variables.TEMPLATE_PATH = "/docbox/strategy/CommandBox/themes/#variables.theme#/resources/templates"; + variables.ASSETS_PATH = "/docbox/strategy/api/themes/frames/resources/static"; + variables.COMMANDBOX_STATIC_PATH = "/docbox/strategy/CommandBox/themes/#variables.theme#/resources/static"; + // Theme CSS assets are not laid out consistently across themes. + // The frames theme stores its stylesheet directly under /resources/static + // instead of /resources/static/css, so resolve the source path accordingly. + if ( variables.theme == "frames" ) { + variables.THEME_CSS_PATH = "/docbox/strategy/api/themes/frames/resources/static"; + } else { + variables.THEME_CSS_PATH = "/docbox/strategy/api/themes/#variables.theme#/resources/static/css"; + } return this; } @@ -199,13 +209,27 @@ component extends="docbox.strategy.api.HTMLAPIStrategy" { index++; } - // copy over the static assets + // 1. Copy frames theme assets (highlighter, jstree, root stylesheet for standalone pages) directoryCopy( expandPath( variables.ASSETS_PATH ), getOutputDir(), true ); + // 2. Overlay CommandBox-specific JS from its own theme (js/app.js) + directoryCopy( + expandPath( variables.COMMANDBOX_STATIC_PATH & "/js" ), + getOutputDir() & "/js", + true + ); + + // 3. Overlay shared CSS from the HTMLAPIStrategy's chosen theme (css/stylesheet.css) + directoryCopy( + expandPath( variables.THEME_CSS_PATH ), + getOutputDir() & "/css", + true + ); + // write the index template var args = { path : getOutputDir() & "/index.html", diff --git a/strategy/CommandBox/resources/templates/inc/common.cfm b/strategy/CommandBox/resources/templates/inc/common.cfm deleted file mode 100644 index 8610230..0000000 --- a/strategy/CommandBox/resources/templates/inc/common.cfm +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/strategy/CommandBox/resources/templates/inc/nav.cfm b/strategy/CommandBox/resources/templates/inc/nav.cfm deleted file mode 100644 index 1021719..0000000 --- a/strategy/CommandBox/resources/templates/inc/nav.cfm +++ /dev/null @@ -1,52 +0,0 @@ - - - - - - - - - - - - - \ No newline at end of file diff --git a/strategy/CommandBox/resources/templates/index.cfm b/strategy/CommandBox/resources/templates/index.cfm deleted file mode 100644 index 6362275..0000000 --- a/strategy/CommandBox/resources/templates/index.cfm +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - #arguments.projecttitle# Command API Documentation - - - - - - - <H2> - Frame Alert</H2> - - <P> - This document is designed to be viewed using the frames feature. If you see this message, you are using a non-frame-capable web client. - <BR> - Link to<a href="overview-summary.html">Non-frame version.</a> - - - - \ No newline at end of file diff --git a/strategy/CommandBox/resources/templates/overview-frame.cfm b/strategy/CommandBox/resources/templates/overview-frame.cfm deleted file mode 100644 index 46b8bae..0000000 --- a/strategy/CommandBox/resources/templates/overview-frame.cfm +++ /dev/null @@ -1,157 +0,0 @@ - - // Build out data - variables.namespaces = {}; - variables.topLevel = {}; - - // Loop over commands - for( local.row in qMetaData ) { - // Skip our template CFC - if( row.name == 'CommandTemplate' ) { - continue; - } - - local.command = row.command; - local.namespaceParts = listToArray( row.namespace, ' ' ); - - // Set "deep" struct to create nested data - local.link = replace( row.package, ".", "/", "all") & '/' & row.name & '.html'; - local.packagelink = replace( row.package, ".", "/", "all") & '/package-summary.html'; - local.searchList = row.command; - if( !isNull( row.metadata.aliases ) && len( row.metadata.aliases ) ) { - searchList &= ',' & row.metadata.aliases; - } - - // Determine which tree to use (top level commands vs namespaced commands) - local.targetTree = ( listLen( command, ' ' ) == 1 ? variables.topLevel : variables.namespaces ); - - // Set the package link on the root - local.targetTree[ "$link" ] = local.packagelink; // Navigate/create nested namespace structure - local.currentNode = local.targetTree; - for( local.namespacePart in local.namespaceParts ) { - if( !structKeyExists( local.currentNode, local.namespacePart ) ) { - local.currentNode[ local.namespacePart ] = {}; - } - local.currentNode = local.currentNode[ local.namespacePart ]; - } - - // Create command entry - if( !structKeyExists( local.currentNode, local.row.name ) ) { - local.currentNode[ local.row.name ] = {}; - } - - local.currentNode[ local.row.name ][ "$command" ] = {}; - - // Add link and searchList for non-help commands - if( row.name != 'help') { - local.currentNode[ row.name ][ "$command" ].link = local.link; - local.currentNode[ row.name ][ "$command" ].searchList = local.searchList; - } - } - // writeDump( variables.topLevel );abort; - - - - - - #arguments.projectTitle# overview - - - - - - -

#arguments.projecttitle#

- - -

- -

-

- System Commands -
-

-

- - - - - - \ No newline at end of file diff --git a/strategy/CommandBox/resources/templates/overview-summary.cfm b/strategy/CommandBox/resources/templates/overview-summary.cfm deleted file mode 100644 index b8fc34f..0000000 --- a/strategy/CommandBox/resources/templates/overview-summary.cfm +++ /dev/null @@ -1,36 +0,0 @@ - - - - - - Overview - #arguments.projectTitle# - - - - - - - - -

- - - - - - - - - - - -

Namespace Overview
#arguments.qPackages.namespace#

-

- - - - \ No newline at end of file diff --git a/strategy/CommandBox/resources/templates/package-summary.cfm b/strategy/CommandBox/resources/templates/package-summary.cfm deleted file mode 100644 index d3ed537..0000000 --- a/strategy/CommandBox/resources/templates/package-summary.cfm +++ /dev/null @@ -1,76 +0,0 @@ - - - - - - #arguments.projectTitle# #arguments.namespace# - - - - - - -

- #arguments.namespace# -

- - - - - - - - -

- - - - - - - - - - - - - - - - -

- Namespaces
#thisNamespace#

- - - - - - - - - - - - - - - - -

- Commands
#command#	- - - #listgetat( meta.hint, 1, chr(13)&chr(10)&'.' )# - -

- -

- - - - \ No newline at end of file diff --git a/strategy/CommandBox/themes/default/resources/static/js/app.js b/strategy/CommandBox/themes/default/resources/static/js/app.js new file mode 100644 index 0000000..6bca42e --- /dev/null +++ b/strategy/CommandBox/themes/default/resources/static/js/app.js @@ -0,0 +1,400 @@ +// CommandBox Documentation SPA - Alpine.js Application +// Replaces the frameset layout with an accessible single-page experience. +function commandApp() { + return { + // ── State ────────────────────────────────────────────────────────── + currentView : "overview", + currentCommand : null, + currentNamespace : null, + namespaces : [], + topLevel : [], + allCommands : [], + searchQuery : "", + searchResults : [], + selectedSearchIndex : 0, + commandFilter : "", + expandedNamespaces : [], + sidebarCollapsed : false, + contentLoading : false, + contentHtml : "", + parentNamespace : null, + systemView : false, + _navigatingProgrammatically : false, + + // ── Initialization ────────────────────────────────────────────────── + async init() { + if ( window.COMMANDBOX_NAV_DATA ) { + this.namespaces = window.COMMANDBOX_NAV_DATA.namespaces || []; + this.topLevel = window.COMMANDBOX_NAV_DATA.topLevel || []; + this.allCommands = window.COMMANDBOX_NAV_DATA.allCommands || []; + } else { + console.error( "COMMANDBOX_NAV_DATA not found. Ensure data/navigation.js is loaded." ); + } + + // Check and modify legacy/frames link + this.handleLegacyLink(); + + // Handle direct links and back/forward navigation + this.handleUrlHash(); + window.addEventListener( "hashchange", () => { + // Ignore hash changes that we triggered ourselves inside loadCommand() + if ( this._navigatingProgrammatically ) { + this._navigatingProgrammatically = false; + return; + } + this.handleUrlHash(); + } ); + }, + // ── Clean incoming legacy/frames links ──────────────────────────────────────────────── + handleLegacyLink() { + // if window.location.search is not empty, and starts with "?commandbox" + if ( window.location.search && window.location.search.startsWith( "?commandbox" ) ) { + var searchString = window.location.search.slice( 1 ); // remove the "?" at the start + // if searchString ends with ".html", remove it + if ( searchString.endsWith( ".html" ) ) { + searchString = searchString.slice( 0, -5 ); + } + // replace "?" with "#" and update the URL without reloading the page + const newHash = "#" + searchString; + // remove the search part from the URL and add the hash + window.history.replaceState( null, "", window.location.pathname + newHash ); + return; + } + }, + // ── URL Hash Routing ──────────────────────────────────────────────── + handleUrlHash() { + const hash = window.location.hash.slice( 1 ); + if ( !hash ) { + this.showOverview(); + return; + } + // Hash is the link path minus ".html" (e.g. "commandbox/commands/server/start") + const link = hash + ".html"; + const cmd = this.allCommands.find( c => c.link === link ); + if ( cmd ) { + this.loadCommand( cmd ); + } else { + this.showOverview(); + } + }, + + // ── Views ──────────────────────────────────────────────────────────── + showOverview() { + this.currentView = "overview"; + this.currentCommand = null; + this.currentNamespace = null; + this.parentNamespace = null; + this.systemView = false; + this.contentHtml = ""; + history.replaceState( null, "", window.location.pathname ); + this.$nextTick( () => this.scrollContentTop() ); + }, + + showNamespace( ns, parentNs = null ) { + if ( !ns ) return; + this.currentView = "namespace"; + this.currentNamespace = ns; + this.currentCommand = null; + this.contentHtml = ""; + + // Expand all ancestor sidebar keys using the space-separated fullNamespace path. + // e.g. fullNamespace "server java sub" → expands "server", "server/java", "server/java/sub" + if ( ns.fullNamespace ) { + const parts = ns.fullNamespace.split( " " ); + for ( let i = 0; i < parts.length; i++ ) { + const key = parts.slice( 0, i + 1 ).join( "/" ); + if ( !this.expandedNamespaces.includes( key ) ) { + this.expandedNamespaces.push( key ); + } + } + // Resolve immediate parent namespace object when not explicitly supplied + if ( !parentNs && parts.length > 1 ) { + const parentParts = parts.slice( 0, -1 ); + let node = this.namespaces.find( n => n.name === parentParts[ 0 ] ); + for ( let i = 1; i < parentParts.length && node; i++ ) { + node = ( node.children || [] ).find( c => c.name === parentParts[ i ] ); + } + parentNs = node || null; + } + } else { + // Top-level namespace (no fullNamespace property) + if ( !this.expandedNamespaces.includes( ns.name ) ) { + this.expandedNamespaces.push( ns.name ); + } + } + + this.parentNamespace = parentNs || null; + this.$nextTick( () => this.scrollContentTop() ); + }, + + showSystemCommands() { + this.currentView = "system"; + this.currentCommand = null; + this.currentNamespace = null; + this.parentNamespace = null; + this.contentHtml = ""; + if ( !this.expandedNamespaces.includes( "__system__" ) ) { + this.expandedNamespaces.push( "__system__" ); + } + this.$nextTick( () => this.scrollContentTop() ); + }, + + async loadCommand( cmd ) { + if ( !cmd || !cmd.link ) return; + + this.currentView = "command"; + this.currentCommand = cmd; + this.contentLoading = true; + this.contentHtml = ""; + + // Expand the parent namespace(s) in the sidebar + if ( cmd.namespace ) { + cmd.namespace.split( " " ).forEach( ( part, i, parts ) => { + const key = i === 0 ? part : parts.slice( 0, i + 1 ).join( "/" ); + if ( !this.expandedNamespaces.includes( key ) ) { + this.expandedNamespaces.push( key ); + } + } ); + } + + // Update URL hash for browser back/forward — flag it so the hashchange + // listener knows this change originated here and skips re-routing. + this._navigatingProgrammatically = true; + window.location.hash = cmd.link.replace( /\.html$/, "" ); + + try { + const response = await fetch( cmd.link ); + if ( response.ok ) { + const html = await response.text(); + const parser = new DOMParser(); + const doc = parser.parseFromString( html, "text/html" ); + // Use the stable id first; nav.cfm also emits a .container-fluid so + // querySelector( '.container-fluid' ) would return the wrong element. + const containers = doc.querySelectorAll( ".container-fluid" ); + const container = doc.getElementById( "command-content" ) + || ( containers.length > 0 ? containers[ containers.length - 1 ] : null ); + this.contentHtml = container ? container.innerHTML : doc.body.innerHTML; + } else { + const safeCommand = this.escapeHtml( cmd.command ); + this.contentHtml = ` +

+

Not Found

+

Unable to load documentation for ${ safeCommand }.

+

`; + } + } catch ( error ) { + const safeCommand = this.escapeHtml( cmd.command ); + const safeMessage = this.escapeHtml( error.message ); + this.contentHtml = ` +

+

Error

+

Failed to load ${ safeCommand }: ${ safeMessage }

+

`; + } + + this.contentLoading = false; + + this.$nextTick( () => { + this.scrollContentTop(); + // Re-run syntax highlighting on the newly injected content + if ( window.SyntaxHighlighter ) { + SyntaxHighlighter.config.stripBrs = true; + SyntaxHighlighter.defaults.gutter = false; + SyntaxHighlighter.defaults.toolbar = false; + SyntaxHighlighter.highlight(); + } + } ); + }, + + // ── Sidebar ────────────────────────────────────────────────────────── + + // Recursively count all commands under a namespace at any depth. + countCommands( ns ) { + let n = ( ns.commands || [] ).length; + for ( const ch of ns.children || [] ) n += this.countCommands( ch ); + return n; + }, + + toggleNamespace( key ) { + const idx = this.expandedNamespaces.indexOf( key ); + if ( idx > -1 ) { + this.expandedNamespaces.splice( idx, 1 ); + } else { + this.expandedNamespaces.push( key ); + } + }, + + isExpanded( key ) { + return this.expandedNamespaces.includes( key ); + }, + + // ── Tree keyboard navigation (ARIA tree pattern) ────────────────────── + treeKeydown( event ) { + const arrowKeys = [ "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End" ]; + if ( !arrowKeys.includes( event.key ) ) return; + event.preventDefault(); + + const tree = event.currentTarget; + const items = Array.from( tree.querySelectorAll( "[role='treeitem']" ) ); + const focused = document.activeElement; + const idx = items.indexOf( focused ); + + if ( event.key === "ArrowDown" ) { + if ( idx < items.length - 1 ) items[ idx + 1 ].focus(); + } else if ( event.key === "ArrowUp" ) { + if ( idx > 0 ) items[ idx - 1 ].focus(); + } else if ( event.key === "Home" ) { + items[ 0 ]?.focus(); + } else if ( event.key === "End" ) { + items[ items.length - 1 ]?.focus(); + } else if ( event.key === "ArrowRight" ) { + // Expand collapsed namespace, or move to first child if already expanded + if ( focused?.getAttribute( "aria-expanded" ) === "false" ) { + focused.click(); + } else if ( idx < items.length - 1 ) { + items[ idx + 1 ].focus(); + } + } else if ( event.key === "ArrowLeft" ) { + // Collapse expanded namespace, or move focus to parent namespace + if ( focused?.getAttribute( "aria-expanded" ) === "true" ) { + focused.click(); + } else { + const level = parseInt( focused?.getAttribute( "aria-level" ) || "1", 10 ); + for ( let i = idx - 1; i >= 0; i-- ) { + if ( parseInt( items[ i ].getAttribute( "aria-level" ) || "1", 10 ) < level ) { + items[ i ].focus(); + break; + } + } + } + } + }, + + // ── Search ──────────────────────────────────────────────────────────── + performSearch() { + if ( !this.searchQuery.trim() ) { + this.searchResults = []; + this.selectedSearchIndex = 0; + return; + } + const q = this.searchQuery.toLowerCase(); + this.searchResults = this.allCommands + .filter( c => + c.command.toLowerCase().includes( q ) || + c.searchList.toLowerCase().includes( q ) || + ( c.hint && c.hint.toLowerCase().includes( q ) ) + ) + .slice( 0, 12 ); + this.selectedSearchIndex = 0; + }, + + navigateSearch( direction ) { + if ( !this.searchResults.length ) return; + this.selectedSearchIndex += direction; + if ( this.selectedSearchIndex < 0 ) { + this.selectedSearchIndex = this.searchResults.length - 1; + } else if ( this.selectedSearchIndex >= this.searchResults.length ) { + this.selectedSearchIndex = 0; + } + }, + + selectSearchResult() { + if ( this.searchResults.length > 0 ) { + this.loadCommand( this.searchResults[ this.selectedSearchIndex ] ); + this.searchQuery = ""; + this.searchResults = []; + } + }, + + // ── Utilities ──────────────────────────────────────────────────────── + scrollContentTop() { + const main = document.getElementById( "main-content" ); + if ( main ) main.scrollTop = 0; + }, + + // Escape a string for safe insertion into HTML to prevent XSS + escapeHtml( str ) { + if ( typeof str !== "string" ) return ""; + const div = document.createElement( "div" ); + div.textContent = str; + return div.innerHTML; + }, + + // ── Computed ───────────────────────────────────────────────────────── + + /** + * Flattens the namespace tree into a depth-annotated list for the sidebar. + * Only items whose ancestors are currently expanded are included, so + * visibility is driven by list membership rather than x-show. + * commandFilter is applied recursively at every depth. + * + * Each item is one of: + * { type: "ns", depth, key, ns } — namespace header (folder button) + * { type: "cmd", depth, cmd } — command link + */ + get flatSidebarItems() { + const items = []; + const f = this.commandFilter.toLowerCase().trim(); + + const matchesFilter = ( ns ) => { + if ( !f ) return true; + if ( ns.name.toLowerCase().includes( f ) ) return true; + if ( ( ns.commands || [] ).some( c => c.command.toLowerCase().includes( f ) ) ) return true; + return ( ns.children || [] ).some( ch => matchesFilter( ch ) ); + }; + + const flatten = ( nsList, depth, parentKey ) => { + for ( const ns of nsList ) { + if ( !matchesFilter( ns ) ) continue; + const key = parentKey ? parentKey + "/" + ns.name : ns.name; + items.push( { type: "ns", depth, key, ns } ); + if ( this.isExpanded( key ) ) { + const visibleCmds = !f + ? ( ns.commands || [] ) + : ( ns.commands || [] ).filter( c => c.command.toLowerCase().includes( f ) ); + for ( const cmd of visibleCmds ) { + items.push( { type: "cmd", depth: depth + 1, cmd } ); + } + if ( ns.children && ns.children.length ) { + flatten( ns.children, depth + 1, key ); + } + } + } + }; + + flatten( this.namespaces, 0, "" ); + return items; + }, + + get totalCommandCount() { + return this.allCommands.length; + }, + + // Root namespace object for the current command (first word of namespace) + get currentCommandParentNs() { + if ( !this.currentCommand?.namespace ) return null; + const parentName = this.currentCommand.namespace.split( " " )[ 0 ]; + return this.namespaces.find( n => n.name === parentName ) || null; + }, + + // Deepest child namespace object for the current command. + // For "server java sub", walks namespaces → server → children → java → children → sub. + get currentCommandChildNs() { + if ( !this.currentCommand?.namespace ) return null; + const parts = this.currentCommand.namespace.split( " " ); + if ( parts.length < 2 ) return null; + let node = this.namespaces.find( n => n.name === parts[ 0 ] ); + if ( !node ) return null; + for ( let i = 1; i < parts.length; i++ ) { + const next = ( node.children || [] ).find( c => c.name === parts[ i ] ); + if ( !next ) return null; + node = next; + } + return node; + }, + + get totalNamespaceCount() { + return this.namespaces.length; + } + }; +} diff --git a/strategy/CommandBox/resources/templates/class.cfm b/strategy/CommandBox/themes/default/resources/templates/class.cfm similarity index 66% rename from strategy/CommandBox/resources/templates/class.cfm rename to strategy/CommandBox/themes/default/resources/templates/class.cfm index 90b4380..8ecd66f 100644 --- a/strategy/CommandBox/resources/templates/class.cfm +++ b/strategy/CommandBox/themes/default/resources/templates/class.cfm @@ -9,27 +9,6 @@ - - - - - - - - - - - - - - @@ -42,46 +21,52 @@ > -

#arguments.command#

- - - -

-

- Aliases: - -

- #local.alias# -

- - +

+

+ +

+ #arguments.command# +

+ + +

+

+ Aliases: + + + #local.alias# + + +

-

- + - - // All we care about is the "run()" method - local.qFunctions = buildFunctionMetaData( arguments.metadata ); - local.qFunctions = getMetaSubQuery(local.qFunctions, "UPPER(name)='RUN'"); - + + // All we care about is the "run()" method + local.qFunctions = buildFunctionMetaData( arguments.metadata ); + local.qFunctions = getMetaSubQuery(local.qFunctions, "UPPER(name)='RUN'"); + - - - - - + + + + + - -

-

Parameters:

- + +

+

Parameters:

+

+ - - - - - + + + + + + + @@ -107,22 +92,45 @@ +

Name	Type	Required	Default	Hint	Name	Type	Required	Default	Hint

- + + - +

-

+ +

Command Usage

+

+ #writeHint( documentation.hint )# +

+ - -

Command Usage

-

-

#writeHint( documentation.hint )#

-

- + +

+ + + + + + + + + + + + + + + @@ -142,7 +150,6 @@ // Fix line breaks hint = reReplace( hint, '\n', '#chr(10)#
', 'all' ); - return hint; } \ No newline at end of file diff --git a/strategy/CommandBox/themes/default/resources/templates/generateNavigation.cfm b/strategy/CommandBox/themes/default/resources/templates/generateNavigation.cfm new file mode 100644 index 0000000..98bfdaa --- /dev/null +++ b/strategy/CommandBox/themes/default/resources/templates/generateNavigation.cfm @@ -0,0 +1,193 @@ + + +/** + * CommandBox Navigation Data Generator + * Generates data/navigation.js for the Alpine.js SPA + * + * Called from packagePages.cfm after all command pages are built. + * Requires navArgs.qMetaData (augmented query with command/namespace columns) + * and navArgs.outputDir to be set in the calling scope. + */ + +local.navData = { + "namespaces" : [], + "topLevel" : [], + "allCommands" : [] +}; + +// Re-build the namespace tree from the augmented metadata query +local.namespaceTree = {}; +local.topLevelTree = {}; + +for ( local.row in navArgs.qMetaData ) { + if ( local.row.name == "CommandTemplate" ) continue; + + local.command = local.row.command; + local.namespace = local.row.namespace; + local.namespaceParts = len( trim( local.namespace ) ) > 0 + ? listToArray( trim( local.namespace ), " " ) + : []; + local.link = replace( local.row.package, ".", "/", "all" ) & "/" & local.row.name & ".html"; + local.packageLink = replace( local.row.package, ".", "/", "all" ) & "/package-summary.html"; + local.searchList = local.command; + + // Get first-line hint from metadata + local.meta = local.row.metadata; + local.doc = server.keyExists( "boxlang" ) ? local.meta.documentation : local.meta; + local.hint = ""; + if ( structKeyExists( local.doc, "hint" ) && len( trim( local.doc.hint ) ) ) { + local.hint = listFirst( trim( local.doc.hint ), chr( 10 ) ); + if ( len( local.hint ) > 150 ) local.hint = left( local.hint, 150 ) & "..."; + } + + if ( !isNull( local.row.metadata.aliases ) && len( local.row.metadata.aliases ) ) { + local.searchList &= "," & local.row.metadata.aliases; + } + + // Determine target tree (top-level = single word command, e.g. "help") + local.isTopLevel = ( listLen( local.command, " " ) == 1 ); + local.targetTree = local.isTopLevel ? local.topLevelTree : local.namespaceTree; + local.targetTree[ "$link" ] = local.packageLink; + + // Navigate / create nested namespace structure + local.currentNode = local.targetTree; + for ( local.part in local.namespaceParts ) { + if ( !structKeyExists( local.currentNode, local.part ) ) { + local.currentNode[ local.part ] = { "$link" : local.packageLink }; + } + local.currentNode = local.currentNode[ local.part ]; + } + + // Add command node + if ( !structKeyExists( local.currentNode, local.row.name ) ) { + local.currentNode[ local.row.name ] = {}; + } + + // (skip "help" special case) + if ( local.row.name != "help" ) { + local.currentNode[ local.row.name ][ "$command" ] = { + "link" : local.link, + "searchList" : local.searchList, + "hint" : local.hint + }; + // Add to flat allCommands list + arrayAppend( local.navData.allCommands, { + "name" : local.row.name, + "command" : local.command, + "namespace" : local.namespace, + "link" : local.link, + "searchList" : local.searchList, + "hint" : local.hint + } ); + } +} + +// ── Convert namespaceTree struct → Alpine.js-friendly array ────────────────── + +/** + * Recursively converts a namespace tree node into an Alpine.js-friendly item. + * + * @node The struct node from namespaceTree to convert. + * @namespacePath Space-separated namespace path to this node (e.g. "server java"). + * @return A struct with name, fullNamespace, link, commands[], children[]. + */ +function convertNamespaceNode( required struct node, required string namespacePath ) { + var parts = listToArray( trim( arguments.namespacePath ), " " ); + var name = parts[ arrayLen( parts ) ]; + + var item = { + "name" : name, + "fullNamespace" : arguments.namespacePath, + "link" : structKeyExists( arguments.node, "$link" ) ? arguments.node[ "$link" ] : "", + "commands" : [], + "children" : [] + }; + + var nodeKeys = structKeyArray( arguments.node ); + arraySort( nodeKeys, "text" ); + + for ( var nodeKey in nodeKeys ) { + if ( left( nodeKey, 1 ) == "$" ) continue; + var child = arguments.node[ nodeKey ]; + + if ( isStruct( child ) && structIsEmpty( child ) ) continue; + + if ( structKeyExists( child, "$command" ) ) { + // Direct command under this namespace + var cmdData = child[ "$command" ]; + arrayAppend( item.commands, { + "name" : nodeKey, + "command" : arguments.namespacePath & " " & nodeKey, + "link" : structKeyExists( cmdData, "link" ) ? cmdData.link : "", + "searchList" : structKeyExists( cmdData, "searchList" ) ? cmdData.searchList : nodeKey, + "hint" : structKeyExists( cmdData, "hint" ) ? cmdData.hint : "" + } ); + } else { + // Child namespace — recurse to any depth + var childItem = convertNamespaceNode( child, arguments.namespacePath & " " & nodeKey ); + arraySort( childItem.commands, function( a, b ) { + return a.name > b.name ? 1 : -1; + } ); + arrayAppend( item.children, childItem ); + } + } + + arraySort( item.commands, function( a, b ) { + return a.name > b.name ? 1 : -1; + } ); + + return item; +} + +local.nsKeys = structKeyArray( local.namespaceTree ); +arraySort( local.nsKeys, "text" ); + +for ( local.nsKey in local.nsKeys ) { + if ( left( local.nsKey, 1 ) == "$" ) continue; + + local.nsNode = local.namespaceTree[ local.nsKey ]; + local.nsItem = convertNamespaceNode( local.nsNode, local.nsKey ); + // Top-level namespace items don't need fullNamespace (it equals name) + structDelete( local.nsItem, "fullNamespace" ); + + arrayAppend( local.navData.namespaces, local.nsItem ); +} + +// ── Top-level commands (e.g. "help") ───────────────────────────────────────── + +local.tlKeys = structKeyArray( local.topLevelTree ); +arraySort( local.tlKeys, "text" ); + +for ( local.tlKey in local.tlKeys ) { + if ( left( local.tlKey, 1 ) == "$" ) continue; + local.tlNode = local.topLevelTree[ local.tlKey ]; + if ( structKeyExists( local.tlNode, "$command" ) ) { + local.tlData = local.tlNode[ "$command" ]; + local.tlLink = structKeyExists( local.tlData, "link" ) ? local.tlData.link : ""; + if ( len( local.tlLink ) ) { + arrayAppend( local.navData.topLevel, { + "name" : local.tlKey, + "command" : local.tlKey, + "link" : local.tlLink, + "searchList" : structKeyExists( local.tlData, "searchList" ) ? local.tlData.searchList : local.tlKey, + "hint" : structKeyExists( local.tlData, "hint" ) ? local.tlData.hint : "" + } ); + } + } +} + +// ── Write data/navigation.js ────────────────────────────────────────────────── + +local.dataDir = navArgs.outputDir & "/data"; +if ( !directoryExists( local.dataDir ) ) { + directoryCreate( local.dataDir ); +} + +local.jsonContent = serializeJSON( local.navData, "struct" ); +local.jsContent = "// CommandBox Documentation - Navigation Data" & chr( 10 ) + & "// Auto-generated by DocBox - Do not edit manually" & chr( 10 ) + & "window.COMMANDBOX_NAV_DATA = " & local.jsonContent & ";"; + +fileWrite( local.dataDir & "/navigation.js", local.jsContent ); + + diff --git a/strategy/CommandBox/themes/default/resources/templates/inc/common.cfm b/strategy/CommandBox/themes/default/resources/templates/inc/common.cfm new file mode 100644 index 0000000..8bfc373 --- /dev/null +++ b/strategy/CommandBox/themes/default/resources/templates/inc/common.cfm @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/strategy/CommandBox/themes/default/resources/templates/inc/nav.cfm b/strategy/CommandBox/themes/default/resources/templates/inc/nav.cfm new file mode 100644 index 0000000..985e0cd --- /dev/null +++ b/strategy/CommandBox/themes/default/resources/templates/inc/nav.cfm @@ -0,0 +1,48 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/strategy/CommandBox/themes/default/resources/templates/index.cfm b/strategy/CommandBox/themes/default/resources/templates/index.cfm new file mode 100644 index 0000000..3fb21c7 --- /dev/null +++ b/strategy/CommandBox/themes/default/resources/templates/index.cfm @@ -0,0 +1,441 @@ + + + + + #arguments.projectTitle# - Command API Documentation + + + + + + + + + + + +

+ + + + + +

+ + + + + + + + + + + + +

+

+ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/strategy/CommandBox/themes/default/resources/templates/overview-frame.cfm b/strategy/CommandBox/themes/default/resources/templates/overview-frame.cfm new file mode 100644 index 0000000..4ee67fa --- /dev/null +++ b/strategy/CommandBox/themes/default/resources/templates/overview-frame.cfm @@ -0,0 +1,4 @@ + + + + diff --git a/strategy/CommandBox/themes/default/resources/templates/overview-summary.cfm b/strategy/CommandBox/themes/default/resources/templates/overview-summary.cfm new file mode 100644 index 0000000..39c130a --- /dev/null +++ b/strategy/CommandBox/themes/default/resources/templates/overview-summary.cfm @@ -0,0 +1,51 @@ + + + + + + Overview - #arguments.projectTitle# + + + + + + + +

+

+

+

CLI Documentation

+

Browse all command namespaces

+

+ +

+

+ + + + + + + + + + + + + +

Namespace Overview
+ + #arguments.qPackages.namespace# +

+

+

+

+

+ + + + \ No newline at end of file diff --git a/strategy/CommandBox/themes/default/resources/templates/package-summary.cfm b/strategy/CommandBox/themes/default/resources/templates/package-summary.cfm new file mode 100644 index 0000000..d353259 --- /dev/null +++ b/strategy/CommandBox/themes/default/resources/templates/package-summary.cfm @@ -0,0 +1,95 @@ + + + + + + #arguments.projectTitle# #arguments.namespace# + + + + + + +

+

+ + +

#arguments.namespace#

+ + + + + + + + +

+ +

+ + + + + + + + + + + + + + + + +

+ Namespaces +
#thisNamespace#

+

+ + +

+ + + + + + + + + + + + + + +

+ Commands +
#command#	+ + + #listgetat( meta.hint, 1, chr(13)&chr(10)&'.' )# + +

+

+ +

+

+

+ + + \ No newline at end of file diff --git a/strategy/CommandBox/resources/templates/packagePages.cfm b/strategy/CommandBox/themes/default/resources/templates/packagePages.cfm similarity index 78% rename from strategy/CommandBox/resources/templates/packagePages.cfm rename to strategy/CommandBox/themes/default/resources/templates/packagePages.cfm index 1406265..7076933 100644 --- a/strategy/CommandBox/resources/templates/packagePages.cfm +++ b/strategy/CommandBox/themes/default/resources/templates/packagePages.cfm @@ -29,4 +29,14 @@ buildClassPages( qPackage, arguments.qMetadata ); - \ No newline at end of file + + + +// Generate navigation data for the Alpine.js SPA +// Must run after all command pages are built so every link exists +local.navArgs = { + outputDir : this.getOutputDir(), + qMetaData : arguments.qMetadata +}; +include "#variables.TEMPLATE_PATH#/generateNavigation.cfm"; + \ No newline at end of file diff --git a/strategy/api/themes/default/resources/static/css/stylesheet.css b/strategy/api/themes/default/resources/static/css/stylesheet.css index 20b64c6..c480481 100644 --- a/strategy/api/themes/default/resources/static/css/stylesheet.css +++ b/strategy/api/themes/default/resources/static/css/stylesheet.css @@ -30,7 +30,6 @@ --primary-hover: #00A372; --link-color: #00A372; --link-hover: #00D991; - --text-badge-color: #fff; /* Component Specific */ --navbar-height: 60px; @@ -54,19 +53,18 @@ --primary-hover: var(--boxlang-green-light); --link-color: var(--boxlang-teal); --link-hover: var(--boxlang-teal-light); - --text-badge-color: #000; - + color-scheme: dark; } +[x-cloak] { + display: none !important; +} + /* ======================================== Global Styles ======================================== */ -* { - box-sizing: border-box; -} - body { margin: 0; padding: 0; @@ -75,11 +73,10 @@ body { line-height: 1.6; background-color: var(--bg-primary); color: var(--text-primary); - transition: background-color 0.3s ease, color 0.3s ease; } h1, h2, h3, h4, h5, h6 { - margin: 15px 0; + margin: 1rem 0 .75rem; color: var(--text-primary); } @@ -100,10 +97,6 @@ html[data-theme="dark"] code { color: #ff94cb !important; } -[x-cloak] { - display: none !important; -} - pre{ margin: 15px 0px; } @@ -111,24 +104,37 @@ pre{ /* ======================================== Navbar ======================================== */ - -.navbar { +.cs-navbar { + display: flex; + align-items: center; + padding: 0 1rem; + gap: 1rem; +} +.navbar, .cs-navbar { height: var(--navbar-height); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); z-index: 1000; } -[data-theme="dark"] .navbar { +[data-theme="dark"] .navbar, [data-theme="dark"] .cs-navbar { background-color: var(--boxlang-dark-surface) !important; border-bottom: 1px solid var(--border-color); } -.navbar-brand { +.cs-navbar-brand { + white-space: nowrap; + text-decoration: none !important; + display: flex; + align-items: center; + gap: .5rem; +} + +.navbar-brand, .cs-navbar-brand { font-size: 1.25rem; color: var(--boxlang-green) !important; } -.navbar-brand:hover { +.navbar-brand:hover, .cs-navbar-brand:hover { color: var(--boxlang-green-light) !important; } @@ -241,9 +247,21 @@ pre{ background-color: var(--bg-secondary); } -.sidebar.collapsed .sidebar-header h6 { +.sidebar.collapsed .sidebar-header h2 { display: none; } +.sidebar-toggle { + background: none; + border: none; + color: var(--text-secondary); + cursor: pointer; + padding: .2rem .3rem; + border-radius: 4px; + transition: all .15s ease; + line-height: 1; +} + +.sidebar-toggle:hover { background: rgba(255, 255, 255, .08); color: var(--text-primary); } .sidebar-content { flex: 1; @@ -252,48 +270,63 @@ pre{ } /* Package Tree */ -.package-tree { +.doc-tree { margin-top: 0.5rem; } -.package-item { +.doc-item { margin-bottom: 0.5rem; } -.package-name { - display: flex; - align-items: center; - gap: 0.5rem; +.doc-tree.compact .doc-item { + margin-bottom: 0; +} + +.doc-name-btn { + width: 100%; + background: none; + border: none; + border-radius: 6px; padding: 0.5rem; border-radius: 6px; cursor: pointer; transition: background-color 0.2s ease; font-weight: 500; color: var(--text-primary); + display: flex; + align-items: center; + gap: 0.5rem; + text-align: left; } -.package-name:hover { - background-color: var(--bg-tertiary); +.doc-name-btn:hover { + background-color: rgba(255, 255, 255, .06);; } -.package-name.active { - background-color: transparent; +.doc-name-btn.active { + background: rgba(0, 180, 216, .15); color: var(--text-primary); border-left: 3px solid var(--primary-color); padding-left: calc(0.5rem - 3px); } -.package-name i { +.doc-name-btn i { color: var(--primary-color); } -.package-name.active i { +.doc-name-btn.active i { color: var(--primary-color); } -.package-classes { +.doc-name-btn .badge { + font-size: .75rem; + background: rgba(110, 118, 129, .3) !important; + color: var(--text-secondary); +} + +.doc-subitems { margin-left: 1.5rem; - margin-top: 0.5rem; + margin-top: 0.25rem; } .class-group { @@ -309,7 +342,7 @@ pre{ letter-spacing: 0.5px; } -.class-item { +.doc-subitem { display: block; padding: 0.4rem 0.75rem; margin-bottom: 2px; @@ -320,18 +353,20 @@ pre{ font-size: 0.9rem; } -.class-item:hover { - background-color: var(--bg-tertiary); +.doc-subitem:hover { + background: rgba(255, 255, 255, .06); color: var(--text-primary); transform: translateX(4px); } -.class-item.active { +.doc-subitem.active { background-color: var(--primary-color); - color: white; + color: #0d1117; font-weight: 500; } +.child-ns-block { margin-top: 2px; } + /* ======================================== Content Area ======================================== */ @@ -341,6 +376,7 @@ pre{ overflow-y: auto; padding: 2rem; transition: margin-left 0.3s ease; + min-width: 0; } .content.sidebar-collapsed { @@ -352,6 +388,8 @@ pre{ ======================================== */ .card { + --bs-card-cap-color: var(--text-secondary); + background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; @@ -414,27 +452,32 @@ pre{ letter-spacing: 0.5px; font-weight: 600; } +/* ── Namespace Cards (overview) ──────────────────────────────────── */ -.package-card { +.doc-card { + background: var(--card-bg); + border: 2px solid var(--border-color) !important; cursor: pointer; - border: 2px solid var(--border-color); + transition: all .2s ease; } -.package-card:hover { +.doc-card:hover { border-color: var(--primary-color); - background-color: var(--card-bg); + transform: translateY(-2px); + box-shadow: 0 4px 14px rgba(0, 180, 216, .2); } -.package-card h5, -.package-card .card-title { +.doc-card h5, +.doc-card .card-title { color: var(--text-primary) !important; + font-size: 1rem; } -.package-card .text-muted { +.doc-card .text-muted { color: var(--text-secondary) !important; } -.package-card i { +.doc-card i { color: var(--primary-color); } @@ -442,29 +485,11 @@ pre{ Breadcrumbs ======================================== */ -.breadcrumb { - background-color: transparent; - padding: 0; - margin-bottom: 1.5rem; -} - -.breadcrumb-item a { - color: var(--link-color); - text-decoration: none; - transition: color 0.2s ease; -} +.breadcrumb { background: transparent; padding: 0; margin-bottom: 1.5rem; } +.breadcrumb-item a { color: var(--primary-color); } +.breadcrumb-item.active { color: var(--text-secondary); } +.breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); } -.breadcrumb-item a:hover { - color: var(--link-hover); -} - -.breadcrumb-item.active { - color: var(--text-primary); -} - -.btn-link { - color: var(--link-color); -} /* ======================================== Links @@ -566,7 +591,6 @@ a:hover { font-weight: 500; padding: 0.35rem 0.65rem; border-radius: 6px; - color: var(--text-badge-color); } .badge-primary { @@ -883,6 +907,10 @@ a:hover { [data-theme="dark"] .nav-tabs { border-bottom-color: var(--border-color); } +/* ======================================== + Syntaxhighlighter Override + ======================================== */ +.syntaxhighlighter table td.code { padding: 10px !important; } /* ======================================== Scrollbar Styling @@ -925,17 +953,19 @@ a:hover { @media (max-width: 768px) { .sidebar { position: fixed; - left: -100%; + left: 0; top: var(--navbar-height); height: calc(100vh - var(--navbar-height)); z-index: 999; - transition: left 0.3s ease; + transform: translateX(-100%); + transition: transform .3s ease, width .3s ease; } .sidebar.show { - left: 0; + transform: translateX(0); } - + .sidebar:not(.collapsed) { transform: translateX(0); } + .content { margin-left: 0 !important; } diff --git a/strategy/api/themes/default/resources/templates/index.cfm b/strategy/api/themes/default/resources/templates/index.cfm index ef47c2c..1880b56 100644 --- a/strategy/api/themes/default/resources/templates/index.cfm +++ b/strategy/api/themes/default/resources/templates/index.cfm @@ -72,8 +72,13 @@