Skip to content

Commit cebfe84

Browse files
author
John Ottenlips
committed
Add theme previews to docs site via build script
1 parent d474299 commit cebfe84

23 files changed

Lines changed: 2011 additions & 0 deletions

File tree

‎docs/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,23 @@ <h2 id="pages">Pages</h2>
3131
</li>
3232
<li><a href="/sitemap/">Sitemap</a> — Search all pages
3333
</li>
34+
</ul>
35+
<h2 id="themes">Theme Previews</h2>
36+
<ul>
37+
<li><a href="/themes/arrakis/">Arrakis</a> — Sun-bleached desert, endless sand, spice shimmer
38+
</li>
39+
<li><a href="/themes/caladan/">Caladan</a> — Earth ocean theme, lush greens and deep blues
40+
</li>
41+
<li><a href="/themes/giediprime/">Giedi Prime</a> — Black and white minimalist, stark industrial
42+
</li>
43+
<li><a href="/themes/ix/">Ix</a> — 90s cyberdelia, neon on dark, hacker aesthetic
44+
</li>
45+
<li><a href="/themes/salusasecundus/">Salusa Secundus</a> — Brutalist, raw concrete, heavy type
46+
</li>
47+
<li><a href="/themes/spice/">Spice</a> — Psychedelic melange trip, molten oranges and gold
48+
</li>
49+
<li><a href="/themes/randomphoto/">Random Photo</a> — Clean layout with random cover photo
50+
</li>
3451
</ul>
3552

3653
</main>

‎docs/themes/arrakis/index.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<title>Theme Preview</title>
8+
<link rel="stylesheet" href="styles.css" />
9+
10+
<meta property="og:title" content="Theme Preview" />
11+
<meta name="twitter:title" content="Theme Preview" />
12+
<meta name="description" content="A preview of this Agave theme showing headings, text, code, and links." />
13+
<meta property="og:description" content="A preview of this Agave theme showing headings, text, code, and links." />
14+
<meta name="twitter:description" content="A preview of this Agave theme showing headings, text, code, and links." />
15+
<meta name="twitter:card" content="summary" />
16+
</head>
17+
<body>
18+
<div class="coverimage"></div>
19+
<div class="container">
20+
<div class="block">
21+
<h1 id="theme-preview">Theme Preview</h1>
22+
<p>This page demonstrates how this theme renders various markdown elements.</p>
23+
<h2 id="typography">Typography</h2>
24+
<p>Regular paragraph text looks like this. Agave converts markdown to static HTML with zero JavaScript. Themes control fonts, colors, layout, and mood.</p>
25+
<p><strong>Bold text</strong> and <em>italic text</em> and <code>inline code</code> all styled by the theme.</p>
26+
<h3 id="third-level-heading">Third-level heading</h3>
27+
<p>A smaller heading for subsections.</p>
28+
<h2 id="code-block">Code Block</h2>
29+
<pre><code>// A code block to see how the theme styles preformatted text
30+
fn main() {
31+
println!(&quot;The spice must flow.&quot;);
32+
}
33+
</code></pre>
34+
<h2 id="links">Links</h2>
35+
<ul>
36+
<li><a href="/">Back to Theme Gallery</a>
37+
</li>
38+
<li><a href="https://github.com/jottenlips/agave">Agave on GitHub</a>
39+
</li>
40+
</ul>
41+
<h2 id="blockquote">Blockquote</h2>
42+
<blockquote>
43+
<p>&quot;He who controls the spice controls the universe.&quot;</p>
44+
</blockquote>
45+
<h2 id="list">List</h2>
46+
<ol>
47+
<li>First item
48+
</li>
49+
<li>Second item
50+
</li>
51+
<li>Third item
52+
</li>
53+
</ol>
54+
<hr />
55+
<p>Built with <a href="https://github.com/jottenlips/agave">Agave</a> static site generator.</p>
56+
57+
</div>
58+
</div>
59+
</body>
60+
</html>

‎docs/themes/arrakis/sitemap/index.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<title>Sitemap</title>
8+
<link rel="stylesheet" href="/styles.css" />
9+
10+
<meta property="og:title" content="Sitemap" />
11+
<meta name="twitter:title" content="Sitemap" />
12+
<meta name="description" content="Index of all pages" />
13+
<meta property="og:description" content="Index of all pages" />
14+
<meta name="twitter:description" content="Index of all pages" />
15+
<meta name="twitter:card" content="summary" />
16+
</head>
17+
<body>
18+
<div class="coverimage"></div>
19+
<div class="container">
20+
<div class="block">
21+
<div id="sitemap-container"><input type="text" id="sitemap-search" placeholder="Search pages..." style="width:100%;padding:8px;margin-bottom:16px;box-sizing:border-box;font-size:16px;" /><div id="sitemap-results"></div></div><script>var pages = [{"url":"/","title":"Theme Preview","description":"A preview of this Agave theme showing headings, text, code, and links.","filename":"index"}];var input = document.getElementById('sitemap-search');var results = document.getElementById('sitemap-results');function buildTree(items) { var root = { children: {}, pages: [] }; items.forEach(function(p) { var parts = p.url.replace(/^\/+|\/+$/g, '').split('/').filter(function(s) { return s.length > 0; }); if (parts.length === 0) { root.pages.push(p); } else { var node = root; for (var i = 0; i < parts.length - 1; i++) { if (!node.children[parts[i]]) { node.children[parts[i]] = { children: {}, pages: [], key: parts[i] }; } node = node.children[parts[i]]; } node.pages.push(p); } }); return root;}function renderTree(node, container) { var ul = document.createElement('ul'); ul.style.listStyle = 'none'; ul.style.paddingLeft = container === results ? '0' : '20px'; var sortedPages = node.pages.slice().sort(function(a, b) { return a.title.toLowerCase().localeCompare(b.title.toLowerCase()); }); sortedPages.forEach(function(p) { var li = document.createElement('li'); li.style.marginBottom = '8px'; li.innerHTML = '<a href="' + p.url + '">' + p.title + '</a>' + (p.description ? '<br/><small>' + p.description + '</small>' : ''); ul.appendChild(li); }); var keys = Object.keys(node.children).sort(function(a, b) { var aNode = node.children[a]; var bNode = node.children[b]; var aLabel = aNode.pages.length > 0 ? aNode.pages[0].title : a; var bLabel = bNode.pages.length > 0 ? bNode.pages[0].title : b; return aLabel.toLowerCase().localeCompare(bLabel.toLowerCase()); }); keys.forEach(function(k) { var child = node.children[k]; var li = document.createElement('li'); li.style.marginBottom = '8px'; li.style.marginTop = '12px'; var label = k.charAt(0).toUpperCase() + k.slice(1).replace(/-/g, ' '); li.innerHTML = '<strong>' + label + '</strong>'; ul.appendChild(li); renderTree(child, li); }); container.appendChild(ul);}function renderFlat(items) { var ul = document.createElement('ul'); ul.style.listStyle = 'none'; ul.style.paddingLeft = '0'; items.sort(function(a, b) { return a.title.toLowerCase().localeCompare(b.title.toLowerCase()); }).forEach(function(p) { var li = document.createElement('li'); li.style.marginBottom = '8px'; li.innerHTML = '<a href="' + p.url + '">' + p.title + '</a>' + (p.description ? '<br/><small>' + p.description + '</small>' : ''); ul.appendChild(li); }); results.appendChild(ul);}function render(filter) { var q = filter.toLowerCase(); results.innerHTML = ''; if (q) { var matched = pages.filter(function(p) { return p.title.toLowerCase().indexOf(q) !== -1 || p.description.toLowerCase().indexOf(q) !== -1 || p.filename.toLowerCase().indexOf(q) !== -1; }); renderFlat(matched); } else { var tree = buildTree(pages); renderTree(tree, results); }}input.addEventListener('input', function() { render(this.value); });render('');</script>
22+
</div>
23+
</div>
24+
</body>
25+
</html>

