Add myWebLog theme

theme/home-page.liquid

@@ -0,0 +1,131 @@
+<div class="home">
+  <article class="content auto">
+    {{ page.text }}
+    {% if logged_on -%}
+      <p><small><a hx-boost="false" href="{{ page | edit_page_link }}">Edit This Page</a></small></p>
+    {% endif %}
+  </article>
+  <aside class="app-sidebar">
+    <div>
+      <div class="app-sidebar-head">Web Sites and Applications</div>
+      <div>
+        <p class="app-sidebar-name">
+          <strong>PrayerTracker</strong><br>
+          <a href="{{ "solutions/prayer-tracker" | relative_link }}"
+             title="About PrayerTracker &bull; Bit Badger Solutions">
+            About
+          </a> •
+          <a href="https://prayer.bitbadger.solutions" title="PrayerTracker" target="_blank" rel="noopener">Visit</a>
+        </p>
+        <p class="app-sidebar-description">
+          A prayer request tracking website (Free for any church or Sunday School class!)
+        </p>
+      </div>
+      <div>
+        <p class="app-sidebar-name">
+          <strong>myPrayerJournal</strong><br>
+          <a href="{{ "solutions/my-prayer-journal" | relative_link }}"
+             title="About myPrayerJournal &bull; Bit Badger Solutions">
+            About
+          </a> •
+          <a href="https://prayerjournal.me" title="myPrayerJournal" target="_blank" rel="noopener">Visit</a>
+        </p>
+        <p class="app-sidebar-description">Minimalist personal prayer journal</p>
+      </div>
+      <div>
+        <p class="app-sidebar-name">
+          <strong>Linux Resources</strong><br>
+          <a href="https://blog.bitbadger.solutions/linux/" title="Linux Resources" target="_blank" rel="noopener">
+            Visit
+          </a>
+        </p>
+        <p class="app-sidebar-description">Handy information for Linux folks</p>
+      </div>
+    </div>
+    <div>
+      <div class="app-sidebar-head">WordPress</div>
+      <div>
+        <p class="app-sidebar-name">
+          <strong>Futility Closet</strong><br>
+          <a href="{{ "solutions/futility-closet" | relative_link }}"
+             title="About Futility Closet &bull; Bit Badger Solutions">
+            About
+          </a> •
+          <a href="https://www.futilitycloset.com" title="Futility Closet" target="_blank" rel="noopener">Visit</a>
+        </p>
+        <p class="app-sidebar-description">An idler’s miscellany of compendious amusements</p>
+      </div>
+      <div>
+        <p class="app-sidebar-name">
+          <strong>Mindy Mackenzie</strong><br>
+          <a href="{{ "solutions/mindy-mackenzie" | relative_link }}"
+             title="About Mindy Mackenzie &bull; Bit Badger Solutions">
+            About
+          </a> •
+          <a href="https://mindymackenzie.com" title="Mindy Mackenzie" target="_blank" rel="noopener">Visit</a>
+        </p>
+        <p class="app-sidebar-description"><em>WSJ</em>-best-selling author of <em>The Courage Solution</em></p>
+      </div>
+      <div>
+        <p class="app-sidebar-name">
+          <strong>Riehl World News</strong><br>
+          <a href="{{ "solutions/riehl-world-news" | relative_link }}"
+             title="About Riehl World News &bull; Bit Badger Solutions">
+            About
+          </a> •
+          <a href="http://riehlworldview.com" title="Riehl World News" target="_blank" rel="noopener">Visit</a>
+        </p>
+        <p class="app-sidebar-description">Riehl news for real people</p>
+      </div>
+    </div>
+    <div>
+      <div class="app-sidebar-head">Static Sites</div>
+      <div>
+        <p class="app-sidebar-name">
+          <strong>Bay Vista Baptist Church</strong><br>
+          <a href="{{ "solutions/bay-vista" | relative_link }}"
+             title="About Bay Vista Baptist Church &bull; Bit Badger Solutions">
+            About
+          </a> •
+          <a href="https://bayvista.org" title="Bay Vista Baptist Church" target="_blank" rel="noopener">Visit</a>
+        </p>
+        <p class="app-sidebar-description">Biloxi, Mississippi</p>
+      </div>
+    </div>
+    <div>
+      <div>
+        <div class="app-sidebar-head">myWebLog</div>
+        <p class="app-sidebar-name">
+          <strong>The Bit Badger Blog</strong><br>
+          <a href="{{ "solutions/tech-blog" | relative_link }}"
+             title="About The Bit Badger Blog &bull; Bit Badger Solutions">
+            About
+          </a> •
+          <a href="https://bitbadger.solutions/blog" title="The Bit Badger Blog" target="_blank" rel="noopener">
+            Visit
+          </a>
+        </p>
+        <p class="app-sidebar-description">Technical information (“geek stuff”) from Bit Badger Solutions</p>
+      </div>
+    </div>
+    <div>
+      <div class="app-sidebar-head">Personal</div>
+      <div>
+        <p class="app-sidebar-name">
+          <strong>Daniel J. Summers</strong><br>
+          <a href="https://daniel.summershome.org" title="Daniel J. Summers" target="_blank" rel="noopener">Visit</a>
+        </p>
+        <p class="app-sidebar-description">Daniel’s personal blog</p>
+      </div>
+      <div>
+        <p class="app-sidebar-name">
+          <strong>A Word from the Word</strong><br>
+          <a href="https://devotions.summershome.org" title="A Word from the Word" target="_blank" rel="noopener">
+            Visit
+          </a>
+        </p>
+        <p class="app-sidebar-description">Devotions by Daniel</p>
+      </div>
+    </div>
+  </aside>
+</div>

