Home Page Layout (#135)

* home page prototype WIP

* home layout changes

* hide mobile nav button on home layout

* add option to disable img zoom

preview-src/page-templates/home.adoc

@@ -0,0 +1,250 @@
+= DataStax Docs
+:page-layout: home
+
+[.[&>h2]:!hidden]
+== {empty}
+
+[subs="macros,attributes"]
+++++
+<div class="flex rounded bg-level1 gap-6 mt-6 py-6 px-2 -mx-2 lg:px-4 lg:-mx-4">
+  <div class="flex flex-col gap-6">
+    
+    <h2 class="discrete !m-0">Astra DB Serverless</h2>
+    
+    <p>Astra DB Serverless by DataStax provides the tools developers need to create robust AI applications, featuring strong APIs, real-time data processing, and easy integration with other systems.</p>
+
+    <div class="flex gap-6">
+      <span class="text-secondary text-caption font-display flex gap-2 items-center"><i class="icon material-icons text-2xl">handyman</i> Vector Search</span>
+      <span class="text-secondary text-caption font-display flex gap-2 items-center"><i class="icon material-icons text-2xl">handyman</i> Modern APIs</span>
+      <span class="text-secondary text-caption font-display flex gap-2 items-center"><i class="icon material-icons text-2xl">handyman</i> Enterprise Ready</span>
+    </div>
+    
+    <div class="flex gap-4">
+      xref:astra-db-serverless:get-started:quickstart.adoc[Quickstart <i class="material-icons icon ml-1">arrow_forward</i>,role="btn btn-primary btn-solid"]
+      https://astra.datastax.com[Try Astra^,role="btn btn-neutral btn-outlined"]
+    </div>
+
+  </div>
+  <div class="hidden lg:flex relative pl-10">
+++++
+
+image::../img/vector-ui-dark.png["Vector Database UI", role="absolute -bottom-12 !m-0 rounded w-[31rem] h-[17.5rem] [&_img]:rounded drop-shadow-md for-dark no-zoom"]
+image::../img/vector-ui-light.png["Vector Database UI", role="absolute -bottom-12 !m-0 rounded w-[31rem] h-[17.5rem] [&_img]:rounded drop-shadow-md for-light no-zoom"]
+
+[source,python,subs="verbatim,quotes",role="nolang inverse-theme [&_.source-toolbox]:hidden rounded w-[31rem] h-[17.5rem] relative !-mt-0 !-mb-12 -top-12 right-10"]
+----
+from astrapy import DataAPIClient
+
+# connect to a database
+database = DataAPIClient(*TOKEN*).get_database_by_api_endpoint(*URL*)
+
+# Ingest vectors into your collection
+collection = database.test_collection
+collection.insert_many(documents=*DOCUMENTS*)
+
+# Find the closest vectors
+collection.find(vector=[0.15, 0.1, 0.1, 0.35, 0.55])
+----
+
+[subs="macros,attributes"]
+++++
+  </div>
+</div>
+
+<h3 class="discrete !my-12">Popular Products</h3>
+
+<div class="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+  
+  xref:astra-db-serverless::index.adoc[
+    <div class="w-full h-full absolute rounded bg-gradient-to-r from-[#6B1C96\] via-[#D90036\] to-[#FFCA0B\] blur opacity-0 group-hover:opacity-30 dark:group-hover:opacity-50 transition-opacity duration-300"></div>
+    <div class="relative h-full p-2 md:p-4 text-primary rounded border flex items-center gap-3 bg-body transition-colors group-hover:border-[var(--ds-primary-outlined-hover-border)\] duration-300">
+      <div class="w-10 h-10 p-3 rounded bg-level1 flex items-center justify-center"><i class="icon material-icons">handyman</i></div>
+      <div>
+        <h4 class="discrete !m-0 !text-primary">Astra DB Serverless</h4>
+        <p class="text-tertiary">Scale with cloud-native databases</p>
+      </div>
+    </div>
+  ,role="!no-underline relative group"]
+
+  xref:ragstack::index.adoc[
+    <div class="w-full h-full absolute rounded bg-gradient-to-r from-[#6B1C96\] via-[#D90036\] to-[#FFCA0B\] blur opacity-0 group-hover:opacity-30 dark:group-hover:opacity-50 transition-opacity duration-300"></div>
+    <div class="relative h-full p-2 md:p-4 text-primary rounded border flex items-center gap-3 bg-body transition-colors group-hover:border-[var(--ds-primary-outlined-hover-border)\] duration-300">
+      <div class="w-10 h-10 p-3 rounded bg-level1 flex items-center justify-center"><i class="icon material-icons">timer</i></div>
+      <div>
+        <h4 class="discrete !m-0 !text-primary">RAGStack</h4>
+        <p class="text-tertiary">Build AI apps faster</p>
+      </div>
+    </div>
+  ,role="!no-underline relative group"]
+
+  xref:dse:getting-started:get-started-dse.adoc[
+    <div class="w-full h-full absolute rounded bg-gradient-to-r from-[#6B1C96\] via-[#D90036\] to-[#FFCA0B\] blur opacity-0 group-hover:opacity-30 dark:group-hover:opacity-50 transition-opacity duration-300"></div>
+    <div class="relative h-full p-2 md:p-4 text-primary rounded border flex items-center gap-3 bg-body transition-colors group-hover:border-[var(--ds-primary-outlined-hover-border)\] duration-300">
+      <div class="w-10 h-10 p-3 rounded bg-level1 flex items-center justify-center"><i class="icon material-icons">business</i></div>
+      <div>
+        <h4 class="discrete !m-0 !text-primary">DSE</h4>
+        <p class="text-tertiary">Enterprise scalability and performance</p>
+      </div>
+    </div>
+  ,role="!no-underline relative group"]
+
+  xref:mission-control::index.adoc[
+    <div class="w-full h-full absolute rounded bg-gradient-to-r from-[#6B1C96\] via-[#D90036\] to-[#FFCA0B\] blur opacity-0 group-hover:opacity-30 dark:group-hover:opacity-50 transition-opacity duration-300"></div>
+    <div class="relative h-full p-2 md:p-4 text-primary rounded border flex items-center gap-3 bg-body transition-colors group-hover:border-[var(--ds-primary-outlined-hover-border)\] duration-300">
+      <div class="w-10 h-10 p-3 rounded bg-level1 flex items-center justify-center"><i class="icon material-icons">space_dashboard</i></div>
+      <div>
+        <h4 class="discrete !m-0 !text-primary">Mission Control</h4>
+        <p class="text-tertiary">Manage your data ecosystem</p>
+      </div>
+    </div>
+  ,role="!no-underline relative group"]
+
+  xref:astra-streaming:getting-started:index.adoc[
+    <div class="w-full h-full absolute rounded bg-gradient-to-r from-[#6B1C96\] via-[#D90036\] to-[#FFCA0B\] blur opacity-0 group-hover:opacity-30 dark:group-hover:opacity-50 transition-opacity duration-300"></div>
+    <div class="relative h-full p-2 md:p-4 text-primary rounded border flex items-center gap-3 bg-body transition-colors group-hover:border-[var(--ds-primary-outlined-hover-border)\] duration-300">
+      <div class="w-10 h-10 p-3 rounded bg-level1 flex items-center justify-center"><i class="icon material-icons">air</i></div>
+      <div>
+        <h4 class="discrete !m-0 !text-primary">Streaming</h4>
+        <p class="text-tertiary">Efficient data streaming</p>
+      </div>
+    </div>
+  ,role="!no-underline relative group"]
+
+  xref:luna-cassandra::index.adoc[
+    <div class="w-full h-full absolute rounded bg-gradient-to-r from-[#6B1C96\] via-[#D90036\] to-[#FFCA0B\] blur opacity-0 group-hover:opacity-30 dark:group-hover:opacity-50 transition-opacity duration-300"></div>
+    <div class="relative h-full p-2 md:p-4 text-primary rounded border flex items-center gap-3 bg-body transition-colors group-hover:border-[var(--ds-primary-outlined-hover-border)\] duration-300">
+      <div class="w-10 h-10 p-3 rounded bg-level1 flex items-center justify-center"><i class="icon material-icons">nights_stay</i></div>
+      <div>
+        <h4 class="discrete !m-0 !text-primary">Luna</h4>
+        <p class="text-tertiary">Expertise and support for DataStax products</p>
+      </div>
+    </div>
+  ,role="!no-underline relative group"]
+
+</div>
+
+<div class="mt-12 grid gap-12 md:grid-cols-2 md:grid-rows-[min-content_repeat(3,1fr)] md:grid-flow-col">
+
+  <h3 class="pb-4 border-b !m-0">Latest Additions<i class="material-icons icon text-2xl mr-2">new_label</i></h3>
+
+  xref:astra-db-serverless:databases:load-data.adoc[
+    <div class="py-4 px-2 -mx-2 lg:px-4 lg:-mx-4 rounded flex flex-col grow gap-3 transition-colors group-hover:bg-level1">
+      <h4 class="discrete !m-0 !text-primary text-display pb-2">
+        Loading data into Astra DB databases
+        <span class="ml-1 py-1 px-2 bg-level1 text-nowrap rounded color-primary text-caption font-sans border border-transparent group-hover:border-[var(--ds-divider)\] transition-colors">
+          Astra DB
+        </span>
+      </h4>
+      <p class="text-tertiary">++Use the Astra DB Data Loader to load data in your database from a variety of sources, including CSV files, sample datasets, and Amazon DynamoDB.++</p>
+      <p class="!text-link !mt-auto">Read Loading data into Astra DB databases <i class="material-icons icon group-hover:translate-x-1 transition-transform duration-300">arrow_forward</i></p>
+    </div>
+  ,role="!no-underline group flex flex-col"]
+
+  xref:ragstack:intro-to-rag:evaluation.adoc[
+    <div class="py-4 px-2 -mx-2 lg:px-4 lg:-mx-4 rounded flex flex-col grow gap-3 transition-colors group-hover:bg-level1">
+      <h4 class="discrete !m-0 !text-primary text-display pb-2">
+        Optimizing Query Performance
+        <span class="ml-1 py-1 px-2 bg-level1 text-nowrap rounded color-primary text-caption font-sans border border-transparent group-hover:border-[var(--ds-divider)\] transition-colors">
+          RAGStack
+        </span>
+      </h4>
+      <p class="text-tertiary">++Improve the efficiency of your queries on AI-ready cloud databases with best practices for indexing and query tuning.++</p>
+      <p class="!text-link !mt-auto">Read Optimizing Query Performance <i class="material-icons icon group-hover:translate-x-1 transition-transform duration-300">arrow_forward</i></p>
+    </div>
+  ,role="!no-underline group flex flex-col"]
+
+  xref:astra-db-serverless::index.adoc[
+    <div class="py-4 px-2 -mx-2 lg:px-4 lg:-mx-4 rounded flex flex-col grow gap-3 transition-colors group-hover:bg-level1">
+      <h4 class="discrete !m-0 !text-primary text-display pb-2">
+        Securing Database Connections
+        <span class="ml-1 py-1 px-2 bg-level1 text-nowrap rounded color-primary text-caption font-sans border border-transparent group-hover:border-[var(--ds-divider)\] transition-colors">
+          Astra DB
+        </span>
+      </h4>
+      <p class="text-tertiary">++Learn how to secure connections to your AI-ready cloud database using SSL encryption and access control methods.++</p>
+      <p class="!text-link !mt-auto">Read Securing Database Connections <i class="material-icons icon group-hover:translate-x-1 transition-transform duration-300">arrow_forward</i></p>
+    </div>
+  ,role="!no-underline group flex flex-col"]
+
+  <h3 class="pb-4 border-b !m-0">Working with AI/ML <i class="material-icons icon text-2xl mr-2">smart_toy</i></h3>
+
+  xref:astra-db-serverless::index.adoc[
+    <div class="py-4 px-2 -mx-2 lg:px-4 lg:-mx-4 rounded flex flex-col grow gap-3 transition-colors group-hover:bg-level1">
+      <h4 class="discrete !m-0 !text-primary text-display pb-2">
+        Automating Backups and Recovery
+        <span class="ml-1 py-1 px-2 bg-level1 text-nowrap rounded color-primary text-caption font-sans border border-transparent group-hover:border-[var(--ds-divider)\] transition-colors">
+          Astra DB
+        </span>
+      </h4>
+      <p class="text-tertiary">++Set up automated backups for your cloud database and learn how to quickly recover your data in case of loss or corruption.++</p>
+      <p class="!text-link !mt-auto">Read Automating Backups and Recovery <i class="material-icons icon group-hover:translate-x-1 transition-transform duration-300">arrow_forward</i></p>
+    </div>
+  ,role="!no-underline group flex flex-col"]
+
+  xref:astra-db-serverless::index.adoc[
+    <div class="py-4 px-2 -mx-2 lg:px-4 lg:-mx-4 rounded flex flex-col grow gap-3 transition-colors group-hover:bg-level1">
+      <h4 class="discrete !m-0 !text-primary text-display pb-2">
+        Monitoring and Alerts
+        <span class="ml-1 py-1 px-2 bg-level1 text-nowrap rounded color-primary text-caption font-sans border border-transparent group-hover:border-[var(--ds-divider)\] transition-colors">
+          Mission Control
+        </span>
+      </h4>
+      <p class="text-tertiary">++Monitor the health and performance of your cloud database with real-time analytics and set up alerts for potential issues.++</p>
+      <p class="!text-link !mt-auto">Read Monitoring and Alerts <i class="material-icons icon group-hover:translate-x-1 transition-transform duration-300">arrow_forward</i></p>
+    </div>
+  ,role="!no-underline group flex flex-col"]
+
+  xref:astra-db-serverless::index.adoc[
+    <div class="py-4 px-2 -mx-2 lg:px-4 lg:-mx-4 rounded flex flex-col grow gap-3 transition-colors group-hover:bg-level1">
+      <h4 class="discrete !m-0 !text-primary text-display pb-2">
+        Scaling Your Database
+        <span class="ml-1 py-1 px-2 bg-level1 text-nowrap rounded color-primary text-caption font-sans border border-transparent group-hover:border-[var(--ds-divider)\] transition-colors">
+          Astra DB
+        </span>
+      </h4>
+      <p class="text-tertiary">++Scale your AI-ready cloud database vertically or horizontally to meet changing workload demands and optimize performance.++</p>
+      <p class="!text-link !mt-auto">Read Scaling Your Database <i class="material-icons icon group-hover:translate-x-1 transition-transform duration-300">arrow_forward</i></p>
+    </div>
+  ,role="!no-underline group flex flex-col"]
+</div>
+
+<div class="p-8 rounded grid gap-10 grid-cols-1 md:grid-cols-2 lg:grid-cols-4 bg-level1 mt-12">
+  
+  https://www.datastax.com/[
+    <h4 class="discrete !m-0 !text-primary text-display pb-2">
+      <i class="material-icons icon text-2xl mr-2">home</i>
+      DataStax Home
+    </h4>
+    <span class="!text-link mr-1 break-words">Go to the DataStax website</span>
+    <i class="material-icons icon absolute group-hover:translate-x-1 transition-transform duration-300">arrow_forward</i>
+  ,role="!no-underline group after:hidden"]
+
+  xref:glossary::index.adoc[
+    <h4 class="discrete !m-0 !text-primary text-display pb-2">
+      <i class="material-icons icon text-2xl mr-2">menu_book</i>
+      Glossary
+    </h4>
+    <span class="!text-link mr-1 break-words">Learn terminology used in DataStax products</span>
+    <i class="material-icons icon absolute group-hover:translate-x-1 transition-transform duration-300">arrow_forward</i>
+  ,role="!no-underline group after:hidden"]
+
+  https://support.datastax.com/s/[
+    <h4 class="discrete !m-0 !text-primary text-display pb-2">
+      <i class="material-icons icon text-2xl mr-2">support</i>
+      Support
+    </h4>
+    <span class="!text-link mr-1 break-words">Access support resources</span>
+    <i class="material-icons icon absolute group-hover:translate-x-1 transition-transform duration-300">arrow_forward</i>
+  ,role="!no-underline group after:hidden"]
+
+  https://downloads.datastax.com/#enterprise[
+    <h4 class="discrete !m-0 !text-primary text-display pb-2">
+      <i class="material-icons icon text-2xl mr-2">downloading</i>
+      Downloads
+    </h4>
+    <span class="!text-link mr-1 break-words">Download installation files and drivers</span>
+    <i class="material-icons icon absolute group-hover:translate-x-1 transition-transform duration-300">arrow_forward</i>
+  ,role="!no-underline group after:hidden"]
+
+</div>
+++++

