Merge pull request #327 from gethinode/timeline

Enhance timeline component
Merge branch 'main' into timeline
2025-10-08 18:44:24 +00:00 · 2023-07-04 07:05:56 +02:00 · 2023-07-04 06:40:56 +02:00 · 2023-07-04 06:32:28 +02:00 · 2023-07-04 06:32:06 +02:00 · 2023-07-04 06:31:33 +02:00
10 changed files with 429 additions and 72 deletions
--- a/assets/scss/app.scss
+++ b/assets/scss/app.scss
@@ -79,6 +79,7 @@
@import "components/search.scss";
@import "components/sidebar.scss";
@import "components/syntax.scss";
+@import "components/timeline.scss";
@import "components/toc.scss";
@import "components/vimeo.scss";
@import "common/animation.scss";
--- a/assets/scss/components/_syntax.scss
+++ b/assets/scss/components/_syntax.scss
@@ -13,7 +13,7 @@
 }

 .preview-background {
-    background-color: var(--bs-secondary-bg) if($enable-important-utilities, !important, null);
+    background-color: var(--bs-dark-bg-subtle) if($enable-important-utilities, !important, null);
 }

@if $enable-dark-mode {
--- a/assets/scss/components/_timeline.scss
+++ b/assets/scss/components/_timeline.scss
@@ -0,0 +1,165 @@
+// scss-docs-start timeline
+$connector-radius: 0.8rem;
+$semi-circle-radius: 8rem;
+$semi-circle-border: 0.2rem;
+
+:root {
+    --timeline-highlight: var(--bs-primary);
+    --timeline-icon-radius: #{$semi-circle-radius};
+    --timeline-offset: 50%;
+    --timeline-connector-bg: var(--bs-body-bg);
+}
+
+@each $state in map-keys($theme-colors) {
+    .timeline-#{$state} {
+      --timeline-highlight: var(--#{$prefix}#{$state});
+    }
+
+    .timeline-bg-#{$state} {
+        --timeline-connector-bg: var(--#{$prefix}#{$state}-bg-subtle);
+      }
+  }
+
+// scss-docs-end timeline
+
+.timeline, .timeline-sm {
+    position: relative;
+}
+
+.timeline-sm {
+    --timeline-icon-radius: calc(#{$semi-circle-radius} / 2);
+    --timeline-offset: 25%
+}
+
+.timeline::before, .timeline-sm::before {
+    content: "";
+    width: 2 * $semi-circle-border;
+    margin: 0 auto;
+    background: var(--bs-body-color);
+    position: absolute;
+    inset: 0;
+}
+
+.timeline-sm::before {
+    margin: 0 calc(var(--timeline-offset) - #{$semi-circle-border});
+}
+
+.timeline-semi-circle-start, .timeline-semi-circle-end {
+    width: var(--timeline-icon-radius);
+    height: var(--timeline-icon-radius);
+    border-radius: 100%;
+    position: relative;
+}
+
+.timeline-semi-circle-start {
+    left: -$semi-circle-border;
+}
+
+.timeline-semi-circle-end {
+    left: $semi-circle-border;
+}
+
+.timeline-semi-circle-start::before {
+    content: "";
+    width: var(--timeline-icon-radius);
+    height: var(--timeline-icon-radius);
+    border-radius: 100%;
+    border: $semi-circle-border solid;
+    position: absolute;
+    border-color: transparent var(--timeline-highlight) var(--timeline-highlight) var(--timeline-highlight);
+    transform: rotate(-90deg);
+}
+
+.timeline-semi-circle-start::after {
+    content: "";
+    left: 0;
+    top: 0;
+    width: var(--timeline-icon-radius);
+    height: var(--timeline-icon-radius);
+    border-radius: 100%;
+    border: $semi-circle-border solid;
+    position: absolute;
+    border-color: var(--timeline-highlight) var(--timeline-highlight) var(--timeline-highlight) transparent;
+    transform: rotate(-45deg);
+}
+
+.timeline-semi-circle-end::before {
+    content: "";
+    width: var(--timeline-icon-radius);
+    height: var(--timeline-icon-radius);
+    border-radius: 100%;
+    border: $semi-circle-border solid;
+    position: absolute;
+    border-color: transparent var(--timeline-highlight) var(--timeline-highlight) var(--timeline-highlight);
+    transform: rotate(-225deg);
+}
+
+.timeline-semi-circle-end::after {
+    content: "";
+    left: 0;
+    top: 0;
+    width: var(--timeline-icon-radius);
+    height: var(--timeline-icon-radius);
+    border-radius: 100%;
+    border: $semi-circle-border solid;
+    position: absolute;
+    border-color: var(--timeline-highlight) var(--timeline-highlight) var(--timeline-highlight) transparent;
+    transform: rotate(-180deg);
+}
+
+.timeline-description-text-start {
+    border-bottom: $semi-circle-border solid var(--timeline-highlight);
+    margin-right: 2 * $connector-radius;
+}
+
+.timeline-description-text-end {
+    border-bottom: $semi-circle-border solid var(--timeline-highlight);
+    margin-left: 2 * $connector-radius;
+}
+
+.timeline-panel-start, .timeline-panel-end, .timeline-connector-start, .timeline-connector-end {
+    top: calc(var(--timeline-icon-radius) / 2);
+    position: relative;
+    width: calc(var(--timeline-icon-radius) / 2);
+    height: calc($semi-circle-border + var(--timeline-icon-radius) / 2);
+    border: $semi-circle-border solid var(--timeline-highlight);
+    border-bottom: none;
+    border-right: none;
+    border-left: none;
+}
+
+.timeline-panel-start {
+    top: 50%;
+    right: 50%;
+    position: absolute;
+    width: calc(var(--timeline-icon-radius) * 2);
+    width: 2 * $connector-radius;
+    height: 50%;
+    border-top: $semi-circle-border solid var(--timeline-highlight);
+    border-left: $semi-circle-border solid var(--timeline-highlight);
+}
+
+.timeline-panel-end {
+    top: 50%;
+    position: absolute;
+    width: calc(var(--timeline-icon-radius) * 2);
+    width: 2 * $connector-radius;
+    height: 50%;
+    border-top: $semi-circle-border solid var(--timeline-highlight);
+    border-right: $semi-circle-border solid var(--timeline-highlight);
+}
+
+.timeline-dot::after {
+    display: inline-block;
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: var(--timeline-offset);
+    margin: (-$connector-radius) 0 0 (-$connector-radius);
+    width: 2 * $connector-radius;
+    height: 2 * $connector-radius;
+    border-radius: 100%;
+    border: ($semi-circle-border * 1.5) solid var(--timeline-connector-bg);
+    color: var(--timeline-highlight);
+    background: var(--timeline-highlight);
+}
--- a/content/en/blog/bootstrap-elements.md
+++ b/content/en/blog/bootstrap-elements.md
@@ -127,7 +127,7 @@ As an example, the following shortcode displays a button that, when clicked, tri
    Trigger panel
 {{</* /button */>}}

-{{</* collapse id="collapse-1" class="p-3 border rounded" */>}}
+{{</* collapse id="collapse-1" class="p-3 border rounded bg-primary-subtle" */>}}
    Some placeholder content for the collapse component. This panel is <i>hidden by default</i> but
    revealed when the user activates the relevant trigger.
 {{</* /collapse */>}}
@@ -245,6 +245,16 @@ Loading...
 {{< /example>}}
 <!-- markdownlint-enable MD037 -->

+## Timeline
+
+As an example, the following shortcode displays a timeline with the file `data/timeline-en.yml` as data.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* timeline data="timeline-en" background="dark" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Toast

 As an example, the following shortcode displays a button that, when clicked, triggers the toast message.
--- a/content/nl/blog/bootstrap-elements.md
+++ b/content/nl/blog/bootstrap-elements.md
@@ -246,6 +246,16 @@ Loading...
 {{< /example>}}
 <!-- markdownlint-enable MD037 -->

+## Timeline
+
+De volgende shortcode toont een tijdslijn met het bestand `data/timeline-nl.yml` als input.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* timeline data="timeline-nl" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Toast

 De volgende shortcode toont een knop die een bericht laat verschijnen op het scherm.
--- a/data/timeline-en.yml
+++ b/data/timeline-en.yml
@@ -0,0 +1,35 @@
+# This file holds all menu entries for the docs sidebar
+
+- title: Product launch
+  icon: fas rocket
+  color: primary
+  date: 2023-07-01
+  url: https://github.com/gethinode/hinode/releases/tag/v0.15.2
+  content:
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.
+
+- title: I18N support
+  icon: fas globe
+  color: success
+  date: 2023-05-06
+  url: v0.14.0
+  content:
+    Lorem ipsum dolor sit amet.
+
+- title: New feature
+  icon: fas house
+  color: warning
+  date: 2023-02-04
+  url: v0.8.1
+  content:
+    Cupiditate ducimus officiis quod!
+
+- title: Beta release
+  icon: fas heart
+  color: info
+  date: 2022-11-30
+  # url: v0.1
+  content:
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.
--- a/data/timeline-nl.yml
+++ b/data/timeline-nl.yml
@@ -0,0 +1,35 @@
+# This file holds all menu entries for the docs sidebar
+
+- title: Productlancering
+  icon: fas rocket
+  color: primary
+  date: 2023-07-01
+  url: https://github.com/gethinode/hinode/releases/tag/v0.15.2
+  content:
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.
+
+- title: Internationalisering
+  icon: fas globe
+  color: success
+  date: 2023-05-06
+  url: v0.14.0
+  content:
+    Lorem ipsum dolor sit amet.
+
+- title: Nieuwe functie
+  icon: fas house
+  color: warning
+  date: 2023-02-04
+  url: v0.8.1
+  content:
+    Cupiditate ducimus officiis quod!
+
+- title: Beta release
+  icon: fas heart
+  color: info
+  date: 2022-11-30
+  # url: v0.1
+  content:
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.
--- a/layouts/shortcodes/timeline.html
+++ b/layouts/shortcodes/timeline.html
@@ -0,0 +1,101 @@
+<!-- Inspired by the timeline snippet from Siddharth Panchal at https://bootsnipp.com/snippets/Q0ppE -->
+{{ $error := false }}
+
+{{- $data := .Get "data" -}}
+{{ if not $data -}}
+    {{ errorf "Missing param 'data': %s" .Position -}}
+    {{ $error = true }}
+{{ end -}}
+
+{{ $entries := index site.Data $data }}
+{{ if not $entries -}}
+    {{ errorf "Invalid timeline data '%s': %s" $data .Position -}}
+    {{ $error = true }}
+{{ end -}}
+
+{{ $background := "" -}}
+{{ with .Get "background" }}{{ $background = . }}{{ end -}}
+{{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" -}}
+{{ if and $background (not (in $supportedColors $background)) -}}
+    {{ errorf "Invalid value for param 'background': %s" .Position -}}
+    {{ $error = true -}}
+{{ end -}}
+
+<!-- Inline partial to render icon -->
+{{- define "partials/timeline-icon.html" -}}
+    {{- $col := default 6 .col -}}
+    {{- $icon := .icon -}}
+    {{- $direction := .direction -}}
+    <div class="col-{{ $col }} d-flex justify-content-{{ $direction }} align-items-center">
+        <div class="d-flex">
+            <div class="d-flex timeline-semi-circle-{{ $direction }} fa-wrapper align-items-center justify-content-center">
+                {{ partial "assets/icon.html" (dict "icon" (printf "%s fa-fluid" $icon)) }}
+            </div>
+            <div class="timeline-connector-{{ $direction }} {{ if eq $direction "start" }} order-first{{ end }}"></div>
+        </div>
+    </div>
+{{- end -}}
+
+<!-- Inline partial to render icon -->
+{{- define "partials/timeline-panel.html" -}}
+    {{- $col := default 6 .col -}}
+    {{- $content := .content -}}
+    {{- $color := .color -}}
+    {{- $title := .title -}}
+    {{- $badge := .badge -}}
+    {{- $url := .url -}}
+    {{- $date := .date -}}
+    {{ if and $url (not (hasPrefix $url "http")) }}
+        {{ $url = path.Join site.Params.docs.release $url }}
+    {{ end }}
+    {{- $direction := .direction -}}
+
+    <div class="col-{{ $col }} d-flex align-items-center">
+        <div class="d-flex h-100 w-100">
+            <div class="timeline-panel-{{ $direction }}"></div>
+            <div class="timeline-description-text-{{ $direction }} p-3 w-100">
+                <div>
+                    {{ with $url }}
+                        <a class="fs-5 fw-bold text-uppercase link-{{ $color }} text-break align-middle" href="{{ . }}">{{ $title }}</a>
+                        <span class="badge rounded-pill text-bg-{{ $color }} ms-1">{{ if $badge }}<a class="link-bg-{{ $color }}" href="{{ . }}">{{ $badge }}</a>{{ end }}</span>
+                    {{ else}}
+                        <span class="fs-5 fw-bold text-uppercase link-{{ $color }} text-break align-middle">{{ $title }}</span>
+                        <span class="badge rounded-pill text-bg-{{ $color }} ms-1">{{ if $badge }}{{ $badge }}{{ end }}</span>
+                    {{ end }}
+                </div>
+                {{ if $date }}
+                    {{ $datestr := (partial "utilities/date.html" (dict "date" $date "format" "long")) -}}
+                    <p class="mb-0"><small class="text-body-secondary text-uppercase">{{ $datestr -}}</small></p>
+                {{ end }}
+                <p class="mt-3 mb-0">{{ $content | markdownify }}</p>
+            </div>
+        </div>
+    </div>    
+{{- end -}}
+
+<!-- Render default timeline -->
+<div class="container p-0 d-none d-md-block mb-5 {{ with $background }} timeline-bg-{{ . }}{{ end }}">
+    {{ range $index, $item := $entries }}
+        <div class="row timeline timeline-{{ $item.color }} timeline-dot g-0 ">
+            {{ if eq (mod $index 2) 1 }}
+                {{ partial "partials/timeline-panel.html" (dict "content" $item.content "color" $item.color "title" $item.title "badge" $item.badge "date" $item.date "url" $item.url "direction" "start") }}
+                {{ partial "partials/timeline-icon.html" (dict "icon" $item.icon "direction" "start") }}
+            {{ else }}
+                {{ partial "partials/timeline-icon.html" (dict "icon" $item.icon "direction" "end") }}
+                {{ partial "partials/timeline-panel.html" (dict "content" $item.content "color" $item.color "title" $item.title "badge" $item.badge "date" $item.date "url" $item.url "direction" "end") }}
+            {{ end }}
+        </div>
+        <div class="row timeline g-0 p-3"> </div>
+    {{ end }}
+</div>
+
+<!-- Render timeline for smaller devices -->
+<div class="container p-0 d-block d-md-none {{ with $background }} timeline-bg-{{ . }}{{ end }}">
+    {{ range $index, $item := $entries }}
+        <div class="row timeline-sm timeline-{{ $item.color }} timeline-dot g-0">
+            {{ partial "partials/timeline-icon.html" (dict "icon" $item.icon "direction" "end" "col" 3) }}
+            {{ partial "partials/timeline-panel.html" (dict "content" $item.content "color" $item.color "title" $item.title "badge" $item.badge "date" $item.date "url" $item.url "direction" "end" "col" 9) }}
+        </div>
+        <div class="row timeline-sm g-0 p-3"> </div>
+    {{ end }}
+</div>
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "@gethinode/hinode",
-  "version": "0.15.2",
+  "version": "0.15.4",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@gethinode/hinode",
-      "version": "0.15.2",
+      "version": "0.15.4",
      "license": "MIT",
      "devDependencies": {
        "@fortawesome/fontawesome-free": "^6.4.0",
@@ -31,6 +31,15 @@
        "stylelint-config-standard-scss": "^10.0.0"
      }
    },
+    "node_modules/@aashutoshrathi/word-wrap": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
+      "integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/@babel/code-frame": {
      "version": "7.18.6",
      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz",
@@ -236,14 +245,14 @@
      }
    },
    "node_modules/@eslint/eslintrc": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.0.3.tgz",
-      "integrity": "sha512-+5gy6OQfk+xx3q0d6jGZZC3f3KzAkXc/IanVxd1is/VIIziRqqt3ongQz0FiTUXqTk0c7aDB3OaFuKnuSoJicQ==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.0.tgz",
+      "integrity": "sha512-Lj7DECXqIVCqnqjjHMPna4vn6GJcMgul/wuS0je9OZ9gsL0zzDpKPVtcG1HaDVc+9y+qgXneTeUMbCqXJNpH1A==",
      "dev": true,
      "dependencies": {
        "ajv": "^6.12.4",
        "debug": "^4.3.2",
-        "espree": "^9.5.2",
+        "espree": "^9.6.0",
        "globals": "^13.19.0",
        "ignore": "^5.2.0",
        "import-fresh": "^3.2.1",
@@ -259,9 +268,9 @@
      }
    },
    "node_modules/@eslint/js": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.43.0.tgz",
-      "integrity": "sha512-s2UHCoiXfxMvmfzqoN+vrQ84ahUSYde9qNO1MdxmoEhyHWsfmwOpFlwYV+ePJEVc7gFnATGUi376WowX1N7tFg==",
+      "version": "8.44.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.44.0.tgz",
+      "integrity": "sha512-Ag+9YM4ocKQx9AarydN0KY2j0ErMHNIocPDrVo8zAE44xLTjEtz81OdR68/cydGtk6m6jDb5Za3r2useMzYmSw==",
      "dev": true,
      "engines": {
        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -675,9 +684,9 @@
      }
    },
    "node_modules/acorn": {
-      "version": "8.8.2",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
-      "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
+      "version": "8.9.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.9.0.tgz",
+      "integrity": "sha512-jaVNAFBHNLXspO543WnNNPZFRtavh3skAkITqD0/2aeMkKZTN+254PyhwxFYrk3vQ1xfY+2wbesJMs/JC8/PwQ==",
      "dev": true,
      "bin": {
        "acorn": "bin/acorn"
@@ -1877,15 +1886,15 @@
      }
    },
    "node_modules/eslint": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.43.0.tgz",
-      "integrity": "sha512-aaCpf2JqqKesMFGgmRPessmVKjcGXqdlAYLLC3THM8t5nBRZRQ+st5WM/hoJXkdioEXLLbXgclUpM0TXo5HX5Q==",
+      "version": "8.44.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.44.0.tgz",
+      "integrity": "sha512-0wpHoUbDUHgNCyvFB5aXLiQVfK9B0at6gUvzy83k4kAsQ/u769TQDX6iKC+aO4upIHO9WSaA3QoXYQDHbNwf1A==",
      "dev": true,
      "dependencies": {
        "@eslint-community/eslint-utils": "^4.2.0",
        "@eslint-community/regexpp": "^4.4.0",
-        "@eslint/eslintrc": "^2.0.3",
-        "@eslint/js": "8.43.0",
+        "@eslint/eslintrc": "^2.1.0",
+        "@eslint/js": "8.44.0",
        "@humanwhocodes/config-array": "^0.11.10",
        "@humanwhocodes/module-importer": "^1.0.1",
        "@nodelib/fs.walk": "^1.2.8",
@@ -1897,7 +1906,7 @@
        "escape-string-regexp": "^4.0.0",
        "eslint-scope": "^7.2.0",
        "eslint-visitor-keys": "^3.4.1",
-        "espree": "^9.5.2",
+        "espree": "^9.6.0",
        "esquery": "^1.4.2",
        "esutils": "^2.0.2",
        "fast-deep-equal": "^3.1.3",
@@ -1917,7 +1926,7 @@
        "lodash.merge": "^4.6.2",
        "minimatch": "^3.1.2",
        "natural-compare": "^1.4.0",
-        "optionator": "^0.9.1",
+        "optionator": "^0.9.3",
        "strip-ansi": "^6.0.1",
        "strip-json-comments": "^3.1.0",
        "text-table": "^0.2.0"
@@ -2151,12 +2160,12 @@
      }
    },
    "node_modules/espree": {
-      "version": "9.5.2",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-9.5.2.tgz",
-      "integrity": "sha512-7OASN1Wma5fum5SrNhFMAMJxOUAbhyfQ8dQ//PJaJbNw0URTPWqIghHWt1MmAANKhHZIYOHruW4Kw4ruUWOdGw==",
+      "version": "9.6.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.0.tgz",
+      "integrity": "sha512-1FH/IiruXZ84tpUlm0aCUEwMl2Ho5ilqVh0VvQXw+byAz/4SAciyHLlfmL5WYqsvD38oymdUwBss0LtK8m4s/A==",
      "dev": true,
      "dependencies": {
-        "acorn": "^8.8.0",
+        "acorn": "^8.9.0",
        "acorn-jsx": "^5.3.2",
        "eslint-visitor-keys": "^3.4.1"
      },
@@ -4288,17 +4297,17 @@
      }
    },
    "node_modules/optionator": {
-      "version": "0.9.1",
-      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
-      "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz",
+      "integrity": "sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==",
      "dev": true,
      "dependencies": {
+        "@aashutoshrathi/word-wrap": "^1.2.3",
        "deep-is": "^0.1.3",
        "fast-levenshtein": "^2.0.6",
        "levn": "^0.4.1",
        "prelude-ls": "^1.2.1",
-        "type-check": "^0.4.0",
-        "word-wrap": "^1.2.3"
+        "type-check": "^0.4.0"
      },
      "engines": {
        "node": ">= 0.8.0"
@@ -6827,15 +6836,6 @@
      "integrity": "sha512-B+enWhmw6cjfVC7kS8Pj9pCrKSc5txArRyaYGe088shv/FGWH+0Rjx/xPgtsWfsUtS27FkP697E4DDhgrgoc0Q==",
      "dev": true
    },
-    "node_modules/word-wrap": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
-      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
    "node_modules/wrap-ansi": {
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
@@ -6986,6 +6986,12 @@
    }
  },
  "dependencies": {
+    "@aashutoshrathi/word-wrap": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
+      "integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==",
+      "dev": true
+    },
    "@babel/code-frame": {
      "version": "7.18.6",
      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz",
@@ -7113,14 +7119,14 @@
      "dev": true
    },
    "@eslint/eslintrc": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.0.3.tgz",
