use history.pushState & adapt comments

README.md

@@ -46,9 +46,11 @@ for silent 1.0, check [this](https://github.com/fritx/silent/tree/v1) out
 
 <img width="500" src="https://fritx.github.io/silent/p/projects/silent_2.0/WX20220927-173925.png">
 
-### Security & Stability
+### Security & Stability & Performance
 
 - [x] responsive design
+- [x] prefer history.pushState api
+- [ ] fallback on browser compatibility break
 - [ ] IE 6+ support (needs polyfill, etc)
 
 <img width="160" src="https://fritx.github.io/silent/p/2016/08/屏幕快照 2016-08-02 下午6.35.12.png">
@@ -93,6 +95,7 @@ Status: no IE
 - [ ] no IE https://caniuse.com/?search=arr%20includes
 - [ ] no IE https://caniuse.com/?search=str%20includes
 - [ ] IE10+ https://caniuse.com/?search=console
+- [ ] IE10+ https://caniuse.com/?search=pushstate
 - [ ] IE9+ https://caniuse.com/?search=object.keys
 - [ ] IE9+ https://caniuse.com/?search=arr%20foreach
 - [ ] IE9+ https://caniuse.com/?search=querySelector

blog/index.html

@@ -71,7 +71,10 @@
   gtag('js', new Date());
   gtag('config', 'G-ZY8VWXQSC8');
 </script> -->
+
 <!-- opt.2 baidu -->
+<!-- 注意“启用单页应用数据统计” 管理后台 > 使用设置 > 规则设置 > 选中某个站点 -> 单页设置 -->
+<!-- https://tongji.baidu.com/web/help/article?id=324&type=0 -->
 <script>
 var _hmt = _hmt || [];
 (function() {

blog/p/projects/silent_2.0/README.md

@@ -46,9 +46,11 @@ for silent 1.0, check [this](../silent/) out
 
 <img width="500" src="../../projects/silent_2.0/WX20220927-173925.png">
 
-### Security & Stability
+### Security & Stability & Performance
 
 - [x] responsive design
+- [x] prefer history.pushState api
+- [ ] fallback on browser compatibility break
 - [ ] IE 6+ support (needs polyfill, etc)
 
 <img width="160" src="../../2016/08/屏幕快照 2016-08-02 下午6.35.12.png">
@@ -93,6 +95,7 @@ Status: no IE
 - [ ] no IE https://caniuse.com/?search=arr%20includes
 - [ ] no IE https://caniuse.com/?search=str%20includes
 - [ ] IE10+ https://caniuse.com/?search=console
+- [ ] IE10+ https://caniuse.com/?search=pushstate
 - [ ] IE9+ https://caniuse.com/?search=object.keys
 - [ ] IE9+ https://caniuse.com/?search=arr%20foreach
 - [ ] IE9+ https://caniuse.com/?search=querySelector

blog/vendor/blog.js

@@ -9,6 +9,23 @@
   var pageExt, pageBase
   var sidebarPage, defaultPage
   var mainPage, mainTitle
+  var mainPageId
+
+  function loadMain(search) {
+    var seg = search.slice(1).replace(/&.*$/g, '')
+
+    // fucking wechat again
+    // like /?graduation-thanks=
+    // or /?graduation-thanks=/ (SublimeServer)
+    seg = seg.replace(/=[\/\\]*$/, '')
+
+    // fucking wechat pending
+    // like /?from=singlemessage&isappinstalled=0
+    if (/=/.test(seg)) seg = null
+
+    mainPage = resolve(seg || defaultPage)
+    load('#main-page', mainPage, true)
+  }
 
   function load(sel, stack, isMain, callback) {
     if (typeof stack === 'string') {
@@ -19,20 +36,27 @@
       }
     }
 
-    var page = stack.shift()
+    var pageId = stack.shift()
     isMain = isMain || false
+    if (isMain) mainPageId = pageId
 
-    var url = pageBase + page + pageExt
+    var url = pageBase + pageId + pageExt
     $.ajax({
       url: url,
       error: function (err) {
+        if (isMain && pageId !== mainPageId) return
+
         if (stack.length) {
           return load(sel, stack, isMain, callback)
         }
         onNotFound(err)
       },
       success: function (data) {
+        if (isMain && pageId !== mainPageId) return
+
         render(data, function (err, html) {
+          if (isMain && pageId !== mainPageId) return
+
           if (err) {
             return console.error('render err', err)
           }
@@ -49,6 +73,7 @@
   }
 
   function postProcess($el, url) {
+    window.scrollTo(0, 0)
     var dir = url.replace(new RegExp('[^\\/]*$', 'g'), '')
 
     $el.find('[src]').each(function () {
@@ -268,13 +293,20 @@
 
   // opt.1 disqus
   // https://disqus.com/admin/install/platforms/universalcode/
+  var disqusInitiated = false
   function disqus(shortName, title, id) {
     window.disqus_shortname = shortName
     window.disqus_title = title
     window.disqus_identifier = id
     window.disqus_url = location.href
+    // Using Disqus on AJAX sites
+    // https://help.disqus.com/en/articles/1717163-using-disqus-on-ajax-sites
+    if (disqusInitiated) {
+      if (window.DISQUS) DISQUS.reset({ reload: true })
+      return
+    }
+    disqusInitiated = true
     $('<div>').attr({ id: 'disqus_thread' }).appendTo('#comment-system')
-
     // adding setTimeout to prevent favicon from keeping loading instead of showing
     // (disqus.com gets blocked when it's in GFW)
     setTimeout(function () {
@@ -286,7 +318,9 @@
   }
   // opt.2 cusdis
   // https://cusdis.com/doc#/advanced/sdk?id=js-sdk
+  // TODO: adapt for SPA
   function cusdis(host, appId, title, id) {
+    $('#comment-system').empty()
     $('<div>').attr({
       id: 'cusdis_thread',
       'data-host': host,
@@ -300,9 +334,15 @@
       async: true
     }).appendTo('head')
   }
-  // opt.2 giscus
+  // opt.3 giscus
   // https://giscus.app/
+  var giscusInitiated = false
   function giscus(attrs) {
+    if (giscusInitiated) {
+      giscusSendMessage({ setConfig: { term: document.title } })
+      return
+    }
+    giscusInitiated = true
     $('<div>').addClass('giscus').appendTo('#comment-system')
     var dest = {
       src: 'https://giscus.app/client.js',
@@ -321,6 +361,13 @@
     Object.keys(dest).forEach(function (k) { script.setAttribute(k, dest[k]) })
     document.body.appendChild(script)
   }
+  // dynamically setConfig
+  // https://github.com/giscus/giscus/blob/main/ADVANCED-USAGE.md#parent-to-giscus-message-events
+  function giscusSendMessage(message) {
+    const iframe = document.querySelector('iframe.giscus-frame');
+    if (!iframe) return;
+    iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
+  }
 
   config()
   start()
@@ -356,20 +403,28 @@
   }
 
   function start() {
-    var seg = location.search.slice(1).replace(/&.*$/g, '')
-
-    // fucking wechat again
-    // like /?graduation-thanks=
-    // or /?graduation-thanks=/ (SublimeServer)
-    seg = seg.replace(/=[\/\\]*$/, '')
-
-    // fucking wechat pending
-    // like /?from=singlemessage&isappinstalled=0
-    if (/=/.test(seg)) seg = null
-    mainPage = resolve(seg || defaultPage)
-
+    window.addEventListener('popstate', function () {
+      loadMain(location.search)
+    })
+    $('#contents').delegate('[href]', 'click', function (e) {
+      var $a = $(e.target)
+      var url = $a.attr('href') || ''
+      var target = $a.attr('target')
+      var isTargetSelf = [undefined, '_self'].includes(target)
+      var isSilentInternal = url === '.' || url.startsWith('?')
+      var isSameUrl = url === location.search || url === '' || url === '.' && !location.search
+      if (isTargetSelf && isSilentInternal) {
+        e.preventDefault()
+        if (isSameUrl) {
+          window.scrollTo(0, 0)
+        } else {
+          history.pushState({}, '', url)
+          loadMain(url)
+        }
+      }
+    })
     load('#sidebar-page', sidebarPage)
-    load('#main-page', mainPage, true)
+    loadMain(location.search)
   }
 
   function config() {