✨ Add timeline shortcode

README.md

@@ -38,7 +38,7 @@ Blowfish is designed to be a powerful, lightweight theme for [Hugo](https://gohu
 - Support for sub-navigation menu
 - Multilingual content support inlcuding support for RTL languages
 - Ability to link to posts on third-party websites
-- Support for several shortcodes like Gallery, GitHub cards, and Carousels
+- Support for several shortcodes like Gallery, Timeline, GitHub cards, and Carousels
 - Buymeacoffee integration
 - Client-side site search powered by Fuse.js
 - Diagrams and visualisations using Mermaid

assets/css/compiled/main.css

@@ -4450,6 +4450,14 @@ textarea.form-control.is-invalid {
   margin-top: 5rem;
 }
 
+.-ml-12 {
+  margin-left: -3rem;
+}
+
+.ml-6 {
+  margin-left: 1.5rem;
+}
+
 .mt-3 {
   margin-top: 0.75rem;
 }
@@ -4610,6 +4618,10 @@ textarea.form-control.is-invalid {
   min-width: 220px;
 }
 
+.min-w-\[30px\] {
+  min-width: 30px;
+}
+
 .min-w-full {
   min-width: 100%;
 }
@@ -4841,6 +4853,10 @@ textarea.form-control.is-invalid {
   border-top-width: 1px;
 }
 
+.border-l-2 {
+  border-left-width: 2px;
+}
+
 .border-dotted {
   border-style: dotted;
 }
@@ -4907,6 +4923,11 @@ textarea.form-control.is-invalid {
   background-color: rgba(var(--color-primary-600), var(--tw-bg-opacity));
 }
 
+.bg-primary-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--color-primary-500), var(--tw-bg-opacity));
+}
+
 .bg-neutral-100\/50 {
   background-color: rgba(var(--color-neutral-100), 0.5);
 }
@@ -4990,6 +5011,10 @@ textarea.form-control.is-invalid {
   padding: 1.25rem;
 }
 
+.p-6 {
+  padding: 1.5rem;
+}
+
 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -5271,6 +5296,11 @@ textarea.form-control.is-invalid {
   color: rgba(var(--color-neutral), var(--tw-text-opacity)) !important;
 }
 
+.text-neutral-50 {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-neutral-50), var(--tw-text-opacity));
+}
+
 .text-primary-800 {
   --tw-text-opacity: 1;
   color: rgba(var(--color-primary-800), var(--tw-text-opacity));
@@ -6545,6 +6575,11 @@ body:has(#menu-controller:checked) {
   border-color: rgba(var(--color-neutral-700), var(--tw-border-opacity));
 }
 
+.dark .dark\:border-primary-300 {
+  --tw-border-opacity: 1;
+  border-color: rgba(var(--color-primary-300), var(--tw-border-opacity));
+}
+
 .dark .dark\:bg-neutral-800 {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--color-neutral-800), var(--tw-bg-opacity));
@@ -6583,6 +6618,11 @@ body:has(#menu-controller:checked) {
   background-color: rgba(var(--color-primary-900), var(--tw-bg-opacity));
 }
 
