Skip to content

Commit c4bbbc4

Browse files
authored
Added tags and developer resources to content rail, styles for source blocks and cards (#18)
* Added tags and developer resources to content rail * Remove template * fix toc containers * Added styles for source blocks, cards and example for quickstart page * fix source block style
1 parent af3ca28 commit c4bbbc4

File tree

15 files changed

+395
-26
lines changed

15 files changed

+395
-26
lines changed
Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
= Quickstart
2+
:navtitle: Quickstart
3+
:page-layout: tutorial
4+
:page-colab-link: https://colab.research.google.com/github/CassioML/cassio-website/blob/main/docs/frameworks/langchain/.colab/colab_qa-basic.ipynb
5+
:page-time-commitment: 15 min
6+
:page-skill-level: Beginner
7+
:astra-link: https://astra.datastax.com
8+
:astra-nodejs-link: https://docs.datastax.com/en/astra-serverless/docs/develop/sdks/rest-nodejs-client.html
9+
:astra-json-link: https://docs.datastax.com/en/astra-serverless/docs/develop/dev-with-json.html
10+
:keywords: Machine Learning Frameworks, Embeding Services, Astra, SDK
11+
12+
== Objective
13+
14+
Learn how to create a new database, connect to your database, load a set of vector embeddings, and perform a similarity search to find vectors that are close to the one in your query.
15+
16+
image::ROOT:template-examples/quickstart-overview.png["Tutorial overview"]
17+
18+
== Prerequisites
19+
20+
To get started, ensure you have an {astra-link}[active Astra account] with the requisite permissions.
21+
22+
=== [.step]#1# Install the Python SDK and open a Python REPL.
23+
24+
[source,shell]
25+
----
26+
pip install astra-vector
27+
----
28+
29+
[source,shell]
30+
----
31+
python
32+
----
33+
34+
[TIP]
35+
====
36+
Additional clients, such as {astra-nodejs-link}[Node.js] and {astra-json-link}[JSON API], are available.
37+
====
38+
39+
=== [.step]#2# Connect to Astra and create a database.
40+
41+
[source,python]
42+
----
43+
import astra_vector
44+
45+
# Authenticate to the SaaS database
46+
api_key = 'your_api_key'
47+
client = astra_vector.Client(api_key)
48+
49+
# Create a new database
50+
database_name = 'my_vector_database'
51+
client.create_database(database_name)
52+
53+
# Connect to the database
54+
db = client.connect(database_name)
55+
56+
# Create a new table for vectors
57+
table_name = 'vector_data'
58+
db.create_table(table_name)
59+
----
60+
61+
== Core steps
62+
63+
=== [.step]#3# Prepare and ingest data.
64+
65+
[source,python]
66+
----
67+
# Load sample vector data
68+
sample_vectors = [
69+
{'id': 1, 'vector': [0.1, 0.2, 0.3]},
70+
{'id': 2, 'vector': [0.4, 0.5, 0.7]}
71+
]
72+
73+
for data in sample_vectors:
74+
db.insert_record(table_name, data)
75+
----
76+
77+
=== [.step]#4# Perform a similarity search.
78+
79+
[source,python]
80+
----
81+
# Run a similarity search
82+
query_vector = [0.2, 0.3, 0.4]
83+
results = db.similarity_search(table_name, query_vector, k=5)
84+
----
85+
86+
=== [.step]#5# Show the results.
87+
88+
[source,python]
89+
----
90+
# Similarity search results
91+
for result in results:
92+
print(f"ID: {result['id']}, Similarity Score: {result['score']}")
93+
----
94+
95+
== Cleanup
96+
97+
=== [.step]#6# Delete all resources.
98+
99+
[source,python]
100+
----
101+
# Delete the table
102+
db.delete_table(table_name)
103+
print(f"Table '{table_name}' deleted.")
104+
105+
# Delete the database
106+
client.delete_database(database_name)
107+
print(f"Database '{database_name}' deleted.")
108+
----
109+
110+
== Conclusion
111+
112+
In this tutorial, you learned how to:
113+
114+
* [*] Create a new database
115+
* [*] Connect to your database
116+
* [*] Load a set of vector embeddings
117+
* [*] Perform a similarity search to find vectors that are close to the one in your query
118+
119+
You're well on your way to becoming an Astra Vector expert!
120+
121+
[.header-noline]
122+
== Next Steps
123+
124+
[.ds-card]
125+
--
126+
[unstyled]
127+
* https://example.com[Grasp the basics] [.material-icons]#auto_stories# Tutorial
128+
+
129+
Before diving deep, ensure a solid understanding of foundational concepts surrounding vector databases.
130+
Delve into embeddings, the nature of high-dimensional data, and their profound impact on machine learning processes.
131+
--
132+
133+
[.ds-card]
134+
--
135+
[unstyled.guide]
136+
* https://example.com[Installation] [.material-icons]#fact_check# Guide
137+
+
138+
Before diving deep, ensure a solid understanding of foundational concepts surrounding vector databases.
139+
Delve into embeddings, the nature of high-dimensional data, and their profound impact on machine learning processes.
140+
--
141+
142+
[.ds-card]
143+
--
144+
[unstyled]
145+
* https://example.com[Ingest and store vector data] [.material-icons]#auto_stories# Tutorial
146+
+
147+
Before diving deep, ensure a solid understanding of foundational concepts surrounding vector databases.
148+
Delve into embeddings, the nature of high-dimensional data, and their profound impact on machine learning processes.
149+
--

preview-src/vector-home.adoc

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ query_vector = [0.9, 2.2, 2.8]
2727
results = db.query(query_vector, limit=3)
2828
----
2929

30-
[.explore.header-noline.ds-row.ds-grid]
30+
[.explore.header-noline.text-h1.ds-row.ds-grid]
3131
== Explore Docs
3232

3333
=== Guides

src/css/doc.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,9 @@
4141

4242
.doc > h1.page:first-child {
4343
margin: calc(24 / var(--rem-base) * 1rem) 0;
44+
display: flex;
45+
align-items: center;
46+
gap: var(--ds-space-1);
4447
}
4548

4649
.doc h1 {
@@ -192,6 +195,7 @@
192195
font-size: calc(14 / var(--rem-base) * 1rem);
193196
line-height: 1.5;
194197
margin: 0;
198+
overflow-x: scroll;
195199
}
196200

197201
.doc blockquote {
@@ -789,7 +793,7 @@
789793
box-shadow: inset 0 0 1.75px var(--pre-border-color);
790794
display: block;
791795
overflow-x: auto;
792-
padding: 0.875em;
796+
padding: var(--ds-space-2);
793797
}
794798

795799
.doc .listingblock > .content {

src/css/ds-blocks.css

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
/* Source block */
2+
3+
/*
4+
* Usage: [source,python]
5+
*
6+
* Default style: [source.default,python]
7+
*/
8+
9+
.listingblock:not(.default) .content {
10+
display: grid;
11+
}
12+
13+
.listingblock:not(.default) .content .source-toolbox {
14+
position: relative;
15+
padding: var(--ds-space-1) var(--ds-space-2);
16+
visibility: visible;
17+
justify-content: flex-end;
18+
background: var(--ds-neutral-100);
19+
grid-row-start: 1;
20+
border-top-left-radius: calc(6 / var(--rem-base) * 1rem);
21+
border-top-right-radius: calc(6 / var(--rem-base) * 1rem);
22+
top: 0;
23+
left: 0;
24+
}
25+
26+
.listingblock:not(.default) .content .source-toolbox .source-lang::after {
27+
display: none;
28+
}
29+
30+
.listingblock:not(.default) .content .source-toolbox .copy-button {
31+
justify-content: flex-end;
32+
flex-direction: column-reverse;
33+
}
34+
35+
.source-toolbox .copy-button > .material-icons {
36+
font-size: calc(16 / var(--rem-base) * 1rem);
37+
}
38+
39+
.listingblock:not(.default) .content .source-toolbox .source-lang {
40+
color: var(--ds-text-primary);
41+
text-transform: capitalize;
42+
font-family: var(--body-font-family);
43+
line-height: 1.5;
44+
letter-spacing: 0.65px;
45+
font-weight: var(--body-font-weight-bold);
46+
flex: 1;
47+
}
48+
49+
.listingblock:not(.default) .source-toolbox .copy-toast:not(:only-child)::after {
50+
transform: rotate(90deg) translateX(135%) translateY(-45%);
51+
}
52+
53+
.listingblock:not(.default) .source-toolbox .copy-button:not(:only-child) .copy-toast {
54+
margin: 0 0 var(--ds-space-2h) 0;
55+
}
56+
57+
.listingblock:not(.default) .source-toolbox .copy-button:only-child .copy-toast {
58+
margin: 0 0 calc(14 / var(--rem-base) * 1rem) 0;
59+
}
60+
61+
.listingblock:not(.default) .hljs {
62+
border-top-left-radius: 0;
63+
border-top-right-radius: 0;
64+
border-top-color: var(--ds-neutral-100);
65+
}
66+
67+
.listingblock .source-toolbox {
68+
right: var(--ds-space-2);
69+
}
70+
71+
html[data-theme="dark"] .listingblock:not(.default) .content .source-toolbox {
72+
background: var(--ds-neutral-700);
73+
}
74+
75+
html[data-theme="dark"] .listingblock:not(.default) .hljs {
76+
border-top-color: var(--ds-neutral-700);
77+
}

src/css/ds-card.css

Lines changed: 42 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,42 @@
11
/* card */
22
.ds-card .content,
33
.doc .exampleblock.ds-card > .content {
4+
display: grid;
45
padding: var(--ds-space-3);
56
border-radius: calc(6 / var(--rem-base) * 1rem);
67
border: 1px solid var(--ds-divider);
78
}
89

9-
.doc .paragraph.landing-card-icon,
10-
.doc .exampleblock.ds-card {
10+
.ds-card {
11+
margin-top: var(--ds-space-3);
12+
}
13+
14+
.doc .ds-card .paragraph {
15+
margin-top: var(--ds-space-2);
16+
}
17+
18+
.doc .ds-card .image:not(.left):not(.right) > img {
19+
margin-top: var(--ds-space-1);
20+
}
21+
22+
.ds-card > .content > :first-child {
23+
margin-top: 0;
24+
}
25+
26+
.ds-card .paragraph.landing-card-icon,
27+
.ds-card > .title {
28+
margin-top: 0;
29+
margin-bottom: var(--ds-space-3);
30+
}
31+
32+
.ds-row .ds-card + .ds-card {
1133
margin: 0;
1234
}
1335

36+
.doc .ds-card.exampleblock > .content::after {
37+
display: none;
38+
}
39+
1440
.ds-card .image.bottom img {
1541
margin-bottom: calc(24 / var(--rem-base) * -1 * 1rem);
1642
}
@@ -84,3 +110,17 @@
84110
margin-top: calc(27 / var(--rem-base) * -1 * 1rem);
85111
}
86112
}
113+
114+
/* Card child list anchor with tutorial/guide icon */
115+
116+
.ds-card .unstyled li:first-of-type p {
117+
display: flex;
118+
}
119+
120+
.ds-card .unstyled li:first-of-type .material-icons {
121+
margin-right: var(--ds-space-h);
122+
}
123+
124+
.ds-card .unstyled li:first-of-type p a {
125+
flex: 1;
126+
}

src/css/ds-layout.css

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515

1616
/* Hide sidebar, a.anchor */
1717
html[data-layout="landing"] .toc.sidebar,
18+
html[data-layout="landing"] .toc.embedded,
1819
html[data-layout="landing"] a.anchor {
1920
display: none;
2021
}
@@ -34,8 +35,11 @@ html[data-layout="landing"] .doc .ulist li + li {
3435
margin-top: var(--ds-space-2);
3536
}
3637

37-
.ds-row > .sectionbody,
38-
.ds-row > .content {
38+
html[data-layout="landing"] .text-h1 h2 {
39+
@include text-h1;
40+
}
41+
42+
.ds-row > * {
3943
display: flex;
4044
flex-direction: column;
4145
align-items: flex-start;
@@ -47,20 +51,32 @@ html[data-layout="landing"] .doc .ulist li + li {
4751
flex: 1;
4852
}
4953

54+
/* persist row direction max-width: 1200px */
55+
.ds-row.persistent > * {
56+
flex-direction: row;
57+
}
58+
5059
.ds-grid .sectionbody > *,
5160
.ds-grid > .content {
5261
display: grid;
5362
}
5463

64+
.ds-column > p {
65+
display: flex;
66+
flex-direction: column;
67+
justify-items: space-around;
68+
}
69+
5570
@media screen and (min-width: 1200px) {
71+
.ds-row > p,
5672
.ds-row .sectionbody {
5773
flex-direction: row;
5874
}
5975
}
6076

6177
.doc .header-noline h2:not(.discrete) {
6278
border-bottom: none;
63-
padding-bottom: var(--ds-space-3);
79+
padding: 0;
6480
}
6581

6682
.ds-row.explore .sectionbody .sect2 > *:not(.landing-card-icon) {
@@ -70,12 +86,12 @@ html[data-layout="landing"] .doc .ulist li + li {
7086
/* Landing card icon */
7187
.material-icons.landing-card-icon {
7288
max-width: fit-content;
89+
color: var(--ds-neutral-900);
7390
font-size: calc(20 / var(--rem-base) * 1rem);
7491
padding: calc(10 / var(--rem-base) * 1rem);
7592
border: 1px solid var(--ds-neutral-outlined-border);
7693
border-radius: calc(6 / var(--rem-base) * 1rem);
7794
grid-row-start: 1;
78-
margin-top: 0;
7995
}
8096

8197
/* Links */

0 commit comments

Comments
 (0)