✨ Feat: add GitHub Corners support (#106)

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]

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
 

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)
 
 ## 作者
 

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;
+}

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';

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;
 

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;
+    }
+  }
+}

assets/css/_partial/_widgets/_index.scss

@@ -0,0 +1,3 @@
+@import '_cookieconsent';
+@import '_fixed-button';
+@import '_github-corner';

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 解析文档的配置

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/)
+* [Twikoo](https://twikoo.js.org/)
+* [github-corners](https://github.com/tholman/github-corners)

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)

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]

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]

layouts/partials/header.html

@@ -135,7 +135,13 @@
           <i class="fas fa-adjust fa-fw"></i>
         </li>
       </ul>
-   </nav>
+    </nav>
+    {{- $githubCorner := .Site.Params.githubCorner -}}
+    {{- if $githubCorner.enable -}}
+      {{- $githubImage := `<svg width="56" height="56" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg>` -}}
+      {{- $options := dict "Destination" $githubCorner.permalink "Title" $githubCorner.title "Content" $githubImage "Class" "github-corner" -}}
+        {{- partial "plugin/link.html" $options -}}
+    {{- end -}}
   </div>
 </header>