Updated Blog-Post page (#1260)

* Updated Blog-Post page

* Second version of the progress bar

* Updated Progress bar for Safari and Firefox

* Returned the scroll bar in the first version

qdrant-landing/content/headless/share-buttons.md

@@ -1,12 +1,15 @@
 ---
 title: Social Share Buttons
+navTitle: "On this page:"
 buttons:
   - id: x
     title: x
+    subtitle: Share on X
     url: https://twitter.com/intent/tweet?url={{ $link }}&text={{ $title }}
     icon: <svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M14.959 20.7369L6.378 30.5349H1.625L12.739 17.8389L14.959 20.7369Z" fill="#161E33"/> <path d="M17.5508 11.5229L25.4078 2.53491H30.1578L19.7508 14.4369L17.5508 11.5229Z" fill="#161E33"/> <path d="M31.9877 30.5349H22.4287L1.01172 2.53491H10.8127L31.9877 30.5349ZM23.7397 27.6919H26.3717L9.38272 5.22891H6.55872L23.7397 27.6919Z" fill="#161E33"/></svg>
   - id: linkedin
     title: LinkedIn
+    subtitle: Share on LinkedIn
     url: https://www.linkedin.com/sharing/share-offsite/?url={{ $link }}
     icon: <svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1811_16094)"> <path d="M30.6667 0.4375H1.33333C0.533333 0.4375 0 0.970833 0 1.77083V31.1042C0 31.9042 0.533333 32.4375 1.33333 32.4375H30.6667C31.4667 32.4375 32 31.9042 32 31.1042V1.77083C32 0.970833 31.4667 0.4375 30.6667 0.4375ZM9.46667 27.7708H4.8V12.4375H9.6V27.7708H9.46667ZM7.06667 10.3042C5.6 10.3042 4.26667 9.10417 4.26667 7.50417C4.26667 6.0375 5.46667 4.70417 7.06667 4.70417C8.53333 4.70417 9.86667 5.90417 9.86667 7.50417C9.86667 9.10417 8.66667 10.3042 7.06667 10.3042ZM27.3333 27.7708H22.5333V20.3042C22.5333 18.5708 22.5333 16.3042 20.1333 16.3042C17.6 16.3042 17.3333 18.1708 17.3333 20.1708V27.7708H12.5333V12.4375H17.0667V14.5708C17.7333 13.3708 19.2 12.1708 21.6 12.1708C26.4 12.1708 27.3333 15.3708 27.3333 19.5042V27.7708Z" fill="#161E33" /> </g> <defs> <clipPath id="clip0_1811_16094"> <rect width="32" height="32" fill="white" transform="translate(0 0.4375)" /> </clipPath> </defs></svg>
----
+---

qdrant-landing/themes/qdrant-2024/assets/css/main.scss

@@ -40,6 +40,7 @@
 @import 'partials/demos';
 @import 'partials/tutorials';
 @import 'partials/qdrant-blog-features';
+@import 'partials/qdrant-blog-post';
 @import 'partials/qdrant-blog-posts';
 @import 'partials/qdrant-blog-hero';
 @import 'partials/pagination';
@@ -104,3 +105,4 @@
 @import 'partials/rag-evaluation-guide-integrations';
 @import 'partials/rag-evaluation-guide-kubernetes-clusters';
 @import 'partials/rag-evaluation-guide-features';
+@import 'partials/progress-bar';

qdrant-landing/themes/qdrant-2024/assets/css/partials/_progress-bar.scss

@@ -0,0 +1,39 @@
+@use '../helpers/functions' as *;
+@use 'sass:math';
+
+.progress-bar {
+  display: block;
+  position: sticky;
+  top: pxToRem(60);
+  left: 0;
+  right: 0;
+  height: math.div($spacer, 4);
+  width: 100%;
+  border-radius: 0;
+  border: none;
+  color: $primary-50;
+  z-index: 1;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  &::-webkit-progress-bar {
+    background-color: $neutral-98;
+  }
+
+  &::-webkit-progress-value {
+    background-color: $primary-50;
+  }
+
+  &::-moz-progress-bar {
+    background-color: $primary-50;
+  }
+
+  @include media-breakpoint-up(xl) {
+    top: pxToRem(52);
+  }
+}
+
+:indeterminate::-moz-progress-bar {
+  width: 0;
+}