-      "integrity": "sha512-+5gy6OQfk+xx3q0d6jGZZC3f3KzAkXc/IanVxd1is/VIIziRqqt3ongQz0FiTUXqTk0c7aDB3OaFuKnuSoJicQ==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.0.tgz",
+      "integrity": "sha512-Lj7DECXqIVCqnqjjHMPna4vn6GJcMgul/wuS0je9OZ9gsL0zzDpKPVtcG1HaDVc+9y+qgXneTeUMbCqXJNpH1A==",
      "dev": true,
      "requires": {
        "ajv": "^6.12.4",
        "debug": "^4.3.2",
-        "espree": "^9.5.2",
+        "espree": "^9.6.0",
        "globals": "^13.19.0",
        "ignore": "^5.2.0",
        "import-fresh": "^3.2.1",
@@ -7130,9 +7136,9 @@
      }
    },
    "@eslint/js": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.43.0.tgz",
-      "integrity": "sha512-s2UHCoiXfxMvmfzqoN+vrQ84ahUSYde9qNO1MdxmoEhyHWsfmwOpFlwYV+ePJEVc7gFnATGUi376WowX1N7tFg==",
+      "version": "8.44.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.44.0.tgz",
+      "integrity": "sha512-Ag+9YM4ocKQx9AarydN0KY2j0ErMHNIocPDrVo8zAE44xLTjEtz81OdR68/cydGtk6m6jDb5Za3r2useMzYmSw==",
      "dev": true
    },
    "@fortawesome/fontawesome-free": {
@@ -7440,9 +7446,9 @@
      }
    },
    "acorn": {
-      "version": "8.8.2",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
-      "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
+      "version": "8.9.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.9.0.tgz",
+      "integrity": "sha512-jaVNAFBHNLXspO543WnNNPZFRtavh3skAkITqD0/2aeMkKZTN+254PyhwxFYrk3vQ1xfY+2wbesJMs/JC8/PwQ==",
      "dev": true
    },
    "acorn-jsx": {
@@ -8259,15 +8265,15 @@
      "dev": true
    },
    "eslint": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.43.0.tgz",
