Add the first Walkthrough: Evaluation under Tutorials (#345)

* Add "Guides" section * Add evaluation guide * Remove redundant code * Remove redirects for guides * Add image directory for content images * Improve the guide content * fix typo * Add walkthroughs to tutorials * change the tutorial branch * Fix the tutorial branch typo * Remove image code from build.sh * Remove the tutorials branch * Remove orbit sections * Remove all orbit sections * Remove condition for github buttons * Change the thumbnail image for tutorial overview * Revert to the original tutorials path
deepset-ai · Jul 17, 2024 · 6328272 · 6328272
1 parent e423aa8
commit 6328272
Show file tree

Hide file tree

Showing 14 changed files with 258 additions and 16 deletions.
diff --git 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
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -0,0 +1,75 @@
+{{/* Blog post */}}
+{{ define "main" }}
+  <div class="container">
+    <div class="inner inner-top">
+      <div class="blog-post">
+        {{/* Sidebar */}}
+        <aside class="toc-sidebar blog-post-sidebar">
+          {{/* Authors */}}
+          {{ if .Params.authors }}
+            {{ partial "blog-post-authors" . }}
+          {{ end }}
+
+          {{/* Toc */}}
+          {{if .Params.toc}}
+            <span class="toc-heading">Table of contents</span>
+            {{ .TableOfContents }}
+          {{ end }}
+        </aside>
+
+        <article class="blog-post-content guide-content">
+          {{/* Blog post header */}}
+          <div class="blog-post-header">
+            <div class="featured-image-wrapper">
+                <figure>
+                    {{/* Featured image */}}
+                    {{ if .Params.featured_image }}
+                    <div class="featured-image">
+                        <img
+                        src="{{.Permalink}}{{ .Params.featured_image }}"
+                        alt="{{ .Params.alt_image }}"
+                        />
+                    </div>
+
+                    {{ end }}
+                    {{ if .Params.featured_image_caption}}
+                    <figcaption>{{.Params.featured_image_caption | markdownify}}</figcaption>
+                    {{ end }}
+                </figure>
+            </div>
+            <div class="blog-post-title">
+              {{/*  Tags  */}}
+              <div class="blog-post-tags">
+                {{ range .Params.tags }}
+                  <a class="tag" href="/blog/tags/{{ urlize . }}">
+                    {{ . }}
+                  </a>
+                {{ end }}
+              </div>
+
+              {{/* Title */}}
+              {{ with .Params.title }}
+              <h1> Guide: {{.}} </h1>
+              <br>
+            {{ end }}
+
+              {{/* Description */}}
+              <p>{{ .Params.description }}</p>
+
+              {{/* Date */}}
+              {{ with .Params.date }}
+                <span class="article-date">
+                  {{ . | time.Format ":date_long" }}
+                </span>
+              {{ end }}
+            </div>
+          </div>
+
+          {{/* Blog post content */}}
+          {{ .Content }}
+
+        </article>
+      </div>
+    </div>
+  </div>
+{{ end }}
diff --git a/themes/haystack/layouts/_default/guides.html b/themes/haystack/layouts/_default/guides.html
@@ -0,0 +1,10 @@
+{{/* Blog listing page */}}
+{{ define "main" }}
+  <div class="grid-page">
+    {{/* Hero */}}
+    {{ partial "page-hero" . }}
+
+    {{ partial "guide-list" . }}
+
+  </div>
+{{ end }}
diff --git a/themes/haystack/layouts/_default/tutorial.html b/themes/haystack/layouts/_default/tutorial.html
@@ -7,9 +7,17 @@
         {{ partial "tutorial-sidebar" . }}
 
         {{/* Tutorial */}}
-        <article class="article-content">
-          {{ with .Params.title }}
-            <h1> Tutorial: {{.}} </h1>
+        <article class="article-content {{with .Params.guide}} blog-post-content guide-content{{end}}">
+          {{ $title := .Params.title}}
+
+          {{ if .Params.guide}}
+            <h1> Walkthrough: {{ $title }} </h1>
+
+            {{/* Description */}}
+            <p class="description">{{ .Params.description }}</p>
+
+          {{ else }}
+            <h1> Tutorial: {{ $title }} </h1>
             <br>
           {{ end }}
 

diff --git a/themes/haystack/layouts/_default/tutorials.html b/themes/haystack/layouts/_default/tutorials.html
@@ -12,7 +12,7 @@
           {{/* Section title */}}
           <div class="title-container">
             <h2 class="section-title">
-              {{ len $tutorials }} tutorials for
+              {{ len $tutorials }} tutorials & walkthroughs for
               <span>all</span> levels
             </h2>
 
@@ -34,7 +34,7 @@ <h2 class="section-title">
                 <input
                   id="search"
                   type="text"
-                  placeholder="Search Tutorials"
+                  placeholder="Search"
                   oninput="filterAndSort();"
                 />
                 <div class="search-icon">
@@ -105,16 +105,24 @@ <h2 class="section-title">
 
           {{/* Tutorials grid */}}
           <div class="grid-page-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 }}
               {{ partial "tutorial-card" . }}
             {{ end }}
 
             {{/*  Other tutorials  */}}
-            {{ range $notFeatured }}
+            {{ range $filtered  }}
               {{ partial "tutorial-card" . }}
             {{ end }}
           </div>
@@ -196,7 +204,7 @@ <h2>{{ .Params.contribute.title }}</h2>
 
 
       {{/*  Update section title  */}}
-      document.querySelector(".section-title").innerHTML = `${tutorials.length} tutorials for <span>${selectedLevel}</span> level${selectedLevel==="all" ? "s":""}`
+      document.querySelector(".section-title").innerHTML = `${tutorials.length} tutorials & walkthroughs for <span>${selectedLevel}</span> level${selectedLevel==="all" ? "s":""}`
 
       {{/*  Update the banner and hero title tag  */}}
       if (selectedVersion === "1.0") {
@@ -206,7 +214,7 @@ <h2>{{ .Params.contribute.title }}</h2>
       } else {
         banner.classList.add("v2")
         banner.children[0].innerHTML= `Looking for tutorials working with 1.x? Check out <span>here</span>`
-        heroTitle.innerHTML = `Tutorials <span class="tag">2.0</span>`
+        heroTitle.innerHTML = `Tutorials & Walkthroughs<span class="tag">2.0</span>`
       }
 
       document.querySelector(".grid-page-grid").innerHTML = ""

diff --git a/themes/haystack/layouts/partials/community-hero.html b/themes/haystack/layouts/partials/community-hero.html
@@ -60,7 +60,6 @@ <h3>{{ .title }}</h3>
               {{ end }}
             </ul>
             {{ end }}
-
         </div>
       </section>
     </div>

diff --git a/themes/haystack/layouts/partials/guide-card.html b/themes/haystack/layouts/partials/guide-card.html
@@ -0,0 +1,21 @@
+<a href="{{ .RelPermalink }}" class="grid-page-card guide-card" {{with .Params.guide}}data-guide="{{.}}"{{end}} {{with .Params.haystack_2}}data-haystack_2="{{.}}"{{end}}>
+    {{/*  Header / tags  */}}
+    <div class="grid-page-card-header">
+
+        {{/*  guide  */}}
+            <div class="guide">
+                <span class="icon">
+                    <svg width="20" height="20" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-right: 0.5rem;">
+                        <path fill-rule="evenodd" clip-rule="evenodd" d="M6.27103 2.11151C5.46135 2.21816 5.03258 2.41324 4.72718 2.71244C4.42179 3.01165 4.22268 3.43172 4.11382 4.225C4.00176 5.04159 4 6.12387 4 7.67568V16.2442C4.38867 15.9781 4.82674 15.7756 5.29899 15.6517C5.82716 15.513 6.44305 15.5132 7.34563 15.5135L20 15.5135V7.67568C20 6.12387 19.9982 5.04159 19.8862 4.22499C19.7773 3.43172 19.5782 3.01165 19.2728 2.71244C18.9674 2.41324 18.5387 2.21816 17.729 2.11151C16.8955 2.00172 15.7908 2 14.2069 2H9.7931C8.2092 2 7.10452 2.00172 6.27103 2.11151ZM6.75862 6.59459C6.75862 6.1468 7.12914 5.78378 7.58621 5.78378H16.4138C16.8709 5.78378 17.2414 6.1468 17.2414 6.59459C17.2414 7.04239 16.8709 7.40541 16.4138 7.40541H7.58621C7.12914 7.40541 6.75862 7.04239 6.75862 6.59459ZM7.58621 9.56757C7.12914 9.56757 6.75862 9.93058 6.75862 10.3784C6.75862 10.8262 7.12914 11.1892 7.58621 11.1892H13.1034C13.5605 11.1892 13.931 10.8262 13.931 10.3784C13.931 9.93058 13.5605 9.56757 13.1034 9.56757H7.58621Z" fill="#9090b2"/>
+                        <path d="M8.68965 17.1351H7.47341C6.39395 17.1351 6.01657 17.1421 5.72738 17.218C4.93365 17.4264 4.30088 18.0044 4.02952 18.7558C4.0463 19.1382 4.07259 19.4746 4.11382 19.775C4.22268 20.5683 4.42179 20.9884 4.72718 21.2876C5.03258 21.5868 5.46135 21.7818 6.27103 21.8885C7.10452 21.9983 8.2092 22 9.7931 22H14.2069C15.7908 22 16.8955 21.9983 17.729 21.8885C18.5387 21.7818 18.9674 21.5868 19.2728 21.2876C19.5782 20.9884 19.7773 20.5683 19.8862 19.775C19.9776 19.1088 19.9956 18.2657 19.9991 17.1351H13.1034V20.1417C13.1034 20.4397 13.1034 20.5886 12.9988 20.6488C12.8941 20.709 12.751 20.6424 12.4647 20.5092L11.0939 19.8713C10.9971 19.8262 10.9486 19.8037 10.8966 19.8037C10.8445 19.8037 10.796 19.8262 10.6992 19.8713L9.32842 20.5092C9.04213 20.6424 8.89899 20.709 8.79432 20.6488C8.68965 20.5886 8.68965 20.4397 8.68965 20.1417V17.1351Z" fill="#9090b2"/>
+                    </svg>
+                <span> Full Walkthrough</span>
+            </div>
+    </div>
+
+    {{/*  Title  */}}
+    <h3>{{ .Params.title }}</h3>
+
+    {{/*  Subtitle  */}}
+    <p>{{ .Params.description  }}</p>
+</a>
diff --git a/themes/haystack/layouts/partials/guide-list.html 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 }}
+
+<div class="blog-list-content">
+  <div class="container container-padded">
+    <div class="inner inner-top">
+      <h2 class="section-title">
+        {{ if or (eq .Type "authors") (eq .Type "tags") }}{{ .Params.title }}{{ else }}All Guides{{end}}
+      </h2>
+
+      <div class="blog-grid-container">
+        {{ $currentTags := slice }}
+        {{ range $guides }}
+          {{ $currentTags = union $currentTags .Params.tags }}
+        {{ end }}
+        {{ $currentTags = sort $currentTags }}
+        {{ if gt (len $currentTags) 1 }}
+          <div class="blog-sidebar">
+
+            <div id="topic-select">
+              {{ range $currentTags }}
+                {{ $tag := . | urlize }}
+                {{ with $.Site.GetPage "taxonomyTerm" (printf "tags/%s" $tag) }}
+                  {{ if not (eq $title .Params.title) }}
+                      <div class="topic-select-child">
+                          <input class="checkbox" type="checkbox" name="{{.Title}}" id="{{.Title}}" onchange="filterAndSort();"
+                          >
+                          <label for="{{.Title}}">{{.Title}}</label>
+                        </div>
+                        {{ end }}
+                  {{ end }}
+              {{ end }}
+
+              <button class="btn btn-green topic-confirm">Confirm</button>
+            </div>
+
+            {{/*  Mobile close btn  */}}
+            <button class="sidebar-close-btn" aria-label="Close sidebar">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" role="img" aria-label="Cross icon" focusable="false">
+                <path d="M1 1l12 12m0-12L1 13" stroke="#fff" stroke-linecap="round" stroke-width="2"></path>
+              </svg>
+            </button>
+          </div>
+        {{ end }}
+        {{/* Blog posts grid */}}
+        <div class="blog-grid blog-grid-static">
+
+          <div class="grid-page-grid">
+            {{ range $guides }}
+              {{ partial "guide-card" . }}
+            {{ end }}
+          </div>
+
+
+        </div>
+
+        <div class="blog-grid blog-grid-search"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
diff --git a/themes/haystack/layouts/partials/tutorial-sidebar.html b/themes/haystack/layouts/partials/tutorial-sidebar.html
@@ -1,9 +1,13 @@
 {{/*  Tutorial page sidebar  */}}
-<aside class="toc-sidebar">
+<aside class="toc-sidebar {{if .Params.guide}} blog-post-sidebar {{ end }}">
   <div class="accordions">
     {{ $currentPage := . }}
     {{ $tutorials := where (where (.GetPage "/tutorials").Pages "Params.hidden" "!=" true) "Params.haystack_2" true }}
-
+    {{/* Toc */}}
+    {{if .Params.guide}}
+      <span class="toc-heading">Table of contents</span>
+      {{ .TableOfContents }}
+    {{ else }}
     {{/* Beginner */}}
     <details
       class="accordion-js"
@@ -124,5 +128,6 @@
         {{ end }}
       </ul>
     </details>
+    {{ end }}
   </div>
 </aside>
-Original file line number
+Diff line change
@@ Expand Up / @@ -60,7 +60,6 @@ <h3>{{ .title }}</h3> @@
                   {{ end }}
                 </ul>
                 {{ end }}
             </div>
           </section>
         </div>
@@ Expand Down @@