Merge pull request #2495 from ZhenShuo2021/fix/page-widget

🐛 Fix: page widget

assets/css/compiled/main.css

@@ -497,6 +497,9 @@ body.zen-mode-enable {
   .start-\[calc\(max\(-50vw\,-800px\)\+50\%\)\] {
     inset-inline-start: calc(max(-50vw, -800px) + 50%);
   }
+  .end-6 {
+    inset-inline-end: calc(var(--spacing) * 6);
+  }
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
@@ -506,18 +509,18 @@ body.zen-mode-enable {
   .top-20 {
     top: calc(var(--spacing) * 20);
   }
-  .top-\[110vh\] {
-    top: 110vh;
-  }
-  .top-\[calc\(100vh-5\.5rem\)\] {
-    top: calc(100vh - 5.5rem);
-  }
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
+  .bottom-6 {
+    bottom: calc(var(--spacing) * 6);
+  }
+  .bottom-24 {
+    bottom: calc(var(--spacing) * 24);
+  }
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
@@ -536,6 +539,9 @@ body.zen-mode-enable {
   .z-30 {
     z-index: 30;
   }
+  .z-50 {
+    z-index: 50;
+  }
   .z-80 {
     z-index: 80;
   }
@@ -1204,9 +1210,6 @@ body.zen-mode-enable {
   .mb-12 {
     margin-bottom: calc(var(--spacing) * 12);
   }
-  .mb-16 {
-    margin-bottom: calc(var(--spacing) * 16);
-  }
   .mb-20 {
     margin-bottom: calc(var(--spacing) * 20);
   }
@@ -1538,6 +1541,14 @@ body.zen-mode-enable {
     --tw-translate-y: calc(var(--spacing) * -8);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-y-0 {
+    --tw-translate-y: calc(var(--spacing) * 0);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-y-4 {
+    --tw-translate-y: calc(var(--spacing) * 4);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .scale-0 {
     --tw-scale-x: 0%;
     --tw-scale-y: 0%;
@@ -3213,11 +3224,6 @@ body.zen-mode-enable {
       grid-template-columns: repeat(5, minmax(0, 1fr));
     }
   }
-  .ltr\:right-0 {
-    &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
-      right: calc(var(--spacing) * 0);
-    }
-  }
   .ltr\:mr-4 {
     &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
       margin-right: calc(var(--spacing) * 4);
@@ -3243,11 +3249,6 @@ body.zen-mode-enable {
       display: inline;
     }
   }
-  .rtl\:left-0 {
-    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
-      left: calc(var(--spacing) * 0);
-    }
-  }
   .rtl\:-mr-\[79px\] {
     &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
       margin-right: calc(79px * -1);
@@ -3807,6 +3808,9 @@ pre {
 [id^="fn"], [id^="fnref"] {
   scroll-margin-top: 145px;
 }
+#main-content {
+  scroll-margin-top: -125px;
+}
 @media (width >= 640px) {
   .article {
     flex-wrap: wrap;

assets/css/main.css

@@ -215,6 +215,11 @@ pre {
   scroll-margin-top: 145px;
 }
 
+/* patch for skip to main content */
+#main-content {
+  scroll-margin-top: -125px;
+}
+
 @variant sm {
   .article {
     flex-wrap: wrap;

assets/js/scroll-to-top.js

@@ -0,0 +1,13 @@
+function scrollToTop() {
+  const scrollToTop = document.getElementById("scroll-to-top");
+  if (window.scrollY > window.innerHeight * 0.5) {
+    scrollToTop.classList.remove("translate-y-4", "opacity-0");
+    scrollToTop.classList.add("translate-y-0", "opacity-100");
+  } else {
+    scrollToTop.classList.remove("translate-y-0", "opacity-100");
+    scrollToTop.classList.add("translate-y-4", "opacity-0");
+  }
+}
+
+window.addEventListener("scroll", scrollToTop);
+window.addEventListener("load", scrollToTop);

config/_default/params.toml

@@ -160,7 +160,7 @@ forgejoDefaultServer = "https://v11.next.forgejo.org"
   # globalWidget = true
   # globalWidgetMessage = "Hello"
   # globalWidgetColor = "#FFDD00"
-  # globalWidgetPosition = "Right"
+  # globalWidgetPosition = "right"
 
 [verification]
   # google = ""

exampleSite/config/_default/params.toml

@@ -159,7 +159,7 @@ fingerprintAlgorithm = "sha512" # Valid values are "sha512" (default), "sha384",
   globalWidget = true
   globalWidgetMessage = ""
   globalWidgetColor = "#FFDD00"
-  globalWidgetPosition = "Right"
+  globalWidgetPosition = "right"
 
 [verification]
   # google = ""

exampleSite/content/docs/configuration/index.it.md

@@ -353,8 +353,8 @@ Many of the article defaults here can be overridden on a per article basis by sp
 | `buymeacoffee.identifier` | _Not set_ | The identifier to the target buymeacoffee account. |
 | `buymeacoffee.globalWidget` | _Not set_ | Activate the global buymeacoffee widget. |
 | `buymeacoffee.globalWidgetMessage` | _Not set_ | Message what will be displayed the first time a new user lands on the site. |
-| `buymeacoffee.globalWidgetColor` | _Not set_ | Widget color in hex format. |
+| `buymeacoffee.globalWidgetColor` | `#FFDD00` | Widget color in hex format. |
-| `buymeacoffee.globalWidgetPosition` | _Not set_ | Position of the widget, i.e. "Left" or "Right" |
+| `buymeacoffee.globalWidgetPosition` | _Not set_ | Position of the widget, i.e. "left" or "right" |
 
 ### Verifications
 

exampleSite/content/docs/configuration/index.ja.md

@@ -353,8 +353,8 @@ Blowfish は、テーマの機能を制御する多数の設定パラメータ
 | `buymeacoffee.identifier`           | _未設定_   | ターゲットの buymeacoffee アカウントの識別子。                         |
 | `buymeacoffee.globalWidget`         | _未設定_   | グローバル buymeacoffee ウィジェットを有効にします。                   |
 | `buymeacoffee.globalWidgetMessage`  | _未設定_   | 新しいユーザーが初めてサイトにアクセスしたときに表示されるメッセージ。 |
-| `buymeacoffee.globalWidgetColor`    | _未設定_   | ウィジェットの色（16進数形式）。                                       |
+| `buymeacoffee.globalWidgetColor`    | `#FFDD00`   | ウィジェットの色（16進数形式）。                                       |
-| `buymeacoffee.globalWidgetPosition` | _未設定_   | ウィジェットの位置。例えば "Left" または "Right"                       |
+| `buymeacoffee.globalWidgetPosition` | _未設定_   | ウィジェットの位置。例えば "left" または "right"                       |
 
 ### verification
 

exampleSite/content/docs/configuration/index.md

@@ -360,8 +360,8 @@ Many of the article defaults here can be overridden on a per article basis by sp
 | `buymeacoffee.identifier` | _Not set_ | The identifier to the target buymeacoffee account. |
 | `buymeacoffee.globalWidget` | _Not set_ | Activate the global buymeacoffee widget. |
 | `buymeacoffee.globalWidgetMessage` | _Not set_ | Message what will be displayed the first time a new user lands on the site. |
-| `buymeacoffee.globalWidgetColor` | _Not set_ | Widget color in hex format. |
+| `buymeacoffee.globalWidgetColor` | `#FFDD00` | Widget color in hex format. |
-| `buymeacoffee.globalWidgetPosition` | _Not set_ | Position of the widget, i.e. "Left" or "Right" |
+| `buymeacoffee.globalWidgetPosition` | _Not set_ | Position of the widget, i.e. "left" or "right" |
 
 ### Verifications
 

exampleSite/content/docs/configuration/index.zh-cn.md

@@ -352,13 +352,13 @@ Blowfish 提供了大量控制主题功能的配置参数，下面的表格中
 
 ### BuyMeACoffee(赞助平台)
 
-| 名称                                | 默认值 | 描述                               |
+| 名称                                | 默认值    | 描述                               |
-| ----------------------------------- | ------ | ---------------------------------- |
+| ----------------------------------- | --------- | ---------------------------------- |
-| `buymeacoffee.identifier`           | 无     | buymeacoffee 账号的用户名。        |
+| `buymeacoffee.identifier`           | 无        | buymeacoffee 账号的用户名。        |
-| `buymeacoffee.globalWidget`         | 无     | 激活位于全局的 buymeacoffee 组件。 |
+| `buymeacoffee.globalWidget`         | 无        | 激活位于全局的 buymeacoffee 组件。 |
-| `buymeacoffee.globalWidgetMessage`  | 无     | 新用户首次访问网站时显示的消息。   |
+| `buymeacoffee.globalWidgetMessage`  | 无        | 新用户首次访问网站时显示的消息。   |
-| `buymeacoffee.globalWidgetColor`    | 无     | 组件颜色，使用 HEX 格式。          |
+| `buymeacoffee.globalWidgetColor`    | `#FFDD00` | 组件颜色，使用 HEX 格式。          |
-| `buymeacoffee.globalWidgetPosition` | 无     | 组件位置，例如 "Left" 或 "Right"。 |
+| `buymeacoffee.globalWidgetPosition` | 无        | 组件位置，例如 "left" 或 "right"。 |
 
 ### 验证
 

layouts/_default/baseof.html

@@ -1,14 +1,10 @@
 <!doctype html>
 <html
-  lang="{{ with site.Params.isoCode | default (site.LanguageCode | default " en") }}{{- . -}}{{ end }}"
+  lang="{{ with site.Params.isoCode | default (site.LanguageCode | default `en`) }}{{- . -}}{{ end }}"
-  dir="{{ if site.Params.rtl | default false -}}
+  dir="{{ cond (site.Params.rtl | default false) `rtl` `ltr` }}"
-    rtl
-  {{- else -}}
-    ltr
-  {{- end }}"
   class="scroll-smooth"
-  data-default-appearance="{{ site.Params.defaultAppearance | default " light" }}"
+  data-default-appearance="{{ site.Params.defaultAppearance | default `light` }}"
-  data-auto-appearance="{{ site.Params.autoSwitchAppearance | default " true" }}">
+  data-auto-appearance="{{ site.Params.autoSwitchAppearance | default `true` }}">
   {{- partial "head.html" . -}}
 
 
@@ -48,9 +44,9 @@
       src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
       data-id="{{ site.Params.buymeacoffee.identifier }}"
       data-description="Support me on Buy me a coffee!"
-      data-message="{{ site.Params.buymeacoffee.globalWidgetMessage | default "" }}"
+      {{ with site.Params.buymeacoffee.globalWidgetMessage }}data-message="{{ . }}"{{ end }}
-      data-color="{{ site.Params.buymeacoffee.globalWidgetColor | default "#FFDD00" }}"
+      {{ with site.Params.buymeacoffee.globalWidgetColor | default `#FFDD00` }}data-color="{{ . }}"{{ end }}
-      data-position="{{ site.Params.buymeacoffee.globalWidgetPosition | default "Left" }}"
+      {{ with site.Params.buymeacoffee.globalWidgetPosition }}data-position="{{ . }}"{{ end }}
       data-x_margin="18"
       data-y_margin="18"></script>
   {{ end }}

layouts/partials/head.html

@@ -69,6 +69,10 @@
     type="text/javascript"
     src="{{ $jsAppearance.RelPermalink }}"
     integrity="{{ $jsAppearance.Data.Integrity }}"></script>
+  {{ if site.Params.footer.showScrollToTop | default true }}
+    {{ $jsToTop := resources.Get "js/scroll-to-top.js" }}
+    {{ $assets.Add "js" (slice $jsToTop) }}
+  {{ end }}
   {{ if .Site.Params.enableA11y | default false }}
     {{ $jsA11y := resources.Get "js/a11y.js" }}
     {{ $jsA11y = $jsA11y | resources.Minify | resources.Fingerprint (site.Params.fingerprintAlgorithm | default "sha512") }}
@@ -83,6 +87,10 @@
       src="{{ $jsZenMode.RelPermalink }}"
       integrity="{{ $jsZenMode.Data.Integrity }}"></script>
   {{ end }}
+  {{ if site.Params.footer.showScrollToTop | default true }}
+    {{ $jsToTop := resources.Get "js/scroll-to-top.js" }}
+    {{ $assets.Add "js" (slice $jsToTop) }}
+  {{ end }}
   {{ if .Site.Params.enableSearch | default false }}
     {{ $jsFuse := resources.Get "lib/fuse/fuse.min.js" }}
     {{ $jsSearch := resources.Get "js/search.js" }}

layouts/partials/scroll-to-top.html

@@ -1,7 +1,11 @@
-<div id="top-scroller" class="pointer-events-none absolute top-[110vh] bottom-0 w-12 ltr:right-0 rtl:left-0 z-10">
+{{ $coffeeIsRight := and site.Params.buymeacoffee.globalWidget (eq (lower site.Params.buymeacoffee.globalWidgetPosition) "right") }}
+{{ $toTopYOffset := cond $coffeeIsRight "bottom-24" "bottom-6" }}
+<div
+  id="scroll-to-top"
+  class="fixed {{ $toTopYOffset }} end-6 z-50 transform translate-y-4 opacity-0 duration-200">
   <a
     href="#the-top"
-    class="pointer-events-auto sticky top-[calc(100vh-5.5rem)] flex h-12 w-12 mb-16 items-center justify-center rounded-full bg-neutral/50 text-xl text-neutral-700 hover:text-primary-600 dark:bg-neutral-800/50 dark:text-neutral dark:hover:text-primary-400"
+    class="pointer-events-auto flex h-12 w-12 items-center justify-center rounded-full bg-neutral/50 text-xl text-neutral-700 hover:text-primary-600 dark:bg-neutral-800/50 dark:text-neutral dark:hover:text-primary-400"
     aria-label="{{ i18n "nav.scroll_to_top_title" }}"
     title="{{ i18n "nav.scroll_to_top_title" }}">
     &uarr;