more doc-utils documentation

config.yaml

@@ -91,3 +91,4 @@ output:
 # Markdown-to-HTML Configuration
 markdown:
   # 
+  base_url: http://localhost:8000

docs/_assets/base.css

@@ -40,7 +40,7 @@ body {
 }
 
 color-scheme-toggle-button,
-outline-toggle {
+outline-button {
 	position: fixed;
 	top: 0.5rem;
 	right: 0.5rem;
@@ -48,12 +48,12 @@ outline-toggle {
 	z-index: 2;
 }
 
-outline-toggle {
+outline-button {
 	top: 0.5rem;
 	right: 3rem;
 }
 
-#outline {
+#outline-panel {
 	position: fixed;
 	top: 4rem;
 	right: 2rem;
@@ -66,57 +66,58 @@ outline-toggle {
 	z-index: 10;
 }
 
-[data-show-outline] #outline {
+[data-show-outline] #outline-panel {
 	display: block;
 }
 
-#outline h2 {
+:is(#outline-inline, #outline-panel) h2 {
 	margin-block: 1rem;
 	margin-inline: 1rem;
 	padding: 0;
 	font-size: 1.4rem;
 }
 
-#outline ol {
+:is(#outline-inline, #outline-panel) ol {
 	list-style: none;
 	padding: 0;
 }
 
-#outline li[data-depth='h1'] {
+:is(#outline-inline, #outline-panel) li[data-depth='h1'] {
 	font-size: 1.2rem;
 	font-weight: 700;
 	margin-inline-start: 1rem;
 }
 
-#outline li[data-depth='h2'] {
+:is(#outline-inline, #outline-panel) li[data-depth='h2'] {
 	font-size: 1.1rem;
 	font-weight: 600;
 	margin-inline-start: 2rem;
 }
 
-#outline li[data-depth='h3'] {
+:is(#outline-inline, #outline-panel) li[data-depth='h3'] {
 	margin-inline-start: 3rem;
 }
 
-#outline li[data-depth='h4'] {
+:is(#outline-inline, #outline-panel) li[data-depth='h4'] {
 	font-size: 0.9rem;
 	margin-inline-start: 4rem;
 }
 
-#outline li[data-depth='h5'] {
+:is(#outline-inline, #outline-panel) li[data-depth='h5'] {
 	font-size: 0.9rem;
 	margin-inline-start: 5rem;
 }
 
-#outline li[data-depth='h6'] {
+:is(#outline-inline, #outline-panel) li[data-depth='h6'] {
 	font-size: 0.9rem;
 	margin-inline-start: 6rem;
 }
 
 @media print {
 	color-scheme-toggle-button,
-	outline-toggle,
+	outline-button,
-	#outline {
+	#outline-inline,
+	#outline-panel {
 		display: hidden !important;
 	}
 }
@@ -247,6 +248,7 @@ body[data-color-transition-enabled] :is(
 	position: relative;
 	min-height: 100%;
 	padding: 1rem;
+	padding-block-end: 5rem;
 	z-index: 1;
 }
 
@@ -305,6 +307,7 @@ body[data-color-transition-enabled] :is(
 
 #root > footer .right {
 	text-align: right;
+	padding-inline-end: 1.5rem;
 }
 
 #root > footer ul {
@@ -722,6 +725,12 @@ a.icon-link svg.icon {
 
 a.heading-anchor {
 	color: var(--theme-text-light);
+	opacity: 0.3;
+	margin-inline-start: 0.5rem;
+}
+
+:is(h1, h2, h3, h4, h5, h6):hover > a.heading-anchor {
+	opacity: 1;
 }
 
 :is(h1, h2, h3, h4, h5, h6) svg.icon:not(.heading-anchor > svg) {

docs/_assets/extras.js

@@ -1,6 +1,6 @@
 
 {{> .extras/components/color-scheme-toggle-button.js }}
 
-{{> .extras/outline-inline.js }}
+{{> .extras/components/outline-inline.js }}
 
-{{> .extras/outline-button.js }}
+{{> .extras/components/outline-button.js }}

docs/color-themes/index.md

@@ -0,0 +1,10 @@
+---
+title: Color Themes | doc-utils
+layout: main.html
+---
+
+# Color Themes {#-}
+
+
+
+

docs/index.md

@@ -3,24 +3,103 @@ title: doc-utils
 layout: main.html
 ---
 
-# doc-utils
+# doc-utils {#-}
 
 Documentation for the `doc-utils` projects.
 
-## CLI Commands
+The [docs2website] project is a static site generator primarily focused on technical writing and documentation. It is the main culmination of all of the other projects here, and is probably what you want if you're here to create a website of some kind.
 
-- [`docs2website`](./cli/docs2website.html) - Convert a directory with various documents into a website
+The [color-themes] project contains the directory of all of the built-in color themes that come with [docs2website], and is where the JSON Schema and TypeScript definitions for those color themes are located.
-- [`markdown2html`](./cli/markdown2html.html) - Convert Markdown documents to HTML documents
-- [`openapi2markdown`](./cli/openapi2markdown.html) - Convert OpenAPI Specification files to Markdown documents
-- [`schema2markdown`](./cli/schema2markdown.html) - Convert JSON Schema files to Markdown documents
 
-## Node.js Modules
+The remaining projects each are responsible for converting one document format into another; [markdown2html] is an extension layer on top of [Marked] that is responsible for rendering Markdown to HTML, and the others all convert various formats into Markdown.
 
-- [`@doc-utils/docs2website`](./nodejs/docs2website.html) - Convert a directory with various documents into a website
+```pikchr
-- [`@doc-utils/markdown2html`](./nodejs/markdown2html.html) - Convert Markdown documents to HTML documents
+JSCH:   box "JSON Schema" wid 150% ht 65%
-- [`@doc-utils/openapi2markdown`](./nodejs/openapi2markdown.html) - Convert OpenAPI Specification files to Markdown documents
-- [`@doc-utils/schema2markdown`](./nodejs/schema2markdown.html) - Convert JSON Schema files to Markdown documents
 
-## Markdown Format Documentation
+OAPI:   box "OpenAPI Spec" same \
+          at 0.75 south of JSCH
 
-See [markdown.html](./markdown.html)
+CSBOM:  box "CycloneDX SBOM" same \
+          at 0.75 south of OAPI
+
+LD:     box "L-D Context" same \
+          at 0.75 south of CSBOM
+
+ETC:    box "Etc..." same \
+          at 0.75 south of LD
+
+MD:     box "Markdown" same \
+          at 2.5 east of CSBOM
+
+HTML:   box "HTML Fragments" same \
+          at 2.5 east of MD
+
+COLOR:  box "Color Themes" same \
+          at 0.75 north of HTML
+
+ASSET:  box "Static Assets" same \
+          at 0.75 south of HTML
+
+WEB:    box "Static Website" same \
+          at 1.5 east of HTML
+
+SITE:   box ht (COLOR.n.y-ASSET.s.y)+0.5 wid COLOR.wid+WEB.wid+0.75 \
+          at (HTML.x+0.75,HTML.y) \
+          dashed \
+          behind HTML
+
+text "docs2website" italic small above at SITE.s
+
+arrow from JSCH .e to MD .nw \
+  "jsonschema2markdown" italic aligned above small
+
+arrow from OAPI .e to 0.1 above MD .w \
+  "openapi2markdown" italic aligned above small
+
+arrow from CSBOM .e to MD .w \
+  "cyclonedxsbom2markdown" italic aligned above small
+
+arrow from LD .e to 0.1 below MD .w \
+  "ldcontext2markdown" italic aligned above small
+
+arrow from ETC .e to MD .sw
+
+arrow from MD .e to HTML .w \
+  "markdown2html" italic aligned above small
+
+arrow from COLOR .e to WEB .nw
+
+arrow from HTML .e to WEB .w
+
+arrow from ASSET .e to WEB .sw
+```
+
+
+
+## Projects
+
+- [docs2website] - Static site generator based on an extended form of Markdown
+- [color-themes] - Directory of color themes, along with the definition for the color theme format
+- [markdown2html] - Convert Markdown documents to HTML documents
+- [openapi2markdown] - Convert OpenAPI Specification files to Markdown documents
+- [jsonschema2markdown] - Convert JSON Schema files to Markdown documents
+
+
+
+## Markdown Format
+
+See [Markdown Format]
+
+
+
+
+
+<!-- Link Details -->
+
+[docs2website]: ./docs2website/index.html
+[color-themes]: ./color-themes/index.html
+[markdown2html]: ./markdown2html/index.html
+[openapi2markdown]: ./openapi2markdown/index.html
+[jsonschema2markdown]: ./jsonschema2markdown/index.html
+[Markdown Format]: ./markdown-format.html
+[Marked]: https://marked.js.org/

layouts/main.html

@@ -10,10 +10,24 @@
 	<link rel="stylesheet" href="_assets/prism.css">
 </head>
 <body>
+
 <script src="_assets/extras.js"></script>
 <color-scheme-toggle-button></color-scheme-toggle-button>
+
+{{# page.outline_button }}
+<outline-button content-root="#root"></outline-button>
+{{/ page.outline_button }}
+
 <div id="root">
+<main>
 {{> .content }}
+</main>
+
+<footer>
+	<p class="left">Built with docs2website at <time datetime="{{ build_time.iso }}">{{ build_time.rfc2822 }}</time></p>
+	<p class="right">Copyright 2023 James Brumond</p>
+</footer>
 </div>
+
 </body>
 </html>