diff --git a/config.toml b/config.toml index 44fda3cc..8b02a2f9 100644 --- a/config.toml +++ b/config.toml @@ -118,7 +118,7 @@ paginatePath = "/" weight = 2 [[menu.main]] - name = '📚 Tutorials' + name = '📚 Tutorials & Walkthroughs' url = '/tutorials' parent = 'learn' weight = 1 diff --git a/content/tutorials/_index.md b/content/tutorials/_index.md index 7c2a77bd..8a9609d6 100644 --- a/content/tutorials/_index.md +++ b/content/tutorials/_index.md @@ -1,11 +1,11 @@ --- layout: tutorials -featured_image: /images/tutorials.png -images: ["/images/tutorials.png"] +featured_image: /images/tutorial_walkthrough_thumbnail.png +images: ["/images/tutorial_walkthrough_thumbnail.png"] header: dark footer: dark -title: Tutorials -description: Learn how to use Haystack with our tutorials. +title: Tutorials & Walkthroughs +description: Learn how to use Haystack with our tutorials and full walkthroughs. subtitle: | Whether you're a beginner or an experienced user, these tutorials will walk you through Haystack features and functionalities making it easy for you to understand and implement them. diff --git a/static/images/tutorial_walkthrough_thumbnail.png b/static/images/tutorial_walkthrough_thumbnail.png new file mode 100644 index 00000000..3d76ec7e Binary files /dev/null and b/static/images/tutorial_walkthrough_thumbnail.png differ diff --git a/themes/haystack/assets/sass/abstracts/_variables.scss b/themes/haystack/assets/sass/abstracts/_variables.scss index 3d7cc550..66b37d7a 100644 --- a/themes/haystack/assets/sass/abstracts/_variables.scss +++ b/themes/haystack/assets/sass/abstracts/_variables.scss @@ -15,6 +15,7 @@ --color-green: #03af9d; --color-yellow: #ffc55c; --color-orange: #f0ad4e; + --color-purple: #35395D; // RGB colors --color-white-rgb: 254, 254, 253; diff --git a/themes/haystack/assets/sass/components/_article.scss b/themes/haystack/assets/sass/components/_article.scss index c8491c6d..465cc5be 100644 --- a/themes/haystack/assets/sass/components/_article.scss +++ b/themes/haystack/assets/sass/components/_article.scss @@ -59,6 +59,23 @@ } } } + + iframe { + display: block; + margin: var(--sm-text-spacing) auto; + } +} + +.guide-content{ + + .description{ + color: var(--color-dark-grey) + } + + table { + font-size: var(--text-small); + } + } .blog-post-header { diff --git a/themes/haystack/assets/sass/pages/_grid-page.scss b/themes/haystack/assets/sass/pages/_grid-page.scss index 3bf56218..4c1428bf 100644 --- a/themes/haystack/assets/sass/pages/_grid-page.scss +++ b/themes/haystack/assets/sass/pages/_grid-page.scss @@ -90,6 +90,28 @@ } } + // Guide cards + .grid-page-card.guide-card { + background-color: var(--color-bg-dark-blue); + // Title + h3 { + font-size: 2rem; + word-break: break-word; + color: white; + } + + // Description + p { + font-size: 0.875rem; + color: var(--color-bg-light-grey) + } + + &:hover { + box-shadow: 0px 0px 0px 2px #FFC55C, + 0px 0px 8px 4px rgba(67, 171, 157, 0.32); + } + } + // Integration cards .grid-page-card.integration-card { position: relative; @@ -240,6 +262,15 @@ color: var(--color-white); } + &.guide { + background-color: var(--color-purple); + color: var(--color-white); + font-size: 1rem; + border-radius: 8px; + gap: 1rem; + display: block; + } + &.outdated { background-color: var(--color-dark-blue); color: var(--color-white); diff --git a/themes/haystack/layouts/_default/guide.html b/themes/haystack/layouts/_default/guide.html new file mode 100644 index 00000000..cb27318a --- /dev/null +++ b/themes/haystack/layouts/_default/guide.html @@ -0,0 +1,75 @@ +{{/* Blog post */}} +{{ define "main" }} +
+
+
+ {{/* Sidebar */}} + + +
+ {{/* Blog post header */}} +
+
+
+ {{/* Featured image */}} + {{ if .Params.featured_image }} +
+ {{ .Params.alt_image }} +
+ + {{ end }} + {{ if .Params.featured_image_caption}} +
{{.Params.featured_image_caption | markdownify}}
+ {{ end }} +
+
+
+ {{/* Tags */}} +
+ {{ range .Params.tags }} + + {{ . }} + + {{ end }} +
+ + {{/* Title */}} + {{ with .Params.title }} +

Guide: {{.}}

+
+ {{ end }} + + {{/* Description */}} +

{{ .Params.description }}

+ + {{/* Date */}} + {{ with .Params.date }} + + {{ . | time.Format ":date_long" }} + + {{ end }} +
+
+ + {{/* Blog post content */}} + {{ .Content }} + +
+
+
+
+{{ end }} diff --git a/themes/haystack/layouts/_default/guides.html b/themes/haystack/layouts/_default/guides.html new file mode 100644 index 00000000..ccf96c5f --- /dev/null +++ b/themes/haystack/layouts/_default/guides.html @@ -0,0 +1,10 @@ +{{/* Blog listing page */}} +{{ define "main" }} +
+ {{/* Hero */}} + {{ partial "page-hero" . }} + + {{ partial "guide-list" . }} + +
+{{ end }} \ No newline at end of file diff --git a/themes/haystack/layouts/_default/tutorial.html b/themes/haystack/layouts/_default/tutorial.html index 5dd1fbca..9d15098b 100644 --- a/themes/haystack/layouts/_default/tutorial.html +++ b/themes/haystack/layouts/_default/tutorial.html @@ -7,9 +7,17 @@ {{ partial "tutorial-sidebar" . }} {{/* Tutorial */}} -
- {{ with .Params.title }} -