-      "integrity": "sha512-aaCpf2JqqKesMFGgmRPessmVKjcGXqdlAYLLC3THM8t5nBRZRQ+st5WM/hoJXkdioEXLLbXgclUpM0TXo5HX5Q==",
+      "version": "8.44.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.44.0.tgz",
+      "integrity": "sha512-0wpHoUbDUHgNCyvFB5aXLiQVfK9B0at6gUvzy83k4kAsQ/u769TQDX6iKC+aO4upIHO9WSaA3QoXYQDHbNwf1A==",
      "dev": true,
      "requires": {
        "@eslint-community/eslint-utils": "^4.2.0",
        "@eslint-community/regexpp": "^4.4.0",
-        "@eslint/eslintrc": "^2.0.3",
-        "@eslint/js": "8.43.0",
+        "@eslint/eslintrc": "^2.1.0",
+        "@eslint/js": "8.44.0",
        "@humanwhocodes/config-array": "^0.11.10",
        "@humanwhocodes/module-importer": "^1.0.1",
        "@nodelib/fs.walk": "^1.2.8",
@@ -8279,7 +8285,7 @@
        "escape-string-regexp": "^4.0.0",
        "eslint-scope": "^7.2.0",
        "eslint-visitor-keys": "^3.4.1",
-        "espree": "^9.5.2",
+        "espree": "^9.6.0",
        "esquery": "^1.4.2",
        "esutils": "^2.0.2",
        "fast-deep-equal": "^3.1.3",
@@ -8299,7 +8305,7 @@
        "lodash.merge": "^4.6.2",
        "minimatch": "^3.1.2",
        "natural-compare": "^1.4.0",
-        "optionator": "^0.9.1",
+        "optionator": "^0.9.3",
        "strip-ansi": "^6.0.1",
        "strip-json-comments": "^3.1.0",
        "text-table": "^0.2.0"
@@ -8453,12 +8459,12 @@
      "dev": true
    },
    "espree": {
-      "version": "9.5.2",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-9.5.2.tgz",
-      "integrity": "sha512-7OASN1Wma5fum5SrNhFMAMJxOUAbhyfQ8dQ//PJaJbNw0URTPWqIghHWt1MmAANKhHZIYOHruW4Kw4ruUWOdGw==",
+      "version": "9.6.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.0.tgz",
+      "integrity": "sha512-1FH/IiruXZ84tpUlm0aCUEwMl2Ho5ilqVh0VvQXw+byAz/4SAciyHLlfmL5WYqsvD38oymdUwBss0LtK8m4s/A==",
      "dev": true,
      "requires": {
-        "acorn": "^8.8.0",
+        "acorn": "^8.9.0",
        "acorn-jsx": "^5.3.2",
        "eslint-visitor-keys": "^3.4.1"
      }
@@ -9993,17 +9999,17 @@
      }
    },
    "optionator": {
-      "version": "0.9.1",
-      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
-      "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz",
+      "integrity": "sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==",
      "dev": true,
      "requires": {
+        "@aashutoshrathi/word-wrap": "^1.2.3",
        "deep-is": "^0.1.3",
        "fast-levenshtein": "^2.0.6",
        "levn": "^0.4.1",
        "prelude-ls": "^1.2.1",
-        "type-check": "^0.4.0",
-        "word-wrap": "^1.2.3"
+        "type-check": "^0.4.0"
      }
    },
    "os-filter-obj": {
@@ -11727,12 +11733,6 @@
      "integrity": "sha512-B+enWhmw6cjfVC7kS8Pj9pCrKSc5txArRyaYGe088shv/FGWH+0Rjx/xPgtsWfsUtS27FkP697E4DDhgrgoc0Q==",
      "dev": true
    },
