tangled.org
Monorepo for Tangled
tangled.org
anirudh.fi
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 href="$root$pagefind/pagefind-ui.css" rel="stylesheet">
38 <script src="$root$pagefind/pagefind-ui.js"></script>
39 <script>
40 window.addEventListener("DOMContentLoaded", () => {
41 document.querySelectorAll(".pagefind-search").forEach((el) => {
42 new PagefindUI({
43 element: el,
44 showSubResults: true,
45 resetStyles: false,
46 });
47 });
48 });
49 </script>
50 <link rel="preload" href="$root$static/fonts/InterVariable.woff2" as="font" type="font/woff2" crossorigin />
51 <link rel="icon" href="$root$static/logos/dolly.ico" sizes="48x48"/>
52 <link rel="icon" href="$root$static/logos/dolly.svg" sizes="any" type="image/svg+xml"/>
53 <link rel="apple-touch-icon" href="$root$static/logos/dolly.png"/>
54
55 </head>
56 <body class="bg-white dark:bg-gray-900 flex flex-col min-h-svh"$if(single-page)$ data-pagefind-ignore$endif$>
57 $for(include-before)$
58 $include-before$
59 $endfor$
60
61 $if(toc)$
62 <!-- mobile TOC trigger -->
63 <div data-pagefind-ignore class="md:hidden px-6 py-4 border-b border-gray-200 dark:border-gray-700">
64 <button
65 type="button"
66 popovertarget="mobile-toc-popover"
67 popovertargetaction="toggle"
68 class="w-full flex gap-2 items-center text-sm font-semibold dark:text-white"
69 >
70 ${ menu.svg() }
71 $if(toc-title)$$toc-title$$else$Table of Contents$endif$
72 </button>
73 </div>
74
75 <div
76 id="mobile-toc-popover"
77 popover
78 data-pagefind-ignore
79 class="mobile-toc-popover
80 bg-gray-50 dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700
81 h-full overflow-x-hidden overflow-y-auto shadow-sm
82 px-6 py-4 fixed inset-x-0 top-0 w-fit max-w-4/5 m-0"
83 >
84 <div class="flex flex-col min-h-full">
85 <div class="flex-1 space-y-4">
86 <button
87 type="button"
88 popovertarget="mobile-toc-popover"
89 popovertargetaction="toggle"
90 class="w-full flex gap-2 items-center text-sm font-semibold dark:text-white mb-4">
91 ${ x.svg() }
92 $if(toc-title)$$toc-title$$else$Table of Contents$endif$
93 </button>
94 ${ logo.html() }
95 ${ search.html() }
96 ${ table-of-contents:toc.html() }
97 </div>
98 ${ single-page:mode.html() }
99 </div>
100 </div>
101
102 <!-- desktop sidebar toc -->
103 <nav
104 id="$idprefix$TOC"
105 role="doc-toc"
106 data-pagefind-ignore
107 class="hidden md:flex md:flex-col gap-4 fixed left-0 top-0 w-80 h-screen
108 bg-gray-50 dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700
109 p-4 z-50 overflow-y-auto">
110 ${ logo.html() }
111 ${ search.html() }
112 <div class="flex-1">
113 $if(toc-title)$
114 <h2 id="$idprefix$toc-title" class="text-lg font-semibold mb-4 text-gray-900">$toc-title$</h2>
115 $endif$
116 ${ table-of-contents:toc.html() }
117 </div>
118 ${ single-page:mode.html() }
119 </nav>
120 $endif$
121
122 <div class="$if(toc)$md:ml-80$endif$ flex-1 flex flex-col">
123 <main class="max-w-4xl w-full mx-auto p-6 flex-1">
124 $if(top)$
125 $-- only print title block if this is NOT the top page
126 $else$
127 $if(title)$
128 <header id="title-block-header" class="mb-8 pb-8 border-b border-gray-200 dark:border-gray-700">
129 <h1 class="text-4xl font-bold mb-2 text-black dark:text-white">$title$</h1>
130 $if(subtitle)$
131 <p class="text-xl text-gray-500 dark:text-gray-400 mb-2">$subtitle$</p>
132 $endif$
133 $for(author)$
134 <p class="text-sm text-gray-500 dark:text-gray-400">$author$</p>
135 $endfor$
136 $if(date)$
137 <p class="text-sm text-gray-500 dark:text-gray-400">Updated on $date$</p>
138 $endif$
139 $endif$
140 </header>
141 $if(abstract)$
142 <article class="prose dark:prose-invert max-w-none">
143 $abstract$
144 </article>
145 $endif$
146 $endif$
147
148 <article class="prose dark:prose-invert max-w-none">
149 $body$
150 </article>
151 </main>
152 <nav id="sitenav" class="border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
153 <div class="max-w-4xl mx-auto px-8 py-4">
154 <div class="flex justify-between gap-4">
155 <span class="flex-1">
156 $if(previous.url)$
157 <span class="text-xs text-gray-500 dark:text-gray-400 uppercase block mb-1">Previous</span>
158 <a href="$previous.url$" accesskey="p" rel="previous">$previous.title$</a>
159 $endif$
160 </span>
161 <span class="flex-1 text-right">
162 $if(next.url)$
163 <span class="text-xs text-gray-500 dark:text-gray-400 uppercase block mb-1">Next</span>
164 <a href="$next.url$" accesskey="n" rel="next">$next.title$</a>
165 $endif$
166 </span>
167 </div>
168 </div>
169 </nav>
170 </div>
171 $for(include-after)$
172 $include-after$
173 $endfor$
174 </body>
175</html>