Skip to content

Commit 2f38a71

Browse files
nastyapashnastyapash
authored
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
1 parent 241cf20 commit 2f38a71

File tree

9 files changed

+247
-9
lines changed

9 files changed

+247
-9
lines changed

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

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
---
22
title: Social Share Buttons
3+
navTitle: "On this page:"
34
buttons:
45
- id: x
56
title: x
7+
subtitle: Share on X
68
url: https://twitter.com/intent/tweet?url={{ $link }}&text={{ $title }}
79
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>
810
- id: linkedin
911
title: LinkedIn
12+
subtitle: Share on LinkedIn
1013
url: https://www.linkedin.com/sharing/share-offsite/?url={{ $link }}
1114
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>
12-
---
15+
---

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

+2
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
@import 'partials/demos';
4141
@import 'partials/tutorials';
4242
@import 'partials/qdrant-blog-features';
43+
@import 'partials/qdrant-blog-post';
4344
@import 'partials/qdrant-blog-posts';
4445
@import 'partials/qdrant-blog-hero';
4546
@import 'partials/pagination';
@@ -104,3 +105,4 @@
104105
@import 'partials/rag-evaluation-guide-integrations';
105106
@import 'partials/rag-evaluation-guide-kubernetes-clusters';
106107
@import 'partials/rag-evaluation-guide-features';
108+
@import 'partials/progress-bar';

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

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
@use '../helpers/functions' as *;
2+
@use 'sass:math';
3+
4+
.progress-bar {
5+
display: block;
6+
position: sticky;
7+
top: pxToRem(60);
8+
left: 0;
9+
right: 0;
10+
height: math.div($spacer, 4);
11+
width: 100%;
12+
border-radius: 0;
13+
border: none;
14+
color: $primary-50;
15+
z-index: 1;
16+
-webkit-appearance: none;
17+
-moz-appearance: none;
18+
appearance: none;
19+
20+
&::-webkit-progress-bar {
21+
background-color: $neutral-98;
22+
}
23+
24+
&::-webkit-progress-value {
25+
background-color: $primary-50;
26+
}
27+
28+
&::-moz-progress-bar {
29+
background-color: $primary-50;
30+
}
31+
32+
@include media-breakpoint-up(xl) {
33+
top: pxToRem(52);
34+
}
35+
}
36+
37+
:indeterminate::-moz-progress-bar {
38+
width: 0;
39+
}

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

+152
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
@use '../helpers/functions' as *;
2+
@use 'sass:math';
3+
4+
.qdrant-blog-post {
5+
article {
6+
display: flex;
7+
flex-direction: column;
8+
}
9+
10+
.qdrant-post {
11+
&__breadcrumbs {
12+
margin-top: $spacer * 2.5;
13+
margin-bottom: $spacer;
14+
order: 1;
15+
}
16+
17+
&__title {
18+
text-align: left;
19+
}
20+
21+
&__about {
22+
justify-content: flex-start;
23+
margin-bottom: $spacer * 1.5;
24+
}
25+
26+
&__header {
27+
padding-top: 0;
28+
padding-bottom: $spacer * 1.5;
29+
order: 2;
30+
}
31+
32+
&__body {
33+
gap: $spacer * 1.5;
34+
padding-bottom: $spacer * 5;
35+
order: 3;
36+
}
37+
38+
&__nav {
39+
a {
40+
font-size: pxToRem(14);
41+
line-height: pxToRem(21);
42+
color: $neutral-20;
43+
}
44+
45+
&-title {
46+
display: none;
47+
margin-bottom: $spacer * 0.5;
48+
padding: 0 $spacer * 0.5 $spacer * 0.5;
49+
font-size: $spacer;
50+
line-height: $spacer * 1.5;
51+
color: $neutral-20;
52+
}
53+
54+
nav {
55+
display: none;
56+
margin-bottom: $spacer;
57+
58+
ul {
59+
padding-left: 0;
60+
}
61+
62+
li {
63+
list-style: none;
64+
65+
a {
66+
display: block;
67+
margin-bottom: math.div($spacer, 4);
68+
padding: math.div($spacer, 4) $spacer * 0.5;
69+
}
70+
}
71+
}
72+
73+
&-links {
74+
display: flex;
75+
justify-content: space-between;
76+
gap: pxToRem(12);
77+
padding-bottom: $spacer * 1.5;
78+
border-bottom: pxToRem(1) solid $neutral-80;
79+
80+
a {
81+
display: flex;
82+
align-items: center;
83+
gap: $spacer * 0.5;
84+
padding-left: $spacer * 0.5;
85+
86+
svg {
87+
height: $spacer;
88+
width: $spacer;
89+
}
90+
}
91+
}
92+
}
93+
}
94+
95+
@media (min-width: 1200px) {
96+
.qdrant-post {
97+
&__breadcrumbs {
98+
margin-top: $spacer * 1.5;
99+
margin-bottom: $spacer * 2.5;
100+
}
101+
102+
&__title {
103+
text-align: center;
104+
}
105+
106+
&__about {
107+
justify-content: center;
108+
margin-bottom: $spacer * 2.5;
109+
}
110+
111+
&__header {
112+
padding-bottom: $spacer * 4;
113+
}
114+
115+
&__body {
116+
align-items: flex-start;
117+
flex-direction: row-reverse;
118+
gap: $spacer * 4;
119+
width: pxToRem(984);
120+
margin-left: pxToRem(91);
121+
}
122+
123+
&__content {
124+
width: calc(100% - $spacer * 19);
125+
}
126+
127+
&__nav {
128+
position: sticky;
129+
top: $spacer * 4;
130+
right: 0;
131+
width: $spacer * 15;
132+
padding-top: $spacer;
133+
134+
&-title {
135+
display: block;
136+
}
137+
138+
nav {
139+
display: block;
140+
}
141+
142+
&-links {
143+
flex-direction: column;
144+
padding-top: $spacer * 1.5;
145+
padding-bottom: 0;
146+
border-top: pxToRem(1) solid $neutral-80;
147+
border-bottom: none;
148+
}
149+
}
150+
}
151+
}
152+
}

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

