imrpovements

assets/js/component/dropdown.js

@@ -18,4 +18,4 @@ document.body.addEventListener('click', function (e) {
     if (!isDropdownMenu) {
         document.querySelectorAll(dropdownOpenSelector).forEach(el => el.classList.remove('show'));
     }
-});
+});

assets/js/component/toc.js

@@ -44,4 +44,4 @@ if ('IntersectionObserver' in window) {
             }
         });
     });
-}
+}

assets/scss/base.scss

@@ -4,24 +4,24 @@
  * Licensed under the MIT License.
  */
 
-@import "reset";
-@import "variables";
-@import "layout";
-
-@import "component/site-header";
-@import "component/site-footer";
-@import "component/article";
-@import "component/sidebar";
-@import "component/toc";
-
-@import "component/button";
-@import "component/dropdown";
-@import "component/chroma";
-
-html {
-  font-family: var(--font-family);
-  background: var(--background);
-  color: var(--color);
-  scroll-behavior: smooth;
-  scroll-padding: 2em;
-}
+ @import "reset";
+ @import "variables";
+ @import "layout";
+ 
+ @import "component/site-header";
+ @import "component/site-footer";
+ @import "component/article";
+ @import "component/sidebar";
+ @import "component/toc";
+ 
+ @import "component/button";
+ @import "component/dropdown";
+ @import "component/chroma";
+ 
+ html {
+   font-family: var(--font-family);
+   background: var(--background);
+   color: var(--color);
+   scroll-behavior: smooth;
+   scroll-padding: 2em;
+ }

assets/scss/component/_button.scss

@@ -39,4 +39,4 @@
   border: 1px dotted var(--border-color);
   border-radius: 4px;
   cursor: pointer;
-}
+}

assets/scss/component/sidebar.scss

@@ -57,4 +57,4 @@
 
 .sidebar-link.current::before, .sidebar-link:hover::before {
   background: var(--color-anchor);
-}
+}

data/en/containersecurity/sidebar.yml

@@ -2,7 +2,7 @@
   pages:
   - title: Overview
 
-- title: ContainerSecurity
+- title: 🔒ContainerSecurity
   pages:
   - title: What is container?
   - title: Container vs Virtualization

data/en/docker/sidebar.yml

@@ -2,7 +2,7 @@
   pages:
   - title: Overview
 
-- title: Learn Docker
+- title: 🐳 Learn Docker
   pages:
   - title: Pre-requisit for this lab
   - title: Docker Hello World Example

data/en/k8s/sidebar.yml

@@ -2,7 +2,7 @@
   pages:
   - title: Overview
 
-- title: kubernetes
+- title: ⎈ kubernetes
   pages:
   - title: Pre-requisit for this lab
   - title: Basics of Pod

layouts/partials/scripts.html

@@ -1,8 +1,9 @@
 {{ $dropdown := resources.Get "js/component/dropdown.js" }}
 {{ $colorPreference := resources.Get "js/component/color-preference.js" }}
 {{ $articleNav := resources.Get "js/component/article-nav.js" }}
+{{ $sidebar := resources.Get "js/component/sidebar.js" }}
 {{ $toc := resources.Get "js/component/toc.js" }}
-{{ $baseJs := slice $dropdown $colorPreference $articleNav $toc | resources.Concat "js/base.js" | minify }}
+{{ $baseJs := slice $dropdown $colorPreference $articleNav $sidebar $toc | resources.Concat "js/base.js" | minify }}
 
 <script type="text/javascript" src="{{ $baseJs.RelPermalink }}"></script>
 
@@ -18,4 +19,11 @@
           apiKey: '{{ $algolia.apiKey }}',
       });
   </script>
-{{ end }}
+{{ end }}
+
+<script type="application/javascript">
+    if('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('/sw.js?{{ now.Format "2006-01-02" }}')
+            .catch(function(err) {console.error('ServiceWorker registration failed: ', err);});
+    }
+</script>

layouts/partials/sidebar.html

@@ -5,23 +5,37 @@
 
 <aside id="sidebar">
   <span class="btn-close"><i class="icon icon-close"></i></span>
-  {{- range $group := $data -}}
-    <strong class="sidebar-section">{{ $group.title }}</strong>
 
