fix ?xx#xx with pjax; support anchor-positioning; misc

README.md

@@ -6,7 +6,7 @@
 
 > Be a silent, static blog
 
-for silent 1.0, check [this](https://github.com/fritx/silent/tree/v1) out
+for silent 1.0, check [this](https://github.com/fritx/silent/tree/1x) out
 
 ## Features
 
@@ -36,8 +36,9 @@ for silent 1.0, check [this](https://github.com/fritx/silent/tree/v1) out
 - [x] comment system: [disqus](https://disqus.com) +[cusdis](https://cusdis.com) +[giscus](https://giscus.app), etc
 - [ ] backend permission api
 
-### Funny & Fancy
+### Funny & Fancy & Performance
 
+- [x] prefer history.pushState api
 - [x] progress bar on top
 - [x] auto favicon (extracted from title)
 - [x] favicon dark mode
@@ -47,10 +48,10 @@ 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 & Performance
+### Security & Stability
 
 - [x] responsive design
-- [x] prefer history.pushState api
+- [x] prefer es5 and guarded with eslint
 - [ ] fallback on browser compatibility break
 - [ ] IE 6+ support (needs polyfill, etc)
 
@@ -102,6 +103,7 @@ Status: no IE
 - [ ] IE9+ https://caniuse.com/?search=arr%20foreach
 - [ ] IE9+ https://caniuse.com/?search=querySelector
 - [ ] IE9+ https://caniuse.com/?search=css3%20selectors
+- [x] IE8+ https://caniuse.com/?search=scrollintoview
 
 mermaid:
 

blog/p/2022/09/blog-setup-via-github-fork.md

@@ -4,6 +4,10 @@
 
 > We chose [silent](../../projects/silent_2.0/), a static blog template, for example
 
+Note: If you know Git and Github well, [silent usage](?projects/silent_2.0/#usage) can be what you need
+
+Otherwise, if you're a beginner, then here we go:
+
 1. Go to silent homepage: https://github.com/fritx/silent
 
 2. Click `Fork` at the top right corner

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

@@ -36,8 +36,9 @@ for silent 1.0, check [this](../silent/) out
 - [x] comment system: [disqus](https://disqus.com) +[cusdis](https://cusdis.com) +[giscus](https://giscus.app), etc
 - [ ] backend permission api
 
-### Funny & Fancy
+### Funny & Fancy & Performance
 
+- [x] prefer history.pushState api
 - [x] progress bar on top
 - [x] auto favicon (extracted from title)
 - [x] favicon dark mode
@@ -47,10 +48,10 @@ for silent 1.0, check [this](../silent/) out
 
 <img width="500" src="../../projects/silent_2.0/WX20220927-173925.png">
 
-### Security & Stability & Performance
+### Security & Stability
 
 - [x] responsive design
-- [x] prefer history.pushState api
+- [x] prefer es5 and guarded with eslint
 - [ ] fallback on browser compatibility break
 - [ ] IE 6+ support (needs polyfill, etc)
 
@@ -102,6 +103,7 @@ Status: no IE
 - [ ] IE9+ https://caniuse.com/?search=arr%20foreach
 - [ ] IE9+ https://caniuse.com/?search=querySelector
 - [ ] IE9+ https://caniuse.com/?search=css3%20selectors
+- [x] IE8+ https://caniuse.com/?search=scrollintoview
 
 mermaid:
 

blog/vendor/blog.css

@@ -133,12 +133,11 @@ a {
   color: #444;
   background: #D6DADC;
   border-radius: 3px;
-  padding: 0 4px;
 }
 .known-service-icon {
   width: 14px;
   height: 14px;
-  margin-right: 3px;
+  margin: -2px 3px 0 0;
   vertical-align: middle;
 }
 

blog/vendor/blog.js

@@ -14,9 +14,9 @@
     load('#sidebar-page', sidebarPage)
   }
 
-  function loadMain(search, callback) {
+  function loadMain(search, callback, isPopState) {
     mainSearch = search
-    var seg = search.slice(1).replace(/&.*$/g, '')
+    var seg = search.slice(1).replace(/[&#].*$/g, '')
     // fucking wechat again
     // like /?graduation-thanks=
     // or /?graduation-thanks=/ (SublimeServer)
@@ -25,10 +25,10 @@
     // like /?from=singlemessage&isappinstalled=0
     if (/=/.test(seg)) seg = null
     mainPage = resolve(seg || defaultPage)
-    load('#main-page', mainPage, true, callback)
+    load('#main-page', mainPage, true, callback, isPopState)
   }
 
-  function load(sel, stack, isMain, callback) {
+  function load(sel, stack, isMain, callback, isPopState) {
     if (typeof stack === 'string') {
       if (/\/$/.test(stack)) {
         stack = [stack + 'index', stack + 'README', stack.replace(/\/$/, '')]
@@ -48,7 +48,7 @@
         if (isMain && pageId !== mainPageId) return
 
         if (stack.length) {
-          return load(sel, stack, isMain, callback)
+          return load(sel, stack, isMain, callback, isPopState)
         }
         if (isMain) onNotFound(err)
       },
@@ -65,8 +65,8 @@
           $el.addClass('contents-preparing').html(html)
           postProcess($el, url)
 
-          $el.removeClass('contents-preparing').attr('data-loaded', true)
-          if (isMain) onMainRendered()
+          $el.removeClass('contents-preparing').attr('data-loaded', '')
+          if (isMain) onMainRendered(isPopState)
           if (callback) callback()
         })
       }
@@ -133,26 +133,49 @@
     })
   }
 
-  function onMainRendered() {
+  function onMainRendered(isPopState) {
     mainTitle = $('#main-page').find('h1, h2, h3, h4, h5, h6').first().text().trim()
     var navTitle = autoTitleFavicon(mainTitle)
     document.title = navTitle
 
     // supports mermaid diagrams
     mermaid.init()
 
+    if (!isPopState) {
+      setTimeout(scrollToAnchorIfExists, 500)
+    }
     comments()
     shares()
   }
 
   function onNotFound() {
     if ($('#main-page').attr('data-loaded') != null) {
-      // onMainRendered()
+      // noop
     } else if (location.search) {
       location.href = '.'
     }
   }
 
+  function scrollToAnchorIfExists() {
+    // location.hash is either empty or leading with `#`
+    // so the selector here is safe
+    var $anchor = $(location.hash)
+    if ($anchor.length) scrollIntoView($anchor[0])
+  }
+
+  // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded
+  function scrollIntoView(el, scrollParent) {
+    if (el.scrollIntoView) {
+      el.scrollIntoView(true) // alignToTop=true
+    } else {
+      scrollParent = scrollParent || el.parentElement
+      var diff = el.offsetTop - scrollParent.scrollTop
+      if (diff < 0 || diff > scrollParent.offsetHeight - el.offsetHeight) {
+        scrollParent.scrollTop = el.offsetTop
+      }
+    }
+  }
+
   function slashes(str) {
     return str.replace(/([.?*+^$!:[\]\\(){}|-])/g, '\\$1')
   }
@@ -208,9 +231,9 @@
   // TODO library extraction: title-favicon & text-favicon & emoji-detect
   // How to detect emoji using javascript
   // https://stackoverflow.com/questions/18862256/how-to-detect-emoji-using-javascript
-  // +modification title-favicon bugfix: recognize emoji `✋🏻` `💁‍♀️` `👨‍👩‍👧‍👦`
+  // +modification title-favicon bugfix: recognize emoji `✋🏻` `💁‍♀️` `👨‍👩‍👧‍👦` `🏳️‍🌈`
   var emojiCellRegex = /(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|\ud83c[\ude32-\ude3a]|\ud83c[\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])+/
-  var emojiRegex = new RegExp(emojiCellRegex.toString().replace(/^\/(.+)\/$/, '(?:[\\u200d]*$1)+[\\ufe0f]*'))
+  var emojiRegex = new RegExp(emojiCellRegex.toString().replace(/^\/(.+)\/$/, '(?:[\\u200d\\ufe0f]*$1)+[\\ufe0f]*'))
   var emojiPrefixRegex = new RegExp(emojiRegex.toString().replace(/^\/(.+)\/$/, '^$1'))
   var anyPrefixRegex = new RegExp(emojiPrefixRegex.toString().replace(/^\/\^(.+)\/$/, '^(?:$1|.)'))
 
@@ -324,7 +347,7 @@
     }).appendTo('#comment-system')
     $('<script>').attr({
       src: 'https://cusdis.com/js/cusdis.umd.js',
-      async: true
+      async: ''
     }).appendTo('head')
   }
   // opt.3 giscus
@@ -346,7 +369,7 @@
       'data-input-position': 'bottom',
       'data-theme': 'light', // silent doesn't support darkmode now
       crossorigin: 'anonymous',
-      async: true
+      async: ''
     }
     Object.keys(attrs).forEach(function (k) { dest[k] = attrs[k] })
     // notice: $('<script>') not working here
@@ -386,7 +409,7 @@
       var savedScrollTop = savedState.scrollTop || 0
       loadMain(location.search, function () {
         window.scrollTo(0, savedScrollTop)
-      })
+      }, true)
       adaptForTripleBackBehavior()
     })
     // trying to fix: continuous popstate events may not be fired properly