qdrant-landing/themes/qdrant-2024/assets/css/partials/_qdrant-blog-post.scss

@@ -0,0 +1,152 @@
+@use '../helpers/functions' as *;
+@use 'sass:math';
+
+.qdrant-blog-post {
+  article {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .qdrant-post {
+    &__breadcrumbs {
+      margin-top: $spacer * 2.5;
+      margin-bottom: $spacer;
+      order: 1;
+    }
+
+    &__title {
+      text-align: left;
+    }
+
+    &__about {
+      justify-content: flex-start;
+      margin-bottom: $spacer * 1.5;
+    }
+
+    &__header {
+      padding-top: 0;
+      padding-bottom: $spacer * 1.5;
+      order: 2;
+    }
+
+    &__body {
+      gap: $spacer * 1.5;
+      padding-bottom: $spacer * 5;
+      order: 3;
+    }
+
+    &__nav {
+      a {
+        font-size: pxToRem(14);
+        line-height: pxToRem(21);
+        color: $neutral-20;
+      }
+
+      &-title {
+        display: none;
+        margin-bottom: $spacer * 0.5;
+        padding: 0 $spacer * 0.5 $spacer * 0.5;
+        font-size: $spacer;
+        line-height: $spacer * 1.5;
+        color: $neutral-20;
+      }
+
+      nav {
+        display: none;
+        margin-bottom: $spacer;
+
+        ul {
+          padding-left: 0;
+        }
+
+        li {
+          list-style: none;
+
+          a {
+            display: block;
+            margin-bottom: math.div($spacer, 4);
+            padding: math.div($spacer, 4) $spacer * 0.5;
+          }
+        }
+      }
+
+      &-links {
+        display: flex;
+        justify-content: space-between;
+        gap: pxToRem(12);
+        padding-bottom: $spacer * 1.5;
+        border-bottom: pxToRem(1) solid $neutral-80;
+
+        a {
+          display: flex;
+          align-items: center;
+          gap: $spacer * 0.5;
+          padding-left: $spacer * 0.5;
+
+          svg {
+            height: $spacer;
+            width: $spacer;
+          }
+        }
+      }
+    }
+  }
+
+  @media (min-width: 1200px) {
+    .qdrant-post {
+      &__breadcrumbs {
+        margin-top: $spacer * 1.5;
+        margin-bottom: $spacer * 2.5;
+      }
+
+      &__title {
+        text-align: center;
+      }
+
+      &__about {
+        justify-content: center;
+        margin-bottom: $spacer * 2.5;
+      }
+
+      &__header {
+        padding-bottom: $spacer * 4;
+      }
+
+      &__body {
+        align-items: flex-start;
+        flex-direction: row-reverse;
+        gap: $spacer * 4;
+        width: pxToRem(984);
+        margin-left: pxToRem(91);
+      }
+
+      &__content {
+        width: calc(100% - $spacer * 19);
+      }
+
+      &__nav {
+        position: sticky;
+        top: $spacer * 4;
+        right: 0;
+        width: $spacer * 15;
+        padding-top: $spacer;
+
+        &-title {
+          display: block;
+        }
+
+        nav {
+          display: block;
+        }
+
+        &-links {
+          flex-direction: column;
+          padding-top: $spacer * 1.5;
+          padding-bottom: 0;
+          border-top: pxToRem(1) solid $neutral-80;
+          border-bottom: none;
+        }
+      }
+    }
+  }
+}

qdrant-landing/themes/qdrant-2024/assets/css/partials/_qdrant-post.scss

@@ -9,6 +9,10 @@
     text-align: center;
   }
 
