Fix spacing issues in lists (#57)

* re-organizng ui preview, tailwind improvements

* cherry pick list styles from tailwind typography component and adjust for side effects

* remove commented code

* fix tab issues

* fix support margin

* remove bad merge resolve, fix titles and conum

* bad wrapping selector

* nested list margin fix

* test gh action change

* test another gh action change

* fix image targets

* put back default build-preview-pages.js from antora aside from one small change

* add comment

Author: colegoldsmith

.github/workflows/deploy-bundle-preview.yml

@@ -41,8 +41,7 @@ jobs:
         run: |
           set -o pipefail
           gulp lint |& tee $GITHUB_WORKSPACE/build.log
-          UI_ROOT_PATH_PREFIX=${{ github.event.repository.name }}/${{ steps.extract_branch.outputs.draft_branch }} \
-            gulp preview:build |& tee $GITHUB_WORKSPACE/build.log
+          gulp preview:build |& tee $GITHUB_WORKSPACE/build.log
 
       - name: Check Build Result
         id: logFail

gulp.d/tasks/build-preview-pages.js

@@ -45,28 +45,19 @@ module.exports = (src, previewSrc, previewDest, sink = () => map()) => (done) =>
             const uiModel = { ...baseUiModel }
             uiModel.page = {
               ...uiModel.page,
+              // Adding url to uiModel.page allows the nav to properly highlight the current page.
               url: path.join('/', path.relative(previewSrc, file.path.replace('.adoc', '.html'))),
             }
             uiModel.siteRootPath = siteRootPath
-
-            // The following has been customized to enable pull request preview builds on Github Pages.
-            // It differs from the Antora Default UI by allowing for an optional UI_ROOT_PATH_PREFIX.
-            // This environment variable is set during build to add a prefix to the {{ uiRootPath }} variable.
-            // This enables us to have preview builds that live in their own subdirectory on GitHub Pages.
-            let uiRootPath = path.join(siteRootPath, '_')
-            if (uiModel.env.UI_ROOT_PATH_PREFIX) {
-              uiRootPath = path.join('/', uiModel.env.UI_ROOT_PATH_PREFIX, uiRootPath)
-            }
-            uiModel.uiRootPath = uiRootPath
-
+            uiModel.uiRootPath = path.join(siteRootPath, '_')
             if (file.stem === '404') {
               uiModel.page = { layout: '404', title: 'Page Not Found' }
             } else {
               const doc = Asciidoctor.load(file.contents, { safe: 'safe', attributes: ASCIIDOC_ATTRIBUTES })
               uiModel.page.attributes = Object.entries(doc.getAttributes())
                 .filter(([name, val]) => name.startsWith('page-'))
                 .reduce((accum, [name, val]) => {
-                  accum[name.substr(5)] = val
+                  accum[name.slice(5)] = val
                   return accum
                 }, {})
               uiModel.page.layout = doc.getAttribute('page-layout', 'default')
@@ -147,7 +138,7 @@ function transformHandlebarsError ({ message, stack }, layout) {
   const m = stack.match(/^ *at Object\.ret \[as (.+?)\]/m)
   const templatePath = `src/${m ? 'partials/' + m[1] : 'layouts/' + layout}.hbs`
   const err = new Error(`${message}${~message.indexOf('\n') ? '\n^ ' : ' '}in UI template ${templatePath}`)
-  err.stack = [err.toString()].concat(stack.substr(message.length + 8)).join('\n')
+  err.stack = [err.toString()].concat(stack.slice(message.length + 8)).join('\n')
   return err
 }
 

preview-src/asciidoc/images.adoc

@@ -6,38 +6,38 @@
 == Block images
 
 .Optional title
-image::/img/screenshot.png[Screenshot of Astra Portal Home]
+image::../img/screenshot.png[Screenshot of Astra Portal Home]
 
 === Sizing and alignment
 
 .400px width, align="left"
-image::/img/screenshot.png[Screenshot of Astra Portal Home,400,align="left"]
+image::../img/screenshot.png[Screenshot of Astra Portal Home,400,align="left"]
 
 .400px width, align="right"
-image::/img/screenshot.png[Screenshot of Astra Portal Home,400,align="right"]
+image::../img/screenshot.png[Screenshot of Astra Portal Home,400,align="right"]
 
 .400px width, align="center"
-image::/img/screenshot.png[Screenshot of Astra Portal Home,400,align="center"]
+image::../img/screenshot.png[Screenshot of Astra Portal Home,400,align="center"]
 
 === Float
 
 [.float-group]
 --
-image:/img/screenshot.png[Screenshot of Astra Portal Home,300,float=right,role=float-gap]
+image:../img/screenshot.png[Screenshot of Astra Portal Home,300,float=right,role=float-gap]
 In AsciiDoc, creating paragraphs is a straightforward process that does not require any special markup. A paragraph can be defined as one or more lines of consecutive text that are logically grouped together. To differentiate between paragraphs, you simply need to insert at least one blank line between them.
 --
 
 [.float-group]
 --
-image::/img/multirepo-ssg.svg[Multirepo SSG,300,float=left,role=float-gap]
+image::../img/multirepo-ssg.svg[Multirepo SSG,300,float=left,role=float-gap]
 In AsciiDoc, creating paragraphs is a straightforward process that does not require any special markup. A paragraph can be defined as one or more lines of consecutive text that are logically grouped together. To differentiate between paragraphs, you simply need to insert at least one blank line between them.
 --
 
 == Inline images
 
-Click image:/img/play_circle_FILL0_wght400_GRAD0_opsz24.svg[title=Play] to get the party started.
+Click image:../img/play_circle_FILL0_wght400_GRAD0_opsz24.svg[title=Play] to get the party started.
 
-Click image:/img/pause_circle_FILL0_wght400_GRAD0_opsz24.svg[title=Pause] when you need a break.
+Click image:../img/pause_circle_FILL0_wght400_GRAD0_opsz24.svg[title=Pause] when you need a break.
 
 == Image theming (light/dark mode)
 
@@ -63,7 +63,7 @@ image::dark-mode-illustration.png[Alt text,400,role=for-dark]
 .inline image
 [source,asciidoc]
 ----
-Click the Astra Vector icon image:/img/astra-vector-light.svg[title="Astra Vector",role=for-light] image:/img/astra-vector-dark.svg[title="Astra Vector",role=for-dark].
+Click the Astra Vector icon image:../img/astra-vector-light.svg[title="Astra Vector",role=for-light] image:../img/astra-vector-dark.svg[title="Astra Vector",role=for-dark].
 ----
 
 Method 2: SVG image with CSS variables::
@@ -98,13 +98,13 @@ For example:
 ======
 
 .themed block image
-image::/img/light-mode-illustration.png[Alt text,400,role=for-light]
+image::../img/light-mode-illustration.png[Alt text,400,role=for-light]
 
 .themed block image
-image::/img/dark-mode-illustration.png[Alt text,400,role=for-dark]
+image::../img/dark-mode-illustration.png[Alt text,400,role=for-dark]
 
 .themed inline image
-Click the Astra Vector icon image:/img/astra-vector-light.svg[title="Astra Vector",role=for-light] image:/img/astra-vector-dark.svg[title="Astra Vector",role=for-dark].
+Click the Astra Vector icon image:../img/astra-vector-light.svg[title="Astra Vector",role=for-light] image:../img/astra-vector-dark.svg[title="Astra Vector",role=for-dark].
 
 == Icons
 

preview-src/asciidoc/lists.adoc

@@ -103,7 +103,6 @@ With another paragraph.
 Third term::
 Description of the first term.
 
-
 === Horizontal description list (unconstrained)
 
 [horizontal]

preview-src/asciidoc/tabsets.adoc

@@ -4,10 +4,10 @@
 :tabs-sync-option:
 :tabs-sync-storage-key: tabs
 :tabs-sync-storage-scope: session
-:cassandra-icon: image:/img/cassandra-original.svg[,28]
-:java-icon: image:/img/java-original.svg[,22]
-:python-icon: image:/img/python-original.svg[,22]
-:shell-icon: image:/img/shell-original.svg[,20]
+:cassandra-icon: image:../img/cassandra-original.svg[,28]
+:java-icon: image:../img/java-original.svg[,22]
+:python-icon: image:../img/python-original.svg[,22]
+:shell-icon: image:../img/shell-original.svg[,20]
 
 [NOTE]
 ====

preview-src/page-templates/full.adoc

@@ -15,7 +15,7 @@ From AI-driven capabilities to robust data stream management, Astra simplifies c
 ++++
 
 [discrete.!m-0]
-== [.rounded-xl.border.p-1.flex.w-max.mb-1]#icon:/img/astra-database.svg[]# Vector
+== [.rounded-xl.border.p-1.flex.w-max.mb-1]#icon:../img/astra-database.svg[]# Vector
 
 Delve into a database optimized for AI-driven tasks.
 Astra Vector is tailored to offer unparalleled precision, speed, and scalability for AI applications, transforming how your applications perceive and interact with data.
@@ -27,8 +27,8 @@ xref:astra-db-vector:ROOT:index.adoc[Go to Vector Docs,role="btn btn-primary btn
 <div class="hidden lg:block flex basis-1/2 relative">
 ++++
 
-image::/img/cosine-similarity-distribution-light.png[Graph of cosine similarity distribution,width=515,align=center,role="for-light absolute -bottom-3 right-0"]
-image::/img/cosine-similarity-distribution-dark.png[Graph of cosine similarity distribution,width=515,align=center,role="for-dark absolute -bottom-3 right-0"]
+image::../img/cosine-similarity-distribution-light.png[Graph of cosine similarity distribution,width=515,align=center,role="for-light absolute -bottom-3 right-0"]
+image::../img/cosine-similarity-distribution-dark.png[Graph of cosine similarity distribution,width=515,align=center,role="for-dark absolute -bottom-3 right-0"]
 
 ++++
 </div>
@@ -46,7 +46,7 @@ image::/img/cosine-similarity-distribution-dark.png[Graph of cosine similarity d
 ++++
 
 [discrete]
-== [.rounded-xl.border.p-1.flex.w-max.mb-1]#icon:/img/astra-database.svg[]# Serverless
+== [.rounded-xl.border.p-1.flex.w-max.mb-1]#icon:../img/astra-database.svg[]# Serverless
 
 Delve deep into high-dimensional spaces with Astra Vector.
 Engineered for AI-intensive tasks, it offers unparalleled precision, speed, and scalability. Bring complex AI models into production with confidence, leveraging Astra's robust architecture.
@@ -60,7 +60,7 @@ https://docs.datastax.com/en/astra-serverless/docs/index.html[Go to Serverless D
 ++++
 
 [discrete]
-== [.rounded-xl.border.p-1.flex.w-max.mb-1]#icon:/img/astra-streaming.svg[]# Streaming
+== [.rounded-xl.border.p-1.flex.w-max.mb-1]#icon:../img/astra-streaming.svg[]# Streaming
 
 Harness real-time data with Astra Streaming.
 Process, analyze, and act on data as it's generated. Whether you're analyzing user behavior or monitoring systems, Astra Streaming delivers the real-time insights you need.

preview-src/page-templates/integrations-detail.adoc

@@ -1,6 +1,6 @@
 = LangChain
 :page-layout: tutorial
-:page-icon: preview-src/img/langchain.svg
+:page-icon: preview-src../img/langchain.svg
 :page-toclevels: 1
 :keywords: Machine Learning Frameworks, Embedding Services, Free, Data Warehouses, SDK
 :description: By integrating LangChain with {product}, you can seamlessly utilize the advanced linguistic processing capabilities of LangChain within your database environment.
@@ -37,7 +37,7 @@ By integrating LangChain with Astra, you can seamlessly utilize advanced linguis
 This combination enhances vector data analysis, allowing natural language data to be processed, stored, and queried with efficiency.
 
 .Architecture diagram
-image::/img/placeholder-image.svg["Diagram of LangChain integration architecture"]
+image::../img/placeholder-image.svg["Diagram of LangChain integration architecture"]
 
 To get started, ensure you have an https://example.com[active LangChain account^,role=external] with the requisite permissions.
 
@@ -76,7 +76,7 @@ Ensure your integration was successful by checking for new linguistic vector ent
 . Open the 'Vector Data' tab.
 . Confirm the appearance of recent vector entries from LangChain.
 
-image::/img/placeholder-image.svg["Screenshot"]
+image::../img/placeholder-image.svg["Screenshot"]
 
 [.header-noline]
 == Advanced configuration

preview-src/page-templates/integrations-overview.adoc

@@ -1,13 +1,13 @@
 = Integrations
 :page-layout: tutorial
-:hugging-icon: image:/img/hugging-face.svg[,20]
-:langchain-icon: image:/img/langchain.svg[,20]
-:openai-icon: image:/img/openai.svg[,20]
-:jina-icon: image:/img/jina.svg[,20]
-:deepset-icon: image:/img/deepset.svg[,20]
-:cohere-icon: image:/img/cohere.svg[,20]
-:llamaindex-icon: image:/img/llamaindex.svg[,20]
-:cassio-icon: image:/img/cassio.svg[,20]
+:hugging-icon: image:../img/hugging-face.svg[,20]
+:langchain-icon: image:../img/langchain.svg[,20]
+:openai-icon: image:../img/openai.svg[,20]
+:jina-icon: image:../img/jina.svg[,20]
+:deepset-icon: image:../img/deepset.svg[,20]
+:cohere-icon: image:../img/cohere.svg[,20]
+:llamaindex-icon: image:../img/llamaindex.svg[,20]
+:cassio-icon: image:../img/cassio.svg[,20]
 
 Dive into our curated marketplace of integrations
 that elevate the capabilities of Astra's vector databases.

preview-src/page-templates/tutorial.adoc

@@ -48,7 +48,7 @@ Add the `.step-reset` role to a section title to reset the step number.
 
 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.
 
-image::/img/placeholder-image.svg["Tutorial overview"]
+image::../img/placeholder-image.svg["Tutorial overview"]
 
 == Prerequisites