@ui-doc/html-renderer 0.1.1

package/styles/01_resets/typography.css

@@ -0,0 +1,67 @@
+html {
+  font-size: var(--font-size-base);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-size-adjust: 100%;
+  word-break: break-word;
+}
+
+body,
+.font {
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-weight: var(--font-weight);
+  line-height: var(--font-line-height);
+  color: rgb(var(--font-color));
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--headline-family, inherit);
+  font-size: calc(var(--font-size-normal) * var(--headline-scale, 1));
+  font-weight: var(--headline-weight, inherit);
+  line-height: var(--headline-line-height, inherit);
+  color: rgb(var(--headline-color, inherit));
+}
+
+h1 {
+  --headline-scale: 2.5;
+}
+
+h2 {
+  --headline-scale: 2;
+}
+
+h3 {
+  --headline-scale: 1.75;
+}
+
+h4 {
+  --headline-scale: 1.5;
+}
+
+a {
+  color: rgb(var(--link-color, inherit));
+  text-decoration: var(--link-decoration, none);
+}
+
+b,
+strong {
+  --font-weight: var(--font-weight-bold);
+}
+
+small {
+  --font-size: var(--font-size-sm);
+}

package/styles/02_objects/background.css

@@ -0,0 +1,7 @@
+.bg {
+  --selection-bg-color: var(--font-color);
+  --selection-color: var(--bg-color);
+
+  color: rgb(var(--font-color));
+  background: rgb(var(--bg-color));
+}

package/styles/02_objects/control.css

@@ -0,0 +1,25 @@
+.control {
+  --px: 0;
+  --py: 0;
+
+  @extend .pxy;
+  @extend .font;
+
+  cursor: pointer;
+
+  display: inline-block;
+
+  text-align: center;
+  text-decoration: none;
+
+  appearance: none;
+  background: rgb(var(--control-bg-color, transparent));
+  border: none;
+  border-radius: unset;
+  outline: none;
+
+  &[aria-disabled="true"],
+  &:disabled {
+    cursor: not-allowed;
+  }
+}

package/styles/02_objects/margin.css

@@ -0,0 +1,44 @@
+.margin,
+.mxy {
+  margin: var(--mt, var(--size-normal)) var(--mr, var(--size-normal)) var(--mb, var(--size-normal))
+    var(--ml, var(--size-normal));
+}
+
+.mt {
+  margin-top: var(--mt, var(--size-normal));
+}
+
+.mr {
+  margin-right: var(--mr, var(--size-normal));
+}
+
+.mb {
+  margin-bottom: var(--mb, var(--size-normal));
+}
+
+.ml {
+  margin-left: var(--ml, var(--size-normal));
+}
+
+.mxy {
+  --mt: var(--my, var(--size-normal));
+  --mb: var(--my, var(--size-normal));
+  --ml: var(--mx, var(--size-normal));
+  --mr: var(--mx, var(--size-normal));
+}
+
+.my {
+  --mt: var(--my, var(--size-normal));
+  --mb: var(--my, var(--size-normal));
+
+  @extend .mt;
+  @extend .mb;
+}
+
+.mx {
+  --ml: var(--mx, var(--size-normal));
+  --mr: var(--mx, var(--size-normal));
+
+  @extend .ml;
+  @extend .mr;
+}

package/styles/02_objects/padding.css

@@ -0,0 +1,44 @@
+.padding,
+.pxy {
+  padding: var(--pt, var(--size-normal)) var(--pr, var(--size-normal)) var(--pb, var(--size-normal))
+    var(--pl, var(--size-normal));
+}
+
+.pt {
+  padding-top: var(--pt, var(--size-normal));
+}
+
+.pr {
+  padding-right: var(--pr, var(--size-normal));
+}
+
+.pb {
+  padding-bottom: var(--pb, var(--size-normal));
+}
+
+.pl {
+  padding-left: var(--pl, var(--size-normal));
+}
+
+.pxy {
+  --pt: var(--py, var(--size-normal));
+  --pb: var(--py, var(--size-normal));
+  --pl: var(--px, var(--size-normal));
+  --pr: var(--px, var(--size-normal));
+}
+
+.py {
+  --pt: var(--py, var(--size-normal));
+  --pb: var(--py, var(--size-normal));
+
+  @extend .pt;
+  @extend .pb;
+}
+
+.px {
+  --pl: var(--px, var(--size-normal));
+  --pr: var(--px, var(--size-normal));
+
+  @extend .pl;
+  @extend .pr;
+}

package/styles/02_objects/text.css

@@ -0,0 +1,3 @@
+.tc {
+  color: rgb(var(--font-color));
+}

package/styles/02_objects/width.css