+4
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@
99
text-align: center;
1010
}
1111

12+
&__breadcrumbs {
13+
margin-bottom: $spacer * 3;
14+
}
15+
1216
&__title {
1317
font-size: $spacer * 2;
1418
line-height: pxToRem(38);

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
{{ define "main" }}
22
{{ partial "site-header" . }}
33

4-
{{ partial "qdrant-post" (dict "context" . ) }}
4+
{{ partial "progress-bar" . }}
5+
6+
{{ partial "qdrant-post" (dict "context" . "variant" "blog-post" ) }}
57

68
{{ with (.Site.GetPage "/headless/get-started-blogs") }}
79
{{ partial "get-started-small" (dict "context" . "class" "get-started-blogs") }}

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

+17
Original file line numberDiff line numberDiff line change
@@ -146,3 +146,20 @@
146146
});
147147
</script>
148148
{{ end }}
149+
150+
{{ if and (eq .Section "blog") (.IsPage) }}
151+
<script>
152+
document.addEventListener("scroll", () => {
153+
const article = document.getElementById("article");
154+
const progress = document.getElementById("progress");
155+
156+
const articleHeight = article.scrollHeight - window.innerHeight;
157+
const scrollTop = window.scrollY - article.offsetTop;
158+
159+
progress.value = Math.min(
160+
Math.max((scrollTop / articleHeight) * 100, 0),
161+
100
162+
);
163+
});
164+
</script>
165+
{{ end }}

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

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<progress id="progress" class="progress-bar" value="0" max="100">0</progress>

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

+25-7
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<section class="qdrant-post {{ if eq .variant "centered" }}qdrant-post_centered{{ end }}">
2-
<article class="container">
1+
<section class="qdrant-post {{ if eq .variant "centered" }}qdrant-post_centered{{ else if eq .variant "blog-post" }}qdrant-blog-post{{ end }}">
2+
<article id="article" class="container">
33
<div class="qdrant-post__header">
44
<h1 class="qdrant-post__title">{{ .context.Params.title }}</h1>
55
<div class="qdrant-post__about">
@@ -18,21 +18,39 @@ <h1 class="qdrant-post__title">{{ .context.Params.title }}</h1>
1818
</picture>
1919
{{ end }}
2020
</div>
21-
<div class="row">
22-
<div class="col-12 mb-5">
21+
<div class="row qdrant-post__breadcrumbs">
22+
<div class="col-12">
2323
{{ partial "breadcrumbs" .context }}
2424
</div>
2525
</div>
2626

2727
<div class="qdrant-post__body">
28-
{{ if ne .variant "centered" }}
29-
{{ partial "share-buttons" .context }}
28+
{{ if eq .variant "blog-post" }}
29+
<div class="qdrant-post__nav">
30+
{{ with (.context.Site.GetPage "/headless/share-buttons") }}
31+
<h6 class="qdrant-post__nav-title">{{ .Params.navTitle }}</h6>
32+
{{ end }}
33+
{{ .context.TableOfContents }}
34+
<div class="qdrant-post__nav-links">
35+
{{ $link := urlquery .context.Permalink }}
36+
{{ $title := .context.Title }}
37+
{{ with (.context.Site.GetPage "/headless/share-buttons") }}
38+
{{ range .Params.buttons }}
39+
{{ $url := .url | replaceRE "\\{\\{\\s*\\$link\\s*\\}\\}" $link | replaceRE "\\{\\{\\s*\\$title\\s*\\}\\}" $title }}
40+
<a href="{{ $url }}" target="_blank" rel="noopener noreferrer" title="{{ .title }}">
41+
{{ .icon | safeHTML }}
42+
{{ .subtitle }}
43+
</a>
44+
{{ end }}
45+
{{ end }}
46+
</div>
47+
</div>
3048
{{ end }}
3149

32-
3350
<div class="qdrant-post__content">
3451
{{ partial "article-content" .context }}
3552
</div>
53+
3654
{{ if eq .variant "centered" }}
3755
{{ .context.Scratch.Set "variant" "horizontal" }}
3856
{{ partial "share-buttons" .context }}

0 commit comments

Comments
 (0)