diff --git a/preview-src/browser.png b/preview-src/browser.png new file mode 100644 index 00000000..515bba5a Binary files /dev/null and b/preview-src/browser.png differ diff --git a/preview-src/index.adoc b/preview-src/index.adoc index ee8a3712..2c103e5a 100644 --- a/preview-src/index.adoc +++ b/preview-src/index.adoc @@ -24,6 +24,8 @@ Quisque pharetra tristique arcu fringilla dapibus. https://example.org[Curabitur,role=unresolved] ut massa aliquam, cursus enim et, accumsan lectus. Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna. +xref:vector-home.adoc[Vector Home,role="ds-button ds-button\--color-primary ds-button\--variant-solid"] + == Headers and Titles === Section Title (Level 1) @@ -379,4 +381,4 @@ ____ == Fin -That's all, folks! +That's all, folks! \ No newline at end of file diff --git a/preview-src/vector-home.adoc b/preview-src/vector-home.adoc new file mode 100644 index 00000000..c2455818 --- /dev/null +++ b/preview-src/vector-home.adoc @@ -0,0 +1,139 @@ += DataStax Astra Vector +:page-layout: landing + +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]. + +[.ds-feature.header-noline] +== Get Started +-- +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. + +[.ds-feature-buttons] +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"] +-- + +[.ds-feature-code,js] +---- +import vector + +# Create a new vector database +db = vector.Database("my_vector_db") + +# Ingest vectors into your database +db.ingest("s3://vector-embeddings-bucket/") + +# Find the closest vectors +query_vector = [0.9, 2.2, 2.8] +results = db.query(query_vector, limit=3) +---- + +[.explore.header-noline.ds-row.ds-grid] +== Explore Docs + +=== Guides + +Concise how-tos of common tasks with Astra. + +[unstyled.landing-a] +* link:{#}[Load vector data] +* link:{#}[Explore my data] +* link:{#}[Manage my embeddings] + +[.material-icons.landing-card-icon] +fact_check + +=== Tutorials + +Dive into step-by-step lessons to master the essentials. + +[unstyled.landing-a] +* link:{#}[Build a chatbot] +* link:{#}[Enhance a recommendation system] +* link:{#}[Write an AI agent] + +[.material-icons.landing-card-icon] +auto_stories + +=== Clients + +Explore dedicated applications built to enhance your experience. + +[unstyled.landing-a] +* link:{#}[How do I use the Python client] +* link:{#}[How do I use the Node.js client] +* link:{#}[Connect using the JSON API] + +[.material-icons.landing-card-icon] +power + +=== Integrations + +Seamlessly connect with your favorite tools and platforms + +[unstyled.landing-a] +* link:{#}[Connect to OpenAI] +* link:{#}[Connect to LangChain] +* link:{#}[Connect to LlamaIndex] + +[.material-icons.landing-card-icon] +integration_instructions + + +[.ds-row.header-noline] +== What's New? + +[.ds-card.ds-grid] +-- +[discrete] +=== DataStax Astra Integrations + +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. + +[.landing-a] +link:{#}[Explore Astra Integrations] + +image:browser.png[Browser,100%,float=bottom,role=float-gap] + +[.material-icons.landing-card-icon] +integration_instructions +-- + +[.ds-row] +-- +[.ds-card] +==== +[discrete] +=== Scaling Production Workloads + +Equip yourself with the tools and techniques to scale your applications effectively. Meet the demands of today while preparing for the challenges of tomorrow. + +[.landing-a] +link:{#}[Discover Scalability Techniques] +==== + +[.ds-card] +==== +[discrete] +=== Securing Your Vector Databases + +Prioritize the protection of your invaluable data. Explore advanced strategies and tools designed to safeguard your vector databases from potential threats. + +[.landing-a] +link:{#}[Learn about Database Security] +==== +-- + +[.ds-row] +== Community & Support + +=== Join the Conversation + +Engage with our vibrant community of developers. Ask questions, share knowledge, or just hang out and chat about all things DataStax Astra. + +link:{#}[Join on Discord] ยท link:{#}[Follow on X] + +=== Need More Help? + +[unstyled.landing-support] +* link:{#}[Ask the Astra community,role="community"] +* link:{#}[Get in touch with support,role="support"] \ No newline at end of file diff --git a/src/css/doc.css b/src/css/doc.css index 73203a2c..b39b8652 100644 --- a/src/css/doc.css +++ b/src/css/doc.css @@ -640,7 +640,7 @@ .doc .olist li + li, .doc .ulist li + li { - margin-top: var(--ds-space-1); + margin-top: var(--ds-space-2); } .doc .ulist .listingblock, diff --git a/src/css/ds-card.css b/src/css/ds-card.css new file mode 100644 index 00000000..42dacd70 --- /dev/null +++ b/src/css/ds-card.css @@ -0,0 +1,86 @@ +/* card */ +.ds-card .content, +.doc .exampleblock.ds-card > .content { + padding: var(--ds-space-3); + border-radius: calc(6 / var(--rem-base) * 1rem); + border: 1px solid var(--ds-divider); +} + +.doc .paragraph.landing-card-icon, +.doc .exampleblock.ds-card { + margin: 0; +} + +.ds-card .image.bottom img { + margin-bottom: calc(24 / var(--rem-base) * -1 * 1rem); +} + +/* Feature Card */ +.ds-feature { + padding: var(--ds-space-3); + background: var(--ds-neutral-soft-bg); + border-radius: calc(10 / var(--rem-base) * 1rem); +} + +.ds-feature .sectionbody { + display: flex; + flex-direction: column; +} + +.ds-feature .sectionbody > * { + flex: 1; +} + +.doc .ds-feature.header-noline h2:not(.discrete) { + padding: 0; +} + +.doc .ds-feature .paragraph { + margin-top: var(--ds-space-2); +} + +#preamble + .sect1.ds-feature, +.doc .sect1 + .sect1.ds-feature { + margin-top: var(--ds-space-7); +} + +/* Feature Card - Button */ +.ds-feature-buttons p { + display: flex; + gap: var(--ds-space-1); +} + +.doc .ds-feature-buttons.paragraph { + margin-top: var(--ds-space-4); +} + +/* Feature Card - Code */ +.doc .ds-feature-code code, +.doc .ds-feature-code pre.highlight code { + background: var(--ds-text-primary); + font-size: calc(15.5 / var(--rem-base) * 1rem); +} + +.doc .ds-feature-code pre.highlight code, +.doc .ds-feature-code.literalblock pre code { + padding: var(--ds-space-2) var(--ds-space-3); +} + +@media screen and (min-width: 1200px) { + .ds-feature .sectionbody { + flex-direction: row; + } + + .doc .ds-feature-code.listingblock > .content { + position: absolute; + width: 100%; + top: calc(50%); + transform: translateY(-50%); + } + + .doc .ds-feature-code.listingblock { + position: relative; + margin: 0; + margin-top: calc(27 / var(--rem-base) * -1 * 1rem); + } +} diff --git a/src/css/ds-layout.css b/src/css/ds-layout.css new file mode 100644 index 00000000..aaa8fd1d --- /dev/null +++ b/src/css/ds-layout.css @@ -0,0 +1,111 @@ +/* + * + * Landing template + * + */ + +/* Extend .doc max-width */ +@media screen and (min-width: 1024px) { + html[data-layout="landing"] { + .doc { + max-width: calc(1280 / var(--rem-base) * 1rem); + } + } +} + +/* Hide sidebar, a.anchor */ +html[data-layout="landing"] .toc.sidebar, +html[data-layout="landing"] a.anchor { + display: none; +} + +html[data-layout="landing"] .doc > h1.page:first-child { + font-size: calc(34 / var(--rem-base) * 1rem); + margin-top: var(--ds-space-3); + margin-top: var(--ds-space-2); +} + +html[data-layout="landing"] #preamble { + max-width: 650px; +} + +.ds-row > .sectionbody, +.ds-row > .content { + display: flex; + flex-direction: column; + align-items: flex-start; + flex-wrap: wrap; + gap: var(--ds-space-3); +} + +.ds-row .sectionbody > * { + flex: 1; +} + +.ds-grid .sectionbody > *, +.ds-grid > .content { + display: grid; +} + +@media screen and (min-width: 1200px) { + .ds-row .sectionbody { + flex-direction: row; + } +} + +.doc .header-noline h2:not(.discrete) { + border-bottom: none; + padding-bottom: var(--ds-space-3); +} + +.ds-row.explore .sectionbody .sect2 > *:not(.landing-card-icon) { + margin-top: var(--ds-space-2); +} + +/* Landing card icon */ +.material-icons.landing-card-icon { + max-width: fit-content; + font-size: calc(20 / var(--rem-base) * 1rem); + padding: calc(10 / var(--rem-base) * 1rem); + border: 1px solid var(--ds-neutral-outlined-border); + border-radius: calc(6 / var(--rem-base) * 1rem); + grid-row-start: 1; + margin-top: 0; +} + +/* Links */ +.doc .landing-a a { + padding-right: var(--ds-space-2); +} + +.landing-a a::after { + font-family: "Material Icons Outlined", sans-serif; + content: '\e5c8'; + font-size: calc(20 / var(--rem-base) * 1rem); + position: absolute; + margin-left: var(--ds-space-h); + margin-top: calc(4 / var(--rem-base) * -1 * 1rem); +} + +.landing-support a.support::before, +.landing-support a.community::before { + font-family: "Material Icons Outlined", sans-serif; + content: '\ef73'; + font-size: calc(16 / var(--rem-base) * 1rem); + margin-right: var(--ds-space-1); + position: absolute; + left: 0; +} + +.landing-support a.community::before { + content: '\e7ef'; +} + +.landing-support p { + position: relative; +} + +.landing-support a.community, +.landing-support a.support { + margin-left: var(--ds-space-3); +} diff --git a/src/css/site.css b/src/css/site.css index 8cd0fb8a..8198a062 100644 --- a/src/css/site.css +++ b/src/css/site.css @@ -5,6 +5,8 @@ @import "ds-light.css"; @import "ds-dark.css"; @import "vars.css"; +@import "ds-layout.css"; +@import "ds-card.css"; @import "ds-typography.css"; @import "base.css"; @import "body.css"; diff --git a/src/layouts/landing.hbs b/src/layouts/landing.hbs new file mode 100644 index 00000000..565d6d29 --- /dev/null +++ b/src/layouts/landing.hbs @@ -0,0 +1,11 @@ + + + +{{> head defaultPageTitle='Untitled'}} + + +{{> header}} +{{> body}} +{{> footer}} + +