-    {{- range $page := $group.pages -}}
-      {{- $pageSlug := $page.title | urlize -}}
-      {{- $isActivePage := eq $urlPageSlug $pageSlug -}}
+  <div class="sticky">
+    {{- range $group := $data -}}
+      <strong class="sidebar-section">{{ $group.title }}</strong>
 
-      {{ if eq .Site.Language.Lang .Site.DefaultContentLanguage }}
-        {{ $href := printf "/%s/%s/" $.Section $pageSlug }}
-        <a class="sidebar-link {{ if $isActivePage }}current{{ end }}" href="{{ $href }}">{{ $page.title }}</a>
+      {{- range $index, $page := $group.pages -}}
+        {{- $pageSlug := $page.title | urlize -}}
+        {{- $isActivePage := eq $urlPageSlug $pageSlug -}}
 
-      {{ else }}
-        {{ $href := printf "/%s/%s/%s/" $.Site.Language.Lang $.Section $pageSlug }}
-        <a class="sidebar-link {{ if $isActivePage }}current{{ end }}" href="{{ $href }}">{{ $page.title }}</a>
+        {{ if eq .Site.Language.Lang .Site.DefaultContentLanguage }}
+          {{ $href := printf "/%s/%s/" $.Section $pageSlug }}
+          <a class="sidebar-link {{ if $isActivePage }}current{{ end }}" href="{{ $href }}">
+            {{ if and (eq $index 0) $group.replaceFirstPageTitle }}
+              {{ $group.replaceFirstPageTitle }}
+            {{ else }}
+              {{ $page.title }}
+            {{ end }}
+          </a>
 
-      {{ end}}
-    {{- end }}
+        {{ else }}
+          {{ $href := printf "/%s/%s/%s/" $.Site.Language.Lang $.Section $pageSlug }}
+          <a class="sidebar-link {{ if $isActivePage }}current{{ end }}" href="{{ $href }}">
+            {{ if and (eq $index 0) $group.replaceFirstPageTitle }}
+              {{ $group.replaceFirstPageTitle }}
+            {{ else }}
+              {{ $page.title }}
+            {{ end }}
+          </a>
+        {{ end}}
+      {{- end }}
 
-  {{- end }}
+    {{- end }}
+  </div>
 </aside>

layouts/partials/site-header.html

@@ -1,8 +1,7 @@
 <header id="site-header">
   <!-- brand -->
   <div id="site-header-brand">
-     <!--  <img src="/img/logos/KubeDaily-1.png"  width="24" height="24"> -->
-    <!-- <a href="/">{{ .Site.Title }}</a> -->
+    <a href="/">{{ .Site.Title }}</a>
   </div>
 
   <!-- controls -->

static/sw.js

@@ -0,0 +1,61 @@
+const cacheName = 'docura-{{ now.Format "2006-01-02" }}';
+const staticAssets = [
+    './',
+    './index.html',
+    './manifest.json',
+    './docs/**/*',
+    './font/*',
+    './img/icon/favicon.ico',
+    './img/icon/icon-16.png',
+    './img/icon/icon-32.png',
+    './img/icon/icon-180.png',
+    './img/icon/icon-192.png',
+    './img/icon/icon-512.png',
+    './img/icon/icon-vector.svg',
+    './img/icon/maskable-icon-192.png',
+    './img/icon/maskable-icon-512.png',
+    './js/base.min.js',
+    './js/component/docsearch.min.js',
+    './scss/base.css',
+    './scss/component/docsearch.css',
+    './scss/home.css',
+];
+
+self.addEventListener('install', async e => {
+    const cache = await caches.open(cacheName);
+    await cache.addAll(staticAssets);
+    return self.skipWaiting();
+});
+
+self.addEventListener('activate', e => {
+    self.clients.claim();
+});
+
+self.addEventListener('fetch', async e => {
+    const req = e.request;
+    const url = new URL(req.url);
+
+    if (url.origin === location.origin) {
+        e.respondWith(cacheFirst(req));
+    } else {
+        e.respondWith(networkFirst(req));
+    }
+});
+
+async function cacheFirst(req) {
+    const cache = await caches.open(cacheName);
+    const cached = await cache.match(req);
+    return cached || fetch(req);
+}
+
+async function networkFirst(req) {
+    const cache = await caches.open(cacheName);
+    try {
+        const fresh = await fetch(req);
+        cache.put(req, fresh.clone());
+        return fresh;
+    } catch (e) {
+        const cached = await cache.match(req);
+        return cached;
+    }
+}