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 c69cfb3..cdfb095 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 0b8cb58..089503f 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 180240e..1f41040 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 fb6c1d7..e3cda3f 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 0000000..38bbd5d --- /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 0000000..7dfb64c --- /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 358d44f..a244a56 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 09b3c87..e5cfad0 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 e16184f..69ec76e 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 44f21d2..b13083a 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 1db532e..83faba1 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 5716f9d..1424a57 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 0000000..0ff8946 --- /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 8e41f4f..ae5da61 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 af3ce76..450372a 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 edec4b1..6407c9c 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 0000000..fd7e9bd --- /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 450372a..29b7834 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 e659c5a..00aaea4 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 f4b16d9..b8f4ec7 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 0000000..19558a0 --- /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 7a12e69..76bcd59 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 c241ea5..8c4598e 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 6363da3..6d53357 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 3a6f943..ea6f139 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 b992c6e..69e9970 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 603ea5b..b14d1e5 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 c570597..5dd8fc2 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 0d1967c..d47ea28 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 51fbf1a..91494db 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 d0f58a1..a36108c 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 a4edd11..0ee7b70 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 f86b417..fd482e5 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 b207186..a08e4c5 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 07129bb..b926637 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 a98c230..3705831 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 5fd528f..8dbd65b 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 4490ea5..0337bac 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 0ee7b70..0b55225 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 2296df2..54e0262 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 ea6f139..668d92b 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 7f1725f..2ad043b 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 3e4103c..f8fe28c 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 39b585c..6f636e3 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 3088a3c..7e77d95 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 fbc7c2b..79e45dc 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 975f5f0..fe8bf1f 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 ee3a20f..f26cd89 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 605969f..7327663 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 0d29a87..72b034d 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 f24b8c5..d79169c 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 59ec661..c052f9a 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 03aa19c..f29e7be 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 73e1ded..6f9cea8 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 9990c76..2669e55 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 831e6d3..d0071c6 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 3cd937c..91aaf06 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 f7c2567..e8ec928 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 6925e42..58b3ba5 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 592000d..6b37512 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 1463e95..624706f 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 05ed99e..7d2224c 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 668d92b..2dfddbd 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 0000000..70af328 --- /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 47b8404..0000000 --- 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 0000000..b79c87c --- /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 0000000..7f78d99 --- /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 790fd95..d07d4aa 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 8d65435..8e0797e 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 0d497f0..bd12c71 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 4b472bc..307e5ea 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 afc4af6..0fda074 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 1bfaa75..76d30c4 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 69ec76e..3bc5ff4 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 b13083a..ba3d54b 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 dc6f543..2f0adb5 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 f04629b..bd9a0e9 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 cdf1f09..ad3d043 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 2690cf4..fa691f8 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 a0d063f..907ca3e 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 69e9970..0981d08 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 0fda074..1844f62 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 3bc5ff4..b03bd7f 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 ba3d54b..64dc4a5 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 83faba1..7b1ae11 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 2f0adb5..439c2f3 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 bd9a0e9..f953832 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 ad3d043..1ebf312 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 fa691f8..ea6ecfc 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 b03bd7f..151ce62 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 a36108c..131480b 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 151ce62..8aba040 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 ea6ecfc..e4cd2cf 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 8aba040..226d83d 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 439c2f3..c7db19f 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 f953832..a1cc2d8 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 e4cd2cf..3e29d34 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 226d83d..a4a83e3 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 c7db19f..e381616 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 64dc4a5..603554a 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 7b1ae11..bc6f866 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 1424a57..c72e4c3 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 31c8e8e..574f624 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 1ebf312..801ec55 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 3e29d34..203c69c 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 a1cc2d8..b83d452 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 a4a83e3..ca88541 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 e381616..ffb3599 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 a4dde91..b4b30c8 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 ca88541..36f33b5 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 2dfddbd..e3ee11d 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 e3a93bb..21d0b7c 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 8c22d24..36e9651 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 b4b30c8..040a5f5 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 01d558f..75aa59e 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 5dd8fc2..6dee0ec 100644 --- a/_includes/sidebar.html +++ b/_includes/sidebar.html @@ -1,11 +1,10 @@