Skip to content

Commit 4005edc

Browse files
josuebranjosuebran
authored
Page - Vector Docs Home (#14)
* Added feature card styles * Added explore column component * Fix landing template max-width * Added card component * Fix desktop max-width
1 parent e8415db commit 4005edc

File tree

8 files changed

+353
-2
lines changed

8 files changed

+353
-2
lines changed

‎preview-src/browser.png‎

44.2 KB
Loading

‎preview-src/index.adoc‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ Quisque pharetra tristique arcu fringilla dapibus.
2424
https://example.org[Curabitur,role=unresolved] ut massa aliquam, cursus enim et, accumsan lectus.
2525
Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna.
2626

27+
xref:vector-home.adoc[Vector Home,role="ds-button ds-button\--color-primary ds-button\--variant-solid"]
28+
2729
== Headers and Titles
2830

2931
=== Section Title (Level 1)
@@ -379,4 +381,4 @@ ____
379381

380382
== Fin
381383

382-
That's all, folks!
384+
That's all, folks!

‎preview-src/vector-home.adoc‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
= DataStax Astra Vector
2+
:page-layout: landing
3+
4+
Efficiently store and query vector embeddings for better similarity search. If you're new, read our xref:ROOT:templates/examples/concepts.adoc[introduction to vector databases].
5+
6+
[.ds-feature.header-noline]
7+
== Get Started
8+
--
9+
Dive straight into Astra Vector with this concise guide tailored for developers. These essential steps will walk you through the setup process, ensuring you're up and running quickly.
10+
11+
[.ds-feature-buttons]
12+
xref:ROOT:templates/examples/quickstart.adoc[Quick Start,role="ds-button ds-button\--color-primary ds-button\--variant-solid"] https://astra.datastax.com[Create Astra Account^,role="ds-button ds-button\--color-neutral ds-button\--variant-outlined"]
13+
--
14+
15+
[.ds-feature-code,js]
16+
----
17+
import vector
18+
19+
# Create a new vector database
20+
db = vector.Database("my_vector_db")
21+
22+
# Ingest vectors into your database
23+
db.ingest("s3://vector-embeddings-bucket/")
24+
25+
# Find the closest vectors
26+
query_vector = [0.9, 2.2, 2.8]
27+
results = db.query(query_vector, limit=3)
28+
----
29+
30+
[.explore.header-noline.ds-row.ds-grid]
31+
== Explore Docs
32+
33+
=== Guides
34+
35+
Concise how-tos of common tasks with Astra.
36+
37+
[unstyled.landing-a]
38+
* link:{#}[Load vector data]
39+
* link:{#}[Explore my data]
40+
* link:{#}[Manage my embeddings]
41+
42+
[.material-icons.landing-card-icon]
43+
fact_check
44+
45+
=== Tutorials
46+
47+
Dive into step-by-step lessons to master the essentials.
48+
49+
[unstyled.landing-a]
50+
* link:{#}[Build a chatbot]
51+
* link:{#}[Enhance a recommendation system]
52+
* link:{#}[Write an AI agent]
53+
54+
[.material-icons.landing-card-icon]
55+
auto_stories
56+
57+
=== Clients
58+
59+
Explore dedicated applications built to enhance your experience.
60+
61+
[unstyled.landing-a]
62+
* link:{#}[How do I use the Python client]
63+
* link:{#}[How do I use the Node.js client]
64+
* link:{#}[Connect using the JSON API]
65+
66+
[.material-icons.landing-card-icon]
67+
power
68+
69+
=== Integrations
70+
71+
Seamlessly connect with your favorite tools and platforms
72+
73+
[unstyled.landing-a]
74+
* link:{#}[Connect to OpenAI]
75+
* link:{#}[Connect to LangChain]
76+
* link:{#}[Connect to LlamaIndex]
77+
78+
[.material-icons.landing-card-icon]
79+
integration_instructions
80+
81+
82+
[.ds-row.header-noline]
83+
== What's New?
84+
85+
[.ds-card.ds-grid]
86+
--
87+
[discrete]
88+
=== DataStax Astra Integrations
89+
90+
Amplify your development potential with integrations crafted for popular platforms and languages. Dive deep into how DataStax Astra seamlessly interacts with Python, Java, Node.js, and more.
91+
92+
[.landing-a]
93+
link:{#}[Explore Astra Integrations]
94+
95+
image:browser.png[Browser,100%,float=bottom,role=float-gap]
96+
97+
[.material-icons.landing-card-icon]
98+
integration_instructions
99+
--
100+
101+
[.ds-row]
102+
--
103+
[.ds-card]
104+
====
105+
[discrete]
106+
=== Scaling Production Workloads
107+
108+
Equip yourself with the tools and techniques to scale your applications effectively. Meet the demands of today while preparing for the challenges of tomorrow.
109+
110+
[.landing-a]
111+
link:{#}[Discover Scalability Techniques]
112+
====
113+
114+
[.ds-card]
115+
====
116+
[discrete]
117+
=== Securing Your Vector Databases
118+
119+
Prioritize the protection of your invaluable data. Explore advanced strategies and tools designed to safeguard your vector databases from potential threats.
120+
121+
[.landing-a]
122+
link:{#}[Learn about Database Security]
123+
====
124+
--
125+
126+
[.ds-row]
127+
== Community & Support
128+
129+
=== Join the Conversation
130+
131+
Engage with our vibrant community of developers. Ask questions, share knowledge, or just hang out and chat about all things DataStax Astra.
132+
133+
link:{#}[Join on Discord] · link:{#}[Follow on X]
134+
135+
=== Need More Help?
136+
137+
[unstyled.landing-support]
138+
* link:{#}[Ask the Astra community,role="community"]
139+
* link:{#}[Get in touch with support,role="support"]

‎src/css/doc.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -640,7 +640,7 @@
640640

641641
.doc .olist li + li,
642642
.doc .ulist li + li {
643-
margin-top: var(--ds-space-1);
643+
margin-top: var(--ds-space-2);
644644
}
645645

646646
.doc .ulist .listingblock,

‎src/css/ds-card.css‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
/* card */
2+
.ds-card .content,
3+
.doc .exampleblock.ds-card > .content {
4+
padding: var(--ds-space-3);
5+
border-radius: calc(6 / var(--rem-base) * 1rem);
6+
border: 1px solid var(--ds-divider);
7+
}
8+
9+
.doc .paragraph.landing-card-icon,
10+
.doc .exampleblock.ds-card {
11+
margin: 0;
12+
}
13+
14+
.ds-card .image.bottom img {
15+
margin-bottom: calc(24 / var(--rem-base) * -1 * 1rem);
16+
}
17+
18+
/* Feature Card */
19+
.ds-feature {
20+
padding: var(--ds-space-3);
21+
background: var(--ds-neutral-soft-bg);
22+
border-radius: calc(10 / var(--rem-base) * 1rem);
23+
}
24+
25+
.ds-feature .sectionbody {
26+
display: flex;
27+
flex-direction: column;
28+
}
29+
30+
.ds-feature .sectionbody > * {
31+
flex: 1;
32+
}
33+
34+
.doc .ds-feature.header-noline h2:not(.discrete) {
35+
padding: 0;
36+
}
37+
38+
.doc .ds-feature .paragraph {
39+
margin-top: var(--ds-space-2);
40+
}
41+
42+
#preamble + .sect1.ds-feature,
43+
.doc .sect1 + .sect1.ds-feature {
44+
margin-top: var(--ds-space-7);
45+
}
46+
47+
/* Feature Card - Button */
48+
.ds-feature-buttons p {
49+
display: flex;
50+
gap: var(--ds-space-1);
51+
}
52+
53+
.doc .ds-feature-buttons.paragraph {
54+
margin-top: var(--ds-space-4);
55+
}
56+
57+
/* Feature Card - Code */
58+
.doc .ds-feature-code code,
59+
.doc .ds-feature-code pre.highlight code {
60+
background: var(--ds-text-primary);
61+
font-size: calc(15.5 / var(--rem-base) * 1rem);
62+
}
63+
64+
.doc .ds-feature-code pre.highlight code,
65+
.doc .ds-feature-code.literalblock pre code {
66+
padding: var(--ds-space-2) var(--ds-space-3);
67+
}
68+
69+
@media screen and (min-width: 1200px) {
70+
.ds-feature .sectionbody {
71+
flex-direction: row;
72+
}
73+
74+
.doc .ds-feature-code.listingblock > .content {
75+
position: absolute;
76+
width: 100%;
77+
top: calc(50%);
78+
transform: translateY(-50%);
79+
}
80+
81+
.doc .ds-feature-code.listingblock {
82+
position: relative;
83+
margin: 0;
84+
margin-top: calc(27 / var(--rem-base) * -1 * 1rem);
85+
}
86+
}

‎src/css/ds-layout.css‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
/*
2+
*
3+
* Landing template
4+
*
5+
*/
6+
7+
/* Extend .doc max-width */
8+
@media screen and (min-width: 1024px) {
9+
html[data-layout="landing"] {
10+
.doc {
11+
max-width: calc(1280 / var(--rem-base) * 1rem);
12+
}
13+
}
14+
}
15+
16+
/* Hide sidebar, a.anchor */
17+
html[data-layout="landing"] .toc.sidebar,
18+
html[data-layout="landing"] a.anchor {
19+
display: none;
20+
}
21+
22+
html[data-layout="landing"] .doc > h1.page:first-child {
23+
font-size: calc(34 / var(--rem-base) * 1rem);
24+
margin-top: var(--ds-space-3);
25+
margin-top: var(--ds-space-2);
26+
}
27+
28+
html[data-layout="landing"] #preamble {
29+
max-width: 650px;
30+
}
31+
32+
.ds-row > .sectionbody,
33+
.ds-row > .content {
34+
display: flex;
35+
flex-direction: column;
36+
align-items: flex-start;
37+
flex-wrap: wrap;
38+
gap: var(--ds-space-3);
39+
}
40+
41+
.ds-row .sectionbody > * {
42+
flex: 1;
43+
}
44+
45+
.ds-grid .sectionbody > *,
46+
.ds-grid > .content {
47+
display: grid;
48+
}
49+
50+
@media screen and (min-width: 1200px) {
51+
.ds-row .sectionbody {
52+
flex-direction: row;
53+
}
54+
}
55+
56+
.doc .header-noline h2:not(.discrete) {
57+
border-bottom: none;
58+
padding-bottom: var(--ds-space-3);
59+
}
60+
61+
.ds-row.explore .sectionbody .sect2 > *:not(.landing-card-icon) {
62+
margin-top: var(--ds-space-2);
63+
}
64+
65+
/* Landing card icon */
66+
.material-icons.landing-card-icon {
67+
max-width: fit-content;
68+
font-size: calc(20 / var(--rem-base) * 1rem);
69+
padding: calc(10 / var(--rem-base) * 1rem);
70+
border: 1px solid var(--ds-neutral-outlined-border);
71+
border-radius: calc(6 / var(--rem-base) * 1rem);
72+
grid-row-start: 1;
73+
margin-top: 0;
74+
}
75+
76+
/* Links */
77+
.doc .landing-a a {
78+
padding-right: var(--ds-space-2);
79+
}
80+
81+
.landing-a a::after {
82+
font-family: "Material Icons Outlined", sans-serif;
83+
content: '\e5c8';
84+
font-size: calc(20 / var(--rem-base) * 1rem);
85+
position: absolute;
86+
margin-left: var(--ds-space-h);
87+
margin-top: calc(4 / var(--rem-base) * -1 * 1rem);
88+
}
89+
90+
.landing-support a.support::before,
91+
.landing-support a.community::before {
92+
font-family: "Material Icons Outlined", sans-serif;
93+
content: '\ef73';
94+
font-size: calc(16 / var(--rem-base) * 1rem);
95+
margin-right: var(--ds-space-1);
96+
position: absolute;
97+
left: 0;
98+
}
99+
100+
.landing-support a.community::before {
101+
content: '\e7ef';
102+
}
103+
104+
.landing-support p {
105+
position: relative;
106+
}
107+
108+
.landing-support a.community,
109+
.landing-support a.support {
110+
margin-left: var(--ds-space-3);
111+
}

‎src/css/site.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
@import "ds-light.css";
66
@import "ds-dark.css";
77
@import "vars.css";
8+
@import "ds-layout.css";
9+
@import "ds-card.css";
810
@import "ds-typography.css";
911
@import "base.css";
1012
@import "body.css";

‎src/layouts/landing.hbs‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en" data-layout="landing">
3+
<head>
4+
{{> head defaultPageTitle='Untitled'}}
5+
</head>
6+
<body class="article{{#with (or page.attributes.role page.role)}} {{{this}}}{{/with}}">
7+
{{> header}}
8+
{{> body}}
9+
{{> footer}}
10+
</body>
11+
</html>

0 commit comments

Comments
 (0)