Add extra info modal

assets/scripts/fa-icons.js

@@ -3,6 +3,7 @@ import {
   faBook,
   faBrowser,
   faComment,
+  faCowbell,
   faEllipsis,
   faFileAlt,
   faFileSignature,
@@ -11,6 +12,7 @@ import {
   faNotebook,
   faPodium,
   faPresentation,
+  faScaleBalanced,
   faUniversity,
   faUserAstronaut,
   faVideo,
@@ -43,25 +45,66 @@ const faBullSperm = {
   ],
 };
 
+const faPeertube = {
+  prefix: "fax",
+  iconName: "peertube",
+  icon: [
+    512,
+    512,
+    [],
+    null,
+    "M55.8 25V255L255 140zM255 140v230l199.2-115zM55.8 255v230L255 370z",
+  ],
+};
+
+const faGitea = {
+  prefix: "fax",
+  iconName: "gitea",
+  icon: [
+    512,
+    512,
+    [],
+    null,
+    "M92.7 114.5c-5.2 0-11 .4-17.6 1.9c-7 1.4-26.8 5.9-43 21.5C-3.9 169.9 5.3 221 6.4 228.6c1.4 9.4 5.5 35.4 25.4 58c36.6 44.9 115.5 43.8 115.5 43.8s9.7 23.1 24.5 44.4c20 26.5 40.6 47.1 60.6 49.6c50.4 0 151.1-.1 151.1-.1s9.6 .1 22.6-8.2c11.2-6.8 21.2-18.7 21.2-18.7s10.3-11 24.7-36.2c4.4-7.8 8.1-15.3 11.3-22.4c0 0 44.2-93.7 44.2-184.9c-.9-27.6-7.7-32.5-9.3-34.1c-3.3-3.3-7.7-3.2-7.7-3.2s-93.8 5.3-142.3 6.4c-10.6 .2-21.2 .5-31.7 .6l0 93.8c-4.4-2.1-8.9-4.2-13.3-6.3c0-29.1-.1-87.4-.1-87.4c-23.2 .3-71.4-1.8-71.4-1.8s-113.1-5.7-125.4-6.8c-3.9-.2-8.4-.7-13.6-.7zm9.8 38.4s5.7 47.5 12.6 75.4c5.8 23.4 19.8 62.2 19.8 62.2s-20.9-2.5-34.4-7.3c-20.7-6.8-29.5-15-29.5-15s-15.3-10.7-23-31.8c-13.2-35.4-1.1-57-1.1-57s6.7-18 30.8-24c11-3 24.8-2.5 24.8-2.5zm171 53.5c5.9-.4 11.9 2.6 11.9 2.6l18.2 8.8c-3.7 7.5-7.4 15-11.1 22.5c-5.4-.1-10.3 2.8-12.9 7.5c-2.7 5-2.2 11.3 1.5 15.8l-19.7 40.3c-6.6 .1-12.3 4.6-13.8 11s1.6 13 7.3 16c6.2 3.2 14 1.4 18.2-4.3c4.1-5.7 3.4-13.5-1.4-18.5L290.8 269c1.2 .1 3 .2 5-.4c3.3-.7 5.7-2.9 5.7-2.9c3.4 1.4 6.9 3 10.6 4.9c3.8 1.9 7.4 3.9 10.7 5.8c.7 .4 1.4 .9 2.2 1.5c1.3 1 2.7 2.5 3.8 4.4c1.5 4.4-1.5 11.9-1.5 11.9c-1.8 6.1-14.7 32.5-14.7 32.5c-6.5-.2-12.2 4-14.2 10c-2.1 6.5 .9 13.8 7.1 17s13.9 1.4 18-4.2c4-5.4 3.7-13-.9-18.1c1.5-3 3-5.9 4.5-9c4-8.3 10.8-24.3 10.8-24.3c.7-1.4 4.6-8.2 2.2-17c-2-9.1-10.1-13.4-10.1-13.4c-9.8-6.3-23.4-12.2-23.4-12.2s0-3.3-.9-5.7c-.9-2.5-2.2-4.1-3.1-5c3.6-7.4 7.2-14.8 10.8-22.2L373.9 252s10.1 4.6 12.2 13c1.5 5.9-.4 11.2-1.4 13.8c-5 12.3-44 90.5-44 90.5s-4.9 11.6-15.7 12.3c-4.6 .3-8.2-1-8.2-1s-.2-.1-4.2-1.7l-90.3-44s-8.7-4.6-10.2-12.5c-1.8-6.5 2.2-14.5 2.2-14.5l43.4-89.5s3.8-7.8 9.8-10.4c.5-.2 1.8-.8 3.6-1.2c.8-.2 1.6-.3 2.5-.4z",
+  ],
+};
+
+const faNextcloud = {
+  prefix: "fax",
+  iconName: "nextcloud",
+  icon: [
+    733,
+    512,
+    [],
+    null,
+    "m365.6 114.3c-65 0-120.1 44.1-137.2 103.8c-14.8-31.7-47-53.8-84-53.8c-50.9 0-92.8 41.9-92.8 92.8s41.9 92.8 92.8 92.8c37 0 69.2-22.2 84-53.9c17.1 59.7 72.2 103.8 137.2 103.8c64.5 0 119.3-43.4 136.8-102.4c15.1 31 46.9 52.5 83.4 52.5c50.9 0 92.8-41.9 92.8-92.8s-41.9-92.8-92.8-92.8c-36.5 0-68.3 21.6-83.4 52.5c-17.1-59-71.9-102.4-136.4-102.4zm0 54.5c49.1 0 88.3 39.2 88.3 88.2s-39.2 88.3-88.3 88.3s-88.2-39.2-88.2-88.3s39.2-88.2 88.2-88.2zm-221.2 49.9c21.5 0 38.3 16.8 38.3 38.3s-16.9 38.3-38.3 38.3s-38.3-16.9-38.3-38.3s16.8-38.3 38.3-38.3zm441.4 0c21.5 0 38.3 16.8 38.3 38.3s-16.9 38.3-38.3 38.3s-38.3-16.9-38.3-38.3s16.8-38.3 38.3-38.3z",
+  ],
+};
+
 library.add(
   faBook,
   faBrowser,
   faBullSperm,
   faComment,
+  faCowbell,
   faDiscord,
   faEllipsis,
   faFileAlt,
   faFileSignature,
+  faGitea,
   faGithub,
   faGitlab,
   faGolang,
   faGraduationCap,
   faHome,
   faHtml5,
+  faNextcloud,
   faNotebook,
   faOrcid,
+  faPeertube,
   faPodium,
   faPresentation,
+  faScaleBalanced,
   faStackOverflow,
   faSteam,
   faUniversity,

assets/styles/mix-twbs.scss

@@ -41,7 +41,7 @@
     position: fixed;
     width: 100%;
     min-height: 35vh;
-    height: 350px;
+    height: 72ex;
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center center;
@@ -58,12 +58,6 @@
     padding-top: 1rem;
   }
 
-  footer {
-    position: fixed;
-    bottom: 0;
-    width: 100%;
-  }
-
   .footer-contents {
     position: relative;
     background-color: $gray-200;
@@ -144,3 +138,11 @@
   .fa-stack-top {
     vertical-align: top;
   }
+
+.table-condensed th {
+  padding: 0.5rem;
+}
+
+.table-condensed td {
+  padding: 0.5rem;
+}

layouts/_default/baseof.html

@@ -13,6 +13,7 @@
 
 
   <body>
+    {{ partial "extras-modal" . }}
     <div class="container-fluid">
       <div class="row wrapper min-vh-100 flex-column flex-sm-row">
         <aside class="col-12 col-md-3 p-0 bg-dark flex-shrink-1">
@@ -104,11 +105,56 @@
               </div>
             </section>
           {{ end }}
-          <footer>
+          <footer class="fixed-bottom">
             <div class="container-fluid footer-contents">
-              {{ $brandedbull := resources.Get "images/brandedbull.png" }}
+              <div class="row justify-content-between">
-              {{ $brandedbullsmall := $brandedbull.Resize "x95" }}
+                <div class="col-3 align-self-center">
-              <img src="{{ $brandedbullsmall.Permalink }}" />
+                  {{ $brandedbull := resources.Get "images/brandedbull.png" }}
+                  {{ $brandedbullsmall := $brandedbull.Resize "x95" }}
+                  <img src="{{ $brandedbullsmall.Permalink }}" height="95rem" />
+                </div>
+                <div class="col-3 align-self-center">
+                  <div
+                    class="btn-group float-end"
+                    role="group"
+                    aria-label="Other Milliron X sites"
+                  >
+                    <a
+                      class="btn btn-outline-primary btn-sm"
+                      href="https://video.millironx.com/"
+                      data-bs-toggle="tooltip"
+                      title="Video (Peertube)"
+                    >
+                      <i class="fax fa-peertube fa-fw"></i>
+                    </a>
+                    <a
+                      class="btn btn-outline-primary btn-sm"
+                      href="https://code.millironx.com/"
+                      data-bs-toggle="tooltip"
+                      title="Code (Gitea)"
+                    >
+                      <i class="fax fa-gitea fa-fw"></i>
+                    </a>
+                    <a
+                      class="btn btn-outline-primary btn-sm"
+                      href="https://nextcloud.millironx.com/"
+                      data-bs-toggle="tooltip"
+                      title="Files (Nextcloud)"
+                    >
+                      <i class="fax fa-nextcloud fa-fw"></i>
+                    </a>
+                    <button
+                      type="button"
+                      class="btn btn-outline-primary btn-sm"
+                      data-bs-toggle="modal"
+                      data-bs-target="#extras-modal"
+                      title="Extras"
+                    >
+                      <i class="fad fa-cowbell fa-fw"></i>
+                    </button>
+                  </div>
+                </div>
+              </div>
             </div>
           </footer>
         </main>

layouts/partials/extras-modal.html

@@ -0,0 +1,247 @@
+<div
+  class="modal fade"
+  id="extras-modal"
+  tabindex="-1"
+  aria-labelledby="extras-modal-label"
+  aria-hidden="true"
+>
+  <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h1 class="modal-title fs-5">Bonus content</h1>
+        <button
+          type="button"
+          class="btn-close"
+          data-bs-dismiss="modal"
+          aria-label="Close"
+        ></button>
+      </div>
+      <div class="modal-body">
+        <ul class="nav nav-tabs" role="tablist">
+          <li class="nav-item" role="presentation">
+            <a
+              class="nav-link active"
+              data-bs-toggle="tab"
+              href="#oss"
+              aria-selected="true"
+              role="tab"
+              >Open Source</a
+            >
+          </li>
+          <li class="nav-item" role="presentation">
+            <a class="nav-link" data-bs-toggle="tab" href="#privacy" role="tab">
+              Privacy</a
+            >
+          </li>
+          <li class="nav-item" role="presentation">
+            <a class="nav-link" data-bs-toggle="tab" href="#debug" role="tab">
+              Debug
+            </a>
+          </li>
+        </ul>
+        <div class="tab-content">
+          <div class="tab-pane fade show active p-3" id="oss" role="tabpanel">
+            <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">
+              <img
+                class="img img-responsive"
+                alt="Creative Commons License"
+                style="border-width:0; display: block; margin: 0 auto"
+                src="https://i.creativecommons.org/l/by/4.0/88x31.png"
+              />
+            </a>
+            <p>
+              &OpenCurlyDoubleQuote;{{ .Title }}&CloseCurlyDoubleQuote; by
+              Thomas A. Christensen II is licensed under a
+              <a
+                rel="license"
+                href="http://creativecommons.org/licenses/by/4.0/"
+                >Creative Commons Attribution 4.0 International License</a
+              >.
+            </p>
+            <p>
+              All images, unless otherwise noted, are licensed under a
+              <a
+                rel="license"
+                href="http://creativecommons.org/licenses/by-nd/4.0/"
+                >Creative Commons Attribution-NoDerivatives 4.0 International
+                License</a
+              >, instead.
+            </p>
+            <hr />
+            <p>
+              This site is open source!
+              <br />
+              <a
+                class="btn btn-dark"
+                href="https://code.millironx.com/millironx/millironx.github.io"
+              >
+                <i class="fax fa-gitea"></i>&emsp;Get the code! &raquo;
+              </a>
+              <a
+                class="btn btn-dark"
+                href="https://code.millironx.com/millironx/millironx.github.io/src/branch/master/LICENSE"
+              >
+                <i class="fad fa-scale-balanced"></i>&emsp;MIT Licensed &raquo;
+              </a>
+            </p>
+            <p>
+              In addition, I used a number of excellent open-source libraries
+              and toolkits in building it. I dedicate this space to
+              acknowledging them all.
+            </p>
+            <table class="table table-condensed table-responsive table-striped">
+              <tr>
+                <th>Project name</th>
+                <th>URL</th>
+                <th>License</th>
+              </tr>
+              <tr>
+                <th>Hugo</th>
+                <td><a href="https://gohugo.io/">gohugo.io</a></td>
+                <td>
+                  <a href="https://github.com/gohugoio/hugo/blob/master/LICENSE"
+                    >Apache License v2</a
+                  >
+                </td>
+              </tr>
+              <tr>
+                <th>Node.js</th>
+                <td><a href="https://nodejs.org/">nodejs.org</a></td>
+                <td>
+                  <a href="https://github.com/nodejs/node/blob/HEAD/LICENSE"
+                    >MIT License</a
+                  >
+                </td>
+              </tr>
+              <tr>
+                <th>Bootstrap 5</th>
+                <td>
+                  <a href="https://getbootstrap.com/">getbootstrap.com</a>
+                </td>
+                <td>
+                  <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE"
+                    >MIT License</a
+                  >
+                </td>
+              </tr>
+              <tr>
+                <th>Bootswatch Lux 5</th>
+                <td>
+                  <a href="https://bootswatch.com/lux/">bootswatch.com</a>
+                </td>
+                <td>
+                  <a
+                    href="https://github.com/thomaspark/bootswatch/blob/v5/LICENSE"
+                    >MIT License</a
+                  >
+                </td>
+              </tr>
+              <tr>
+                <th>JQuery 3</th>
+                <td><a href="https://jquery.com/">jquery.com</a></td>
+                <td><a href="https://jquery.org/license">MIT License</a></td>
+              </tr>
+              <tr>
+                <th>Font Awesome 6</th>
+                <td><a href="https://fontawesome.com/">fontawesome.com</a></td>
+                <td>
+                  <a href="https://fontawesome.com/license/"
+                    >Font Awesome Pro License</a
+                  >
+                </td>
+              </tr>
+              <tr>
+                <th>Get S*** Done Toolkit</th>
+                <td>
+                  <a
+                    href="https://www.creative-tim.com/product/get-shit-done-kit"
+                    >creative-tim.com</a
+                  >
+                </td>
+                <td>
+                  <a
+                    href="https://github.com/timcreative/freebies/blob/master/LICENSE.md"
+                    >MIT License</a
+                  >
+                </td>
+              </tr>
+              <tr>
+                <th>FitText</th>
+                <td><a href="http://fittextjs.com/">fittextjs.com</a></td>
+                <td><a href="http://www.wtfpl.net/">WTFPL License</a></td>
+              </tr>
+              <tr>
+                <th>jQuery Mask Plugin</th>
+                <td>
+                  <a href="https://igorescobar.github.io/jQuery-Mask-Plugin/"
+                    >igorescobar.github.io</a
+                  >
+                </td>
+                <td>
+                  <a
+                    href="https://github.com/igorescobar/jQuery-Mask-Plugin/blob/master/LICENSE"
+                    >MIT License</a
+                  >
+                </td>
+              </tr>
+              <tr>
+                <th>PostCSS</th>
+                <td><a href="https://postcss.org/">postcss.com</a></td>
+                <td>
+                  <a href="https://github.com/postcss/postcss/blob/main/LICENSE"
+                    >MIT License</a
+                  >
+                </td>
+              </tr>
+              <tr>
+                <th>PurgeCSS</th>
+                <td><a href="https://purgecss.com/">purgecss.com</a></td>
+                <td>
+                  <a
+                    href="https://github.com/FullHuman/purgecss/blob/main/LICENSE"
+                    >MIT License</a
+                  >
+                </td>
+              </tr>
+            </table>
+          </div>
+          <div class="tab-pane fade p-3" id="privacy" role="tabpanel">
+            <p>
+              I take privacy very seriously. That said, I do need
+              <i>some</i> info on how many people visit. As a compromise, this
+              site uses <a href="https://goatcounter.com">GoatCounter</a>, a
+              privacy-friendly (as much as possible) web analytics library.
+            </p>
+            <p>
+              You may view all analytics gathered at
+              <a href="https://millironx.goatcounter.com/"
+                >millironx.goatcounter.com</a
+              >.
+            </p>
+            <p>
+              If you do not wish to participate in my site's analytics, you may
+              install a content-blocking extension into your browser and block
+              the domain
+              <code>gc.zgo.at</code>. I recommend either
+              <a href="https://github.com/gorhill/uBlock">uBlock Origin</a>
+              (instructions
+              <a
+                href="https://github.com/gorhill/uBlock/wiki/Dashboard:-My-filters"
+                >here</a
+              >) or <a href="https://noscript.net">NoScript</a> for this
+              purpose.
+            </p>
+          </div>
+          <div class="tab-pane fade p-3" id="debug" role="tabpanel">
+            <dl>
+              {{ range $key, $val := .Params }}
+                <dt>{{ $key }}</dt>
+                <dd>{{ $val }}</dd>
+              {{ end }}
+            </dl>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>