mirror of
https://github.com/qdrant/landing_page.git
synced 2026-09-25 14:08:30 +02:00
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
This commit is contained in:
nastyapash
@@ -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>
|
||||
---
|
||||
---
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -9,6 +9,10 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__breadcrumbs {
|
||||
margin-bottom: $spacer * 3;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2;
|
||||
line-height: pxToRem(38);
|
||||
|
||||
@@ -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") }}
|
||||
|
||||
@@ -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 }}
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
<progress id="progress" class="progress-bar" value="0" max="100">0</progress>
|
||||
@@ -1,5 +1,5 @@
|
||||
<section class="qdrant-post {{ if eq .variant "centered" }}qdrant-post_centered{{ end }}">
|
||||
<article class="container">
|
||||
<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>
|
||||
<div class="qdrant-post__about">
|
||||
@@ -18,21 +18,39 @@
|
||||
</picture>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 mb-5">
|
||||
<div class="row qdrant-post__breadcrumbs">
|
||||
<div class="col-12">
|
||||
{{ partial "breadcrumbs" .context }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="qdrant-post__body">
|
||||
{{ if ne .variant "centered" }}
|
||||
{{ partial "share-buttons" .context }}
|
||||
{{ 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>
|
||||
{{ end }}
|
||||
|
||||
|
||||
<div class="qdrant-post__content">
|
||||
{{ partial "article-content" .context }}
|
||||
</div>
|
||||
|
||||
{{ if eq .variant "centered" }}
|
||||
{{ .context.Scratch.Set "variant" "horizontal" }}
|
||||
{{ partial "share-buttons" .context }}
|
||||
|
||||
Reference in New Issue
Block a user