doc-utils/docs
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more documentation; color theme preview page

Browse Source
This commit is contained in:
James Brumond 2023-05-07 17:55:23 -07:00
parent 4eff6d116c
commit a78a5c47af
Signed by: james
GPG Key ID: E8F2FC44BAA3357A
11 changed files with 680 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
config.yaml
View File

@ -28,6 +28,7 @@ input:
- ./**/*.schema.json
schema+yaml:
- ./**/*.schema.{yaml,yml}
- ./color-themes/schema/*.yaml
# Files to be parsed as OpenAPI V3 specifications and rendered
# to HTML documentation. Additionally, the original JSON / Yaml

19
docs/_assets/color-theme-preview.css Normal file
View File

@ -0,0 +1,19 @@
header {
margin: 1rem;
padding-block: 1rem;
padding-inline: 2rem;
border: 0.1rem solid var(--theme-line);
}
/* todo: is there an easy way to generate this? */
body[data-color-theme='Minimal Dark'] {
{{> .themes/Minimal Dark }}
}
body[data-color-theme='Minimal Light'] {
{{> .themes/Minimal Light }}
}

6
docs/color-themes/index.md
View File

@ -3,8 +3,12 @@ title: Color Themes | doc-utils
layout: main.html
---
[doc-utils](index.html)
# Color Themes {#-}
_todo_
[Preview Color Themes](color-themes/preview.html)

78
docs/color-themes/preview.md Normal file
View File