Tutorial: {{.}}

+
+ {{ $title := .Params.title}} + + {{ if .Params.guide}} +

Walkthrough: {{ $title }}

+ + {{/* Description */}} +

{{ .Params.description }}

+ + {{ else }} +

Tutorial: {{ $title }}


{{ end }} diff --git a/themes/haystack/layouts/_default/tutorials.html b/themes/haystack/layouts/_default/tutorials.html index 97e7fe95..b5cdaf30 100644 --- a/themes/haystack/layouts/_default/tutorials.html +++ b/themes/haystack/layouts/_default/tutorials.html @@ -12,7 +12,7 @@ {{/* Section title */}}

- {{ len $tutorials }} tutorials for + {{ len $tutorials }} tutorials & walkthroughs for all levels

@@ -34,7 +34,7 @@

@@ -105,8 +105,16 @@

{{/* Tutorials grid */}}
+ {{ $guide := where $tutorials "Params.guide" true }} {{ $featured := where $tutorials "Params.featured" true }} {{ $notFeatured := where $tutorials "Params.featured" "!=" true }} + {{ $notGuide := where $tutorials "Params.guide" "!=" true }} + {{ $filtered := $notFeatured | intersect $notGuide }} + + {{/* Guides */}} + {{ range $guide }} + {{ partial "guide-card" . }} + {{ end }} {{/* Featured tutorials */}} {{ range $featured }} @@ -114,7 +122,7 @@

{{ end }} {{/* Other tutorials */}} - {{ range $notFeatured }} + {{ range $filtered }} {{ partial "tutorial-card" . }} {{ end }}

@@ -196,7 +204,7 @@

{{ .Params.contribute.title }}

{{/* Update section title */}} - document.querySelector(".section-title").innerHTML = `${tutorials.length} tutorials for ${selectedLevel} level${selectedLevel==="all" ? "s":""}` + document.querySelector(".section-title").innerHTML = `${tutorials.length} tutorials & walkthroughs for ${selectedLevel} level${selectedLevel==="all" ? "s":""}` {{/* Update the banner and hero title tag */}} if (selectedVersion === "1.0") { @@ -206,7 +214,7 @@

{{ .Params.contribute.title }}

} else { banner.classList.add("v2") banner.children[0].innerHTML= `Looking for tutorials working with 1.x? Check out here` - heroTitle.innerHTML = `Tutorials 2.0` + heroTitle.innerHTML = `Tutorials & Walkthroughs2.0` } document.querySelector(".grid-page-grid").innerHTML = "" diff --git a/themes/haystack/layouts/partials/community-hero.html b/themes/haystack/layouts/partials/community-hero.html index 42e68876..4928f1ba 100644 --- a/themes/haystack/layouts/partials/community-hero.html +++ b/themes/haystack/layouts/partials/community-hero.html @@ -60,7 +60,6 @@

{{ .title }}

{{ end }} {{ end }} -

diff --git a/themes/haystack/layouts/partials/guide-card.html b/themes/haystack/layouts/partials/guide-card.html new file mode 100644 index 00000000..aab7b531 --- /dev/null +++ b/themes/haystack/layouts/partials/guide-card.html @@ -0,0 +1,21 @@ + + {{/* Header / tags */}} +
+ + {{/* guide */}} +
+ + + + + + Full Walkthrough +
+
+ + {{/* Title */}} +

{{ .Params.title }}

+ + {{/* Subtitle */}} +

{{ .Params.description }}

+ \ No newline at end of file diff --git a/themes/haystack/layouts/partials/guide-list.html b/themes/haystack/layouts/partials/guide-list.html new file mode 100644 index 00000000..125fd4dd --- /dev/null +++ b/themes/haystack/layouts/partials/guide-list.html @@ -0,0 +1,67 @@ +{{ $type := .Type }} +{{ $title := "All Guides" }} +{{ if or (eq .Type "authors") (eq .Type "tags") }} + {{ $title = .Params.title }} +{{end}} + +{{ $guides := where .Data.Pages "Params.hidden" "!=" true }} + +
+
+
+

+ {{ if or (eq .Type "authors") (eq .Type "tags") }}{{ .Params.title }}{{ else }}All Guides{{end}} +

+ +
+ {{ $currentTags := slice }} + {{ range $guides }} + {{ $currentTags = union $currentTags .Params.tags }} + {{ end }} + {{ $currentTags = sort $currentTags }} + {{ if gt (len $currentTags) 1 }} +
+ +
+ {{ range $currentTags }} + {{ $tag := . | urlize }} + {{ with $.Site.GetPage "taxonomyTerm" (printf "tags/%s" $tag) }} + {{ if not (eq $title .Params.title) }} +
+ + +
+ {{ end }} + {{ end }} + {{ end }} + + +
+ + {{/* Mobile close btn */}} + +
+ {{ end }} + {{/* Blog posts grid */}} +
+ +
+ {{ range $guides }} + {{ partial "guide-card" . }} + {{ end }} +
+ + +
+ +
+
+
+
+
+ diff --git a/themes/haystack/layouts/partials/tutorial-sidebar.html b/themes/haystack/layouts/partials/tutorial-sidebar.html index d5879e90..cd7f3942 100644 --- a/themes/haystack/layouts/partials/tutorial-sidebar.html +++ b/themes/haystack/layouts/partials/tutorial-sidebar.html @@ -1,9 +1,13 @@ {{/* Tutorial page sidebar */}} -