theme/layout-partial.liquid

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>{{ page_title }} &raquo; Bit Badger Solutions</title>
+  </head>
+  <body>
+    {{ content }}
+  </body>
+</html>

theme/layout.liquid

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width">
+    <title>{{ page_title }} &raquo; Bit Badger Solutions</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald|Raleway">
+    {% page_head -%}
+  </head>
+  <body hx-boost="true" hx-target="main" hx-indicator="#loadOverlay" hx-swap="innerHTML show:body:top">
+    <header class="site-header">
+      <div class="header-logo">
+        <a href="{{ "" | relative_link }}">
+          <img src="{{ "bitbadger.png" | theme_asset }}"
+               alt="A cartoon badger looking at a computer screen, with his paw on a mouse"
+               title="Bit Badger Solutions">
+        </a>
+      </div>
+      <div class="header-title"><a href="{{ "" | relative_link }}">Bit Badger Solutions</a></div>
+      <div class="header-spacer"> &nbsp; </div>
+      <div class="header-social">
+        <a href="https://twitter.com/Bit_Badger" title="Bit_Badger on Twitter" target="_blank">
+          <img src="{{ "twitter.png" | theme_asset }}" alt="Twitter">
+        </a> &nbsp;
+        <a href="https://www.facebook.com/bitbadger.solutions" title="Bit Badger Solutions on Facebook" target="_blank">
+          <img src="{{ "facebook.png" | theme_asset }}" alt="Facebook">
+        </a>
+      </div>
+    </header>
+    <div class="load-overlay" id="loadOverlay"><h1>Loading&hellip;</h1></div>
+    <main>{{ content }}</main>
+    <footer hx-boost="false">
+      <div>
+        <small>
+          {% if logged_on -%}
+            <a href="{{ "admin/dashboard" | relative_link }}">Dashboard</a> ~
+            <a href="{{ "user/log-off" | relative_link }}">Log Off</a>
+          {% else %}
+            <a href="{{ "user/log-on" | relative_link }}">Log On</a>
+          {% endif %}
+        </small>
+      </div>
+      <div class="footer-by">
+        A <strong><a href="{{ "" | relative_link }}">Bit Badger Solutions</a></strong> original design
+      </div>
+    </footer>
+    {% page_foot %}
+  </body>
+</html>

