kashifshah-mirrors
/
zs-starter-template
mirror of https://git.mills.io/prologic/zs-starter-template.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
zs-starter-template/index.html

209 lines
15 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/assets/css/bahunya.css">
<link rel="stylesheet" href="/assets/css/board.css">
<link rel="stylesheet" href="/assets/css/highlight.css">
<link rel="stylesheet" href="/assets/css/site.css">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<title>zs starter template</title>
<meta name="title" content="zs starter template" />
<meta name="description" content="A starter template for the Zen Static (zs) site generator" />
<meta name="keywords" content="zen, static, zs, starter, template, site, website, template, generator, ssg" />
</head>
<body>
<nav>
<a id="brand" href="/">Home 🏠</a>
<a href="/TestPage.html">Test Page 🧪</a>
<a href="https://zs.mills.io/">Demo 🥳</a>
<a href="https://git.mills.io/prologic/zs">Source 💾</a>
</nav>
<header>
<h1>zs starter template</h1>
</header>
<aside><p><strong>On this page</strong></p>
</aside>
<article><h1 id="zs-starter-template">zs-starter-template <a class="anchor" href="#zs-starter-template"> </a></h1>
<p>This is a <a href="https://git.mills.io/prologic/zs">zs</a> starter template. A live version of this site can be found <a href="https://zs.mills.io">here</a>.</p>
<h2 id="features">Features <a class="anchor" href="#features"> </a></h2>
<ul>
<li>A basic index page with the content you see here</li>
<li>A basic layout using a modified version of <a href="https://github.com/Kimeiga/bahunya">bahunya</a> for style</li>
<li><a href="live.js">live.js</a> for faster development</li>
<li>Examples of several built-in extensions</li>
<li>Editable from within the browser!</li>
</ul>
<h2 id="quick-start">Quick Start <a class="anchor" href="#quick-start"> </a></h2>
<pre><code class="language-console">git clone https://git.mills.io/prologic/zs-starter-template.git
cd zs-starter-template
make dev
</code></pre>
<p>Open your browser to http://localhost:8000</p>
<h2 id="examples">Examples <a class="anchor" href="#examples"> </a></h2>
<p>Aside from the regular Markdown <a href="TestPage.html">TestPage</a> that demonstrates the full capabilities of the Markdown support for <a href="https://git.mills.io/prologic/zs">zs</a>, there are a number of additional extensions enabled by default:</p>
<h3 id="anchors">Anchors <a class="anchor" href="#anchors"> </a></h3>
<p>With the [anchors][anchors] extension so you can link to any section(s) on the page like <a href="#quick-start">Quick Start</a>.</p>
<blockquote>
<p>💡 <strong>Tip:</strong> Try hovering over any of the headings on this page!</p>
</blockquote>
<h3 id="d2-diagrams">D2 Diagrams <a class="anchor" href="#d2-diagrams"> </a></h3>
<p>With the <a href="https://github.com/FurqanSoftware/goldmark-d2">d2</a> extension you can draw and diagrams such as:</p>
<div class="d2"><?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" d2Version="v0.3.0-HEAD" preserveAspectRatio="xMinYMin meet" viewBox="0 0 256 434"><svg id="d2-svg" class="d2-2448830429" width="256" height="434" viewBox="-101 -101 256 434"><rect x="-101.000000" y="-101.000000" width="256.000000" height="434.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
.d2-2448830429 .text-bold {
font-family: "d2-2448830429-font-bold";
}
@font-face {
font-family: d2-2448830429-font-bold;
src: url("data:application/font-woff;base64,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");
}]]></style><style type="text/css"><![CDATA[.shape {
shape-rendering: geometricPrecision;
stroke-linejoin: round;
}
.connection {
stroke-linecap: round;
stroke-linejoin: round;
}
.blend {
mix-blend-mode: multiply;
opacity: 0.5;
}
.d2-2448830429 .fill-N1{fill:#0A0F25;}
.d2-2448830429 .fill-N2{fill:#676C7E;}
.d2-2448830429 .fill-N3{fill:#9499AB;}
.d2-2448830429 .fill-N4{fill:#CFD2DD;}
.d2-2448830429 .fill-N5{fill:#DEE1EB;}
.d2-2448830429 .fill-N6{fill:#EEF1F8;}
.d2-2448830429 .fill-N7{fill:#FFFFFF;}
.d2-2448830429 .fill-B1{fill:#0D32B2;}
.d2-2448830429 .fill-B2{fill:#0D32B2;}
.d2-2448830429 .fill-B3{fill:#E3E9FD;}
.d2-2448830429 .fill-B4{fill:#E3E9FD;}
.d2-2448830429 .fill-B5{fill:#EDF0FD;}
.d2-2448830429 .fill-B6{fill:#F7F8FE;}
.d2-2448830429 .fill-AA2{fill:#4A6FF3;}
.d2-2448830429 .fill-AA4{fill:#EDF0FD;}
.d2-2448830429 .fill-AA5{fill:#F7F8FE;}
.d2-2448830429 .fill-AB4{fill:#EDF0FD;}
.d2-2448830429 .fill-AB5{fill:#F7F8FE;}
.d2-2448830429 .stroke-N1{stroke:#0A0F25;}
.d2-2448830429 .stroke-N2{stroke:#676C7E;}
.d2-2448830429 .stroke-N3{stroke:#9499AB;}
.d2-2448830429 .stroke-N4{stroke:#CFD2DD;}
.d2-2448830429 .stroke-N5{stroke:#DEE1EB;}
.d2-2448830429 .stroke-N6{stroke:#EEF1F8;}
.d2-2448830429 .stroke-N7{stroke:#FFFFFF;}
.d2-2448830429 .stroke-B1{stroke:#0D32B2;}
.d2-2448830429 .stroke-B2{stroke:#0D32B2;}
.d2-2448830429 .stroke-B3{stroke:#E3E9FD;}
.d2-2448830429 .stroke-B4{stroke:#E3E9FD;}
.d2-2448830429 .stroke-B5{stroke:#EDF0FD;}
.d2-2448830429 .stroke-B6{stroke:#F7F8FE;}
.d2-2448830429 .stroke-AA2{stroke:#4A6FF3;}
.d2-2448830429 .stroke-AA4{stroke:#EDF0FD;}
.d2-2448830429 .stroke-AA5{stroke:#F7F8FE;}
.d2-2448830429 .stroke-AB4{stroke:#EDF0FD;}
.d2-2448830429 .stroke-AB5{stroke:#F7F8FE;}
.d2-2448830429 .background-color-N1{background-color:#0A0F25;}
.d2-2448830429 .background-color-N2{background-color:#676C7E;}
.d2-2448830429 .background-color-N3{background-color:#9499AB;}
.d2-2448830429 .background-color-N4{background-color:#CFD2DD;}
.d2-2448830429 .background-color-N5{background-color:#DEE1EB;}
.d2-2448830429 .background-color-N6{background-color:#EEF1F8;}
.d2-2448830429 .background-color-N7{background-color:#FFFFFF;}
.d2-2448830429 .background-color-B1{background-color:#0D32B2;}
.d2-2448830429 .background-color-B2{background-color:#0D32B2;}
.d2-2448830429 .background-color-B3{background-color:#E3E9FD;}
.d2-2448830429 .background-color-B4{background-color:#E3E9FD;}
.d2-2448830429 .background-color-B5{background-color:#EDF0FD;}
.d2-2448830429 .background-color-B6{background-color:#F7F8FE;}
.d2-2448830429 .background-color-AA2{background-color:#4A6FF3;}
.d2-2448830429 .background-color-AA4{background-color:#EDF0FD;}
.d2-2448830429 .background-color-AA5{background-color:#F7F8FE;}
.d2-2448830429 .background-color-AB4{background-color:#EDF0FD;}
.d2-2448830429 .background-color-AB5{background-color:#F7F8FE;}
.d2-2448830429 .color-N1{color:#0A0F25;}
.d2-2448830429 .color-N2{color:#676C7E;}
.d2-2448830429 .color-N3{color:#9499AB;}
.d2-2448830429 .color-N4{color:#CFD2DD;}
.d2-2448830429 .color-N5{color:#DEE1EB;}
.d2-2448830429 .color-N6{color:#EEF1F8;}
.d2-2448830429 .color-N7{color:#FFFFFF;}
.d2-2448830429 .color-B1{color:#0D32B2;}
.d2-2448830429 .color-B2{color:#0D32B2;}
.d2-2448830429 .color-B3{color:#E3E9FD;}
.d2-2448830429 .color-B4{color:#E3E9FD;}
.d2-2448830429 .color-B5{color:#EDF0FD;}
.d2-2448830429 .color-B6{color:#F7F8FE;}
.d2-2448830429 .color-AA2{color:#4A6FF3;}
.d2-2448830429 .color-AA4{color:#EDF0FD;}
.d2-2448830429 .color-AA5{color:#F7F8FE;}
.d2-2448830429 .color-AB4{color:#EDF0FD;}
.d2-2448830429 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="x"><g class="shape" ><rect x="1.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="27.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="0.000000" y="166.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="27.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="(x -&gt; y)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 27.000000 68.000000 C 27.000000 106.000000 27.000000 126.000000 27.000000 162.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-2448830429)" /></g><mask id="d2-2448830429" maskUnits="userSpaceOnUse" x="-101" y="-101" width="256" height="434">
<rect x="-101" y="-101" width="256" height="434" fill="white"></rect>
</mask></svg></svg></div><h3 id="embed">Embed <a class="anchor" href="#embed"> </a></h3>
<p>With the <a href="https://github.com/13rac1/goldmark-embed">embed</a> extension you can embed [Youtube][youtube] videos like:</p>
<p><iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
<h3 id="fences">Fences <a class="anchor" href="#fences"> </a></h3>
<p>With the <a href="https://github.com/stefanfritsch/goldmark-fences">fences</a> extension you can</p>
<div data-fence="0" class="blue">
<h2 id="life-inside-fences">Life Inside Fences <a class="anchor" href="#life-inside-fences"> </a></h2>
<p>We are now inside a div with the css-class &ldquo;blue&rdquo;. This can be used to style this block</p>
<div data-fence="1" id="insideme" class="red">
<p>fences can be nested and given ids as well as classes</p>
</div>
</div>
<h3 id="highlighting">Highlighting <a class="anchor" href="#highlighting"> </a></h3>
<p>With the <a href="https://github.com/yuin/goldmark-highlighting">highlighting</a> extension you can syntax highlight code samples:</p>
<pre><code class="language-go">package main
import &quot;fm&quot;
func main() {
fmt.Println(&quot;Hello World!&quot;);
}
</code></pre>
<h3 id="wiki-links">Wiki Links <a class="anchor" href="#wiki-links"> </a></h3>
<p>With the <a href="https://github.com/abhinav/goldmark-wikilink">wikilink</a> extension you can link to other pages more easily like <a href="SandBox.html">SandBox</a>.</p>
<h3 id="we-can-even-do-slides">We can even do slides! <a class="anchor" href="#we-can-even-do-slides"> </a></h3>
<ul>
<li><a href="slides/TestSlides.html">Test Slide</a></li>
<li><a href="slides/SlideExample.html">Slide Example</a></li>
</ul>
<h3 id="and-kanban-boards">And Kanban Boards! <a class="anchor" href="#and-kanban-boards"> </a></h3>
<ul>
<li><a href="TODO.html">TODO</a></li>
</ul>
<h3 id="remember-cgi-scripts">Remember cgi scripts? <a class="anchor" href="#remember-cgi-scripts"> </a></h3>
<ul>
<li><a href="TestCGI.html">TestCGI</a></li>
</ul>
<h2 id="license">License <a class="anchor" href="#license"> </a></h2>
<p><code>zs-starter-template</code> is licensed under the terms of the <a href="/LICENSE">WTFPL License</a></p>
</article>
<a href="index.md?edit" rel="nofollow" target="_self">✍️ Edit this page</a>
<footer>
Copyright &copy; James Mills ·
Last modified <time datetime="2024-03-03T05:40:12Z+00:00
">Sun Mar 3 05:40:12 UTC 2024
</time> ·
Built with <a href="https://git.mills.io/prologic/zs">zs</a>
</footer>
<script type="application/javascript" src="/assets/js/highlight.js"></script>
<script type="application/javascript" src="/assets/js/umbrella.js"></script>
<script type="application/javascript" src="/assets/js/live.js"></script>
<script>
hljs.highlightAll();
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink