add PWA support && tweak some pages

21 files changed, 642 insertions, 114 deletions

diff --git a/README.md b/README.md
index 45450b1..71b6466 100644
--- a/README.md
+++ b/README.md
@@ -18,6 +18,7 @@
   - archives pages
 - TOC sidebar
 - `prefers-color-scheme` media support
+- PWA support
 
 ## Install
 
@@ -76,6 +77,9 @@ theme = "hulga"
   # enable hero section's is-bold effect
   heroBold = true
 
+  # enable PWA, prepare your icons and DON'T forget to modify manifest.json
+  pwa = true
+
 # to enable different hightlight themes in light/dark mode 
 [markup]
   [markup.highlight]
diff --git a/archetypes/archives.md b/archetypes/archives.md
index bbfa7b0..3a0f057 100644
--- a/archetypes/archives.md
+++ b/archetypes/archives.md
@@ -1,5 +1,5 @@
 ---
-title: "Archives"
+title: {{ i18n "archives" }}
 description: "Archives"
 type: archives
 ---
diff --git a/assets/css/common.scss b/assets/css/common.scss
index 05e63b9..82ba77b 100644
--- a/assets/css/common.scss
+++ b/assets/css/common.scss
@@ -32,7 +32,9 @@
   border-color: $primary;
   color: $white;
 }
-
+a {
+  color: $primary;
+}
 /* fixed footer */
 body {
   display: flex;
@@ -49,9 +51,6 @@ body {
   position: relative;
   z-index: 1;
 }
-a {
-  color: $primary;
-}
 
 /* link */
 // u
@@ -101,6 +100,9 @@ a {
 .post-meta {
   opacity: 0.9;
 }
+.counter-tag {
+  border-left: 1px solid $white;
+}
 
 /* posts */
 .post-box {
diff --git a/assets/css/hulga-dark.scss b/assets/css/hulga-dark.scss
index 2594cfb..9263319 100644
--- a/assets/css/hulga-dark.scss
+++ b/assets/css/hulga-dark.scss
@@ -8,7 +8,7 @@
 // $archblue: #1793d0;
 
 {{ if .Site.Params.primaryColor }}
-$primary: {{ .Site.Params.primaryColor }};
+$primary: lighten({{ .Site.Params.primaryColor }}, 5);
 {{end}}
 
 // Import only what you need from Bulma
@@ -32,9 +32,12 @@ $pagination-border-color: $border;
 @import "../sass/dark/overrides";
 
 // dark override
-.sidebar {
-  height: 100%;
-}
 .footer {
   background: #282f2f;
 }
+.counter-tag {
+  border-left: 1px solid #282f2f;
+}
+.tag:not(body) {
+  background-color: rgba($black-bis, 0.2);
+}
\ No newline at end of file
diff --git a/assets/js/pwa.js b/assets/js/pwa.js
new file mode 100644
index 0000000..74b3c68
--- /dev/null
+++ b/assets/js/pwa.js
@@ -0,0 +1,39 @@
+{{ $swfile := resources.Get "/sw.js" }}
+{{ $sw := $swfile | resources.Minify }}
+if('serviceWorker' in navigator) {
+    const PREFETCH = true;
+    const PREFETCH_LINK_RELS = ['index','next', 'prev', 'prefetch'];
+    function prefetchCache() {
+        if(navigator.serviceWorker.controller) {
+            let links = document.querySelectorAll(
+                PREFETCH_LINK_RELS.map((rel) => {
+                    return 'link[rel='+rel+']';
+                }).join(',')
+            );
+            if(links.length > 0) {
+                Array.from(links)
+                    .map((link) => {
+                        let href = link.getAttribute('href');
+                        navigator.serviceWorker.controller.postMessage({
+                            action : 'cache',
+                            url : href,
+                        });
+                    });
+            }
+        }
+    }
+
+    navigator.serviceWorker
+        .register('{{ $sw.Permalink | relURL }}', { scope: '/' })
+        .then(() => {
+            console.log('Service Worker Registered');
+        });
+
+    navigator.serviceWorker
+        .ready
+        .then(() => {
+            if(PREFETCH) {
+                prefetchCache();
+            }
+        });
+}
\ No newline at end of file
diff --git a/assets/sw.js b/assets/sw.js
new file mode 100644
index 0000000..042741d
--- /dev/null
+++ b/assets/sw.js
@@ -0,0 +1,388 @@
+const CACHE_VERSION = 1;
+
+const BASE_CACHE_FILES = [
+  '/css/hulga.min.css',
+  '/css/toc.min.css',
+  '/css/hulga-dark.min.css',
+  '/css/katex.min.css',
+  '/css/monokai.css',
+  '/css/monokailight.css',
+  '/js/tocbot.min.js',
+  '/js/anchor.min.js',
+  '/js/auto-render.min.js',
+  '/js/katex.min.js',
+  '/js/vanilla-back-to-top.min.js',
+  '/manifest.json',
+  '/favicon.ico',
+];
+
+const OFFLINE_CACHE_FILES = [
+  '/index.html'
+];
+
+const NOT_FOUND_CACHE_FILES = [
+  '/404.html',
+];
+
+const OFFLINE_PAGE = '/index.html';
+const NOT_FOUND_PAGE = '/404.html';
+
+const CACHE_VERSIONS = {
+  assets: 'assets-v' + CACHE_VERSION,
+  content: 'content-v' + CACHE_VERSION,
+  offline: 'offline-v' + CACHE_VERSION,
+  notFound: '404-v' + CACHE_VERSION,
+};
+
+// Define MAX_TTL's in SECONDS for specific file extensions
+const MAX_TTL = {
+  '/': 3600,
+  html: 3600,
+  json: 86400,
+  js: 86400,
+  css: 86400,
+};
+
+const CACHE_BLACKLIST = [
+  (str) => {
+    return !str.startsWith('https://blog.zilch40.wang');
+  },
+];
+
+const SUPPORTED_METHODS = [
+  'GET',
+];
+
+/**
+ * isBlackListed
+ * @param {string} url
+ * @returns {boolean}
+ */
+function isBlacklisted(url) {
+  return (CACHE_BLACKLIST.length > 0) ? !CACHE_BLACKLIST.filter((rule) => {
+    if (typeof rule === 'function') {
+      return !rule(url);
+    } else {
+      return false;
+    }
+  }).length : false
+}
+
+/**
+ * getFileExtension
+ * @param {string} url
+ * @returns {string}
+ */
+function getFileExtension(url) {
+  let extension = url.split('.').reverse()[0].split('?')[0];
+  return (extension.endsWith('/')) ? '/' : extension;
+}
+
+/**
+ * getTTL
+ * @param {string} url
+ */
+function getTTL(url) {
+  if (typeof url === 'string') {
+    let extension = getFileExtension(url);
+    if (typeof MAX_TTL[extension] === 'number') {
+      return MAX_TTL[extension];
+    } else {
+      return null;
+    }
+  } else {
+    return null;
+  }
+}
+
+/**
+ * installServiceWorker
+ * @returns {Promise}
+ */
+function installServiceWorker() {
+  return Promise.all(
+    [
+      caches.open(CACHE_VERSIONS.assets)
+        .then(
+          (cache) => {
+            return cache.addAll(BASE_CACHE_FILES);
+          }
+        ),
+      caches.open(CACHE_VERSIONS.offline)
+        .then(
+          (cache) => {
+            return cache.addAll(OFFLINE_CACHE_FILES);
+          }
+        ),
+      caches.open(CACHE_VERSIONS.notFound)
+        .then(
+          (cache) => {
+            return cache.addAll(NOT_FOUND_CACHE_FILES);
+          }
+        )
+    ]
+  )
+    .then(() => {
+      return self.skipWaiting();
+    });
+}
+
+/**
+ * cleanupLegacyCache
+ * @returns {Promise}
+ */
+function cleanupLegacyCache() {
+
+  let currentCaches = Object.keys(CACHE_VERSIONS)
+    .map(
+      (key) => {
+        return CACHE_VERSIONS[key];
+      }
+    );
+
+  return new Promise(
+    (resolve, reject) => {
+
+      caches.keys()
+        .then(
+          (keys) => {
+            return legacyKeys = keys.filter(
+              (key) => {
+                return !~currentCaches.indexOf(key);
+              }
+            );
+          }
+        )
+        .then(
+          (legacy) => {
+            if (legacy.length) {
+              Promise.all(
+                legacy.map(
+                  (legacyKey) => {
+                    return caches.delete(legacyKey)
+                  }
+                )
+              )
+                .then(
+                  () => {
+                    resolve()
+                  }
+                )
+                .catch(
+                  (err) => {
+                    reject(err);
+                  }
+                );
+            } else {
+              resolve();
+            }
+          }
+        )
+        .catch(
+          () => {
+            reject();
+          }
+        );
+
+    }
+  );
+}
+
+function precacheUrl(url) {
+  if (!isBlacklisted(url)) {
+    caches.open(CACHE_VERSIONS.content)
+      .then((cache) => {
+        cache.match(url)
+          .then((response) => {
+            if (!response) {
+              return fetch(url)
+            } else {
+              // already in cache, nothing to do.
+              return null
+            }
+          })
+          .then((response) => {
+            if (response) {
+              return cache.put(url, response.clone());
+            } else {
+              return null;
+            }
+          });
+      })
+  }
+}
+
+
+
+self.addEventListener(
+  'install', event => {
+    event.waitUntil(
+      Promise.all([
+        installServiceWorker(),
+        self.skipWaiting(),
+      ])
+    );
+  }
+);
+
+// The activate handler takes care of cleaning up old caches.
+self.addEventListener(
+  'activate', event => {
+    event.waitUntil(
+      Promise.all(
+        [
+          cleanupLegacyCache(),
+          self.clients.claim(),
+          self.skipWaiting(),
+        ]
+      )
+        .catch(
+          (err) => {
+            event.skipWaiting();
+          }
+        )
+    );
+  }
+);
+
+self.addEventListener(
+  'fetch', event => {
+
+    event.respondWith(
+      caches.open(CACHE_VERSIONS.content)
+        .then(
+          (cache) => {
+
+            return cache.match(event.request)
+              .then(
+                (response) => {
+
+                  if (response) {
+
+                    let headers = response.headers.entries();
+                    let date = null;
+
+                    for (let pair of headers) {
+                      if (pair[0] === 'date') {
+                        date = new Date(pair[1]);
+                      }
+                    }
+
+                    if (date) {
+                      let age = parseInt((new Date().getTime() - date.getTime()) / 1000);
+                      let ttl = getTTL(event.request.url);
+
+                      if (ttl && age > ttl) {
+
+                        return new Promise(
+                          (resolve) => {
+
+                            return fetch(event.request.clone())
+                              .then(
+                                (updatedResponse) => {
+                                  if (updatedResponse) {
+                                    cache.put(event.request, updatedResponse.clone());
+                                    resolve(updatedResponse);
+                                  } else {
+                                    resolve(response)
+                                  }
+                                }
+                              )
+                              .catch(
+                                () => {
+                                  resolve(response);
+                                }
+                              );
+
+                          }
+                        )
+                          .catch(
+                            (err) => {
+                              return response;
+                            }
+                          );
+                      } else {
+                        return response;
+                      }
+
+                    } else {
+                      return response;
+                    }
+
+                  } else {
+                    return null;
+                  }
+                }
+              )
+              .then(
+                (response) => {
+                  if (response) {
+                    return response;
+                  } else {
+                    return fetch(event.request.clone())
+                      .then(
+                        (response) => {
+
+                          if (response.status < 400) {
+                            if (~SUPPORTED_METHODS.indexOf(event.request.method) && !isBlacklisted(event.request.url)) {
+                              cache.put(event.request, response.clone());
+                            }
+                            return response;
+                          } else {
+                            return caches.open(CACHE_VERSIONS.notFound).then((cache) => {
+                              return cache.match(NOT_FOUND_PAGE);
+                            })
+                          }
+                        }
+                      )
+                      .then((response) => {
+                        if (response) {
+                          return response;
+                        }
+                      })
+                      .catch(
+                        () => {
+
+                          return caches.open(CACHE_VERSIONS.offline)
+                            .then(
+                              (offlineCache) => {
+                                return offlineCache.match(OFFLINE_PAGE)
+                              }
+                            )
+
+                        }
+                      );
+                  }
+                }
+              )
+              .catch(
+                (error) => {
+                  console.error('  Error in fetch handler:', error);
+                  throw error;
+                }
+              );
+          }
+        )
+    );
+
+  }
+);
+
+
+self.addEventListener('message', (event) => {
+
+  if (
+    typeof event.data === 'object' &&
+    typeof event.data.action === 'string'
+  ) {
+    switch (event.data.action) {
+      case 'cache':
+        precacheUrl(event.data.url);
+        break;
+      default:
+        console.log('Unknown action: ' + event.data.action);
+        break;
+    }
+  }
+
+});
diff --git a/i18n/en.toml b/i18n/en.toml
index c6d1075..788bc1b 100644
--- a/i18n/en.toml
+++ b/i18n/en.toml
@@ -10,5 +10,8 @@ other = "Previous"
 [next_page]
 other = "Next"
 
+[archives_count]
+other = "There are {{ .Count }} articles in this blog"
+
 [archives]
-other = "There are {{ .Count }} articles in this blog"
\ No newline at end of file
+other = "Archives"
diff --git a/i18n/zh-cn.toml b/i18n/zh-cn.toml
index 551b33b..9afedbe 100644
--- a/i18n/zh-cn.toml
+++ b/i18n/zh-cn.toml
@@ -10,5 +10,8 @@ other = "上一页"
 [next_page]
 other = "下一页"
 
+[archives_count]
+other = "本博客共 {{ .Count }} 篇博文"
+
 [archives]
-other = "本博客共 {{ .Count }} 篇博文"
\ No newline at end of file
+other = "归档"
\ No newline at end of file
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index ea5525d..4a3a564 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -1,5 +1,5 @@
-<!DOCTYPE html>
-<html>
+<!DOCTYPE html> 
+<html {{if .Site.LanguageCode}}lang="{{.Site.LanguageCode}}"{{end}}>
 {{- partial "head.html" . -}}
 
 <body>
diff --git a/layouts/_default/taxonomy.html b/layouts/_default/taxonomy.html
index 5344be9..23de21f 100644
--- a/layouts/_default/taxonomy.html
+++ b/layouts/_default/taxonomy.html
@@ -8,7 +8,7 @@
         {{ if eq .Data.Singular "category" }}
         <div class="card">
           <header class="card-header is-primary">
-            <p class="card-header-title">
+            <p class="card-header-title content is-medium">
               {{ i18n "categories" }}
             </p>
           </header>
@@ -31,7 +31,7 @@
         {{ if eq .Data.Singular "tag" }}
         <div class="card">
           <header class="card-header">
-            <p class="card-header-title">
+            <p class="card-header-title content is-medium">
               {{ i18n "tags" }}
             </p>
           </header>
diff --git a/layouts/archives/single.html b/layouts/archives/single.html
index f19ccac..728e628 100644
--- a/layouts/archives/single.html
+++ b/layouts/archives/single.html
@@ -1,15 +1,17 @@
 {{ define "main" }}
-{{ partial "header.html" . }}
+{{ partial "post-header.html" . }}
 <section class="section">
   <div class="container content">
     <div class="columns">
       <div class="column is-8 is-offset-2">
-        {{ $count := len (where (where .Site.Pages "Type" "post") "Kind" "page") }}
-        <h2 class="has-text-centered">{{ i18n "archives" (dict "Count" $count) }}</h2>
         <div class="post-archive">
           {{ range (where (where .Site.Pages "Type" "post") "Kind" "page").GroupByDate "2006" }}
           <div class="box container">
-            <h3>{{ .Key }}</h3>
+            <h3>{{ .Key }}
+            <span class="tag is-medium is-pulled-right">
+              {{ len .Pages }}
+            </span>
+            </h3>
             <ul class="listing">
               {{ range .Pages }}
               <li>
diff --git a/layouts/index.html b/layouts/index.html
index ca7abab..62f5e5d 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1 +1,4 @@
-{{ with .GetPage "/post" }}{{.Render}}{{end}}
+{{ define "main" }}
+{{- partial "header.html" . -}}
+{{- partial "posts.html" . -}}
+{{ end }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index b698406..7df832c 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -10,4 +10,7 @@
     </p>
   </div>
 </footer>
+{{ if .Site.Params.pwa }}
+{{ partial "pwa.html" . }}
+{{ end}}
 {{ template "_internal/google_analytics_async.html" . }}
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index de32ad1..4e9aac9 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -1,51 +1,72 @@
 <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    {{ if .IsHome -}}
-      <title>{{ .Site.Title }} | {{ .Site.Params.subtitle}}</title>
-      <meta property="og:title" content="{{ .Site.Title }} | {{ .Site.Params.subtitle}}">
-      <meta property="og:type" content="website">
-      {{ if .Site.Params.keywords }}
-      <meta name="Keywords" content="{{.Site.Params.keywords}}">
-    {{ end }}
-    {{ if .Site.Params.keywords }}
-      <meta name="description" content="{{ .Site.Params.description }}">
-      {{ end }}
-      {{- else -}}
-      <title>{{ .Title }} | {{ .Site.Title }}</title>
-      <meta property="og:title" content="{{ .Title }} - {{ .Site.Title }}">
-      <meta property="og:type" content="article">
-      {{ with .Params.date }}
-      <meta property="article:published_time" content="{{ .Format "2006-01-02T15:04:05+08:00" }}">
-      {{ end }}
-      {{ with .Params.lastmod }}
-      <meta property="article:modified_time" content="{{ .Format "2006-01-02T15:04:05+08:00" }}">
-      {{ end }}
-      <meta name="Keywords" content="{{ if .Keywords }}{{ .Keywords }}{{ else }}{{ .Site.Params.keywords }}{{ end }}">
-      <meta name="description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Title }}{{ end }}">
-      {{ if .Params.author -}}
-      <meta name="author" content="{{ .Params.author }}">
-      {{- end }}
-    {{- end }}
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
+  <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
+  <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
+  <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
+  <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
+  <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
+  <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
+  <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
+  <link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
+  {{- if .Site.Params.primaryColor -}}
+  <meta name="msapplication-TileColor" content="{{.Site.Params.primaryColor}}">
+  <meta name="theme-color" content="{{.Site.Params.primaryColor}}">
+  {{- end -}}
+  {{ if .IsHome -}}
+  <title>{{ .Site.Title }} | {{ .Site.Params.subtitle}}</title>
+  <meta property="og:title" content="{{ .Site.Title }} | {{ .Site.Params.subtitle }}">
+  <meta property="og:type" content="website">
+  {{ if .Site.Params.keywords }}
+  <meta name="Keywords" content="{{.Site.Params.keywords}}">
+  {{ end }}
+  {{ if .Site.Params.keywords }}
+  <meta name="description" content="{{ .Site.Params.description }}">
+  {{ end }}
+  {{- else -}}
+  <title>{{ .Title }} | {{ .Site.Title }}</title>
+  <meta property="og:title" content="{{ .Title }} - {{ .Site.Title }}">
+  <meta property="og:type" content="article">
+  {{ with .Params.date }}
+  <meta property="article:published_time" content="{{ .Format "2006-01-02T15:04:05+08:00" }}">
+  {{ end }}
+  {{ with .Params.lastmod }}
+  <meta property="article:modified_time" content="{{ .Format "2006-01-02T15:04:05+08:00" }}">
+  {{ end }}
+  <meta name="Keywords" content="{{ if .Keywords }}{{ .Keywords }}{{ else }}{{ .Site.Params.keywords }}{{ end }}">
+  <meta name="description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Title }}{{ end }}">
+  {{ if .Params.author -}}
+  <meta name="author" content="{{ .Params.author }}">
+  {{- end }}
+  {{- end }}
 
-    {{ $options := (dict "outputStyle" "compressed" "includePaths" (slice "sass")) }}
-    {{ $lightScss := resources.Get "css/hulga.scss" }}
-    {{ $darkScss := resources.Get "css/hulga-dark.scss" }}
-    {{ if .Site.Params.postcss }}
-      {{ $light := $lightScss | resources.ExecuteAsTemplate "css/hulga.scss" . | resources.ToCSS $options | postCSS | resources.Minify }}
-      <link rel="stylesheet" type="text/css" href="{{ $light.Permalink | relURL }}">
-      {{ if .Site.Params.darkMedia }}
-      {{ $dark := $darkScss | resources.ExecuteAsTemplate "css/hulga-dark.scss" . | resources.ToCSS $options | postCSS | resources.Minify }}
-      <link rel="stylesheet" type="text/css" href="{{ $dark.Permalink | relURL }}" media="(prefers-color-scheme: dark)">
-      {{ end }}
-    {{ else }}
-      {{ $light := $lightScss | resources.ExecuteAsTemplate "css/hulga.scss" . | resources.ToCSS $options }}
-      <link rel="stylesheet" type="text/css" href="{{ $light.Permalink | relURL }}">
-      {{ if .Site.Params.darkMedia }}
-      {{ $dark := $darkScss | resources.ExecuteAsTemplate "css/hulga-dark.scss" . | resources.ToCSS $options }}
-      <link rel="stylesheet" type="text/css" href="{{ $dark.Permalink | relURL }}" media="(prefers-color-scheme: dark)">
-      {{ end }}
-    {{ end }}
+  {{ $options := (dict "outputStyle" "compressed" "includePaths" (slice "sass")) }}
+  {{ $lightScss := resources.Get "css/hulga.scss" }}
+  {{ $darkScss := resources.Get "css/hulga-dark.scss" }}
+  {{ if .Site.Params.postcss }}
+  {{ $light := $lightScss | resources.ExecuteAsTemplate "css/hulga.scss" . | resources.ToCSS $options | postCSS | resources.Minify }}
+  <link rel="stylesheet" type="text/css" href="{{ $light.Permalink | relURL }}">
+  {{ if .Site.Params.darkMedia }}
+  {{ $dark := $darkScss | resources.ExecuteAsTemplate "css/hulga-dark.scss" . | resources.ToCSS $options | postCSS | resources.Minify }}
+  <link rel="stylesheet" type="text/css" href="{{ $dark.Permalink | relURL }}" media="(prefers-color-scheme: dark)">
+  {{ end }}
+  {{ else }}
+  {{ $light := $lightScss | resources.ExecuteAsTemplate "css/hulga.scss" . | resources.ToCSS $options | resources.Minify }}
+  <link rel="stylesheet" type="text/css" href="{{ $light.Permalink | relURL }}">
+  {{ if .Site.Params.darkMedia }}
+  {{ $dark := $darkScss | resources.ExecuteAsTemplate "css/hulga-dark.scss" . | resources.ToCSS $options | resources.Minify }}
+  <link rel="stylesheet" type="text/css" href="{{ $dark.Permalink | relURL }}" media="(prefers-color-scheme: dark)">
+  {{ end }}
+  {{ end }}
+  {{ if .Site.Params.pwa }}
+  <link rel="manifest" href="/manifest.json">
+  {{ end }}
 
-</head>
+</head>
\ No newline at end of file
diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html
index cde1b5e..40337d1 100644
--- a/layouts/partials/nav.html
+++ b/layouts/partials/nav.html
@@ -1,8 +1,8 @@
 <nav class="navbar is-primary">
   <div class="container">
     <div class="navbar-brand">
-      <a class="navbar-item" href="/">
-        {{.Site.Title}}
+      <a class="navbar-item {{if ne .Kind "page"}}fake-text{{end}}" href="/">
+        {{.Site.Title }}
       </a>
       <a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
         <span aria-hidden="true"></span>
diff --git a/layouts/partials/paginator.html b/layouts/partials/paginator.html
index f311349..934596d 100644
--- a/layouts/partials/paginator.html
+++ b/layouts/partials/paginator.html
@@ -1,7 +1,7 @@
 {{ $pag := .Paginate (where .Data.Pages "Type" "post") }}
 {{ if gt $pag.TotalPages 1 -}}
 <nav class="pagination is-centered" role="navigation" aria-label="pagination">
-  <a class="pagination-previous" {{ if $pag.HasPrev }} href="{{ $pag.Prev.URL }}" {{ else }} disabled {{ end }}>
+  <a class="pagination-previous" {{ if $pag.HasPrev }} href="{{ $pag.Prev.URL }}" {{ else }} href="#" disabled {{ end }}>
     {{ i18n "prev_page"}}
   </a>
   <ul class="pagination-list">
@@ -29,7 +29,7 @@
       {{- end -}}
     {{- end }}
   </ul>
-  <a class="pagination-next" {{ if $pag.HasNext }} href="{{ $pag.Next.URL }}" {{ else }} disabled {{ end }}>
+  <a class="pagination-next" {{ if $pag.HasNext }} href="{{ $pag.Next.URL }}" {{ else }} href="#" disabled {{ end }}>
     {{ i18n "next_page"}}
   </a>
 {{ end }}
diff --git a/layouts/partials/post-header.html b/layouts/partials/post-header.html
new file mode 100644
index 0000000..d156c78
--- /dev/null
+++ b/layouts/partials/post-header.html
@@ -0,0 +1,37 @@
+<section class="hero is-primary shadow-hero {{ if .Site.Params.heroBold}} is-bold {{ end }}">
+  <div class="hero-head">
+    {{ partial "nav.html" . }}
+  </div>
+  <div class="hero-body">
+    <header class="container has-text-centered">
+      <h1 class="title post-title">
+        {{ .Title }}
+      </h1>
+      <h2 class="subtitle">
+        {{- if isset .Params "date" -}}
+        <time class="post-meta">{{ .Date.Format "2006/01/02" }}</time>
+        {{- end -}}
+        {{ with .Params.Categories }} ・
+          {{ range .}}
+            <span class="post-tag post-meta">
+              <a href="{{ "/categories/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>
+            </span>
+          {{ end }}
+        {{ end }}
+        {{- if eq .Type "archives" -}}
+        {{- $count := len (where (where .Site.Pages "Type" "post") "Kind" "page") -}}
+        {{ i18n "archives_count" (dict "Count" $count) }}
+        {{- end -}}
+      </h2>
+      {{ with .Params.tags }}
+      <div class="tagbox post-meta">
+        {{ range . }}
+        <span class="post-tag">
+          <a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">#{{ . }}</a>
+        </span>
+        {{ end }}
+      </div>
+      {{ end }}
+    </header>
+  </div>
+</section>
\ No newline at end of file
diff --git a/layouts/partials/post.html b/layouts/partials/post.html
index 80cf98d..5a8c2e6 100644
--- a/layouts/partials/post.html
+++ b/layouts/partials/post.html
@@ -1,48 +1,11 @@
-<section class="hero is-primary shadow-hero {{ if .Site.Params.heroBold}} is-bold {{ end }}">
-  <div class="hero-head">
-    {{ partial "nav.html" . }}
-  </div>
-  <div class="hero-body">
-    {{ if or .Params.toc (and .Site.Params.toc (ne .Params.toc false)) }}
-    <header class="container">
-    {{ else }}
-    <header class="container has-text-centered">
-    {{ end }}
-      <h1 class="title post-title">
-        {{ .Title }}
-      </h1>
-      <h2 class="subtitle">
-        {{- if isset .Params "date" -}}
-        <time class="post-meta">{{ .Date.Format "2006/01/02" }}</time>
-        {{- end -}}
-        {{ with .Params.Categories }} ・
-        {{ range .}}
-        <span class="post-tag post-meta">
-          <a href="{{ "/categories/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>
-        </span>
-        {{ end }}
-        {{ end }}
-      </h2>
-      {{ with .Params.tags }}
-      <div class="tagbox post-meta">
-        {{ range . }}
-        <span class="post-tag">
-          <a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">#{{ . }}</a>
-        </span>
-        {{ end }}
-        <!-- <span class="post-tag">#Hello</span><span class="post-tag">#Hello</span> -->
-      </div>
-      {{ end }}
-    </header>
-  </div>
-</section>
+{{ partial "post-header.html" . }}
 <section class="section">
   <div class="container">
     <div class="columns">
       {{ if or .Params.toc (and .Site.Params.toc (ne .Params.toc false)) }}
-      <div class="column is-three-quarters">
+      <div class="column is-1 is-hidden-mobile"></div>
+      <div class="column is-8">
       {{ else }}
-      <!-- <div class="column is-1 is-hidden-mobile"></div> -->
       <div class="column is-three-fifths is-offset-one-fifth">
       {{ end }}
         <article class="content" id="post-content">
diff --git a/layouts/partials/posts.html b/layouts/partials/posts.html
index 6b3aed5..e9bf35d 100644
--- a/layouts/partials/posts.html
+++ b/layouts/partials/posts.html
@@ -5,7 +5,7 @@
         <div class="columns">
           <div class="column is-8">
             <div class="post-lists">
-              {{ $paginator := .Paginate (where .Data.Pages "Type" "post") }}
+              {{ $paginator := .Paginate (where (where .Site.Pages "Type" "post") "Kind" "page") }}
               {{ range $paginator.Pages }}
               <div class="box post-box">
                 {{ with .Params.Tags }}
@@ -74,7 +74,7 @@
                   <div class="control">
                     <div class="tags has-addons">
                       <a class="tag" href="{{ "/tags/" | relLangURL }}{{ .Name | urlize }}/">{{ .Name }}</a>
-                      <span class="tag">
+                      <span class="tag counter-tag">
                         {{ .Count }}
                       </span>
                     </div>
diff --git a/layouts/partials/pwa.html b/layouts/partials/pwa.html
new file mode 100644
index 0000000..0884273
--- /dev/null
+++ b/layouts/partials/pwa.html
@@ -0,0 +1,3 @@
+{{ $pwafile := resources.Get "js/pwa.js" }}
+{{ $pwa := $pwafile | resources.ExecuteAsTemplate "js/pwa.js" . |  resources.Minify }}
+<script src="{{ $pwa.Permalink | relURL }}"></script>
diff --git a/static/manifest.json b/static/manifest.json
new file mode 100644
index 0000000..59d1780
--- /dev/null
+++ b/static/manifest.json
@@ -0,0 +1,54 @@
+{
+  "name": "zilcH40's Blog",
+  "short_name": "zilcH40's Blog",
+  "description": "Just for fun!",
+  "icons": [
+      {
+       "src": "/android-icon-36x36.png",
+       "sizes": "36x36",
+       "type": "image/png",
+       "density": "0.75"
+      },
+      {
+       "src": "/android-icon-48x48.png",
+       "sizes": "48x48",
+       "type": "image/png",
+       "density": "1.0"
+      },
+      {
+       "src": "/android-icon-72x72.png",
+       "sizes": "72x72",
+       "type": "image/png",
+       "density": "1.5"
+      },
+      {
+       "src": "/android-icon-96x96.png",
+       "sizes": "96x96",
+       "type": "image/png",
+       "density": "2.0"
+      },
+      {
+       "src": "/android-icon-144x144.png",
+       "sizes": "144x144",
+       "type": "image/png",
+       "density": "3.0"
+      },
+      {
+       "src": "/android-icon-192x192.png",
+       "sizes": "192x192",
+       "type": "image/png",
+       "density": "4.0",
+       "purpose": "any maskable"
+      },
+      {
+       "src": "/splash-512x512.png",
+       "sizes": "512x512",
+       "type": "image/png"
+      }
+  ],
+  "start_url": "/",
+  "display": "standalone",
+  "orientation": "portrait",
+  "background_color": "#1793d0",
+  "theme_color": "#1793d0"
+}
\ No newline at end of file