diff --git a/config.yaml b/config.yaml index f07c2f6..85b31b3 100644 --- a/config.yaml +++ b/config.yaml @@ -91,3 +91,4 @@ output: # Markdown-to-HTML Configuration markdown: # + base_url: http://localhost:8000 diff --git a/docs/_assets/base.css b/docs/_assets/base.css index 5558988..3ed7c40 100644 --- a/docs/_assets/base.css +++ b/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 { + outline-button, + #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) { diff --git a/docs/_assets/extras.js b/docs/_assets/extras.js index 7f06171..02da3e5 100644 --- a/docs/_assets/extras.js +++ b/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 }} diff --git a/docs/color-themes/index.md b/docs/color-themes/index.md new file mode 100644 index 0000000..c5acb7d --- /dev/null +++ b/docs/color-themes/index.md @@ -0,0 +1,10 @@ +--- +title: Color Themes | doc-utils +layout: main.html +--- + +# Color Themes {#-} + + + + diff --git a/docs/index.md b/docs/index.md index dcaf921..389c2ff 100644 --- a/docs/index.md +++ b/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 -- [`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 +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. -## 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 -- [`@doc-utils/markdown2html`](./nodejs/markdown2html.html) - Convert Markdown documents to HTML documents -- [`@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 +```pikchr +JSCH: box "JSON Schema" wid 150% ht 65% -## 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] + + + + + + + +[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/ diff --git a/docs/markdown-format.md b/docs/markdown-format.md new file mode 100644 index 0000000..e69de29 diff --git a/layouts/main.html b/layouts/main.html index 8d160dc..217f68d 100644 --- a/layouts/main.html +++ b/layouts/main.html @@ -10,10 +10,24 @@ + + +{{# page.outline_button }} + +{{/ page.outline_button }} +
+
{{> .content }} +
+ +
+ \ No newline at end of file