theme/project-page.liquid

@@ -0,0 +1,33 @@
+<article class="content auto">
+  {%- assign parts = page.title | split: ' » ' -%}
+  {%- assign parts_count = parts | size -%}
+  <h1 class="project-title">  
+    {% if parts_count == 1 -%}
+      {{ page.title }}<br>
+      <small><small>
+        <a href="https://github.com/bit-badger/{{ page.title }}" target="_blank" rel="noopener"
+           title="{{ parts[0] }} on GitHub">
+          View on GitHub
+        </a>
+        {% if logged_on %} &bull; <a hx-boost="false" href="{{ page | edit_page_link }}">Edit Page</a>{% endif %}
+      </small></small>
+    {%- else -%}
+      <small><small>
+        <a href="." title="{{ parts[0] }} Home">{{ parts[0] }}</a>
+        {% if logged_on %} &bull; <a hx-boost="false" href="{{ page | edit_page_link }}">Edit</a>{% endif %}
+      </small></small>
+      <br>
+      {{ parts[1] }}
+    {%- endif %}
+  </h1>
+  {{ page.text }}
+  {% if parts_count > 1 -%}
+    <p class="project-footer">
+      <a href="." title="{{ parts[0] }} Home">&laquo; {{ parts[0] }} Home</a>
+      <a href="https://github.com/bit-badger/{{ parts[0] }}" target="_blank" rel="noopener"
+         title="{{ parts[0] }} on GitHub">
+        View GitHub Repo
+      </a>
+    </p>
+  {%- endif %}
+</article>

theme/single-page.liquid

@@ -0,0 +1,8 @@
+<article class="content auto">
+  <h1>{{ page.title }}</h1>
+  {{ page.text }}
+  <p><br><a href="{{ "" | relative_link }}" title="Home">&laquo; Home</a></p>
+  {% if logged_on -%}
+    <p><small><a hx-boost="false" href="{{ page | edit_page_link }}">Edit This Page</a></small></p>
+  {% endif %}
+</article>

theme/solution-page.liquid