preview-src/ui-model.yml

@@ -113,6 +113,9 @@ page:
       - content: Landing
         url: /page-templates/landing.html
         urlType: internal
+      - content: Home
+        url: /page-templates/home.html
+        urlType: internal
       - content: Tutorial
         url: /page-templates/tutorial.html
         urlType: internal

src/css/asciidoc/ds-layout.css

@@ -7,7 +7,8 @@
 /* Extend .doc max-width */
 @layer base {
   html[data-layout="landing"],
-  html[data-layout="full"] {
+  html[data-layout="full"],
+  html[data-layout="home"] {
     main {
       max-width: calc(1280 / var(--rem-base) * 1rem);
       width: auto;
@@ -33,6 +34,12 @@
     }
   }
 
+  html[data-layout="home"] {
+    .doc > h1.page {
+      display: none;
+    }
+  }
+
   .sect1.text-h1 {
     font-size: 1rem;
     font-weight: 400;

src/js/vendor/zooming.bundle.js

@@ -12,5 +12,5 @@
     transitionDuration: prefersReducedMotion ? 0.01 : 0.3,
   })
 
-  zooming.listen('.doc .imageblock img, .doc .image img')
+  zooming.listen('.doc .imageblock:not(.no-zoom) img, .doc .image:not(.no-zoom) img')
 })()

