Merge branch 'hugo-migration' of https://github.com/bit-jkraushaar/bit-jkraushaar.github.io into hugo-migration

Author: bit-jkraushaar

.github/workflows/hugo.yaml

@@ -0,0 +1,78 @@
+# Sample workflow for building and deploying a Hugo site to GitHub Pages
+name: Deploy Hugo site to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches:
+      - hugo-migration
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+# Default to bash
+defaults:
+  run:
+    shell: bash
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    env:
+      HUGO_VERSION: 0.120.4
+    steps:
+      - name: Install Hugo CLI
+        run: |
+          wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
+          && sudo dpkg -i ${{ runner.temp }}/hugo.deb          
+      - name: Install Dart Sass
+        run: sudo snap install dart-sass
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          submodules: recursive
+          fetch-depth: 0
+      - name: Setup Pages
+        id: pages
+        uses: actions/configure-pages@v5
+      - name: Install Node.js dependencies
+        run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
+      - name: Build with Hugo
+        env:
+          HUGO_CACHEDIR: ${{ runner.temp }}/hugo_cache
+          HUGO_ENVIRONMENT: production
+          TZ: Europe/Berlin
+        run: |
+          hugo \
+            --gc \
+            --minify \
+            --baseURL "${{ steps.pages.outputs.base_url }}/"          
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./public
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitmodules

@@ -0,0 +1,6 @@
+[submodule "themes/ananke"]
+	path = themes/ananke
+	url = https://github.com/theNewDynamic/gohugo-theme-ananke
+[submodule "themes/hugo-theme-stack"]
+	path = themes/hugo-theme-stack
+	url = https://github.com/CaiJimmy/hugo-theme-stack/

.hugo_build.lock

@@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+  "baseUrl": ".",
+  "paths": {
+   "*": [
+    "../themes/hugo-theme-stack/assets/*"
+   ]
+  }
+ }
+}

assets/img/avatar.jpeg