@@ -461,7 +484,7 @@
   }
 
   function config() {
-    // Optional: history.pushState API (PJAX) for silent internal page navigation
+    // -- Optional: history.pushState API (PJAX) for silent internal page navigation
     preferPJAX()
 
     // supports mermaid diagrams

package.json

@@ -6,11 +6,11 @@
   "scripts": {
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "release": "cd packages/silent && np patch --no-tests --branch=v2",
+    "release": "cd packages/silent && np patch --no-tests --branch=2x",
     "deploy": "run-s sync && gh-pages -d blog",
     "sync": "run-p sync:readme:packages sync:readme:blog && run-s sync:blog",
     "sync:blog": "rm -rf packages/silent/blog && cp -r blog packages/silent/ && rm packages/silent/blog/.eslintrc.js",
-    "sync:readme:blog": "cat README.md | jayin -ti -to 'x.replaceAll(`https://github.com/fritx/silent/tree/v1`, `../silent/`).replaceAll(`https://blog.fritx.me/?`, `?`).replaceAll(`https://fritx.github.io/silent/?`, `?`).replaceAll(`https://fritx.github.io/silent/p/`, `../../`)' > blog/p/projects/silent_2.0/README.md",
+    "sync:readme:blog": "cat README.md | jayin -ti -to 'x.replaceAll(`https://github.com/fritx/silent/tree/1x`, `../silent/`).replaceAll(`https://blog.fritx.me/?`, `?`).replaceAll(`https://fritx.github.io/silent/?`, `?`).replaceAll(`https://fritx.github.io/silent/p/`, `../../`)' > blog/p/projects/silent_2.0/README.md",
     "sync:readme:packages": "cp README.md packages/silent/ && cp README.md packages/create-silent/"
   },
   "devDependencies": {