Upgrade to bootstrap v4.6.1, using CDN bootstrap for now (many things broken)
authorNick Downing <nick@ndcode.org>
Tue, 11 Jan 2022 00:23:06 +0000 (11:23 +1100)
committerNick Downing <nick@ndcode.org>
Tue, 11 Jan 2022 03:16:15 +0000 (14:16 +1100)
.gitignore
navbar.jst
page.jst

index cbdda53..678b875 100644 (file)
@@ -7,5 +7,6 @@
 .*.svg
 /_zet/site.*
 /database.logjson
+/database.logjson.*
 /node_modules
 /package-lock.json
index 076b59d..69e15cc 100644 (file)
@@ -74,14 +74,21 @@ return async (env, head, body, scripts) => {
               //}
               //p {}
 
-              form(action="/search/index.html") {
-                div.input-group {
-                  input.form-control(name="query" type="text" placeholder="Search") {}
-                  span.input-group-btn {
-                    button.btn.btn-default(type="submit") {
-                      _out.push(icon_search_mono)
-                    }
-                  }
+              //form(action="/search/index.html") {
+              //  div.input-group {
+              //    input.form-control(name="query" type="text" placeholder="Search") {}
+              //    span.input-group-btn {
+              //      button.btn.btn-default(type="submit") {
+              //        _out.push(icon_search_mono)
+              //      }
+              //    }
+              //  }
+              //}
+              form.form-inline.'my-2'.my-lg-0(action="/search/index.html") {
+                input.form-control.mr-sm-2(name="query" type="text" placeholder="Search" aria-label="Search") {}
+                ' '
+                button.btn.btn-outline-success.'my-2'.my-sm-0(type="submit") {
+                  'Search'
                 }
               }
             }
@@ -103,57 +110,69 @@ return async (env, head, body, scripts) => {
           }
         }
       }