‎docs/themes/arrakis/styles.css‎

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap");
2+
@import url("https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;700&display=swap");
3+
html {
4+
background: #e8d5b0;
5+
height: 100%;
6+
}
7+
8+
body {
9+
font-family: "Crimson Text", serif;
10+
line-height: 28px;
11+
margin: 0;
12+
color: #3d2b1a;
13+
}
14+
15+
img[alt*="small"] {
16+
height: 500px;
17+
}
18+
19+
img[alt*="extrasmall"] {
20+
height: 250px;
21+
}
22+
23+
.coverimage {
24+
background: linear-gradient(180deg, #f5e6c8 0%, #e8cc8a 20%, #d4a855 40%, #c2853e 60%, #a0673a 80%, #7a4b2a 100%);
25+
background-repeat: no-repeat;
26+
background-size: cover;
27+
background-attachment: fixed;
28+
min-width: 100%;
29+
max-width: 300%;
30+
height: 100%;
31+
}
32+
33+
h1 {
34+
font-family: "Cinzel", serif;
35+
color: #8b4513;
36+
line-height: 110%;
37+
text-transform: uppercase;
38+
letter-spacing: 4px;
39+
text-shadow: 1px 1px 0px #e8d5b0;
40+
}
41+
42+
h2 {
43+
font-family: "Cinzel", serif;
44+
color: #a0522d;
45+
line-height: 110%;
46+
letter-spacing: 2px;
47+
}
48+
49+
h3 {
50+
color: #6b3a1f;
51+
line-height: 110%;
52+
}
53+
54+
code {
55+
border-radius: 3px;
56+
background-color: #3d2b1a;
57+
color: #e8cc8a;
58+
line-height: 200%;
59+
word-wrap: break-word;
60+
}
61+
62+
pre {
63+
background-color: #3d2b1a;
64+
width: 90%;
65+
border-radius: 2px;
66+
padding-top: 10px;
67+
padding-left: 10px;
68+
padding-right: 10px;
69+
padding-bottom: 10px;
70+
overflow-x: scroll;
71+
border-left: 3px solid #c2853e;
72+
}
73+
74+
.container {
75+
padding-top: 50px;
76+
padding-bottom: 50px;
77+
display: flex;
78+
flex-direction: column;
79+
justify-content: center;
80+
align-items: center;
81+
min-height: 100vh;
82+
background: #dcc9a3;
83+
}
84+
85+
.block {
86+
max-width: 800px;
87+
min-width: 270px;
88+
width: 90%;
89+
background-color: #f0e0c0;
90+
padding: 24px;
91+
margin-bottom: 15px;
92+
overflow-y: auto;
93+
border-radius: 2px;
94+
border-top: 3px solid #c2853e;
95+
box-shadow: 0 2px 12px rgba(61,43,26,0.15);
96+
}
97+
98+
.nav {
99+
max-width: 800px;
100+
min-width: 300px;
101+
width: 90%;
102+
background-color: #f0e0c0;
103+
padding: 10px;
104+
overflow-y: auto;
105+
border-radius: 2px;
106+
align-items: center;
107+
justify-content: space-evenly;
108+
display: flex;
109+
flex-wrap: wrap;
110+
margin-bottom: 10px;
111+
border-top: 3px solid #c2853e;
112+
}
113+
114+
.footer {
115+
max-width: 800px;
116+
min-width: 300px;
117+
width: 90%;
118+
background-color: #f0e0c0;
119+
padding: 10px;
120+
overflow-y: auto;
121+
border-radius: 2px;
122+
align-items: center;
123+
justify-content: space-evenly;
124+
display: flex;
125+
flex-wrap: wrap;
126+
margin-bottom: 10px;
127+
border-top: 3px solid #c2853e;
128+
}
129+
130+
@media only screen and (max-width: 500px) {
131+
.nav {
132+
max-width: 800px;
133+
min-width: 300px;
134+
width: 90%;
135+
background-color: #f0e0c0;
136+
padding: 10px;
137+
overflow-y: scroll;
138+
border-radius: 2px;
139+
align-items: flex-start;
140+
justify-content: space-evenly;
141+
display: flex;
142+
flex-wrap: wrap;
143+
margin-bottom: 10px;
144+
flex-direction: column;
145+
}
146+
.footer {
147+
max-width: 800px;
148+
min-width: 300px;
149+
width: 90%;
150+
background-color: #f0e0c0;
151+
padding: 10px;
152+
border-radius: 2px;
153+
align-items: flex-start;
154+
justify-content: space-evenly;
155+
display: flex;
156+
flex-wrap: wrap;
157+
margin-bottom: 10px;
158+
flex-direction: column;
159+
}
160+
.coverimage {
161+
background: transparent;
162+
background-repeat: no-repeat;
163+
background-size: cover;
164+
background-attachment: fixed;
165+
min-width: 100%;
166+
max-width: 300%;
167+
height: 100%;
168+
}
169+
.container {
170+
padding-top: 20px;
171+
padding-bottom: 50px;
172+
display: flex;
173+
flex-direction: column;
174+
justify-content: center;
175+
align-items: center;
176+
min-height: 100vh;
177+
}
178+
}
179+
180+
a {
181+
text-decoration: none;
182+
color: #1a6b8a;
183+
align-items: center;
184+
}
185+
186+
a:hover {
187+
-webkit-transform: scale(1.1);
188+
-ms-transform: scale(1.1);
189+
transform: scale(1.1);
190+
color: #2596be;
191+
}
192+
193+
.back {
194+
text-decoration: underline;
195+
}

‎docs/themes/caladan/index.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<title>Theme Preview</title>
8+
<link rel="stylesheet" href="styles.css" />
9+
10+
<meta property="og:title" content="Theme Preview" />
11+
<meta name="twitter:title" content="Theme Preview" />
12+
<meta name="description" content="A preview of this Agave theme showing headings, text, code, and links." />
13+
<meta property="og:description" content="A preview of this Agave theme showing headings, text, code, and links." />
14+
<meta name="twitter:description" content="A preview of this Agave theme showing headings, text, code, and links." />
15+
<meta name="twitter:card" content="summary" />
16+
</head>
17+
<body>
18+
<div class="coverimage"></div>
19+
<div class="container">
20+
<div class="block">
21+
<h1 id="theme-preview">Theme Preview</h1>
22+
<p>This page demonstrates how this theme renders various markdown elements.</p>
23+
<h2 id="typography">Typography</h2>
24+
<p>Regular paragraph text looks like this. Agave converts markdown to static HTML with zero JavaScript. Themes control fonts, colors, layout, and mood.</p>
25+
<p><strong>Bold text</strong> and <em>italic text</em> and <code>inline code</code> all styled by the theme.</p>
26+
<h3 id="third-level-heading">Third-level heading</h3>
27+
<p>A smaller heading for subsections.</p>
28+
<h2 id="code-block">Code Block</h2>
29+
<pre><code>// A code block to see how the theme styles preformatted text
30+
fn main() {
31+
println!(&quot;The spice must flow.&quot;);
32+
}
33+
</code></pre>
34+
<h2 id="links">Links</h2>
35+
<ul>
36+
<li><a href="/">Back to Theme Gallery</a>
37+
</li>
38+
<li><a href="https://github.com/jottenlips/agave">Agave on GitHub</a>
39+
</li>
40+
</ul>
41+
<h2 id="blockquote">Blockquote</h2>
42+
<blockquote>
43+
<p>&quot;He who controls the spice controls the universe.&quot;</p>
44+
</blockquote>
45+
<h2 id="list">List</h2>
46+
<ol>
47+
<li>First item
48+
</li>
49+
<li>Second item
50+
</li>
51+
<li>Third item
52+
</li>
53+
</ol>
54+
<hr />
55+
<p>Built with <a href="https://github.com/jottenlips/agave">Agave</a> static site generator.</p>
56+
57+
</div>
58+
</div>
59+
</body>
60+
</html>

‎docs/themes/caladan/sitemap/index.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<title>Sitemap</title>
8+
<link rel="stylesheet" href="/styles.css" />
9+
10+
<meta property="og:title" content="Sitemap" />
11+
<meta name="twitter:title" content="Sitemap" />
12+
<meta name="description" content="Index of all pages" />
13+
<meta property="og:description" content="Index of all pages" />
14+
<meta name="twitter:description" content="Index of all pages" />
15+
<meta name="twitter:card" content="summary" />
16+
</head>
17+
<body>
18+
<div class="coverimage"></div>
19+
<div class="container">
20+
<div class="block">
21+
<div id="sitemap-container"><input type="text" id="sitemap-search" placeholder="Search pages..." style="width:100%;padding:8px;margin-bottom:16px;box-sizing:border-box;font-size:16px;" /><div id="sitemap-results"></div></div><script>var pages = [{"url":"/","title":"Theme Preview","description":"A preview of this Agave theme showing headings, text, code, and links.","filename":"index"}];var input = document.getElementById('sitemap-search');var results = document.getElementById('sitemap-results');function buildTree(items) { var root = { children: {}, pages: [] }; items.forEach(function(p) { var parts = p.url.replace(/^\/+|\/+$/g, '').split('/').filter(function(s) { return s.length > 0; }); if (parts.length === 0) { root.pages.push(p); } else { var node = root; for (var i = 0; i < parts.length - 1; i++) { if (!node.children[parts[i]]) { node.children[parts[i]] = { children: {}, pages: [], key: parts[i] }; } node = node.children[parts[i]]; } node.pages.push(p); } }); return root;}function renderTree(node, container) { var ul = document.createElement('ul'); ul.style.listStyle = 'none'; ul.style.paddingLeft = container === results ? '0' : '20px'; var sortedPages = node.pages.slice().sort(function(a, b) { return a.title.toLowerCase().localeCompare(b.title.toLowerCase()); }); sortedPages.forEach(function(p) { var li = document.createElement('li'); li.style.marginBottom = '8px'; li.innerHTML = '<a href="' + p.url + '">' + p.title + '</a>' + (p.description ? '<br/><small>' + p.description + '</small>' : ''); ul.appendChild(li); }); var keys = Object.keys(node.children).sort(function(a, b) { var aNode = node.children[a]; var bNode = node.children[b]; var aLabel = aNode.pages.length > 0 ? aNode.pages[0].title : a; var bLabel = bNode.pages.length > 0 ? bNode.pages[0].title : b; return aLabel.toLowerCase().localeCompare(bLabel.toLowerCase()); }); keys.forEach(function(k) { var child = node.children[k]; var li = document.createElement('li'); li.style.marginBottom = '8px'; li.style.marginTop = '12px'; var label = k.charAt(0).toUpperCase() + k.slice(1).replace(/-/g, ' '); li.innerHTML = '<strong>' + label + '</strong>'; ul.appendChild(li); renderTree(child, li); }); container.appendChild(ul);}function renderFlat(items) { var ul = document.createElement('ul'); ul.style.listStyle = 'none'; ul.style.paddingLeft = '0'; items.sort(function(a, b) { return a.title.toLowerCase().localeCompare(b.title.toLowerCase()); }).forEach(function(p) { var li = document.createElement('li'); li.style.marginBottom = '8px'; li.innerHTML = '<a href="' + p.url + '">' + p.title + '</a>' + (p.description ? '<br/><small>' + p.description + '</small>' : ''); ul.appendChild(li); }); results.appendChild(ul);}function render(filter) { var q = filter.toLowerCase(); results.innerHTML = ''; if (q) { var matched = pages.filter(function(p) { return p.title.toLowerCase().indexOf(q) !== -1 || p.description.toLowerCase().indexOf(q) !== -1 || p.filename.toLowerCase().indexOf(q) !== -1; }); renderFlat(matched); } else { var tree = buildTree(pages); renderTree(tree, results); }}input.addEventListener('input', function() { render(this.value); });render('');</script>
22+
</div>
23+
</div>
24+
</body>
25+
</html>

0 commit comments

Comments
 (0)