✨ Add Ko-fi integration

README.de.md

@@ -48,7 +48,7 @@ Blowfish ist ein leistungsstarkes, schlankes Theme für [Hugo](https://gohugo.io
 - Möglichkeit, auf Beiträge auf Websites von Drittanbietern zu verlinken
 - Über 40 Shortcodes einschließlich Gallery, Timeline, GitHub-Karten, Carousels, Stats, Feature-Rastern, Steps und CTA-Buttons
 - GitHub Alerts-Syntax, 15 Typen, zusammenklappbar
-- Buymeacoffee-Integration
+- Buy Me a Coffee- und Ko-fi-Integration
 - Clientseitige Website-Suche mit Fuse.js
 - Diagramme und Visualisierungen mit Mermaid
 - Charts mit Chart.js

README.es.md

@@ -48,7 +48,7 @@ Blowfish está diseñado para ser un tema potente y ligero para [Hugo](https://g
 - Capacidad de enlazar a publicaciones en sitios web de terceros
 - Más de 40 shortcodes incluyendo Gallery, Timeline, GitHub cards, Carousels, Stats, cuadrículas de características, Steps y botones CTA
 - Sintaxis de GitHub Alerts, 15 tipos, soporte plegable
-- Integración con Buymeacoffee
+- Integración con Buy Me a Coffee y Ko-fi
 - Búsqueda en el sitio del lado del cliente impulsada por Fuse.js
 - Diagramas y visualizaciones usando Mermaid
 - Gráficos usando Chart.js

README.fr.md

@@ -48,7 +48,7 @@ Blowfish est conçu pour être un thème puissant et léger pour [Hugo](https://
 - Possibilité de lier des articles sur des sites web tiers
 - Plus de 40 shortcodes incluant Gallery, Timeline, GitHub cards, Carousels, Stats, grilles de fonctionnalités, Steps et boutons CTA
 - Syntaxe GitHub Alerts, 15 types, support pliable
-- Intégration Buymeacoffee
+- Intégration Buy Me a Coffee et Ko-fi
 - Recherche côté client alimentée par Fuse.js
 - Diagrammes et visualisations utilisant Mermaid
 - Graphiques utilisant Chart.js

README.id.md

@@ -46,7 +46,7 @@ Blowfish dirancang sebagai tema yang kuat dan ringan untuk [Hugo](https://gohugo
 - Kemampuan untuk menautkan ke artikel di situs web pihak ketiga  
 - Lebih dari 40 shortcode termasuk Galeri, Timeline, Kartu GitHub, Carousel, Statistik, Grid fitur, Langkah, dan tombol CTA
 - Sintaks GitHub Alerts, 15 jenis, dukungan lipat
-- Integrasi BuyMeACoffee  
+- Integrasi Buy Me a Coffee dan Ko-fi
 - Pencarian situs berbasis klien dengan Fuse.js  
 - Diagram dan visualisasi menggunakan Mermaid  
 - Grafik menggunakan Chart.js  

README.ja.md

@@ -48,7 +48,7 @@ Blowfishは[Hugo](https://gohugo.io)のために設計された強力で軽量
 - サードパーティー ウェブサイトの投稿へのリンク
 - ギャラリー、タイムライン、GitHub カード、カルーセル、統計、機能グリッド、ステップ、CTA ボタンなど、40 種類以上のショートコード
 - GitHub Alerts 構文、15 種類、折りたたみ対応
-- Buy Me a Coffee 連携
+- Buy Me a Coffee と Ko-fi 連携
 - Fuse.js を利用したクライアントサイドのサイト内検索
 - Mermaid を使用したダイアグラムや視覚化
 - Chart.js を使用したグラフ表示

README.md

@@ -48,7 +48,7 @@ Blowfish is designed to be a powerful, lightweight theme for [Hugo](https://gohu
 - Ability to link to posts on third-party websites
 - 40+ shortcodes including Gallery, Timeline, GitHub cards, Carousels, Stats, Feature grids, Steps, and CTA buttons
 - GitHub Alerts syntax, 15 types, collapsible support
-- Buymeacoffee integration
+- Buy Me a Coffee & Ko-fi integration
 - Client-side site search powered by Fuse.js
 - Diagrams and visualisations using Mermaid
 - Charts using Chart.js

README.pt-br.md

@@ -48,7 +48,7 @@ Blowfish foi projetado para ser um tema poderoso e leve para [Hugo](https://gohu
 - Capacidade de linkar para posts em sites de terceiros
 - Mais de 40 shortcodes incluindo Gallery, Timeline, GitHub cards, Carousels, Stats, grades de recursos, Steps e botões CTA
 - Sintaxe de alertas do GitHub, 15 tipos, suporte recolhível
-- Integração com Buymeacoffee
+- Integração com Buy Me a Coffee e Ko-fi
 - Busca no site do lado do cliente alimentada por Fuse.js
 - Diagramas e visualizações usando Mermaid
 - Gráficos usando Chart.js

README.pt-pt.md

@@ -48,7 +48,7 @@ Blowfish foi desenhado para ser um tema poderoso e leve para [Hugo](https://gohu
 - Capacidade de criar links para publicações em sites de terceiros
 - Mais de 40 shortcodes incluindo Gallery, Timeline, GitHub cards, Carousels, Stats, grelhas de funcionalidades, Steps e botões CTA
 - Sintaxe GitHub Alerts, 15 tipos, suporte para elementos expansíveis
-- Integração Buymeacoffee
+- Integração Buy Me a Coffee e Ko-fi
 - Pesquisa no site do lado do cliente alimentada por Fuse.js
 - Diagramas e visualizações usando Mermaid
 - Gráficos usando Chart.js

README.zh-cn.md

@@ -46,7 +46,7 @@ Blowfish 是一个轻量有力的 Hugo 主题。它使用 Tailwind CSS 构建，
 - 可链接到第三方网站上的帖子
 - 内置 40 多种简码，包括图库、时间轴、GitHub 卡片、轮播、数据统计、功能网格、步骤和 CTA 按钮
 - 支持 GitHub Alerts 语法、15 种类型和可折叠功能
-- 支持 Buymeacoffee
+- 支持 Buy Me a Coffee 和 Ko-fi
 - 拥有由 Fuse.js 支持的客户端一侧网站搜索功能
 - 植入了基于 Mermaid 的图表功能
 - 植入了基于 Chart.js 的图表功能

assets/css/compiled/main.css

@@ -4236,7 +4236,7 @@
 .zen-mode {
   position: relative;
 }
-body.zen-mode-enable #bmc-wbtn, body.zen-mode-enable  .author {
+body.zen-mode-enable #bmc-wbtn, body.zen-mode-enable  div[id^="kofi-widget-overlay-"], body.zen-mode-enable  .author {
   display: none !important;
 }
 .gist-container .gist h1 {
@@ -4717,7 +4717,7 @@ pre {
     max-width: none !important;
     padding: 0 !important;
   }
-  body > header, #background-canvas, .single_hero_background, #scroll-to-top, #bmc-wbtn {
+  body > header, #background-canvas, .single_hero_background, #scroll-to-top, #bmc-wbtn, body > div[id^="kofi-widget-overlay-"] {
     display: none !important;
   }
   * {
@@ -4894,7 +4894,7 @@ body:has(#mobile-menu-toggle:checked):not(:has(#mobile-menu-dialog.mobile-menu-s
     overflow: visible;
   }
 }
-#bmc-wbtn {
+#bmc-wbtn, body > div[id^="kofi-widget-overlay-"] {
   z-index: 50 !important;
 }
 .nested-menu {

assets/css/components/zen-mode.css

@@ -8,6 +8,7 @@
 
 body.zen-mode-enable {
   #bmc-wbtn,
+  div[id^="kofi-widget-overlay-"],
   .author {
     display: none !important;
   }

assets/css/main.css

@@ -249,7 +249,8 @@ pre {
   #background-canvas,
   .single_hero_background,
   #scroll-to-top,
-  #bmc-wbtn {
+  #bmc-wbtn,
+  body > div[id^="kofi-widget-overlay-"] {
     display: none !important;
   }
 
@@ -462,8 +463,9 @@ body:has(#mobile-menu-toggle:checked):not(:has(#mobile-menu-dialog.mobile-menu-s
   }
 }
 
-/* Hide buy me a coffee in mobile menu */
+/* Keep support widgets below mobile menu */
-#bmc-wbtn {
+#bmc-wbtn,
+body > div[id^="kofi-widget-overlay-"] {
   z-index: 50 !important;
 }
 

config/_default/params.toml

@@ -194,6 +194,13 @@ forgejoDefaultServer = "https://v11.next.forgejo.org"
   # globalWidgetColor = "#FFDD00"
   # globalWidgetPosition = "right"
 
+[kofi]
+  # identifier = ""
+  # globalWidget = true
+  # globalWidgetText = "Support me"
+  # globalWidgetBackgroundColor = "#00B9FE"
+  # globalWidgetTextColor = "#FFFFFF"
+
 [verification]
   # google = ""
   # bing = ""

exampleSite/config/_default/params.toml

@@ -169,6 +169,13 @@ fingerprintAlgorithm = "sha512" # Valid values are "sha512" (default), "sha384",
   globalWidgetColor = "#FFDD00"
   globalWidgetPosition = "right"
 
+[kofi]
+  # identifier = ""
+  # globalWidget = true
+  # globalWidgetText = "Support me"
+  # globalWidgetBackgroundColor = "#00B9FE"
+  # globalWidgetTextColor = "#FFFFFF"
+
 [verification]
   # google = ""
   # bing = ""

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

@@ -350,16 +350,26 @@ Many of the article defaults here can be overridden on a per article basis by sp
 | `selineAnalytics.token` | _Not set_ | The token generated by Seline Analytics for the website. Refer to the [Analytics docs]({{< ref "partials#analytics" >}}) for more details. |
 | `selineAnalytics.enableTrackEvent` | true | When set to `true` track event will add automatically. If you do not want to add track event, set it to `false`. |
 
-### BuyMeACoffee
+### Buy Me a Coffee
 
 | Name | Default | Description |
 | --- | --- | --- |
 | `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.globalWidgetMessage` | _Not set_ | Message that will be displayed the first time a new user lands on the site. |
 | `buymeacoffee.globalWidgetColor` | `#FFDD00` | Widget color in hex format. |
 | `buymeacoffee.globalWidgetPosition` | _Not set_ | Position of the widget, i.e. "left" or "right" |
 
+### Ko-fi
+
+| Name | Default | Description |
+| --- | --- | --- |
+| `kofi.identifier` | _Not set_ | The identifier to the target kofi account. |
+| `kofi.globalWidget` | _Not set_ | Activate the global kofi widget. |
+| `kofi.globalWidgetText` | _Not set_ | Message that will be displayed the first time a new user lands on the site. |
+| `kofi.globalWidgetBackgroundColor` | `#00B9FE` | Widget background color in hex format. |
+| `kofi.globalWidgetTextColor` | `#FFFFFF` | Widget text color in hex format. |
+
 ### Verifications
 
 | Name | Default | Description |

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

@@ -350,7 +350,7 @@ Blowfish は、テーマの機能を制御する多数の設定パラメータ
 | `selineAnalytics.token` | _未設定_ | ウェブサイト用に Seline Analytics によって生成されたトークン。詳細については、[Analytics のドキュメント]({{< ref "partials#アナリティクス" >}})を参照してください。 |
 | `selineAnalytics.enableTrackEvent` | `true` | `true` に設定すると、トラックイベントが自動的に追加されます。トラックイベントを追加したくない場合は、`false` に設定してください。 |
 
-### BuyMeACoffee
+### Buy Me a Coffee
 
 | 名前 | デフォルト | 説明 |
 | --- | --- | --- |
@@ -360,6 +360,16 @@ Blowfish は、テーマの機能を制御する多数の設定パラメータ
 | `buymeacoffee.globalWidgetColor`    | `#FFDD00`   | ウィジェットの色（16進数形式）。                                       |
 | `buymeacoffee.globalWidgetPosition` | _未設定_   | ウィジェットの位置。例えば "left" または "right"                       |
 
+### Ko-fi
+
+| Name | Default | Description |
+| --- | --- | --- |
+| `kofi.identifier` | _未設定_ | ターゲットの Ko-fi アカウントの識別子。 |
+| `kofi.globalWidget` | _未設定_ | グローバル Ko-fi ウィジェットを有効にします。 |
+| `kofi.globalWidgetText` | _未設定_ | 新しいユーザーが初めてサイトにアクセスしたときに表示されるテキスト。 |
+| `kofi.globalWidgetBackgroundColor` | `#00B9FE` | ウィジェットの背景色（16進数形式）。 |
+| `kofi.globalWidgetTextColor` | `#FFFFFF` | ウィジェットの文字色（16進数形式）。 |
+
 ### verification
 
 | 名前                     | デフォルト | 説明                                                               |

exampleSite/content/docs/configuration/index.md

@@ -412,16 +412,26 @@ Many of the article defaults here can be overridden on a per article basis by sp
 | `selineAnalytics.token` | _Not set_ | The token generated by Seline Analytics for the website. Refer to the [Analytics docs]({{< ref "partials#analytics" >}}) for more details. |
 | `selineAnalytics.enableTrackEvent` | true | When set to `true` track event will add automatically. If you do not want to add track event, set it to `false`. |
 
-### BuyMeACoffee
+### Buy Me a Coffee
 
 | Name | Default | Description |
 | --- | --- | --- |
 | `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.globalWidgetMessage` | _Not set_ | Message that will be displayed the first time a new user lands on the site. |
 | `buymeacoffee.globalWidgetColor` | `#FFDD00` | Widget color in hex format. |
 | `buymeacoffee.globalWidgetPosition` | _Not set_ | Position of the widget, i.e. "left" or "right" |
 
+### Ko-fi
+
+| Name | Default | Description |
+| --- | --- | --- |
+| `kofi.identifier` | _Not set_ | The identifier to the target kofi account. |
+| `kofi.globalWidget` | _Not set_ | Activate the global kofi widget. |
+| `kofi.globalWidgetText` | _Not set_ | Message that will be displayed the first time a new user lands on the site. |
+| `kofi.globalWidgetBackgroundColor` | `#00B9FE` | Widget background color in hex format. |
+| `kofi.globalWidgetTextColor` | `#FFFFFF` | Widget text color in hex format. |
+
 ### Verifications
 
 | Name | Default | Description |

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

@@ -354,7 +354,7 @@ Blowfish 提供了大量控制主题功能的配置参数，下面的表格中
 | `selineAnalytics.token` | 无 | Seline 站点分析平台的 token。更多详细内容请参考 [分析文档]({{< ref "partials#analytics" >}})。 |
 | `selineAnalytics.enableTrackEvent` | true | 默认会自动添加 Umami Track Event。如果你不想添加 Event，那学需要设置为 `false`。 |
 
-### BuyMeACoffee(赞助平台)
+### Buy Me a Coffee(赞助平台)
 
 | 名称                                | 默认值    | 描述                               |
 | ----------------------------------- | --------- | ---------------------------------- |
@@ -364,6 +364,16 @@ Blowfish 提供了大量控制主题功能的配置参数，下面的表格中
 | `buymeacoffee.globalWidgetColor`    | `#FFDD00` | 组件颜色，使用 HEX 格式。          |
 | `buymeacoffee.globalWidgetPosition` | 无        | 组件位置，例如 "left" 或 "right"。 |
 
+### Ko-fi(赞助平台)
+
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| `kofi.identifier` | 无 | kofi 账户的用户名。 |
+| `kofi.globalWidget` | 无 | 激活全局的 kofi 组件。 |
+| `kofi.globalWidgetText` | 无 | 新用户首次访问网站时显示的消息。 |
+| `kofi.globalWidgetBackgroundColor` | `#00B9FE` | 组件颜色，使用 HEX 格式。 |
+| `kofi.globalWidgetTextColor` | `#FFFFFF` | 组件文字颜色，使用 HEX 格式。 |
+
 ### 验证
 
 | 名称                     | 默认值 | 描述                                                     |

layouts/_default/baseof.html

@@ -74,4 +74,15 @@
       data-x_margin="18"
       data-y_margin="18"></script>
   {{ end }}
+  {{ if site.Params.kofi.globalWidget | default false }}
+    <script src="https://storage.ko-fi.com/cdn/scripts/overlay-widget.js"></script>
+    <script>
+      kofiWidgetOverlay.draw('{{ site.Params.kofi.identifier }}', {
+        'type': 'floating-chat',
+        'floating-chat.donateButton.text': '{{ site.Params.kofi.globalWidgetText | default "" }}',
+        'floating-chat.donateButton.background-color': '{{ site.Params.kofi.globalWidgetBackgroundColor | default "#00B9FE" }}',
+        'floating-chat.donateButton.text-color': '{{ site.Params.kofi.globalWidgetTextColor | default "#FFFFFF" }}',
+      });
+    </script>
+  {{ end }}
 </html>

layouts/partials/scroll-to-top.html

@@ -5,8 +5,12 @@
 {{ end }}
 
 {{ $needAvoidCoffee := ne $coffeeIsRight $isRTL }}
-{{ $toTopYOffset := cond $needAvoidCoffee "bottom-24" "bottom-6" }}
 
+{{ $kofiEnabled := .Site.Params.kofi.globalWidget | default false }}
+{{ $needAvoidKofi := and $kofiEnabled $isRTL }}
+{{ $needExtraOffset := or $needAvoidCoffee $needAvoidKofi }}
+
+{{ $toTopYOffset := cond $needExtraOffset "bottom-24" "bottom-6" }}
 
 <div
   id="scroll-to-top"