+  &__breadcrumbs {
+    margin-bottom: $spacer * 3;
+  }
+
   &__title {
     font-size: $spacer * 2;
     line-height: pxToRem(38);

qdrant-landing/themes/qdrant-2024/layouts/blog/single.html

@@ -1,7 +1,9 @@
 {{ define "main" }}
   {{ partial "site-header" . }}
 
-  {{ partial "qdrant-post" (dict "context" . ) }}
+  {{ partial "progress-bar" . }}
+
+  {{ partial "qdrant-post" (dict "context" . "variant" "blog-post" ) }}
 
   {{ with (.Site.GetPage "/headless/get-started-blogs") }}
     {{ partial "get-started-small" (dict "context" . "class" "get-started-blogs") }}

qdrant-landing/themes/qdrant-2024/layouts/partials/js.html

@@ -146,3 +146,20 @@
     });
   </script>
 {{ end }}
+
+{{ if and (eq .Section "blog") (.IsPage) }}
+  <script>
+    document.addEventListener("scroll", () => {
+      const article = document.getElementById("article");
+      const progress = document.getElementById("progress");
+
+      const articleHeight = article.scrollHeight - window.innerHeight;
+      const scrollTop = window.scrollY - article.offsetTop;
+
+      progress.value = Math.min(
+        Math.max((scrollTop / articleHeight) * 100, 0),
+        100
+      );
+    });
+  </script>
+{{ end }}

qdrant-landing/themes/qdrant-2024/layouts/partials/progress-bar.html

@@ -0,0 +1 @@
+<progress id="progress" class="progress-bar" value="0" max="100">0</progress>

qdrant-landing/themes/qdrant-2024/layouts/partials/qdrant-post.html

@@ -1,5 +1,5 @@
-<section class="qdrant-post {{ if eq .variant "centered" }}qdrant-post_centered{{ end }}">
+<section class="qdrant-post {{ if eq .variant "centered" }}qdrant-post_centered{{ else if eq .variant "blog-post" }}qdrant-blog-post{{ end }}">
-  <article class="container">
+  <article id="article" class="container">
     <div class="qdrant-post__header">
       <h1 class="qdrant-post__title">{{ .context.Params.title }}</h1>
       <div class="qdrant-post__about">
@@ -18,21 +18,39 @@
         </picture>
       {{ end }}
     </div>
-    <div class="row">
+    <div class="row qdrant-post__breadcrumbs">
-      <div class="col-12 mb-5">
+      <div class="col-12">
         {{ partial "breadcrumbs" .context }}
       </div>
     </div>
 
     <div class="qdrant-post__body">
-      {{ if ne .variant "centered" }}
+      {{ if eq .variant "blog-post" }}
-        {{ partial "share-buttons" .context }}
+      <div class="qdrant-post__nav">
+        {{ with (.context.Site.GetPage "/headless/share-buttons") }}
+          <h6 class="qdrant-post__nav-title">{{ .Params.navTitle }}</h6>
+        {{ end }}
+        {{ .context.TableOfContents }}
+        <div class="qdrant-post__nav-links">
+          {{ $link := urlquery .context.Permalink }}
+          {{ $title := .context.Title }}
+          {{ with (.context.Site.GetPage "/headless/share-buttons") }}
+            {{ range .Params.buttons }}
+              {{ $url := .url | replaceRE "\\{\\{\\s*\\$link\\s*\\}\\}" $link | replaceRE "\\{\\{\\s*\\$title\\s*\\}\\}" $title }}
+              <a href="{{ $url }}" target="_blank" rel="noopener noreferrer" title="{{ .title }}">
+                {{ .icon | safeHTML }}
+                {{ .subtitle }}
+              </a>
+            {{ end }}
+          {{ end }}
+        </div>
+      </div>
       {{ end }}
 
-
       <div class="qdrant-post__content">
         {{ partial "article-content" .context }}
       </div>
+
       {{ if eq .variant "centered" }}
         {{ .context.Scratch.Set "variant" "horizontal" }}
         {{ partial "share-buttons" .context }}