From 39b81aa4e0b4c78414250ab1973a0567318c2ab5 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Fri, 31 Mar 2023 21:44:22 +0800 Subject: [PATCH 01/43] docs: update issue template (#958) Close #958 --- .github/ISSUE_TEMPLATE/bug_report.md | 4 ++-- .github/ISSUE_TEMPLATE/feature_request.md | 4 ++-- .github/ISSUE_TEMPLATE/help_wanted.md | 4 ++-- .github/ISSUE_TEMPLATE/question.md | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index c69cfb35e..cdfb0957f 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -5,11 +5,11 @@ about: Create a report to help us improve **NOTE:** Before you start, the following should be completed. -- Read [tutorial][tutorial] to understand the usage and the correct effect of functional design. +- Read [Wiki][wiki] to understand the usage and the correct effect of functional design. - Make sure no [similar issue(including closed ones)][issues] exists. - Make sure the bug is found in the latest code of the `master` branch. -[tutorial]: https://cotes2020.github.io/chirpy-demo/categories/tutorial/ +[wiki]: https://github.com/cotes2020/jekyll-theme-chirpy/wiki [issues]: https://github.com/cotes2020/jekyll-theme-chirpy/issues?q=is%3Aissue ## Describe the bug diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md index 0b8cb580d..089503ff9 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -6,11 +6,11 @@ labels: enhancement **NOTE:** Before you start, the following should be completed. -- Read [tutorial][tutorial] to understand the usage and the correct effect of functional design. +- Read [Wiki][wiki] to understand the usage and the correct effect of functional design. - Make sure no [similar issue(including closed ones)][issues] exists. - Make sure the request is based on the latest code in the `master` branch. -[tutorial]: https://cotes2020.github.io/chirpy-demo/categories/tutorial/ +[wiki]: https://github.com/cotes2020/jekyll-theme-chirpy/wiki [issues]: https://github.com/cotes2020/jekyll-theme-chirpy/issues?q=is%3Aissue ## Is your feature request related to a problem? Please describe diff --git a/.github/ISSUE_TEMPLATE/help_wanted.md b/.github/ISSUE_TEMPLATE/help_wanted.md index 180240e3a..1f4104069 100644 --- a/.github/ISSUE_TEMPLATE/help_wanted.md +++ b/.github/ISSUE_TEMPLATE/help_wanted.md @@ -6,11 +6,11 @@ labels: 'help wanted' **NOTE:** Before you start, the following should be completed. -- Read [tutorial][tutorial] to understand the usage and the correct effect of functional design. +- Read [Wiki][wiki] to understand the usage and the correct effect of functional design. - Make sure no [similar issue(including closed ones)][issues] exists. - Try to find the answer on [Jekyll Forum][forum] and [StackOverflow][stack_overflow]. -[tutorial]: https://cotes2020.github.io/chirpy-demo/categories/tutorial/ +[wiki]: https://github.com/cotes2020/jekyll-theme-chirpy/wiki [issues]: https://github.com/cotes2020/jekyll-theme-chirpy/issues?q=is%3Aissue [forum]: https://talk.jekyllrb.com/ [stack_overflow]: https://stackoverflow.com/questions/tagged/jekyll diff --git a/.github/ISSUE_TEMPLATE/question.md b/.github/ISSUE_TEMPLATE/question.md index fb6c1d759..e3cda3f17 100644 --- a/.github/ISSUE_TEMPLATE/question.md +++ b/.github/ISSUE_TEMPLATE/question.md @@ -6,11 +6,11 @@ labels: question **NOTE:** Before you start, the following should be completed. -- Read [tutorial][tutorial] to understand the usage and the correct effect of functional design. +- Read [Wiki][wiki] to understand the usage and the correct effect of functional design. - Make sure no [similar issue(including closed ones)][issues] exists. - Try to find the answer on [Jekyll Forum][forum] and [StackOverflow][stack_overflow]. -[tutorial]: https://cotes2020.github.io/chirpy-demo/categories/tutorial/ +[wiki]: https://github.com/cotes2020/jekyll-theme-chirpy/wiki [issues]: https://github.com/cotes2020/jekyll-theme-chirpy/issues?q=is%3Aissue [forum]: https://talk.jekyllrb.com/ [stack_overflow]: https://stackoverflow.com/questions/tagged/jekyll From d97f95fca0bcd450ea50709ffba0217f7e65d339 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=83=AD=E6=A1=93=E6=A1=93?= Date: Sun, 2 Apr 2023 22:13:22 +0800 Subject: [PATCH 02/43] feat(i18n): add Traditional Chinese (Taiwan) localization file (#961) --- _data/locales/zh-TW.yml | 84 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 84 insertions(+) create mode 100644 _data/locales/zh-TW.yml diff --git a/_data/locales/zh-TW.yml b/_data/locales/zh-TW.yml new file mode 100644 index 000000000..38bbd5dfd --- /dev/null +++ b/_data/locales/zh-TW.yml @@ -0,0 +1,84 @@ +# The layout text of site + +# ----- Commons label ----- + +layout: + post: 文章 + category: 分類 + tag: 標籤 + +# The tabs of sidebar +tabs: + # format: : + home: 首頁 + categories: 分類 + tags: 標籤 + archives: 封存 + about: 關於 + +# the text displayed in the search bar & search results +search: + hint: 搜尋 + cancel: 取消 + no_results: 沒有搜尋結果 + +panel: + lastmod: 最近更新 + trending_tags: 熱門標籤 + toc: 文章摘要 + +copyright: + # Shown at the bottom of the post + license: + template: 本文章以 :LICENSE_NAME 授權 + name: CC BY 4.0 + link: https://creativecommons.org/licenses/by/4.0/ + + # Displayed in the footer + brief: 保留部份權利。 + verbose: >- + 除非另有說明，否則本網誌的文章均由作者按照姓名標示 4.0 國際 (CC BY 4.0) 授權條款進行授權。 +meta: 本網站使用 :PLATFORM 產生，採用 :THEME 主題。 + +not_found: + statment: 抱歉，您可能正在存取一個已被移動的 URL，或者它從未存在。 + +notification: + update_found: 發現新版本更新。 + update: 更新 + +# ----- Posts related labels ----- + +post: + written_by: 作者 + posted: 發布於 + updated: 更新於 + words: 字 + pageview_measure: 次瀏覽 + read_time: + unit: 分鐘 + prompt: 閱讀 + relate_posts: 相關文章 + share: 分享 + button: + next: 下一篇 + previous: 上一篇 + copy_code: + succeed: 已複製！ + share_link: + title: 分享連結 + succeed: 已複製連結！ + # pinned prompt of posts list on homepage + pin_prompt: 置頂 + +# Date time format. +# See: , +df: + post: + strftime: '%Y/%m/%d' + dayjs: 'YYYY/MM/DD' + +# categories page +categories: + category_measure: 個分類 + post_measure: 篇文章 From fe7047959e3694c6e603e764ded30dacd49e6aa9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rgen=20Ivarsson?= <23526123+JorgenIvarsson@users.noreply.github.com> Date: Mon, 10 Apr 2023 00:23:03 +0200 Subject: [PATCH 03/43] feat(i18n): added Swedish localization file (#969) Nice PR @JorgenIvarsson, everything from the branch name to the commit messages perfectly meets the requirements. Thanks! --- _data/locales/sv-SE.yml | 92 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 92 insertions(+) create mode 100644 _data/locales/sv-SE.yml diff --git a/_data/locales/sv-SE.yml b/_data/locales/sv-SE.yml new file mode 100644 index 000000000..7dfb64c26 --- /dev/null +++ b/_data/locales/sv-SE.yml @@ -0,0 +1,92 @@ +# The layout text of site + +# ----- Commons label ----- + +layout: + post: Inlägg #Post + category: Kategori #Category + tag: Tagga #Tag + +# The tabs of sidebar +tabs: + # format: : + home: Hem #Home + categories: Kategorier #Categories + tags: Taggar #Tags + archives: Arkiv #Archives + about: Om #About + +# the text displayed in the search bar & search results +search: + hint: sök + cancel: Avbryt + no_results: Hoppsan! Hittade inga sökträffar. + +panel: + lastmod: Senast uppdaterad + trending_tags: Trendande taggar + toc: Innehåll + +copyright: + # Shown at the bottom of the post + license: + template: Den här posten är publicerad under licensen :LICENSE_NAME av författaren. + name: CC BY 4.0 + link: https://creativecommons.org/licenses/by/4.0/ + + # Displayed in the footer + brief: Vissa rättigheter är reserverade. + verbose: >- + Om inte annat anges är blogginläggen på denna webbplats licensierade + under Creative Commons Attribution 4.0 International (CC BY 4.0) av författaren. +meta: Byggd med :PLATFORM och temat :THEME . + +not_found: + statment: Ursäkta, vi har tappat bort den här webbadressen eller så pekar den på något som inte längre finns. + +notification: + update_found: Det finns en ny version av innehållet. + update: Uppdatera sidan + +# ----- Posts related labels ----- + +post: + written_by: Av + posted: Postad + updated: Uppdaterad + words: ord + pageview_measure: visningar + read_time: + unit: min + prompt: läsning + relate_posts: Mer läsning + share: Dela + button: + next: Nyare + previous: Äldre + copy_code: + succeed: Kopierat! + share_link: + title: Kopiera länk + succeed: Länken har kopierats! + # pinned prompt of posts list on homepage + pin_prompt: Fastnålad + +# Date time format. +# See: , +df: + post: + strftime: '%b %e, %Y' + dayjs: 'll' + archives: + strftime: '%b' + dayjs: 'MMM' + +# categories page +categories: + category_measure: + singular: kategori + plural: kategorier + post_measure: + singular: inlägg + plural: inlägg From 1719d81d00b32b107c35b3903089be84a9b28a6c Mon Sep 17 00:00:00 2001 From: Song-Zi Vong Date: Mon, 10 Apr 2023 18:35:11 +0800 Subject: [PATCH 04/43] fix(rss): double quotes in the post title will break the XML structure (#965) --- assets/feed.xml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/feed.xml b/assets/feed.xml index 358d44fdc..a244a5662 100644 --- a/assets/feed.xml +++ b/assets/feed.xml @@ -26,7 +26,7 @@ permalink: /feed.xml {% assign post_absolute_url = post.url | absolute_url %} {{ post.title }} - + {{ post.date | date_to_xmlschema }} {% if post.last_modified_at %} {{ post.last_modified_at | date_to_xmlschema }} From b63b65d74321c43001c6cdb5de3ed58b8998fdf8 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Sun, 16 Apr 2023 09:05:50 +0800 Subject: [PATCH 05/43] chore(stylelint): optimize the rule for `font-family` variables (#987) Turn off the rule `value-keyword-case` for `font-family` Resolves #987 --- .stylelintrc.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.stylelintrc.json b/.stylelintrc.json index 09b3c873a..e5cfad0a6 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -16,6 +16,7 @@ "rule-empty-line-before": [ "always", { "ignore": ["after-comment", "first-nested", "inside-block"] } - ] + ], + "value-keyword-case": ["lower", { "ignoreProperties": ["/^\\$/"] }] } } From 7ec31e8948288dabc7c9855df70acaf8fb8895dd Mon Sep 17 00:00:00 2001 From: Song-Zi Vong Date: Mon, 17 Apr 2023 01:31:49 +0800 Subject: [PATCH 06/43] refactor: enhance the configurability of fonts (#986) --- _sass/addon/commons.scss | 2 +- _sass/addon/module.scss | 2 +- _sass/addon/variables.scss | 5 +++++ _sass/jekyll-theme-chirpy.scss | 2 +- 4 files changed, 8 insertions(+), 3 deletions(-) diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index e16184f6b..69ec76ed5 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -34,7 +34,7 @@ body { env(safe-area-inset-bottom) env(safe-area-inset-left); color: var(--text-color); -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif; + font-family: $font-family-base; line-height: 1.75; } diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss index 44f21d25c..b13083aa9 100644 --- a/_sass/addon/module.scss +++ b/_sass/addon/module.scss @@ -7,7 +7,7 @@ %heading { color: var(--heading-color); font-weight: 400; - font-family: Lato, 'Microsoft Yahei', sans-serif; + font-family: $font-family-heading; } %section { diff --git a/_sass/addon/variables.scss b/_sass/addon/variables.scss index 1db532e3d..83faba129 100644 --- a/_sass/addon/variables.scss +++ b/_sass/addon/variables.scss @@ -28,3 +28,8 @@ $bottom-min-height: 35rem !default; /* syntax highlight */ $code-font-size: 0.85rem !default; + +/* fonts */ + +$font-family-base: 'Source Sans Pro', 'Microsoft Yahei', sans-serif; +$font-family-heading: Lato, 'Microsoft Yahei', sans-serif; diff --git a/_sass/jekyll-theme-chirpy.scss b/_sass/jekyll-theme-chirpy.scss index 5716f9d7f..1424a576e 100644 --- a/_sass/jekyll-theme-chirpy.scss +++ b/_sass/jekyll-theme-chirpy.scss @@ -10,9 +10,9 @@ "colors/light-typography", "colors/dark-typography", - "addon/module", "addon/variables", "variables-hook", + "addon/module", "addon/syntax", "addon/commons", From 42a700aa37889faa32d7ec1f6776ce4b9d845dc4 Mon Sep 17 00:00:00 2001 From: Miha Tisnikar Date: Sun, 16 Apr 2023 19:37:49 +0200 Subject: [PATCH 07/43] feat(i18n): add sl-SI.yml with slovenian translations (#989) --- _data/locales/sl-SI.yml | 93 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 93 insertions(+) create mode 100644 _data/locales/sl-SI.yml diff --git a/_data/locales/sl-SI.yml b/_data/locales/sl-SI.yml new file mode 100644 index 000000000..0ff894615 --- /dev/null +++ b/_data/locales/sl-SI.yml @@ -0,0 +1,93 @@ +# The layout text of site + +# ----- Commons label ----- + +layout: + post: Objava #Post + category: Kategorija #Category + tag: Oznaka #Tag + +# The tabs of sidebar +tabs: + # format: : + home: Domov #Home + categories: Kategorije #Categories + tags: Oznake #Tags + archives: Arhiv #Archives + about: O meni #About + +# the text displayed in the search bar & search results +search: + hint: išči #search + cancel: Prekliči #Cancel + no_results: Ups! Vsebina ni bila najdena #Oops! No results found. + +panel: + lastmod: Nedavno Posodobljeno #Recently Updated + trending_tags: Priljubljene Oznake #Trending Tags + toc: Vsebina #Contents + +copyright: + # Shown at the bottom of the post + license: + template: Ta objava je licencirana pod :LICENCE_NAME s strani avtorja. #This post is licensed under :LICENSE_NAME by the author. + name: CC BY 4.0 + link: https://creativecommons.org/licenses/by/4.0/ + + # Displayed in the footer + brief: Nekatere pravice pridržane. #Some rights reserved. + verbose: >- + Razen kjer navedeno drugače, vse objave spletnega dnevnika so licencirane + pod Creative Commons Attribution 4.0 International (CC BY 4.0) s strani avtorja. + +meta: Uporabljena :PLATFORM tema :THEME. #Using the :PLATFORM theme :THEME. + +not_found: + statment: Oprostite, hiperpovezava je neustrezna ali vsebina ne obstajata. #Sorry, we've misplaced that URL or it's pointing to something that doesn't exist. + +notification: + update_found: Novejša različica vsebine je na voljo. #A new version of content is available. + update: Posodobi #Update + +# ----- Posts related labels ----- + +post: + written_by: Od #By + posted: Objavljeno #Posted + updated: Posodobljeno #Updated + words: besede #words + pageview_measure: ogledi #views + read_time: + unit: min + prompt: beri #read + relate_posts: Nadaljnje branje #Further Reading + share: Deli #Share + button: + next: Novejše #Newer + previous: Starejše #Older + copy_code: + succeed: Kopirano! #Copied! + share_link: + title: Kopiraj povezavo #Copy link + succeed: Povezava uspešno kopirana! #Link copied successfully! + # pinned prompt of posts list on homepage + pin_prompt: Pripeto #Pinned + +# Date time format. +# See: , +df: + post: + strftime: '%e %b, %Y' + dayjs: 'll' + archives: + strftime: '%b' + dayjs: 'MMM' + +# categories page +categories: + category_measure: + singular: kategorija #category + plural: kategorije #categories + post_measure: + singular: objava #post + plural: objave #posts From 6f6e309741e23bbcb8c8062e29fc32079a1c7fd8 Mon Sep 17 00:00:00 2001 From: Cotes <11371340+cotes2020@users.noreply.github.com> Date: Mon, 17 Apr 2023 02:09:14 +0800 Subject: [PATCH 08/43] chore(github): simplify PR template (#991) --- .github/PULL_REQUEST_TEMPLATE.md | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 8e41f4f45..ae5da61e1 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -2,8 +2,6 @@ ## Type of change @@ -13,9 +11,14 @@ Please select the desired item checkbox and change it to "[x]", then delete opti --> - [ ] Bug fix (non-breaking change which fixes an issue) - [ ] New feature (non-breaking change which adds functionality) +- [ ] Improvement (refactoring and improving code) - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) - [ ] Documentation update +## Additional context + + + ## How has this been tested -- Bundler version: -- Jekyll version: From e90461aa3c81633863db6a12c5924ddba33bd08e Mon Sep 17 00:00:00 2001 From: Cotes <11371340+cotes2020@users.noreply.github.com> Date: Mon, 17 Apr 2023 02:40:25 +0800 Subject: [PATCH 09/43] perf(tools): avoid initialization interruption in single branch forks (#992) --- tools/init | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/tools/init b/tools/init index af3ce767f..450372a13 100755 --- a/tools/init +++ b/tools/init @@ -77,9 +77,9 @@ check_env() { _check_init } -checkout_latest_tag() { - tag=$(git describe --tags "$(git rev-list --tags --max-count=1)") - git reset --hard "$tag" +checkout_latest_release() { + hash=$(git log --grep="chore(release):" -1 --pretty="%H") + git reset --hard "$hash" } init_files() { @@ -114,7 +114,7 @@ commit() { main() { check_env - checkout_latest_tag + checkout_latest_release init_files commit } From fe203417d993508eedf5b9044fe53c4a566e44f9 Mon Sep 17 00:00:00 2001 From: Song-Zi Vong Date: Wed, 3 May 2023 19:04:18 +0800 Subject: [PATCH 10/43] feat: add a hook to insert custom metadata in `head` tag (#1015) --- _includes/head.html | 3 +++ _includes/metadata-hook.html | 1 + 2 files changed, 4 insertions(+) create mode 100644 _includes/metadata-hook.html diff --git a/_includes/head.html b/_includes/head.html index edec4b160..6407c9ce7 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -113,4 +113,7 @@ {% unless site.theme_mode %} {% include mode-toggle.html %} {% endunless %} + + {% include metadata-hook.html %} + diff --git a/_includes/metadata-hook.html b/_includes/metadata-hook.html new file mode 100644 index 000000000..fd7e9bd20 --- /dev/null +++ b/_includes/metadata-hook.html @@ -0,0 +1 @@ + From aca79c10078343669dd0136f42caaa7279bc1dbe Mon Sep 17 00:00:00 2001 From: Penek Suksuda Date: Wed, 3 May 2023 22:51:34 +0700 Subject: [PATCH 11/43] chore(tools): fix typos (#1018) --- tools/init | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tools/init b/tools/init index 450372a13..29b78340f 100755 --- a/tools/init +++ b/tools/init @@ -96,10 +96,10 @@ init_files() { _sedi "s/^img_cdn:.*/img_cdn:/;s/^avatar:.*/avatar:/" _config.yml fi - # remove the other fies + # remove the other files rm -rf _posts/* - # build assest + # build assets npm i && npm run build # track the js output From 61fdbcb83a3601ecae62ec230602b94a5eb832e1 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Sat, 6 May 2023 07:22:29 +0800 Subject: [PATCH 12/43] perf(i18n): set the global default locales to "en" (#979) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Avoid missing labels caused by languages ​​outside of locales. --- _includes/datetime.html | 16 +-- _includes/footer.html | 20 ++-- _includes/lang.html | 8 ++ _includes/post-nav.html | 47 +++++---- _includes/post-sharing.html | 34 ++++--- _includes/read-time.html | 27 +++-- _includes/refactor-content.html | 2 +- _includes/related-posts.html | 70 +++++++------ _includes/search-loader.html | 2 +- _includes/sidebar.html | 70 ++++++------- _includes/toc.html | 2 +- _includes/topbar.html | 85 ++++++++-------- _includes/trending-tags.html | 24 ++--- _includes/update-list.html | 19 ++-- _layouts/archives.html | 6 +- _layouts/categories.html | 174 ++++++++++++++++++-------------- _layouts/category.html | 12 ++- _layouts/default.html | 37 ++++--- _layouts/home.html | 6 +- _layouts/page.html | 56 +++++----- _layouts/post.html | 26 ++--- _layouts/tag.html | 12 ++- assets/404.html | 4 +- 23 files changed, 417 insertions(+), 342 deletions(-) create mode 100644 _includes/lang.html diff --git a/_includes/datetime.html b/_includes/datetime.html index e659c5a06..00aaea4cc 100644 --- a/_includes/datetime.html +++ b/_includes/datetime.html @@ -4,12 +4,16 @@ --> {% assign wrap_elem = include.wrap | default: 'em' %} -{% assign df_strftime = site.data.locales[site.lang].df.post.strftime | default: '%d/%m/%Y' %} -{% assign df_dayjs = site.data.locales[site.lang].df.post.dayjs | default: 'DD/MM/YYYY' %} +{% assign df_strftime = site.data.locales[include.lang].df.post.strftime | default: '%d/%m/%Y' %} +{% assign df_dayjs = site.data.locales[include.lang].df.post.dayjs | default: 'DD/MM/YYYY' %} -<{{ wrap_elem }} class="{% if include.class %}{{ include.class }}{% endif %}" - data-ts="{{ include.date | date: '%s' }}" - data-df="{{ df_dayjs }}" - {% if include.tooltip %}data-toggle="tooltip" data-placement="bottom"{% endif %}> +<{{ wrap_elem }} + class="{% if include.class %}{{ include.class }}{% endif %}" + data-ts="{{ include.date | date: '%s' }}" + data-df="{{ df_dayjs }}" + {% if include.tooltip %} + data-toggle="tooltip" data-placement="bottom" + {% endif %} +> {{ include.date | date: df_strftime }} diff --git a/_includes/footer.html b/_includes/footer.html index f4b16d936..b8f4ec7fc 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -5,18 +5,22 @@

- © {{ 'now' | date: "%Y" }} + © {{ 'now' | date: '%Y' }} {{ site.social.name }}. - {% if site.data.locales[site.lang].copyright.brief %} - {{ site.data.locales[site.lang].copyright.brief }} + {% if site.data.locales[include.lang].copyright.brief %} + + {{- site.data.locales[include.lang].copyright.brief -}} + {% endif %}

- {%- capture _platform -%} Jekyll {%- endcapture -%} @@ -25,9 +29,11 @@ Chirpy {%- endcapture -%} - {{ site.data.locales[site.lang].meta + {{ + site.data.locales[include.lang].meta | default: 'Using the :PLATFORM theme :THEME.' - | replace: ':PLATFORM', _platform | replace: ':THEME', _theme + | replace: ':PLATFORM', _platform + | replace: ':THEME', _theme }}

diff --git a/_includes/lang.html b/_includes/lang.html new file mode 100644 index 000000000..19558a074 --- /dev/null +++ b/_includes/lang.html @@ -0,0 +1,8 @@ +{% comment %} + Detect appearance language and return it through variable "lang" +{% endcomment %} +{% if site.data.locales[site.lang] %} + {% assign lang = site.lang %} +{% else %} + {% assign lang = 'en' %} +{% endif %} diff --git a/_includes/post-nav.html b/_includes/post-nav.html index 7a12e69c1..76bcd59ab 100644 --- a/_includes/post-nav.html +++ b/_includes/post-nav.html @@ -1,30 +1,37 @@ - +
{% if page.previous.url %} - -

{{ page.previous.title }}

- + +

{{ page.previous.title }}

+ {% else %} -
-

-

-
+
+

-

+
{% endif %} {% if page.next.url %} - -

{{ page.next.title }}

- + +

{{ page.next.title }}

+ {% else %} -
-

-

-
+
+

-

+
{% endif %} -
diff --git a/_includes/post-sharing.html b/_includes/post-sharing.html index c241ea5e3..8c4598e74 100644 --- a/_includes/post-sharing.html +++ b/_includes/post-sharing.html @@ -1,9 +1,7 @@ - + diff --git a/_includes/read-time.html b/_includes/read-time.html index 6363da38b..6d5335773 100644 --- a/_includes/read-time.html +++ b/_includes/read-time.html @@ -1,10 +1,8 @@ - + -{% assign words = include.content | strip_html | number_of_words: "auto" %} +{% assign words = include.content | strip_html | number_of_words: 'auto' %} - + {% assign wpm = 180 %} {% assign min_time = 1 %} @@ -16,15 +14,24 @@ {% endunless %} {% capture read_prompt %} - {{- site.data.locales[site.lang].post.read_time.prompt -}} + {{- site.data.locales[include.lang].post.read_time.prompt -}} {% endcapture %} - - {{- read_time -}}{{" "}}{{- site.data.locales[site.lang].post.read_time.unit -}} + + + {{- read_time -}} + {{ ' ' }} + {{- site.data.locales[include.lang].post.read_time.unit -}} + {%- if include.prompt -%} {%- assign _prompt_words = read_prompt | number_of_words: 'auto' -%} - {%- unless _prompt_words > 1 -%}{{ " " }}{%- endunless -%}{{ read_prompt }} + {%- unless _prompt_words > 1 -%}{{ ' ' }}{%- endunless -%} + {{ read_prompt }} {%- endif -%} diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html index 3a6f943a3..ea6f1393e 100644 --- a/_includes/refactor-content.html +++ b/_includes/refactor-content.html @@ -225,7 +225,7 @@ | append: '
' | append: _label | append: '
' | append: '
' %} diff --git a/_includes/related-posts.html b/_includes/related-posts.html index b992c6ece..69e997096 100644 --- a/_includes/related-posts.html +++ b/_includes/related-posts.html @@ -1,20 +1,20 @@ - + {% assign TOTAL_SIZE = 3 %} - + {% assign TAG_SCORE = 1 %} - + {% assign CATEGORY_SCORE = 0.5 %} -{% assign SEPARATOR = ":" %} +{% assign SEPARATOR = ':' %} -{% assign score_list = "" | split: "" %} +{% assign score_list = '' | split: '' %} {% assign last_index = site.posts.size | minus: 1 %} {% for i in (0..last_index) %} @@ -42,11 +42,9 @@ {% capture score_item %}{{ score }}{{ SEPARATOR }}{{ i }}{% endcapture %} {% assign score_list = score_list | push: score_item %} {% endif %} - {% endfor %} - -{% assign index_list = "" | split: "" %} +{% assign index_list = '' | split: '' %} {% if score_list.size > 0 %} {% assign score_list = score_list | sort | reverse %} @@ -56,13 +54,13 @@ {% endfor %} {% endif %} - + {% assign less = TOTAL_SIZE | minus: index_list.size %} {% if less > 0 %} {% for i in (0..last_index) %} {% assign post = site.posts[i] %} - {% if post.url != page.url %} + {% if post.url != page.url %} {% capture cur_index %}{{ i }}{% endcapture %} {% unless index_list contains cur_index %} {% assign index_list = index_list | push: cur_index %} @@ -77,27 +75,33 @@ {% if index_list.size > 0 %} + +
+ {% endif %} diff --git a/_includes/search-loader.html b/_includes/search-loader.html index 603ea5bed..b14d1e531 100644 --- a/_includes/search-loader.html +++ b/_includes/search-loader.html @@ -14,7 +14,7 @@
{% endcapture %} -{% capture not_found %}

{{ site.data.locales[site.lang].search.no_results }}

{% endcapture %} +{% capture not_found %}

{{ site.data.locales[include.lang].search.no_results }}

{% endcapture %} diff --git a/_includes/sidebar.html b/_includes/sidebar.html index c5705978d..5dd8fc2d1 100644 --- a/_includes/sidebar.html +++ b/_includes/sidebar.html @@ -1,6 +1,4 @@ - + + + + +
- {% unless site.theme_mode %}
- - + + + + diff --git a/_includes/toc.html b/_includes/toc.html index 0d1967c4c..d47ea2894 100644 --- a/_includes/toc.html +++ b/_includes/toc.html @@ -7,7 +7,7 @@ {% if enable_toc %}
-
{{- site.data.locales[site.lang].panel.toc -}}
+
{{- site.data.locales[include.lang].panel.toc -}}
diff --git a/_includes/topbar.html b/_includes/topbar.html index 51fbf1a91..91494db86 100644 --- a/_includes/topbar.html +++ b/_includes/topbar.html @@ -1,70 +1,67 @@ - +
+ {% assign paths = page.url | split: '/' %} - {% assign paths = page.url | split: '/' %} + {% if paths.size == 0 or page.layout == 'home' %} + + {{ site.data.locales[include.lang].tabs.home | capitalize }} - {% if paths.size == 0 or page.layout == 'home' %} - - {{ site.data.locales[site.lang].tabs.home | capitalize }} + {% else %} + {% for item in paths %} + {% if forloop.first %} + + + {{ site.data.locales[include.lang].tabs.home | capitalize }} + + - {% else %} + {% elsif forloop.last %} + {% if page.collection == 'tabs' %} + {{ site.data.locales[include.lang].tabs[item] | default: page.title }} + {% else %} + {{ page.title }} + {% endif %} - {% for item in paths %} - - {% if forloop.first %} - - - {{ site.data.locales[site.lang].tabs.home | capitalize }} - - - - {% elsif forloop.last %} - - {% if page.collection == 'tabs' %} - {{ site.data.locales[site.lang].tabs[item] | default: page.title }} - {% else %} - {{ page.title }} + {% elsif page.layout == 'category' or page.layout == 'tag' %} + + + {{ site.data.locales[include.lang].tabs[item] | default: page.title }} + + {% endif %} - - {% elsif page.layout == 'category' or page.layout == 'tag' %} - - - {{ site.data.locales[site.lang].tabs[item] | default: page.title }} - - - {% endif %} - - {% endfor %} - - {% endif %} - - + {% endfor %} + {% endif %} + +
{% if page.layout == 'home' %} - {{- site.data.locales[site.lang].title | default: site.title -}} + {{- site.data.locales[include.lang].title | default: site.title -}} {% elsif page.collection == 'tabs' or page.layout == 'page' %} {%- capture tab_key -%}{{ page.url | split: '/' }}{%- endcapture -%} - {{- site.data.locales[site.lang].tabs[tab_key] | default: page.title -}} + {{- site.data.locales[include.lang].tabs[tab_key] | default: page.title -}} {% else %} - {{- site.data.locales[site.lang].layout[page.layout] | default: page.layout | capitalize -}} + {{- site.data.locales[include.lang].layout[page.layout] | default: page.layout | capitalize -}} {% endif %}
- + - {{ site.data.locales[site.lang].search.cancel }} + {{ site.data.locales[include.lang].search.cancel }}
-
diff --git a/_includes/trending-tags.html b/_includes/trending-tags.html index d0f58a1c1..a36108cbc 100644 --- a/_includes/trending-tags.html +++ b/_includes/trending-tags.html @@ -4,26 +4,26 @@ {% assign MAX = 10 %} -{% assign size_list = "" | split: "" %} -{% assign tag_list = "" | split: "" %} +{% assign size_list = '' | split: '' %} +{% assign tag_list = '' | split: '' %} {% for tag in site.tags %} {% assign size = tag | last | size %} {% assign size_list = size_list | push: size %} - {% assign tag_str = tag | first | append: "::" | append: size %} - {% assign tag_list = tag_list | push: tag_str %} + {% assign tag_str = tag | first | append: '::' | append: size %} + {% assign tag_list = tag_list | push: tag_str %} {% endfor %} {% assign size_list = size_list | sort | reverse %} {% assign tag_list = tag_list | sort_natural %} -{% assign trending_tags = "" | split: "" %} +{% assign trending_tags = '' | split: '' %} {% for size in size_list limit: MAX %} {% for tag_str in tag_list %} - {% assign tag = tag_str | split: "::" %} + {% assign tag = tag_str | split: '::' %} {% assign tag_name = tag | first %} {% assign tag_size = tag | last | plus: 0 %} {% if tag_size == size %} @@ -37,14 +37,12 @@ {% if trending_tags.size > 0 %}
-
{{- site.data.locales[site.lang].panel.trending_tags -}}
+
{{- site.data.locales[include.lang].panel.trending_tags -}}
- - {% for tag_name in trending_tags %} - {% assign url = tag_name | slugify | url_encode | prepend: "/tags/" | append: "/" %} - {{ tag_name }} - {% endfor %} - + {% for tag_name in trending_tags %} + {% assign url = tag_name | slugify | url_encode | prepend: '/tags/' | append: '/' %} + {{ tag_name }} + {% endfor %}
{% endif %} diff --git a/_includes/update-list.html b/_includes/update-list.html index a4edd11e4..0ee7b7028 100644 --- a/_includes/update-list.html +++ b/_includes/update-list.html @@ -4,7 +4,7 @@ {% assign MAX_SIZE = 5 %} -{% assign all_list = "" | split: "" %} +{% assign all_list = '' | split: '' %} {% for post in site.posts %} {% if post.last_modified_at %} @@ -17,24 +17,25 @@ {% assign all_list = all_list | sort | reverse %} -{% assign update_list = "" | split: "" %} +{% assign update_list = '' | split: '' %} -{% for entry in all_list limit:MAX_SIZE %} +{% for entry in all_list limit: MAX_SIZE %} {% assign update_list = update_list | push: entry %} {% endfor %} {% if update_list.size > 0 %} -
-
{{- site.data.locales[site.lang].panel.lastmod -}}
+
{{- site.data.locales[include.lang].panel.lastmod -}}
    {% for item in update_list %} - {% assign index = item | split: "::" | last | plus: 0 %} + {% assign index = item | split: '::' | last | plus: 0 %} {% assign post = site.posts[index] %} {% assign url = post.url | relative_url %} -
  • {{ post.title }}
    • +
  • + {{ post.title }} +
    • {% endfor %}
-
- + + {% endif %} diff --git a/_layouts/archives.html b/_layouts/archives.html index f86b41783..fd482e555 100644 --- a/_layouts/archives.html +++ b/_layouts/archives.html @@ -3,8 +3,10 @@ layout: page # The Archives of posts. --- -{% assign df_strftime_m = site.data.locales[site.lang].df.archives.strftime | default: '/ %m' %} -{% assign df_dayjs_m = site.data.locales[site.lang].df.archives.dayjs | default: '/ MM' %} +{% include lang.html %} + +{% assign df_strftime_m = site.data.locales[lang].df.archives.strftime | default: '/ %m' %} +{% assign df_dayjs_m = site.data.locales[lang].df.archives.dayjs | default: '/ MM' %}
diff --git a/_layouts/categories.html b/_layouts/categories.html index b207186d3..a08e4c566 100644 --- a/_layouts/categories.html +++ b/_layouts/categories.html @@ -3,8 +3,10 @@ layout: page # All the Categories of posts --- -{% assign HEAD_PREFIX = "h_" %} -{% assign LIST_PREFIX = "l_" %} +{% include lang.html %} + +{% assign HEAD_PREFIX = 'h_' %} +{% assign LIST_PREFIX = 'l_' %} {% assign group_index = 0 %} @@ -16,7 +18,7 @@ layout: page {% assign first_post = posts_of_category | first %} {% if category_name == first_post.categories[0] %} - {% assign sub_categories = "" | split: "" %} + {% assign sub_categories = '' | split: '' %} {% for post in posts_of_category %} {% assign second_category = post.categories[1] %} @@ -30,89 +32,107 @@ layout: page {% assign sub_categories = sub_categories | sort %} {% assign sub_categories_size = sub_categories | size %} -
- -
- - +
+ +
+ + - {% capture _category_url %}/categories/{{ category_name | slugify | url_encode }}/{% endcapture %} - {{ category_name }} + {% capture _category_url %}/categories/{{ category_name | slugify | url_encode }}/{% endcapture %} + {{ category_name }} - - {% assign top_posts_size = site.categories[category_name] | size %} - - {% if sub_categories_size > 0 %} - {{ sub_categories_size }} - {% if sub_categories_size > 1 %} - {{ site.data.locales[site.lang].categories.category_measure.plural - | default: site.data.locales[site.lang].categories.category_measure }} - {% else %} - {{ site.data.locales[site.lang].categories.category_measure.singular - | default: site.data.locales[site.lang].categories.category_measure }} - {% endif %}, - {% endif %} - - {{ top_posts_size }} - - {% if top_posts_size > 1 %} - {{ site.data.locales[site.lang].categories.post_measure.plural - | default: site.data.locales[site.lang].categories.post_measure }} - {% else %} - {{ site.data.locales[site.lang].categories.post_measure.singular - | default: site.data.locales[site.lang].categories.post_measure }} - {% endif %} - - - - - {% if sub_categories_size > 0%} - - - - {% else %} - - - - {% endif %} - -
- - - {% if sub_categories_size > 0 %} -
-
    - {% for sub_category in sub_categories %} -
  • - - - {% capture _sub_ctg_url %}/categories/{{ sub_category | slugify | url_encode }}/{% endcapture %} - {{ sub_category }} - - {% assign posts_size = site.categories[sub_category] | size %} + + {% assign top_posts_size = site.categories[category_name] | size %} - {{ posts_size }} + {% if sub_categories_size > 0 %} + {{ sub_categories_size }} + {% if sub_categories_size > 1 %} + {{ + site.data.locales[lang].categories.category_measure.plural + | default: site.data.locales[lang].categories.category_measure + }} + {% else %} + {{ + site.data.locales[lang].categories.category_measure.singular + | default: site.data.locales[lang].categories.category_measure + }} + {% endif -%} + , + {% endif %} - {% if posts_size > 1 %} - {{ site.data.locales[site.lang].categories.post_measure.plural - | default: site.data.locales[site.lang].categories.post_measure }} + {{ top_posts_size }} + + {% if top_posts_size > 1 %} + {{ + site.data.locales[lang].categories.post_measure.plural + | default: site.data.locales[lang].categories.post_measure + }} {% else %} - {{ site.data.locales[site.lang].categories.post_measure.singular - | default: site.data.locales[site.lang].categories.post_measure }} + {{ + site.data.locales[lang].categories.post_measure.singular + | default: site.data.locales[lang].categories.post_measure + }} {% endif %} -
    • - {% endfor %} -
-
- {% endif %} + -
+ + {% if sub_categories_size > 0 %} + + + + {% else %} + + + + {% endif %} +
+ + + + {% if sub_categories_size > 0 %} +
+
    + {% for sub_category in sub_categories %} +
  • + + + {% capture _sub_ctg_url %}/categories/{{ sub_category | slugify | url_encode }}/{% endcapture %} + {{ sub_category }} + + {% assign posts_size = site.categories[sub_category] | size %} + + {{ posts_size }} + + {% if posts_size > 1 %} + {{ + site.data.locales[lang].categories.post_measure.plural + | default: site.data.locales[lang].categories.post_measure + }} + {% else %} + {{ + site.data.locales[lang].categories.post_measure.singular + | default: site.data.locales[lang].categories.post_measure + }} + {% endif %} + +
    • + {% endfor %} +
+
+ {% endif %} +
+ {% assign group_index = group_index | plus: 1 %} - {% endif %} {% endfor %} diff --git a/_layouts/category.html b/_layouts/category.html index 07129bb07..b926637f2 100644 --- a/_layouts/category.html +++ b/_layouts/category.html @@ -3,6 +3,8 @@ layout: page # The Category layout --- +{% include lang.html %} +

@@ -12,11 +14,11 @@ layout: page
    {% for post in page.posts %} -
  • - {{ post.title }} - - {% include datetime.html date=post.date wrap='span' class='text-muted small' %} -
    • +
  • + {{ post.title }} + + {% include datetime.html date=post.date wrap='span' class='text-muted small' lang=lang %} +
    • {% endfor %}

diff --git a/_layouts/default.html b/_layouts/default.html index a98c23061..3705831d6 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -3,10 +3,12 @@ layout: compress # Default layout --- - + {% include assets-origin.html %} +{% include lang.html %} + {% capture prefer_mode %} {% if site.theme_mode %} data-mode="{{ site.theme_mode }}" @@ -14,26 +16,24 @@ layout: compress {% endcapture %} - - + {% include head.html %} + {% include sidebar.html lang=lang %} - {% include sidebar.html %} - - {% include topbar.html %} + {% include topbar.html lang=lang %}
{{ content }}
- {% include search-results.html %} + {% include search-results.html lang=lang %} +
+ -
- - {% include footer.html %} + {% include footer.html lang=lang %} {% if page.mermaid %} {% include mermaid.html %} @@ -46,17 +46,24 @@ layout: compress {% if site.pwa.enabled %} - diff --git a/_layouts/tag.html b/_layouts/tag.html index 5fd528f56..8dbd65b5c 100644 --- a/_layouts/tag.html +++ b/_layouts/tag.html @@ -3,6 +3,8 @@ layout: page # The layout for Tag page --- +{% include lang.html %} +

@@ -11,11 +13,11 @@ layout: page

    {% for post in page.posts %} -
  • - {{ post.title }} - - {% include datetime.html date=post.date wrap='span' class='text-muted small' %} -
    • +
  • + {{ post.title }} + + {% include datetime.html date=post.date wrap='span' class='text-muted small' lang=lang %} +
    • {% endfor %}
diff --git a/assets/404.html b/assets/404.html index 4490ea5fd..0337bac3f 100644 --- a/assets/404.html +++ b/assets/404.html @@ -9,6 +9,8 @@ redirect_from: - /posts/ --- +{% include lang.html %} +
-

{{site.data.locales[site.lang].not_found.statment }}

+

{{ site.data.locales[lang].not_found.statment }}

From 8da583d403456f6460ec1a6ebcbb0c2ca8127ff6 Mon Sep 17 00:00:00 2001 From: Darian Miller Date: Fri, 5 May 2023 21:35:01 -0500 Subject: [PATCH 13/43] feat: support hiding the modification date of a post (#1020) There is the current ability to set `last_modified_at` in the front matter of post and use that datetime instead of the built in logic. New feature in post.html: if the modified date time matches the date of the post, then don't show "Updated xxxx" --- _includes/update-list.html | 2 +- _layouts/post.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/_includes/update-list.html b/_includes/update-list.html index 0ee7b7028..0b5522584 100644 --- a/_includes/update-list.html +++ b/_includes/update-list.html @@ -7,7 +7,7 @@ {% assign all_list = '' | split: '' %} {% for post in site.posts %} - {% if post.last_modified_at %} + {% if post.last_modified_at and post.last_modified_at != post.date %} {% capture elem %} {{- post.last_modified_at | date: "%Y%m%d%H%M%S" -}}::{{- forloop.index0 -}} {% endcapture %} diff --git a/_layouts/post.html b/_layouts/post.html index 2296df203..54e026268 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -21,7 +21,7 @@ tail_includes: - {% if page.last_modified_at %} + {% if page.last_modified_at and page.last_modified_at != page.date %} {{ site.data.locales[lang].post.updated }} {% include datetime.html date=page.last_modified_at tooltip=true lang=lang %} From ee88cec270ea5938f98913a3edf28a684cfbd6c0 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Sat, 13 May 2023 01:02:15 +0800 Subject: [PATCH 14/43] fix: parameter parsing error in image URL (#1022) --- _includes/refactor-content.html | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html index ea6f1393e..668d92b40 100644 --- a/_includes/refactor-content.html +++ b/_includes/refactor-content.html @@ -94,9 +94,9 @@ {% continue %} {% endunless %} - {% assign _pair = _attr | remove: '"' | split: '=' %} + {% assign _pair = _attr | split: '="' %} {% capture _key %}{{ _pair | first }}{% endcapture %} - {% capture _value %}{{ _pair | last }}{% endcapture %} + {% capture _value %}{{ _pair | last | remove: '"' }}{% endcapture %} {% case _key %} {% when 'width' %} @@ -110,7 +110,6 @@ {% when 'class' %} {% assign _class = _value %} {% endcase %} - {% endfor %} From 97b8dfeed6ce7677f6472e28dc3b03f3c2968b12 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Sat, 18 Mar 2023 06:28:44 +0800 Subject: [PATCH 15/43] feat(ui): show preview image in home page --- _data/locales/ar.yml | 10 +- _data/locales/bg-BG.yml | 2 - _data/locales/cs-CZ.yml | 10 +- _data/locales/de-DE.yml | 2 - _data/locales/el-GR.yml | 12 +- _data/locales/en.yml | 10 +- _data/locales/es-ES.yml | 4 +- _data/locales/fi-FI.yml | 10 +- _data/locales/fr-FR.yml | 2 - _data/locales/hu-HU.yml | 8 +- _data/locales/id-ID.yml | 2 - _data/locales/it-IT.yml | 13 +- _data/locales/ko-KR.yml | 6 +- _data/locales/my-MM.yml | 2 - _data/locales/pt-BR.yml | 2 - _data/locales/ru-RU.yml | 2 - _data/locales/tr-TR.yml | 2 - _data/locales/uk-UA.yml | 2 - _data/locales/vi-VN.yml | 3 - _data/locales/zh-CN.yml | 6 +- _includes/js-selector.html | 23 +- _includes/refactor-content.html | 43 +-- _javascript/home.js | 8 + _javascript/modules/components/img-extra.js | 27 -- .../modules/components/img-lazyload.js | 15 + _javascript/modules/components/img-popup.js | 22 ++ _javascript/modules/components/pageviews.js | 8 +- _javascript/modules/plugins.js | 3 +- _javascript/page.js | 10 +- _javascript/post.js | 6 +- _layouts/home.html | 33 ++- _layouts/page.html | 9 +- _sass/addon/commons.scss | 11 +- _sass/addon/module.scss | 11 +- _sass/colors/dark-typography.scss | 13 +- _sass/colors/light-typography.scss | 9 +- _sass/layout/home.scss | 265 +++++++++++------- _sass/layout/post.scss | 4 +- rollup.config.js | 1 + 39 files changed, 347 insertions(+), 284 deletions(-) create mode 100644 _javascript/home.js delete mode 100644 _javascript/modules/components/img-extra.js create mode 100644 _javascript/modules/components/img-lazyload.js create mode 100644 _javascript/modules/components/img-popup.js diff --git a/_data/locales/ar.yml b/_data/locales/ar.yml index 7f1725f69..2ad043b57 100644 --- a/_data/locales/ar.yml +++ b/_data/locales/ar.yml @@ -70,18 +70,16 @@ post: share_link: title: أنسخ الرابط succeed: تم نسخ الرابط بنجاح! - # pinned prompt of posts list on homepage - pin_prompt: مثبت # Date time format. # See: , df: post: - strftime: '%b %e, %Y' - dayjs: 'll' + strftime: "%b %e, %Y" + dayjs: "ll" archives: - strftime: '%b' - dayjs: 'MMM' + strftime: "%b" + dayjs: "MMM" # categories page categories: diff --git a/_data/locales/bg-BG.yml b/_data/locales/bg-BG.yml index 3e4103cee..f8fe28ccb 100644 --- a/_data/locales/bg-BG.yml +++ b/_data/locales/bg-BG.yml @@ -70,8 +70,6 @@ post: share_link: title: Копирай линк succeed: Линкът е копиран успешно! - # pinned prompt of posts list on homepage - pin_prompt: Прикрепенa # categories page categories: diff --git a/_data/locales/cs-CZ.yml b/_data/locales/cs-CZ.yml index 39b585c45..6f636e34c 100644 --- a/_data/locales/cs-CZ.yml +++ b/_data/locales/cs-CZ.yml @@ -70,18 +70,16 @@ post: share_link: title: Kopírovat odkaz succeed: Zkopírováno! - # pinned prompt of posts list on homepage - pin_prompt: Připnuto # Date time format. # See: , df: post: - strftime: '%b %e, %Y' - dayjs: 'll' + strftime: "%b %e, %Y" + dayjs: "ll" archives: - strftime: '%b' - dayjs: 'MMM' + strftime: "%b" + dayjs: "MMM" # categories page categories: diff --git a/_data/locales/de-DE.yml b/_data/locales/de-DE.yml index 3088a3c45..7e77d95d3 100644 --- a/_data/locales/de-DE.yml +++ b/_data/locales/de-DE.yml @@ -69,8 +69,6 @@ post: share_link: title: Link kopieren succeed: Link erfolgreich kopiert! - # pinned prompt of posts list on homepage - pin_prompt: Angepinnt # categories page categories: diff --git a/_data/locales/el-GR.yml b/_data/locales/el-GR.yml index fbc7c2b67..79e45dc96 100644 --- a/_data/locales/el-GR.yml +++ b/_data/locales/el-GR.yml @@ -70,18 +70,16 @@ post: share_link: title: Αντιγραφή συνδέσμου succeed: Η διεύθυνση αντιγράφθηκε με επιτυχία! - # pinned prompt of posts list on homepage - pin_prompt: Pinned # Date time format. # See: , df: post: - strftime: '%b %e, %Y' - dayjs: 'll' + strftime: "%b %e, %Y" + dayjs: "ll" archives: - strftime: '%b' - dayjs: 'MMM' + strftime: "%b" + dayjs: "MMM" # categories page categories: @@ -90,4 +88,4 @@ categories: plural: Κατηγορίες post_measure: singular: Δημοσίευση - plural: Δημοσιεύσεις \ No newline at end of file + plural: Δημοσιεύσεις diff --git a/_data/locales/en.yml b/_data/locales/en.yml index 975f5f011..fe8bf1f69 100644 --- a/_data/locales/en.yml +++ b/_data/locales/en.yml @@ -70,18 +70,16 @@ post: share_link: title: Copy link succeed: Link copied successfully! - # pinned prompt of posts list on homepage - pin_prompt: Pinned # Date time format. # See: , df: post: - strftime: '%b %e, %Y' - dayjs: 'll' + strftime: "%b %e, %Y" + dayjs: "ll" archives: - strftime: '%b' - dayjs: 'MMM' + strftime: "%b" + dayjs: "MMM" # categories page categories: diff --git a/_data/locales/es-ES.yml b/_data/locales/es-ES.yml index ee3a20f9e..f26cd894f 100644 --- a/_data/locales/es-ES.yml +++ b/_data/locales/es-ES.yml @@ -59,7 +59,7 @@ post: pageview_measure: visitas read_time: unit: min - prompt: ' de lectura' + prompt: " de lectura" relate_posts: Lecturas adicionales share: Compartir button: @@ -70,8 +70,6 @@ post: share_link: title: Copiar enlace succeed: ¡Enlace copiado! - # pinned prompt of posts list on homepage - pin_prompt: Fijado # categories page categories: diff --git a/_data/locales/fi-FI.yml b/_data/locales/fi-FI.yml index 605969f86..73276633e 100644 --- a/_data/locales/fi-FI.yml +++ b/_data/locales/fi-FI.yml @@ -69,18 +69,16 @@ post: share_link: title: Kopioi linkki succeed: Linkki kopioitu onnistuneesti! - # pinned prompt of posts list on homepage - pin_prompt: Kiinnitetty # Date time format. # See: , df: post: - strftime: '%b %e, %Y' - dayjs: 'll' + strftime: "%b %e, %Y" + dayjs: "ll" archives: - strftime: '%b' - dayjs: 'MMM' + strftime: "%b" + dayjs: "MMM" # categories page categories: diff --git a/_data/locales/fr-FR.yml b/_data/locales/fr-FR.yml index 0d29a8708..72b034db2 100644 --- a/_data/locales/fr-FR.yml +++ b/_data/locales/fr-FR.yml @@ -70,8 +70,6 @@ post: share_link: title: Copier le lien succeed: Lien copié avec succès ! - # pinned prompt of posts list on homepage - pin_prompt: Épinglé # categories page categories: diff --git a/_data/locales/hu-HU.yml b/_data/locales/hu-HU.yml index f24b8c5ee..d79169c12 100644 --- a/_data/locales/hu-HU.yml +++ b/_data/locales/hu-HU.yml @@ -38,9 +38,9 @@ copyright: # Displayed in the footer brief: Néhány jog fenntartva. verbose: >- - Az oldalon található tartalmak - Creative Commons Attribution 4.0 International (CC BY 4.0) licenccel rendelkeznek, - hacsak másképp nincs jelezve. + Az oldalon található tartalmak + Creative Commons Attribution 4.0 International (CC BY 4.0) licenccel rendelkeznek, + hacsak másképp nincs jelezve. meta: Készítve :PLATFORM motorral :THEME témával. @@ -72,8 +72,6 @@ post: share_link: title: Link másolása succeed: Link sikeresen másolva! - # pinned prompt of posts list on homepage - pin_prompt: Kitűzve # categories page categories: diff --git a/_data/locales/id-ID.yml b/_data/locales/id-ID.yml index 59ec66170..c052f9ab0 100644 --- a/_data/locales/id-ID.yml +++ b/_data/locales/id-ID.yml @@ -70,8 +70,6 @@ post: share_link: title: Salin tautan succeed: Tautan berhasil disalin! - # pinned prompt of posts list on homepage - pin_prompt: Disematkan # categories page categories: diff --git a/_data/locales/it-IT.yml b/_data/locales/it-IT.yml index 03aa19c50..f29e7be97 100644 --- a/_data/locales/it-IT.yml +++ b/_data/locales/it-IT.yml @@ -40,8 +40,7 @@ copyright: Eccetto quando esplicitamente menzionato, i post di questo blog sono da ritenersi sotto i termini di licenza Creative Commons Attribution 4.0 International (CC BY 4.0). - -meta: Servizio offerto da :PLATFORM con tema :THEME. +meta: Servizio offerto da :PLATFORM con tema :THEME. not_found: statment: Ci scusiamo, non è stato possibile trovare l'URL in questione. Potrebbe puntare ad una pagina non esistente. @@ -70,18 +69,16 @@ post: share_link: title: Copia link succeed: Link copiato con successo! - # pinned prompt of posts list on homepage - pin_prompt: In alto # Date time format. # See: , df: post: - strftime: '%b %e, %Y' - dayjs: 'll' + strftime: "%b %e, %Y" + dayjs: "ll" archives: - strftime: '%b' - dayjs: 'MMM' + strftime: "%b" + dayjs: "MMM" # categories page categories: diff --git a/_data/locales/ko-KR.yml b/_data/locales/ko-KR.yml index 73e1ded3e..6f9cea8e2 100644 --- a/_data/locales/ko-KR.yml +++ b/_data/locales/ko-KR.yml @@ -70,15 +70,13 @@ post: share_link: title: 링크 복사하기 succeed: 링크가 복사되었습니다! - # pinned prompt of posts list on homepage - pin_prompt: 핀 # Date time format. # See: , df: post: - strftime: '%Y/%m/%d' - dayjs: 'YYYY/MM/DD' + strftime: "%Y/%m/%d" + dayjs: "YYYY/MM/DD" # categories page categories: diff --git a/_data/locales/my-MM.yml b/_data/locales/my-MM.yml index 9990c763c..2669e5539 100644 --- a/_data/locales/my-MM.yml +++ b/_data/locales/my-MM.yml @@ -70,8 +70,6 @@ post: share_link: title: လင့်ခ်ကို ကူးယူရန် succeed: လင့်ခ်ကို ကူးယူလိုက်ပြီ။ - # pinned prompt of posts list on homepage - pin_prompt: ချိတ်ထားသည်။ # categories page categories: diff --git a/_data/locales/pt-BR.yml b/_data/locales/pt-BR.yml index 831e6d38d..d0071c66b 100644 --- a/_data/locales/pt-BR.yml +++ b/_data/locales/pt-BR.yml @@ -70,8 +70,6 @@ post: share_link: title: Copie o link succeed: Link copiado com sucesso! - # pinned prompt of posts list on homepage - pin_prompt: Fixado # categories page categories: diff --git a/_data/locales/ru-RU.yml b/_data/locales/ru-RU.yml index 3cd937c64..91aaf06e4 100644 --- a/_data/locales/ru-RU.yml +++ b/_data/locales/ru-RU.yml @@ -70,8 +70,6 @@ post: share_link: title: Скопировать ссылку succeed: Ссылка успешно скопирована! - # pinned prompt of posts list on homepage - pin_prompt: Закреплено # categories page categories: diff --git a/_data/locales/tr-TR.yml b/_data/locales/tr-TR.yml index f7c256713..e8ec92867 100644 --- a/_data/locales/tr-TR.yml +++ b/_data/locales/tr-TR.yml @@ -70,8 +70,6 @@ post: share_link: title: Linki kopyala succeed: Link kopyalandı. - # pinned prompt of posts list on homepage - pin_prompt: Sabitlendi # categories page categories: diff --git a/_data/locales/uk-UA.yml b/_data/locales/uk-UA.yml index 6925e42a3..58b3ba53c 100644 --- a/_data/locales/uk-UA.yml +++ b/_data/locales/uk-UA.yml @@ -70,8 +70,6 @@ post: share_link: title: Скопіювати посилання succeed: Посилання успішно скопійовано! - # pinned prompt of posts list on homepage - pin_prompt: Закріплено # categories page categories: diff --git a/_data/locales/vi-VN.yml b/_data/locales/vi-VN.yml index 592000df1..6b3751207 100644 --- a/_data/locales/vi-VN.yml +++ b/_data/locales/vi-VN.yml @@ -39,7 +39,6 @@ copyright: verbose: >- Trừ khi có ghi chú khác, các bài viết đăng trên trang này được cấp phép bởi tác giả theo giấy phép Creative Commons Attribution 4.0 International (CC BY 4.0). meta: Trang web này được tạo bởi :PLATFORM với chủ đề :THEME. - not_found: statment: Xin lỗi, chúng tôi đã đặt nhầm URL hoặc đường dẫn trỏ đến một trang nào đó không tồn tại. @@ -68,8 +67,6 @@ post: share_link: title: Sao chép đường dẫn succeed: Đã sao chép đường dẫn thành công! - # pinned prompt of posts list on homepage - pin_prompt: Bài ghim # categories page categories: diff --git a/_data/locales/zh-CN.yml b/_data/locales/zh-CN.yml index 1463e9553..624706f10 100644 --- a/_data/locales/zh-CN.yml +++ b/_data/locales/zh-CN.yml @@ -69,15 +69,13 @@ post: share_link: title: 分享链接 succeed: 链接已复制！ - # pinned prompt of posts list on homepage - pin_prompt: 顶置 # Date time format. # See: , df: post: - strftime: '%Y/%m/%d' - dayjs: 'YYYY/MM/DD' + strftime: "%Y/%m/%d" + dayjs: "YYYY/MM/DD" # categories page categories: diff --git a/_includes/js-selector.html b/_includes/js-selector.html index 05ed99ed9..7d2224c26 100644 --- a/_includes/js-selector.html +++ b/_includes/js-selector.html @@ -9,14 +9,17 @@ {% endif %} {% endif %} -{% if page.layout == 'post' or page.layout == 'page' %} - - {% assign _urls = site.data.assets[origin]['magnific-popup'].js - | append: ',' - | append: site.data.assets[origin].lazysizes.js - | append: ',' - | append: site.data.assets[origin].clipboard.js - %} +{% if page.layout == 'post' or page.layout == 'page' or page.layout == 'home' %} + {% assign _urls = site.data.assets[origin].lazysizes.js %} + + {% unless page.layout == 'home' %} + {% assign _urls = _urls + | append: ',' + | append: site.data.assets[origin]['magnific-popup'].js + | append: ',' + | append: site.data.assets[origin].clipboard.js + %} + {% endunless %} {% include jsdelivr-combine.html urls=_urls %} {% endif %} @@ -43,9 +46,9 @@ {% endif %} {% case page.layout %} - {% when 'categories', 'post', 'page' %} + {% when 'home', 'categories', 'post', 'page' %} {% assign type = page.layout %} - {% when 'home', 'archives', 'category', 'tag' %} + {% when 'archives', 'category', 'tag' %} {% assign type = 'misc' %} {% else %} {% assign type = 'commons' %} diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html index 668d92b40..2dfddbdf8 100644 --- a/_includes/refactor-content.html +++ b/_includes/refactor-content.html @@ -45,9 +45,8 @@ -{% assign IMG_TAG = ' {% assign _left = _left | append: ' data-proofer-ignore' %} - - {% assign _parent = _right | slice: 1, 4 %} + {% if page.layout == 'post' %} + + {% 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: '>' %} + {% 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: '> {%- 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 %} + {% assign _img_content = _img_content | append: debug | append: IMG_TAG | append: _left | append: _right %} {% endfor %} @@ -277,5 +287,4 @@ {% assign _content = _heading_content %} - {{ _content }} diff --git a/_javascript/home.js b/_javascript/home.js new file mode 100644 index 000000000..70af32815 --- /dev/null +++ b/_javascript/home.js @@ -0,0 +1,8 @@ +import { basic, initSidebar, initTopbar } from './modules/layouts'; +import { initLocaleDatetime, imgLazy } from './modules/plugins'; + +basic(); +initSidebar(); +initTopbar(); +initLocaleDatetime(); +imgLazy(); diff --git a/_javascript/modules/components/img-extra.js b/_javascript/modules/components/img-extra.js deleted file mode 100644 index 47b840498..000000000 --- a/_javascript/modules/components/img-extra.js +++ /dev/null @@ -1,27 +0,0 @@ -/** - * Set up image stuff - */ - -export function imgExtra() { - if ($('#core-wrapper img[data-src]') <= 0) { - return; - } - - /* See: */ - $('.popup').magnificPopup({ - type: 'image', - closeOnContentClick: true, - showCloseBtn: false, - zoom: { - enabled: true, - duration: 300, - easing: 'ease-in-out' - } - }); - - /* Stop shimmer when image loaded */ - document.addEventListener('lazyloaded', function (e) { - const $img = $(e.target); - $img.parent().removeClass('shimmer'); - }); -} diff --git a/_javascript/modules/components/img-lazyload.js b/_javascript/modules/components/img-lazyload.js new file mode 100644 index 000000000..b79c87ca9 --- /dev/null +++ b/_javascript/modules/components/img-lazyload.js @@ -0,0 +1,15 @@ +/** + * Set up image lazy-load + */ + +export function imgLazy() { + if ($('#core-wrapper img[data-src]') <= 0) { + return; + } + + /* Stop shimmer when image loaded */ + document.addEventListener('lazyloaded', function (e) { + const $img = $(e.target); + $img.parent().removeClass('shimmer'); + }); +} diff --git a/_javascript/modules/components/img-popup.js b/_javascript/modules/components/img-popup.js new file mode 100644 index 000000000..7f78d9928 --- /dev/null +++ b/_javascript/modules/components/img-popup.js @@ -0,0 +1,22 @@ +/** + * Set up image popup + * + * See: https://github.com/dimsemenov/Magnific-Popup + */ + +export function imgPopup() { + if ($('.popup') <= 0) { + return; + } + + $('.popup').magnificPopup({ + type: 'image', + closeOnContentClick: true, + showCloseBtn: false, + zoom: { + enabled: true, + duration: 300, + easing: 'ease-in-out' + } + }); +} diff --git a/_javascript/modules/components/pageviews.js b/_javascript/modules/components/pageviews.js index 790fd9540..d07d4aada 100644 --- a/_javascript/modules/components/pageviews.js +++ b/_javascript/modules/components/pageviews.js @@ -174,13 +174,7 @@ function displayPageviews(data) { let hasInit = getInitStatus(); const rows = data.rows; /* could be undefined */ - if ($('#post-list').length > 0) { - /* the Home page */ - $('.post-preview').each(function () { - const path = $(this).find('a').attr('href'); - tacklePV(rows, path, $(this).find('.pageviews'), hasInit); - }); - } else if ($('.post').length > 0) { + if ($('.post').length > 0) { /* the post */ const path = window.location.pathname; tacklePV(rows, path, $('#pv'), hasInit); diff --git a/_javascript/modules/plugins.js b/_javascript/modules/plugins.js index 8d654359e..8e0797ece 100644 --- a/_javascript/modules/plugins.js +++ b/_javascript/modules/plugins.js @@ -1,6 +1,7 @@ export { categoryCollapse } from './components/category-collapse'; export { initClipboard } from './components/clipboard'; -export { imgExtra } from './components/img-extra'; +export { imgLazy } from './components/img-lazyload'; +export { imgPopup } from './components/img-popup'; export { initLocaleDatetime } from './components/locale-datetime'; export { initPageviews } from './components/pageviews'; export { smoothScroll } from './components/smooth-scroll'; diff --git a/_javascript/page.js b/_javascript/page.js index 0d497f018..bd12c7135 100644 --- a/_javascript/page.js +++ b/_javascript/page.js @@ -1,9 +1,15 @@ import { basic, initSidebar, initTopbar } from './modules/layouts'; -import { imgExtra, initClipboard, smoothScroll } from './modules/plugins'; +import { + imgLazy, + imgPopup, + initClipboard, + smoothScroll +} from './modules/plugins'; basic(); initSidebar(); initTopbar(); -imgExtra(); +imgLazy(); +imgPopup(); initClipboard(); smoothScroll(); diff --git a/_javascript/post.js b/_javascript/post.js index 4b472bce3..307e5ea4b 100644 --- a/_javascript/post.js +++ b/_javascript/post.js @@ -1,6 +1,7 @@ import { basic, initSidebar, initTopbar } from './modules/layouts'; import { - imgExtra, + imgLazy, + imgPopup, initLocaleDatetime, initClipboard, smoothScroll, @@ -11,7 +12,8 @@ import { basic(); initSidebar(); initTopbar(); -imgExtra(); +imgLazy(); +imgPopup(); initLocaleDatetime(); initClipboard(); toc(); diff --git a/_layouts/home.html b/_layouts/home.html index afc4af604..0fda0744b 100644 --- a/_layouts/home.html +++ b/_layouts/home.html @@ -1,6 +1,6 @@ --- layout: page -# The Home page layout +refactor: true --- {% include lang.html %} @@ -42,9 +42,16 @@ layout: page
{% for post in posts %} -
- -
+ +
+ {% if post.image %} + {% if post.image.lqip %} + {% capture lqip %}lqip="{{ post.image.lqip }}"{% endcapture %} + {% endif %} + + {% endif %} + +

{{ post.title }}

@@ -56,16 +63,16 @@ layout: page

-
+
- + {% include datetime.html date=post.date lang=lang %} {% if post.categories.size > 0 %} - - + + {% for category in post.categories %} {{ category }} {%- unless forloop.last -%},{%- endunless -%} @@ -75,7 +82,7 @@ layout: page
{% if post.pin %} -
+
{{ site.data.locales[lang].post.pin_prompt }}
@@ -83,13 +90,13 @@ layout: page
- -
- + +
+ {% endfor %}
-{% if paginator.total_pages > 0 %} +{% if paginator.total_pages > 1 %} {% include post-paginator.html %} {% endif %} diff --git a/_layouts/page.html b/_layouts/page.html index 1bfaa759b..76d30c425 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -2,14 +2,17 @@ layout: default --- -{% include assets-origin.html %} - {% include lang.html %} +{% include assets-origin.html %}
-
+ {% capture padding %} + {% unless page.layout == 'home' %}pl-1 pr-1{% endunless %} + {% endcapture %} + +
{% capture _content %} {% if layout.refactor or page.layout == 'page' %} {% include refactor-content.html content=content lang=lang %} diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index 69ec76ed5..3bc5ff4ef 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -278,7 +278,7 @@ i { } [data-topbar-visible='true'] & > div { - top: 6rem; + top: 5.5rem; } } @@ -422,7 +422,6 @@ i { .post-meta { font-size: 0.85rem; - word-spacing: 1px; a { &:not([class]):hover { @@ -549,7 +548,6 @@ i { .img-link { color: transparent; display: inline-flex; - overflow: hidden; } .shimmer { @@ -1275,7 +1273,7 @@ $sidebar-display: 'sidebar-display'; /* Responsive Design: - {sidebar, content, panel} >= 1120px screen width + {sidebar, content, panel} >= 1200px screen width {sidebar, content} >= 850px screen width {content} <= 849px screen width @@ -1307,11 +1305,6 @@ $sidebar-display: 'sidebar-display'; 100vh - #{$topbar-height} - #{$footer-height-mobile} ) !important; - h1 { - margin-top: 2.2rem; - font-size: 1.75rem; - } - .post-content { > blockquote[class^='prompt-'] { @include ml-mr(-1.25rem); diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss index b13083aa9..ba3d54b7b 100644 --- a/_sass/addon/module.scss +++ b/_sass/addon/module.scss @@ -75,6 +75,7 @@ %no-cursor { -webkit-user-select: none; -moz-user-select: none; + -ms-user-select: none; user-select: none; } @@ -109,9 +110,18 @@ color: rgba(117, 117, 117, 0.9); -webkit-user-select: none; -moz-user-select: none; + -ms-user-select: none; user-select: none; } +%text-clip { + display: -webkit-box; + overflow: hidden; + text-overflow: ellipsis; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; +} + /* ---------- scss mixin --------- */ @mixin no-text-decoration { @@ -146,7 +156,6 @@ @mixin align-center { position: relative; left: 50%; - -webkit-transform: translateX(-50%); transform: translateX(-50%); } diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss index dc6f543f3..2f0adb557 100644 --- a/_sass/colors/dark-typography.scss +++ b/_sass/colors/dark-typography.scss @@ -54,8 +54,6 @@ --btn-paginator-hover-color: rgb(64, 65, 66); --btn-paginator-border-color: var(--btn-border-color); --btn-text-color: var(--text-color); - --pin-bg: rgb(34, 35, 37); - --pin-color: inherit; /* Posts */ --toc-highlight: rgb(116, 178, 243); @@ -68,9 +66,9 @@ --btn-share-color: #6c757d; --btn-share-hover-color: #bfc1ca; --relate-post-date: var(--text-muted-color); - --card-bg: #212121; + --card-bg: #1e1e1e; --card-hovor-bg: #3a3a3a; - --card-border-color: rgb(53, 53, 60); + --card-border-color: #2e2e2e; --card-box-shadow: var(--main-bg); --kbd-wrap-color: #6a6a6a; --kbd-text-color: #d3d3d3; @@ -101,13 +99,6 @@ --timeline-color: rgb(63, 65, 68); --timeline-year-dot-color: var(--timeline-color); - .post img[data-src] { - &.lazyloaded { - -webkit-filter: brightness(95%); - filter: brightness(95%); - } - } - .light { display: none; } diff --git a/_sass/colors/light-typography.scss b/_sass/colors/light-typography.scss index f04629bf3..bd9a0e99d 100644 --- a/_sass/colors/light-typography.scss +++ b/_sass/colors/light-typography.scss @@ -10,7 +10,7 @@ /* Common color */ --text-color: #34343c; - --text-muted-color: gray; + --text-muted-color: #8e8e8e; --heading-color: black; --blockquote-border-color: #eeeeee; --blockquote-text-color: #9a9a9a; @@ -26,7 +26,7 @@ --img-bg: radial-gradient( circle, rgb(255, 255, 255) 0%, - rgb(249, 249, 249) 100% + rgb(239, 239, 239) 100% ); --shimmer-bg: linear-gradient( 90deg, @@ -57,13 +57,12 @@ --btn-paginator-hover-color: var(--sidebar-bg); --btn-paginator-border-color: var(--sidebar-bg); --btn-text-color: #676666; - --pin-bg: #f5f5f5; - --pin-color: #999fa4; /* Posts */ --toc-highlight: #563d7c; --btn-share-hover-color: var(--link-color); - --card-hovor-bg: #eeeeee; + --card-bg: white; + --card-hovor-bg: #e2e2e2; --card-border-color: #ececec; --card-box-shadow: rgba(234, 234, 234, 0.76); --label-color: #616161; diff --git a/_sass/layout/home.scss b/_sass/layout/home.scss index cdf1f09a2..ad3d0436d 100644 --- a/_sass/layout/home.scss +++ b/_sass/layout/home.scss @@ -1,6 +1,122 @@ /* Style for Homepage */ +$card-radius: 0.5rem; + +#post-list { + margin-top: 1.75rem; + + a.card-wrapper { + display: block; + + &:hover { + text-decoration: none; + } + + &:not(:last-child) { + margin-bottom: 1.25rem; + } + } + + .card { + border-radius: $card-radius; + border: 0; + background: var(--card-bg); + box-shadow: rgba(0, 0, 0, 0.05) 0 6px 14px 0, + rgba(172, 169, 169, 0.08) 0 0 0 1px; + + &::before { + content: ''; + position: absolute; + background: var(--card-hovor-bg); + opacity: 0; + width: 100%; + height: 100%; + border-radius: $card-radius; + z-index: 1; + } + + &:hover { + border-color: var(--card-hovor-bg); + + &::before { + opacity: 0.5; + } + } + + %img-radius { + border-radius: $card-radius $card-radius 0 0; + } + + .preview-img { + height: 10rem; + + @extend %img-radius; + + img { + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover; + + @extend %img-radius; + } + } + + .card-body { + min-height: 10.5rem; + padding: 1rem; + + .card-title { + @extend %text-clip; + @include mt-mb(0.5rem); + + font-size: 1.25rem; + } + + %muted { + color: var(--text-muted-color) !important; + } + + .card-text.post-content { + margin-top: 0; + margin-bottom: 0.5rem; + + @extend %muted; + + p { + @extend %text-clip; + + line-height: 1.5; + margin: 0; + } + } + + .post-meta { + @extend %muted; + + i { + &:not(:first-child) { + margin-left: 1.5rem; + } + } + + em { + @extend %normal-font-style; + + color: inherit; + } + + > div:first-child { + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + } + } +} /* #post-list */ .pagination { color: var(--btn-patinator-text-color); @@ -52,87 +168,58 @@ } /* .page-item */ } /* .pagination */ -#post-list { - margin-top: 1.75rem; - padding-right: 0.5rem; - - a:hover { - text-decoration: none; - } - - .post-preview { - padding: 0.25rem; - border-radius: 0.75rem; - border: 1px solid var(--card-border-color); - background: var(--card-bg); - - &:hover { - background: var(--card-hovor-bg); - box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); - } - - &:not(:last-child) { - margin-bottom: 1.75rem; - } - - h1 { - font-size: 1.4rem; - margin: 0; - } - - .post-meta { - i { - font-size: 0.73rem; - - &:not(:first-child) { - margin-left: 1.2rem; - } - } - - em { - @extend %normal-font-style; - } - - .pin { - i { - -webkit-transform: rotate(45deg); - transform: rotate(45deg); - padding-left: 3px; - color: var(--pin-color); - } - - span { - display: none; - } - } - } - - .post-content { - margin-top: 0.6rem; - margin-bottom: 0.6rem; - color: var(--post-list-text-color); - - > p { - margin: 0; - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - } - } - } /* .post-preview */ -} /* #post-list */ - @media (hover: hover) { - .post-preview { - transition: all 0.35s ease-in-out; + #post-list .card { + transition: border-color 0.35s ease-in-out; + + &::before { + transition: opacity 0.35s ease-in-out; + } + } +} + +/* Tablet */ +@media all and (min-width: 768px) { + #post-list { + %img-radius { + border-radius: 0 $card-radius $card-radius 0; + } + + .card { + .preview-img { + width: 20rem; + height: 11.5rem; // can hold 2 lines each for title and content + } + + .card-body { + min-height: 10.75rem; + width: 60%; + padding: 1.75rem 1.75rem 1.25rem 1.75rem; + + .card-title { + margin-top: 0; + margin-bottom: 0.5rem; + } + + .card-text { + display: inherit !important; + } + + .post-meta { + i { + &:not(:first-child) { + margin-left: 1.75rem; + } + } + } + } + } } } /* Hide SideBar and TOC */ @media all and (max-width: 830px) { - .post-preview { + #post-list .card { margin-left: -0.5rem; margin-right: -0.5rem; } @@ -151,27 +238,7 @@ /* Sidebar is visible */ @media all and (min-width: 831px) { #post-list { - margin-top: 3rem; - - .post-preview { - padding: 0.5rem; - - .post-meta { - .pin { - background: var(--pin-bg); - border-radius: 5px; - line-height: 1.4rem; - height: 1.3rem; - margin-top: 3px; - padding-left: 1px; - padding-right: 6px; - - > span { - display: inline; - } - } - } - } + margin-top: 2.5rem; } .pagination { @@ -194,9 +261,9 @@ } /* .pagination */ } -/* Panel hidden */ -@media all and (max-width: 1200px) { +/* Panel is visible */ +@media all and (min-width: 1200px) { #post-list { - padding-right: 0; + padding-right: 0.5rem; } } diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss index 2690cf4a0..fa691f86c 100644 --- a/_sass/layout/post.scss +++ b/_sass/layout/post.scss @@ -27,6 +27,9 @@ } .preview-img { + overflow: hidden; + aspect-ratio: 40 / 21; + @extend %rounded; &:not(.no-bg) { @@ -36,7 +39,6 @@ } img { - aspect-ratio: 40 / 21; -o-object-fit: cover; object-fit: cover; diff --git a/rollup.config.js b/rollup.config.js index a0d063f95..907ca3e72 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -38,6 +38,7 @@ function build(filename) { export default [ build('commons'), + build('home'), build('categories'), build('page'), build('post'), From 2918da9f29465618d557c082ff3a2f23d7519049 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Tue, 21 Mar 2023 07:20:32 +0800 Subject: [PATCH 16/43] perf(ui): improve related posts design --- _includes/related-posts.html | 24 +++++++++----------- _layouts/home.html | 2 +- _sass/addon/commons.scss | 34 +++++++++++++++++++++++----- _sass/addon/module.scss | 6 ++--- _sass/addon/variables.scss | 2 +- _sass/colors/dark-typography.scss | 3 +-- _sass/colors/light-typography.scss | 3 +-- _sass/layout/home.scss | 36 ------------------------------ _sass/layout/post.scss | 13 +---------- 9 files changed, 48 insertions(+), 75 deletions(-) diff --git a/_includes/related-posts.html b/_includes/related-posts.html index 69e997096..0981d0805 100644 --- a/_includes/related-posts.html +++ b/_includes/related-posts.html @@ -85,20 +85,18 @@ {% for entry in index_list %} {% assign index = entry | plus: 0 %} {% assign post = site.posts[index] %} -
- -
- {% include datetime.html date=post.date class="small" lang=include.lang %} -

{{ post.title }}

-
-

- {% include no-linenos.html content=post.content %} - {{ content | markdownify | strip_html | truncate: 200 | escape }} -

-
+ +
+ {% include datetime.html date=post.date class="small" lang=include.lang %} +

{{ post.title }}

+
+

+ {% include no-linenos.html content=post.content %} + {{ content | markdownify | strip_html | truncate: 200 | escape }} +

- -
+
+ {% endfor %}
diff --git a/_layouts/home.html b/_layouts/home.html index 0fda0744b..1844f6208 100644 --- a/_layouts/home.html +++ b/_layouts/home.html @@ -43,7 +43,7 @@ refactor: true
{% for post in posts %} -
+
{% if post.image %} {% if post.image.lqip %} {% capture lqip %}lqip="{{ post.image.lqip }}"{% endcapture %} diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index 3bc5ff4ef..b03bd7f00 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -204,12 +204,12 @@ footer { @extend %text-color; &:link { - @include no-text-decoration; + @extend %no-decoration; } &:hover { @extend %link-hover; - @include no-text-decoration; + @extend %no-decoration; } } @@ -647,10 +647,26 @@ i { } .no-text-decoration { - @include no-text-decoration; + @extend %no-decoration; } -/* Overrided BS4 Tooltip */ +.card.post-preview { + border-radius: $card-radius; + border: 0; + background: var(--card-bg); + box-shadow: rgba(0, 0, 0, 0.05) 0 6px 14px 0, + var(--card-border-color) 0 0 0 1px; + + &:hover { + background-color: var(--card-hovor-bg); + + img { + filter: brightness(0.7) !important; + } + } +} + +/* Overwrite bootstrap tooltip */ .tooltip-inner { font-size: 0.7rem; max-width: 220px; @@ -733,7 +749,7 @@ $sidebar-display: 'sidebar-display'; @extend %sidebar-links; &:hover { - @include no-text-decoration; + @extend %no-decoration; color: var(--sidebar-active-color) !important; } @@ -930,6 +946,14 @@ $sidebar-display: 'sidebar-display'; } /* #sidebar */ @media (hover: hover) { + .card.post-preview { + transition: all 0.35s ease-in-out; + + img { + transition: all 0.35s ease-in-out; + } + } + #sidebar ul > li:last-child::after { transition: top 0.5s ease; } diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss index ba3d54b7b..64dc4a53a 100644 --- a/_sass/addon/module.scss +++ b/_sass/addon/module.scss @@ -122,12 +122,12 @@ -webkit-box-orient: vertical; } -/* ---------- scss mixin --------- */ - -@mixin no-text-decoration { +%no-decoration { text-decoration: none; } +/* ---------- scss mixin --------- */ + @mixin mt-mb($value) { margin-top: $value; margin-bottom: $value; diff --git a/_sass/addon/variables.scss b/_sass/addon/variables.scss index 83faba129..7b1ae11b3 100644 --- a/_sass/addon/variables.scss +++ b/_sass/addon/variables.scss @@ -21,9 +21,9 @@ $topbar-height: 3rem !default; $search-max-width: 210px !default; $footer-height: 5rem !default; $footer-height-mobile: 6rem !default; /* screen width: <= 576px */ - $main-content-max-width: 1250px !default; $bottom-min-height: 35rem !default; +$card-radius: 0.5rem; /* syntax highlight */ diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss index 2f0adb557..439c2f3f0 100644 --- a/_sass/colors/dark-typography.scss +++ b/_sass/colors/dark-typography.scss @@ -68,8 +68,7 @@ --relate-post-date: var(--text-muted-color); --card-bg: #1e1e1e; --card-hovor-bg: #3a3a3a; - --card-border-color: #2e2e2e; - --card-box-shadow: var(--main-bg); + --card-border-color: rgba(172, 169, 169, 0.17); --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 bd9a0e99d..f9538321d 100644 --- a/_sass/colors/light-typography.scss +++ b/_sass/colors/light-typography.scss @@ -63,8 +63,7 @@ --btn-share-hover-color: var(--link-color); --card-bg: white; --card-hovor-bg: #e2e2e2; - --card-border-color: #ececec; - --card-box-shadow: rgba(234, 234, 234, 0.76); + --card-border-color: rgba(172, 169, 169, 0.13); --label-color: #616161; --relate-post-date: rgba(30, 55, 70, 0.4); --footnote-target-bg: lightcyan; diff --git a/_sass/layout/home.scss b/_sass/layout/home.scss index ad3d0436d..1ebf3126e 100644 --- a/_sass/layout/home.scss +++ b/_sass/layout/home.scss @@ -1,7 +1,6 @@ /* Style for Homepage */ -$card-radius: 0.5rem; #post-list { margin-top: 1.75rem; @@ -19,31 +18,6 @@ $card-radius: 0.5rem; } .card { - border-radius: $card-radius; - border: 0; - background: var(--card-bg); - box-shadow: rgba(0, 0, 0, 0.05) 0 6px 14px 0, - rgba(172, 169, 169, 0.08) 0 0 0 1px; - - &::before { - content: ''; - position: absolute; - background: var(--card-hovor-bg); - opacity: 0; - width: 100%; - height: 100%; - border-radius: $card-radius; - z-index: 1; - } - - &:hover { - border-color: var(--card-hovor-bg); - - &::before { - opacity: 0.5; - } - } - %img-radius { border-radius: $card-radius $card-radius 0 0; } @@ -168,16 +142,6 @@ $card-radius: 0.5rem; } /* .page-item */ } /* .pagination */ -@media (hover: hover) { - #post-list .card { - transition: border-color 0.35s ease-in-out; - - &::before { - transition: opacity 0.35s ease-in-out; - } - } -} - /* Tablet */ @media all and (min-width: 768px) { #post-list { diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss index fa691f86c..ea6ecfc47 100644 --- a/_sass/layout/post.scss +++ b/_sass/layout/post.scss @@ -333,24 +333,13 @@ h1 + .post-meta { } a:hover { - text-decoration: none; + @extend %no-decoration; } .card { - border-color: var(--card-border-color); - background-color: var(--card-bg); - box-shadow: 0 0 5px 0 var(--card-box-shadow); - transition: all 0.3s ease-in-out; - h3 { @extend %text-color; } - - &:hover { - -webkit-transform: translate3d(0, -3px, 0); - transform: translate3d(0, -3px, 0); - box-shadow: 0 10px 15px -4px rgba(0, 0, 0, 0.15); - } } } From aadf9393d5c7f7528d453c4e68eba4f5cbb85bd9 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Tue, 21 Mar 2023 08:44:10 +0800 Subject: [PATCH 17/43] perf(ui): uniform the muted text color --- _sass/addon/commons.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index b03bd7f00..151ce626c 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -666,6 +666,11 @@ i { } } +/* overwrite bootstrap muted */ +.text-muted { + color: var(--text-muted-color) !important; +} + /* Overwrite bootstrap tooltip */ .tooltip-inner { font-size: 0.7rem; From 34499f0c927ce8fea3705dc2f0f0e6805cabda43 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Tue, 21 Mar 2023 08:59:17 +0800 Subject: [PATCH 18/43] perf(ui): improve hover effect of trending tags --- _includes/trending-tags.html | 6 ++---- _sass/addon/commons.scss | 25 +++++++++---------------- _sass/layout/post.scss | 10 ++++++++++ 3 files changed, 21 insertions(+), 20 deletions(-) diff --git a/_includes/trending-tags.html b/_includes/trending-tags.html index a36108cbc..131480bb2 100644 --- a/_includes/trending-tags.html +++ b/_includes/trending-tags.html @@ -1,6 +1,4 @@ -{% comment %} - The trending tags list -{% endcomment %} + {% assign MAX = 10 %} @@ -41,7 +39,7 @@
{% for tag_name in trending_tags %} {% assign url = tag_name | slugify | url_encode | prepend: '/tags/' | append: '/' %} - {{ tag_name }} + {{ tag_name }} {% endfor %}
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index 151ce626c..8aba040e7 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -260,20 +260,15 @@ i { } .post-tag { - display: inline-block; - line-height: 1rem; + line-height: 1.05rem; font-size: 0.85rem; - background: none; border: 1px solid var(--btn-border-color); border-radius: 0.8rem; padding: 0.3rem 0.5rem; margin: 0 0.35rem 0.5rem 0; &:hover { - background-color: #2a408e; - border-color: #2a408e; - color: #ffffff; - transition: none; + transition: all 0.3s ease-in; } } @@ -522,7 +517,6 @@ i { display: inline-block; min-width: 2rem; text-align: center; - background: var(--tag-bg); border-radius: 0.3rem; padding: 0 0.4rem; color: inherit; @@ -531,14 +525,6 @@ i { &:not(:last-child) { margin-right: 0.2rem; } - - &:hover { - @extend %tag-hover; - - border-bottom: none; - text-decoration: none; - color: #d2603a; - } } .rounded-10 { @@ -678,6 +664,13 @@ i { text-align: left; } +/* Overwrite bootstrap outline button */ +.btn.btn-outline-primary { + &:hover { + border-color: #007bff !important; + } +} + .disabled { color: rgb(206, 196, 196); pointer-events: auto; diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss index ea6ecfc47..e4cd2cfa5 100644 --- a/_sass/layout/post.scss +++ b/_sass/layout/post.scss @@ -155,6 +155,16 @@ h1 + .post-meta { .post-tags { line-height: 2rem; + + .post-tag { + background: var(--tag-bg); + + &:hover { + @extend %link-hover; + @extend %tag-hover; + @extend %no-bottom-border; + } + } } .post-navigation { From 7626e4d00544346a46b6e5ff2f3a99d234defe09 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Tue, 21 Mar 2023 09:52:15 +0800 Subject: [PATCH 19/43] perf(ui): improve hover effect for post preview cards - home cards - navigator buttons at the bottom post --- _sass/addon/commons.scss | 44 ++++++++++++++++++------------ _sass/colors/dark-typography.scss | 5 ++-- _sass/colors/light-typography.scss | 3 +- _sass/layout/post.scss | 35 ++++++++++++++---------- 4 files changed, 52 insertions(+), 35 deletions(-) diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index 8aba040e7..226d83d72 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -395,6 +395,32 @@ i { /* --- post --- */ +.post-preview { + @extend %rounded; + + border: 0; + background: var(--card-bg); + box-shadow: var(--card-shadow); + + &::before { + @extend %rounded; + + content: ''; + width: 100%; + height: 100%; + position: absolute; + background-color: var(--card-hovor-bg); + opacity: 0; + transition: opacity 0.35s ease-in-out; + } + + &:hover { + &::before { + opacity: 0.3; + } + } +} + .post { h1 { margin-top: 3rem; @@ -636,22 +662,6 @@ i { @extend %no-decoration; } -.card.post-preview { - border-radius: $card-radius; - border: 0; - background: var(--card-bg); - box-shadow: rgba(0, 0, 0, 0.05) 0 6px 14px 0, - var(--card-border-color) 0 0 0 1px; - - &:hover { - background-color: var(--card-hovor-bg); - - img { - filter: brightness(0.7) !important; - } - } -} - /* overwrite bootstrap muted */ .text-muted { color: var(--text-muted-color) !important; @@ -666,7 +676,7 @@ i { /* Overwrite bootstrap outline button */ .btn.btn-outline-primary { - &:hover { + &:not(.disabled):hover { border-color: #007bff !important; } } diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss index 439c2f3f0..c7db19fdc 100644 --- a/_sass/colors/dark-typography.scss +++ b/_sass/colors/dark-typography.scss @@ -67,8 +67,9 @@ --btn-share-hover-color: #bfc1ca; --relate-post-date: var(--text-muted-color); --card-bg: #1e1e1e; - --card-hovor-bg: #3a3a3a; - --card-border-color: rgba(172, 169, 169, 0.17); + --card-hovor-bg: #464d51; + --card-shadow: rgb(21, 21, 21, 0.72) 0 6px 10px 0, + rgb(137, 135, 135, 0.3) 0 0 0 1px; --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 f9538321d..a1cc2d825 100644 --- a/_sass/colors/light-typography.scss +++ b/_sass/colors/light-typography.scss @@ -63,7 +63,8 @@ --btn-share-hover-color: var(--link-color); --card-bg: white; --card-hovor-bg: #e2e2e2; - --card-border-color: rgba(172, 169, 169, 0.13); + --card-shadow: rgb(104, 104, 104, 0.05) 0 2px 6px 0, + rgba(211, 209, 209, 0.15) 0 0 0 1px; --label-color: #616161; --relate-post-date: rgba(30, 55, 70, 0.4); --footnote-target-bg: lightcyan; diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss index e4cd2cfa5..3e29d34fe 100644 --- a/_sass/layout/post.scss +++ b/_sass/layout/post.scss @@ -10,7 +10,7 @@ } } -@mixin btn-post-nav { +%btn-post-nav { width: 50%; position: relative; border-color: var(--btn-border-color); @@ -172,27 +172,25 @@ h1 + .post-meta { padding-bottom: 4rem; .btn { - @include btn-post-nav; + @extend %btn-post-nav; - color: var(--link-color); + &:not(:hover) { + color: var(--link-color); + } &:hover { - background: #2a408e; - color: #ffffff; - border-color: #2a408e; + &:not(.disabled)::before { + color: whitesmoke; + } } &.disabled { - @include btn-post-nav; + @extend %btn-post-nav; pointer-events: auto; cursor: not-allowed; background: none; color: gray; - - &:hover { - border-color: none; - } } &.btn-outline-primary.disabled:focus { @@ -207,14 +205,12 @@ h1 + .post-meta { } &:first-child { - border-top-right-radius: 0; - border-bottom-right-radius: 0; + border-radius: $card-radius 0 0 $card-radius; left: 0.5px; } &:last-child { - border-top-left-radius: 0; - border-bottom-left-radius: 0; + border-radius: 0 $card-radius $card-radius 0; right: 0.5px; } } @@ -227,6 +223,15 @@ h1 + .post-meta { } } /* .post-navigation */ +@media (hover: hover) { + .post-navigation { + .btn, + .btn::before { + transition: all 0.35s ease-in-out; + } + } +} + @-webkit-keyframes fade-up { from { opacity: 0; From f0266c1f784acd50219b6e6a5a28d7e4b42a1418 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Tue, 21 Mar 2023 09:57:18 +0800 Subject: [PATCH 20/43] refactor(scss): update vendor prefix --- _sass/addon/commons.scss | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index 226d83d72..a4a83e3ad 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -579,22 +579,18 @@ i { @-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%); } } @@ -771,7 +767,6 @@ $sidebar-display: 'sidebar-display'; border-radius: 50%; border: 2px solid rgba(222, 222, 222, 0.7); overflow: hidden; - -webkit-transform: translateZ(0); transform: translateZ(0); /* fixed the zoom in Safari */ transition: border-color 0.35s ease-in-out; @@ -783,12 +778,9 @@ $sidebar-display: 'sidebar-display'; img { width: 100%; height: 100%; - transition: -webkit-transform 0.5s; transition: transform 0.5s; - transition: transform 0.5s, -webkit-transform 0.5s; &:hover { - -webkit-transform: scale(1.2); transform: scale(1.2); } } @@ -1232,9 +1224,7 @@ $sidebar-display: 'sidebar-display'; height: $size; border-radius: 50%; border: 1px solid var(--btn-backtotop-border-color); - transition: -webkit-transform 0.2s ease-out; transition: transform 0.2s ease-out; - transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out; -webkit-transition: transform 0.2s ease-out; i { @@ -1294,7 +1284,6 @@ $sidebar-display: 'sidebar-display'; position: fixed; left: 50%; bottom: 20%; - -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-animation: popup 0.8s; animation: popup 0.8s; @@ -1395,14 +1384,12 @@ $sidebar-display: 'sidebar-display'; [#{$sidebar-display}] { #sidebar { - -webkit-transform: translateX(0); transform: translateX(0); } #topbar-wrapper, #main-wrapper, footer { - -webkit-transform: translateX(#{$sidebar-width}); transform: translateX(#{$sidebar-width}); } } @@ -1790,7 +1777,6 @@ $sidebar-display: 'sidebar-display'; position: absolute; top: 50%; left: 50%; - -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } From 414dd132aed70f4bd96cb712d00eacc82d2753e9 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Tue, 21 Mar 2023 10:40:44 +0800 Subject: [PATCH 21/43] perf(ui): improve categories color in dark mode --- _sass/colors/dark-typography.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss index c7db19fdc..e381616f4 100644 --- a/_sass/colors/dark-typography.scss +++ b/_sass/colors/dark-typography.scss @@ -21,7 +21,7 @@ --btn-backtotop-color: var(--text-color); --btn-backtotop-border-color: var(--btn-border-color); --btn-box-shadow: var(--main-bg); - --card-header-bg: rgb(51, 50, 50); + --card-header-bg: rgb(48, 48, 48); --label-color: rgb(108, 117, 125); --checkbox-color: rgb(118, 120, 121); --checkbox-checked-color: var(--link-color); @@ -90,7 +90,7 @@ --dash-color: rgb(63, 65, 68); /* categories */ - --categories-border: rgb(64, 66, 69); + --categories-border: rgb(64, 66, 69, 0.5); --categories-hover-bg: rgb(73, 75, 76); --categories-icon-hover-color: white; @@ -114,6 +114,10 @@ } .categories { + &.card { + border-color: var(--main-border-color); + } + .card-header { background-color: var(--card-header-bg); } From 2a4d67d65cc283ff1dc4bdd8a6440f976004fb97 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Tue, 21 Mar 2023 10:59:20 +0800 Subject: [PATCH 22/43] refactor: uniform block border radius scope: - categories - posts (prompt, code snippets) --- _sass/addon/module.scss | 2 +- _sass/addon/variables.scss | 2 +- _sass/jekyll-theme-chirpy.scss | 29 +++++++++++++---------------- _sass/layout/categories.scss | 9 ++++++--- _sass/layout/home.scss | 4 ++-- _sass/layout/post.scss | 4 ++-- 6 files changed, 25 insertions(+), 25 deletions(-) diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss index 64dc4a53a..603554a84 100644 --- a/_sass/addon/module.scss +++ b/_sass/addon/module.scss @@ -92,7 +92,7 @@ } %rounded { - border-radius: 6px; + border-radius: $base-radius; } %img-caption { diff --git a/_sass/addon/variables.scss b/_sass/addon/variables.scss index 7b1ae11b3..bc6f86675 100644 --- a/_sass/addon/variables.scss +++ b/_sass/addon/variables.scss @@ -23,7 +23,7 @@ $footer-height: 5rem !default; $footer-height-mobile: 6rem !default; /* screen width: <= 576px */ $main-content-max-width: 1250px !default; $bottom-min-height: 35rem !default; -$card-radius: 0.5rem; +$base-radius: 0.5rem; /* syntax highlight */ diff --git a/_sass/jekyll-theme-chirpy.scss b/_sass/jekyll-theme-chirpy.scss index 1424a576e..c72e4c399 100644 --- a/_sass/jekyll-theme-chirpy.scss +++ b/_sass/jekyll-theme-chirpy.scss @@ -6,19 +6,16 @@ * MIT Licensed */ -@import - "colors/light-typography", - "colors/dark-typography", - - "addon/variables", - "variables-hook", - "addon/module", - "addon/syntax", - "addon/commons", - - "layout/home", - "layout/post", - "layout/tags", - "layout/archives", - "layout/categories", - "layout/category-tag"; +@import 'colors/light-typography'; +@import 'colors/dark-typography'; +@import 'addon/variables'; +@import 'variables-hook'; +@import 'addon/module'; +@import 'addon/syntax'; +@import 'addon/commons'; +@import 'layout/home'; +@import 'layout/post'; +@import 'layout/tags'; +@import 'layout/archives'; +@import 'layout/categories'; +@import 'layout/category-tag'; diff --git a/_sass/layout/categories.scss b/_sass/layout/categories.scss index 31c8e8e1a..574f624c8 100644 --- a/_sass/layout/categories.scss +++ b/_sass/layout/categories.scss @@ -9,8 +9,14 @@ .categories { margin-bottom: 2rem; + &.card, + .list-group { + @extend %rounded; + } + .card-header { padding-right: 12px; + border-radius: $base-radius $base-radius 0 0; } i { @@ -42,9 +48,7 @@ position: relative; height: 0.7rem; width: 1rem; - transition: -webkit-transform 300ms ease; transition: transform 300ms ease; - transition: transform 300ms ease, -webkit-transform 300ms ease; } &:hover { @@ -62,6 +66,5 @@ } .rotate { - -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } diff --git a/_sass/layout/home.scss b/_sass/layout/home.scss index 1ebf3126e..801ec55ab 100644 --- a/_sass/layout/home.scss +++ b/_sass/layout/home.scss @@ -19,7 +19,7 @@ .card { %img-radius { - border-radius: $card-radius $card-radius 0 0; + border-radius: $base-radius $base-radius 0 0; } .preview-img { @@ -146,7 +146,7 @@ @media all and (min-width: 768px) { #post-list { %img-radius { - border-radius: 0 $card-radius $card-radius 0; + border-radius: 0 $base-radius $base-radius 0; } .card { diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss index 3e29d34fe..203c69c2c 100644 --- a/_sass/layout/post.scss +++ b/_sass/layout/post.scss @@ -205,12 +205,12 @@ h1 + .post-meta { } &:first-child { - border-radius: $card-radius 0 0 $card-radius; + border-radius: $base-radius 0 0 $base-radius; left: 0.5px; } &:last-child { - border-radius: 0 $card-radius $card-radius 0; + border-radius: 0 $base-radius $base-radius 0; right: 0.5px; } } From 7c23a4ebc53b9e231c214e04f8ac0803cbcdb720 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Tue, 21 Mar 2023 22:41:21 +0800 Subject: [PATCH 23/43] perf(ui): lighten the link color in light-mode --- _sass/colors/light-typography.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_sass/colors/light-typography.scss b/_sass/colors/light-typography.scss index a1cc2d825..b83d45222 100644 --- a/_sass/colors/light-typography.scss +++ b/_sass/colors/light-typography.scss @@ -14,7 +14,7 @@ --heading-color: black; --blockquote-border-color: #eeeeee; --blockquote-text-color: #9a9a9a; - --link-color: #2a408e; + --link-color: #0153ab; --link-underline-color: #dee2e6; --button-bg: #ffffff; --btn-border-color: #e9ecef; From 003e7b60c93988a7bfae4c03a8346d4f8a5f0bb6 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Tue, 21 Mar 2023 23:47:01 +0800 Subject: [PATCH 24/43] perf(ux): improve LQIP fade in effect --- _sass/addon/commons.scss | 23 ++++++++++------------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index a4a83e3ad..ca88541ca 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -85,13 +85,9 @@ a { img { max-width: 100%; height: auto; + transition: all 0.35s ease-in-out; &[data-src] { - &.lazyloaded { - -webkit-animation: fade-in 0.4s ease-in; - animation: fade-in 0.4s ease-in; - } - &[data-lqip='true'] { &.lazyload, &.lazyloading { @@ -105,6 +101,11 @@ img { &.lazyloading { background: var(--img-bg); } + + &.lazyloaded { + -webkit-animation: fade-in 0.35s ease-in; + animation: fade-in 0.35s ease-in; + } } &.shadow { @@ -946,17 +947,13 @@ $sidebar-display: 'sidebar-display'; } /* #sidebar */ @media (hover: hover) { - .card.post-preview { - transition: all 0.35s ease-in-out; - - img { - transition: all 0.35s ease-in-out; - } - } - #sidebar ul > li:last-child::after { transition: top 0.5s ease; } + + .post-preview { + transition: background-color 0.35s ease-in-out; + } } .profile-wrapper { From 8cbbcfa26da0addd88affada23a65770250f2404 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Wed, 22 Mar 2023 23:58:57 +0800 Subject: [PATCH 25/43] perf(ui): improve the color of prompts in dark mode --- _sass/colors/dark-typography.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss index e381616f4..ffb359957 100644 --- a/_sass/colors/dark-typography.scss +++ b/_sass/colors/dark-typography.scss @@ -74,11 +74,11 @@ --kbd-text-color: #d3d3d3; --kbd-bg-color: #242424; --prompt-text-color: rgb(216, 212, 212, 0.75); - --prompt-tip-bg: rgba(77, 187, 95, 0.2); - --prompt-tip-icon-color: rgb(5, 223, 5, 0.68); + --prompt-tip-bg: rgb(22, 60, 36, 0.64); + --prompt-tip-icon-color: rgb(15, 164, 15, 0.81); --prompt-info-bg: rgb(7, 59, 104, 0.8); --prompt-info-icon-color: #0075d1; - --prompt-warning-bg: rgb(90, 69, 3, 0.95); + --prompt-warning-bg: rgb(90, 69, 3, 0.88); --prompt-warning-icon-color: rgb(255, 165, 0, 0.8); --prompt-danger-bg: rgb(86, 28, 8, 0.8); --prompt-danger-icon-color: #cd0202; From e38309f3bd1302ffe60b682136b6efaf96f4d9ae Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Thu, 23 Mar 2023 21:16:12 +0800 Subject: [PATCH 26/43] perf(ui): improve inline code in light mode --- _sass/colors/light-syntax.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/_sass/colors/light-syntax.scss b/_sass/colors/light-syntax.scss index a4dde912a..b4b30c826 100644 --- a/_sass/colors/light-syntax.scss +++ b/_sass/colors/light-syntax.scss @@ -68,9 +68,9 @@ /* --- custom light colors --- */ --highlight-bg-color: #f7f7f7; - --highlighter-rouge-color: #2f2f2f; + --highlighter-rouge-color: #3f596f; --highlight-lineno-color: #c2c6cc; - --inline-code-bg: #f3f3f3; + --inline-code-bg: #f6f6f7; --code-header-text-color: #a3a3b1; --code-header-muted-color: #ebebeb; --code-header-icon-color: #d1d1d1; @@ -78,6 +78,5 @@ [class^='prompt-'] { --inline-code-bg: #fbfafa; - --highlighter-rouge-color: rgb(82, 82, 82); } } /* light-syntax */ From 0c80552d772b874e2a161f1270294faa3af18d4a Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Fri, 24 Mar 2023 02:19:37 +0800 Subject: [PATCH 27/43] perf(ui): mute the marker in lists --- _sass/addon/commons.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index ca88541ca..36f33b5fb 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -534,6 +534,10 @@ i { dl > dd { margin-left: 1rem; } + + ::marker { + color: var(--text-muted-color); + } } /* .post-content */ .tag:hover { From 6d99f5cc36a69e5ccff51f81ba448c798d92e12e Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Fri, 24 Mar 2023 02:46:48 +0800 Subject: [PATCH 28/43] feat(ui): improve code snippet design --- _includes/refactor-content.html | 4 +- _sass/addon/syntax.scss | 77 ++++++++++++++++++--------------- _sass/colors/dark-syntax.scss | 1 + _sass/colors/light-syntax.scss | 1 + 4 files changed, 45 insertions(+), 38 deletions(-) diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html index 2dfddbdf8..e3ee11d2d 100644 --- a/_includes/refactor-content.html +++ b/_includes/refactor-content.html @@ -219,11 +219,11 @@ {% if _left contains 'file="' %} {% assign _label_text = _left | split: 'file="' | last | split: '"' | first %} - {% assign _label_icon = 'far fa-file-code' %} + {% assign _label_icon = 'far fa-file-code fa-fw' %} {% else %} {% assign _lang = _left | split: 'language-' | last | split: ' ' | first %} {% capture _label_text %}{% include language-alias.html language=_lang %}{% endcapture %} - {% assign _label_icon = 'fas fa-code small' %} + {% assign _label_icon = 'fas fa-code fa-fw small' %} {% endif %} {% capture _label %} diff --git a/_sass/addon/syntax.scss b/_sass/addon/syntax.scss index e3a93bbb8..21d0b7cfc 100644 --- a/_sass/addon/syntax.scss +++ b/_sass/addon/syntax.scss @@ -32,7 +32,7 @@ html { /* -- code snippets -- */ %code-snippet-bg { - background: var(--highlight-bg-color); + background-color: var(--highlight-bg-color); } %code-snippet-padding { @@ -41,9 +41,6 @@ html { } .highlighter-rouge { - @extend %code-snippet-bg; - @extend %rounded; - color: var(--highlighter-rouge-color); margin-top: 0.5rem; margin-bottom: 1.2em; /* Override BS Inline-code style */ @@ -140,13 +137,25 @@ td.rouge-code { } } +div[class^='language-'] { + @extend %rounded; + @extend %code-snippet-bg; + + box-shadow: var(--language-border-color) 0 0 0 1px; + + .post-content > & { + @include ml-mr(-1.25rem); + + border-radius: 0; + } +} + /* Hide line numbers for default, console, and terminal code snippets */ div { - &[class^='highlighter-rouge'], &.nolineno, - &.language-plaintext.highlighter-rouge, - &.language-console.highlighter-rouge, - &.language-terminal.highlighter-rouge { + &.language-plaintext, + &.language-console, + &.language-terminal { pre.lineno { display: none; } @@ -166,28 +175,15 @@ div { justify-content: space-between; align-items: center; height: $code-header-height; - - &::before { - $dot-size: 0.75rem; - $dot-margin: 0.5rem; - - content: ''; - display: inline-block; - margin-left: 1rem; - width: $dot-size; - height: $dot-size; - border-radius: 50%; - background-color: var(--code-header-muted-color); - box-shadow: ($dot-size + $dot-margin) 0 0 var(--code-header-muted-color), - ($dot-size + $dot-margin) * 2 0 0 var(--code-header-muted-color); - } + margin-left: 1rem; + margin-right: 0.25rem; /* the label block */ span { /* label icon */ i { font-size: 1rem; - margin-right: 0.4rem; + margin-right: 0.5rem; color: var(--code-header-icon-color); &.small { @@ -248,21 +244,30 @@ div { } } -@media all and (max-width: 576px) { - .post-content { - > div[class^='language-'] { - @include ml-mr(-1.25rem); +@media all and (min-width: 576px) { + div[class^='language-'] { + .post-content > & { + @include ml-mr(0); - border-radius: 0; + border-radius: $base-radius; + } - .highlight { - padding-left: 0.25rem; - } + .code-header { + @include ml-mr(0); - .code-header { - border-radius: 0; - padding-left: 0.4rem; - padding-right: 0.5rem; + &::before { + $dot-size: 0.75rem; + $dot-margin: 0.5rem; + + content: ''; + display: inline-block; + margin-left: 1rem; + width: $dot-size; + height: $dot-size; + border-radius: 50%; + background-color: var(--code-header-muted-color); + box-shadow: ($dot-size + $dot-margin) 0 0 var(--code-header-muted-color), + ($dot-size + $dot-margin) * 2 0 0 var(--code-header-muted-color); } } } diff --git a/_sass/colors/dark-syntax.scss b/_sass/colors/dark-syntax.scss index 8c22d2480..36e965110 100644 --- a/_sass/colors/dark-syntax.scss +++ b/_sass/colors/dark-syntax.scss @@ -3,6 +3,7 @@ */ @mixin dark-syntax { + --language-border-color: rgba(84, 83, 83, 0.27); --highlight-bg-color: #252525; --highlighter-rouge-color: #de6b18; --highlight-lineno-color: #6c6c6d; diff --git a/_sass/colors/light-syntax.scss b/_sass/colors/light-syntax.scss index b4b30c826..040a5f50c 100644 --- a/_sass/colors/light-syntax.scss +++ b/_sass/colors/light-syntax.scss @@ -67,6 +67,7 @@ .highlight .il { color: #009999; } /* Literal.Number.Integer.Long */ /* --- custom light colors --- */ + --language-border-color: rgba(172, 169, 169, 0.2); --highlight-bg-color: #f7f7f7; --highlighter-rouge-color: #3f596f; --highlight-lineno-color: #c2c6cc; From 83bbe4ac939edfd1706e68c080562e3462f83519 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Sat, 25 Mar 2023 02:58:58 +0800 Subject: [PATCH 29/43] feat(ui): redesign the sidebar --- _data/assets/cross_origin.yml | 2 +- _includes/sidebar.html | 24 +- _sass/addon/commons.scss | 395 +++++++++-------------------- _sass/addon/module.scss | 7 +- _sass/addon/variables.scss | 10 +- _sass/colors/dark-typography.scss | 12 +- _sass/colors/light-typography.scss | 8 +- _sass/jekyll-theme-chirpy.scss | 4 +- _tabs/tags.md | 2 +- assets/css/style.scss | 8 +- 10 files changed, 159 insertions(+), 313 deletions(-) diff --git a/_data/assets/cross_origin.yml b/_data/assets/cross_origin.yml index 01d558f72..75aa59e62 100644 --- a/_data/assets/cross_origin.yml +++ b/_data/assets/cross_origin.yml @@ -11,7 +11,7 @@ cdns: # fonts -webfonts: https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;700;900&display=swap +webfonts: https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;900&display=swap # Libraries diff --git a/_includes/sidebar.html b/_includes/sidebar.html index 5dd8fc2d1..6dee0ecc3 100644 --- a/_includes/sidebar.html +++ b/_includes/sidebar.html @@ -1,11 +1,10 @@