diff --git a/.github/workflows/test-and-release.yml b/.github/workflows/test-and-release.yml new file mode 100644 index 0000000..e48fecb --- /dev/null +++ b/.github/workflows/test-and-release.yml @@ -0,0 +1,56 @@ +name: Generate test site to ensure it works + +on: + push: + branches: + - main + - feature/* + - bugfix/* + +jobs: + build-exampleSite: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + with: + submodules: true + fetch-depth: 1 + + - name: Setup Hugo + uses: peaceiris/actions-hugo@v2 + with: + hugo-version: 0.121.2 + extended: true + + - name: Test if exmapleSite can be built + run: | + cd exampleSite + + # install PaperMod theme + git clone --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod + + # install hugo-kofi-shortcodes + ln -s ../ themes/kofi-shortcodes + + hugo --minify + + # clean up + rm -rf themes/* + + + - name: Bump version and push tag + if: github.ref == 'refs/heads/main' + id: tag_version + uses: mathieudutour/github-tag-action@v6.1 + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + + - name: Create normal GitHub release + if: github.ref == 'refs/heads/main' && github.event_name != 'schedule' + uses: actions/create-release@v1 + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + with: + tag_name: ${{ steps.tag_version.outputs.new_tag }} + release_name: Release ${{ steps.tag_version.outputs.new_tag }} + body: ${{ steps.tag_version.outputs.changelog }} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..3a8ee1f --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +exampleSite/themes +*.lock diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml new file mode 100644 index 0000000..b08935a --- /dev/null +++ b/.pre-commit-config.yaml @@ -0,0 +1,38 @@ +repos: + - repo: https://github.com/pre-commit/pre-commit-hooks + rev: v4.5.0 + hooks: + - id: check-merge-conflict + - id: check-yaml + - id: check-json + - id: check-toml + - id: end-of-file-fixer + - id: mixed-line-ending + args: [--fix=auto] + - id: check-added-large-files + - id: trailing-whitespace + args: [--markdown-linebreak-ext=md] + - id: pretty-format-json + args: [--autofix, --indent=4, --no-sort-keys] + + - repo: https://github.com/boidolr/pre-commit-text + rev: v1.2.13 + hooks: + - id: pretty-format-yaml + args: [--preserve-quotes] + + # Optimize images for size + - repo: https://github.com/boidolr/pre-commit-images + rev: v1.5.1 + hooks: + - id: optimize-avif + - id: optimize-jpg + - id: optimize-png + - id: optimize-svg + - id: optimize-webp + + # Strip EXIF data from images + - repo: https://github.com/stefmolin/exif-stripper + rev: 0.1.2 + hooks: + - id: strip-exif diff --git a/README.md b/README.md new file mode 100644 index 0000000..717bd6e --- /dev/null +++ b/README.md @@ -0,0 +1,93 @@ +# hugo-kofi-shortcodes + +This is a set of shortcodes to allow easy integration with [Ko-fi](https://ko-fi.com/). + +[Live demo on my blog](https://gagor.pro//2024/03/kofi-shortcodes-for-hugo/). + +# Installation + +1. Clone hugo-kofi-shortcodes repo to your project: + +- as submodule (recommended) + ```bash + cd your-site-location + + git submodule add --depth=1 https://github.com/tgagor/hugo-kofi-shortcodes.git themes/kofi-shortcodes + + # initialize any uninitialized submodules in the repository + # and then recursively update all submodules + # to their latest versions + git submodule update --init --recursive + ``` +- or by just cloning + ```bash + cd your-site-location + + git clone --depth=1 https://github.com/tgagor/hugo-kofi-shortcodes.git themes/kofi-shortcodes + ``` + +3. Update blog config: + +```yaml +theme: + - YourThemeOfChoice + - hugo-kofi-shortcodes +``` + +Original theme should be first, followed up by extension. + +If you're unable to get it working, check [`exampleSite`](./exampleSite/) directory. + +# List of shortcodes + +| Animated button | +| ---------------------------------------------------------------------------- | +| `{{}}` or
`{{}}` | +| `{{}}` | +| `{{}}` | + +| Image style 1 | +| ------------------------------------------------------------------------- | +| `{{}}` or
`{{}}` | +| `{{}}` | +| `{{}}` | +| `{{}}` | +| `{{}}` | + +| Image style 2 | +| ------------------------------------------------------------------------- | +| `{{}}` or
`{{}}` | +| `{{}}` | +| `{{}}` | +| `{{}}` | + +### Logotypes + +| Logos | +| --------------------------------------------------------------------- | +| `{{}}` or
`{{}}` | +| `{{}}` | +| `{{}}` | + +### Badges + +| Badges | +| ---------------------------------------------------------------------- | +| `{{}}` or
`{{}}` | +| `{{}}` | +| `{{}}` | +| `{{}}` | + +### Dynamic widgets + +| Widgets | +| ---------------------------------- | +| `{{}}` | +| `{{}}` | + +### Custom images + +| Custom images | +| ----------------------------------------------------------------------------------------------------- | +| `{{}}` | +| | diff --git a/exampleSite/content/posts/demo.md b/exampleSite/content/posts/demo.md new file mode 100644 index 0000000..648bb3e --- /dev/null +++ b/exampleSite/content/posts/demo.md @@ -0,0 +1,73 @@ +--- +title: Check out demo of all the Ko-fi shortcodes +date: 2024-03-08 +authors: + - tgagor +--- + +## Demos + +### Animated buttons + +Those look nice and have animated mugs, but I saw them being blocked by uBlock Origin. + +| Animated button | Shortcode | +| ----------------------------------- | ---------------------------------------------------------------------------- | +| {{< kofi/button >}} | `{{}}` or
`{{}}` | +| {{< kofi/button color="#FF5E5B" >}} | `{{}}` | +| {{< kofi/button color="#434b57" >}} | `{{}}` | + + +### Static images + +| Image style 1 | Shortcode | +| --------------------------------- | ------------------------------------------------------------------------- | +| {{< kofi/image1 >}} | `{{}}` or
`{{}}` | +| {{< kofi/image1 style="grey" >}} | `{{}}` | +| {{< kofi/image1 style="red" >}} | `{{}}` | +| {{< kofi/image1 style="green" >}} | `{{}}` | +| {{< kofi/image1 style="dark" >}} | `{{}}` | + +| Image style 2 | Shortcode | +| ---------------------------------- | ------------------------------------------------------------------------- | +| {{< kofi/image2 >}} | `{{}}` or
`{{}}` | +| {{< kofi/image2 style="red" >}} | `{{}}` | +| {{< kofi/image2 style="stroke" >}} | `{{}}` | +| {{< kofi/image2 style="dark" >}} | `{{}}` | + +### Logotypes + +| Logos | Shortcode | +| ------------------------------- | --------------------------------------------------------------------- | +| {{< kofi/logo style="logo" >}} | `{{}}` or
`{{}}` | +| {{< kofi/logo style="mug" >}} | `{{}}` | +| {{< kofi/logo style="pixel" >}} | `{{}}` | + +### Badges + +| Badges | Shortcode | +| --------------------------------- | ---------------------------------------------------------------------- | +| {{< kofi/badge style=white >}} | `{{}}` or
`{{}}` | +| {{< kofi/badge style=dark >}} | `{{}}` | +| {{< kofi/badge style=bg-white >}} | `{{}}` | +| {{< kofi/badge style=bg-dark >}} | `{{}}` | + +### Dynamic widgets + +| Widgets | Shortcode | +| ---------------------------- | ---------------------------------- | +| {{< kofi/floating-button >}} check left-bottom corner | `{{}}` | +| {{< kofi/donation-panel >}} | `{{}}` | + +### Custom images + +You can also use your custom images: +```go +{{}} +``` + +{{< kofi/custom height=200 url="https://media.giphy.com/media/kgKFcQk6oa1WIdHNSl/giphy.gif" >}} + +For inspiration check here: +* https://more.ko-fi.com/brand-assets +* https://giphy.com/Kofi_button diff --git a/exampleSite/hugo.yaml b/exampleSite/hugo.yaml new file mode 100644 index 0000000..9277821 --- /dev/null +++ b/exampleSite/hugo.yaml @@ -0,0 +1,17 @@ +baseURL: '' +languageCode: 'en-us' +title: 'My New Hugo Site with Ko-fi me shortcodes' + +theme: + - PaperMod # your preferred theme + - kofi-shortcodes + +params: + # ko-fi config + kofi: + username: tgagor + +menu: + main: + - name: Demo + url: /posts/demo/ diff --git a/images/demo.png b/images/demo.png new file mode 100644 index 0000000..7502b74 Binary files /dev/null and b/images/demo.png differ diff --git a/layouts/partials/kofi_image.html b/layouts/partials/kofi_image.html new file mode 100644 index 0000000..74e78b1 --- /dev/null +++ b/layouts/partials/kofi_image.html @@ -0,0 +1,7 @@ + + + + {{ .alt_text }} + diff --git a/layouts/shortcodes/kofi/badge.html b/layouts/shortcodes/kofi/badge.html new file mode 100644 index 0000000..f74fef7 --- /dev/null +++ b/layouts/shortcodes/kofi/badge.html @@ -0,0 +1,50 @@ + + + + +{{- $user := "" -}} +{{- with $.Page.Site.Params.kofi.username -}} + {{- $user = . -}} +{{- end -}} +{{- with .Get "user" -}} + {{- $user = . -}} +{{- end -}} +{{- if not $user -}} + {{- errorf "shortcode kofi/badge: can't determine the Ko-fi username, use 'user' parameter in this shortcode or set it globally in the config.yaml under: `params.kofi.username'" -}} +{{- end -}} + +{{- $alt_text := "Buy Me a Coffee at ko-fi.com" -}} +{{- with .Get "alt_text" -}} + {{- $alt_text = . -}} +{{- end -}} + +{{- $height := "100" -}} +{{- with .Get "height" -}} + {{- $height = . -}} +{{- end -}} + +{{- $width := "271" -}} +{{- with .Get "width" -}} + {{- $width = . -}} +{{- end -}} + +{{- $image := "https://storage.ko-fi.com/cdn/brandasset/kofi_s_tag_white.png" -}} +{{- $colors := dict "white" "kofi_s_tag_white" "dark" "kofi_bg_tag_dark" "bg-white" "kofi_bg_tag_white" "bg-dark" "kofi_s_tag_dark" -}} +{{- $keys := slice -}} +{{- range $k, $_ := $colors -}} + {{- $keys = $keys | append $k -}} +{{- end -}} +{{- with .Get "style" -}} + {{- if not (in $keys .) -}} + {{- errorf "shortcode kofi/badge: parameter 'style' can only accept one of: %s" (delimit $keys ", ") -}} + {{- end -}} + {{- $image = printf "https://storage.ko-fi.com/cdn/brandasset/%s.png" (index $colors .) -}} +{{- end -}} + +{{ partial "kofi_image" (dict "user" $user "alt_text" $alt_text "height" $height "width" $width "url" $image) }} diff --git a/layouts/shortcodes/kofi/button.html b/layouts/shortcodes/kofi/button.html new file mode 100644 index 0000000..e704ad6 --- /dev/null +++ b/layouts/shortcodes/kofi/button.html @@ -0,0 +1,38 @@ + + + + +{{- $user := "" -}} +{{- with $.Page.Site.Params.kofi.username -}} + {{- $user = . -}} +{{- end -}} +{{- with .Get "user" -}} + {{- $user = . -}} +{{- end -}} +{{- if not $user -}} + {{- errorf "shortcode kofi/button: can't determine the Ko-fi username, use 'user' parameter in this shortcode or set it globally in the config.yaml under: `params.kofi.username'" -}} +{{- end -}} + +{{- $text := "Support Me on Ko-fi" -}} +{{- with .Get "text" -}} + {{- $text = . -}} +{{- end -}} + +{{- $color := "#29abe0" -}} +{{- with .Get "color" -}} + {{- $color = . -}} +{{- end -}} + +{{- if not (.Page.Store.Get "hasKofiWidget2") -}} +{{- .Page.Store.Set "hasKofiWidget2" true -}} + +{{- end -}} + + diff --git a/layouts/shortcodes/kofi/custom.html b/layouts/shortcodes/kofi/custom.html new file mode 100644 index 0000000..3071ca5 --- /dev/null +++ b/layouts/shortcodes/kofi/custom.html @@ -0,0 +1,36 @@ + + + + +{{- $user := "" -}} +{{- with $.Page.Site.Params.kofi.username -}} + {{- $user = . -}} +{{- end -}} +{{- with .Get "user" -}} + {{- $user = . -}} +{{- end -}} +{{- if not $user -}} + {{- errorf "shortcode kofi/custom: can't determine the Ko-fi username, use 'user' parameter in this shortcode or set it globally in the config.yaml under: `params.kofi.username'" -}} +{{- end -}} + +{{- $alt_text := "Buy Me a Coffee at ko-fi.com" -}} +{{- with .Get "alt_text" -}} + {{- $alt_text = . -}} +{{- end -}} + +{{- $height := "100" -}} +{{- with .Get "height" -}} + {{- $height = . -}} +{{- end -}} + +{{- with .Get "url" -}} + {{ partial "kofi_image" (dict "user" $user "alt_text" $alt_text "height" $height "url" .) }} +{{- else -}} + {{- errorf "shortcode kofi/url: parameter 'url' is required %s" . -}} +{{- end -}} diff --git a/layouts/shortcodes/kofi/donation-panel.html b/layouts/shortcodes/kofi/donation-panel.html new file mode 100644 index 0000000..686a30a --- /dev/null +++ b/layouts/shortcodes/kofi/donation-panel.html @@ -0,0 +1,33 @@ + + + + +{{- $user := "" -}} +{{- with $.Page.Site.Params.kofi.username -}} + {{- $user = . -}} +{{- end -}} +{{- with .Get "user" -}} + {{- $user = . -}} +{{- end -}} +{{- if not $user -}} + {{- errorf "shortcode kofi/donation-panel: can't determine the Ko-fi username, use 'user' parameter in this shortcode or set it globally in the config.yaml under: `params.kofi.username'" -}} +{{- end -}} + +{{- $bg_color := "#f9f9f9" -}} +{{- with .Get "bg_color" -}} + {{- $bg_color = . -}} +{{- end -}} + +{{- $height := "712" -}} +{{- with .Get "height" -}} + {{- $height = . -}} +{{- end -}} + + diff --git a/layouts/shortcodes/kofi/floating-button.html b/layouts/shortcodes/kofi/floating-button.html new file mode 100644 index 0000000..92e5cf1 --- /dev/null +++ b/layouts/shortcodes/kofi/floating-button.html @@ -0,0 +1,53 @@ + + + + +{{- $user := "" -}} +{{- with $.Page.Site.Params.kofi.username -}} + {{- $user = . -}} +{{- end -}} +{{- with .Get "user" -}} + {{- $user = . -}} +{{- end -}} +{{- if not $user -}} + {{- errorf "shortcode kofi/floating-button: can't determine the Ko-fi username, use 'user' parameter in this shortcode or set it globally in the config.yaml under: `params.kofi.username'" -}} +{{- end -}} + +{{- $type := "floating-chat" -}} +{{- with .Get "type" -}} + {{- $type = . -}} +{{- end -}} + +{{- $text := "Tip Me" -}} +{{- with .Get "text" -}} + {{- $text = . -}} +{{- end -}} + +{{- $bg_color := "#00b9fe" -}} +{{- with .Get "bg_color" -}} + {{- $bg_color = . -}} +{{- end -}} + +{{- $color := "#fff" -}} +{{- with .Get "color" -}} + {{- $color = . -}} +{{- end -}} + +{{- if not (.Page.Store.Get "hasKofiOverlay") -}} +{{- .Page.Store.Set "hasKofiOverlay" true -}} + +{{- end -}} + diff --git a/layouts/shortcodes/kofi/image1.html b/layouts/shortcodes/kofi/image1.html new file mode 100644 index 0000000..8f36d68 --- /dev/null +++ b/layouts/shortcodes/kofi/image1.html @@ -0,0 +1,45 @@ + + + + +{{- $user := "" -}} +{{- with $.Page.Site.Params.kofi.username -}} + {{- $user = . -}} +{{- end -}} +{{- with .Get "user" -}} + {{- $user = . -}} +{{- end -}} +{{- if not $user -}} + {{- errorf "shortcode kofi/image1: can't determine the Ko-fi username, use 'user' parameter in this shortcode or set it globally in the config.yaml under: `params.kofi.username'" -}} +{{- end -}} + +{{- $alt_text := "Buy Me a Coffee at ko-fi.com" -}} +{{- with .Get "alt_text" -}} + {{- $alt_text = . -}} +{{- end -}} + +{{- $height := "36" -}} +{{- with .Get "height" -}} + {{- $height = . -}} +{{- end -}} + +{{- $image := "https://storage.ko-fi.com/cdn/kofi1.png?v=3" -}} +{{- $colors := dict "blue" 1 "grey" 2 "red" 3 "green" 4 "dark" 5 -}} +{{- $keys := slice -}} +{{- range $k, $_ := $colors -}} + {{- $keys = $keys | append $k -}} +{{- end -}} +{{- with .Get "style" -}} + {{- if not (in $keys .) -}} + {{- errorf "shortcode kofi/image1: parameter 'style' can only accept one of: %s" (delimit $keys ", ") -}} + {{- end -}} + {{- $image = printf "https://storage.ko-fi.com/cdn/kofi%d.png?v=3" (index $colors .) -}} +{{- end -}} + +{{ partial "kofi_image" (dict "user" $user "alt_text" $alt_text "height" $height "url" $image) }} diff --git a/layouts/shortcodes/kofi/image2.html b/layouts/shortcodes/kofi/image2.html new file mode 100644 index 0000000..77d2e0c --- /dev/null +++ b/layouts/shortcodes/kofi/image2.html @@ -0,0 +1,41 @@ + + + + +{{- $user := "" -}} +{{- with $.Page.Site.Params.kofi.username -}} + {{- $user = . -}} +{{- end -}} +{{- with .Get "user" -}} + {{- $user = . -}} +{{- end -}} +{{- if not $user -}} + {{- errorf "shortcode kofi/image2: can't determine the Ko-fi username, use 'user' parameter in this shortcode or set it globally in the config.yaml under: `params.kofi.username'" -}} +{{- end -}} + +{{- $alt_text := "Buy Me a Coffee at ko-fi.com" -}} +{{- with .Get "alt_text" -}} + {{- $alt_text = . -}} +{{- end -}} + +{{- $height := "36" -}} +{{- with .Get "height" -}} + {{- $height = . -}} +{{- end -}} + +{{- $image := "https://storage.ko-fi.com/cdn/brandasset/kofi_button_blue.png" -}} +{{- $colors := slice "blue" "red" "stroke" "dark" -}} +{{- with .Get "style" -}} + {{- if not (in $colors .) -}} + {{- errorf "shortcode kofi/image2: parameter 'style' can only accept one of: %s" (delimit $colors ", ") -}} + {{- end -}} + {{- $image = printf "https://storage.ko-fi.com/cdn/brandasset/kofi_button_%s.png" . -}} +{{- end -}} + +{{ partial "kofi_image" (dict "user" $user "alt_text" $alt_text "height" $height "url" $image) }} diff --git a/layouts/shortcodes/kofi/logo.html b/layouts/shortcodes/kofi/logo.html new file mode 100644 index 0000000..458ebb9 --- /dev/null +++ b/layouts/shortcodes/kofi/logo.html @@ -0,0 +1,45 @@ + + + + +{{- $user := "" -}} +{{- with $.Page.Site.Params.kofi.username -}} + {{- $user = . -}} +{{- end -}} +{{- with .Get "user" -}} + {{- $user = . -}} +{{- end -}} +{{- if not $user -}} + {{- errorf "shortcode kofi/logo: can't determine the Ko-fi username, use 'user' parameter in this shortcode or set it globally in the config.yaml under: `params.kofi.username'" -}} +{{- end -}} + +{{- $alt_text := "Buy Me a Coffee at ko-fi.com" -}} +{{- with .Get "alt_text" -}} + {{- $alt_text = . -}} +{{- end -}} + +{{- $height := "100" -}} +{{- with .Get "height" -}} + {{- $height = . -}} +{{- end -}} + +{{- $image := "https://storage.ko-fi.com/cdn/brandasset/logo_white_stroke.png" -}} +{{- $colors := dict "logo" "logo_white_stroke" "mug" "kofi_s_logo_nolabel" "pixel" "kofi_p_logo_nolabel" -}} +{{- $keys := slice -}} +{{- range $k, $_ := $colors -}} +{{- $keys = $keys | append $k -}} +{{- end -}} +{{- with .Get "style" -}} + {{- if not (in $keys .) -}} + {{- errorf "shortcode kofi/logo: parameter 'style' can only accept one of: %s" (delimit $keys ", ") -}} + {{- end -}} + {{- $image = printf "https://storage.ko-fi.com/cdn/brandasset/%s.png" (index $colors .) -}} +{{- end -}} + +{{ partial "kofi_image" (dict "user" $user "alt_text" $alt_text "height" $height "url" $image) }}