@@ -0,0 +1,92 @@
+---
+date: "2020-05-27T16:48:36Z"
+title: Hallo Welt
+description: "Hallo zusammen! Ich bin Jochen Kraushaar, ein leidenschaftlicher Softwareentwickler und Architekt. Dies ist mein erster Blogartikel, und wie könnte er besser beginnen als mit einem klassischen Hallo Welt? In diesem Blog teile ich meine Best Practices und Erfahrungen aus dem Alltag, um mir selbst und vielleicht auch anderen Entwicklern das Leben zu erleichtern. Erfahrt mehr über meine Reise und den Technologie-Stack, der diesen Blog antreibt. Willkommen bei Jochens Cache!"
+image: header.webp
+---
+
+Das hier ist mein erster Artikel in diesem neuen Blog.
+Und wie es sich für einen Blog Rund um Software Entwicklung gehört, beginnt er natürlich mit *Hallo Welt*.
+
+Mein Name ist Jochen Kraushaar.
+Ich arbeite als Software Entwickler und Architekt.
+Diesen Blog schreibe ich vor allem für mich selbst.
+Er dient mir als Gedächtnisstütze, um Best Practices aus meinem Alltag wiederzufinden, ohne erneut eine aufwändige Recherche durchzuführen.
+Oder mit anderen Worten: Er dient mir als Cache - Jochens Cache.
+
+# Anforderungen
+
+Als Software Architekt habe ich zu Beginn dieses Projekts Anforderungen definiert:
+
+* Ich möchte Tools einsetzen, die ich auch in meinem normalen Arbeitsalltag verwende.
+* Die Seite soll schnell sein und auf unnötiges JavaScript verzichten.
+* Hin und wieder möchte ich Codeschnipsel ohne großen Aufwand einbinden können.
+* Aus Sicherheitsgründen soll die Seite so statisch wie möglich sein.
+* Gleichzeitig will ich mich aber auch nicht mit dem Design herumschlagen, sondern mich auf den Inhalt konzentrieren.
+* Der Build der Seite soll automatisiert sein.
+
+# Erster Versuch: Hugo
+
+Bei meinen Recherchen bin ich auf diesen Beitrag gestoßen: [How to create a blog with AsciiDoc](https://opensource.com/article/17/8/asciidoc-web-development)
+
+Die Autorin kombiniert [Hugo][hugo] mit [AsciiDoc][asciidoc] bzw. [Asciidoctor][asciidoctor] um so einen Blog zu generieren, der dann über [GitHub Pages][github-pages] gehostet wird.
+Da ich AsciiDoc bereits in meinem Entwickler-Alltag in der [docToolchain](https://doctoolchain.github.io/docToolchain/) einsetze, wäre dieser Ansatz für mich perfekt.
+So könnte ich meine Blogbeiträge in einem Editor (in meinem Fall [Atom][atom]) schreiben und durch Hugo daraus eine statische Seite generieren lassen.
+Darüber hinaus bietet mir Hugo auch noch verschiedene Themes und andere Features an, die ich bei einer rein statischen Seite selbst erstellen müsste.
+
+Leider musste ich dann feststellen, dass es zwar grundsätzlich eine Integration in Github Pages gibt, diese aber einen separaten Build erfordert.
+Etwas ernüchtert recherchierte ich weiter.
+
+# Zweiter Versuch: Jekyll
+
+Beim genaueren Studium der GitHub Pages Dokumentation fand ich schnell heraus, dass dort bevorzugt [Jekyll][jekyll] eingesetzt wird.
+Hier wird der Build direkt von GitHub Pages übernommen.
+Leider schränkt GitHub Pages die möglichen Jekyll Plugins ein.
+In meinem Fall bedeutet das:
+
+* Kein AsciiDoc-Support (stattdessen wird [Markdown][markdown] verwendet)
+* Sehr eingeschränkter I18N-Support
+
+Auf der anderen Seite ist mir eine reibungslose Integration in GitHub Pages sehr wichtig.
+Zudem ist die Struktur des Projekts und der Templates etwas einfacher zu verstehen.
+Meine Wahl fiel daher auf Jekyll als Generator.
+Als Editor nutze ich auch in diesem Fall [Atom][atom].
+
+# Mein Technologie-Stack
+
+Mein Technologie-Stack für diesen Blog sieht nun so aus:
+
+* [Ruby][ruby] - als Voraussetzung für Jekyll
+* [Markdown][markdown]
+* [Jekyll][jekyll]
+* [Atom][atom]
+
+So ausgestattet fehlte mir nur noch ein Impressum und eine Datenschutzerklärung.
+Und natürlich musste ich die Anwendung noch irgendwie installieren.
+
+# GitHub Pages
+
+[GitHub Pages][github-pages] bietet sich gerade für Blogs im privaten Umfeld an.
+Mit einer Größe von 1 GB für die Seite und 100 GB für die Bandbreite sollte GitHub Pages für so ziemlich jeden privaten Blog geeignet sein.
+Das alles ist auch noch kostenlos.
+
+Zudem gibt es eine gute [Getting Started](https://help.github.com/en/github/working-with-github-pages/getting-started-with-github-pages) Dokumentation und eine Dokumentation zur [Integration mit Jekyll](https://help.github.com/en/github/working-with-github-pages/setting-up-a-github-pages-site-with-jekyll).
+
+Ich bin außerdem ein großer Fan der Idee, den Quellcode dieser Seite über GitHub [bereitzustellen](https://github.com/bit-jkraushaar/bit-jkraushaar.github.io).
+
+# Hello World
+
+Damit ist dieses Projekt bereit, das Licht der Welt zu erblicken. In diesem Sinne:
+
+> Hello World
+
+-- *Every Programming Language ever*
+
+[hugo]: https://gohugo.io/
+[asciidoc]: https://asciidoc.org/
+[asciidoctor]: https://asciidoctor.org/
+[github-pages]: https://pages.github.com/
+[atom]: https://atom.io/
+[ruby]: https://www.ruby-lang.org/
+[jekyll]: https://jekyllrb.com/
+[markdown]: https://daringfireball.net/projects/markdown/

assets/img/avatar.png

@@ -0,0 +1,67 @@
+---
+date: "2020-05-30T08:19:00Z"
+title: Custom Progress Bar für Wizards
+description: "Vor kurzem habe ich mich der Herausforderung gestellt, einen Wizard mit einem Fortschrittsbalken komplett ohne Komponentenframework zu erstellen. Dafür habe ich ausschließlich HTML und CSS verwendet. Der Clou: Der Fortschrittsbalken basiert auf dem CSS clip-path Property, mit dem sich komplexe Formen einfach gestalten lassen. In diesem Beitrag zeige ich, wie ich ein Oktagon als Basisform für den Fortschrittsbalken verwendet habe und gebe Einblicke in die Umsetzung und mögliche Erweiterungen."
+image: header.png
+---
+
+Kürzlich stand ich vor der Herausforderung einen Wizard mit Fortschrittsbalken ohne Komponentenframework zu erstellen.
+Für den Fortschrittsbalken verwendete ich daher ausschließlich HTML und CSS.
+
+Die Grundlage für den Fortschrittsbalken ist das CSS `clip-path` Property.
+Dieses Property wird für [Basic Shapes](https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape) von allen modernen Browsern [unterstützt](https://caniuse.com/#feat=mdn-css_properties_clip-path_basic_shape).
+Mit der `polygon()` Funktion lassen sich relativ einfach komplexe Formen erstellen.
+Glücklicherweise gibt es hierfür bereits einen [Online Editor](https://bennettfeely.com/clippy/), der mir die Gestaltung erleichterte.
+
+# Beispiel
+
+Für mein Beispiel verwende ich ein Oktagon als Grundform.
+
+```css
+.step {
+  -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
+  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
+
+  background: red;
+
+  width: 100px;
+  height: 50px;
+
+  line-height: 50px;
+  text-align: center;
+}
+```
+
+Der Hintergrund kann frei gestaltet werden, ebenso die Höhe und Breite.
+Die beiden Properties `line-height` und `text-align` dienen zur Zentrierung der Beschriftung.
+
+Zusätzlich soll bei einem Fortschrittsbalken innerhalb eines Wizards der aktive Schritt markiert werden.
+In meinem Beispiel verwende ich für den aktiven Schritt eine andere Hintergrundfarbe:
+
+```css
+.step.active {
+  background: orange;
+}
+```
+
+Das dazu gehörende HTML sieht z.B. so aus:
+
+```html
+<div style="display: flex">
+  <div class="step">
+    Schritt 1
+  </div>
+  <div class="step active">
+    Schritt 2
+  </div>
+  <div class="step">
+    Schritt 3
+  </div>
+</div>
+```
+
+Dieses Beispiel steht auch auf JSFiddle bereit: [Beispiel](https://jsfiddle.net/a0jz8xwu/)
+
+# Mögliche Erweiterungen
+
+Über die CSS Selektoren [:first-child](https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child), [:last-child](https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child) und [:not](https://developer.mozilla.org/en-US/docs/Web/CSS/:not) lässt sich die Form des ersten bzw. letzten Schritts im Fortschrittsbalken anpassen.