From 8734d1c1a3ef5604aa1a87aca062a51c61ed7d96 Mon Sep 17 00:00:00 2001 From: Bornunique911 <69379200+Bornunique911@users.noreply.github.com> Date: Fri, 2 Dec 2022 20:20:38 +0530 Subject: [PATCH 01/32] chore: correct typo in `tools/init.sh` (#773) --- tools/init.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tools/init.sh b/tools/init.sh index 33b5209..7cc6e20 100755 --- a/tools/init.sh +++ b/tools/init.sh @@ -20,7 +20,7 @@ help() { check_status() { if [[ -n $(git status . -s) ]]; then - echo "Error: Commit unstaged files first, and then run this tool againt." + echo "Error: Commit unstaged files first, and then run this tool again." exit -1 fi } From 7fd15a285fe14ab9654df76080c3e51886406bae Mon Sep 17 00:00:00 2001 From: MrEddX <66828538+MrEddX@users.noreply.github.com> Date: Fri, 2 Dec 2022 16:54:52 +0200 Subject: [PATCH 02/32] chore(i18n): update Bulgarian translation (#777) --- _data/locales/bg-BG.yml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/_data/locales/bg-BG.yml b/_data/locales/bg-BG.yml index fe601bb..3e4103c 100644 --- a/_data/locales/bg-BG.yml +++ b/_data/locales/bg-BG.yml @@ -5,7 +5,7 @@ layout: post: Публикация category: Категория - tag: Тагове + tag: Таг # The tabs of sidebar tabs: @@ -43,7 +43,7 @@ copyright: meta: Създадено чрез :PLATFORM и :THEME тема. not_found: - statment: Съжалявам, но този на този URL адрес няма налично съдържание. + statment: Съжалявам, но на този URL адрес няма налично съдържание. notification: update_found: Налична е нова версия на съдържанието. @@ -71,7 +71,7 @@ post: title: Копирай линк succeed: Линкът е копиран успешно! # pinned prompt of posts list on homepage - pin_prompt: Прикрепен + pin_prompt: Прикрепенa # categories page categories: From fa9879b5f14d0e9e4dd60d3c4394513963ca4b3f Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Mon, 5 Dec 2022 00:28:04 +0800 Subject: [PATCH 03/32] chore: improve init-tool - cleanup unused code of init-tool - use conventional commits --- tools/init.sh | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/tools/init.sh b/tools/init.sh index 7cc6e20..c6742f1 100755 --- a/tools/init.sh +++ b/tools/init.sh @@ -51,25 +51,14 @@ init_files() { rm -rf .github else ## Change the files of `.github` - mv .github/workflows/$ACTIONS_WORKFLOW.hook . rm -rf .github mkdir -p .github/workflows mv ./${ACTIONS_WORKFLOW}.hook .github/workflows/${ACTIONS_WORKFLOW} - ## Ensure the gh-actions trigger branch - - _workflow=".github/workflows/${ACTIONS_WORKFLOW}" - _default_branch="$(git symbolic-ref refs/remotes/origin/HEAD | sed 's@^refs/remotes/origin/@@')" - _lineno="$(sed -n "/branches:/=" "$_workflow")" - - sed -i.$TEMP_SUFFIX "$((_lineno + 1))s/- .*/- ${_default_branch}/" "$_workflow" - rm -f "$_workflow.$TEMP_SUFFIX" - ## Cleanup image settings in site config sed -i.$TEMP_SUFFIX "s/^img_cdn:.*/img_cdn:/;s/^avatar:.*/avatar:/" _config.yml rm -f _config.yml.$TEMP_SUFFIX - fi # trace the gem lockfile on user-end @@ -82,7 +71,7 @@ init_files() { # save changes git add -A - git commit -m "[Automation] Initialize the environment." -q + git commit -m "chore: initialize the environment" -q echo "[INFO] Initialization successful!" } From 9de95bf089c6a591880850816cb7bd36903d44aa Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Mon, 5 Dec 2022 00:30:37 +0800 Subject: [PATCH 04/32] build: reduce unnecessary builds --- .github/workflows/ci.yml | 2 +- .github/workflows/style-lint.yml | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 86c6370..7f3652f 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -2,7 +2,7 @@ name: 'CI' on: push: branches-ignore: - - 'release/**' + - 'production' - 'docs' tags-ignore: - '**' diff --git a/.github/workflows/style-lint.yml b/.github/workflows/style-lint.yml index f54f3c3..e8fedae 100644 --- a/.github/workflows/style-lint.yml +++ b/.github/workflows/style-lint.yml @@ -4,6 +4,8 @@ on: push: paths: - '_sass/**.scss' + tags-ignore: + - '**' pull_request: paths: - '_sass/**.scss' From 5fc428353ce5803aaca6dacaaf04f994b7db8728 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Mon, 5 Dec 2022 00:51:38 +0800 Subject: [PATCH 05/32] build(cd): migrate CD to GitHub --- .github/workflows/cd.yml | 14 ++++++++ .github/workflows/ci.yml | 1 - .gitignore | 1 - .travis.yml | 51 ---------------------------- _posts/2019-08-09-getting-started.md | 8 ++--- tools/init.sh | 1 - 6 files changed, 17 insertions(+), 59 deletions(-) create mode 100644 .github/workflows/cd.yml delete mode 100644 .travis.yml diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml new file mode 100644 index 0000000..af4a885 --- /dev/null +++ b/.github/workflows/cd.yml @@ -0,0 +1,14 @@ +name: CD +on: + push: + branches: [production, docs] + +jobs: + launch: + runs-on: ubuntu-latest + steps: + - run: | + curl -X POST -H "Accept: application/vnd.github+json" \ + -H "Authorization: Bearer ${{ secrets.GH_PAT }}" \ + https://api.github.com/repos/${{ secrets.BUILDER }}/dispatches \ + -d '{"event_type":"deploy", "client_payload":{"branch": "${{ github.ref_name }}"}}' diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 7f3652f..e076b33 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -9,7 +9,6 @@ on: paths-ignore: - '.github/**' - '!.github/workflows/ci.yml' - - '.travis.yml' - '.gitignore' - 'README.md' - 'LICENSE' diff --git a/.gitignore b/.gitignore index 3ff2312..9735d33 100644 --- a/.gitignore +++ b/.gitignore @@ -3,7 +3,6 @@ !.git* !.editorconfig !.nojekyll -!.travis.yml !.husky !.commitlintrc.json !.versionrc.json diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index 56b7c5d..0000000 --- a/.travis.yml +++ /dev/null @@ -1,51 +0,0 @@ -os: linux -dist: bionic -language: ruby -rvm: 2.7.0 - -addons: - apt: - packages: - - libcurl4-openssl-dev # to avoid SSL error (for htmlproofer) - -# Overriding to drop the `--development` flag which requires the Gemfile.lock at build -install: bundle install --jobs=3 --retry=3 --path=vendor/bundle - -before_script: git -C "$HOME" clone "$BUILDER_REPO" --depth=1 -q - -jobs: - include: - - stage: Upgrade - cache: bundler - git: - depth: false # for posts' lastmod - script: eval "$BUILD_CMD" - - - stage: Starter - language: minimal - install: true # skip install step - script: eval "$FLUSH_STARTER" - - - stage: Docs - cache: bundler - git: - depth: false # for posts' lastmod - script: eval "$DOCS_CMD" - -stages: - - name: Upgrade - if: branch = production - - name: Starter - if: branch = production - - name: Docs - if: branch = docs - -notifications: - email: - recipients: - - secure: "fFLqX7uOzFA8RE2AUFlU1mmxMw+rdV6DnODJ/1Gl+3ecNtrv5LeH3c5a4a5ShQqYTrx9BPfD40VRN7UB+lzOdXiWLI9yDGRPPxGG26/WfrKpdQPZilc8zAOEeDnLAJeGZLsUvgmNb3KCXW6S8NPqqh34CfWcTIzjCARhRgO33wcs8X5wP5cugtNqO5Ew/pUcfWcmiuXNX0GNT6l+nL5A7yN+IO5mRHqSRmlfYd5EHhGMTIL4La+Cd1CNv1m4Dl0Ah2cDeJwi5wLnVbqAgunLhAYmDtxIOCVYMTBrP37UiNe/7QeFelyJfODsmMg1mx3WCykbXydC753WVoAlTg6nNoeeI9fmK+/tuLK+sx/KnYfTVGBXQYq39DyV/2o/IfCzEAKImlzFKGD8R13+ddu4B5UML+cby5KBvhTKIGaC5tKoe39z/31UPpy11/EHMCof2BUOzIgu5Hsv4OSNJlw3oRE31oOPn8xP4e7uWR8bRUhAgzN0Cn0ht+UfpemfGAXrp0M3IXQdc9L4azEFqxRhivMTLK/P6INay7IM+DJ30Ht2dWylGw/sxcRTqyNm3YomJQnXIO4xeqTSLulWr80FFHTys3JEDJYrcKvJmpwLFEAOZtwKsZ6ZShrOIA4LE5fgQtakH3ZLJG9a7jVSlMcNIfaSKgjdDQOe6CoRQL7KouA=" - on_success: never - -env: - global: - - NOKOGIRI_USE_SYSTEM_LIBRARIES=true # speeds up installation of html-proofer diff --git a/_posts/2019-08-09-getting-started.md b/_posts/2019-08-09-getting-started.md index 19645fa..d5eb9c5 100644 --- a/_posts/2019-08-09-getting-started.md +++ b/_posts/2019-08-09-getting-started.md @@ -39,15 +39,13 @@ $ bash tools/init.sh The above command will: -1. Removes some files or directories from your repository: - - `.travis.yml`{: .filepath} - - files under `_posts`{: .filepath} +1. Remove the files in `_posts`{: .filepath} from your repository. 2. If the option `--no-gh` is provided, the directory `.github`{: .filepath} will be deleted. Otherwise, set up the GitHub Action workflow by removing the extension `.hook`{: .filepath} of `.github/workflows/pages-deploy.yml.hook`{: .filepath}, and then remove the other files and directories in the folder `.github`{: .filepath}. -3. Removes item `Gemfile.lock` from `.gitignore`{: .filepath}. +3. Remove item `Gemfile.lock` from `.gitignore`{: .filepath}. -4. Creates a new commit to save the changes automatically. +4. Create a new commit to save the changes automatically. ### Installing Dependencies diff --git a/tools/init.sh b/tools/init.sh index c6742f1..656a641 100755 --- a/tools/init.sh +++ b/tools/init.sh @@ -66,7 +66,6 @@ init_files() { rm -f ".gitignore.$TEMP_SUFFIX" # remove the other fies - rm -f .travis.yml rm -rf _posts/* # save changes From e7426ec67e1e4908ba8191d62cf8226a182f3e0c Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Mon, 5 Dec 2022 03:50:51 +0800 Subject: [PATCH 06/32] chore: update image source --- README.md | 2 +- _config.yml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 33f312b..ee71758 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ [**Live Demo →**](https://cotes2020.github.io/chirpy-demo) - [![Devices Mockup](https://raw.githubusercontent.com/cotes2020/chirpy-images/main/commons/devices-mockup.png)](https://cotes2020.github.io/chirpy-demo) + [![Devices Mockup](https://chirpy-img.netlify.app/commons/devices-mockup.png)](https://cotes2020.github.io/chirpy-demo) diff --git a/_config.yml b/_config.yml index a43d2a5..81090d3 100644 --- a/_config.yml +++ b/_config.yml @@ -78,7 +78,7 @@ theme_mode: # [light|dark] # will be added to all image (site avatar & posts' images) paths starting with '/' # # e.g. 'https://cdn.com' -img_cdn: 'https://demo-img.cotes.page' +img_cdn: 'https://chirpy-img.netlify.app' # the avatar on sidebar, support local or CORS resources avatar: '/commons/avatar.jpg' From ec98f07aca0b80a9c07fbcdc8e0d7d66dba98ed2 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Thu, 8 Dec 2022 00:40:12 +0800 Subject: [PATCH 07/32] fix: refactoring error when the image URL contains parameters --- _includes/refactor-content.html | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html index 6535e91..d2e27b3 100644 --- a/_includes/refactor-content.html +++ b/_includes/refactor-content.html @@ -69,7 +69,7 @@ {% assign _attrs = _left | split: ' ' %} {% for _attr in _attrs %} - {% assign _pair = _attr | split: '=' %} + {% assign _pair = _attr | split: '="' %} {% if _pair.size < 2 %} {% continue %} {% endif %} @@ -93,7 +93,6 @@ {% if _src %} {% unless _src contains '://' %} - {% if site.img_cdn %} {% if site.img_cdn contains '//' %} @@ -117,7 +116,6 @@ {% endunless %} - {% assign _left = _left | replace: 'src=', 'data-src=' %} {% endif %} From 7efd2f8aa2ea1c3aeb7d740bf9a018881c26fe65 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Wed, 7 Dec 2022 02:18:21 +0800 Subject: [PATCH 08/32] fix: spaces in post title are encoded when sharing Reproducible on iOS Safari --- _includes/post-sharing.html | 1 - 1 file changed, 1 deletion(-) diff --git a/_includes/post-sharing.html b/_includes/post-sharing.html index a15fc03..7285c39 100644 --- a/_includes/post-sharing.html +++ b/_includes/post-sharing.html @@ -6,7 +6,6 @@ {{ site.data.locales[site.lang].post.share }} {% capture title %}{{ page.title }} - {{ site.title }}{% endcapture %} - {% assign title = title | url_encode %} {% assign url = page.url | absolute_url | url_encode %} {% for share in site.data.share.platforms %} From 7fb0ee0bedb63eee3f90a49c6d7fb8b5d78c9830 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Wed, 7 Dec 2022 02:54:09 +0800 Subject: [PATCH 09/32] perf(cdn): optimize cache policy for static assets --- _data/assets/cross_origin.yml | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/_data/assets/cross_origin.yml b/_data/assets/cross_origin.yml index a7d024e..30b40fb 100644 --- a/_data/assets/cross_origin.yml +++ b/_data/assets/cross_origin.yml @@ -16,47 +16,47 @@ webfonts: https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:w # Libraries jquery: - js: https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js + js: https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js bootstrap: - css: https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.min.css - js: https://cdn.jsdelivr.net/npm/bootstrap@4/dist/js/bootstrap.bundle.min.js + css: https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css + js: https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js bootstrap-toc: css: https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.css js: https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.js fontawesome: - css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/css/all.min.css + css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/all.min.css search: js: https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.10.0/dest/simple-jekyll-search.min.js mermaid: - js: https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.min.js + js: https://cdn.jsdelivr.net/npm/mermaid@9.2.2/dist/mermaid.min.js dayjs: js: - common: https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js - locale: https://cdn.jsdelivr.net/npm/dayjs@1/locale/:LOCALE.min.js - relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1/plugin/relativeTime.min.js - localizedFormat: https://cdn.jsdelivr.net/npm/dayjs@1/plugin/localizedFormat.min.js + common: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/dayjs.min.js + locale: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/locale/:LOCALE.min.js + relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/plugin/relativeTime.min.js + localizedFormat: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/plugin/localizedFormat.min.js countup: js: https://cdn.jsdelivr.net/npm/countup.js@1.9.3/dist/countUp.min.js magnific-popup: - css: https://cdn.jsdelivr.net/npm/magnific-popup@1/dist/magnific-popup.min.css - js: https://cdn.jsdelivr.net/npm/magnific-popup@1/dist/jquery.magnific-popup.min.js + css: https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/magnific-popup.min.css + js: https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/jquery.magnific-popup.min.js lozad: js: https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js clipboard: - js: https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js + js: https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js polyfill: js: https://polyfill.io/v3/polyfill.min.js?features=es6 mathjax: - js: https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js + js: https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-chtml.js From 5561cd86b51a8471ebf742166062c0009150347e Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Thu, 8 Dec 2022 06:08:26 +0800 Subject: [PATCH 10/32] refactor(icons): upgrade font-awesome syntax to version 6 --- .stylelintrc.json | 8 +------- _sass/addon/commons.scss | 7 +++++-- _sass/addon/module.scss | 6 +++--- 3 files changed, 9 insertions(+), 12 deletions(-) diff --git a/.stylelintrc.json b/.stylelintrc.json index 0dfc8b2..66c0ffb 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -11,12 +11,6 @@ "alpha-value-notation": "number", "selector-not-notation": "simple", "color-hex-length": "long", - "declaration-block-single-line-max-declarations": 3, - "font-family-no-missing-generic-family-keyword": [ - true, - { - "ignoreFontFamilies": ["Font Awesome 5 Free"] - } - ] + "declaration-block-single-line-max-declarations": 3 } } diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index 1b9b4f1..4e55dfb 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -98,10 +98,13 @@ blockquote { color: var(--prompt-text-color); &::before { - font-family: "Font Awesome 5 Free"; text-align: center; width: 1.25rem; margin-right: 0.75rem; + position: relative; + top: 0.4rem; + text-rendering: auto; + -webkit-font-smoothing: antialiased; } > div { @@ -113,7 +116,7 @@ blockquote { } } - @include prompt("tip", "\f0eb", 400); + @include prompt("tip", "\f0eb", "regular"); @include prompt("info", "\f06a"); @include prompt("warning", "\f06a"); @include prompt("danger", "\f071"); diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss index 9f1c986..1f98002 100644 --- a/_sass/addon/module.scss +++ b/_sass/addon/module.scss @@ -141,14 +141,14 @@ transform: translateX(-50%); } -@mixin prompt($type, $fw-icon, $icon-weight: 900) { +@mixin prompt($type, $fa-content, $fa-style: "solid") { &.prompt-#{$type} { background-color: var(--prompt-#{$type}-bg); &::before { - content: $fw-icon; + content: $fa-content; color: var(--prompt-#{$type}-icon-color); - font-weight: $icon-weight; + font: var(--fa-font-#{$fa-style}); } } } From 7651d2851b4bb7d8f0d068b62c036c89a1089bbc Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Thu, 8 Dec 2022 07:01:20 +0800 Subject: [PATCH 11/32] fix: `hreflang` tag attribute of feed misses `site.alt_lang` --- assets/feed.xml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/feed.xml b/assets/feed.xml index b36f4af..358d44f 100644 --- a/assets/feed.xml +++ b/assets/feed.xml @@ -15,7 +15,7 @@ permalink: /feed.xml {{ "/" | absolute_url }} - Jekyll © {{ 'now' | date: '%Y' }} {{ site.social.name }} From ca41c7ebffc6372447f7db245488d48c2344814c Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Fri, 9 Dec 2022 07:03:13 +0800 Subject: [PATCH 12/32] chore(deps): use `lazysizes` to load images --- _data/assets/cross_origin.yml | 4 ++-- _data/assets/self_host.yml | 4 ++-- _includes/js-selector.html | 3 +-- _includes/refactor-content.html | 9 ++++++++- _javascript/utils/img-extra.js | 9 +-------- _sass/addon/commons.scss | 21 ++++++++------------- _sass/layout/post.scss | 2 +- assets/js/dist/page.min.js | 2 +- assets/js/dist/post.min.js | 2 +- assets/lib | 2 +- 10 files changed, 26 insertions(+), 32 deletions(-) diff --git a/_data/assets/cross_origin.yml b/_data/assets/cross_origin.yml index 30b40fb..a3a8dfb 100644 --- a/_data/assets/cross_origin.yml +++ b/_data/assets/cross_origin.yml @@ -49,8 +49,8 @@ magnific-popup: css: https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/magnific-popup.min.css js: https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/jquery.magnific-popup.min.js -lozad: - js: https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js +lazysizes: + js: https://cdn.jsdelivr.net/npm/lazysizes@5.3.2/lazysizes.min.js clipboard: js: https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js diff --git a/_data/assets/self_host.yml b/_data/assets/self_host.yml index b6410a4..817c78e 100644 --- a/_data/assets/self_host.yml +++ b/_data/assets/self_host.yml @@ -38,8 +38,8 @@ magnific-popup: css: /assets/lib/magnific-popup-1.1.0/magnific-popup.css js: /assets/lib/magnific-popup-1.1.0/jquery.magnific-popup.min.js -lozad: - js: /assets/lib/lozad-1.16.0/lozad.min.js +lazysizes: + js: /assets/lib/lazysizes-5.3.2/lazysizes.min.js clipboard: js: /assets/lib/clipboard-2.0.9/clipboard.min.js diff --git a/_includes/js-selector.html b/_includes/js-selector.html index 4285ff9..c760968 100644 --- a/_includes/js-selector.html +++ b/_includes/js-selector.html @@ -15,12 +15,11 @@ {% if page.layout == 'post' or page.layout == 'page' %} {% assign _urls = site.data.assets[origin].magnific-popup.js - | append: ',' | append: site.data.assets[origin].lozad.js + | append: ',' | append: site.data.assets[origin].lazysizes.js | append: ',' | append: site.data.assets[origin].clipboard.js %} {% include jsdelivr-combine.html urls=_urls %} - {% endif %} {% if page.layout == 'home' diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html index d2e27b3..4425712 100644 --- a/_includes/refactor-content.html +++ b/_includes/refactor-content.html @@ -115,7 +115,14 @@ {% endunless %} - + + + {% if _left contains 'class=' %} + {% assign _left = _left | replace: 'class="', 'class="lazyload ' %} + {% else %} + {% assign _left = _left | replace: 'src=', 'class="lazyload" src=' %} + {% endif %} + {% assign _left = _left | replace: 'src=', 'data-src=' %} {% endif %} diff --git a/_javascript/utils/img-extra.js b/_javascript/utils/img-extra.js index 528f867..e371244 100644 --- a/_javascript/utils/img-extra.js +++ b/_javascript/utils/img-extra.js @@ -1,6 +1,5 @@ /** - Lazy load images (https://github.com/ApoorvSaxena/lozad.js) - and popup when clicked (https://github.com/dimsemenov/Magnific-Popup) + Set up image popup stuff (https://github.com/dimsemenov/Magnific-Popup) */ $(function () { @@ -10,12 +9,6 @@ $(function () { return; } - /* lazy loading */ - - const imgList = document.querySelectorAll(`${IMG_SCOPE} img[data-src]`); - const observer = lozad(imgList); - observer.observe(); - /* popup */ $(`${IMG_SCOPE} p > img[data-src], ${IMG_SCOPE} img[data-src].preview-img`).each( diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index 4e55dfb..bdbd192 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -183,22 +183,17 @@ i { /* fontawesome icons */ } } -@-webkit-keyframes fade-in { - from { opacity: 0; } - to { opacity: 1; } -} - -@keyframes fade-in { - from { opacity: 0; } - to { opacity: 1; } -} - img[data-src] { margin: 0.5rem 0; - &[data-loaded="true"] { - -webkit-animation: fade-in linear 0.5s; - animation: fade-in linear 0.5s; + &.lazyload, + &.lazyloading { + opacity: 0; + } + + &.lazyloaded { + opacity: 1; + transition: opacity 0.5s; } &.left { diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss index 5d9c0f9..2fea727 100644 --- a/_sass/layout/post.scss +++ b/_sass/layout/post.scss @@ -30,7 +30,7 @@ img.preview-img { margin: 0; border-radius: 6px; - &.bg[data-loaded="true"] { + &.bg { background: var(--preview-img-bg); } } diff --git a/assets/js/dist/page.min.js b/assets/js/dist/page.min.js index 235b74f..cd90722 100644 --- a/assets/js/dist/page.min.js +++ b/assets/js/dist/page.min.js @@ -3,4 +3,4 @@ * © 2019 Cotes Chung * MIT Licensed */ -$(function(){$(window).scroll(()=>{50<$(this).scrollTop()&&"none"===$("#sidebar-trigger").css("display")?$("#back-to-top").fadeIn():$("#back-to-top").fadeOut()}),$("#back-to-top").click(()=>($("body,html").animate({scrollTop:0},800),!1))}),$(function(){$(".mode-toggle").click(e=>{e=$(e.target);(e.prop("tagName")==="button".toUpperCase()?e:e.parent()).blur(),flipMode()})});const ScrollHelper=function(){const e=$("body"),t="data-topbar-visible",o=$("#topbar-wrapper").outerHeight();let r=0,a=!1,l=!1;return{hideTopbar:()=>e.attr(t,!1),showTopbar:()=>e.attr(t,!0),addScrollUpTask:()=>{r+=1,a=a||!0},popScrollUpTask:()=>--r,hasScrollUpTask:()=>0!0===a,unlockTopbar:()=>a=!1,getTopbarHeight:()=>o,orientationLocked:()=>!0===l,lockOrientation:()=>l=!0,unLockOrientation:()=>l=!1}}();$(function(){const e=$("#sidebar-trigger"),t=$("#search-trigger"),o=$("#search-cancel"),r=$("#main"),a=$("#topbar-title"),l=$("#search-wrapper"),n=$("#search-result-wrapper"),i=$("#search-results"),s=$("#search-input"),c=$("#search-hints"),d=function(){let e=0;return{block(){e=window.scrollY,$("html,body").scrollTop(0)},release(){$("html,body").scrollTop(e)},getOffset(){return e}}}(),p={on(){e.addClass("unloaded"),a.addClass("unloaded"),t.addClass("unloaded"),l.addClass("d-flex"),o.addClass("loaded")},off(){o.removeClass("loaded"),l.removeClass("d-flex"),e.removeClass("unloaded"),a.removeClass("unloaded"),t.removeClass("unloaded")}},u=function(){let e=!1;return{on(){e||(d.block(),n.removeClass("unloaded"),r.addClass("unloaded"),e=!0)},off(){e&&(i.empty(),c.hasClass("unloaded")&&c.removeClass("unloaded"),n.addClass("unloaded"),r.removeClass("unloaded"),d.release(),s.val(""),e=!1)},isVisible(){return e}}}();function h(){return o.hasClass("loaded")}t.click(function(){p.on(),u.on(),s.focus()}),o.click(function(){p.off(),u.off()}),s.focus(function(){l.addClass("input-focus")}),s.focusout(function(){l.removeClass("input-focus")}),s.on("input",()=>{""===s.val()?h()?c.removeClass("unloaded"):u.off():(u.on(),h()&&c.addClass("unloaded"))})}),$(function(){var e=function(){const e="sidebar-display";let t=!1;const o=$("body");return{toggle(){!1===t?o.attr(e,""):o.removeAttr(e),t=!t}}}();$("#sidebar-trigger").click(e.toggle),$("#mask").click(e.toggle)}),$(function(){$('[data-toggle="tooltip"]').tooltip()}),$(function(){const t=$("#search-input"),o=ScrollHelper.getTopbarHeight();let e,r=0;function a(){0!==$(window).scrollTop()&&(ScrollHelper.lockOrientation(),ScrollHelper.hideTopbar())}screen.orientation?screen.orientation.onchange=()=>{var e=screen.orientation.type;"landscape-primary"!==e&&"landscape-secondary"!==e||a()}:$(window).on("orientationchange",()=>{$(window).width()<$(window).height()&&a()}),$(window).scroll(()=>{e=e||!0}),setInterval(()=>{e&&(!function(){var e=$(this).scrollTop();if(!(Math.abs(r-e)<=o)){if(e>r)ScrollHelper.hideTopbar(),t.is(":focus")&&t.blur();else if(e+$(window).height()<$(document).height()){if(ScrollHelper.hasScrollUpTask())return;ScrollHelper.topbarLocked()?ScrollHelper.unlockTopbar():ScrollHelper.orientationLocked()?ScrollHelper.unLockOrientation():ScrollHelper.showTopbar()}r=e}}(),e=!1)},250)}),$(function(){var e="div.post>h1:first-of-type",t=$(e);const n=$("#topbar-title");if(0!==t.length&&!t.hasClass("dynamic-title")&&!n.is(":hidden")){const i=n.text().trim();let r=t.text().trim(),a=!1,l=0;($("#page-category").length||$("#page-tag").length)&&/\s/.test(r)&&(r=r.replace(/[0-9]/g,"").trim()),t.offset().top<$(window).scrollTop()&&n.text(r);new IntersectionObserver(e=>{var t,o;a?(o=$(window).scrollTop(),t=l img[data-src], ${t} img[data-src].preview-img`).each(function(){var e=$(this).next(),e="EM"===e.prop("tagName")?e.text():"",t=$(this).attr("data-src");$(this).wrap(``)}),$(".popup").magnificPopup({type:"image",closeOnContentClick:!0,showCloseBtn:!1,zoom:{enabled:!0,duration:300,easing:"ease-in-out"}}),$(t+" a").has("img").addClass("img-link"))}),$(function(){var e=".code-header>button";const t="timeout",a="data-title-succeed",l="data-original-title";function n(e){if($(e)[0].hasAttribute(t)){e=$(e).attr(t);if(Number(e)>Date.now())return 1}}function i(e){$(e).attr(t,Date.now()+2e3)}function s(e){$(e).removeAttr(t)}var o=new ClipboardJS(e,{target(e){return e.parentNode.nextElementSibling.querySelector("code .rouge-code")}});$(e).tooltip({trigger:"hover",placement:"left"});const r=$(e).children().attr("class");o.on("success",e=>{e.clearSelection();const t=e.trigger;var o;n(t)||(e=t,$(e).children().attr("class","fas fa-check"),e=t,o=$(e).attr(a),$(e).attr(l,o).tooltip("show"),i(t),setTimeout(()=>{var e;e=t,$(e).tooltip("hide").removeAttr(l),e=t,$(e).children().attr("class",r),s(t)},2e3))}),$("#copy-link").click(e=>{let t=$(e.target);if(!n(t)){var e=window.location.href,o=$("");$("body").append(o),o.val(e).select(),document.execCommand("copy"),o.remove();const r=t.attr(l);e=t.attr(a);t.attr(l,e).tooltip("show"),i(t),setTimeout(()=>{t.attr(l,r),s(t)},2e3)}})}),$(function(){const e=$("#topbar-title"),s="scroll-focus";$("a[href*='#']").not("[href='#']").not("[href='#0']").click(function(a){if(this.pathname.replace(/^\//,"")===location.pathname.replace(/^\//,"")&&location.hostname===this.hostname){var l=decodeURI(this.hash);let t=RegExp(/^#fnref:/).test(l),o=!t&&RegExp(/^#fn:/).test(l);var n=l.includes(":")?l.replace(/:/g,"\\:"):l;let r=$(n);var n=e.is(":visible"),i=$(window).width()<$(window).height();if(void 0!==r){a.preventDefault(),history.pushState&&history.pushState(null,null,l);a=$(window).scrollTop();let e=r.offset().top-=8;e{if(r.focus(),$(`[${s}=true]`).length&&$(`[${s}=true]`).attr(s,!1),$(":target").length&&$(":target").attr(s,!1),(o||t)&&r.attr(s,!0),r.is(":focus"))return!1;r.attr("tabindex","-1"),r.focus(),ScrollHelper.hasScrollUpTask()&&ScrollHelper.popScrollUpTask()})}}})}); +$(function(){$(window).scroll(()=>{50<$(this).scrollTop()&&"none"===$("#sidebar-trigger").css("display")?$("#back-to-top").fadeIn():$("#back-to-top").fadeOut()}),$("#back-to-top").click(()=>($("body,html").animate({scrollTop:0},800),!1))}),$(function(){$(".mode-toggle").click(t=>{t=$(t.target);(t.prop("tagName")==="button".toUpperCase()?t:t.parent()).blur(),flipMode()})});const ScrollHelper=function(){const t=$("body"),e="data-topbar-visible",o=$("#topbar-wrapper").outerHeight();let r=0,a=!1,l=!1;return{hideTopbar:()=>t.attr(e,!1),showTopbar:()=>t.attr(e,!0),addScrollUpTask:()=>{r+=1,a=a||!0},popScrollUpTask:()=>--r,hasScrollUpTask:()=>0!0===a,unlockTopbar:()=>a=!1,getTopbarHeight:()=>o,orientationLocked:()=>!0===l,lockOrientation:()=>l=!0,unLockOrientation:()=>l=!1}}();$(function(){const t=$("#sidebar-trigger"),e=$("#search-trigger"),o=$("#search-cancel"),r=$("#main"),a=$("#topbar-title"),l=$("#search-wrapper"),n=$("#search-result-wrapper"),i=$("#search-results"),s=$("#search-input"),c=$("#search-hints"),d=function(){let t=0;return{block(){t=window.scrollY,$("html,body").scrollTop(0)},release(){$("html,body").scrollTop(t)},getOffset(){return t}}}(),p={on(){t.addClass("unloaded"),a.addClass("unloaded"),e.addClass("unloaded"),l.addClass("d-flex"),o.addClass("loaded")},off(){o.removeClass("loaded"),l.removeClass("d-flex"),t.removeClass("unloaded"),a.removeClass("unloaded"),e.removeClass("unloaded")}},u=function(){let t=!1;return{on(){t||(d.block(),n.removeClass("unloaded"),r.addClass("unloaded"),t=!0)},off(){t&&(i.empty(),c.hasClass("unloaded")&&c.removeClass("unloaded"),n.addClass("unloaded"),r.removeClass("unloaded"),d.release(),s.val(""),t=!1)},isVisible(){return t}}}();function h(){return o.hasClass("loaded")}e.click(function(){p.on(),u.on(),s.focus()}),o.click(function(){p.off(),u.off()}),s.focus(function(){l.addClass("input-focus")}),s.focusout(function(){l.removeClass("input-focus")}),s.on("input",()=>{""===s.val()?h()?c.removeClass("unloaded"):u.off():(u.on(),h()&&c.addClass("unloaded"))})}),$(function(){var t=function(){const t="sidebar-display";let e=!1;const o=$("body");return{toggle(){!1===e?o.attr(t,""):o.removeAttr(t),e=!e}}}();$("#sidebar-trigger").click(t.toggle),$("#mask").click(t.toggle)}),$(function(){$('[data-toggle="tooltip"]').tooltip()}),$(function(){const e=$("#search-input"),o=ScrollHelper.getTopbarHeight();let t,r=0;function a(){0!==$(window).scrollTop()&&(ScrollHelper.lockOrientation(),ScrollHelper.hideTopbar())}screen.orientation?screen.orientation.onchange=()=>{var t=screen.orientation.type;"landscape-primary"!==t&&"landscape-secondary"!==t||a()}:$(window).on("orientationchange",()=>{$(window).width()<$(window).height()&&a()}),$(window).scroll(()=>{t=t||!0}),setInterval(()=>{t&&(!function(){var t=$(this).scrollTop();if(!(Math.abs(r-t)<=o)){if(t>r)ScrollHelper.hideTopbar(),e.is(":focus")&&e.blur();else if(t+$(window).height()<$(document).height()){if(ScrollHelper.hasScrollUpTask())return;ScrollHelper.topbarLocked()?ScrollHelper.unlockTopbar():ScrollHelper.orientationLocked()?ScrollHelper.unLockOrientation():ScrollHelper.showTopbar()}r=t}}(),t=!1)},250)}),$(function(){var t="div.post>h1:first-of-type",e=$(t);const n=$("#topbar-title");if(0!==e.length&&!e.hasClass("dynamic-title")&&!n.is(":hidden")){const i=n.text().trim();let r=e.text().trim(),a=!1,l=0;($("#page-category").length||$("#page-tag").length)&&/\s/.test(r)&&(r=r.replace(/[0-9]/g,"").trim()),e.offset().top<$(window).scrollTop()&&n.text(r);new IntersectionObserver(t=>{var e,o;a?(o=$(window).scrollTop(),e=l img[data-src], ${t} img[data-src].preview-img`).each(function(){var t=$(this).next(),t="EM"===t.prop("tagName")?t.text():"",e=$(this).attr("data-src");$(this).wrap(``)}),$(".popup").magnificPopup({type:"image",closeOnContentClick:!0,showCloseBtn:!1,zoom:{enabled:!0,duration:300,easing:"ease-in-out"}}),$(t+" a").has("img").addClass("img-link"))}),$(function(){var t=".code-header>button";const e="timeout",a="data-title-succeed",l="data-original-title";function n(t){if($(t)[0].hasAttribute(e)){t=$(t).attr(e);if(Number(t)>Date.now())return 1}}function i(t){$(t).attr(e,Date.now()+2e3)}function s(t){$(t).removeAttr(e)}var o=new ClipboardJS(t,{target(t){return t.parentNode.nextElementSibling.querySelector("code .rouge-code")}});$(t).tooltip({trigger:"hover",placement:"left"});const r=$(t).children().attr("class");o.on("success",t=>{t.clearSelection();const e=t.trigger;var o;n(e)||(t=e,$(t).children().attr("class","fas fa-check"),t=e,o=$(t).attr(a),$(t).attr(l,o).tooltip("show"),i(e),setTimeout(()=>{var t;t=e,$(t).tooltip("hide").removeAttr(l),t=e,$(t).children().attr("class",r),s(e)},2e3))}),$("#copy-link").click(t=>{let e=$(t.target);if(!n(e)){var t=window.location.href,o=$("");$("body").append(o),o.val(t).select(),document.execCommand("copy"),o.remove();const r=e.attr(l);t=e.attr(a);e.attr(l,t).tooltip("show"),i(e),setTimeout(()=>{e.attr(l,r),s(e)},2e3)}})}),$(function(){const t=$("#topbar-title"),s="scroll-focus";$("a[href*='#']").not("[href='#']").not("[href='#0']").click(function(a){if(this.pathname.replace(/^\//,"")===location.pathname.replace(/^\//,"")&&location.hostname===this.hostname){var l=decodeURI(this.hash);let e=RegExp(/^#fnref:/).test(l),o=!e&&RegExp(/^#fn:/).test(l);var n=l.includes(":")?l.replace(/:/g,"\\:"):l;let r=$(n);var n=t.is(":visible"),i=$(window).width()<$(window).height();if(void 0!==r){a.preventDefault(),history.pushState&&history.pushState(null,null,l);a=$(window).scrollTop();let t=r.offset().top-=8;t{if(r.focus(),$(`[${s}=true]`).length&&$(`[${s}=true]`).attr(s,!1),$(":target").length&&$(":target").attr(s,!1),(o||e)&&r.attr(s,!0),r.is(":focus"))return!1;r.attr("tabindex","-1"),r.focus(),ScrollHelper.hasScrollUpTask()&&ScrollHelper.popScrollUpTask()})}}})}); diff --git a/assets/js/dist/post.min.js b/assets/js/dist/post.min.js index 815349c..c1d086c 100644 --- a/assets/js/dist/post.min.js +++ b/assets/js/dist/post.min.js @@ -3,4 +3,4 @@ * © 2019 Cotes Chung * MIT Licensed */ -$(function(){$(window).scroll(()=>{50<$(this).scrollTop()&&"none"===$("#sidebar-trigger").css("display")?$("#back-to-top").fadeIn():$("#back-to-top").fadeOut()}),$("#back-to-top").click(()=>($("body,html").animate({scrollTop:0},800),!1))}),$(function(){$(".mode-toggle").click(t=>{t=$(t.target);(t.prop("tagName")==="button".toUpperCase()?t:t.parent()).blur(),flipMode()})});const ScrollHelper=function(){const t=$("body"),e="data-topbar-visible",o=$("#topbar-wrapper").outerHeight();let a=0,r=!1,l=!1;return{hideTopbar:()=>t.attr(e,!1),showTopbar:()=>t.attr(e,!0),addScrollUpTask:()=>{a+=1,r=r||!0},popScrollUpTask:()=>--a,hasScrollUpTask:()=>0!0===r,unlockTopbar:()=>r=!1,getTopbarHeight:()=>o,orientationLocked:()=>!0===l,lockOrientation:()=>l=!0,unLockOrientation:()=>l=!1}}(),LocaleHelper=($(function(){const t=$("#sidebar-trigger"),e=$("#search-trigger"),o=$("#search-cancel"),a=$("#main"),r=$("#topbar-title"),l=$("#search-wrapper"),n=$("#search-result-wrapper"),i=$("#search-results"),s=$("#search-input"),c=$("#search-hints"),d=function(){let t=0;return{block(){t=window.scrollY,$("html,body").scrollTop(0)},release(){$("html,body").scrollTop(t)},getOffset(){return t}}}(),p={on(){t.addClass("unloaded"),r.addClass("unloaded"),e.addClass("unloaded"),l.addClass("d-flex"),o.addClass("loaded")},off(){o.removeClass("loaded"),l.removeClass("d-flex"),t.removeClass("unloaded"),r.removeClass("unloaded"),e.removeClass("unloaded")}},u=function(){let t=!1;return{on(){t||(d.block(),n.removeClass("unloaded"),a.addClass("unloaded"),t=!0)},off(){t&&(i.empty(),c.hasClass("unloaded")&&c.removeClass("unloaded"),n.addClass("unloaded"),a.removeClass("unloaded"),d.release(),s.val(""),t=!1)},isVisible(){return t}}}();function h(){return o.hasClass("loaded")}e.click(function(){p.on(),u.on(),s.focus()}),o.click(function(){p.off(),u.off()}),s.focus(function(){l.addClass("input-focus")}),s.focusout(function(){l.removeClass("input-focus")}),s.on("input",()=>{""===s.val()?h()?c.removeClass("unloaded"):u.off():(u.on(),h()&&c.addClass("unloaded"))})}),$(function(){var t=function(){const t="sidebar-display";let e=!1;const o=$("body");return{toggle(){!1===e?o.attr(t,""):o.removeAttr(t),e=!e}}}();$("#sidebar-trigger").click(t.toggle),$("#mask").click(t.toggle)}),$(function(){$('[data-toggle="tooltip"]').tooltip()}),$(function(){const e=$("#search-input"),o=ScrollHelper.getTopbarHeight();let t,a=0;function r(){0!==$(window).scrollTop()&&(ScrollHelper.lockOrientation(),ScrollHelper.hideTopbar())}screen.orientation?screen.orientation.onchange=()=>{var t=screen.orientation.type;"landscape-primary"!==t&&"landscape-secondary"!==t||r()}:$(window).on("orientationchange",()=>{$(window).width()<$(window).height()&&r()}),$(window).scroll(()=>{t=t||!0}),setInterval(()=>{t&&(!function(){var t=$(this).scrollTop();if(!(Math.abs(a-t)<=o)){if(t>a)ScrollHelper.hideTopbar(),e.is(":focus")&&e.blur();else if(t+$(window).height()<$(document).height()){if(ScrollHelper.hasScrollUpTask())return;ScrollHelper.topbarLocked()?ScrollHelper.unlockTopbar():ScrollHelper.orientationLocked()?ScrollHelper.unLockOrientation():ScrollHelper.showTopbar()}a=t}}(),t=!1)},250)}),$(function(){var t="div.post>h1:first-of-type",e=$(t);const n=$("#topbar-title");if(0!==e.length&&!e.hasClass("dynamic-title")&&!n.is(":hidden")){const i=n.text().trim();let a=e.text().trim(),r=!1,l=0;($("#page-category").length||$("#page-tag").length)&&/\s/.test(a)&&(a=a.replace(/[0-9]/g,"").trim()),e.offset().top<$(window).scrollTop()&&n.text(a);new IntersectionObserver(t=>{var e,o;r?(o=$(window).scrollTop(),e=l img[data-src], ${e} img[data-src].preview-img`).each(function(){var t=$(this).next(),t="EM"===t.prop("tagName")?t.text():"",e=$(this).attr("data-src");$(this).wrap(``)}),$(".popup").magnificPopup({type:"image",closeOnContentClick:!0,showCloseBtn:!1,zoom:{enabled:!0,duration:300,easing:"ease-in-out"}}),$(e+" a").has("img").addClass("img-link"))}),function(){const t=$("html").attr("lang").substr(0,2),e="data-ts",o="data-df";return{locale:()=>t,attrTimestamp:()=>e,attrDateFormat:()=>o,getTimestamp:t=>Number(t.attr(e)),getDateFormat:t=>t.attr(o)}}());$(function(){dayjs.locale(LocaleHelper.locale()),dayjs.extend(window.dayjs_plugin_localizedFormat),$(`[${LocaleHelper.attrTimestamp()}]`).each(function(){var t=dayjs.unix(LocaleHelper.getTimestamp($(this))),e=t.format(LocaleHelper.getDateFormat($(this))),e=($(this).text(e),$(this).removeAttr(LocaleHelper.attrTimestamp()),$(this).removeAttr(LocaleHelper.attrDateFormat()),$(this).attr("data-toggle"));void 0!==e&&"tooltip"===e&&(e=t.format("llll"),$(this).attr("data-original-title",e))})}),$(function(){var t=".code-header>button";const e="timeout",r="data-title-succeed",l="data-original-title";function n(t){if($(t)[0].hasAttribute(e)){t=$(t).attr(e);if(Number(t)>Date.now())return 1}}function i(t){$(t).attr(e,Date.now()+2e3)}function s(t){$(t).removeAttr(e)}var o=new ClipboardJS(t,{target(t){return t.parentNode.nextElementSibling.querySelector("code .rouge-code")}});$(t).tooltip({trigger:"hover",placement:"left"});const a=$(t).children().attr("class");o.on("success",t=>{t.clearSelection();const e=t.trigger;var o;n(e)||(t=e,$(t).children().attr("class","fas fa-check"),t=e,o=$(t).attr(r),$(t).attr(l,o).tooltip("show"),i(e),setTimeout(()=>{var t;t=e,$(t).tooltip("hide").removeAttr(l),t=e,$(t).children().attr("class",a),s(e)},2e3))}),$("#copy-link").click(t=>{let e=$(t.target);if(!n(e)){var t=window.location.href,o=$("");$("body").append(o),o.val(t).select(),document.execCommand("copy"),o.remove();const a=e.attr(l);t=e.attr(r);e.attr(l,t).tooltip("show"),i(e),setTimeout(()=>{e.attr(l,a),s(e)},2e3)}})}),$(function(){const t=$("#topbar-title"),s="scroll-focus";$("a[href*='#']").not("[href='#']").not("[href='#0']").click(function(r){if(this.pathname.replace(/^\//,"")===location.pathname.replace(/^\//,"")&&location.hostname===this.hostname){var l=decodeURI(this.hash);let e=RegExp(/^#fnref:/).test(l),o=!e&&RegExp(/^#fn:/).test(l);var n=l.includes(":")?l.replace(/:/g,"\\:"):l;let a=$(n);var n=t.is(":visible"),i=$(window).width()<$(window).height();if(void 0!==a){r.preventDefault(),history.pushState&&history.pushState(null,null,l);r=$(window).scrollTop();let t=a.offset().top-=8;t{if(a.focus(),$(`[${s}=true]`).length&&$(`[${s}=true]`).attr(s,!1),$(":target").length&&$(":target").attr(s,!1),(o||e)&&a.attr(s,!0),a.is(":focus"))return!1;a.attr("tabindex","-1"),a.focus(),ScrollHelper.hasScrollUpTask()&&ScrollHelper.popScrollUpTask()})}}})}); +$(function(){$(window).scroll(()=>{50<$(this).scrollTop()&&"none"===$("#sidebar-trigger").css("display")?$("#back-to-top").fadeIn():$("#back-to-top").fadeOut()}),$("#back-to-top").click(()=>($("body,html").animate({scrollTop:0},800),!1))}),$(function(){$(".mode-toggle").click(t=>{t=$(t.target);(t.prop("tagName")==="button".toUpperCase()?t:t.parent()).blur(),flipMode()})});const ScrollHelper=function(){const t=$("body"),e="data-topbar-visible",o=$("#topbar-wrapper").outerHeight();let a=0,r=!1,l=!1;return{hideTopbar:()=>t.attr(e,!1),showTopbar:()=>t.attr(e,!0),addScrollUpTask:()=>{a+=1,r=r||!0},popScrollUpTask:()=>--a,hasScrollUpTask:()=>0!0===r,unlockTopbar:()=>r=!1,getTopbarHeight:()=>o,orientationLocked:()=>!0===l,lockOrientation:()=>l=!0,unLockOrientation:()=>l=!1}}(),LocaleHelper=($(function(){const t=$("#sidebar-trigger"),e=$("#search-trigger"),o=$("#search-cancel"),a=$("#main"),r=$("#topbar-title"),l=$("#search-wrapper"),n=$("#search-result-wrapper"),i=$("#search-results"),s=$("#search-input"),c=$("#search-hints"),d=function(){let t=0;return{block(){t=window.scrollY,$("html,body").scrollTop(0)},release(){$("html,body").scrollTop(t)},getOffset(){return t}}}(),p={on(){t.addClass("unloaded"),r.addClass("unloaded"),e.addClass("unloaded"),l.addClass("d-flex"),o.addClass("loaded")},off(){o.removeClass("loaded"),l.removeClass("d-flex"),t.removeClass("unloaded"),r.removeClass("unloaded"),e.removeClass("unloaded")}},u=function(){let t=!1;return{on(){t||(d.block(),n.removeClass("unloaded"),a.addClass("unloaded"),t=!0)},off(){t&&(i.empty(),c.hasClass("unloaded")&&c.removeClass("unloaded"),n.addClass("unloaded"),a.removeClass("unloaded"),d.release(),s.val(""),t=!1)},isVisible(){return t}}}();function h(){return o.hasClass("loaded")}e.click(function(){p.on(),u.on(),s.focus()}),o.click(function(){p.off(),u.off()}),s.focus(function(){l.addClass("input-focus")}),s.focusout(function(){l.removeClass("input-focus")}),s.on("input",()=>{""===s.val()?h()?c.removeClass("unloaded"):u.off():(u.on(),h()&&c.addClass("unloaded"))})}),$(function(){var t=function(){const t="sidebar-display";let e=!1;const o=$("body");return{toggle(){!1===e?o.attr(t,""):o.removeAttr(t),e=!e}}}();$("#sidebar-trigger").click(t.toggle),$("#mask").click(t.toggle)}),$(function(){$('[data-toggle="tooltip"]').tooltip()}),$(function(){const e=$("#search-input"),o=ScrollHelper.getTopbarHeight();let t,a=0;function r(){0!==$(window).scrollTop()&&(ScrollHelper.lockOrientation(),ScrollHelper.hideTopbar())}screen.orientation?screen.orientation.onchange=()=>{var t=screen.orientation.type;"landscape-primary"!==t&&"landscape-secondary"!==t||r()}:$(window).on("orientationchange",()=>{$(window).width()<$(window).height()&&r()}),$(window).scroll(()=>{t=t||!0}),setInterval(()=>{t&&(!function(){var t=$(this).scrollTop();if(!(Math.abs(a-t)<=o)){if(t>a)ScrollHelper.hideTopbar(),e.is(":focus")&&e.blur();else if(t+$(window).height()<$(document).height()){if(ScrollHelper.hasScrollUpTask())return;ScrollHelper.topbarLocked()?ScrollHelper.unlockTopbar():ScrollHelper.orientationLocked()?ScrollHelper.unLockOrientation():ScrollHelper.showTopbar()}a=t}}(),t=!1)},250)}),$(function(){var t="div.post>h1:first-of-type",e=$(t);const n=$("#topbar-title");if(0!==e.length&&!e.hasClass("dynamic-title")&&!n.is(":hidden")){const i=n.text().trim();let a=e.text().trim(),r=!1,l=0;($("#page-category").length||$("#page-tag").length)&&/\s/.test(a)&&(a=a.replace(/[0-9]/g,"").trim()),e.offset().top<$(window).scrollTop()&&n.text(a);new IntersectionObserver(t=>{var e,o;r?(o=$(window).scrollTop(),e=l img[data-src], ${t} img[data-src].preview-img`).each(function(){var t=$(this).next(),t="EM"===t.prop("tagName")?t.text():"",e=$(this).attr("data-src");$(this).wrap(``)}),$(".popup").magnificPopup({type:"image",closeOnContentClick:!0,showCloseBtn:!1,zoom:{enabled:!0,duration:300,easing:"ease-in-out"}}),$(t+" a").has("img").addClass("img-link"))}),function(){const t=$("html").attr("lang").substr(0,2),e="data-ts",o="data-df";return{locale:()=>t,attrTimestamp:()=>e,attrDateFormat:()=>o,getTimestamp:t=>Number(t.attr(e)),getDateFormat:t=>t.attr(o)}}());$(function(){dayjs.locale(LocaleHelper.locale()),dayjs.extend(window.dayjs_plugin_localizedFormat),$(`[${LocaleHelper.attrTimestamp()}]`).each(function(){var t=dayjs.unix(LocaleHelper.getTimestamp($(this))),e=t.format(LocaleHelper.getDateFormat($(this))),e=($(this).text(e),$(this).removeAttr(LocaleHelper.attrTimestamp()),$(this).removeAttr(LocaleHelper.attrDateFormat()),$(this).attr("data-toggle"));void 0!==e&&"tooltip"===e&&(e=t.format("llll"),$(this).attr("data-original-title",e))})}),$(function(){var t=".code-header>button";const e="timeout",r="data-title-succeed",l="data-original-title";function n(t){if($(t)[0].hasAttribute(e)){t=$(t).attr(e);if(Number(t)>Date.now())return 1}}function i(t){$(t).attr(e,Date.now()+2e3)}function s(t){$(t).removeAttr(e)}var o=new ClipboardJS(t,{target(t){return t.parentNode.nextElementSibling.querySelector("code .rouge-code")}});$(t).tooltip({trigger:"hover",placement:"left"});const a=$(t).children().attr("class");o.on("success",t=>{t.clearSelection();const e=t.trigger;var o;n(e)||(t=e,$(t).children().attr("class","fas fa-check"),t=e,o=$(t).attr(r),$(t).attr(l,o).tooltip("show"),i(e),setTimeout(()=>{var t;t=e,$(t).tooltip("hide").removeAttr(l),t=e,$(t).children().attr("class",a),s(e)},2e3))}),$("#copy-link").click(t=>{let e=$(t.target);if(!n(e)){var t=window.location.href,o=$("");$("body").append(o),o.val(t).select(),document.execCommand("copy"),o.remove();const a=e.attr(l);t=e.attr(r);e.attr(l,t).tooltip("show"),i(e),setTimeout(()=>{e.attr(l,a),s(e)},2e3)}})}),$(function(){const t=$("#topbar-title"),s="scroll-focus";$("a[href*='#']").not("[href='#']").not("[href='#0']").click(function(r){if(this.pathname.replace(/^\//,"")===location.pathname.replace(/^\//,"")&&location.hostname===this.hostname){var l=decodeURI(this.hash);let e=RegExp(/^#fnref:/).test(l),o=!e&&RegExp(/^#fn:/).test(l);var n=l.includes(":")?l.replace(/:/g,"\\:"):l;let a=$(n);var n=t.is(":visible"),i=$(window).width()<$(window).height();if(void 0!==a){r.preventDefault(),history.pushState&&history.pushState(null,null,l);r=$(window).scrollTop();let t=a.offset().top-=8;t{if(a.focus(),$(`[${s}=true]`).length&&$(`[${s}=true]`).attr(s,!1),$(":target").length&&$(":target").attr(s,!1),(o||e)&&a.attr(s,!0),a.is(":focus"))return!1;a.attr("tabindex","-1"),a.focus(),ScrollHelper.hasScrollUpTask()&&ScrollHelper.popScrollUpTask()})}}})}); diff --git a/assets/lib b/assets/lib index 5d177b3..e372141 160000 --- a/assets/lib +++ b/assets/lib @@ -1 +1 @@ -Subproject commit 5d177b3cbbea89e3392eb48c0ee580c6a0ce41d1 +Subproject commit e372141074f370c6f03b68b5264e7663f2b7477c From bffaf6374f265cec96ef743d42b46fbec3b59797 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Sun, 11 Dec 2022 07:09:40 +0800 Subject: [PATCH 13/32] feat: support LQIP for images --- _includes/refactor-content.html | 112 +++++++++++++++++------------- _layouts/post.html | 16 +++-- _sass/addon/commons.scss | 35 ++++++---- _sass/colors/dark-typography.scss | 6 +- _sass/layout/post.scss | 2 +- 5 files changed, 100 insertions(+), 71 deletions(-) diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html index 4425712..b3a1523 100644 --- a/_includes/refactor-content.html +++ b/_includes/refactor-content.html @@ -51,23 +51,43 @@ {% assign _img_content = nil %} {% assign _img_snippets = _content | split: IMG_TAG %} + + {% if site.img_cdn %} + {% if site.img_cdn contains '//' %} + {% assign _path_prefix = site.img_cdn %} + {% else %} + {% assign _path_prefix = site.img_cdn | relative_url %} + {% endif %} + {% else %} + {% assign _path_prefix = site.baseurl %} + {% endif %} + + + {% if page.img_path %} + {% assign _path = page.img_path | append: '/' | replace: '//', '/' %} + {% assign _path_prefix = _path_prefix | append: _path %} + {% endif %} + {% for _img_snippet in _img_snippets %} {% if forloop.first %} {% assign _img_content = _img_snippet %} {% continue %} {% endif %} - {% assign _width = nil %} - {% assign _height = nil %} - {% assign _src = nil %} - {% assign _left = _img_snippet | split: '>' | first %} {% assign _right = _img_snippet | remove: _left %} - {% assign _left = _left | remove: ' /' %} - {% assign _left = _left | replace: ' w=', ' width=' | replace: ' h=', ' height=' %} + {% unless _left contains 'src=' %} + {% continue %} + {% endunless %} + + {% assign _left = _left | remove: ' /' | replace: ' w=', ' width=' | replace: ' h=', ' height=' %} {% assign _attrs = _left | split: ' ' %} + {% assign _width = nil %} + {% assign _height = nil %} + {% assign _lqip = nil %} + {% for _attr in _attrs %} {% assign _pair = _attr | split: '="' %} {% if _pair.size < 2 %} @@ -75,7 +95,7 @@ {% endif %} {% capture _key %}{{ _pair | first }}{% endcapture %} - {% capture _value %}{{ _pair | last | replace: '"', '' }}{% endcapture %} + {% capture _value %}{{ _pair | last | remove: '"' }}{% endcapture %} {% case _key %} {% when 'width' %} @@ -84,67 +104,61 @@ {% assign _height = _value %} {% when 'src' %} {% assign _src = _value %} + {% when 'lqip' %} + {% assign _lqip = _value %} {% endcase %} - {% if _width and _height and _src %} - {% break %} - {% endif %} {% endfor %} - {% if _src %} - {% unless _src contains '://' %} - - {% if site.img_cdn %} - {% if site.img_cdn contains '//' %} - {% assign _src_prefix = site.img_cdn %} - {% else %} - {% assign _src_prefix = site.img_cdn | relative_url %} - {% endif %} - {% else %} - {% assign _src_prefix = site.baseurl %} - {% endif %} - - - {% if page.img_path %} - {% assign _path = page.img_path | append: '/' | replace: '//', '/' %} - {% assign _src_prefix = _src_prefix | append: _path %} - {% endif %} - - {% assign _final_src = _src_prefix | append: _src %} - {% assign _left = _left | replace: _src, _final_src %} + {% unless _src contains '//' %} + {% assign _final_src = _path_prefix | append: _src %} + {% capture _src_from %}"{{ _src }}"{% endcapture %} + {% capture _src_to %}"{{ _final_src }}"{% endcapture %} + {% assign _left = _left | replace: _src_from, _src_to %} + {% endunless %} + {% if _lqip %} + {% unless _lqip contains ':' %} + {% assign _final_lqip = _path_prefix | append: _lqip %} + {% capture _lqip_from %}"{{ _lqip }}"{% endcapture %} + {% capture _lqip_to %}"{{ _final_lqip }}"{% endcapture %} + {% assign _left = _left | replace: _lqip_from, _lqip_to %} {% endunless %} - - - - {% if _left contains 'class=' %} - {% assign _left = _left | replace: 'class="', 'class="lazyload ' %} - {% else %} - {% assign _left = _left | replace: 'src=', 'class="lazyload" src=' %} - {% endif %} - - {% assign _left = _left | replace: 'src=', 'data-src=' %} - {% endif %} - + + {% if _left contains 'class=' %} + {% assign _left = _left | replace: 'class="', 'class="lazyload ' %} + {% else %} + {% assign _left = _left | replace: 'src=', 'class="lazyload" src=' %} + {% endif %} - {% if _width and _height %} - {%- capture _svg -%} - src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{ _width }} {{ _height }}'%3E%3C/svg%3E" - {%- endcapture -%} + {% assign _left = _left | replace: 'src=', 'data-src=' %} - {% assign _left = _svg | append: ' ' | append: _left %} + + {% if _lqip %} + {% assign _left = _left | replace: ' lqip=', ' data-lqip="true" src=' %} + {% else %} + {% if _width and _height %} + + {%- capture _svg -%} + src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{ _width }} {{ _height }}'%3E%3C/svg%3E" + {%- endcapture -%} + {% assign _left = _svg | append: ' ' | append: _left %} + {% endif %} {% endif %} {% assign _left = _left | append: ' data-proofer-ignore' %} + {% assign _img_content = _img_content | append: IMG_TAG | append: _left | append: _right %} {% endfor %} - {% assign _content = _img_content %} + {% if _img_content %} + {% assign _content = _img_content %} + {% endif %} {% endif %} diff --git a/_layouts/post.html b/_layouts/post.html index 18b0503..3a32921 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -27,12 +27,9 @@ tail_includes: {% endif %} {% if page.image %} - {% capture bg %} - {% unless page.image.no_bg %}{{ 'bg' }}{% endunless %} - {% endcapture %} -
- {{ page.image.alt | default: + {% endif %} + + {% if page.image.lqip %} + lqip="{{ page.image.lqip }}" + {% endif %} + + > {% if page.image.alt %}
{{ page.image.alt }}
{% endif %} -
{% endif %} diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index bdbd192..e7692fe 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -184,16 +184,27 @@ i { /* fontawesome icons */ } img[data-src] { - margin: 0.5rem 0; - - &.lazyload, - &.lazyloading { - opacity: 0; + @at-root #main #{&} { + margin: 0.5rem 0; } - &.lazyloaded { - opacity: 1; - transition: opacity 0.5s; + &[data-lqip="true"] { + &.lazyload, + &.lazyloading { + filter: blur(20px); + } + } + + &:not([data-lqip="true"]) { + &.lazyload, + &.lazyloading { + opacity: 0; + } + + &.lazyloaded { + opacity: 1; + transition: opacity 0.5s; + } } &.left { @@ -395,6 +406,10 @@ img[data-src] { margin-bottom: 1.5rem; } + img[data-src]:not(.normal):not(.left):not(.right) { + @include align-center; + } + a { &.img-link { @extend %no-cursor; @@ -403,10 +418,6 @@ img[data-src] { /* created by `_includes/img-extra.html` */ &.popup { cursor: zoom-in; - - > img[data-src]:not(.normal):not(.left):not(.right) { - @include align-center; - } } &:hover { diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss index 7b7a39f..9c60b93 100644 --- a/_sass/colors/dark-typography.scss +++ b/_sass/colors/dark-typography.scss @@ -96,8 +96,10 @@ --timeline-year-dot-color: var(--timeline-color); .post img[data-src] { - -webkit-filter: brightness(95%); - filter: brightness(95%); + &.lazyloaded { + -webkit-filter: brightness(95%); + filter: brightness(95%); + } } hr { diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss index 2fea727..e1b7dab 100644 --- a/_sass/layout/post.scss +++ b/_sass/layout/post.scss @@ -30,7 +30,7 @@ img.preview-img { margin: 0; border-radius: 6px; - &.bg { + &:not(.no-bg) { background: var(--preview-img-bg); } } From ab16fdc7fc26811130b98a1773beb62bff6182e8 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Tue, 13 Dec 2022 21:41:32 +0800 Subject: [PATCH 14/32] feat: add shimmer background when image loads --- _includes/refactor-content.html | 57 +++++++--- _javascript/utils/img-extra.js | 31 ++---- _layouts/post.html | 23 ++-- _sass/addon/commons.scss | 163 +++++++++++++++++------------ _sass/addon/module.scss | 9 ++ _sass/colors/dark-typography.scss | 9 +- _sass/colors/light-typography.scss | 9 +- _sass/layout/post.scss | 17 ++- assets/js/dist/page.min.js | 2 +- assets/js/dist/post.min.js | 2 +- 10 files changed, 207 insertions(+), 115 deletions(-) diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html index b3a1523..e98b991 100644 --- a/_includes/refactor-content.html +++ b/_includes/refactor-content.html @@ -81,21 +81,22 @@ {% continue %} {% endunless %} - {% assign _left = _left | remove: ' /' | replace: ' w=', ' width=' | replace: ' h=', ' height=' %} - {% assign _attrs = _left | split: ' ' %} + {% assign _left = _left | remove: ' /' | replace: ' w=', ' width=' | replace: ' h=', ' height=' %} + {% assign _attrs = _left | split: '" ' %} {% assign _width = nil %} {% assign _height = nil %} {% assign _lqip = nil %} + {% assign _class = nil %} {% for _attr in _attrs %} - {% assign _pair = _attr | split: '="' %} - {% if _pair.size < 2 %} + {% unless _attr contains '=' %} {% continue %} - {% endif %} + {% endunless %} + {% assign _pair = _attr | remove: '"' | split: '=' %} {% capture _key %}{{ _pair | first }}{% endcapture %} - {% capture _value %}{{ _pair | last | remove: '"' }}{% endcapture %} + {% capture _value %}{{ _pair | last }}{% endcapture %} {% case _key %} {% when 'width' %} @@ -106,10 +107,20 @@ {% assign _src = _value %} {% when 'lqip' %} {% assign _lqip = _value %} + {% when 'class' %} + {% assign _class = _value %} {% endcase %} {% endfor %} + + {% if _class %} + {% capture _old_class %}class="{{ _class }}"{% endcapture %} + {% assign _left = _left | remove: _old_class %} + {% endif %} + + {% assign _final_src = nil %} + {% unless _src contains '//' %} {% assign _final_src = _path_prefix | append: _src %} {% capture _src_from %}"{{ _src }}"{% endcapture %} @@ -127,31 +138,51 @@ {% endif %} + {% assign _left = _left | replace: 'src=', 'data-src=' %} {% if _left contains 'class=' %} - {% assign _left = _left | replace: 'class="', 'class="lazyload ' %} + {% assign _left = _left | replace: 'class="', 'class="lazyload '%} {% else %} - {% assign _left = _left | replace: 'src=', 'class="lazyload" src=' %} + {% assign _left = _left | append: ' class="lazyload"' %} {% endif %} - {% assign _left = _left | replace: 'src=', 'data-src=' %} - - + {% if _lqip %} {% assign _left = _left | replace: ' lqip=', ' data-lqip="true" src=' %} {% else %} {% if _width and _height %} - + {%- capture _svg -%} src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{ _width }} {{ _height }}'%3E%3C/svg%3E" {%- endcapture -%} {% assign _left = _svg | append: ' ' | append: _left %} + {% assign _class = _class | append: ' shimmer' %} {% endif %} {% endif %} {% assign _left = _left | append: ' data-proofer-ignore' %} - + + {% assign _parent = _right | slice: 1, 4 %} + + {% if _parent == '' %} + + {% assign _size = _img_content | size | minus: 1 %} + {% capture _class %} + class="img-link{% unless _lqip %} shimmer{% endunless %}" + {% endcapture %} + {% assign _img_content = _img_content | slice: 0, _size | append: _class | append: '>' %} + + {% else %} + + {%- capture _wrapper_start -%} + + {%- endcapture -%} + {% assign _img_content = _img_content | append: _wrapper_start %} + {% assign _right = _right | prepend: '> {% assign _img_content = _img_content | append: IMG_TAG | append: _left | append: _right %} {% endfor %} diff --git a/_javascript/utils/img-extra.js b/_javascript/utils/img-extra.js index e371244..90a3f49 100644 --- a/_javascript/utils/img-extra.js +++ b/_javascript/utils/img-extra.js @@ -1,26 +1,13 @@ /** - Set up image popup stuff (https://github.com/dimsemenov/Magnific-Popup) + * Set up image stuff */ -$(function () { - const IMG_SCOPE = '#main > div.row:first-child > div:first-child'; - - if ($(`${IMG_SCOPE} img`).length <= 0) { +(function() { + if ($('#core-wrapper img[data-src]') <= 0) { return; } - /* popup */ - - $(`${IMG_SCOPE} p > img[data-src], ${IMG_SCOPE} img[data-src].preview-img`).each( - function () { - let nextTag = $(this).next(); - const title = nextTag.prop('tagName') === 'EM' ? nextTag.text() : ''; - const src = $(this).attr('data-src'); // created by lozad.js - - $(this).wrap(``); - } - ); - + /* See: */ $('.popup').magnificPopup({ type: 'image', closeOnContentClick: true, @@ -32,8 +19,10 @@ $(function () { } }); - /* markup the image links */ + /* Stop shimmer when image loaded */ + document.addEventListener('lazyloaded', function(e) { + const $img = $(e.target); + $img.parent().removeClass('shimmer'); + }); - $(`${IMG_SCOPE} a`).has('img').addClass('img-link'); - -}); +})(); diff --git a/_layouts/post.html b/_layouts/post.html index 3a32921..a55031e 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -27,32 +27,37 @@ tail_includes: {% endif %} {% if page.image %} -
- {{ page.image.alt | default: - - {% if page.image.alt %} +
+ + {%- if page.image.alt -%}
{{ page.image.alt }}
- {% endif %} + {%- endif -%}
{% endif %} diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index e7692fe..6ea733d 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -83,6 +83,47 @@ a { img { max-width: 100%; height: auto; + + &[data-src] { + &.lazyloaded { + z-index: 1; + -webkit-animation: fade-in 0.4s ease-in; + animation: fade-in 0.4s ease-in; + } + + &[data-lqip="true"] { + &.lazyload, + &.lazyloading { + -webkit-filter: blur(20px); + filter: blur(20px); + } + } + + &:not([data-lqip="true"]) { + &.lazyload, + &.lazyloading { + background: var(--img-bg); + } + } + + &.shadow { + -webkit-filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08)); + filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08)); + box-shadow: none !important; /* cover the Bootstrap 4.6.1 styles */ + } + + @extend %img-caption; + } + + @-webkit-keyframes fade-in { + from { opacity: 0; } + to { opacity: 1; } + } + + @keyframes fade-in { + from { opacity: 0; } + to { opacity: 1; } + } } blockquote { @@ -183,49 +224,6 @@ i { /* fontawesome icons */ } } -img[data-src] { - @at-root #main #{&} { - margin: 0.5rem 0; - } - - &[data-lqip="true"] { - &.lazyload, - &.lazyloading { - filter: blur(20px); - } - } - - &:not([data-lqip="true"]) { - &.lazyload, - &.lazyloading { - opacity: 0; - } - - &.lazyloaded { - opacity: 1; - transition: opacity 0.5s; - } - } - - &.left { - float: left; - margin: 0.75rem 1rem 1rem 0; - } - - &.right { - float: right; - margin: 0.75rem 0 1rem 1rem; - } - - &.shadow { - -webkit-filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08)); - filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08)); - box-shadow: none !important; /* cover the Bootstrap 4.6.1 styles */ - } - - @extend %img-caption; -} - /* --- Panels --- */ .access { @@ -406,26 +404,14 @@ img[data-src] { margin-bottom: 1.5rem; } - img[data-src]:not(.normal):not(.left):not(.right) { - @include align-center; - } - - a { - &.img-link { - @extend %no-cursor; - } - - /* created by `_includes/img-extra.html` */ - &.popup { - cursor: zoom-in; - } - - &:hover { - code { - @extend %link-hover; + p { + > img[data-src], + > a.popup { + &:not(.normal):not(.left):not(.right) { + @include align-center; } } - } /* a */ + } } .pageviews .fa-spinner { @@ -457,6 +443,14 @@ img[data-src] { overflow-wrap: break-word; a { + &.popup { + @extend %no-cursor; + @extend %img-caption; + @include mt-mb(0.5rem); + + cursor: zoom-in; + } + &:not(.img-link) { @extend %link-underline; @@ -464,10 +458,6 @@ img[data-src] { @extend %link-hover; } } - - &.img-link { - @extend %img-caption; - } } ol, @@ -553,6 +543,39 @@ img[data-src] { } } +.img-link { + color: transparent; + display: inline-flex; + + @extend %img-rounded; +} + +.shimmer { + overflow: hidden; + position: relative; + background: var(--img-bg); + + &::before { + content: ""; + position: absolute; + background: var(--shimmer-bg); + height: 100%; + width: 100%; + -webkit-animation: shimmer 1s infinite; + animation: shimmer 1s infinite; + } + + @-webkit-keyframes shimmer { + 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } + 100% { -webkit-transform: translateX(100%); transform: translateX(100%); } + } + + @keyframes shimmer { + 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } + 100% { -webkit-transform: translateX(100%); transform: translateX(100%); } + } +} + /* --- buttons --- */ .btn-lang { border: 1px solid !important; @@ -622,6 +645,16 @@ img[data-src] { transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; } +.left { + float: left; + margin: 0.75rem 1rem 1rem 0 !important; +} + +.right { + float: right; + margin: 0.75rem 0 1rem 1rem !important; +} + /* --- Overriding --- */ /* magnific-popup */ diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss index 1f98002..a00e2dc 100644 --- a/_sass/addon/module.scss +++ b/_sass/addon/module.scss @@ -90,6 +90,10 @@ font-style: normal; } +%img-rounded { + border-radius: 10px; +} + %img-caption { + em { display: block; @@ -114,6 +118,11 @@ text-decoration: none; } +@mixin mt-mb($value) { + margin-top: $value; + margin-bottom: $value; +} + @mixin ml-mr($value) { margin-left: $value; margin-right: $value; diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss index 9c60b93..f834f84 100644 --- a/_sass/colors/dark-typography.scss +++ b/_sass/colors/dark-typography.scss @@ -26,6 +26,14 @@ --label-color: rgb(108, 117, 125); --checkbox-color: rgb(118, 120, 121); --checkbox-checked-color: var(--link-color); + --img-bg: radial-gradient(circle, rgb(22, 22, 24) 0%, rgb(32, 32, 32) 100%); + --shimmer-bg: + linear-gradient( + 90deg, + rgba(255, 255, 255, 0) 0%, + rgba(58, 55, 55, 0.4) 50%, + rgba(255, 255, 255, 0) 100% + ); /* Sidebar */ --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%); @@ -65,7 +73,6 @@ --card-bg: rgb(39, 40, 43); --card-border-color: rgb(53, 53, 60); --card-box-shadow: var(--main-bg); - --preview-img-bg: radial-gradient(circle, rgb(22, 22, 24) 0%, rgb(32, 32, 32) 100%); --kbd-wrap-color: #6a6a6a; --kbd-text-color: #d3d3d3; --kbd-bg-color: #242424; diff --git a/_sass/colors/light-typography.scss b/_sass/colors/light-typography.scss index 5e653f9..940d7b5 100644 --- a/_sass/colors/light-typography.scss +++ b/_sass/colors/light-typography.scss @@ -24,6 +24,14 @@ --btn-box-shadow: #eaeaea; --checkbox-color: #c5c5c5; --checkbox-checked-color: #07a8f7; + --img-bg: radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(249, 249, 249) 100%); + --shimmer-bg: + linear-gradient( + 90deg, + rgba(250, 250, 250, 0) 0%, + rgba(232, 230, 230, 1) 50%, + rgba(250, 250, 250, 0) 100% + ); /* Sidebar */ --sidebar-bg: #eeeeee; @@ -64,7 +72,6 @@ --tb-odd-bg: #fbfcfd; --tb-border-color: #eaeaea; --dash-color: silver; - --preview-img-bg: radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(249, 249, 249) 100%); --kbd-wrap-color: #bdbdbd; --kbd-text-color: var(--text-color); --kbd-bg-color: white; diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss index e1b7dab..146caba 100644 --- a/_sass/layout/post.scss +++ b/_sass/layout/post.scss @@ -26,12 +26,23 @@ color: var(--text-color); } -img.preview-img { +%preview-margin { margin: 0; - border-radius: 6px; +} + +.preview-img { + @include align-center; + @extend %preview-margin; &:not(.no-bg) { - background: var(--preview-img-bg); + img.lazyloaded { + background: var(--img-bg); + } + } + + img { + @extend %preview-margin; + @extend %img-rounded; } } diff --git a/assets/js/dist/page.min.js b/assets/js/dist/page.min.js index cd90722..59cd096 100644 --- a/assets/js/dist/page.min.js +++ b/assets/js/dist/page.min.js @@ -3,4 +3,4 @@ * © 2019 Cotes Chung * MIT Licensed */ -$(function(){$(window).scroll(()=>{50<$(this).scrollTop()&&"none"===$("#sidebar-trigger").css("display")?$("#back-to-top").fadeIn():$("#back-to-top").fadeOut()}),$("#back-to-top").click(()=>($("body,html").animate({scrollTop:0},800),!1))}),$(function(){$(".mode-toggle").click(t=>{t=$(t.target);(t.prop("tagName")==="button".toUpperCase()?t:t.parent()).blur(),flipMode()})});const ScrollHelper=function(){const t=$("body"),e="data-topbar-visible",o=$("#topbar-wrapper").outerHeight();let r=0,a=!1,l=!1;return{hideTopbar:()=>t.attr(e,!1),showTopbar:()=>t.attr(e,!0),addScrollUpTask:()=>{r+=1,a=a||!0},popScrollUpTask:()=>--r,hasScrollUpTask:()=>0!0===a,unlockTopbar:()=>a=!1,getTopbarHeight:()=>o,orientationLocked:()=>!0===l,lockOrientation:()=>l=!0,unLockOrientation:()=>l=!1}}();$(function(){const t=$("#sidebar-trigger"),e=$("#search-trigger"),o=$("#search-cancel"),r=$("#main"),a=$("#topbar-title"),l=$("#search-wrapper"),n=$("#search-result-wrapper"),i=$("#search-results"),s=$("#search-input"),c=$("#search-hints"),d=function(){let t=0;return{block(){t=window.scrollY,$("html,body").scrollTop(0)},release(){$("html,body").scrollTop(t)},getOffset(){return t}}}(),p={on(){t.addClass("unloaded"),a.addClass("unloaded"),e.addClass("unloaded"),l.addClass("d-flex"),o.addClass("loaded")},off(){o.removeClass("loaded"),l.removeClass("d-flex"),t.removeClass("unloaded"),a.removeClass("unloaded"),e.removeClass("unloaded")}},u=function(){let t=!1;return{on(){t||(d.block(),n.removeClass("unloaded"),r.addClass("unloaded"),t=!0)},off(){t&&(i.empty(),c.hasClass("unloaded")&&c.removeClass("unloaded"),n.addClass("unloaded"),r.removeClass("unloaded"),d.release(),s.val(""),t=!1)},isVisible(){return t}}}();function h(){return o.hasClass("loaded")}e.click(function(){p.on(),u.on(),s.focus()}),o.click(function(){p.off(),u.off()}),s.focus(function(){l.addClass("input-focus")}),s.focusout(function(){l.removeClass("input-focus")}),s.on("input",()=>{""===s.val()?h()?c.removeClass("unloaded"):u.off():(u.on(),h()&&c.addClass("unloaded"))})}),$(function(){var t=function(){const t="sidebar-display";let e=!1;const o=$("body");return{toggle(){!1===e?o.attr(t,""):o.removeAttr(t),e=!e}}}();$("#sidebar-trigger").click(t.toggle),$("#mask").click(t.toggle)}),$(function(){$('[data-toggle="tooltip"]').tooltip()}),$(function(){const e=$("#search-input"),o=ScrollHelper.getTopbarHeight();let t,r=0;function a(){0!==$(window).scrollTop()&&(ScrollHelper.lockOrientation(),ScrollHelper.hideTopbar())}screen.orientation?screen.orientation.onchange=()=>{var t=screen.orientation.type;"landscape-primary"!==t&&"landscape-secondary"!==t||a()}:$(window).on("orientationchange",()=>{$(window).width()<$(window).height()&&a()}),$(window).scroll(()=>{t=t||!0}),setInterval(()=>{t&&(!function(){var t=$(this).scrollTop();if(!(Math.abs(r-t)<=o)){if(t>r)ScrollHelper.hideTopbar(),e.is(":focus")&&e.blur();else if(t+$(window).height()<$(document).height()){if(ScrollHelper.hasScrollUpTask())return;ScrollHelper.topbarLocked()?ScrollHelper.unlockTopbar():ScrollHelper.orientationLocked()?ScrollHelper.unLockOrientation():ScrollHelper.showTopbar()}r=t}}(),t=!1)},250)}),$(function(){var t="div.post>h1:first-of-type",e=$(t);const n=$("#topbar-title");if(0!==e.length&&!e.hasClass("dynamic-title")&&!n.is(":hidden")){const i=n.text().trim();let r=e.text().trim(),a=!1,l=0;($("#page-category").length||$("#page-tag").length)&&/\s/.test(r)&&(r=r.replace(/[0-9]/g,"").trim()),e.offset().top<$(window).scrollTop()&&n.text(r);new IntersectionObserver(t=>{var e,o;a?(o=$(window).scrollTop(),e=l img[data-src], ${t} img[data-src].preview-img`).each(function(){var t=$(this).next(),t="EM"===t.prop("tagName")?t.text():"",e=$(this).attr("data-src");$(this).wrap(``)}),$(".popup").magnificPopup({type:"image",closeOnContentClick:!0,showCloseBtn:!1,zoom:{enabled:!0,duration:300,easing:"ease-in-out"}}),$(t+" a").has("img").addClass("img-link"))}),$(function(){var t=".code-header>button";const e="timeout",a="data-title-succeed",l="data-original-title";function n(t){if($(t)[0].hasAttribute(e)){t=$(t).attr(e);if(Number(t)>Date.now())return 1}}function i(t){$(t).attr(e,Date.now()+2e3)}function s(t){$(t).removeAttr(e)}var o=new ClipboardJS(t,{target(t){return t.parentNode.nextElementSibling.querySelector("code .rouge-code")}});$(t).tooltip({trigger:"hover",placement:"left"});const r=$(t).children().attr("class");o.on("success",t=>{t.clearSelection();const e=t.trigger;var o;n(e)||(t=e,$(t).children().attr("class","fas fa-check"),t=e,o=$(t).attr(a),$(t).attr(l,o).tooltip("show"),i(e),setTimeout(()=>{var t;t=e,$(t).tooltip("hide").removeAttr(l),t=e,$(t).children().attr("class",r),s(e)},2e3))}),$("#copy-link").click(t=>{let e=$(t.target);if(!n(e)){var t=window.location.href,o=$("");$("body").append(o),o.val(t).select(),document.execCommand("copy"),o.remove();const r=e.attr(l);t=e.attr(a);e.attr(l,t).tooltip("show"),i(e),setTimeout(()=>{e.attr(l,r),s(e)},2e3)}})}),$(function(){const t=$("#topbar-title"),s="scroll-focus";$("a[href*='#']").not("[href='#']").not("[href='#0']").click(function(a){if(this.pathname.replace(/^\//,"")===location.pathname.replace(/^\//,"")&&location.hostname===this.hostname){var l=decodeURI(this.hash);let e=RegExp(/^#fnref:/).test(l),o=!e&&RegExp(/^#fn:/).test(l);var n=l.includes(":")?l.replace(/:/g,"\\:"):l;let r=$(n);var n=t.is(":visible"),i=$(window).width()<$(window).height();if(void 0!==r){a.preventDefault(),history.pushState&&history.pushState(null,null,l);a=$(window).scrollTop();let t=r.offset().top-=8;t{if(r.focus(),$(`[${s}=true]`).length&&$(`[${s}=true]`).attr(s,!1),$(":target").length&&$(":target").attr(s,!1),(o||e)&&r.attr(s,!0),r.is(":focus"))return!1;r.attr("tabindex","-1"),r.focus(),ScrollHelper.hasScrollUpTask()&&ScrollHelper.popScrollUpTask()})}}})}); +$(function(){$(window).scroll(()=>{50<$(this).scrollTop()&&"none"===$("#sidebar-trigger").css("display")?$("#back-to-top").fadeIn():$("#back-to-top").fadeOut()}),$("#back-to-top").click(()=>($("body,html").animate({scrollTop:0},800),!1))}),$(function(){$(".mode-toggle").click(e=>{e=$(e.target);(e.prop("tagName")==="button".toUpperCase()?e:e.parent()).blur(),flipMode()})});const ScrollHelper=function(){const e=$("body"),t="data-topbar-visible",o=$("#topbar-wrapper").outerHeight();let r=0,a=!1,l=!1;return{hideTopbar:()=>e.attr(t,!1),showTopbar:()=>e.attr(t,!0),addScrollUpTask:()=>{r+=1,a=a||!0},popScrollUpTask:()=>--r,hasScrollUpTask:()=>0!0===a,unlockTopbar:()=>a=!1,getTopbarHeight:()=>o,orientationLocked:()=>!0===l,lockOrientation:()=>l=!0,unLockOrientation:()=>l=!1}}();$(function(){const e=$("#sidebar-trigger"),t=$("#search-trigger"),o=$("#search-cancel"),r=$("#main"),a=$("#topbar-title"),l=$("#search-wrapper"),n=$("#search-result-wrapper"),i=$("#search-results"),s=$("#search-input"),c=$("#search-hints"),d=function(){let e=0;return{block(){e=window.scrollY,$("html,body").scrollTop(0)},release(){$("html,body").scrollTop(e)},getOffset(){return e}}}(),p={on(){e.addClass("unloaded"),a.addClass("unloaded"),t.addClass("unloaded"),l.addClass("d-flex"),o.addClass("loaded")},off(){o.removeClass("loaded"),l.removeClass("d-flex"),e.removeClass("unloaded"),a.removeClass("unloaded"),t.removeClass("unloaded")}},u=function(){let e=!1;return{on(){e||(d.block(),n.removeClass("unloaded"),r.addClass("unloaded"),e=!0)},off(){e&&(i.empty(),c.hasClass("unloaded")&&c.removeClass("unloaded"),n.addClass("unloaded"),r.removeClass("unloaded"),d.release(),s.val(""),e=!1)},isVisible(){return e}}}();function h(){return o.hasClass("loaded")}t.click(function(){p.on(),u.on(),s.focus()}),o.click(function(){p.off(),u.off()}),s.focus(function(){l.addClass("input-focus")}),s.focusout(function(){l.removeClass("input-focus")}),s.on("input",()=>{""===s.val()?h()?c.removeClass("unloaded"):u.off():(u.on(),h()&&c.addClass("unloaded"))})}),$(function(){var e=function(){const e="sidebar-display";let t=!1;const o=$("body");return{toggle(){!1===t?o.attr(e,""):o.removeAttr(e),t=!t}}}();$("#sidebar-trigger").click(e.toggle),$("#mask").click(e.toggle)}),$(function(){$('[data-toggle="tooltip"]').tooltip()}),$(function(){const t=$("#search-input"),o=ScrollHelper.getTopbarHeight();let e,r=0;function a(){0!==$(window).scrollTop()&&(ScrollHelper.lockOrientation(),ScrollHelper.hideTopbar())}screen.orientation?screen.orientation.onchange=()=>{var e=screen.orientation.type;"landscape-primary"!==e&&"landscape-secondary"!==e||a()}:$(window).on("orientationchange",()=>{$(window).width()<$(window).height()&&a()}),$(window).scroll(()=>{e=e||!0}),setInterval(()=>{e&&(!function(){var e=$(this).scrollTop();if(!(Math.abs(r-e)<=o)){if(e>r)ScrollHelper.hideTopbar(),t.is(":focus")&&t.blur();else if(e+$(window).height()<$(document).height()){if(ScrollHelper.hasScrollUpTask())return;ScrollHelper.topbarLocked()?ScrollHelper.unlockTopbar():ScrollHelper.orientationLocked()?ScrollHelper.unLockOrientation():ScrollHelper.showTopbar()}r=e}}(),e=!1)},250)}),$(function(){var e="div.post>h1:first-of-type",t=$(e);const n=$("#topbar-title");if(0!==t.length&&!t.hasClass("dynamic-title")&&!n.is(":hidden")){const i=n.text().trim();let r=t.text().trim(),a=!1,l=0;($("#page-category").length||$("#page-tag").length)&&/\s/.test(r)&&(r=r.replace(/[0-9]/g,"").trim()),t.offset().top<$(window).scrollTop()&&n.text(r);new IntersectionObserver(e=>{var t,o;a?(o=$(window).scrollTop(),t=lDate.now())return 1}}function i(e){$(e).attr(t,Date.now()+2e3)}function s(e){$(e).removeAttr(t)}var o=new ClipboardJS(e,{target(e){return e.parentNode.nextElementSibling.querySelector("code .rouge-code")}});$(e).tooltip({trigger:"hover",placement:"left"});const r=$(e).children().attr("class");o.on("success",e=>{e.clearSelection();const t=e.trigger;var o;n(t)||(e=t,$(e).children().attr("class","fas fa-check"),e=t,o=$(e).attr(a),$(e).attr(l,o).tooltip("show"),i(t),setTimeout(()=>{var e;e=t,$(e).tooltip("hide").removeAttr(l),e=t,$(e).children().attr("class",r),s(t)},2e3))}),$("#copy-link").click(e=>{let t=$(e.target);if(!n(t)){var e=window.location.href,o=$("");$("body").append(o),o.val(e).select(),document.execCommand("copy"),o.remove();const r=t.attr(l);e=t.attr(a);t.attr(l,e).tooltip("show"),i(t),setTimeout(()=>{t.attr(l,r),s(t)},2e3)}})}),$(function(){const e=$("#topbar-title"),s="scroll-focus";$("a[href*='#']").not("[href='#']").not("[href='#0']").click(function(a){if(this.pathname.replace(/^\//,"")===location.pathname.replace(/^\//,"")&&location.hostname===this.hostname){var l=decodeURI(this.hash);let t=RegExp(/^#fnref:/).test(l),o=!t&&RegExp(/^#fn:/).test(l);var n=l.includes(":")?l.replace(/:/g,"\\:"):l;let r=$(n);var n=e.is(":visible"),i=$(window).width()<$(window).height();if(void 0!==r){a.preventDefault(),history.pushState&&history.pushState(null,null,l);a=$(window).scrollTop();let e=r.offset().top-=8;e{if(r.focus(),$(`[${s}=true]`).length&&$(`[${s}=true]`).attr(s,!1),$(":target").length&&$(":target").attr(s,!1),(o||t)&&r.attr(s,!0),r.is(":focus"))return!1;r.attr("tabindex","-1"),r.focus(),ScrollHelper.hasScrollUpTask()&&ScrollHelper.popScrollUpTask()})}}})}); diff --git a/assets/js/dist/post.min.js b/assets/js/dist/post.min.js index c1d086c..706f6e4 100644 --- a/assets/js/dist/post.min.js +++ b/assets/js/dist/post.min.js @@ -3,4 +3,4 @@ * © 2019 Cotes Chung * MIT Licensed */ -$(function(){$(window).scroll(()=>{50<$(this).scrollTop()&&"none"===$("#sidebar-trigger").css("display")?$("#back-to-top").fadeIn():$("#back-to-top").fadeOut()}),$("#back-to-top").click(()=>($("body,html").animate({scrollTop:0},800),!1))}),$(function(){$(".mode-toggle").click(t=>{t=$(t.target);(t.prop("tagName")==="button".toUpperCase()?t:t.parent()).blur(),flipMode()})});const ScrollHelper=function(){const t=$("body"),e="data-topbar-visible",o=$("#topbar-wrapper").outerHeight();let a=0,r=!1,l=!1;return{hideTopbar:()=>t.attr(e,!1),showTopbar:()=>t.attr(e,!0),addScrollUpTask:()=>{a+=1,r=r||!0},popScrollUpTask:()=>--a,hasScrollUpTask:()=>0!0===r,unlockTopbar:()=>r=!1,getTopbarHeight:()=>o,orientationLocked:()=>!0===l,lockOrientation:()=>l=!0,unLockOrientation:()=>l=!1}}(),LocaleHelper=($(function(){const t=$("#sidebar-trigger"),e=$("#search-trigger"),o=$("#search-cancel"),a=$("#main"),r=$("#topbar-title"),l=$("#search-wrapper"),n=$("#search-result-wrapper"),i=$("#search-results"),s=$("#search-input"),c=$("#search-hints"),d=function(){let t=0;return{block(){t=window.scrollY,$("html,body").scrollTop(0)},release(){$("html,body").scrollTop(t)},getOffset(){return t}}}(),p={on(){t.addClass("unloaded"),r.addClass("unloaded"),e.addClass("unloaded"),l.addClass("d-flex"),o.addClass("loaded")},off(){o.removeClass("loaded"),l.removeClass("d-flex"),t.removeClass("unloaded"),r.removeClass("unloaded"),e.removeClass("unloaded")}},u=function(){let t=!1;return{on(){t||(d.block(),n.removeClass("unloaded"),a.addClass("unloaded"),t=!0)},off(){t&&(i.empty(),c.hasClass("unloaded")&&c.removeClass("unloaded"),n.addClass("unloaded"),a.removeClass("unloaded"),d.release(),s.val(""),t=!1)},isVisible(){return t}}}();function h(){return o.hasClass("loaded")}e.click(function(){p.on(),u.on(),s.focus()}),o.click(function(){p.off(),u.off()}),s.focus(function(){l.addClass("input-focus")}),s.focusout(function(){l.removeClass("input-focus")}),s.on("input",()=>{""===s.val()?h()?c.removeClass("unloaded"):u.off():(u.on(),h()&&c.addClass("unloaded"))})}),$(function(){var t=function(){const t="sidebar-display";let e=!1;const o=$("body");return{toggle(){!1===e?o.attr(t,""):o.removeAttr(t),e=!e}}}();$("#sidebar-trigger").click(t.toggle),$("#mask").click(t.toggle)}),$(function(){$('[data-toggle="tooltip"]').tooltip()}),$(function(){const e=$("#search-input"),o=ScrollHelper.getTopbarHeight();let t,a=0;function r(){0!==$(window).scrollTop()&&(ScrollHelper.lockOrientation(),ScrollHelper.hideTopbar())}screen.orientation?screen.orientation.onchange=()=>{var t=screen.orientation.type;"landscape-primary"!==t&&"landscape-secondary"!==t||r()}:$(window).on("orientationchange",()=>{$(window).width()<$(window).height()&&r()}),$(window).scroll(()=>{t=t||!0}),setInterval(()=>{t&&(!function(){var t=$(this).scrollTop();if(!(Math.abs(a-t)<=o)){if(t>a)ScrollHelper.hideTopbar(),e.is(":focus")&&e.blur();else if(t+$(window).height()<$(document).height()){if(ScrollHelper.hasScrollUpTask())return;ScrollHelper.topbarLocked()?ScrollHelper.unlockTopbar():ScrollHelper.orientationLocked()?ScrollHelper.unLockOrientation():ScrollHelper.showTopbar()}a=t}}(),t=!1)},250)}),$(function(){var t="div.post>h1:first-of-type",e=$(t);const n=$("#topbar-title");if(0!==e.length&&!e.hasClass("dynamic-title")&&!n.is(":hidden")){const i=n.text().trim();let a=e.text().trim(),r=!1,l=0;($("#page-category").length||$("#page-tag").length)&&/\s/.test(a)&&(a=a.replace(/[0-9]/g,"").trim()),e.offset().top<$(window).scrollTop()&&n.text(a);new IntersectionObserver(t=>{var e,o;r?(o=$(window).scrollTop(),e=l img[data-src], ${t} img[data-src].preview-img`).each(function(){var t=$(this).next(),t="EM"===t.prop("tagName")?t.text():"",e=$(this).attr("data-src");$(this).wrap(``)}),$(".popup").magnificPopup({type:"image",closeOnContentClick:!0,showCloseBtn:!1,zoom:{enabled:!0,duration:300,easing:"ease-in-out"}}),$(t+" a").has("img").addClass("img-link"))}),function(){const t=$("html").attr("lang").substr(0,2),e="data-ts",o="data-df";return{locale:()=>t,attrTimestamp:()=>e,attrDateFormat:()=>o,getTimestamp:t=>Number(t.attr(e)),getDateFormat:t=>t.attr(o)}}());$(function(){dayjs.locale(LocaleHelper.locale()),dayjs.extend(window.dayjs_plugin_localizedFormat),$(`[${LocaleHelper.attrTimestamp()}]`).each(function(){var t=dayjs.unix(LocaleHelper.getTimestamp($(this))),e=t.format(LocaleHelper.getDateFormat($(this))),e=($(this).text(e),$(this).removeAttr(LocaleHelper.attrTimestamp()),$(this).removeAttr(LocaleHelper.attrDateFormat()),$(this).attr("data-toggle"));void 0!==e&&"tooltip"===e&&(e=t.format("llll"),$(this).attr("data-original-title",e))})}),$(function(){var t=".code-header>button";const e="timeout",r="data-title-succeed",l="data-original-title";function n(t){if($(t)[0].hasAttribute(e)){t=$(t).attr(e);if(Number(t)>Date.now())return 1}}function i(t){$(t).attr(e,Date.now()+2e3)}function s(t){$(t).removeAttr(e)}var o=new ClipboardJS(t,{target(t){return t.parentNode.nextElementSibling.querySelector("code .rouge-code")}});$(t).tooltip({trigger:"hover",placement:"left"});const a=$(t).children().attr("class");o.on("success",t=>{t.clearSelection();const e=t.trigger;var o;n(e)||(t=e,$(t).children().attr("class","fas fa-check"),t=e,o=$(t).attr(r),$(t).attr(l,o).tooltip("show"),i(e),setTimeout(()=>{var t;t=e,$(t).tooltip("hide").removeAttr(l),t=e,$(t).children().attr("class",a),s(e)},2e3))}),$("#copy-link").click(t=>{let e=$(t.target);if(!n(e)){var t=window.location.href,o=$("");$("body").append(o),o.val(t).select(),document.execCommand("copy"),o.remove();const a=e.attr(l);t=e.attr(r);e.attr(l,t).tooltip("show"),i(e),setTimeout(()=>{e.attr(l,a),s(e)},2e3)}})}),$(function(){const t=$("#topbar-title"),s="scroll-focus";$("a[href*='#']").not("[href='#']").not("[href='#0']").click(function(r){if(this.pathname.replace(/^\//,"")===location.pathname.replace(/^\//,"")&&location.hostname===this.hostname){var l=decodeURI(this.hash);let e=RegExp(/^#fnref:/).test(l),o=!e&&RegExp(/^#fn:/).test(l);var n=l.includes(":")?l.replace(/:/g,"\\:"):l;let a=$(n);var n=t.is(":visible"),i=$(window).width()<$(window).height();if(void 0!==a){r.preventDefault(),history.pushState&&history.pushState(null,null,l);r=$(window).scrollTop();let t=a.offset().top-=8;t{if(a.focus(),$(`[${s}=true]`).length&&$(`[${s}=true]`).attr(s,!1),$(":target").length&&$(":target").attr(s,!1),(o||e)&&a.attr(s,!0),a.is(":focus"))return!1;a.attr("tabindex","-1"),a.focus(),ScrollHelper.hasScrollUpTask()&&ScrollHelper.popScrollUpTask()})}}})}); +$(function(){$(window).scroll(()=>{50<$(this).scrollTop()&&"none"===$("#sidebar-trigger").css("display")?$("#back-to-top").fadeIn():$("#back-to-top").fadeOut()}),$("#back-to-top").click(()=>($("body,html").animate({scrollTop:0},800),!1))}),$(function(){$(".mode-toggle").click(t=>{t=$(t.target);(t.prop("tagName")==="button".toUpperCase()?t:t.parent()).blur(),flipMode()})});const ScrollHelper=function(){const t=$("body"),e="data-topbar-visible",o=$("#topbar-wrapper").outerHeight();let a=0,r=!1,l=!1;return{hideTopbar:()=>t.attr(e,!1),showTopbar:()=>t.attr(e,!0),addScrollUpTask:()=>{a+=1,r=r||!0},popScrollUpTask:()=>--a,hasScrollUpTask:()=>0!0===r,unlockTopbar:()=>r=!1,getTopbarHeight:()=>o,orientationLocked:()=>!0===l,lockOrientation:()=>l=!0,unLockOrientation:()=>l=!1}}(),LocaleHelper=($(function(){const t=$("#sidebar-trigger"),e=$("#search-trigger"),o=$("#search-cancel"),a=$("#main"),r=$("#topbar-title"),l=$("#search-wrapper"),n=$("#search-result-wrapper"),i=$("#search-results"),s=$("#search-input"),c=$("#search-hints"),d=function(){let t=0;return{block(){t=window.scrollY,$("html,body").scrollTop(0)},release(){$("html,body").scrollTop(t)},getOffset(){return t}}}(),p={on(){t.addClass("unloaded"),r.addClass("unloaded"),e.addClass("unloaded"),l.addClass("d-flex"),o.addClass("loaded")},off(){o.removeClass("loaded"),l.removeClass("d-flex"),t.removeClass("unloaded"),r.removeClass("unloaded"),e.removeClass("unloaded")}},u=function(){let t=!1;return{on(){t||(d.block(),n.removeClass("unloaded"),a.addClass("unloaded"),t=!0)},off(){t&&(i.empty(),c.hasClass("unloaded")&&c.removeClass("unloaded"),n.addClass("unloaded"),a.removeClass("unloaded"),d.release(),s.val(""),t=!1)},isVisible(){return t}}}();function h(){return o.hasClass("loaded")}e.click(function(){p.on(),u.on(),s.focus()}),o.click(function(){p.off(),u.off()}),s.focus(function(){l.addClass("input-focus")}),s.focusout(function(){l.removeClass("input-focus")}),s.on("input",()=>{""===s.val()?h()?c.removeClass("unloaded"):u.off():(u.on(),h()&&c.addClass("unloaded"))})}),$(function(){var t=function(){const t="sidebar-display";let e=!1;const o=$("body");return{toggle(){!1===e?o.attr(t,""):o.removeAttr(t),e=!e}}}();$("#sidebar-trigger").click(t.toggle),$("#mask").click(t.toggle)}),$(function(){$('[data-toggle="tooltip"]').tooltip()}),$(function(){const e=$("#search-input"),o=ScrollHelper.getTopbarHeight();let t,a=0;function r(){0!==$(window).scrollTop()&&(ScrollHelper.lockOrientation(),ScrollHelper.hideTopbar())}screen.orientation?screen.orientation.onchange=()=>{var t=screen.orientation.type;"landscape-primary"!==t&&"landscape-secondary"!==t||r()}:$(window).on("orientationchange",()=>{$(window).width()<$(window).height()&&r()}),$(window).scroll(()=>{t=t||!0}),setInterval(()=>{t&&(!function(){var t=$(this).scrollTop();if(!(Math.abs(a-t)<=o)){if(t>a)ScrollHelper.hideTopbar(),e.is(":focus")&&e.blur();else if(t+$(window).height()<$(document).height()){if(ScrollHelper.hasScrollUpTask())return;ScrollHelper.topbarLocked()?ScrollHelper.unlockTopbar():ScrollHelper.orientationLocked()?ScrollHelper.unLockOrientation():ScrollHelper.showTopbar()}a=t}}(),t=!1)},250)}),$(function(){var t="div.post>h1:first-of-type",e=$(t);const n=$("#topbar-title");if(0!==e.length&&!e.hasClass("dynamic-title")&&!n.is(":hidden")){const i=n.text().trim();let a=e.text().trim(),r=!1,l=0;($("#page-category").length||$("#page-tag").length)&&/\s/.test(a)&&(a=a.replace(/[0-9]/g,"").trim()),e.offset().top<$(window).scrollTop()&&n.text(a);new IntersectionObserver(t=>{var e,o;r?(o=$(window).scrollTop(),e=lt,attrTimestamp:()=>e,attrDateFormat:()=>o,getTimestamp:t=>Number(t.attr(e)),getDateFormat:t=>t.attr(o)}}());$(function(){dayjs.locale(LocaleHelper.locale()),dayjs.extend(window.dayjs_plugin_localizedFormat),$(`[${LocaleHelper.attrTimestamp()}]`).each(function(){var t=dayjs.unix(LocaleHelper.getTimestamp($(this))),e=t.format(LocaleHelper.getDateFormat($(this))),e=($(this).text(e),$(this).removeAttr(LocaleHelper.attrTimestamp()),$(this).removeAttr(LocaleHelper.attrDateFormat()),$(this).attr("data-toggle"));void 0!==e&&"tooltip"===e&&(e=t.format("llll"),$(this).attr("data-original-title",e))})}),$(function(){var t=".code-header>button";const e="timeout",r="data-title-succeed",l="data-original-title";function n(t){if($(t)[0].hasAttribute(e)){t=$(t).attr(e);if(Number(t)>Date.now())return 1}}function i(t){$(t).attr(e,Date.now()+2e3)}function s(t){$(t).removeAttr(e)}var o=new ClipboardJS(t,{target(t){return t.parentNode.nextElementSibling.querySelector("code .rouge-code")}});$(t).tooltip({trigger:"hover",placement:"left"});const a=$(t).children().attr("class");o.on("success",t=>{t.clearSelection();const e=t.trigger;var o;n(e)||(t=e,$(t).children().attr("class","fas fa-check"),t=e,o=$(t).attr(r),$(t).attr(l,o).tooltip("show"),i(e),setTimeout(()=>{var t;t=e,$(t).tooltip("hide").removeAttr(l),t=e,$(t).children().attr("class",a),s(e)},2e3))}),$("#copy-link").click(t=>{let e=$(t.target);if(!n(e)){var t=window.location.href,o=$("");$("body").append(o),o.val(t).select(),document.execCommand("copy"),o.remove();const a=e.attr(l);t=e.attr(r);e.attr(l,t).tooltip("show"),i(e),setTimeout(()=>{e.attr(l,a),s(e)},2e3)}})}),$(function(){const t=$("#topbar-title"),s="scroll-focus";$("a[href*='#']").not("[href='#']").not("[href='#0']").click(function(r){if(this.pathname.replace(/^\//,"")===location.pathname.replace(/^\//,"")&&location.hostname===this.hostname){var l=decodeURI(this.hash);let e=RegExp(/^#fnref:/).test(l),o=!e&&RegExp(/^#fn:/).test(l);var n=l.includes(":")?l.replace(/:/g,"\\:"):l;let a=$(n);var n=t.is(":visible"),i=$(window).width()<$(window).height();if(void 0!==a){r.preventDefault(),history.pushState&&history.pushState(null,null,l);r=$(window).scrollTop();let t=a.offset().top-=8;t{if(a.focus(),$(`[${s}=true]`).length&&$(`[${s}=true]`).attr(s,!1),$(":target").length&&$(":target").attr(s,!1),(o||e)&&a.attr(s,!0),a.is(":focus"))return!1;a.attr("tabindex","-1"),a.focus(),ScrollHelper.hasScrollUpTask()&&ScrollHelper.popScrollUpTask()})}}})}); From 4b6ccbcbccce27b9fcb035812efefe4eb69301cf Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Thu, 15 Dec 2022 03:18:27 +0800 Subject: [PATCH 15/32] feat: set preview image ratio to 1.91 : 1 --- _layouts/post.html | 18 +----------------- _sass/layout/post.scss | 6 ++++++ 2 files changed, 7 insertions(+), 17 deletions(-) diff --git a/_layouts/post.html b/_layouts/post.html index a55031e..367def5 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -31,22 +31,6 @@ tail_includes: {% capture class %}class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"{% endcapture %} {% capture alt %}alt="{{ page.image.alt | default: "Preview Image" }}"{% endcapture %} - {% capture w %} - {% if page.image.width %} - width="{{ page.image.width }}" - {% elsif page.image.w %} - width="{{ page.image.w }}" - {% endif %} - {% endcapture %} - - {% capture h %} - {% if page.image.height %} - height="{{ page.image.height }}" - {% elsif page.image.h %} - h="{{ page.image.h }}" - {% endif %} - {% endcapture %} - {% capture lqip %} {% if page.image.lqip %} lqip="{{ page.image.lqip }}" @@ -54,7 +38,7 @@ tail_includes: {% endcapture %}
- + {%- if page.image.alt -%}
{{ page.image.alt }}
{%- endif -%} diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss index 146caba..ed7dcd8 100644 --- a/_sass/layout/post.scss +++ b/_sass/layout/post.scss @@ -34,6 +34,8 @@ @include align-center; @extend %preview-margin; + max-width: 100%; + &:not(.no-bg) { img.lazyloaded { background: var(--img-bg); @@ -41,6 +43,10 @@ } img { + aspect-ratio: 40 / 21; + -o-object-fit: cover; + object-fit: cover; + @extend %preview-margin; @extend %img-rounded; } From 8de1abda6be3633982392178731431b0ddb1b52b Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Thu, 15 Dec 2022 22:55:52 +0800 Subject: [PATCH 16/32] fix: `og:image` will be incorrect if the image uses a cross-domain URL --- _includes/head.html | 29 +++++++++++++++++------------ 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/_includes/head.html b/_includes/head.html index 03ab48f..e2f6336 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -24,20 +24,25 @@ {% if page.image %} {% assign img = page.image.path | default: page.image %} - {% assign img_path = page.img_path | append: '/' | append: img | replace: '//', '/' %} - {% capture target %}"{{ img | absolute_url }}"{% endcapture %} - {% if site.img_cdn contains '//' %} - - {% capture replacement %}"{{ site.img_cdn }}{{ img_path }}"{% endcapture %} - {% else %} - - {%- capture replacement -%} - "{{ site.img_cdn | append: '/' | append: img_path | replace: '//', '/' | absolute_url }}" - {%- endcapture -%} - {% endif %} + {% unless img contains '://' %} + {% assign img_path = page.img_path | append: '/' | append: img | replace: '//', '/' %} + {% capture target %}"{{ img | absolute_url }}"{% endcapture %} + + {% if site.img_cdn contains '//' %} + + {% capture replacement %}"{{ site.img_cdn }}{{ img_path }}"{% endcapture %} + {% else %} + + {%- capture replacement -%} + "{{ site.img_cdn | append: '/' | append: img_path | replace: '//', '/' | absolute_url }}" + {%- endcapture -%} + {% endif %} + + {% assign seo_tags = seo_tags | replace: target, replacement %} + + {% endunless %} - {% assign seo_tags = seo_tags | replace: target, replacement %} {% endif %} {{ seo_tags }} From ed6dc539eff7003a3765bcd8c31ae5e91a863d65 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Sat, 17 Dec 2022 03:56:19 +0800 Subject: [PATCH 17/32] feat: add embed video support --- _includes/embed/twitch.html | 4 ++++ _includes/embed/youtube.html | 6 ++++++ _sass/addon/commons.scss | 15 +++++++++++++++ 3 files changed, 25 insertions(+) create mode 100644 _includes/embed/twitch.html create mode 100644 _includes/embed/youtube.html diff --git a/_includes/embed/twitch.html b/_includes/embed/twitch.html new file mode 100644 index 0000000..ab0419a --- /dev/null +++ b/_includes/embed/twitch.html @@ -0,0 +1,4 @@ + diff --git a/_includes/embed/youtube.html b/_includes/embed/youtube.html new file mode 100644 index 0000000..715063c --- /dev/null +++ b/_includes/embed/youtube.html @@ -0,0 +1,6 @@ + diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index 6ea733d..e4e3850 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -576,6 +576,21 @@ i { /* fontawesome icons */ } } +.embed-video { + width: 100%; + height: 100%; + border-radius: 4px; + margin-bottom: 1rem; + + &.youtube { + aspect-ratio: 16 / 9; + } + + &.twitch { + aspect-ratio: 310 / 189; + } +} + /* --- buttons --- */ .btn-lang { border: 1px solid !important; From 9306c7b39ecf9d9146bc1a25eebedc38eb2c3dd6 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Tue, 20 Dec 2022 00:57:53 +0800 Subject: [PATCH 18/32] feat: support dark and light mode images (#481) --- _sass/colors/dark-typography.scss | 4 ++++ _sass/colors/light-typography.scss | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss index f834f84..761a903 100644 --- a/_sass/colors/dark-typography.scss +++ b/_sass/colors/dark-typography.scss @@ -109,6 +109,10 @@ } } + .light { + display: none; + } + hr { border-color: var(--main-border-color); } diff --git a/_sass/colors/light-typography.scss b/_sass/colors/light-typography.scss index 940d7b5..7bfb514 100644 --- a/_sass/colors/light-typography.scss +++ b/_sass/colors/light-typography.scss @@ -89,6 +89,10 @@ --link-underline-color: rgb(219, 216, 216); } + .dark { + display: none; + } + /* Categories */ --categories-hover-bg: var(--btn-border-color); --categories-icon-hover-color: darkslategray; From e01eb8af14c6455c7159be7bf6a47441fdf96232 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Tue, 20 Dec 2022 16:04:39 +0800 Subject: [PATCH 19/32] refactor: unify the border radius of blocks scope: code blocks, prompts, images, and videos --- _sass/addon/commons.scss | 12 ++++++++---- _sass/addon/module.scss | 4 ++-- _sass/addon/syntax.scss | 16 ++++------------ _sass/layout/post.scss | 3 ++- 4 files changed, 16 insertions(+), 19 deletions(-) diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index e4e3850..bf7a104 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -134,10 +134,11 @@ blockquote { &[class^="prompt-"] { display: flex; border-left: 0; - border-radius: 6px; padding: 1rem; color: var(--prompt-text-color); + @extend %rounded; + &::before { text-align: center; width: 1.25rem; @@ -543,11 +544,13 @@ i { /* fontawesome icons */ } } +.rounded-10 { + border-radius: 10px !important; +} + .img-link { color: transparent; display: inline-flex; - - @extend %img-rounded; } .shimmer { @@ -579,9 +582,10 @@ i { /* fontawesome icons */ .embed-video { width: 100%; height: 100%; - border-radius: 4px; margin-bottom: 1rem; + @extend %rounded; + &.youtube { aspect-ratio: 16 / 9; } diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss index a00e2dc..1fc9ae5 100644 --- a/_sass/addon/module.scss +++ b/_sass/addon/module.scss @@ -90,8 +90,8 @@ font-style: normal; } -%img-rounded { - border-radius: 10px; +%rounded { + border-radius: 6px; } %img-caption { diff --git a/_sass/addon/syntax.scss b/_sass/addon/syntax.scss index 361fe08..78f1d09 100644 --- a/_sass/addon/syntax.scss +++ b/_sass/addon/syntax.scss @@ -29,18 +29,12 @@ html { } } -/* -- Codes Snippet -- */ - -$code-radius: 6px; +/* -- code snippets -- */ %code-snippet-bg { background: var(--highlight-bg-color); } -%code-snippet-radius { - border-radius: $code-radius; -} - %code-snippet-padding { padding-left: 1rem; padding-right: 1.5rem; @@ -48,7 +42,7 @@ $code-radius: 6px; .highlighter-rouge { @extend %code-snippet-bg; - @extend %code-snippet-radius; + @extend %rounded; color: var(--highlighter-rouge-color); margin-top: 0.5rem; @@ -56,7 +50,7 @@ $code-radius: 6px; } .highlight { - @extend %code-snippet-radius; + @extend %rounded; @extend %code-snippet-bg; @at-root figure#{&} { @@ -173,8 +167,6 @@ div { $code-header-height: 2.25rem; - border-top-left-radius: $code-radius; - border-top-right-radius: $code-radius; display: flex; justify-content: space-between; align-items: center; @@ -226,9 +218,9 @@ div { /* clipboard */ button { @extend %cursor-pointer; + @extend %rounded; border: 1px solid transparent; - border-radius: $code-radius; height: $code-header-height; width: $code-header-height; padding: 0; diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss index ed7dcd8..ac445d7 100644 --- a/_sass/layout/post.scss +++ b/_sass/layout/post.scss @@ -33,6 +33,7 @@ .preview-img { @include align-center; @extend %preview-margin; + @extend %rounded; max-width: 100%; @@ -48,7 +49,7 @@ object-fit: cover; @extend %preview-margin; - @extend %img-rounded; + @extend %rounded; } } From 8f2b42b1b370d28c485cc15c8b3d7f09af249dbf Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Sat, 24 Dec 2022 22:19:54 +0800 Subject: [PATCH 20/32] test(ci): correct the patterns to match the SCSS files --- .github/workflows/style-lint.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/style-lint.yml b/.github/workflows/style-lint.yml index e8fedae..e0bdf6d 100644 --- a/.github/workflows/style-lint.yml +++ b/.github/workflows/style-lint.yml @@ -3,12 +3,12 @@ name: 'Style Lint' on: push: paths: - - '_sass/**.scss' + - '_sass/**/*.scss' tags-ignore: - '**' pull_request: paths: - - '_sass/**.scss' + - '_sass/**/*.scss' jobs: stylelint: From 8e73a91d25856b72bfd44becdeea2313232993f3 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Sun, 25 Dec 2022 00:10:15 +0800 Subject: [PATCH 21/32] =?UTF-8?q?test(ci):=20drop=20some=20old=20ruby=20?= =?UTF-8?q?=E2=80=8B=E2=80=8Bversions?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/ci.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index e076b33..08e6af9 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -22,7 +22,7 @@ jobs: strategy: matrix: - ruby: [2.5, 2.6, 2.7, 3] + ruby: [2.7, 3] steps: - name: Checkout From d2190c726f61c8c9732b88b4aecf699dc8bc7deb Mon Sep 17 00:00:00 2001 From: Ken Dale Date: Sat, 24 Dec 2022 14:31:11 -0500 Subject: [PATCH 22/32] feat: add `rel="me"` to Mastodon sidebar contact links for verification (#807) This will enable verification with Mastodon by including the `rel="me"` attribute. https://docs.joinmastodon.org/user/profile/#verification Co-authored-by: Cotes Chung <11371340+cotes2020@users.noreply.github.com> --- _data/contact.yml | 2 +- _includes/sidebar.html | 12 +++++++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/_data/contact.yml b/_data/contact.yml index 05da2f2..a94e555 100644 --- a/_data/contact.yml +++ b/_data/contact.yml @@ -19,7 +19,7 @@ # - # type: mastodon # icon: 'fab fa-mastodon' # icons powered by -# url: '' # Fill with your mastodon account page +# url: '' # Fill with your Mastodon account page, rel="me" will be applied for verification # - # type: linkedin # icon: 'fab fa-linkedin' # icons powered by diff --git a/_includes/sidebar.html b/_includes/sidebar.html index 93c6749..c32efb3 100644 --- a/_includes/sidebar.html +++ b/_includes/sidebar.html @@ -81,7 +81,17 @@ {% if url %} + {% assign link_types = nil %} + {% unless entry.noblank %} + {% assign link_types = link_types | append: " noopener" %} + target="_blank" + {% endunless %} + + {% if entry.type == 'mastodon' %} + {% assign link_types = link_types | append: " me" %} + {% endif %} + + {% if link_types %}rel="{{ link_types | lstrip }}"{% endif %}> {% endif %} From 7a3d7434196a7e8b54e01c7f32cfaf084dd18912 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Sun, 25 Dec 2022 23:36:56 +0800 Subject: [PATCH 23/32] chore: update footer meta information --- _data/locales/en.yml | 2 +- _includes/footer.html | 10 +++++----- _sass/addon/commons.scss | 1 + 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/_data/locales/en.yml b/_data/locales/en.yml index 79b42e1..975f5f0 100644 --- a/_data/locales/en.yml +++ b/_data/locales/en.yml @@ -40,7 +40,7 @@ copyright: Except where otherwise noted, the blog posts on this site are licensed under the Creative Commons Attribution 4.0 International (CC BY 4.0) License by the author. -meta: Powered by :PLATFORM with :THEME theme. +meta: Using the :PLATFORM theme :THEME. not_found: statment: Sorry, we've misplaced that URL or it's pointing to something that doesn't exist. diff --git a/_includes/footer.html b/_includes/footer.html index bae0b1d..f4b16d9 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -17,16 +17,16 @@

- {% capture _platform %} + {%- capture _platform -%} Jekyll - {% endcapture %} + {%- endcapture -%} - {% capture _theme %} + {%- capture _theme -%} Chirpy - {% endcapture %} + {%- endcapture -%} {{ site.data.locales[site.lang].meta - | default: 'Powered by :PLATFORM with :THEME theme.' + | default: 'Using the :PLATFORM theme :THEME.' | replace: ':PLATFORM', _platform | replace: ':THEME', _theme }}

diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index bf7a104..486251f 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -1254,6 +1254,7 @@ $sidebar-display: "sidebar-display"; div.d-flex { padding: 1.5rem 0; + line-height: 1.65; flex-wrap: wrap; justify-content: space-around !important; } From 09f9305d4cec70556786e42924710089205500f0 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Tue, 27 Dec 2022 21:41:45 +0800 Subject: [PATCH 24/32] chore: hide blur edge of LQIP images --- _sass/addon/commons.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index 486251f..c1e1ae9 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -551,6 +551,7 @@ i { /* fontawesome icons */ .img-link { color: transparent; display: inline-flex; + overflow: hidden; } .shimmer { From 09e4ad245b5f1101eacbc55b89e8e8dee05df746 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Tue, 27 Dec 2022 21:43:43 +0800 Subject: [PATCH 25/32] chore(deps): update gem spec list - Jekyll 4.3.0 introduced `webrick` for Ruby 3.x - Jekyll's dependency `nokogiri` does not yet support Ruby 3.2. See: https://github.com/sparklemotion/nokogiri/issues/2740/ --- .github/workflows/ci.yml | 2 +- .github/workflows/pages-deploy.yml.hook | 2 +- Gemfile | 3 --- jekyll-theme-chirpy.gemspec | 4 ++-- 4 files changed, 4 insertions(+), 7 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 08e6af9..a5b4672 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -22,7 +22,7 @@ jobs: strategy: matrix: - ruby: [2.7, 3] + ruby: ['2.7', '3.0', '3.1'] steps: - name: Checkout diff --git a/.github/workflows/pages-deploy.yml.hook b/.github/workflows/pages-deploy.yml.hook index b2da8d9..fed62a9 100644 --- a/.github/workflows/pages-deploy.yml.hook +++ b/.github/workflows/pages-deploy.yml.hook @@ -42,7 +42,7 @@ jobs: - name: Setup Ruby uses: ruby/setup-ruby@v1 with: - ruby-version: 3 # reads from a '.ruby-version' or '.tools-version' file if 'ruby-version' is omitted + ruby-version: '3.1' # reads from a '.ruby-version' or '.tools-version' file if 'ruby-version' is omitted bundler-cache: true - name: Build site diff --git a/Gemfile b/Gemfile index ffef29a..6438466 100644 --- a/Gemfile +++ b/Gemfile @@ -17,6 +17,3 @@ end # Performance-booster for watching directories on Windows gem "wdm", "~> 0.1.1", :install_if => Gem.win_platform? - -# Jekyll <= 4.2.0 compatibility with Ruby 3.0 -gem "webrick", "~> 1.7" diff --git a/jekyll-theme-chirpy.gemspec b/jekyll-theme-chirpy.gemspec index b3c6a37..21e7a8a 100644 --- a/jekyll-theme-chirpy.gemspec +++ b/jekyll-theme-chirpy.gemspec @@ -23,9 +23,9 @@ Gem::Specification.new do |spec| "plugin_type" => "theme" } - spec.required_ruby_version = ">= 2.5" + spec.required_ruby_version = [">= 2.5", "< 3.2"] - spec.add_runtime_dependency "jekyll", "~> 4.1" + spec.add_runtime_dependency "jekyll", "~> 4.3" spec.add_runtime_dependency "jekyll-paginate", "~> 1.1" spec.add_runtime_dependency "jekyll-redirect-from", "~> 0.16" spec.add_runtime_dependency "jekyll-seo-tag", "~> 2.7" From d7bcb40cdecaf2c8741814271af9bd1b13e18d19 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Tue, 27 Dec 2022 21:50:21 +0800 Subject: [PATCH 26/32] refactor: update deprecated syntax for SASS division --- _sass/addon/commons.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index c1e1ae9..9e1b1f1 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -816,7 +816,7 @@ $sidebar-display: "sidebar-display"; &:last-child { a { position: relative; - left: $cursor-width / 2; + left: calc($cursor-width / 2); width: 100%; } @@ -842,7 +842,7 @@ $sidebar-display: "sidebar-display"; @for $i from 1 through $tab-count { $offset: $tab-count - $i; - $top: -$offset * $tab-height + ($tab-height - $tab-cursor-height) / 2; + $top: -$offset * $tab-height + calc(($tab-height - $tab-cursor-height) / 2); @if $i < $tab-count { > li.active:nth-child(#{$i}), From 72700be7dd5226391f93c7ff01666e91575b39ff Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Tue, 27 Dec 2022 23:58:17 +0800 Subject: [PATCH 27/32] chore(ci): fix workflow trigger conditions --- .github/workflows/ci.yml | 2 -- .github/workflows/style-lint.yml | 5 +++-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index a5b4672..79d04c5 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -4,8 +4,6 @@ on: branches-ignore: - 'production' - 'docs' - tags-ignore: - - '**' paths-ignore: - '.github/**' - '!.github/workflows/ci.yml' diff --git a/.github/workflows/style-lint.yml b/.github/workflows/style-lint.yml index e0bdf6d..2f1cdd0 100644 --- a/.github/workflows/style-lint.yml +++ b/.github/workflows/style-lint.yml @@ -2,10 +2,11 @@ name: 'Style Lint' on: push: + branches-ignore: + - 'production' + - 'docs' paths: - '_sass/**/*.scss' - tags-ignore: - - '**' pull_request: paths: - '_sass/**/*.scss' From 5a191e79afacb4459d9767c3330ad6ecf3eacc9a Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Wed, 28 Dec 2022 01:10:27 +0800 Subject: [PATCH 28/32] chore: remove extension from tools --- .github/CONTRIBUTING.md | 2 +- .github/PULL_REQUEST_TEMPLATE.md | 2 +- .github/workflows/ci.yml | 2 +- tools/{init.sh => init} | 0 tools/{release.sh => release} | 0 tools/{run.sh => run} | 0 tools/{test.sh => test} | 0 7 files changed, 3 insertions(+), 3 deletions(-) rename tools/{init.sh => init} (100%) rename tools/{release.sh => release} (100%) rename tools/{run.sh => run} (100%) rename tools/{test.sh => test} (100%) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 9ac13dc..ef81bb0 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -33,7 +33,7 @@ During JavaScript development, real-time debugging can be performed through the Firstly, start a Jekyll server: ```console -$ bash tools/run.sh +$ bash tools/run ``` And then open a new terminal tab and run: diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 5187ecc..d26834f 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -22,7 +22,7 @@ Please select the desired item checkbox and change it to "[x]", then delete opti Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration --> -- [ ] I have run `bash ./tools/test.sh` (at the root of the project) locally and passed +- [ ] I have run `bash ./tools/test` (at the root of the project) locally and passed - [ ] I have tested this feature in the browser ### Test Configuration diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 79d04c5..a927d91 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -35,4 +35,4 @@ jobs: bundler-cache: true - name: Test Site - run: bash tools/test.sh + run: bash tools/test diff --git a/tools/init.sh b/tools/init similarity index 100% rename from tools/init.sh rename to tools/init diff --git a/tools/release.sh b/tools/release similarity index 100% rename from tools/release.sh rename to tools/release diff --git a/tools/run.sh b/tools/run similarity index 100% rename from tools/run.sh rename to tools/run diff --git a/tools/test.sh b/tools/test similarity index 100% rename from tools/test.sh rename to tools/test From 6fa1777eb0fbed03532b76e4da1de73de3b07200 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Wed, 28 Dec 2022 01:11:27 +0800 Subject: [PATCH 29/32] chore(tools): checkout latest tag on initialization --- tools/init | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/tools/init b/tools/init index 656a641..f4a1f30 100755 --- a/tools/init +++ b/tools/init @@ -46,6 +46,11 @@ check_init() { fi } +checkout_latest_tag() { + tag=$(git describe --tags $(git rev-list --tags --max-count=1)) + git reset --hard "$tag" +} + init_files() { if $_no_gh; then rm -rf .github @@ -100,4 +105,6 @@ while (($#)); do esac done +checkout_latest_tag + init_files From 8440d429849f26abff35d26a2fbc10d3ff21400e Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Wed, 28 Dec 2022 01:20:24 +0800 Subject: [PATCH 30/32] docs: add tutorial and example for new features --- _posts/2019-08-08-text-and-typography.md | 125 +++++++++++------------ _posts/2019-08-08-write-a-new-post.md | 65 ++++++++++-- 2 files changed, 113 insertions(+), 77 deletions(-) diff --git a/_posts/2019-08-08-text-and-typography.md b/_posts/2019-08-08-text-and-typography.md index 55e65c3..7cacc70 100644 --- a/_posts/2019-08-08-text-and-typography.md +++ b/_posts/2019-08-08-text-and-typography.md @@ -8,14 +8,12 @@ math: true mermaid: true image: path: /commons/devices-mockup.png - width: 800 - height: 500 + lqip: data:image/webp;base64,UklGRpoAAABXRUJQVlA4WAoAAAAQAAAADwAABwAAQUxQSDIAAAARL0AmbZurmr57yyIiqE8oiG0bejIYEQTgqiDA9vqnsUSI6H+oAERp2HZ65qP/VIAWAFZQOCBCAAAA8AEAnQEqEAAIAAVAfCWkAALp8sF8rgRgAP7o9FDvMCkMde9PK7euH5M1m6VWoDXf2FkP3BqV0ZYbO6NA/VFIAAAA alt: Responsive rendering of Chirpy theme on multiple devices. --- This post is to show Markdown syntax rendering on [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork), you can also use it as an example of writing. Now, let's start looking at text and typography. - ## Titles --- # H1 - heading @@ -26,7 +24,6 @@ This post is to show Markdown syntax rendering on [**Chirpy**](https://github.co

H4 - heading

--- -
## Paragraph @@ -95,56 +92,6 @@ Moon Click the hook will locate the footnote[^footnote], and here is another footnote[^fn-nth-2]. -## Images - -- Default (with caption) - -![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" } -_Full screen width and center alignment_ - -
- -- Shadow - -![Window shadow](/posts/20190808/window.png){: .shadow width="1548" height="864" .w-75 } -_shadow effect (visible in light mode)_ - -
- -- Left aligned - -![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-75 .normal} - -- Float to left - - ![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-50 .left} - Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum. Phasellus a tortor aliquam, tristique felis sit amet, elementum enim. Integer vestibulum vitae nulla nec pretium. - -- Float to right - - ![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-50 .right} - Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum. Phasellus a tortor aliquam, tristique felis sit amet, elementum enim. Integer vestibulum vitae nulla nec pretium. - -## Mermaid SVG - -```mermaid - gantt - title Adding GANTT diagram functionality to mermaid - apple :a, 2017-07-20, 1w - banana :crit, b, 2017-07-23, 1d - cherry :active, c, after b a, 1d -``` - -## Mathematics - -The mathematics powered by [**MathJax**](https://www.mathjax.org/): - -$$ \sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6} $$ - -When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are - -$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$ - ## Inline code This is an example of `Inline Code`. @@ -153,7 +100,7 @@ This is an example of `Inline Code`. Here is the `/path/to/the/file.extend`{: .filepath}. -## Code block +## Code blocks ### Common @@ -161,22 +108,12 @@ Here is the `/path/to/the/file.extend`{: .filepath}. This is a common code snippet, without syntax highlight and line number. ``` -### Specific Languages - -#### Console - -```console -$ env |grep SHELL -SHELL=/usr/local/bin/bash -PYENV_SHELL=bash -``` - -#### Shell +### Specific Language ```bash if [ $? -ne 0 ]; then - echo "The command was not successful."; - #do the needful / exit + echo "The command was not successful."; + #do the needful / exit fi; ``` @@ -189,6 +126,58 @@ fi; ``` {: file='_sass/jekyll-theme-chirpy.scss'} +## Mathematics + +The mathematics powered by [**MathJax**](https://www.mathjax.org/): + +$$ \sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6} $$ + +When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are + +$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$ + +## Mermaid SVG + +```mermaid + gantt + title Adding GANTT diagram functionality to mermaid + apple :a, 2017-07-20, 1w + banana :crit, b, 2017-07-23, 1d + cherry :active, c, after b a, 1d +``` + +## Images + +### Default (with caption) + +![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" } +_Full screen width and center alignment_ + +### Left aligned + +![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-75 .normal} + +### Float to left + +![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-50 .left} +Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum. + +### Float to right + +![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-50 .right} +Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum. + +### Dark/Light mode & Shadow + +The image below will toggle dark/light mode based on theme preference, notice it has shadows. + +![light mode only](/posts/20190808/devtools-light.png){: .light .w-75 .shadow .rounded-10 w='1212' h='668' } +![dark mode only](/posts/20190808/devtools-dark.png){: .dark .w-75 .shadow .rounded-10 w='1212' h='668' } + +## Video + +{% include embed/youtube.html id='Balreaj8Yqs' %} + ## Reverse Footnote [^footnote]: The footnote source diff --git a/_posts/2019-08-08-write-a-new-post.md b/_posts/2019-08-08-write-a-new-post.md index 1395ece..a1c41c2 100644 --- a/_posts/2019-08-08-write-a-new-post.md +++ b/_posts/2019-08-08-write-a-new-post.md @@ -7,7 +7,7 @@ tags: [writing] render_with_liquid: false --- -This post will guide you how to write a post on _Chirpy_ theme. Even if you have previous experience with Jekyll, this article is worth reading, because many features require specific variables to be set. +This tutorial will guide you how to write a post in the _Chirpy_ template, and it's worth reading even if you've used Jekyll before, as many features require specific variables to be set. ## Naming and Path @@ -177,9 +177,18 @@ By default, the image is centered, but you can specify the position by using one ``` {: .nolineno} +### Dark/Light mode + +You can make images follow theme preferences in dark/light mode. This requires you to prepare two images, one for dark mode and one for light mode, and then assign them a specific class (`dark` or `light`): + +```markdown +![Light mode only](/path/to/light-mode.png){: .light } +![Dark mode only](/path/to/dark-mode.png){: .dark } +``` + ### Shadow -The screenshots of the program window can be considered to show the shadow effect, and the shadow will be visible in the `light` mode: +The screenshots of the program window can be considered to show the shadow effect: ```markdown ![Desktop View](/assets/img/sample/mockup.png){: .shadow } @@ -209,7 +218,7 @@ The parsing result will automatically add the CDN prefix `https://cdn.com` befor ```html The flower ``` -{: .nolineno} +{: .nolineno } ### Image Path @@ -220,7 +229,6 @@ When a post contains many images, it will be a time-consuming task to repeatedly img_path: /img/path/ --- ``` -{: .nolineno } And then, the image source of Markdown can write the file name directly: @@ -238,28 +246,49 @@ The output will be: ### Preview Image -If you want to add an image to the top of the post contents, specify the attribute `path`, `width`, `height`, and `alt` for the image: +If you want to add an image at the top of the article, please provide an image with a resolution of `1200 x 630`. Please note that if the image aspect ratio does not meet `1.91 : 1`, the image will be scaled and cropped. + +Knowing these prerequisites, you can start setting the image's attribute: ```yaml --- image: path: /path/to/image - width: 1000 # in pixels - height: 400 # in pixels alt: image alternative text --- ``` -Except for `alt`, all other options are necessary, especially the `width` and `height`, which are related to user experience and web page loading performance. The above section "[Size](#size)" also mentions this. - Starting from _Chirpy v5.0.0_, the attributes `height` and `width` can be abbreviated: `height` → `h`, `width` → `w`. In addition, the [`img_path`](#image-path) can also be passed to the preview image, that is, when it has been set, the attribute `path` only needs the image file name. For simple use, you can also just use `image` to define the path. ```yml +--- image: /path/to/image +--- ``` +### LQIP + +For preview images: + +```yaml +--- +image: + lqip: /path/to/lqip-file # or base64 URI +--- +``` + +> You can observe LQIP in the preview image of post [_Text and Typography_](/posts/text-and-typography/). + + +For normal images: + +```markdown +![Image description](/path/to/image){: lqip="/path/to/lqip-file" } +``` +{: .nolineno } + ## Pinned Posts You can pin one or more posts to the top of the home page, and the fixed posts are sorted in reverse order according to their release date. Enable by: @@ -357,6 +386,24 @@ If you want to display the **Liquid** snippet, surround the liquid code with `{% Or adding `render_with_liquid: false` (Requires Jekyll 4.0 or higher) to the post's YAML block. +## Videos + +You can embed a video with the following syntax: + +```liquid +{% include embed/{Platform}.html id='{ID}' %} +``` +Where `Platform` is the lowercase of the platform name, and `ID` is the video ID. + +The following table shows how to get the two parameters we need in a given video URL, and you can also know the currently supported video platforms. + +| Video URL | Platform | ID | +|----------------------------------------------------------------------------------------------------|-----------|:--------------| +| [https://www.**youtube**.com/watch?v=**H-B46URT4mg**](https://www.youtube.com/watch?v=H-B46URT4mg) | `youtube` | `H-B46URT4mg` | +| [https://www.**twitch**.tv/videos/**1634779211**](https://www.twitch.tv/videos/1634779211) | `twitch` | `1634779211` | + + + ## Learn More For more knowledge about Jekyll posts, visit the [Jekyll Docs: Posts](https://jekyllrb.com/docs/posts/). From 937b22316aac3f2ca7e64bc4b7e84efe219e90a7 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Wed, 28 Dec 2022 01:24:55 +0800 Subject: [PATCH 31/32] docs(readme): update feature list --- README.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index ee71758..11774ad 100644 --- a/README.md +++ b/README.md @@ -18,24 +18,25 @@ ## Features -- Localized Layout - Dark/Light Theme Mode +- Localized UI language - Pinned Posts - Hierarchical Categories -- Last Modified Date for Posts +- Trending Tags - Table of Contents -- Auto-generated Related Posts +- Last Modified Date of Posts - Syntax Highlighting - Mathematical Expressions - Mermaid Diagram & Flowchart +- Dark/Light Mode Images +- Embed Videos - Disqus/Utterances/Giscus Comments - Search - Atom Feeds - Google Analytics -- GA Pageviews Reporting +- Page Views Reporting - SEO & Performance Optimization - ## Quick Start Before starting, please follow the instructions in the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems`, `Jekyll`, and `Bundler`. In addition, [Git](https://git-scm.com/) is also required to be installed. From 7887b5ab62ca37094f31c37b488d55b3afd9bcb1 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Wed, 28 Dec 2022 01:28:09 +0800 Subject: [PATCH 32/32] chore(release): 5.4.0 --- CHANGELOG.md | 25 +++++++++++++++++++++++++ _javascript/copyright | 2 +- _sass/jekyll-theme-chirpy.scss | 2 +- assets/js/dist/categories.min.js | 2 +- assets/js/dist/commons.min.js | 2 +- assets/js/dist/home.min.js | 2 +- assets/js/dist/misc.min.js | 2 +- assets/js/dist/page.min.js | 2 +- assets/js/dist/post.min.js | 2 +- assets/js/dist/pvreport.min.js | 2 +- jekyll-theme-chirpy.gemspec | 2 +- package.json | 2 +- 12 files changed, 36 insertions(+), 11 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c6b54d6..2305a9a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,31 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +## [5.4.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.3.2...v5.4.0) (2022-12-27) + + +### Features + +* add `rel="me"` to Mastodon sidebar contact links for verification ([#807](https://github.com/cotes2020/jekyll-theme-chirpy/issues/807)) ([d2190c7](https://github.com/cotes2020/jekyll-theme-chirpy/commit/d2190c726f61c8c9732b88b4aecf699dc8bc7deb)) +* add embed video support ([ed6dc53](https://github.com/cotes2020/jekyll-theme-chirpy/commit/ed6dc539eff7003a3765bcd8c31ae5e91a863d65)) +* add shimmer background when image loads ([ab16fdc](https://github.com/cotes2020/jekyll-theme-chirpy/commit/ab16fdc7fc26811130b98a1773beb62bff6182e8)) +* set preview image ratio to 1.91 : 1 ([4b6ccbc](https://github.com/cotes2020/jekyll-theme-chirpy/commit/4b6ccbcbccce27b9fcb035812efefe4eb69301cf)) +* support dark and light mode images ([#481](https://github.com/cotes2020/jekyll-theme-chirpy/issues/481)) ([9306c7b](https://github.com/cotes2020/jekyll-theme-chirpy/commit/9306c7b39ecf9d9146bc1a25eebedc38eb2c3dd6)) +* support LQIP for images ([bffaf63](https://github.com/cotes2020/jekyll-theme-chirpy/commit/bffaf6374f265cec96ef743d42b46fbec3b59797)) + + +### Bug Fixes + +* `hreflang` tag attribute of feed misses `site.alt_lang` ([7651d28](https://github.com/cotes2020/jekyll-theme-chirpy/commit/7651d2851b4bb7d8f0d068b62c036c89a1089bbc)) +* `og:image` will be incorrect if the image uses a cross-domain URL ([8de1abd](https://github.com/cotes2020/jekyll-theme-chirpy/commit/8de1abda6be3633982392178731431b0ddb1b52b)) +* refactoring error when the image URL contains parameters ([ec98f07](https://github.com/cotes2020/jekyll-theme-chirpy/commit/ec98f07aca0b80a9c07fbcdc8e0d7d66dba98ed2)) +* spaces in post title are encoded when sharing ([7efd2f8](https://github.com/cotes2020/jekyll-theme-chirpy/commit/7efd2f8aa2ea1c3aeb7d740bf9a018881c26fe65)) + + +### Improvements + +* **cdn:** optimize cache policy for static assets ([7fb0ee0](https://github.com/cotes2020/jekyll-theme-chirpy/commit/7fb0ee0bedb63eee3f90a49c6d7fb8b5d78c9830)) + ## [5.3.2](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.3.1...v5.3.2) (2022-11-22) diff --git a/_javascript/copyright b/_javascript/copyright index a45813d..f63512d 100644 --- a/_javascript/copyright +++ b/_javascript/copyright @@ -1,5 +1,5 @@ /*! - * Chirpy v5.3.2 (https://github.com/cotes2020/jekyll-theme-chirpy/) + * Chirpy v5.4.0 (https://github.com/cotes2020/jekyll-theme-chirpy/) * © 2019 Cotes Chung * MIT Licensed */ diff --git a/_sass/jekyll-theme-chirpy.scss b/_sass/jekyll-theme-chirpy.scss index e1c42bc..f87f2bb 100644 --- a/_sass/jekyll-theme-chirpy.scss +++ b/_sass/jekyll-theme-chirpy.scss @@ -1,7 +1,7 @@ /*! * The styles for Jekyll theme Chirpy * - * Chirpy v5.3.2 (https://github.com/cotes2020/jekyll-theme-chirpy) + * Chirpy v5.4.0 (https://github.com/cotes2020/jekyll-theme-chirpy) * © 2019 Cotes Chung * MIT Licensed */ diff --git a/assets/js/dist/categories.min.js b/assets/js/dist/categories.min.js index b9a7ded..1f06a32 100644 --- a/assets/js/dist/categories.min.js +++ b/assets/js/dist/categories.min.js @@ -1,5 +1,5 @@ /*! - * Chirpy v5.3.2 (https://github.com/cotes2020/jekyll-theme-chirpy/) + * Chirpy v5.4.0 (https://github.com/cotes2020/jekyll-theme-chirpy/) * © 2019 Cotes Chung * MIT Licensed */ diff --git a/assets/js/dist/commons.min.js b/assets/js/dist/commons.min.js index 177faf0..3577692 100644 --- a/assets/js/dist/commons.min.js +++ b/assets/js/dist/commons.min.js @@ -1,5 +1,5 @@ /*! - * Chirpy v5.3.2 (https://github.com/cotes2020/jekyll-theme-chirpy/) + * Chirpy v5.4.0 (https://github.com/cotes2020/jekyll-theme-chirpy/) * © 2019 Cotes Chung * MIT Licensed */ diff --git a/assets/js/dist/home.min.js b/assets/js/dist/home.min.js index 7640e03..8824d15 100644 --- a/assets/js/dist/home.min.js +++ b/assets/js/dist/home.min.js @@ -1,5 +1,5 @@ /*! - * Chirpy v5.3.2 (https://github.com/cotes2020/jekyll-theme-chirpy/) + * Chirpy v5.4.0 (https://github.com/cotes2020/jekyll-theme-chirpy/) * © 2019 Cotes Chung * MIT Licensed */ diff --git a/assets/js/dist/misc.min.js b/assets/js/dist/misc.min.js index 7640e03..8824d15 100644 --- a/assets/js/dist/misc.min.js +++ b/assets/js/dist/misc.min.js @@ -1,5 +1,5 @@ /*! - * Chirpy v5.3.2 (https://github.com/cotes2020/jekyll-theme-chirpy/) + * Chirpy v5.4.0 (https://github.com/cotes2020/jekyll-theme-chirpy/) * © 2019 Cotes Chung * MIT Licensed */ diff --git a/assets/js/dist/page.min.js b/assets/js/dist/page.min.js index 59cd096..03a7527 100644 --- a/assets/js/dist/page.min.js +++ b/assets/js/dist/page.min.js @@ -1,5 +1,5 @@ /*! - * Chirpy v5.3.2 (https://github.com/cotes2020/jekyll-theme-chirpy/) + * Chirpy v5.4.0 (https://github.com/cotes2020/jekyll-theme-chirpy/) * © 2019 Cotes Chung * MIT Licensed */ diff --git a/assets/js/dist/post.min.js b/assets/js/dist/post.min.js index 706f6e4..fc6aa95 100644 --- a/assets/js/dist/post.min.js +++ b/assets/js/dist/post.min.js @@ -1,5 +1,5 @@ /*! - * Chirpy v5.3.2 (https://github.com/cotes2020/jekyll-theme-chirpy/) + * Chirpy v5.4.0 (https://github.com/cotes2020/jekyll-theme-chirpy/) * © 2019 Cotes Chung * MIT Licensed */ diff --git a/assets/js/dist/pvreport.min.js b/assets/js/dist/pvreport.min.js index f64fa4e..58a7ce0 100644 --- a/assets/js/dist/pvreport.min.js +++ b/assets/js/dist/pvreport.min.js @@ -1,5 +1,5 @@ /*! - * Chirpy v5.3.2 (https://github.com/cotes2020/jekyll-theme-chirpy/) + * Chirpy v5.4.0 (https://github.com/cotes2020/jekyll-theme-chirpy/) * © 2019 Cotes Chung * MIT Licensed */ diff --git a/jekyll-theme-chirpy.gemspec b/jekyll-theme-chirpy.gemspec index 21e7a8a..9c2aa94 100644 --- a/jekyll-theme-chirpy.gemspec +++ b/jekyll-theme-chirpy.gemspec @@ -2,7 +2,7 @@ Gem::Specification.new do |spec| spec.name = "jekyll-theme-chirpy" - spec.version = "5.3.2" + spec.version = "5.4.0" spec.authors = ["Cotes Chung"] spec.email = ["cotes.chung@gmail.com"] diff --git a/package.json b/package.json index 5cd163a..77f9bd9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "jekyll-theme-chirpy", - "version": "5.3.2", + "version": "5.4.0", "description": "A minimal, responsive, and powerful Jekyll theme for presenting professional writing.", "repository": { "type": "git",