src/layouts/home.hbs

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en" data-layout="home">
+  <head>
+{{> head defaultPageTitle='Untitled'}}
+  </head>
+  <body class="{{#with (or page.attributes.role page.role)}} {{{this}}}{{/with}}">
+{{> body}}
+  </body>
+</html>

src/partials/body.hbs

@@ -5,9 +5,11 @@
   <div class="grid drawer-content {{#if site.keys.globalNav}}pt-32{{else}}pt-20{{/if}}">
     {{> main}}
   </div>
+  {{#unless (eq page.layout 'home')}}
   <div class="z-30 drawer-side {{#if site.keys.globalNav}}pt-32{{else}}pt-20{{/if}}">
     <label for="nav-drawer-input" aria-label="close sidebar" class="drawer-overlay"></label>
     {{> nav}}
   </div>
+  {{/unless}}
 </div>
 {{> body-end-scripts}}

src/partials/breadcrumbs.hbs

@@ -1,4 +1,4 @@
-{{#unless (or (eq page.layout 'landing') (eq page.layout 'full'))}}
+{{#unless (or (eq page.layout 'landing') (eq page.layout 'full') (eq page.layout 'home'))}}
 <nav class="flex" aria-label="breadcrumbs">
   {{#if page.breadcrumbs}}
   <ul class="flex flex-wrap !list-none !m-0 !p-0">

src/partials/navbar.hbs

@@ -1,11 +1,13 @@
 <div class="navbar bg-body border-b z-40 fixed top-0 flex flex-col w-full {{#if site.keys.globalNav}}h-32{{else}}h-20{{/if}}">
   <nav class="flex flex-auto items-center gap-2 lg:gap-4 p-4">
+    {{#unless (eq page.layout 'home')}}
     <label
       for="nav-drawer-input"
       class="btn btn-neutral btn-plain btn-icon drawer-button lg:hidden"
     >
       <i class="icon material-icons">menu_open</i>
     </label>
+    {{/unless}}
     <a href="{{#> logo-url}}{{{or site.url siteRootPath}}}{{/logo-url}}">
       {{> logo}}
     </a>

src/partials/support-feedback.hbs

@@ -1,4 +1,4 @@
-{{#unless (or (eq page.layout 'landing') (eq page.layout 'full'))}}
+{{#unless (or (eq page.layout 'landing') (eq page.layout 'full') (eq page.layout 'home'))}}
 <div class="flex gap-10 mt-12">
   <div class="flex flex-col">
     <h3 class="!m-0">Was this helpful?</h3>

src/partials/toc.hbs

@@ -1,4 +1,4 @@
-{{#unless (or (eq page.layout 'full') (eq page.layout 'landing'))}}
+{{#unless (or (eq page.layout 'full') (eq page.layout 'landing') (eq page.layout 'home'))}}
 <aside
   class="toc sidebar peer sticky hidden h-[min(100%,calc(100vh-10rem))] mb-[14rem] w-[20rem] xl:flex xl:flex-col xl:col-start-2{{#if site.keys.globalNav}} top-[9rem]{{else}} top-[6rem]{{/if}}"
   data-title="{{{or page.attributes.toctitle 'Contents'}}}"