From c3689a50fe06cf0cb81314fb6268d50a4ed229ac Mon Sep 17 00:00:00 2001 From: Cell <1024@lruihao.cn> Date: Sat, 16 Apr 2022 12:51:11 +0800 Subject: [PATCH] :sparkles: Feat: add GitHub Corners support (#106) --- CHANGELOG.md | 5 +++ README.md | 1 + README.zh-cn.md | 1 + assets/css/_common.scss | 11 ++++-- assets/css/_core/_base.scss | 3 +- assets/css/_core/_media.scss | 7 +++- .../{ => _widgets}/_cookieconsent.scss | 0 .../{ => _widgets}/_fixed-button.scss | 0 .../css/_partial/_widgets/_github-corner.scss | 36 +++++++++++++++++++ assets/css/_partial/_widgets/_index.scss | 3 ++ exampleSite/config.toml | 15 ++++++-- exampleSite/content/about/index.en.md | 3 +- exampleSite/content/about/index.zh-cn.md | 1 + .../theme-documentation-basics/index.en.md | 5 +++ .../theme-documentation-basics/index.zh-cn.md | 5 +++ layouts/partials/header.html | 8 ++++- 16 files changed, 94 insertions(+), 10 deletions(-) rename assets/css/_partial/{ => _widgets}/_cookieconsent.scss (100%) rename assets/css/_partial/{ => _widgets}/_fixed-button.scss (100%) create mode 100644 assets/css/_partial/_widgets/_github-corner.scss create mode 100644 assets/css/_partial/_widgets/_index.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index 3fe38b27..b68091a4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,12 +14,17 @@ All notable changes to this project will be documented in this file. - Add external icon for external links automatically - Add download icon for downloadable links - :sparkles: Feat: link shortcode add `external-icon` option ([#96](https://github.com/Lruihao/FixIt/issues/96)) +- :sparkles: Feat: add GitHub Corners support ([#106](https://github.com/Lruihao/FixIt/issues/106)) - :bug: Fix: invalid front matter `comment: true` ([#108](https://github.com/Lruihao/FixIt/issues/108)) - :bug: Fix: ibruce and watermark option negative value error ([#114](https://github.com/Lruihao/FixIt/issues/114)) - :sparkles: Style: add some common CSS styles Class ([#101](https://github.com/Lruihao/FixIt/issues/101)) - :memo: Docs: revised theme documentations - :zap: Perf: remove third-party library clipboard.js ([#84](https://github.com/Lruihao/FixIt/issues/84)) - :pencil2: Docs: fix highlight url typo in `theme-documentation-built-in-shortcodes` (@d-baer[#85](https://github.com/Lruihao/FixIt/pull/85)) +- :wrench: Chore(deps-dev): + - Bump minimist from 1.2.5 to 1.2.6 ([#92](https://github.com/Lruihao/FixIt/pull/92)) + - Bump @babel/core from 7.17.5 to 7.17.9 ([#98](https://github.com/Lruihao/FixIt/pull/98)) + - Bump core-js from 3.21.1 to 3.22.0 ([#117](https://github.com/Lruihao/FixIt/pull/117)) - **Full Changelog:** @Lruihao [`v0.2.13...v0.2.14`](https://github.com/Lruihao/FixIt/compare/v0.2.13...v0.2.14) ## v0.2.13 [2022.3.14] diff --git a/README.md b/README.md index 25ff3fc4..cec35579 100644 --- a/README.md +++ b/README.md @@ -242,6 +242,7 @@ Thanks to the authors of following resources included in the theme: * [Artalk](https://artalk.js.org/) * [Waline](https://waline.js.org/) * [Twikoo](https://twikoo.js.org/) +* [github-corners](https://github.com/tholman/github-corners) ## Author diff --git a/README.zh-cn.md b/README.zh-cn.md index f26c5595..f1c1287d 100644 --- a/README.zh-cn.md +++ b/README.zh-cn.md @@ -241,6 +241,7 @@ FixIt 主题中用到了以下项目，感谢它们的作者： * [Artalk](https://artalk.js.org/) * [Waline](https://waline.js.org/) * [Twikoo](https://twikoo.js.org/) +* [github-corners](https://github.com/tholman/github-corners) ## 作者 diff --git a/assets/css/_common.scss b/assets/css/_common.scss index 6e2f0902..b37c9b75 100644 --- a/assets/css/_common.scss +++ b/assets/css/_common.scss @@ -8,15 +8,20 @@ text-overflow: ellipsis; white-space: nowrap; } - .text-start { text-align: left !important; } - .text-end { text-align: right !important; } - .text-center { text-align: center !important; } + +.d-none, +.d-none-desktop { + display: none; +} +.d-none-mobile { + display: block; +} \ No newline at end of file diff --git a/assets/css/_core/_base.scss b/assets/css/_core/_base.scss index 6271ba41..316b218d 100644 --- a/assets/css/_core/_base.scss +++ b/assets/css/_core/_base.scss @@ -65,5 +65,4 @@ iframe { @import '../_partial/mask'; @import '../_partial/icon'; @import '../_partial/details'; -@import '../_partial/fixed-button'; -@import '../_partial/cookieconsent'; +@import '../_partial/_widgets'; diff --git a/assets/css/_core/_media.scss b/assets/css/_core/_media.scss index 176ee2a0..23ce0c8a 100644 --- a/assets/css/_core/_media.scss +++ b/assets/css/_core/_media.scss @@ -91,10 +91,15 @@ display: none; } - #header-mobile { + #header-mobile, + .d-none-desktop { display: block; } + .d-none-mobile { + display: none !important; + } + .page { width: 100% !important; diff --git a/assets/css/_partial/_cookieconsent.scss b/assets/css/_partial/_widgets/_cookieconsent.scss similarity index 100% rename from assets/css/_partial/_cookieconsent.scss rename to assets/css/_partial/_widgets/_cookieconsent.scss diff --git a/assets/css/_partial/_fixed-button.scss b/assets/css/_partial/_widgets/_fixed-button.scss similarity index 100% rename from assets/css/_partial/_fixed-button.scss rename to assets/css/_partial/_widgets/_fixed-button.scss diff --git a/assets/css/_partial/_widgets/_github-corner.scss b/assets/css/_partial/_widgets/_github-corner.scss new file mode 100644 index 00000000..55c7b331 --- /dev/null +++ b/assets/css/_partial/_widgets/_github-corner.scss @@ -0,0 +1,36 @@ +@keyframes octocat-wave { + 0%, + 100% { + transform: rotate(0); + } + 20%, + 60% { + transform: rotate(-25deg); + } + 40%, + 80% { + transform: rotate(10deg); + } +} + +.github-corner { + display: block; + width: 1.5rem; + + :hover .octo-arm { + animation: octocat-wave 560ms ease-in-out; + } + svg { + border: 0; + color: white; + fill: $header-background-color-dark; + position: absolute; + right: 0; + top: 0; + + [theme='dark'] & { + color: black; + fill: $header-background-color; + } + } +} \ No newline at end of file diff --git a/assets/css/_partial/_widgets/_index.scss b/assets/css/_partial/_widgets/_index.scss new file mode 100644 index 00000000..a7ba7585 --- /dev/null +++ b/assets/css/_partial/_widgets/_index.scss @@ -0,0 +1,3 @@ +@import '_cookieconsent'; +@import '_fixed-button'; +@import '_github-corner'; \ No newline at end of file diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 6bc11a7a..a72c6d62 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -120,7 +120,7 @@ enableEmoji = true title = "GitHub" weight = 8 [languages.en.menu.main.params] - class = "text-center" + class = "d-none-desktop text-center" [languages.en.params] # site description description = "About FixIt Theme" @@ -346,7 +346,7 @@ enableEmoji = true title = "GitHub" weight = 7 [languages.zh-cn.menu.main.params] - class = "text-center" + class = "d-none-desktop text-center" [languages.zh-cn.params] # 网站描述 description = "关于 FixIt 主题" @@ -507,6 +507,11 @@ enableEmoji = true opacity = 0.0125 # 单水印高度 单位：px height = 21 + # 在顶部右侧显示 GitHub 开源链接 since v0.2.14 + [languages.zh-cn.params.githubCorner] + enable = true + permalink = "https://github.com/Lruihao/FixIt" + title = "在 GitHub 上查看源代码" [params] # FixIt theme version @@ -1085,6 +1090,12 @@ enableEmoji = true # "assets/js/_custom.js" [params.customJS] enable = true + # GitHub banner in the top-right corner since v0.2.14 + # 在顶部右侧显示 GitHub 开源链接 since v0.2.14 + [params.githubCorner] + enable = true + permalink = "https://github.com/Lruihao/FixIt" + title = "View source on GitHub" # Markup related configuration in Hugo # Hugo 解析文档的配置 diff --git a/exampleSite/content/about/index.en.md b/exampleSite/content/about/index.en.md index b7a1b047..7386eb73 100644 --- a/exampleSite/content/about/index.en.md +++ b/exampleSite/content/about/index.en.md @@ -125,4 +125,5 @@ Thanks to the authors of following resources included in the theme: * [pangu.js](https://github.com/vinta/pangu.js) * [Artalk](https://artalk.js.org/) * [Waline](https://waline.js.org/) -* [Twikoo](https://twikoo.js.org/) \ No newline at end of file +* [Twikoo](https://twikoo.js.org/) +* [github-corners](https://github.com/tholman/github-corners) \ No newline at end of file diff --git a/exampleSite/content/about/index.zh-cn.md b/exampleSite/content/about/index.zh-cn.md index be1f9487..a2a7fe8c 100644 --- a/exampleSite/content/about/index.zh-cn.md +++ b/exampleSite/content/about/index.zh-cn.md @@ -126,3 +126,4 @@ FixIt 主题中用到了以下项目，感谢它们的作者： * [Artalk](https://artalk.js.org/) * [Waline](https://waline.js.org/) * [Twikoo](https://twikoo.js.org/) +* [github-corners](https://github.com/tholman/github-corners) diff --git a/exampleSite/content/posts/theme-documentation-basics/index.en.md b/exampleSite/content/posts/theme-documentation-basics/index.en.md index b49005c1..e70f0034 100644 --- a/exampleSite/content/posts/theme-documentation-basics/index.en.md +++ b/exampleSite/content/posts/theme-documentation-basics/index.en.md @@ -774,6 +774,11 @@ Please open the code block below to view the complete sample configuration :(far # "assets/js/_custom.js" [params.customJS] enable = true + # {{< version 0.2.14 >}} GitHub banner in the top-right corner + [params.githubCorner] + enable = false + permalink = "https://github.com/Lruihao/FixIt" + title = "View source on GitHub" # Markup related configuration in Hugo [markup] diff --git a/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md b/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md index 668f6317..08169421 100644 --- a/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md +++ b/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md @@ -784,6 +784,11 @@ hugo # "assets/js/_custom.js" [params.customJS] enable = true + # {{< version 0.2.14 >}} 在顶部右侧显示 GitHub 开源链接 + [params.githubCorner] + enable = false + permalink = "https://github.com/Lruihao/FixIt" + title = "在 GitHub 上查看源代码" # Hugo 解析文档的配置 [markup] diff --git a/layouts/partials/header.html b/layouts/partials/header.html index c60027da..f5a7a771 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -135,7 +135,13 @@ - + + {{- $githubCorner := .Site.Params.githubCorner -}} + {{- if $githubCorner.enable -}} + {{- $githubImage := `` -}} + {{- $options := dict "Destination" $githubCorner.permalink "Title" $githubCorner.title "Content" $githubImage "Class" "github-corner" -}} + {{- partial "plugin/link.html" $options -}} + {{- end -}}