diff --git a/README.md b/README.md index 62f700ec..16b46cef 100644 --- a/README.md +++ b/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 diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index 6a508a6a..f35bc5c3 100644 --- a/assets/css/compiled/main.css +++ b/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)); diff --git a/exampleSite/content/docs/shortcodes/index.md b/exampleSite/content/docs/shortcodes/index.md index 20c14147..c0a9c218 100644 --- a/exampleSite/content/docs/shortcodes/index.md +++ b/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" >}} +


+ +## 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. + + + +| 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 | + + + +**Example:** + +```md +{{}} + +{{}} +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. +{{}} + + +{{}} +With html code + +{{}} + +{{}} +With other shortcodes +{{}} + + + + + + + +{{}} +{{}} + +{{}} +``` + + +{{< 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 icon="code" header="Another Awesome Header" badge="date - present" subheader="Awesome Subheader">}} +With html code + +{{}} + +{{< timelineItem icon="star" header="Shortcodes" badge="AWESOME" >}} +With other shortcodes +{{< gallery >}} + + + + + + + +{{< /gallery >}} +{{}} + +{{}} + +


## TypeIt diff --git a/layouts/partials/vendor.html b/layouts/partials/vendor.html index b8ef284d..2b1d6156 100644 --- a/layouts/partials/vendor.html +++ b/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" }} {{ end }} \ No newline at end of file diff --git a/layouts/shortcodes/timeline.html b/layouts/shortcodes/timeline.html new file mode 100644 index 00000000..27ee729a --- /dev/null +++ b/layouts/shortcodes/timeline.html @@ -0,0 +1,3 @@ +
    + {{- .Inner -}} +
\ No newline at end of file diff --git a/layouts/shortcodes/timelineItem.html b/layouts/shortcodes/timelineItem.html new file mode 100644 index 00000000..2d4e751f --- /dev/null +++ b/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" }} +
  • +
    +
    + {{ partial "icon" $icon }} +
    +
    +
    + {{ if $header }} +

    + {{ $header }} +

    + {{ end }} + {{ if $badge }} +

    + {{ partial "badge" $badge}} +

    + {{ end }} +
    + {{ if $subheader }} +

    + {{ $subheader }} +

    + {{ end }} +

    {{- .Inner -}}

    +
    +
    +
    • \ No newline at end of file