@@ -0,0 +1,16 @@
+[class*="width-"] {
+  --width-calc: max(
+    var(--width-min-space-x, 32px),
+    calc((100% - var(--width-content, 1280px)) / 2)
+  );
+
+  padding-inline: var(--width-calc);
+}
+
+.width-content {
+  --width-content: 1280px;
+}
+
+.width-full {
+  --width: 100%;
+}

package/styles/03_components/example-markup.css

@@ -0,0 +1,31 @@
+.example,
+.markup {
+  border: 1px solid rgb(var(--code-border-color, var(--border-color)));
+}
+
+.example,
+.markup > .code > .hljs {
+  padding: 1em;
+}
+
+.example {
+  display: flex;
+
+  > iframe {
+    width: 100%;
+    border: none;
+  }
+}
+
+.markup {
+  font-size: var(--font-size-xs);
+
+  > .code {
+    margin: 0;
+  }
+}
+
+.example + .markup {
+  margin-top: 0;
+  border-top: none;
+}

package/styles/03_components/nav/list.css

@@ -0,0 +1,42 @@
+.nav-list {
+  --nav-list-item-px: var(--size-sm);
+  --nav-list-item-py: var(--size-xs);
+  --nav-list-item-border-color: var(--border-color);
+
+  text-align: left;
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  > ul > li + li {
+    margin-top: var(--nav-list-root-item-space, var(--size-sm));
+  }
+
+  .control {
+    &.active {
+      --font-color: var(--accent-color);
+    }
+  }
+}
+
+.nav-list > ul > li > .control {
+  --py: var(--nav-list-item-py);
+  --pr: var(--nav-list-item-px);
+  --font-weight: var(--font-weight-bold);
+  --font-size: var(--font-size-md);
+}
+
+.nav-list > ul > li > ul > li > .control {
+  --py: var(--nav-list-item-py);
+  --px: var(--nav-list-item-px);
+
+  text-align: left;
+  border-left: 1px solid rgba(var(--nav-list-item-border-color) / var(--border-opacity, 0.1));
+
+  &:hover {
+    --border-opacity: 1;
+  }
+}

package/styles/03_components/nav/main.css

@@ -0,0 +1,39 @@
+.nav-main {
+  @extend .bg;
+}
+
+.nav-main > .bar {
+  height: var(--nav-main-height);
+
+  > .control.title {
+    --px: var(--nav-main-menu-item-px);
+    --py: var(--nav-main-menu-item-py);
+    --font-weight: var(--font-weight-bold);
+  }
+}
+
+.nav-main > .menu {
+  position: absolute;
+  top: 0;
+  right: calc(var(--width-calc) - var(--nav-main-menu-item-px));
+
+  display: flex;
+  flex-direction: row;
+
+  height: var(--nav-main-height);
+
+  > .control {
+    --px: var(--nav-main-menu-item-px);
+    --py: var(--nav-main-menu-item-py);
+    --font-size: var(--nav-main-menu-item-font-size);
+    --font-weight: var(--font-weight-bold);
+
+    &[aria-current] {
+      --font-color: var(--accent-color);
+    }
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}

package/styles/03_components/text-flow.css

@@ -0,0 +1,5 @@
+.text-flow {
+  > * + * {
+    margin-top: var(--text-flow-space, 1em);
+  }
+}

package/styles/04_layouts/page.css

@@ -0,0 +1,68 @@
+html {
+  scroll-behavior: smooth;
+  scrollbar-gutter: stable;
+  scroll-padding-top: var(--nav-main-height);
+  height: 100%;
+}
+
+html > body {
+  min-height: 100%;
+}
+
+body > header {
+  padding-top: var(--nav-main-height);
+
+  > .nav-main {
+    position: fixed;
+    z-index: 1000;
+    top: 0;
+    width: 100%;
+  }
+}
+
+body > main {
+  --main-sidebar-width: 25ch;
+  --main-content-sidebar-space: var(--size-xl);
+
+  position: relative;
+}
+
+body > main > .sidebar {
+  position: absolute;
+  top: 0;
+  left: var(--width-calc);
+
+  width: var(--main-sidebar-width);
+  height: 100%;
+
+  > .scroll {
+    position: sticky;
+    top: var(--nav-main-height);
+
+    overflow-y: auto;
+
+    height: 100%;
+    max-height: calc(100vh - var(--nav-main-height));
+  }
+}
+
+body > main > .content {
+  margin-left: calc(var(--main-sidebar-width) + var(--main-content-sidebar-space));
+
+  > .headline + .description {
+    margin-top: var(--size-md);
+  }
+
+  > section + section,
+  > section:first-of-type {
+    margin-top: var(--main-content-section-space, var(--size-lg));
+  }
+}
+
+footer {
+  --mt: var(--size-xl);
+
+  > .text {
+    text-align: right;
+  }
+}

package/styles/index.css

@@ -0,0 +1,17 @@
+@import url("./01_resets/root.css");
+@import url("./01_resets/initial.css");
+@import url("./01_resets/typography.css");
+
+@import url("./02_objects/background.css");
+@import url("./02_objects/text.css");
+@import url("./02_objects/padding.css");
+@import url("./02_objects/margin.css");
+@import url("./02_objects/width.css");
+@import url("./02_objects/control.css");
+
+@import url("./03_components/example-markup.css");
+@import url("./03_components/text-flow.css");
+@import url("./03_components/nav/main.css");
+@import url("./03_components/nav/list.css");
+
+@import url("./04_layouts/page.css");

package/templates/layouts/default.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>{{var:title}}</title>
+    <link rel="shortcut icon" href="./favicon.ico" />
+
+    {{var:styles}}
+  </head>
+  <body class="{{var:page.id}}">
+    <header>{{partial:nav-main}}</header>
+    <main class="width-content">
+      {{page:page.id page}}
+    </main>
+    <footer class="width-content py mt">
+      <div class="text">{{var:footerText}}</div>
+    </footer>
+
+    {{var:scripts}}
+    <script type="application/javascript">
+      hljs.highlightAll()
+    </script>
+  </body>
+</html>

package/templates/layouts/example.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>{{var:title}}</title>
+
+    {{var:styles}}
+    <style>
+      body {
+        margin: 0 !important;
+        padding: 0 !important;
+        overflow: hidden !important;
+      }
+      body > *:last-child {
+        margin-bottom: 0 !important;
+      }
+      body > *:first-child {
+        margin-top: 0 !important;
+      }
+    </style>
+  </head>
+  <body>
+    {{if:modifier}}<div class="{{var:modifier}}">{{/if}}
+    {{var:content}}
+    {{if:modifier}}</div>{{/if}}
+
+    {{var:scripts}}
+  </body>
+</html>

package/templates/pages/default.html

@@ -0,0 +1,14 @@
+<div class="content">
+  <h1 class="headline">{{var:title}}</h1>
+
+  {{if:description}}<div class="description">{{var:description}}</div>{{/if}}
+
+  {{for:sections}}
+  {{partial:section}}
+  {{/for}}
+</div>
+<aside class="sidebar">
+  <div class="scroll">{{partial:nav-sidebar}}</div>
+</aside>
+
+

package/templates/pages/index.html

@@ -0,0 +1,3 @@
+<h1 class="headline">{{var:title}}</h1>
+
+{{if:description}}<div class="description">{{var:description}}</div>{{/if}}

package/templates/partials/code.html

@@ -0,0 +1,5 @@
+{{if:type}}
+<div class="markup">
+  <pre class="code"><code class="language-{{var:type}}">{{var:content escape}}</code></pre>
+</div>
+{{/if}}

package/templates/partials/content.html

@@ -0,0 +1,7 @@
+<h{{var:titleLevel}} id="{{var:id}}">{{var:title}}</h{{var:titleLevel}}>
+
+{{if:description}}{{var:description}}{{/if}}
+
+{{partial:example example}}
+
+{{partial:code code}}

package/templates/partials/example.html

@@ -0,0 +1,5 @@
+{{if:type=="html"}}
+<div data-example class="example">
+  <iframe src="{{var:src}}"></iframe>
+</div>
+{{/if}}

package/templates/partials/nav-main.html

@@ -0,0 +1,9 @@
+<nav class="nav-main width-content" aria-label="Main navigation" role="menu">
+  <div class="bar">
+    <a href="{{var:homeLink}}" class="control logo">{{var:logo}}</a>
+    <a href="{{var:homeLink}}" class="control title">{{var:name}}</a>
+  </div>
+  <div class="menu" role="menubar" id="nav-main-menu">
+    {{for:menu}}<a href="{{var:href}}" class="control" role="menuitem" tabindex="0"{{if:active}} aria-current="page"{{/if}}>{{var:text}}</a>{{/for}}
+  </div>
+</nav>

package/templates/partials/nav-sidebar.html

@@ -0,0 +1,18 @@
+<nav class="nav-list" data-sidebar="" aria-label="Page navigation">
+  <ul>
+    {{for:sections}}
+    <li>
+      <a class="control" tabindex="0" href="#{{var:id}}">{{var:title}}</a>
+      {{if:sections}}
+      <ul>
+        {{for:sections}}
+        <li>
+          <a class="control" tabindex="0" href="#{{var:id}}">{{var:title}}</a>
+        </li>
+        {{/for}}
+      </ul>
+      {{/if}}
+    </li>
+    {{/for}}
+  </ul>
+</nav>

package/templates/partials/section-inner.html

@@ -0,0 +1,5 @@
+{{partial:content}}
+
+{{for:sections}}
+{{partial:section-inner}}
+{{/for}}

package/templates/partials/section.html

@@ -0,0 +1 @@
+<section class="text-flow">{{partial:section-inner}}</section>