mirror of
https://github.com/qdrant/landing_page.git
synced 2026-10-04 18:38:30 +02:00
reuse TOC from docs on blog pages (#1286)
This commit is contained in:
@@ -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 }}
|
||||
|
||||
Reference in New Issue
Block a user