@ -0,0 +1,78 @@
---
title: Preview Color Themes | doc-utils
layout: preview-color-themes.html
---
[doc-utils](index.html) / [color-themes](color-themes/index.html)
# Sample Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec ultricies odio. Praesent vitae urna placerat, pellentesque nibh auctor, gravida orci. Mauris nisi dui, pharetra id nisi quis, placerat vehicula nisl. Sed non enim sit amet diam venenatis suscipit. Proin sit amet fringilla dui, nec volutpat tellus. Suspendisse id sodales turpis, suscipit congue felis. Ut sed sodales lorem. Pellentesque vel felis et ipsum gravida tempus ut eget tellus. Ut elementum elementum tristique. Etiam accumsan ultrices mauris, mollis pellentesque ante efficitur in. Quisque non neque porttitor, tincidunt arcu porttitor, tincidunt turpis. Nullam eu ultrices ex, vitae hendrerit ipsum.
```ts "_fig. 1: How to say hello in TypeScript_"
// hello.ts
let people_seen = 0;
export function say_hello(say_to: string) {
console.log(`Hello, ${say_to}!`);
people_seen++;
}
// main.ts
import { say_hello } from './hello';
say_hello('Alice');
say_hello('Bob');
say_hello('Charlie');
say_hello('Dave');
console.log(`We said hello to ${people_seen} people`);
```
Ut cursus erat id iaculis molestie. Praesent rhoncus rhoncus vehicula. Suspendisse non cursus ante. Donec finibus nec nulla vitae ultrices. Duis vel erat in orci feugiat varius vel tempor sem. Duis ornare eget urna vel ultrices. Ut [gravida scelerisque](#) ante. Etiam ultrices ex sit amet est convallis interdum. Sed augue est, consectetur ut scelerisque nec, fringilla eget sem. Mauris suscipit vestibulum tortor et rhoncus. Aliquam pretium enim a lacus efficitur, sed ornare tellus auctor. Nunc a tristique ligula.
## An Interesting Sub-Section
Etiam tempus id purus accumsan congue. Mauris et egestas nunc. Sed eu enim nunc. Etiam maximus dui molestie, sagittis neque non, tincidunt ligula. Fusce fermentum metus massa, nec convallis urna viverra sit amet. Ut libero ex, venenatis ut semper sed, fermentum sed massa. Ut gravida ligula diam, non vehicula orci porttitor quis. Vivamus porta, risus nec egestas imperdiet, sem tellus congue mi, eget molestie tellus mauris et arcu. Suspendisse sit amet rhoncus lectus. In [lorem lorem](#), varius id est sed, maximus eleifend augue. Ut scelerisque nunc et commodo varius. Nam quis turpis ac metus suscipit dictum. Duis ut elit vel neque pretium mattis. Curabitur vehicula a dolor ac condimentum. Aenean sit amet ultricies nibh. Nunc id massa ac augue ultricies consequat.
```pikchr "_fig. 2: Input/Output diagram for markdown2html and docs2website_"
MD: box wid 1.2 ht 0.5 "Markdown"
HTML: box same at 2.5 east of MD "HTML Fragments"
COLOR: box same at 0.75 north of HTML "Color Themes"
ASSET: box same at 0.75 south of HTML "Static Assets"
WEB: box same at 2 east of HTML "Static Website"
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
```
In et ipsum laoreet, lobortis turpis eget, hendrerit elit. Ut vehicula magna nec elementum consectetur. Nam luctus tellus sit amet odio maximus ultrices. Donec vulputate magna nisi. Morbi euismod velit et dolor posuere, a [aliquet quam sodales](#). Pellentesque luctus eleifend ex sed vestibulum. Fusce sed rutrum ante. Pellentesque id justo lobortis, sollicitudin velit ut, porttitor magna. Mauris eu lorem congue, pellentesque purus et, eleifend velit. Nulla facilisi.
### An Even More Interesting Sub-Sub-Section
Suspendisse sapien libero, facilisis sit amet ex sed, hendrerit rhoncus turpis. Fusce blandit arcu et justo molestie, ac porttitor metus vestibulum. Proin posuere dui eu euismod molestie. In sed purus nec nibh auctor efficitur. Vestibulum vehicula, augue elementum lobortis egestas, justo erat dictum urna, quis placerat dolor eros nec ex. Sed vulputate eros eget dolor tincidunt aliquam. Vestibulum rhoncus odio magna, non mollis ipsum tristique ut. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce pretium lorem justo, vel cursus quam gravida eget. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ullamcorper justo eu leo aliquam, id dictum mauris sollicitudin. Ut in tincidunt velit. Nam id auctor justo.
```katex "_fig. 3: Math! D:_"
{(ax + by + x)^2 \over {a^2 + b^2}} = (x - f_1)^2 + (y - f_2)^2
\\\mathstrut\\
\KaTeX
```
## Donec quis laoreet nisl, vel
Aliquam lacinia elementum velit in maximus. Maecenas et mi dapibus, vehicula augue sit amet, dapibus sapien. Aliquam sit amet rhoncus risus. Vestibulum pulvinar odio at maximus commodo. Quisque nec lectus non dui elementum sollicitudin. Integer purus risus, facilisis vitae magna sed, pellentesque suscipit libero. Duis commodo eu est eu cursus. Vivamus feugiat neque erat, nec mollis purus vulputate non. Integer consectetur purus urna, et molestie magna sollicitudin eget.
Etiam scelerisque vitae lacus eu cursus. Mauris dictum, arcu vitae fermentum congue, turpis tellus tempus erat, eu egestas elit justo vitae velit. Nam mattis, magna vitae laoreet tincidunt, enim nibh scelerisque justo, ac fringilla mauris ipsum eget odio. Cras porta lacus et ipsum auctor venenatis. Maecenas nisi ante, interdum vehicula metus efficitur, vulputate semper elit. Aliquam ut convallis tortor. Phasellus eu dui vitae mi sagittis iaculis a sit amet massa.
### Nulla mollis diam vel lectus
Mauris vel erat id dui hendrerit pellentesque. Cras ac elit vehicula, volutpat magna sit amet, commodo purus. Fusce iaculis erat nec placerat laoreet. Ut pulvinar ac urna vitae porttitor. In iaculis quam nec nisi fermentum placerat. Etiam eu faucibus mauris. Mauris vulputate rutrum orci ac semper. Nam cursus tempor lorem, et accumsan ex semper elementum. Nulla fermentum eros odio, nec gravida tellus rutrum eget. Sed molestie dui ac convallis faucibus. Vestibulum commodo tortor non tincidunt tempus. Morbi ut tincidunt sem. Nunc tortor nibh, scelerisque nec lacus eget, tempor porttitor lacus. Nunc eros lorem, pharetra sed purus et, pharetra egestas ante.
Aliquam erat volutpat. Aliquam erat volutpat. Nam blandit, est at viverra maximus, sem leo gravida ipsum, eget congue eros eros eu sapien. Nunc euismod nec lorem vel scelerisque. Curabitur eu porttitor velit, ac viverra ipsum. Integer id erat dignissim, ultrices mauris in, consequat quam. Nullam leo enim, ullamcorper ac est vitae, malesuada commodo purus. Suspendisse facilisis posuere cursus. Nam pharetra ultrices magna et molestie.

381
docs/color-themes/schema/v1.yaml Normal file
View File

@ -0,0 +1,381 @@
$schema: http://json-schema.org/draft-07/schema
$id: https://gitea.jbrumond.me/minimal/docs/raw/branch/master/json-schema/color-theme/v1.json
type: object
properties:
name:
type: string
description: >
The name of the color theme as it should be displayed to a user
labels:
type: array
description: >
The labels field allows for categorizing color themes into high-level groupings
like "light", "dark", or "high_contrast". This is purely meta-information that is
intended to be used by applications to display color theme options with groupings
or other indicators to the user in configuration interfaces
items:
type: string
enum:
- light
- dark
- high_contrast
- low_contrast
- monochrome
- greyscale
- protanopia_safe
- deuteranopia_safe
- tritanopia_safe
colors:
type: object
description: Contains the color values that will be used to populate CSS variables
properties:
# Content Background Colors
bg_main:
$ref: "#/definitions/css_color"
description: >
The primary background color applied to the page as a whole. Must have good contrast against
the main copy text colors text_heading, text_body, text_light, text_link, text_link_active,
and text_link_visited
bg_light:
$ref: "#/definitions/css_color"
description: >
A lighter background color applied to content panels; Should have a relatively low contrast against
the bg_main color, providing only a light accent. Must have good contrast against the main copy text
colors text_heading, text_body, text_light, text_link, text_link_active, and text_link_visited
bg_heavy:
$ref: "#/definitions/css_color"
description: >
A heavier background color applied to content panels; Should have a relatively higher contrast against
the bg_main color, directing attention to what is "important" or "primary" content inside of it. Must
have good contrast against the main copy text colors text_heading, text_body, text_light, text_link,
text_link_active, and text_link_visited
bg_popup_mask:
$ref: "#/definitions/css_color"
# todo: description
#
line:
$ref: "#/definitions/css_color"
# todo: description
line_safe:
$ref: "#/definitions/css_color"
# todo: description
line_warn:
$ref: "#/definitions/css_color"
# todo: description
line_danger:
$ref: "#/definitions/css_color"
# todo: description
# Main Content Text Colors
text_heading:
$ref: "#/definitions/css_color"
description: The color of heading text
text_body:
$ref: "#/definitions/css_color"
description: The color of main / normal body copy text
text_light:
$ref: "#/definitions/css_color"
# todo: description
text_safe:
$ref: "#/definitions/css_color"
# todo: description
text_warn:
$ref: "#/definitions/css_color"
# todo: description
text_danger:
$ref: "#/definitions/css_color"
# todo: description
text_link:
$ref: "#/definitions/css_color"
description: The default color of hyperlinks
text_link_active:
$ref: "#/definitions/css_color"
description: The color of hyperlinks that are currently active / selected
text_link_visited:
$ref: "#/definitions/css_color"
description: The color of hyperlinks that have been previously visited
# QR Codes
bg_qrcode:
$ref: "#/definitions/css_color"
description: >
The background color (i.e. typically white) of rendered QR codes
stroke_qrcode:
$ref: "#/definitions/css_color"
description: >
The stroke color (i.e. typically black) of rendered QR codes
# Text Highlighted with <mark>
text_highlight:
$ref: "#/definitions/css_color"
description: >
The color of text highlighted using the <mark>text</mark> tag (or by using ==text==
in markdown)
bg_text_highlight:
$ref: "#/definitions/css_color"
description: >
The background color of text highlighted using the <mark>text</mark> tag (or by using
==text== in markdown)
# User-Selected Text
text_selection:
$ref: "#/definitions/css_color"
description: The color of text that has been selected by the user
bg_text_selection:
$ref: "#/definitions/css_color"
description: The background color of text that has been selected by the user
# Buttons
bg_button_primary:
$ref: "#/definitions/css_color"
description: >
The background color of "primary" buttons (typically major, positive actions, like "save"
or "publish")
bg_button_primary_hover:
$ref: "#/definitions/css_color"
description: >
The background color of "primary" buttons (typically major, positive actions, like "save"
or "publish") while the user is hovering over them
text_button_primary:
$ref: "#/definitions/css_color"
description: >
The text color of "primary" buttons (typically major, positive actions, like "save" or "publish")
bg_button_secondary:
$ref: "#/definitions/css_color"
description: >
The background color of "secondary" buttons (typically safe, unimpactful, or backward moving
actions, like "cancel" or "preview")
bg_button_secondary_hover:
$ref: "#/definitions/css_color"
description: >
The background color of "secondary" buttons (typically safe, unimpactful, or backward moving
actions, like "cancel" or "preview") while the user is hovering over them
text_button_secondary:
$ref: "#/definitions/css_color"
description: >
The text color of "secondary" buttons (typically safe, unimpactful, or backward moving actions,
like "cancel" or "preview")
# Error Boxes / Alerts
bg_error_box:
$ref: "#/definitions/css_color"
# todo: description
border_error_box:
$ref: "#/definitions/css_color"
# todo: description
text_error_box:
$ref: "#/definitions/css_color"
# todo: description
# Inputs / Forms
bg_input:
$ref: "#/definitions/css_color"
# todo: description
border_input:
$ref: "#/definitions/css_color"
# todo: description
border_input_invalid:
$ref: "#/definitions/css_color"
# todo: description
# Activity / Result Indicators
icon_active_indicator:
$ref: "#/definitions/css_color"
# todo: description
icon_success_indicator:
$ref: "#/definitions/css_color"
# todo: description
icon_failure_indicator:
$ref: "#/definitions/css_color"
# todo: description
icon_warning_indicator:
$ref: "#/definitions/css_color"
# todo: description
# Semantic Accent Colors
accent_info:
$ref: "#/definitions/css_color"
# todo: description
accent_highlight:
$ref: "#/definitions/css_color"
# todo: description
accent_warning:
$ref: "#/definitions/css_color"
# todo: description
accent_problem:
$ref: "#/definitions/css_color"
# todo: description
# Charts
chart_axis:
$ref: "#/definitions/css_color"
# todo: description
chart_text:
$ref: "#/definitions/css_color"
# todo: description
chart_guideline:
$ref: "#/definitions/css_color"
# todo: description
chart_data_0:
$ref: "#/definitions/css_color"
# todo: description
chart_data_1:
$ref: "#/definitions/css_color"
# todo: description
chart_data_2:
$ref: "#/definitions/css_color"
# todo: description
chart_data_3:
$ref: "#/definitions/css_color"
# todo: description
chart_data_4:
$ref: "#/definitions/css_color"
# todo: description
chart_data_5:
$ref: "#/definitions/css_color"
# todo: description
chart_data_6:
$ref: "#/definitions/css_color"
# todo: description
chart_data_7:
$ref: "#/definitions/css_color"
# todo: description
chart_data_8:
$ref: "#/definitions/css_color"
# todo: description
chart_data_9:
$ref: "#/definitions/css_color"
# todo: description
# Pre-Formatted / Syntax Highlighted Code Blocks
code_normal:
$ref: "#/definitions/css_color"
# todo: description
code_shadow:
$ref: "#/definitions/css_color"
# todo: description
code_background:
$ref: "#/definitions/css_color"
# todo: description
code_selection:
$ref: "#/definitions/css_color"
# todo: description
code_comment:
$ref: "#/definitions/css_color"
# todo: description
code_punc:
$ref: "#/definitions/css_color"
# todo: description
code_operator:
$ref: "#/definitions/css_color"
# todo: description
code_const_literal:
$ref: "#/definitions/css_color"
# todo: description
code_number_literal:
$ref: "#/definitions/css_color"
# todo: description
code_boolean_literal:
$ref: "#/definitions/css_color"
# todo: description
code_tag:
$ref: "#/definitions/css_color"
# todo: description
code_string:
$ref: "#/definitions/css_color"
# todo: description
code_keyword:
$ref: "#/definitions/css_color"
# todo: description
code_func_name:
$ref: "#/definitions/css_color"
# todo: description
code_class_name:
$ref: "#/definitions/css_color"
# todo: description
code_regex_important:
$ref: "#/definitions/css_color"
# todo: description
code_variable:
$ref: "#/definitions/css_color"
# todo: description
code_builtin:
$ref: "#/definitions/css_color"
# todo: description
code_attr_name:
$ref: "#/definitions/css_color"
# todo: description
code_gutter_divider:
$ref: "#/definitions/css_color"
# todo: description
code_line_number:
$ref: "#/definitions/css_color"
# todo: description
code_line_highlight:
$ref: "#/definitions/css_color"
# todo: description
definitions:
css_color:
oneOf:
# Hex Colors
- type: string
format: regex
pattern: ^(#[0-9a-fA-F]{3}(?:[0-9a-fA-F]{3}(?:[0-9a-fA-F]{2})?)?)$
examples:
- "#000"
- "#ff0000"
- "#ffccaa88"
# RGB Colors
- type: string
format: regex
pattern: ^(rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\))$
examples:
- rgb(10, 70, 130)
# RGBA Colors
- type: string
format: regex
pattern: ^(rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([01]|[01]?\.[0-9]{1,3})\s*\))$
examples:
- rgba(10, 70, 130, 0.5)
# todo: other color function formats, like hsl
# transparent
- type: string
const: transparent
# currentcolor
- type: string
const: currentcolor
# Named Colors: CSS Level 1
- type: string
enum:
- black
- silver
- gray
- white
- maroon
- red
- purple
- fuchsia
- green
- lime
- olive
- yellow
- navy
- blue
- teal
- aqua
# Named Colors: CSS Level 2
- type: string
enum:
- orange
# Named Colors: CSS Level 3
- type: string
enum:
- aliceblue
- antiquewhite
# todo: fill in the rest of level3 colors...
# see: https://developer.mozilla.org/en-US/docs/Web/CSS/named-color
# Named Colors: CSS Level 4
- type: string
enum:
- rebeccapurple

10
docs/docs2website/building-from-source.md Normal file
View File

@ -0,0 +1,10 @@
---
title: Building From Source | docs2website
layout: main.html
---
[doc-utils](index.html) / [docs2website](docs2website/index.html)
# Building From Source {#-}
_todo_

10
docs/docs2website/configuration.md Normal file
View File

@ -0,0 +1,10 @@
---
title: Configuration | docs2website
layout: main.html
---
[doc-utils](index.html) / [docs2website](docs2website/index.html)
# Configuration {#-}
_todo_

15
docs/docs2website/index.md Normal file
View File

@ -0,0 +1,15 @@
---
title: docs2website
layout: main.html
---
[doc-utils](index.html)
# docs2website {#-}
_todo_
- Source Code: <https://gitea.jbrumond.me/doc-utils/docs2website>
- [Building From Source](docs2website/building-from-source.html)
- [Configuration](docs2website/configuration.html)
- [Preview Built-in Color Themes](color-themes/preview.html)

45
docs/index.md
View File

@ -5,7 +5,19 @@ layout: main.html
# doc-utils {#-}
Documentation for the `doc-utils` projects.
Documentation for the doc-utils projects.
## 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
## High-Level Architecture
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.
@ -13,7 +25,7 @@ The [color-themes] project contains the directory of all of the built-in color t
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.
```pikchr
```pikchr "_fig. 1: Diagram showing the architecture of the doc-utils projects and the flow from one step/project to another_"
JSCH: box "JSON Schema" wid 150% ht 65%
OAPI: box "OpenAPI Spec" same \
@ -26,9 +38,10 @@ LD: box "L-D Context" same \
at 0.75 south of CSBOM
ETC: box "Etc..." same \
at 0.75 south of LD
at 0.75 south of LD \
dashed
MD: box "Markdown" same \
MD: box "Markdown" same as JSCH \
at 2.5 east of CSBOM
HTML: box "HTML Fragments" same \
@ -62,7 +75,7 @@ arrow from CSBOM .e to MD .w \
arrow from LD .e to 0.1 below MD .w \
"ldcontext2markdown" italic aligned above small
arrow from ETC .e to MD .sw
arrow from ETC .e to MD .sw dashed
arrow from MD .e to HTML .w \
"markdown2html" italic aligned above small
@ -76,16 +89,6 @@ 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]
@ -96,10 +99,10 @@ 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
[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/

12
layouts/main.html
View File

@ -3,15 +3,15 @@
<head>
<meta charset="UTF-8">
<title>{{ page.title }}</title>
<link rel="stylesheet" href="_vendor/open-sans/open-sans-v34.css">
<link rel="stylesheet" href="_vendor/katex/katex.min.css">
<link rel="stylesheet" href="_assets/colors.css">
<link rel="stylesheet" href="_assets/base.css">
<link rel="stylesheet" href="_assets/prism.css">
<link rel="stylesheet" href="/_vendor/open-sans/open-sans-v34.css">
<link rel="stylesheet" href="/_vendor/katex/katex.min.css">
<link rel="stylesheet" href="/_assets/colors.css">
<link rel="stylesheet" href="/_assets/base.css">
<link rel="stylesheet" href="/_assets/prism.css">
</head>
<body>
<script src="_assets/extras.js"></script>
<script src="/_assets/extras.js"></script>
<color-scheme-toggle-button></color-scheme-toggle-button>
{{# page.outline_button }}

131
layouts/preview-color-themes.html Normal file
View File

@ -0,0 +1,131 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ page.title }}</title>
<link rel="stylesheet" href="/_vendor/open-sans/open-sans-v34.css">
<link rel="stylesheet" href="/_vendor/katex/katex.min.css">
<link rel="stylesheet" href="/_assets/colors.css">
<link rel="stylesheet" href="/_assets/base.css">
<link rel="stylesheet" href="/_assets/prism.css">
<link rel="stylesheet" href="/_assets/color-theme-preview.css">
</head>
<body>
<header>
<p>This page can be used to preview all of the built-in color themes.</p>
<p>Select a color theme to see the sample content below in that theme.</p>
<select id="color-theme-selector">
{{# theme_groups.light.length }}
<optgroup label='Themes labeled: "light"'>
{{# theme_groups.light }}
<option value="{{ name }}">{{ name }}</option>
{{/ theme_groups.light }}
</optgroup>
{{/ theme_groups.light.length }}
{{# theme_groups.dark.length }}
<optgroup label='Themes labeled: "dark"'>
{{# theme_groups.dark }}
<option value="{{ name }}">{{ name }}</option>
{{/ theme_groups.dark }}
</optgroup>
{{/ theme_groups.dark.length }}
{{# theme_groups.high_contrast.length }}
<optgroup label='Themes labeled: "high_contrast"'>
{{# theme_groups.high_contrast }}
<option value="{{ name }}">{{ name }}</option>
{{/ theme_groups.high_contrast }}
</optgroup>
{{/ theme_groups.high_contrast.length }}
{{# theme_groups.low_contrast.length }}
<optgroup label='Themes labeled: "low_contrast"'>
{{# theme_groups.low_contrast }}
<option value="{{ name }}">{{ name }}</option>
{{/ theme_groups.low_contrast }}
</optgroup>
{{/ theme_groups.low_contrast.length }}
{{# theme_groups.monochrome.length }}
<optgroup label='Themes labeled: "monochrome"'>
{{# theme_groups.monochrome }}
<option value="{{ name }}">{{ name }}</option>
{{/ theme_groups.monochrome }}
</optgroup>
{{/ theme_groups.monochrome.length }}
{{# theme_groups.greyscale.length }}
<optgroup label='Themes labeled: "greyscale"'>
{{# theme_groups.greyscale }}
<option value="{{ name }}">{{ name }}</option>
{{/ theme_groups.greyscale }}
</optgroup>
{{/ theme_groups.greyscale.length }}
{{# theme_groups.protanopia_safe.length }}
<optgroup label='Themes labeled: "protanopia_safe"'>
{{# theme_groups.protanopia_safe }}
<option value="{{ name }}">{{ name }}</option>
{{/ theme_groups.protanopia_safe }}
</optgroup>
{{/ theme_groups.protanopia_safe.length }}
{{# theme_groups.deuteranopia_safe.length }}
<optgroup label='Themes labeled: "deuteranopia_safe"'>
{{# theme_groups.deuteranopia_safe }}
<option value="{{ name }}">{{ name }}</option>
{{/ theme_groups.deuteranopia_safe }}
</optgroup>
{{/ theme_groups.deuteranopia_safe.length }}
{{# theme_groups.tritanopia_safe.length }}
<optgroup label='Themes labeled: "tritanopia_safe"'>
{{# theme_groups.tritanopia_safe }}
<option value="{{ name }}">{{ name }}</option>
{{/ theme_groups.tritanopia_safe }}
</optgroup>
{{/ theme_groups.tritanopia_safe.length }}
{{# theme_groups.all.length }}
<optgroup label="All Themes">
{{# theme_groups.all }}
<option value="{{ name }}">{{ name }}</option>
{{/ theme_groups.all }}
</optgroup>
{{/ theme_groups.all.length }}
</select>
<noscript>
<p>This preview requires JavaScript to work</p>
</noscript>
<script>
const select = document.getElementById('color-theme-selector');
select.value = window.matchMedia('(prefers-color-scheme: dark)') ? 'Minimal Dark' : 'Minimal Light';
document.body.setAttribute('data-color-theme', select.value);
setTimeout(() => {
document.body.setAttribute('data-color-transition-enabled', '');
}, 10);
select.addEventListener('change', () => {
const new_theme = select.value;
if (new_theme) {
document.body.setAttribute('data-color-theme', new_theme);
}
else {
document.body.removeAttribute('data-color-theme');
}
});
</script>
</header>
<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>