Move the site from HTML to GSP

6 files changed, 145 insertions, 151 deletions

diff --git a/src/prj/totp/basic-usage.sh.gsp b/src/prj/totp/basic-usage.sh.gsp
new file mode 100644
index 0000000..f1afa3f
--- /dev/null
+++ b/src/prj/totp/basic-usage.sh.gsp
@@ -0,0 +1,7 @@
+$ @span .sh-var {-code}=@span .sh-ex {-`mkpass A-Z0-7`}
+$ @span .sh-fn {-totp} $@span .sh-var {-code}
+475867
+$ @span .sh-fn {-echo} $@span .sh-var {-code} | @span .sh-fn {-totp}
+475867
+$ @span .sh-fn {-totp} -d 10 $@span .sh-var {-code}
+0718732338
diff --git a/src/prj/totp/basic-usage.sh.html b/src/prj/totp/basic-usage.sh.html
deleted file mode 100644
index 9023218..0000000
--- a/src/prj/totp/basic-usage.sh.html
+++ /dev/null
@@ -1,7 +0,0 @@
-$ <span class="sh-var">code</span>=<span class="sh-ex">`mkpass A-Z0-7`</span>
-$ <span class="sh-fn">totp</span> $<span class="sh-var">code</span>
-475867
-$ <span class="sh-fn">echo</span> $<span class="sh-var">code</span> | <span class="sh-fn">totp</span>
-475867
-$ <span class="sh-fn">totp</span> -d 10 $<span class="sh-var">code</span>
-0718732338
diff --git a/src/prj/totp/index.gsp b/src/prj/totp/index.gsp
new file mode 100644
index 0000000..ea5637a
--- /dev/null
+++ b/src/prj/totp/index.gsp
@@ -0,0 +1,134 @@
+html lang="en" {
+	head { m4_include(head.gsp) }
+	body {
+		header {
+			div {
+				h1 {-Easy Password Generation}
+				m4_include(nav.gsp)
+			}
+
+			figure .quote {
+				blockquote {
+					p {=
+						The C preprocessor is worse than m4, and I would kill myself before I
+						had to use m4.
+					}
+				}
+				figcaption {-Arav K.}
+			}
+		}
+
+		main {
+			p {
+				em {-
+					You can find the @code{-totp} git repository over at
+					@a href="https://git.sr.ht/~mango/totp" target="_blank" {-sourcehut}
+					or
+					@a href="https://github.com/Mango0x45/totp" target="_blank" {-GitHub}.
+				}
+			}
+
+			h2 {-Table of Contents}
+			ul {
+				li {a href="#prologue" {-Prologue}}
+				li {a href="#terms" {-Terminology}}
+				li {a href="#usage" {-Basic Usage}}
+				li {a href="#qr" {-Working with QR Codes}}
+			}
+
+			h2 #prologue {-Prologue}
+			p {-
+				m4_abbr(TOTP) codes are pretty cool, and really easay to do.  They’re
+				also the backbone of modern two-factor authentication.  With
+				@code{-totp} I hope to handling m4_abbr(TOTP) codes as easy and
+				extensible as possible
+			}
+
+			h2 #terms {-Terminology}
+			p {-
+				There are a few terms that I will be using throughout this post, so it’s
+				good to make sure that we’re all on the same page about what I’m
+				referring to.
+			}
+
+			dl {
+				dt {-Secret}
+				dd {
+					p {-
+						Your @em{-secret} is a
+						@a
+							href="https://en.wikipedia.org/wiki/Base32"
+							target="_blank"
+						{-base32}
+						encoded secret key that you should under no circumstances share with
+						anyone else.  It is from this secret key that we can generate valid
+						m4_abbr(TOTP) codes.
+					}
+				}
+
+				dt {-Digits}
+				dd {
+					p {-
+						Your @em {-digits} is the length of the generated m4_abbr(TOTP) in
+						digits.  If @em{-digits} is 8, then your generated key could be
+						‘01234567’.  When dealing with m4_abbr(2FA) this is typically 6.
+					}
+				}
+
+				dt {-Period}
+				dd {
+					p {-
+						Your @em{-period} it the duration for which the generated key is
+						valid in seconds.  When working with m4_abbr(2FA) this is typically
+						30.
+					}
+				}
+			}
+
+			h2 #usage {-Basic Usage}
+
+			p {-
+				@code{-totp} takes secret keys as command-line arguments, but also reads
+				them from the standard input if none are provided.  It assumes that
+				@em{-digits} is 6 and @em{-period} is 30.  These defaults can be changed
+				with the @code{--d} and @code{--p} flags.
+			}
+
+			figure {
+				pre { m4_fmt_code(basic-usage.sh.gsp) }
+			}
+
+			aside {
+				p {-
+					I’m using @code{-mkpass} to generate a random secret.  You can
+					see my post about @code{-mkpass} @a href="/prj/mkpass" {-here}.
+				}
+			}
+
+			h2 #qr {-Working with m4_abbr(QR) Codes}
+			p {-
+				Often times when enabling m4_abbr(2FA) on your account on some website
+				or platform, you will be shown a m4_abbr(QR) code you can scan with your
+				m4_abbr(2FA) mobile application.  These m4_abbr(QR) codes contain
+				@em{-otpauth} m4_abbr(URI)s.  We can extract these from downloaded
+				images using utilities such as @code{-zbarimg} and use them in
+				@code{-totp} using the @code{--u} flag to enable ‘m4_abbr(URI) mode’
+			}
+
+			figure {
+				pre { m4_fmt_code(zbarimg.sh.gsp) }
+			}
+
+			p {-
+				…and that’s all!  There’s nothing else you need.  You can use secret
+				keys and otpauth m4_abbr(URI)s, and you can configure the @em{-digits}
+				and @em{-period} of the generated codes.  You can generate multiple keys
+				at once, and all outputs are printed to the standard output.
+			}
+		}
+
+		hr{}
+
+		footer { m4_footer }
+	}
+}
diff --git a/src/prj/totp/index.html b/src/prj/totp/index.html
deleted file mode 100644
index aa040d4..0000000
--- a/src/prj/totp/index.html
+++ /dev/null
@@ -1,140 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-		m4_include(head.html)
-  </head>
-  <body>
-		<header>
-			<div>
-				<h1>Easy Password Generation</h1>
-				m4_include(nav.html)
-			</div>
-
-			<figure class="quote">
-				<blockquote>
-					<p>The C preprocessor is worse than m4, and I would kill myself
-					before I had to use m4.</p>
-				</blockquote>
-				<figcaption>
-					Arav K.
-				</figcaption>
-			</figure>
-		</header>
-
-		<main>
-			<p>
-				<em>
-					You can find the <code>totp</code> git repository over at
-					<a href="https://git.sr.ht/~mango/totp" target="_blank">sourcehut</a>
-					or <a href="https://github.com/Mango0x45/totp"
-					target="_blank">GitHub</a>.
-				</em>
-			</p>
-
-			<h2>Table of Contents</h2>
-
-			<ul>
-        <li><a href="#prologue">Prologue</a></li>
-        <li><a href="#terms">Terminology</a></li>
-        <li><a href="#usage">Basic Usage</a></li>
-        <li><a href="#qr">Working with QR Codes</a></li>
-			</ul>
-
-			<h2 id="prologue">Prologue</h2>
-			<p>
-				<abbr class="totp">TOTP</abbr> codes are pretty cool, and really easy to
-				do.  They’re also the backbone of modern two-factor authentication.
-				With <code>totp</code> I hope to make
-				handling <abbr class="totp">TOTP</abbr> codes as easy and extensible as
-				possible.
-			</p>
-
-			<h2 id="terms">Terminology</h2>
-			<p>
-				There are a few terms that I will be using throughout this post, so it’s
-				good to make sure that we’re all on the same page about what I’m
-				referring to.
-			</p>
-
-			<dl>
-				<dt>Secret</dt>
-				<dd>
-					<p>
-						Your <em>secret</em> is
-						a <a href="https://en.wikipedia.org/wiki/Base32"
-						target="_blank">base32</a> encoded secret key that you should under
-						no circumstances share with anyone else.  It is from this secret key
-						that we can generate valid <abbr class="totp">TOTP</abbr> codes.
-					</p>
-				</dd>
-
-				<dt>Digits</dt>
-				<dd>
-					<p>
-						Your <em>digits</em> is the length of the generated
-						<abbr class="totp">TOTP</abbr> in digits.  If <em>digits</em> is 8,
-						then your generated key could be ‘01234567’.  When dealing
-						with <abbr class="tfa">2FA</abbr> this is typically 6.
-					</p>
-				</dd>
-
-				<dt>Period</dt>
-				<dd>
-					<p>
-						Your <em>period</em> it the duration for which the generated key is
-						valid in seconds.  When working with <abbr class="tfa">2FA</abbr>
-						this is typically 30.
-					</p>
-				</dd>
-			</dl>
-
-			<h2 id="usage">Basic Usage</h2>
-			<p>
-				<code>totp</code> takes secret keys as command-line arguments, but also
-				reads them from the standard input if none are provided.  It assumes
-				that <em>digits</em> is 6 and <em>period</em> is 30.  These defaults can
-				be changed with the <code>-d</code> and <code>-p</code> flags.
-			</p>
-
-			<figure>
-				<pre>m4_fmt_code(basic-usage.sh.html)</pre>
-			</figure>
-
-			<aside>
-				<p>
-					I’m using <code>mkpass</code> to generate a random secret.  You can
-					see my post about <code>mkpass</code> <a href="/prj/mkpass">here</a>.
-				</p>
-			</aside>
-
-			<h2 id="qr">Working with <abbr class="qr">QR</abbr> Codes</h2>
-			<p>
-				Often times when enabling <abbr class="tfa">2FA</abbr> on your account
-				on some website or platform, you will be shown
-				a <abbr class="qr">QR</abbr> code you can scan with
-				your <abbr class="tfa">2FA</abbr> mobile application.
-				These <abbr class="qr">QR</abbr> codes
-				contain <em>otpauth</em> <abbr class="uri">URI</abbr>s.  We can extract
-				these from downloaded images using utilities such
-				as <code>zbarimg</code> and use them in <code>totp</code> using
-				the <code>-u</code> flag to enable ‘<abbr class="uri">URI</abbr> mode’
-			</p>
-
-			<figure>
-				<pre>m4_fmt_code(zbarimg.sh.html)</pre>
-			</figure>
-
-			…and that’s all!  There’s nothing else you need.  You can use secret keys
-			and otpauth <abbr class="uri">URI</abbr>s, and you can configure
-			the <em>digits</em> and <em>period</em> of the generated codes.  You can
-			generate multiple keys at once, and all outputs are printed to the
-			standard output.
-		</main>
-
-		<hr>
-
-		<footer>
-			m4_footer
-		</footer>
-	</body>
-</html>
diff --git a/src/prj/totp/zbarimg.sh.gsp b/src/prj/totp/zbarimg.sh.gsp
new file mode 100644
index 0000000..cd0669b
--- /dev/null
+++ b/src/prj/totp/zbarimg.sh.gsp
@@ -0,0 +1,4 @@
+$ @span .sh-fn {-zbarimg} -q my-qr-code.svg  @span .sh-cmt {-# Also works with jpg, png, etc.}
+QR-Code:otpauth://totp/GitHub:Mango0x45?secret=O1AIWMONKWVRJY4H&issuer=GitHub
+$ @span .sh-fn {-zbarimg} -q my-qr-code.svg | @span .sh-fn {-sed} s/QR-Code:// | @span .sh-fn {-totp} -u
+554210
diff --git a/src/prj/totp/zbarimg.sh.html b/src/prj/totp/zbarimg.sh.html
deleted file mode 100644
index 862eb78..0000000
--- a/src/prj/totp/zbarimg.sh.html
+++ /dev/null
@@ -1,4 +0,0 @@
-$ <span class="sh-fn">zbarimg</span> -q my-qr-code.svg  <span class="sh-cmt"># Also works with jpg, png, etc.</span>
-QR-Code:otpauth://totp/GitHub:Mango0x45?secret=O1AIWMONKWVRJY4H&issuer=GitHub
-$ <span class="sh-fn">zbarimg</span> -q my-qr-code.svg | <span class="sh-fn">sed</span> s/QR-Code:// | <span class="sh-fn">totp</span> -u
-554210