docs/template.html at master · julien.rbrt.fr/tangled-core

Monorepo for Tangled — https://tangled.org
tangled-core / docs / template.html
at master 5.0 kB view raw
  1<!DOCTYPE html>
  2<html xmlns="http://www.w3.org/1999/xhtml" lang="$lang$" xml:lang="$lang$"$if(dir)$ dir="$dir$"$endif$>
  3  <head>
  4    <meta charset="utf-8" />
  5    <meta name="generator" content="pandoc" />
  6    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
  7    $for(author-meta)$
  8      <meta name="author" content="$author-meta$" />
  9    $endfor$
 10
 11    $if(date-meta)$
 12      <meta name="dcterms.date" content="$date-meta$" />
 13    $endif$
 14
 15    $if(keywords)$
 16      <meta name="keywords" content="$for(keywords)$$keywords$$sep$, $endfor$" />
 17    $endif$
 18
 19    $if(description-meta)$
 20      <meta name="description" content="$description-meta$" />
 21    $endif$
 22
 23    <title>$pagetitle$</title>
 24
 25    <style>
 26      $styles.css()$
 27    </style>
 28
 29    $for(css)$
 30      <link rel="stylesheet" href="$css$" />
 31    $endfor$
 32
 33    $for(header-includes)$
 34      $header-includes$
 35    $endfor$
 36
 37    <link rel="preload" href="/static/fonts/InterVariable.woff2" as="font" type="font/woff2" crossorigin />
 38
 39  </head>
 40  <body class="bg-white dark:bg-gray-900 min-h-screen flex flex-col min-h-screen">
 41    $for(include-before)$
 42      $include-before$
 43    $endfor$
 44
 45    $if(toc)$
 46      <!-- mobile TOC trigger -->
 47      <div class="md:hidden px-6 py-4 border-b border-gray-200 dark:border-gray-700">
 48        <button
 49          type="button"
 50          popovertarget="mobile-toc-popover"
 51          popovertargetaction="toggle"
 52          class="w-full flex gap-2 items-center text-sm font-semibold dark:text-white"
 53        >
 54          ${ menu.svg() }
 55          $if(toc-title)$$toc-title$$else$Table of Contents$endif$
 56        </button>
 57      </div>
 58
 59      <div
 60        id="mobile-toc-popover"
 61        popover
 62        class="mobile-toc-popover
 63               bg-white dark:bg-gray-800
 64               border-b border-gray-200 dark:border-gray-700
 65               h-full overflow-y-auto
 66               px-6 py-4 fixed inset-x-0 top-0 w-fit max-w-4/5 m-0"
 67      >
 68        <button
 69          type="button"
 70          popovertarget="mobile-toc-popover"
 71          popovertargetaction="toggle"
 72          class="w-full flex gap-2 items-center text-sm font-semibold dark:text-white mb-4">
 73          ${ x.svg() }
 74          $if(toc-title)$$toc-title$$else$Table of Contents$endif$
 75        </button>
 76        ${ table-of-contents:toc.html() }
 77      </div>
 78
 79
 80      <!-- desktop sidebar toc -->
 81      <nav id="$idprefix$TOC" role="doc-toc" class="hidden md:block fixed left-0 top-0 w-80 h-screen bg-gray-50 dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 overflow-y-auto p-4 z-50">
 82        $if(toc-title)$
 83        <h2 id="$idprefix$toc-title" class="text-lg font-semibold mb-4 text-gray-900">$toc-title$</h2>
 84        $endif$
 85        ${ table-of-contents:toc.html() }
 86      </nav>
 87    $endif$
 88
 89    <div class="$if(toc)$md:ml-80$endif$ flex-1 flex flex-col">
 90      <main class="max-w-4xl w-full mx-auto p-6 flex-1">
 91        $if(top)$
 92        $-- only print title block if this is NOT the top page
 93        $else$
 94        $if(title)$
 95        <header id="title-block-header" class="mb-8 pb-8 border-b border-gray-200 dark:border-gray-700">
 96          <h1 class="text-4xl font-bold mb-2 text-black dark:text-white">$title$</h1>
 97          $if(subtitle)$
 98          <p class="text-xl text-gray-500 dark:text-gray-400 mb-2">$subtitle$</p>
 99          $endif$
100          $for(author)$
101          <p class="text-sm text-gray-500 dark:text-gray-400">$author$</p>
102          $endfor$
103          $if(date)$
104          <p class="text-sm text-gray-500 dark:text-gray-400">Updated on $date$</p>
105          $endif$
106          $if(abstract)$
107          <div class="mt-6 p-4 bg-gray-50 rounded-lg">
108            <div class="text-sm font-semibold text-gray-700 uppercase mb-2">$abstract-title$</div>
109            <div class="text-gray-700">$abstract$</div>
110          </div>
111          $endif$
112          $endif$
113        </header>
114        $endif$
115        <article class="prose dark:prose-invert max-w-none">
116          $body$
117        </article>
118      </main>
119      <nav id="sitenav" class="border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 ">
120        <div class="max-w-4xl mx-auto px-8 py-4">
121          <div class="flex justify-between gap-4">
122            <span class="flex-1">
123              $if(previous.url)$
124              <span class="text-xs text-gray-500 dark:text-gray-400 uppercase block mb-1">Previous</span>
125              <a href="$previous.url$" accesskey="p" rel="previous">$previous.title$</a>
126              $endif$
127            </span>
128            <span class="flex-1 text-right">
129              $if(next.url)$
130              <span class="text-xs text-gray-500 dark:text-gray-400 uppercase block mb-1">Next</span>
131              <a href="$next.url$" accesskey="n" rel="next">$next.title$</a>
132              $endif$
133            </span>
134          </div>
135        </div>
136      </nav>
137    </div>
138    $for(include-after)$
139    $include-after$
140    $endfor$
141  </body>
142</html>