@@ -0,0 +1,112 @@
+<h1 class="solution-header">
+  {{ page.title }}<br>
+  <small><small>
+    {%- assign url     = page.metadata | value: "url" -%}
+    {%- assign no_link = page.metadata | value: "no_link" -%}
+    {%- assign archive = page.metadata | where: "name", "archive_url" | size -%}
+    {% if no_link == "true" -%}
+      {{ url }}
+    {%- else -%}
+      <a href="{{ url }}" target="_blank" rel="noopener">{{ url }}</a>
+    {%- endif %}
+    {% if archive > 0 -%}
+      &nbsp;&nbsp;
+      <a href="{{ page.metadata | value: "archive_url" }}" target="_blank" rel="noopener"><small>(Archive)</small></a>
+    {%- endif %}
+  </small></small>
+</h1>
+<div class="app-info">
+  <article class="content">
+    <aside>
+      {%- capture screen_url %}screenshots/{{ page.permalink | split: "/" | last }}.png{% endcapture -%}
+      <img src="{{ screen_url | theme_asset }}" alt="Screen shot of {{ page.title | escape }}">
+    </aside>
+    {{ page.text }}
+    {%- assign curr_tech  = page.metadata | where: "name", "tech" -%}
+    {%- assign past_tech  = page.metadata | where: "name", "past_tech" -%}
+    {%- assign curr_count = curr_tech | size -%}
+    {%- assign past_count = past_tech | size -%}
+    {% if curr_count > 0 or past_count > 0 -%}
+      {% comment %} TODO / WIP
+      {% capture all_links -%}
+        ASP.NET MVC|https://dotnet.microsoft.com/apps/aspnet/mvc,
+        Azure|https://azure.microsoft.com/,
+        BlogEngine.NET|http://www.dotnetblogengine.net/,
+        Database Abstraction|https://github.com/danieljsummers/DatabaseAbstraction,
+        Digital Ocean|https://www.digitalocean.com/,
+        Giraffe|https://github.com/giraffe-fsharp/Giraffe,
+        GitHub|https://github.com/,
+        GitHub Pages|https://pages.github.com/,
+        Hexo|https://hexo.io/,
+        Hugo|https://gohugo.io/,
+        Jekyll|https://jekyllrb.com/,
+        MongoDB|https://www.mongodb.com/,
+        MySQL|https://www.mysql.com/,
+        myWebLog|https://github.com/bit-badger/myWebLog,
+        nginx|http://nginx.org/,
+        Orchard|https://orchardproject.net/,
+        PHP|https://www.php.net/,
+        PostgreSQL|https://www.postgresql.org/,
+        Rackspace Cloud|https://www.rackspace.com/cloud,
+        RavenDB|https://ravendb.net/,
+        RethinkDB|https://rethinkdb.com/,
+        SQL Server|https://www.microsoft.com/en-us/sql-server/,
+        Vue.js|https://vuejs.org/,
+        WordPress|https://wordpress.org
+      {%- endcapture %}
+      {% endcomment %}
+      <section>
+        <h3 onclick="toggle('techStack')">
+          The Technology Stack<span id="techStackArrow" class="arrow">&#x25BC;</span>
+        </h3>
+        <div id="techStack" class="collapse-panel hidden">
+          {% if curr_count > 0 -%}
+            {% if past_count > 0 -%}
+              <p><small><strong>Current:</strong></small></p>
+            {%- endif %}
+            <ul>
+              {% for curr in curr_tech -%}
+                {%- assign tech = curr.value | split: "|" -%}
+                <li>
+                  {% comment %} <a v-if="hasLink(tech[0])" :href="techLinks[tech[0]]" target="_blank">{{ tech[0] }}</a> {% endcomment %}
+                  {{ tech[0] }} for {{ tech[1] }}
+                </li>
+              {%- endfor %}
+            </ul>
+          {%- endif %}
+          {% if past_count > 0 -%}
+            {% if curr_count > 0 %}
+              <p><small><strong>Previously:</strong></small></p>
+            {% endif %}
+            <ul>
+              {% for past in past_tech -%}
+                {%- assign tech = past.value | split: "|" -%}
+                <li>
+                  {% comment %} <a v-if="hasLink(tech[0])" :href="techLinks[tech[0]]" target="_blank">{{ tech[0] }}</a> {% endcomment %}
+                  {{ tech[0] }} for {{ tech[1] }}
+                </li>
+              {%- endfor %}
+            </ul>
+          {% endif %}
+        </div>
+      </section>
+    {%- endif %}
+    <p><br><a href="{{ "solutions" | relative_link }}">&laquo; Back to All Solutions</a></p>
+    {% if logged_on -%}
+      <p><small><a hx-boost="false" href="{{ page | edit_page_link }}">Edit This Page</a></small></p>
+    {% endif %}
+  </article>
+</div>
+<script>
+  function toggle(id) {
+    const section = document.getElementById(id)
+    const arrow   = document.getElementById(`${id}Arrow`)
+    if (section.className.indexOf("shown") === -1) {
+      section.className = `${section.className} shown`
+      arrow.innerHTML = "&#x25B2;"
+    } else {
+      section.className = section.className.replace(" shown", "")
+      arrow.innerHTML = "&#x25BC;"
+    }
+  }
+</script>

theme/wwwroot/style.css