-      nav.navbar.navbar-default(style="margin-top: 0px; margin-bottom: 0px;") {
-        div(style="padding-left: calc(100vw - 100%);") {
-          div.container { //-fluid") {
-            //  Brand and toggle get grouped for better mobile display
-            div.navbar-header {
-              button.navbar-toggle.collapsed(type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false") {
-                span.sr-only {'Toggle navigation'}
-                span.icon-bar {}
-                span.icon-bar {}
-                span.icon-bar {}
-              }
-              //a.navbar-brand(href="#") {'Brand'}
-            }
-
-            //  Collect the nav links, forms, and other content for toggling
-            div.collapse.navbar-collapse#bs-example-navbar-collapse-1 {
-              ul.nav.navbar-nav {
-                if (dir.length === 0)
-                  li.active {
-                    a(href="/index.html") {
-                      'Home'
-                      span.sr-only {'(current)'}
-                    }
-                  }
-                else
-                  li {
-                    a(href="/index.html") {
-                      'Home'
-                    }
+      nav.navbar.navbar-expand-lg.navbar-light.bg-light {
+        div.container { //div(style="padding-left: calc(100vw - 100%);") {
+          //a.navbar-brand(href="#") {'Navbar'}
+          //' '
+          button.navbar-toggler(type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation") {
+            span.navbar-toggler-icon {}
+          }
+          div.collapse.navbar-collapse#navbarSupportedContent {
+            ul.navbar-nav.mr-auto {
+              if (dir.length === 0)
+                li.nav-item.active {
+                  a.nav-link(href="/index.html") {
+                    'Home'
+                    span.sr-only {' (current)'}
                   }
-                let entries = menu.entries
-                for (let i = 0; i < entries.length; ++i)
-                  if (entries[i].navbar)
-                    if (entries[i].dir === dir)
-                      li.active {
-                        a(href=`/${entries[i].dir}/index.html`) {
-                          `${entries[i].name}`
-                          span.sr-only {'(current)'}
-                        }
+                }
+              else
+                li.nav-item {
+                  a.nav-link(href="/index.html") {'Home'}
+                }
+              let entries = menu.entries
+              for (let i = 0; i < entries.length; ++i)
+                if (entries[i].navbar)
+                  if (entries[i].dir === dir)
+                    li.nav-item.active {
+                      a.nav-link(href=`/${entries[i].dir}/index.html`) {
+                        `${entries[i].name}`
+                        span.sr-only {' (current)'}
                       }
-                    else
-                      li {
-                        a(href=`/${entries[i].dir}/index.html`) {
-                          `${entries[i].name}`
-                        }
+                    }
+                  else
+                    li.nav-item {
+                      a.nav-link(href=`/${entries[i].dir}/index.html`) {
+                        `${entries[i].name}`
                       }
-              }
-              ul.nav.navbar-nav.navbar-right {
-                li {
-                  a#give-feedback(href="") {'Give feedback'}
-                }
+                    }
+              //li.nav-item.dropdown {
+              //  a.nav-link.dropdown-toggle#navbarDropdown(href="#" role="button" data-toggle="dropdown" aria-expanded="false") {
+              //    'Dropdown'
+              //  }
+              //  div.dropdown-menu(aria-labelledby="navbarDropdown") {
+              //    a.dropdown-item(href="#") {
+              //      'Action'
+              //    }
+              //    ' '
+              //    a.dropdown-item(href="#") {
+              //      'Another action'
+              //    }
+              //    div.dropdown-divider {}
+              //    a.dropdown-item(href="#") {
+              //      'Something else here'
+              //    }
+              //  }
+              //}
+              //li.nav-item {
+              //  a.nav-link.disabled {
+              //    'Disabled'
+              //  }
+              //}
+            }
+            ul.navbar-nav.ml-auto {
+              li.nav-item {
+                a.nav-link#give-feedback(href="") {'Give feedback'}
               }
             }
           }
index 2d1e3dc..7dec5da 100644 (file)
--- a/page.jst
+++ b/page.jst
@@ -32,39 +32,31 @@ return async (env, head, body, scripts) => {
   await transaction.commit()
 
   let _out = []
-  _out.push('<!DOCTYPE html>')
+  _out.push('<!doctype html>')
   html(lang="en") {
     head {
+      // Required meta tags
       meta(charset="utf-8") {}
-      meta(http-equiv="X-UA-Compatible" content="IE=edge") {}
-      meta(name="viewport" content="width=device-width,initial-scale=1") {}
-      // The above 3 meta tags *must* come first in the head;
-      // any other head content must come *after* these tags
-  
-      link(rel="stylesheet" href="/css/bootstrap.css") {}
-      link(rel="stylesheet" href="//fonts.googleapis.com/css?family=Frank+Ruhl+Libre:regular,regularitalic,semibold,semibolditalic,bold,bolditalic,black,blackitalic") {}
-      link(rel="stylesheet" href="//fonts.googleapis.com/css?family=Nunito+Sans:regular,regularitalic,semibold,semibolditalic,bold,bolditalic,black,blackitalic") {}
-  
-      await head(_out)
+      meta(name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no") {}
 
-      // HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
-      // WARNING: Respond.js doesn't work if you view the page via file://
-      _out.push('<!--[if lt IE 9]>')
-      script(src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js") {}
-      script(src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js") {}
-      _out.push('<![endif]-->')
+      // Bootstrap CSS
+      link(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous") {}
 
-      // use favicon generator website to get favicons.zip and favicons.html
-      _out.push(favicons)
+      await head(_out) //title {'Hello, world!'}
     }
     body {
-      await body(_out)
-  
-      // jQuery (necessary for Bootstrap's JavaScript plugins)
-      script(src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js") {}
-      // Include all compiled plugins (below), or include individual files as needed
-      //script(src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous") {}
-      script(src="/js/bootstrap.js") {}
+      await body(_out) //h1 {'Hello, world!'}
+
+      // Optional JavaScript; choose one of the two!
+
+      // Option 1: jQuery and Bootstrap Bundle (includes Popper)
+      script(src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous") {}
+      script(src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous") {}
+
+      // Option 2: Separate Popper and Bootstrap JS
+      //script(src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous") {}
+      //script(src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous") {}
+      //script(src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous") {}
 
       await scripts(_out)
     }