Skip to content

Commit 28d6a4e

Browse files
committed
fix ?xx#xx with pjax; support anchor-positioning; misc
1 parent babbd5c commit 28d6a4e

File tree

6 files changed

+56
-26
lines changed

6 files changed

+56
-26
lines changed

README.md

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
> Be a silent, static blog
88
9-
for silent 1.0, check [this](https://github.com/fritx/silent/tree/v1) out
9+
for silent 1.0, check [this](https://github.com/fritx/silent/tree/1x) out
1010

1111
## Features
1212

@@ -36,8 +36,9 @@ for silent 1.0, check [this](https://github.com/fritx/silent/tree/v1) out
3636
- [x] comment system: [disqus](https://disqus.com) +[cusdis](https://cusdis.com) +[giscus](https://giscus.app), etc
3737
- [ ] backend permission api
3838

39-
### Funny & Fancy
39+
### Funny & Fancy & Performance
4040

41+
- [x] prefer history.pushState api
4142
- [x] progress bar on top
4243
- [x] auto favicon (extracted from title)
4344
- [x] favicon dark mode
@@ -47,10 +48,10 @@ for silent 1.0, check [this](https://github.com/fritx/silent/tree/v1) out
4748

4849
<img width="500" src="https://fritx.github.io/silent/p/projects/silent_2.0/WX20220927-173925.png">
4950

50-
### Security & Stability & Performance
51+
### Security & Stability
5152

5253
- [x] responsive design
53-
- [x] prefer history.pushState api
54+
- [x] prefer es5 and guarded with eslint
5455
- [ ] fallback on browser compatibility break
5556
- [ ] IE 6+ support (needs polyfill, etc)
5657

@@ -102,6 +103,7 @@ Status: no IE
102103
- [ ] IE9+ https://caniuse.com/?search=arr%20foreach
103104
- [ ] IE9+ https://caniuse.com/?search=querySelector
104105
- [ ] IE9+ https://caniuse.com/?search=css3%20selectors
106+
- [x] IE8+ https://caniuse.com/?search=scrollintoview
105107

106108
mermaid:
107109

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@
44

55
> We chose [silent](../../projects/silent_2.0/), a static blog template, for example
66
7+
Note: If you know Git and Github well, [silent usage](?projects/silent_2.0/#usage) can be what you need
8+
9+
Otherwise, if you're a beginner, then here we go:
10+
711
1. Go to silent homepage: https://github.com/fritx/silent
812

913
2. Click `Fork` at the top right corner

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,9 @@ for silent 1.0, check [this](../silent/) out
3636
- [x] comment system: [disqus](https://disqus.com) +[cusdis](https://cusdis.com) +[giscus](https://giscus.app), etc
3737
- [ ] backend permission api
3838

39-
### Funny & Fancy
39+
### Funny & Fancy & Performance
4040

41+
- [x] prefer history.pushState api
4142
- [x] progress bar on top
4243
- [x] auto favicon (extracted from title)
4344
- [x] favicon dark mode
@@ -47,10 +48,10 @@ for silent 1.0, check [this](../silent/) out
4748

4849
<img width="500" src="../../projects/silent_2.0/WX20220927-173925.png">
4950

50-
### Security & Stability & Performance
51+
### Security & Stability
5152

5253
- [x] responsive design
53-
- [x] prefer history.pushState api
54+
- [x] prefer es5 and guarded with eslint
5455
- [ ] fallback on browser compatibility break
5556
- [ ] IE 6+ support (needs polyfill, etc)
5657

@@ -102,6 +103,7 @@ Status: no IE
102103
- [ ] IE9+ https://caniuse.com/?search=arr%20foreach
103104
- [ ] IE9+ https://caniuse.com/?search=querySelector
104105
- [ ] IE9+ https://caniuse.com/?search=css3%20selectors
106+
- [x] IE8+ https://caniuse.com/?search=scrollintoview
105107

106108
mermaid:
107109

blog/vendor/blog.css

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -133,12 +133,11 @@ a {
133133
color: #444;
134134
background: #D6DADC;
135135
border-radius: 3px;
136-
padding: 0 4px;
137136
}
138137
.known-service-icon {
139138
width: 14px;
140139
height: 14px;
141-
margin-right: 3px;
140+
margin: -2px 3px 0 0;
142141
vertical-align: middle;
143142
}
144143

blog/vendor/blog.js

Lines changed: 38 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@
1414
load('#sidebar-page', sidebarPage)
1515
}
1616

17-
function loadMain(search, callback) {
17+
function loadMain(search, callback, isPopState) {
1818
mainSearch = search
19-
var seg = search.slice(1).replace(/&.*$/g, '')
19+
var seg = search.slice(1).replace(/[&#].*$/g, '')
2020
// fucking wechat again
2121
// like /?graduation-thanks=
2222
// or /?graduation-thanks=/ (SublimeServer)
@@ -25,10 +25,10 @@
2525
// like /?from=singlemessage&isappinstalled=0
2626
if (/=/.test(seg)) seg = null
2727
mainPage = resolve(seg || defaultPage)
28-
load('#main-page', mainPage, true, callback)
28+
load('#main-page', mainPage, true, callback, isPopState)
2929
}
3030

31-
function load(sel, stack, isMain, callback) {
31+
function load(sel, stack, isMain, callback, isPopState) {
3232
if (typeof stack === 'string') {
3333
if (/\/$/.test(stack)) {
3434
stack = [stack + 'index', stack + 'README', stack.replace(/\/$/, '')]
@@ -48,7 +48,7 @@
4848
if (isMain && pageId !== mainPageId) return
4949

5050
if (stack.length) {
51-
return load(sel, stack, isMain, callback)
51+
return load(sel, stack, isMain, callback, isPopState)
5252
}
5353
if (isMain) onNotFound(err)
5454
},
@@ -65,8 +65,8 @@
6565
$el.addClass('contents-preparing').html(html)
6666
postProcess($el, url)
6767

68-
$el.removeClass('contents-preparing').attr('data-loaded', true)
69-
if (isMain) onMainRendered()
68+
$el.removeClass('contents-preparing').attr('data-loaded', '')
69+
if (isMain) onMainRendered(isPopState)
7070
if (callback) callback()
7171
})
7272
}
@@ -133,26 +133,49 @@
133133
})
134134
}
135135

136-
function onMainRendered() {
136+
function onMainRendered(isPopState) {
137137
mainTitle = $('#main-page').find('h1, h2, h3, h4, h5, h6').first().text().trim()
138138
var navTitle = autoTitleFavicon(mainTitle)
139139
document.title = navTitle
140140

141141
// supports mermaid diagrams
142142
mermaid.init()
143143

144+
if (!isPopState) {
145+
setTimeout(scrollToAnchorIfExists, 500)
146+
}
144147
comments()
145148
shares()
146149
}
147150

148151
function onNotFound() {
149152
if ($('#main-page').attr('data-loaded') != null) {
150-
// onMainRendered()
153+
// noop
151154
} else if (location.search) {
152155
location.href = '.'
153156
}
154157
}
155158

159+
function scrollToAnchorIfExists() {
160+
// location.hash is either empty or leading with `#`
161+
// so the selector here is safe
162+
var $anchor = $(location.hash)
163+
if ($anchor.length) scrollIntoView($anchor[0])
164+
}
165+
166+
// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded
167+
function scrollIntoView(el, scrollParent) {
168+
if (el.scrollIntoView) {
169+
el.scrollIntoView(true) // alignToTop=true
170+
} else {
171+
scrollParent = scrollParent || el.parentElement
172+
var diff = el.offsetTop - scrollParent.scrollTop
173+
if (diff < 0 || diff > scrollParent.offsetHeight - el.offsetHeight) {
174+
scrollParent.scrollTop = el.offsetTop
175+
}
176+
}
177+
}
178+
156179
function slashes(str) {
157180
return str.replace(/([.?*+^$!:[\]\\(){}|-])/g, '\\$1')
158181
}
@@ -208,9 +231,9 @@
208231
// TODO library extraction: title-favicon & text-favicon & emoji-detect
209232
// How to detect emoji using javascript
210233
// https://stackoverflow.com/questions/18862256/how-to-detect-emoji-using-javascript
211-
// +modification title-favicon bugfix: recognize emoji `✋🏻` `💁‍♀️` `👨‍👩‍👧‍👦`
234+
// +modification title-favicon bugfix: recognize emoji `✋🏻` `💁‍♀️` `👨‍👩‍👧‍👦` `🏳️‍🌈`
212235
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])+/
213-
var emojiRegex = new RegExp(emojiCellRegex.toString().replace(/^\/(.+)\/$/, '(?:[\\u200d]*$1)+[\\ufe0f]*'))
236+
var emojiRegex = new RegExp(emojiCellRegex.toString().replace(/^\/(.+)\/$/, '(?:[\\u200d\\ufe0f]*$1)+[\\ufe0f]*'))
214237
var emojiPrefixRegex = new RegExp(emojiRegex.toString().replace(/^\/(.+)\/$/, '^$1'))
215238
var anyPrefixRegex = new RegExp(emojiPrefixRegex.toString().replace(/^\/\^(.+)\/$/, '^(?:$1|.)'))
216239

@@ -324,7 +347,7 @@
324347
}).appendTo('#comment-system')
325348
$('<script>').attr({
326349
src: 'https://cusdis.com/js/cusdis.umd.js',
327-
async: true
350+
async: ''
328351
}).appendTo('head')
329352
}
330353
// opt.3 giscus
@@ -346,7 +369,7 @@
346369
'data-input-position': 'bottom',
347370
'data-theme': 'light', // silent doesn't support darkmode now
348371
crossorigin: 'anonymous',
349-
async: true
372+
async: ''
350373
}
351374
Object.keys(attrs).forEach(function (k) { dest[k] = attrs[k] })
352375
// notice: $('<script>') not working here
@@ -386,7 +409,7 @@
386409
var savedScrollTop = savedState.scrollTop || 0
387410
loadMain(location.search, function () {
388411
window.scrollTo(0, savedScrollTop)
389-
})
412+
}, true)
390413
adaptForTripleBackBehavior()
391414
})
392415
// trying to fix: continuous popstate events may not be fired properly
@@ -461,7 +484,7 @@
461484
}
462485

463486
function config() {
464-
// Optional: history.pushState API (PJAX) for silent internal page navigation
487+
// -- Optional: history.pushState API (PJAX) for silent internal page navigation
465488
preferPJAX()
466489

467490
// supports mermaid diagrams

package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@
66
"scripts": {
77
"lint": "eslint .",
88
"lint:fix": "eslint . --fix",
9-
"release": "cd packages/silent && np patch --no-tests --branch=v2",
9+
"release": "cd packages/silent && np patch --no-tests --branch=2x",
1010
"deploy": "run-s sync && gh-pages -d blog",
1111
"sync": "run-p sync:readme:packages sync:readme:blog && run-s sync:blog",
1212
"sync:blog": "rm -rf packages/silent/blog && cp -r blog packages/silent/ && rm packages/silent/blog/.eslintrc.js",
13-
"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",
13+
"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",
1414
"sync:readme:packages": "cp README.md packages/silent/ && cp README.md packages/create-silent/"
1515
},
1616
"devDependencies": {

0 commit comments

Comments
 (0)