+.dark .dark\:bg-primary-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--color-primary-300), var(--tw-bg-opacity));
+}
+
 .dark .dark\:from-neutral-800 {
   --tw-gradient-from: rgba(var(--color-neutral-800), 1);
   --tw-gradient-to: rgba(var(--color-neutral-800), 0);
@@ -6682,6 +6722,11 @@ body:has(#menu-controller:checked) {
   color: rgba(var(--color-neutral-100), var(--tw-text-opacity));
 }
 
+.dark .dark\:text-neutral-700 {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-neutral-700), var(--tw-text-opacity));
+}
+
 .dark .dark\:text-neutral-200 {
   --tw-text-opacity: 1;
   color: rgba(var(--color-neutral-200), var(--tw-text-opacity));

exampleSite/content/docs/shortcodes/index.md

@@ -398,6 +398,91 @@ You can see some additional Mermaid examples on the [diagrams and flowcharts sam
 **Output**
 {{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
 
+<br/><br/><br/>
+
+## Timeline
+
+`timeline` is used to create a visual timeline that can be used in different use-cases. The `timeline` shortcodes uses the `timelineItem` shortcode to define each item within the main timeline. Each item can have the following properties.
+
+
+<!-- prettier-ignore-start -->
+| Parameter   | Description                                  |
+| ----------- | -------------------------------------------- |
+| `icon`      | the icon to be used in the timeline visuals. |
+| `header`    | header for each entry                        |
+| `badge`     | text to place within the top righ badge      |
+| `subheader` | entry's subheader                            |
+
+<!-- prettier-ignore-end -->
+
+**Example:**
+
+```md
+{{</* timeline */>}}
+
+{{</* timelineItem icon="github" header="header" badge="badge test" subheader="subheader" */>}}
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus. 
+{{</* /timelineItem */>}}
+
+
+{{</* timelineItem icon="code" header="Another Awesome Header" badge="date - present" subheader="Awesome Subheader" */>}}
+With html code
+<ul>
+  <li>Coffee</li>
+  <li>Tea</li>
+  <li>Milk</li>
+</ul>
+{{</* /timelineItem */>}}
+
+{{</* timelineItem icon="star" header="Shortcodes" badge="AWESOME" */>}}
+With other shortcodes
+{{</* gallery */>}}
+  <img src="gallery/01.jpg" class="grid-w33" />
+  <img src="gallery/02.jpg" class="grid-w33" />
+  <img src="gallery/03.jpg" class="grid-w33" />
+  <img src="gallery/04.jpg" class="grid-w33" />
+  <img src="gallery/05.jpg" class="grid-w33" />
+  <img src="gallery/06.jpg" class="grid-w33" />
+  <img src="gallery/07.jpg" class="grid-w33" />
+{{</* /gallery */>}}
+{{</* /timelineItem */>}}
+
+{{</* /timeline */>}}
+```
+
+
+{{< timeline >}}
+
+{{< timelineItem icon="github" header="header" badge="badge test" subheader="subheader" >}}
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus. 
+{{</ timelineItem >}}
+
+
+{{< timelineItem icon="code" header="Another Awesome Header" badge="date - present" subheader="Awesome Subheader">}}
+With html code
+<ul>
+  <li>Coffee</li>
+  <li>Tea</li>
+  <li>Milk</li>
+</ul>
+{{</ timelineItem >}}
+
+{{< timelineItem icon="star" header="Shortcodes" badge="AWESOME" >}}
+With other shortcodes
+{{< gallery >}}
+  <img src="gallery/01.jpg" class="grid-w33" />
+  <img src="gallery/02.jpg" class="grid-w33" />
+  <img src="gallery/03.jpg" class="grid-w33" />
+  <img src="gallery/04.jpg" class="grid-w33" />
+  <img src="gallery/05.jpg" class="grid-w33" />
+  <img src="gallery/06.jpg" class="grid-w33" />
+  <img src="gallery/07.jpg" class="grid-w33" />
+{{< /gallery >}}
+{{</ timelineItem >}}
+
+{{</ timeline >}}
+
+
 <br/><br/><br/>
 
 ## TypeIt

layouts/partials/vendor.html

@@ -54,7 +54,7 @@
 {{ end }}
 
 {{/* tw-elements */}}
-{{ if .Page.HasShortcode "carousel" }}
+{{ if or (.Page.HasShortcode "carousel") (.Page.HasShortcode "timeline")}}
 {{ $twelementsLib := resources.Get "lib/tw-elements/index.min.js" }}
 <script defer src="{{ $twelementsLib.RelPermalink }}" integrity="{{ $twelementsLib.Data.Integrity }}"></script>
 {{ end }}

layouts/shortcodes/timeline.html

@@ -0,0 +1,3 @@
+<ol class="border-l-2 list-none border-primary-500 dark:border-primary-300">
+  {{- .Inner -}}
+</ol>

layouts/shortcodes/timelineItem.html

@@ -0,0 +1,32 @@
+{{ $icon := .Get "icon" | default "check" }}
+{{ $header := .Get "header" }}
+{{ $badge := .Get "badge" }}
+{{ $subheader := .Get "subheader" }}
+{{ $text := .Get "text" }}
+<li class="list-none">
+  <div class="flex flex-start">
+    <div class="bg-primary-500 dark:bg-primary-300 text-neutral-50 dark:text-neutral-700 min-w-[30px] h-8 text-2xl flex items-center justify-center rounded-full -ml-12 mt-5">
+      {{ partial "icon" $icon }}
+    </div>
+    <div class="block p-6 rounded-lg shadow-2xl min-w-full ml-6 mb-10 backdrop-blur">
+      <div class="flex justify-between">
+        {{ if $header }}
+        <h2 class="mt-0">
+          {{ $header }} 
+        </h2>
+        {{ end }}
+        {{ if $badge }}
+        <h3 class="">
+          {{ partial "badge"  $badge}}
+        </h3>
+        {{ end }}
+      </div>
+      {{ if $subheader }}
+      <h4 class="mt-0">
+        {{ $subheader }}
+      </h4>
+      {{ end }}
+      <p class="text-gray-700 mb-6">{{- .Inner -}}</p>
+    </div>
+  </div>
+</li>