From e2f94edb9ef9ed2e53d5ef425797d7a50a80ddb1 Mon Sep 17 00:00:00 2001
From: "Daniel J. Summers" <daniel@bitbadger.solutions>
Date: Fri, 13 May 2022 09:18:56 -0400
Subject: [PATCH] WIP on local Bootstrap lib support

- Sort categories case-insensitively
- Strip HTML from category description
---
 src/MyWebLog.Data/Data.fs                     |  2 +-
 src/MyWebLog/themes/admin/layout.liquid       | 12 ++++++
 src/MyWebLog/themes/admin/post-edit.liquid    |  2 +-
 src/MyWebLog/themes/tech-blog/index.liquid    | 12 ++++++
 .../wwwroot/themes/tech-blog/style.css        | 37 ++++++++++++++-----
 5 files changed, 53 insertions(+), 12 deletions(-)

diff --git a/src/MyWebLog.Data/Data.fs b/src/MyWebLog.Data/Data.fs
index b2f2637..058f108 100644
--- a/src/MyWebLog.Data/Data.fs
+++ b/src/MyWebLog.Data/Data.fs
@@ -178,7 +178,7 @@ module Category =
         let! cats = rethink<Category list> {
             withTable Table.Category
             getAll [ webLogId ] (nameof webLogId)
-            orderBy "name"
+            orderByFunc (fun it -> it.G("name").Downcase () :> obj)
             result; withRetryDefault conn
         }
         let  ordered = orderByHierarchy cats None None []
diff --git a/src/MyWebLog/themes/admin/layout.liquid b/src/MyWebLog/themes/admin/layout.liquid
index 87ee26e..b779c99 100644
--- a/src/MyWebLog/themes/admin/layout.liquid
+++ b/src/MyWebLog/themes/admin/layout.liquid
@@ -65,6 +65,18 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
             integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
             crossorigin="anonymous"></script>
+    <script>
+      const cssLoaded = [...document.styleSheets].filter(it => it.href.indexOf("bootstrap.min.css") > -1).length > 0
+      if (!cssLoaded) {
+        const local = document.createElement("link")
+        local.rel = "stylesheet"
+        local.href = "/themes/admin/bootstrap.min.css"
+        document.getElementsByTagName("link")[0].prepend(local)
+      }
+      setTimeout(function () {
+        if (!bootstrap) document.write('<script src=\"/script/bootstrap.bundle.min.js\"><\/script>')
+      }, 2000)
+    </script>
     <script src="/themes/admin/admin.js"></script>
   </body>
 </html>
diff --git a/src/MyWebLog/themes/admin/post-edit.liquid b/src/MyWebLog/themes/admin/post-edit.liquid
index ea7eac5..7629d13 100644
--- a/src/MyWebLog/themes/admin/post-edit.liquid
+++ b/src/MyWebLog/themes/admin/post-edit.liquid
@@ -125,7 +125,7 @@
                 <input type="checkbox" name="categoryIds" id="categoryId_{{ cat.id }}" class="form-check-input"
                        value="{{ cat.id }}" {% if model.category_ids contains cat.id %} checked="checked"{% endif %}>
                 <label for="categoryId_{{ cat.id }}" class="form-check-label"
-                       {%- if cat.description %} title="{{ cat.description.value | escape }}"{% endif %}>
+                       {%- if cat.description %} title="{{ cat.description.value | strip_html | escape }}"{% endif %}>
                   {%- for it in cat.parent_names %}&nbsp; &rang; &nbsp;{% endfor %}{{ cat.name }}
                 </label>
               </div>
diff --git a/src/MyWebLog/themes/tech-blog/index.liquid b/src/MyWebLog/themes/tech-blog/index.liquid
index c87015d..f1b8c33 100644
--- a/src/MyWebLog/themes/tech-blog/index.liquid
+++ b/src/MyWebLog/themes/tech-blog/index.liquid
@@ -42,3 +42,15 @@
     {%- if logged_on %}<small><a href="/post/{{ post.id }}/edit">Edit Post</a></small>{% endif %}
   </article>
 {%- endfor %}
+<div class="bottom-nav" role="navigation">
+  <div class="nav-previous">
+    {% if model.newer_link -%}
+      <a href="/{{ model.newer_link.value }}">&laquo; Newer Posts</a>
+    {% endif %}
+  </div>
+  <div class="nav-next">
+    {% if model.older_link -%}
+      <a href="/{{ model.older_link.value }}">Older Posts &raquo;</a>
+    {% endif %}
+  </div>
+</div>
diff --git a/src/MyWebLog/wwwroot/themes/tech-blog/style.css b/src/MyWebLog/wwwroot/themes/tech-blog/style.css
index d1a8408..18d43c2 100644
--- a/src/MyWebLog/wwwroot/themes/tech-blog/style.css
+++ b/src/MyWebLog/wwwroot/themes/tech-blog/style.css
@@ -8,29 +8,31 @@
 }
 html {
   background-color: lightgray;
+  scroll-behavior: smooth;
 }
 body, .entry-meta {
-	font-family: "Raleway", "Segoe UI", Ubuntu, Tahoma, "DejaVu Sans", "Liberation Sans", Arial, sans-serif;
+  font-family: "Raleway", "Segoe UI", Ubuntu, Tahoma, "DejaVu Sans", "Liberation Sans", Arial, sans-serif;
 }
 body {
-	margin: 0px;
-	background-color: #FFFAFA;
+  margin: 0;
+  background-color: #FFFAFA;
 }
 a {
-	color: navy;
-	text-decoration: none;
+  color: navy;
+  text-decoration: none;
 }
 a:hover {
-	border-bottom: dotted 1px navy;
+  border-bottom: dotted 1px navy;
 }
 a img {
-	border:0;
+  border:0;
 }
 acronym {
-	border-bottom:dotted 1px black;
+  border-bottom:dotted 1px black;
+  text-decoration: none;
 }
 header, h1, h2, h3, footer a, .home-lead a, .highlight {
-	font-family: "Oswald", "Segoe UI", Ubuntu, "DejaVu Sans", "Liberation Sans", Arial, sans-serif;
+  font-family: "Oswald", "Segoe UI", Ubuntu, "DejaVu Sans", "Liberation Sans", Arial, sans-serif;
 }
 h1 {
   text-align: center;
@@ -61,6 +63,20 @@ code, pre {
 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;
@@ -224,7 +240,8 @@ li {
 }
 @media all and (min-width: 80rem) {
   .blog-sidebar {
-    width: 12rem;
+    min-width: 12rem;
+    max-width: 16rem;
     border-top: none;
     border-left: dotted 1px lightgray;
     padding-top: 0;