markup example for #8 🏌️‍♂️

.github/FUNDING.yml

@@ -0,0 +1,2 @@
+custom: ['https://www.paypal.me/janraasch/7,00']
+github: ['janraasch']

.github/workflows/auto-merge.yml

@@ -1,41 +0,0 @@
-# see https://gist.github.com/xt0rted/46475099dc0a70ba63e16e3177407872
-
-name: Dependabot auto-merge
-
-on:
-  pull_request:
-    branches:
-      - master
-
-permissions:
-  contents: read
-  pull-requests: read
-
-jobs:
-  auto-merge:
-    runs-on: ubuntu-latest
-
-    if: github.actor == 'dependabot[bot]'
-
-    steps:
-      - name: Create token
-        id: create_token
-        uses: tibdex/github-app-token@v2
-        with:
-          app_id: ${{ secrets.BIG_MERGER_APP_ID }}
-          private_key: ${{ secrets.BIG_MERGER_PRIVATE_KEY }}
-
-      - name: Dependabot metadata
-        id: dependabot-metadata
-        uses: dependabot/fetch-metadata@v2
-        with:
-          github-token: "${{ secrets.GITHUB_TOKEN }}"
-
-      - name: Authenticate cli
-        run: echo "${{ steps.create_token.outputs.token }}" | gh auth login --with-token
-
-      - name: Enable auto-merge for Dependabot PRs
-        if: contains(fromJSON('["version-update:semver-patch", "version-update:semver-minor"]'), steps.dependabot-metadata.outputs.update-type)
-        run: gh pr merge --auto --squash "$PR_URL"
-        env:
-          PR_URL: ${{github.event.pull_request.html_url}}

.github/workflows/ci.yml

@@ -10,39 +10,23 @@ on:
 
 jobs:
   build:
-    name: Build
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-18.04
 
     steps:
     - name: Checkout
-      uses: actions/checkout@v4
+      uses: actions/checkout@v2
 
     - name: Setup Hugo
-      uses: peaceiris/actions-hugo@v3.0.0
+      uses: peaceiris/actions-hugo@v2
       with:
         hugo-version: latest
 
     - name: Build local ./exampleSite
       run: hugo --minify --gc --destination ../public --source ./exampleSite --themesDir ../.. --baseURL https://janraasch.github.io/hugo-bearblog/
 
-    - name: Upload Artifact
-      uses: actions/upload-artifact@v4
+    - name: Deploy to GitHub Pages
+      if: github.event_name == 'push'
+      uses: peaceiris/actions-gh-pages@v3
       with:
-        name: build
-        path: ./public
-
-  deploy:
-    needs: build
-    name: Deploy to GitHub Pages
-    runs-on: ubuntu-latest
-    if: github.event_name == 'push'
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/download-artifact@v4
-        with:
-          name: build
-          path: ./public
-      - uses: peaceiris/actions-gh-pages@v4.0.0
-        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./public
+        github_token: ${{ secrets.GITHUB_TOKEN }}
+        publish_dir: ./public

README.md