-    "word-wrap": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
-      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
-      "dev": true
-    },
    "wrap-ansi": {
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@gethinode/hinode",
-  "version": "0.15.2",
+  "version": "0.15.4",
  "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
  "keywords": [
    "hugo",
Author	SHA1	Message	Date
Mark Dumay	42a4fc4618	Merge pull request #327 from gethinode/timeline Enhance timeline component	2023-07-04 07:05:56 +02:00
Mark Dumay	683ffff1b2	Merge branch 'main' into timeline	2023-07-04 06:40:56 +02:00
mark	7738c06b6c	Bump package release	2023-07-04 06:32:28 +02:00
mark	9aca661574	Change preview background color to dark subtle	2023-07-04 06:32:06 +02:00
mark	3d5440fa3d	Add background color support	2023-07-04 06:31:33 +02:00
mark	4854d238b7	Add support for badges	2023-07-04 05:40:19 +02:00
github-actions[bot]	898764eb12	Merge pull request #325 from gethinode/dependabot/npm_and_yarn/eslint-8.44.0 Bump eslint from 8.43.0 to 8.44.0	2023-07-03 13:55:10 +00:00
dependabot[bot]	40e66bba8a	Bump eslint from 8.43.0 to 8.44.0 Bumps [eslint](https://github.com/eslint/eslint) from 8.43.0 to 8.44.0. - [Release notes](https://github.com/eslint/eslint/releases) - [Changelog](https://github.com/eslint/eslint/blob/main/CHANGELOG.md) - [Commits](https://github.com/eslint/eslint/compare/v8.43.0...v8.44.0) --- updated-dependencies: - dependency-name: eslint dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com>	2023-07-03 13:51:42 +00:00
Mark Dumay	a543db250f	Merge pull request #324 from gethinode/timeline Add timeline shortcode	2023-07-03 13:41:46 +02:00
mark	8d6b34716f	Fix var typo	2023-07-03 13:33:26 +02:00
Mark Dumay	ea89e1c8b5	Merge branch 'main' into timeline	2023-07-03 13:20:57 +02:00
mark	fb6d47c33e	Bump package release	2023-07-03 13:18:04 +02:00
mark	dc71f43faf	Remove temp blog post	2023-07-03 13:16:07 +02:00
mark	78df40873f	Fix highlight color of panels with limited text	2023-07-03 13:14:40 +02:00
mark	43f996acc3	Add internataional timeline examples	2023-07-03 13:14:12 +02:00
mark	dd51fbd542	Add support for smaller screens	2023-07-03 13:02:43 +02:00
mark	49df936f3b	Refactor panel code	2023-07-03 11:08:12 +02:00
mark	b6643f12dd	Refactor icon code	2023-07-03 10:59:39 +02:00
mark	2de996242a	Add scss docs tags	2023-07-03 10:46:52 +02:00
mark	3b8611ebd0	Add initial timeline component	2023-07-03 07:25:47 +02:00