WIP on local Bootstrap lib support

- Sort categories case-insensitively
- Strip HTML from category description

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 []

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>

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>

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>

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;