@@ -1,4 +1,4 @@
-# Hugo ʕ•ᴥ•ʔ Bear Blog ![Test](https://github.com/janraasch/hugo-bearblog/workflows/CI/badge.svg?branch=master&event=push)
+# Hugo ʕ•ᴥ•ʔ Bear Blog ![Test](https://github.com/janraasch/hugo-bearblog/workflows/CI/badge.svg?branch=master&event=push) [![Pay me][paypal-svg]][paypal-dot-me] [![Sponsor me][github-sponsors-svg]][github-sponsors]
 
 🧸 A [Hugo](https://gohugo.io/)-theme based on [Bear Blog](https://bearblog.dev).
 
@@ -16,21 +16,27 @@ For a current & working demo of this theme, please check out https://janraasch.g
 
 When the user's browser is running »dark mode«, the dark color scheme will be used automatically. The default is the light/white color scheme. Check out the [`style.html`](https://github.com/janraasch/hugo-bearblog/blob/master/layouts/partials/style.html)-file for the implementation.
 
+## Sponsor 💟
+
+Support my work on this theme via [GitHub Sponsors][github-sponsors] (recurring) or [PayPal][paypal-dot-me] (one-time).
+
+[![GitHub Stats](https://github-readme-stats.vercel.app/api/?username=janraasch)][github-sponsors]
+
 ## Installation
 
 If you already have a Hugo site on your machine, you can simply add this theme via
 
-```bash
+```
 git submodule add https://github.com/janraasch/hugo-bearblog.git themes/hugo-bearblog
 ```
 
-Then, adjust the `hugo.toml` as detailed below.
+Then, adjust the `config.toml` as detailed below.
 
 For more information, read the official [setup guide][hugo-setup-guide] of Hugo.
 
-## Adjust configuration / hugo.toml
+## Adjust configuration / config.toml
 
-Please check out the [hugo.toml](https://github.com/janraasch/hugo-bearblog/blob/master/exampleSite/hugo.toml) included in the [exampleSite](https://github.com/janraasch/hugo-bearblog/tree/master/exampleSite) of this theme.
+Please check out the [config.toml](https://github.com/janraasch/hugo-bearblog/blob/master/exampleSite/config.toml) included in the [exampleSite](https://github.com/janraasch/hugo-bearblog/tree/master/exampleSite) of this theme.
 
 ## Content & structure
 
@@ -48,7 +54,7 @@ The contents of the `index`-page may be changed by editing your `content/_index.
 
 You can add **a new page** via running
 
-```bash
+```
 hugo new my-new-page.md
 ```
 
@@ -56,7 +62,7 @@ hugo new my-new-page.md
 
 You can add **a new blog-post** via running
 
-```bash
+```
 hugo new blog/my-new-post.md
 ```
 
@@ -67,12 +73,7 @@ Add a `custom_head.html`-file to your `layouts/partials`-directory. In there you
 ## Issues / Feedback / Contributing
 Please use [GitHub issues](https://github.com/janraasch/hugo-bearblog/issues) and [Pull Requests](https://github.com/janraasch/hugo-bearblog/pulls).
 
-## Development
-Run the `exampleSite` locally via
-
-```bash
-hugo server --source ./exampleSite --themesDir ../..
-```
+If you do not have a GitHub-account, please hit me up via e-mail (see [janraasch.com](https://www.janraasch.com)).
 
 ## Special Thanks 🎁
 
@@ -81,6 +82,10 @@ A special thank you goes out to [Herman](https://herman.bearblog.dev), for creat
 ## License
 [MIT License](http://en.wikipedia.org/wiki/MIT_License) © [Jan Raasch](https://www.janraasch.com)
 
+[paypal-dot-me]: https://www.paypal.me/janraasch/7,00
+[github-sponsors]: https://github.com/sponsors/janraasch
+[paypal-svg]: https://img.shields.io/badge/onetime-donation-11dde2.svg?logo=paypal
+[github-sponsors-svg]: https://img.shields.io/badge/recurring-sponsorship-ee4aaa.svg?logo=github
 [hugo-setup-guide]: https://gohugo.io/getting-started/installing
 [light-screenshot]: https://raw.githubusercontent.com/janraasch/hugo-bearblog/master/images/screenshot.png
 [dark-screenshot]: https://raw.githubusercontent.com/janraasch/hugo-bearblog/master/images/screenshot-dark.png

archetypes/blog.md

@@ -2,11 +2,6 @@
 title = "{{ replace .Name "-" " " | title }}"
 date = "{{ .Date }}"
 
-#
-# lastmod is optional
-#
-# lastmod = "Timestamp that you edit this blog"
-
 #
 # description is optional
 #

assets/js/darkmode.js

@@ -1,28 +0,0 @@
-/* Main darkmode script here */
-function darkmode() {
-    if (localStorage.getItem('dark-mode') === 'false') {
-        darkmode_enable();
-    } else if (localStorage.getItem('dark-mode') === null) {
-        darkmode_enable();
-    } else {
-        darkmode_disable();
-    }
-}
-
-function darkmode_enable()  {
-    document.body.classList.add("dark-mode");
-    localStorage.setItem('dark-mode', 'true');
-}
-
-function darkmode_disable() {
-    document.body.classList.remove("dark-mode");
-    localStorage.setItem('dark-mode', 'false');
-}
-
-if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches && localStorage.getItem('dark-mode') === null) {
-    localStorage.setItem('dark-mode', 'true');
-}
-
-document.addEventListener("DOMContentLoaded", function() {
-    document.getElementById("dark-mode-button").addEventListener("click", darkmode);
-});

assets/js/darkmode_load.js

@@ -1,5 +0,0 @@
-/* darkmode_enable is defined in darkmode.js(should be in the same directory as this file)  */
-/* Must be executed after document.body is finished, else there would be error :)           */
-if (localStorage.getItem('dark-mode') === 'true') {
-    darkmode_enable()
-}

assets/js/random_color.js

@@ -1,26 +0,0 @@
-/* random text color on blog listing */
-const links = document.querySelectorAll('.random-color');
-
-// To avoid too bright and too dark color being generated
-function getRandomColor(minBrightness = 100, maxBrightness = 230) {
-    // Generate random color components within a specific brightness range
-    let red = Math.floor(Math.random() * (maxBrightness - minBrightness) + minBrightness);
-    let green = Math.floor(Math.random() * (maxBrightness - minBrightness) + minBrightness);
-    let blue = Math.floor(Math.random() * (maxBrightness - minBrightness) + minBrightness);
-
-    // Convert components to hexadecimal string format
-    red = red.toString(16).padStart(2, '0');
-    green = green.toString(16).padStart(2, '0');
-    blue = blue.toString(16).padStart(2, '0');
-
-    return `#${red}${green}${blue}`;
-}
-
-
-function setRandomColors() {
-    links.forEach(link => {
-        link.style.color = getRandomColor();
-    });
-}
-
-window.onload = setRandomColors;

exampleSite/config.toml

@@ -1,5 +1,4 @@
-# Base URL used when generating links to your pages
-# Set to the URL for your site
+
 baseURL = "https://example.com"
 
 # The name of this wonderful theme ;-).
@@ -44,14 +43,7 @@ ignoreErrors = ["error-disable-taxonomy"]
   # You can turn it off, but we would really appreciate if you don’t :-).
   # hideMadeWithLine = true
 
-  # By default, this theme displays dates with a format like "02 Jan, 2006", but
-  # you can customize it by setting the `dateFormat` param in your site's config
-  # file. See [Hugo's Format function docs](https://gohugo.io/functions/format/)
-  # for details. An example TOML config that uses [ISO
-  # 8601](https://en.wikipedia.org/wiki/ISO_8601) format:
-  # dateFormat = "2006-01-02"
-
-  # based on solutions by papermod : https://github.com/adityatelange/hugo-PaperMod/issues/89
-  # disable integrity on script,stylesheet linking
-  [params.assets]
-  #  disableFingerprinting = true
+[markup]
+    [markup.goldmark]
+        [markup.goldmark.renderer]
+            unsafe = true

exampleSite/content/_index.md

@@ -1,12 +1,27 @@
-+++
-# This title is used as the og:title on Hugo's internal
-# opengraph structured data template on the home page.
-# See https://ogp.me/ and https://gohugo.io/templates/internal#open-graph.
-title = "Hugo ʕ•ᴥ•ʔ Bear"
-+++
-
 # A match made in heaven
 
+I would like for people to express interest in my services by clicking »Sign up«:
+
+<form class="signup" id="signup_form" method="POST">
+<p>
+    <label for="name">Name:</label>
+    <input type="text" name="name" placeholder="Name" required="" id="name">
+</p>
+<p>
+    <label for="email">E-mail:</label>
+    <input type="email" name="email" placeholder="E-mail address" required="" id="email">
+</p>
+<p>
+    <label for="service">Service interested in:</label>
+    <input type="text" name="service" placeholder="Service" id="service">
+</p>
+<p>
+    <button type="submit">Sign Up</button>
+</p>
+</form>
+
+---
+
 There is a website obesity crisis. Bloated websites full of scripts, ads, and trackers are slowing your readers down every time they try to read your well-crafted content.
 
 Hugo Bear Blog is all you need to build a fantastic and optimized site or blog. It works perfectly on **any** viewing device. All you need to focus on is writing good content.

layouts/_default/baseof.html

@@ -15,15 +15,7 @@
   {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
   {{ end -}}
 
-  <!-- External Script, Stylesheet linking -->
-  {{- /* CSS stylesheet */}}
-  {{- $stylesheet := (resources.Get "css/style.css") | resources.Minify }}
-  {{- if not site.Params.assets.disableFingerprinting }}
-    {{- $stylesheet := $stylesheet | fingerprint }}
-    <link crossorigin="anonymous" href="{{ $stylesheet.RelPermalink }}" integrity="{{ $stylesheet.Data.Integrity }}" rel="preload stylesheet" as="style">
-  {{ else }}
-    <link crossorigin="anonymous" href="{{ $stylesheet.RelPermalink }}" rel="preload stylesheet" as="style">
-  {{ end }}
+  {{- partial "style.html" . -}}
 
   <!-- A partial to be overwritten by the user.
   Simply place a custom_head.html into
@@ -32,18 +24,6 @@
 </head>
 
 <body>
-
-  {{- /* Darkmode Javascript */}}
-  {{- $darkmode_script := (resources.Get "js/darkmode.js") }}
-  {{- $darkmode_load_script := (resources.Get "js/darkmode_load.js") }}
-  {{- $darkmode_combined := slice $darkmode_script $darkmode_load_script | resources.Concat "js/darkmode.js" | resources.Minify }}
-  {{- if not site.Params.assets.disableFingerprinting }}
-    {{- $darkmode_combined := $darkmode_combined | fingerprint }}
-    <script crossorigin="anonymous" src="{{ $darkmode_combined.RelPermalink }}" integrity="{{ $darkmode_combined.Data.Integrity }}"></script>
-  {{ else }}
-    <script crossorigin="anonymous" src="{{ $darkmode_combined.RelPermalink }}"></script>
-  {{ end }}
-
   <header>
     {{- partial "header.html" . -}}
   </header>
@@ -52,11 +32,6 @@
   </main>
   <footer>
     {{- partial "footer.html" . -}}
-
-    <!-- A partial to be overwritten by the user.
-    Simply place a custom_footer.html into
-    your local /layouts/partials-directory -->
-    {{- partial "custom_footer.html" -}}
   </footer>
 
   <!-- A partial to be overwritten by the user.

layouts/_default/list.html

@@ -3,22 +3,20 @@
   {{ if .Data.Singular }}
   <h3 style="margin-bottom:0">Filtering for "{{ .Title }}"</h3>
   <small>
-    <a href="{{ "blog" | relURL }}">Remove filter</a>
+    <a href="{{ "/blog" | relURL }}">Remove filter</a>
   </small>
   {{ end }}
-  <!-- blog/_index.md content will goes here. -->
-  {{ .Content }}
   <ul class="blog-posts">
     {{ range .Pages }}
     <li>
       <span>
         <i>
           <time datetime='{{ .Date.Format "2006-01-02" }}' pubdate>
-            {{ .Date.Format (default "02 Jan, 2006" .Site.Params.dateFormat) }}
+            {{ .Date.Format "02 Jan, 2006" }}
           </time>
         </i>
       </span>
-      <a class="random-color blog-link" href="{{ .Permalink }}">{{ .Title }}</a>
+      <a href="{{ .Permalink }}">{{ .Title }}</a>
     </li>
     {{ else }}
     <li>
@@ -26,16 +24,6 @@
     </li>
     {{ end }}
   </ul>
-
-  {{- /* Random Color Script */}}
-  {{- $random_color_script := (resources.Get "js/random_color.js") | resources.Minify }}
-  {{- if not site.Params.assets.disableFingerprinting }}
-    {{- $random_color_script := $random_color_script | fingerprint }}
-    <script async crossorigin="anonymous" src="{{ $random_color_script.RelPermalink }}" integrity="{{ $random_color_script.Data.Integrity }}"></script>
-  {{ else }}
-    <script async crossorigin="anonymous" src="{{ $random_color_script.RelPermalink }}"></script>
-  {{ end }}
-
   {{ if .Data.Singular }}
   {{else}}
     <small>

layouts/_default/single.html

@@ -4,14 +4,8 @@
 <p>
   <i>
     <time datetime='{{ .Date.Format "2006-01-02" }}' pubdate>
-      {{ .Date.Format (default "02 Jan, 2006" .Site.Params.dateFormat) }}
+      {{ .Date.Format "02 Jan, 2006" }}
     </time>
-    {{ if ne .Lastmod .Date }}
-      / <b>EDIT : 
-        <time datetime='{{ .Lastmod.Format "2006-01-02" }}'>
-        {{ .Lastmod.Format (default "02 Jan, 2006" .Site.Params.dateFormat) }}
-        </time></b>
-    {{ end }}
   </i>
 </p>
 {{ end }}{{ end }}

layouts/partials/custom_footer.html

@@ -1,3 +0,0 @@
-  <!-- A partial to be overwritten by the user.
-  Simply place a custom_footer.html into
-  your local /layouts/partials-directory -->

layouts/partials/header.html

@@ -1,4 +1,4 @@
-<a href="{{ "" | relURL }}" class="title">
+<a href="{{ "/" | relURL }}" class="title">
   <h2>{{ .Site.Title }}</h2>
 </a>
 <nav>{{- partial "nav.html" . -}}</nav>

layouts/partials/nav.html

@@ -1,10 +1,7 @@
-<a href="{{ "" | relURL }}">Home</a>
+<a href="{{ "/" | relURL }}">Home</a>
 {{ range .Site.Menus.main }}
 <a href="{{ .URL }}">{{ .Name }}</a>
 {{ end }}
 {{ with .Site.GetPage "/blog" }}
-<a href="{{ "blog" | relURL }}">Blog</a>
+<a href="{{ "/blog" | relURL }}">Blog</a>
 {{ end }}
-<a id="dark-mode-button">
-    <span>Toggle-Dark-Mode</span>
-  </a> 

layouts/shortcodes/rawhtml.html

@@ -1,2 +0,0 @@
-<!-- raw html -->
-{{.Inner}}

package.json

@@ -5,7 +5,7 @@
   "description": "🧸 A [Hugo](https://gohugo.io/)-theme based on [Bear Blog](https://bearblog.dev).",
   "main": "index.js",
   "devDependencies": {
-    "js-beautify": "^1.15.1"
+    "js-beautify": "^1.13.5"
   },
   "scripts": {
     "test": "npm run beautify",

theme.toml

@@ -6,10 +6,9 @@ license = "MIT"
 licenselink = "https://github.com/janraasch/hugo-bearblog/blob/master/LICENSE"
 description = "A Hugo theme based on »Bear Blog«. Free, no-nonsense, super-fast blogging. »Bear Blog« now includes a dark color scheme to support dark mode!"
 homepage = "https://github.com/janraasch/hugo-bearblog"
-demosite = "https://janraasch.github.io/hugo-bearblog/"
 tags = ["blog", "responsive", "minimal", "seo", "clean", "simple", "light", "minimalist", "mobile", "fast", "white", "minimalistic", "reading", "dark mode"]
 features = ["favicon", "seo", "no stylesheets", "no javascript", "rss", "dark mode"]
-min_version = "v0.110.0"
+min_version = "0.73.0"
 # https://gohugo.io/content-management/taxonomies#default-taxonomies
 # https://gohugo.io/templates/taxonomy-templates/#example-list-tags-in-a-single-page-template
 # https://gohugo.io/templates/taxonomy-templates/#example-list-all-site-tags