@@ -0,0 +1,372 @@
+:root {
+  --heading-fonts: Oswald, "Segoe UI", Ubuntu, "DejaVu Sans", "Liberation Sans", Arial, sans-serif;
+  --accent-color: navy;
+  --app-color: maroon;
+  --edge-color: lightgray;
+  --bkg-color: #fffafa;
+}
+html {
+  background-color: var(--edge-color);
+}
+body {
+  margin: 0;
+  font-family: Raleway, "Segoe UI", Ubuntu, Tahoma, "DejaVu Sans", "Liberation Sans", Arial, sans-serif;
+  background-color: var(--bkg-color);
+}
+a {
+  color: var(--accent-color);
+  text-decoration: none;
+}
+a:hover {
+  border-bottom: dotted 1px var(--accent-color);
+}
+a img {
+  border: 0;
+}
+acronym {
+  border-bottom: dotted 1px black;
+}
+header, h1, h2, h3, .footer-by a {
+  font-family: var(--heading-fonts);
+}
+h1 {
+  text-align: center;
+  margin: 1.4rem 0;
+  font-size: 2rem;
+}
+h1.project-title {
+  line-height: 1.2;
+}
+h2 {
+  margin: 1.2rem 0;
+}
+h3 {
+  margin: 1rem 0;
+}
+h2, h3 {
+  border-bottom: solid 2px var(--accent-color);
+  width: 95%;
+}
+@media all and (min-width: 40rem) {
+  h1 {
+    margin: 0 0 1.4rem 0;
+  }
+  h2, h3 {
+    width: 80%;
+  }
+}
+p {
+  margin: 1rem 0;
+}
+code, pre {
+  font-family: "JetBrains Mono","SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
+  font-size: 80%;
+}
+code {
+  background-color: rgba(0, 0, 0, .1);
+  padding: 0 .25rem;
+  white-space: pre;
+}
+pre {
+  background-color: rgba(0, 0, 0, .9);
+  color: rgba(255, 255, 255, .9);
+  padding: .5rem;
+  border-radius: .5rem;
+  overflow: auto;
+}
+pre > code {
+  background-color: unset;
+}
+div[style="color:#DADADA;background-color:#1E1E1E;"] {
+  background-color: unset !important;
+}
+#content {
+  margin: 0 1rem;
+}
+.content {
+  font-size: 1.1rem;
+  padding: 0 .5rem;
+}
+.auto {
+  margin: 0 auto;
+}
+@media all and (min-width: 68rem) {
+  .content {
+    width: 66rem;
+    padding: 0 1rem;
+  }
+}
+.hdr {
+  font-size: 14pt;
+  font-weight: bold;
+}
+.strike {
+  text-decoration: line-through;
+}
+.alignleft {
+  float: left;
+  padding-right: 5px;
+}
+ul {
+  padding-left: 1.5rem;
+}
+li {
+  list-style-type: disc;
+}
+.app-info {
+  display: flex;
+  flex-flow: row-reverse wrap;
+  justify-content: center;
+}
+abbr[title] {
+  text-decoration: none;
+  border-bottom: dotted 1px rgba(0, 0, 0, .5)
+}
+/* Page header */
+.site-header {
+  height: 100px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  background-image: linear-gradient(to bottom, var(--edge-color), var(--bkg-color));
+}
+.site-header a, .site-header a:visited {
+  color: black;
+}
+.site-header a:hover {
+  border-bottom: none;
+}
+.header-title {
+  font-size: 3rem;
+  font-weight: bold;
+  line-height: 100px;
+  text-align: center;
+}
+.header-spacer {
+  flex-grow: 3;
+}
+.header-social {
+  padding: 25px .8rem 0 0;
+}
+.header-social img {
+  width: 50px;
+  height: 50px;
+}
+@media all and (max-width: 40rem) {
+  .site-header {
+    height: auto;
+    flex-direction: column;
+    align-items: center;
+  }
+  .header-title {
+    line-height: 3rem;
+  }
+  .header-spacer {
+    display: none;
+  }
+}
+/* Home page */
+@media all and (min-width: 80rem) {
+  .home {
+    display: flex;
+    flex-flow: row;
+    align-items: flex-start;
+    justify-content: space-around;
+  }
+}
+.home-lead {
+  font-size: 1.3rem;
+  text-align: center;
+}
+.app-sidebar {
+  text-align: center;
+  border-top: dotted 1px var(--edge-color);
+  padding-top: 1rem;
+  font-size: .9rem;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-around;
+}
+.app-sidebar > div {
+  width: 20rem;
+  padding-bottom: 1rem;
+}
+@media all and (min-width: 68rem) {
+  .app-sidebar {
+    width: 66rem;
+    margin: auto;
+  }
+}
+@media all and (min-width: 80rem) {
+  .app-sidebar {
+    width: 12rem;
+    border-top: none;
+    border-left: dotted 1px var(--edge-color);
+    padding-top: 0;
+    padding-left: 2rem;
+    flex-direction: column;
+  }
+  .app-sidebar > div {
+    width: auto;
+  }
+}
+.app-sidebar a {
+  font-size: 10pt;
+  font-family: sans-serif;
+}
+.app-sidebar-head {
+  font-family: var(--heading-fonts);
+  font-weight: bold;
+  color: var(--app-color);
+  margin-bottom: .8rem;
+  padding: 3px 12px;
+  border-bottom: solid 2px var(--edge-color);
+  font-size: 1rem;
+}
+.app-sidebar-name, .app-sidebar-description {
+  margin: 0;
+  padding: 0;
+}
+.app-sidebar-description {
+  font-style: italic;
+  color: #555555;
+  padding-bottom: .6rem;
+}
+/* All solution page */
+.app-name {
+  font-family: var(--heading-fonts);
+  font-size: 1.3rem;
+  font-weight: bold;
+  color: var(--app-color);
+}
+/* Individual solution pages */
+h1.solution-header {
+  line-height: 1;
+}
+.app-info aside {
+  float: right;
+  background-color: #FFFAFA;
+  padding-left: .5rem;
+}
+@media all and (max-width: 40rem) {
+  .app-info aside {
+    float: none;
+    text-align: center;
+    padding-left: 0;
+  }
+}
+.app-info aside > img {
+  overflow: hidden;
+  border: dotted 1px darkgray;
+  border-radius: .5rem;
+}
+.tech-stack p {
+  margin-bottom: 0;
+}
+.tech-stack ul {
+  margin-top: 0;
+}
+blockquote {
+  border-left: solid 1px darkgray;
+  margin-left: 25px;
+  padding-left: 15px;
+}
+.quote {
+  font-style: italic;
+}
+.source {
+  text-align: right;
+  padding-right: 60px;
+}
+.app-info h3:hover {
+  cursor: hand;
+  cursor: pointer;
+}
+.app-info .arrow {
+  font-size: .75rem;
+  padding-left: 1rem;
+}
+.collapse-panel {
+  max-height: 0;
+  transition: max-height .5s ease-in-out;
+  overflow: hidden;
+}
+.collapse-panel.shown {
+  max-height: 25rem;
+  overflow: auto;
+}
+.collapse-panel p:first-of-type {
+  margin-top: 0;
+}
+/* Footer */
+.project-footer {
+  padding-top: 1rem;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+}
+footer {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  padding: 20px 15px 10px 15px;
+  font-size: 1rem;
+  color: black;
+  clear: both;
+  background-image: linear-gradient(to bottom, var(--bkg-color), var(--edge-color));
+}
+footer a:link, footer a:visited {
+  color: black;
+}
+/* htmx "Loading" overlay */
+.load-overlay {
+  position: fixed;
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  width: 95%;
+  margin-left: 2.5%;
+  height: 0;
+  z-index: 2000;
+  background-color: rgba(0, 0, 0, .5);
+  border-radius: 1rem;
+  animation: fadeOut .25s ease-in-out;
+  overflow: hidden;
+}
+.load-overlay h1 {
+  color: white;
+  background-color: rgba(0, 0, 0, .75);
+  margin-left: auto;
+  margin-right: auto;
+  border-radius: 1rem;
+  width: 50%;
+  padding: 1rem;
+}
+.load-overlay.htmx-request {
+  height: 80vh;
+  animation: fadeIn .25s ease-in-out;
+}
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+    height: 80vh;
+  }
+  100% {
+    opacity: 1;
+    height: 80vh;
+  }
+}
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+    height: 80vh;
+  }
+  99% {
+    opacity: 0;
+    height: 80vh;
+  }
+  100% {
+    opacity: 0;
+    height: 0;
+  }
+}