reuse TOC from docs on blog pages (#1286)

This commit is contained in:
trean
2024-11-14 21:31:37 +01:00
committed by GitHub
parent aa1acf0acb
commit f69c99d3b2
6 changed files with 117 additions and 143 deletions
@@ -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';
@@ -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;
}
}
}
}
}
@@ -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;
}
}
}
}
@@ -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');
}
});
@@ -1,4 +1,10 @@
<section class="qdrant-post {{ if eq .variant "centered" }}qdrant-post_centered{{ else if eq .variant "blog-post" }}qdrant-blog-post{{ end }}">
<section
class="qdrant-post {{ if eq .variant "centered" }}
qdrant-post_centered
{{ else if eq .variant "blog-post" }}
qdrant-blog-post
{{ end }}"
>
<article id="article" class="container">
<div class="qdrant-post__header">
<h1 class="qdrant-post__title">{{ .context.Params.title }}</h1>
@@ -26,27 +32,10 @@
<div class="qdrant-post__body">
{{ if eq .variant "blog-post" }}
<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>
{{ partial "table-of-contents" .context }}
{{ end }}
<div class="qdrant-post__content">
{{ partial "article-content" .context }}
</div>
@@ -7,18 +7,37 @@
<ul class="table-of-contents__external-links">
<li class="table-of-contents__link">
<a href="{{ .Site.Params.githubDocPrefix }}{{ path.Clean .File.Path }}" target="_blank">
{{ partial "svg" "github.svg" }}
Edit on Github
</a>
</li>
<li class="table-of-contents__link">
<a href="{{ .Site.Params.githubIssueLink }}" target="_blank">
{{ partial "svg" "bug.svg" }}
Create an issue
</a>
</li>
{{ if eq .Section "documentation" }}
<li class="table-of-contents__link">
<a href="{{ .Site.Params.githubDocPrefix }}{{ path.Clean .File.Path }}" target="_blank">
{{ partial "svg" "github.svg" }}
Edit on Github
</a>
</li>
<li class="table-of-contents__link">
<a href="{{ .Site.Params.githubIssueLink }}" target="_blank">
{{ partial "svg" "bug.svg" }}
Create an issue
</a>
</li>
{{ end }}
{{ if eq .Section "blog" }}
{{ $link := urlquery .Permalink }}
{{ $title := .Title }}
{{ with (.Site.GetPage "/headless/share-buttons") }}
{{ range .Params.buttons }}
{{ $url := .url | replaceRE "\\{\\{\\s*\\$link\\s*\\}\\}" $link | replaceRE "\\{\\{\\s*\\$title\\s*\\}\\}" $title }}
<li class="table-of-contents__link">
<a href="{{ $url }}" target="_blank" rel="noopener noreferrer" title="{{ .title }}">
{{ .icon | safeHTML }}
{{ .subtitle }}
</a>
</li>
{{ end }}
{{ end }}
{{ end }}
</ul>
</div>
{{ end }}