diff --git a/qdrant-landing/themes/qdrant-2024/assets/css/main.scss b/qdrant-landing/themes/qdrant-2024/assets/css/main.scss index 71db4ab96..f41fa0c61 100644 --- a/qdrant-landing/themes/qdrant-2024/assets/css/main.scss +++ b/qdrant-landing/themes/qdrant-2024/assets/css/main.scss @@ -106,3 +106,4 @@ @import 'partials/rag-evaluation-guide-kubernetes-clusters'; @import 'partials/rag-evaluation-guide-features'; @import 'partials/progress-bar'; +@import 'partials/table-of-contents'; diff --git a/qdrant-landing/themes/qdrant-2024/assets/css/partials/_qdrant-blog-post.scss b/qdrant-landing/themes/qdrant-2024/assets/css/partials/_qdrant-blog-post.scss index 858363d16..9a879a074 100644 --- a/qdrant-landing/themes/qdrant-2024/assets/css/partials/_qdrant-blog-post.scss +++ b/qdrant-landing/themes/qdrant-2024/assets/css/partials/_qdrant-blog-post.scss @@ -34,62 +34,6 @@ 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) { @@ -123,30 +67,6 @@ &__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; - } - } } } } diff --git a/qdrant-landing/themes/qdrant-2024/assets/css/partials/_table-of-contents.scss b/qdrant-landing/themes/qdrant-2024/assets/css/partials/_table-of-contents.scss index 06bbb0b0b..1a2c1ba83 100644 --- a/qdrant-landing/themes/qdrant-2024/assets/css/partials/_table-of-contents.scss +++ b/qdrant-landing/themes/qdrant-2024/assets/css/partials/_table-of-contents.scss @@ -8,12 +8,12 @@ display: none; margin-bottom: 0; padding: 0 math.div($spacer, 2) $spacer; - color: $neutral-98; + color: $neutral-20; } &__title { display: none; - color: $neutral-98; + color: $neutral-30; margin-bottom: math.div($spacer, 4); padding: math.div($spacer, 4) math.div($spacer, 2); font-size: pxToRem(14); @@ -36,7 +36,8 @@ a { display: block; padding: math.div($spacer, 4) math.div($spacer, 2); - color: $neutral-70; + color: $neutral-30; + font-weight: 400; font-size: pxToRem(14); line-height: pxToRem(21); white-space: nowrap; @@ -45,13 +46,13 @@ transition: all 0.3s; &:hover { - color: $neutral-98; + color: $primary-50; } &.active { font-weight: 600; - background-color: $neutral-30; - color: $neutral-90; + background-color: $neutral-90; + color: $neutral-30; border-radius: $spacer * 0.5; } } @@ -63,8 +64,8 @@ } &__external-links { - border-top: pxToRem(1) solid $neutral-20; - border-bottom: pxToRem(1) solid $neutral-20; + border-top: 1px solid $neutral-90; + border-bottom: 1px solid $neutral-90; list-style: none; padding: $spacer * 1.5 0; margin: 0; @@ -84,10 +85,15 @@ align-items: center; gap: calc($spacer / 2); padding: 0 math.div($spacer, 2); - color: $neutral-98; + color: $neutral-30; + font-weight: 500; &:hover { - text-decoration: underline; + color: $primary-50; + text-decoration: none; + svg path { + fill: $primary-50; + } } } @@ -95,6 +101,9 @@ display: block; width: pxToRem(16); height: pxToRem(16); + path { + fill: $neutral-30; + } } } @@ -107,7 +116,6 @@ top: $spacer * 5; margin-bottom: pxToRem(220); flex-shrink: 0; - padding: $spacer * 1.5 $spacer $spacer * 1.5 pxToRem(40); &__external-links { border-bottom: none; @@ -120,55 +128,87 @@ } } - [data-theme='light'] & { + [data-theme='dark'] & { &__title, &__head { - color: $neutral-30; - } - - &__title { - color: $neutral-30; - font-weight: 400; + color: $neutral-98; } a { - color: $neutral-30; - font-weight: 400; + color: $neutral-70; transition: all 0.3s; &:hover { - color: $primary-50; + color: $neutral-98; } &.active { font-weight: 600; - background-color: $neutral-90; - color: $neutral-30; + background-color: $neutral-30; + color: $neutral-90; border-radius: $spacer * 0.5; } } &__external-links { - border-top: 1px solid $neutral-90; - border-bottom: 1px solid $neutral-90; + border-top: 1px solid $neutral-20; + border-bottom: 1px solid $neutral-20; } &__link { a { - color: $neutral-30; + color: $neutral-98; transition: color 0.3s, fill 0.25s; - font-weight: 500; svg path { - fill: $neutral-30; + fill: $neutral-98; } &:hover { - color: $primary-50; - text-decoration: none; + text-decoration: underline; + color: $neutral-98; svg path { - fill: $primary-50; + fill: $neutral-98; } } } } } + + // scoped styles + .documentation & { + &__external-links { + display: none; + } + @include media-breakpoint-up(xl) { + padding: $spacer * 1.5 $spacer $spacer * 1.5 pxToRem(40); + &__external-links { + display: block; + } + } + } + + .qdrant-blog-post & { + &__external-links { + display: flex; + justify-content: space-between; + column-gap: pxToRem(12); + padding-bottom: $spacer * 1.5; + } + @include media-breakpoint-down(xl) { + &__external-links { + padding-top: 0; + border-top: 0; + } + &__link { + margin: 0; + } + } + @include media-breakpoint-up(xl) { + width: $spacer * 15; + padding-top: $spacer; + + &__external-links { + flex-direction: column; + } + } + } } diff --git a/qdrant-landing/themes/qdrant-2024/assets/js/index.js b/qdrant-landing/themes/qdrant-2024/assets/js/index.js index c1284ba0f..578547444 100644 --- a/qdrant-landing/themes/qdrant-2024/assets/js/index.js +++ b/qdrant-landing/themes/qdrant-2024/assets/js/index.js @@ -2,6 +2,7 @@ import scrollHandler from './scroll-handler'; import { XXL_BREAKPOINT } from './constants'; import { initGoToTopButton, getCookie } from './helpers'; import { loadSegment, createSegmentStoredPage } from './segment-helpers'; +import TableOfContents from './table-of-content'; createSegmentStoredPage(); @@ -101,4 +102,8 @@ document.addEventListener('DOMContentLoaded', function () { }); initGoToTopButton('#scrollToTopBtn'); + + if (document.getElementById('TableOfContents') && document.querySelector('.qdrant-post__body')) { + new TableOfContents('#TableOfContents', '.qdrant-post__body'); + } }); diff --git a/qdrant-landing/themes/qdrant-2024/layouts/partials/qdrant-post.html b/qdrant-landing/themes/qdrant-2024/layouts/partials/qdrant-post.html index 1a2e75ac6..4c4266631 100644 --- a/qdrant-landing/themes/qdrant-2024/layouts/partials/qdrant-post.html +++ b/qdrant-landing/themes/qdrant-2024/layouts/partials/qdrant-post.html @@ -1,4 +1,10 @@ -
+

{{ .context.Params.title }}

@@ -26,27 +32,10 @@
{{ if eq .variant "blog-post" }} -
- {{ with (.context.Site.GetPage "/headless/share-buttons") }} -
{{ .Params.navTitle }}
- {{ end }} - {{ .context.TableOfContents }} -
- {{ $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 }} - - {{ .icon | safeHTML }} - {{ .subtitle }} - - {{ end }} - {{ end }} -
-
+ {{ partial "table-of-contents" .context }} {{ end }} +
{{ partial "article-content" .context }}
diff --git a/qdrant-landing/themes/qdrant-2024/layouts/partials/table-of-contents.html b/qdrant-landing/themes/qdrant-2024/layouts/partials/table-of-contents.html index 8943cd4ca..81feb3530 100644 --- a/qdrant-landing/themes/qdrant-2024/layouts/partials/table-of-contents.html +++ b/qdrant-landing/themes/qdrant-2024/layouts/partials/table-of-contents.html @@ -7,18 +7,37 @@
{{ end }}