feat: update layout and shian

assets/js/lib/nav-collapse.js

@@ -5,10 +5,6 @@ function toggleMenu() {
 }
 
 document.querySelector("#menushow").addEventListener("click", toggleMenu);
-document.querySelectorAll(".menu__nav-item").forEach(menu =>
-    menu.addEventListener("click", toggleMenu)
-);
-document.getElementById("darkMode").addEventListener("click", toggleMenu);
 
 var nav = document.querySelector('.site-header');
 var feed = document.querySelector('main');

assets/js/lib/search.js

@@ -6,15 +6,19 @@ async function searchPosts(query) {
 
     var data = await fetch(apiEndpoint + queryString + query + pageString + page)
     var search = await data.json();
-    var result = search.result.map(x => {
+    var result = "";
-        return `
+    if (search.result) {
+        result = search.result.map(x => {
+            return `
         <div class="menu__search-result">
             <a href="${x.url}"><h2 class="menu__search-title">${x.title}</h2></a>
             <p class="menu__search-desc">${x.excerpt}</p>
         </div>
         `;
-    }).join("");
+        }).join("");
+    }
 
+    document.getElementById("search-count").innerHTML = search.total + " results found";
     document.getElementById("search-results").innerHTML = result;
 }
 
@@ -24,11 +28,14 @@ if (window.yurikoSearchEndpoint != undefined) {
     el.addEventListener("input", function (e) {
         var val = el.value;
         if (val !== "") {
-            document.getElementById("nav-menu").classList.add("menu__item--hidden")
+            document.getElementById("site-header").classList.add("search-enabled")
+            document.getElementById("nav").classList.add("hidden")
             searchPosts(val);
         } else {
-            document.getElementById("nav-menu").classList.remove("menu__item--hidden")
+            document.getElementById("site-header").classList.remove("search-enabled")
+            document.getElementById("nav").classList.remove("hidden")
 
+            document.getElementById("search-count").innerHTML = ``;
             document.getElementById("search-results").innerHTML = ``;
         }
     });

gulpfile.js

@@ -37,7 +37,7 @@ function js() {
         .pipe(livereload());
 }
 
-const cssWatcher = () => watch('assets/css/**', css);
+const cssWatcher = () => watch(['assets/css/**','node_modules/@damillora/shian/dist/**'], css);
 const jsWatcher = () => watch('assets/js/**.js', js);
 const hbsWatcher = () => watch(['*.hbs', 'partials/**/*.hbs'], hbs);
 const watcher = parallel(cssWatcher, hbsWatcher, jsWatcher);

partials/navigation.hbs

@@ -1,22 +1,21 @@
 <div class="menu">
-    <div id="nav-menu">
+    <div class="menu__nav">
-        {{#foreach navigation}}
+        <div class="menu__nav-main" id="nav">
-        <div class="menu__item menu__nav-item">
+            {{#foreach navigation}}
-            <a href={{url absolute="true" }}>
+            <div class="menu__item menu__nav-item">
-                <p class="menu__text">{{label}}</p>
+                <a href={{url absolute="true" }}>
-            </a>
+                    <p class="menu__text">{{label}}</p>
+                </a>
+            </div>
+            {{/foreach}}
+            <div class="menu__item menu--dark-mode" id="darkMode">
+                <i class="menu__icon material-icons md-24">brightness_low</i>
+                <p class="menu__text">Dark Mode</p>
+            </div>
         </div>
-        {{/foreach}}
+        <div class="menu__item menu--permanent-icon" id="search">
-        <div class="menu__item" id="darkMode">
+            <i class="menu__icon material-icons md-24">search</i>
-            <i class="menu__icon material-icons md-24">brightness_low</i>
+            <input type="text" id="search-query" class="menu__search-input"></input>
-            <p class="menu__text">Dark Mode</p>
         </div>
     </div>
-    <div class="menu__item" id="search">
-        <i class="menu__icon material-icons md-24">search</i>
-        <input type="text" id="search-query" class="menu__search-input"></input>
-    </div>
-    <div id="search-results" class="menu__search-results">
-
-    </div>
 </div>

partials/post-card.hbs

@@ -7,12 +7,12 @@
       {{#if primary_tag}}
       {{#primary_tag}}
       <a class="post-card__tag-info" href="{{url}}">
+        <span class="post-card__tag-name">{{name}}</span>
         {{#if accent_color}}
         <span class="post-card__tag-color" style="background-color: {{accent_color}};"></span>
         {{else}}
         <span class="post-card__tag-color"></span>
         {{/if}}
-        <span class="post-card__tag-name">{{name}}</span>
       </a>
       {{/primary_tag}}
       {{/if}}

partials/primary-tag.hbs

@@ -2,12 +2,12 @@
   {{#if primary_tag}}
   {{#primary_tag}}
   <a href="{{url}}">
+    <span class="tag__name--post-header">{{name}}</span>
     {{#if accent_color}}
     <span class="tag__color" style="background-color: {{accent_color}};"></span>
     {{else}}
     <span class="tag__color"></span>
     {{/if}}
-    <span class="tag__name--post-header">{{name}}</span>
   </a>
   {{/primary_tag}}
   {{/if}}

partials/site-header.hbs

@@ -1,5 +1,5 @@
 {{> "site-background"}}
-<div class="site-header">
+<div class="site-header" id="site-header">
   <div class="site-header__background responsive-site-header-img">
   </div>
   <div class="site-header__inner">
@@ -15,5 +15,11 @@
       </div>
       {{navigation}}
     </header>
+    <div class="menu__item menu__nav-item">
+      <p id="search-count" class="menu__text"></p>
+    </div>
+    <div id="search-results" class="menu__search-results">
+
+    </div>
   </div>
 </div>

tag.hbs

@@ -9,14 +9,14 @@
           <span class="post-header__tag-name">Tag</span>
         </p>
         <div class="post-header__heading post-header__heading--tag">
+          <h1 class="post-header__heading--tag-text">
+            {{name}}
+          </h1>
           {{#if accent_color}}
           <span class="post-header__heading--tag-color" style="background-color: {{accent_color}};"></span>
           {{else}}
           <span class="post-header__heading--tag-color"></span>
           {{/if}}
-          <h1 class="post-header__heading--tag-text">
-            {{name}}
-          </h1>
         </div>
         <p class="page-header__text">{{description}}</p>
       </div>