diff --git a/.vscode/settings.json b/.vscode/settings.json index 348237ca..27bd28ff 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -9,4 +9,5 @@ "emmet.syntaxProfiles": { "postcss": "css" }, + "asciidoc.antora.enableAntoraSupport": true, } \ No newline at end of file diff --git a/gulp.d/tasks/build-preview-pages.js b/gulp.d/tasks/build-preview-pages.js index 82306c36..a8394bdc 100644 --- a/gulp.d/tasks/build-preview-pages.js +++ b/gulp.d/tasks/build-preview-pages.js @@ -43,7 +43,10 @@ module.exports = (src, previewSrc, previewDest, sink = () => map()) => (done) => map((file, enc, next) => { const siteRootPath = path.relative(ospath.dirname(file.path), ospath.resolve(previewSrc)) const uiModel = { ...baseUiModel } - uiModel.page = { ...uiModel.page } + uiModel.page = { + ...uiModel.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. diff --git a/package-lock.json b/package-lock.json index 5e48d897..44cba3d1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -46,7 +46,9 @@ "postcss-custom-properties": "~13.3", "postcss-import": "~15.1", "postcss-url": "~10.1", + "prettier": "^3.1.0", "prettier-eslint": "~15.0", + "prettier-plugin-tailwindcss": "^0.5.7", "require-directory": "~2.1", "require-from-string": "~2.0", "stylelint": "~13.3", @@ -12833,15 +12835,15 @@ } }, "node_modules/prettier": { - "version": "2.8.8", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", - "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.1.0.tgz", + "integrity": "sha512-TQLvXjq5IAibjh8EpBIkNKxO749UEWABoiIZehEPiY4GNpVdhaFKqSTu+QrlU6D2dPAfubRmtJTi4K4YkQ5eXw==", "dev": true, "bin": { - "prettier": "bin-prettier.js" + "prettier": "bin/prettier.cjs" }, "engines": { - "node": ">=10.13.0" + "node": ">=14" }, "funding": { "url": "https://github.com/prettier/prettier?sponsor=1" @@ -13313,6 +13315,21 @@ "node": ">= 0.8.0" } }, + "node_modules/prettier-eslint/node_modules/prettier": { + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "dev": true, + "bin": { + "prettier": "bin-prettier.js" + }, + "engines": { + "node": ">=10.13.0" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/prettier-eslint/node_modules/rimraf": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", @@ -13412,6 +13429,78 @@ "node": ">= 8" } }, + "node_modules/prettier-plugin-tailwindcss": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.7.tgz", + "integrity": "sha512-4v6uESAgwCni6YF6DwJlRaDjg9Z+al5zM4JfngcazMy4WEf/XkPS5TEQjbD+DZ5iNuG6RrKQLa/HuX2SYzC3kQ==", + "dev": true, + "engines": { + "node": ">=14.21.3" + }, + "peerDependencies": { + "@ianvs/prettier-plugin-sort-imports": "*", + "@prettier/plugin-pug": "*", + "@shopify/prettier-plugin-liquid": "*", + "@shufo/prettier-plugin-blade": "*", + "@trivago/prettier-plugin-sort-imports": "*", + "prettier": "^3.0", + "prettier-plugin-astro": "*", + "prettier-plugin-css-order": "*", + "prettier-plugin-import-sort": "*", + "prettier-plugin-jsdoc": "*", + "prettier-plugin-organize-attributes": "*", + "prettier-plugin-organize-imports": "*", + "prettier-plugin-style-order": "*", + "prettier-plugin-svelte": "*" + }, + "peerDependenciesMeta": { + "@ianvs/prettier-plugin-sort-imports": { + "optional": true + }, + "@prettier/plugin-pug": { + "optional": true + }, + "@shopify/prettier-plugin-liquid": { + "optional": true + }, + "@shufo/prettier-plugin-blade": { + "optional": true + }, + "@trivago/prettier-plugin-sort-imports": { + "optional": true + }, + "prettier-plugin-astro": { + "optional": true + }, + "prettier-plugin-css-order": { + "optional": true + }, + "prettier-plugin-import-sort": { + "optional": true + }, + "prettier-plugin-jsdoc": { + "optional": true + }, + "prettier-plugin-marko": { + "optional": true + }, + "prettier-plugin-organize-attributes": { + "optional": true + }, + "prettier-plugin-organize-imports": { + "optional": true + }, + "prettier-plugin-style-order": { + "optional": true + }, + "prettier-plugin-svelte": { + "optional": true + }, + "prettier-plugin-twig-melody": { + "optional": true + } + } + }, "node_modules/pretty-bytes": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", @@ -28263,9 +28352,9 @@ "optional": true }, "prettier": { - "version": "2.8.8", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", - "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.1.0.tgz", + "integrity": "sha512-TQLvXjq5IAibjh8EpBIkNKxO749UEWABoiIZehEPiY4GNpVdhaFKqSTu+QrlU6D2dPAfubRmtJTi4K4YkQ5eXw==", "dev": true }, "prettier-eslint": { @@ -28602,6 +28691,12 @@ "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==", "dev": true }, + "prettier": { + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "dev": true + }, "rimraf": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", @@ -28670,6 +28765,13 @@ } } }, + "prettier-plugin-tailwindcss": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.7.tgz", + "integrity": "sha512-4v6uESAgwCni6YF6DwJlRaDjg9Z+al5zM4JfngcazMy4WEf/XkPS5TEQjbD+DZ5iNuG6RrKQLa/HuX2SYzC3kQ==", + "dev": true, + "requires": {} + }, "pretty-bytes": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", diff --git a/package.json b/package.json index 9b3a6051..d5fcbd4c 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,9 @@ "postcss-custom-properties": "~13.3", "postcss-import": "~15.1", "postcss-url": "~10.1", + "prettier": "^3.1.0", "prettier-eslint": "~15.0", + "prettier-plugin-tailwindcss": "^0.5.7", "require-directory": "~2.1", "require-from-string": "~2.0", "stylelint": "~13.3", diff --git a/prettier.config.js b/prettier.config.js new file mode 100644 index 00000000..163d4141 --- /dev/null +++ b/prettier.config.js @@ -0,0 +1,3 @@ +module.exports = { + plugins: ['prettier-plugin-tailwindcss'], +} diff --git a/preview-src/asciidoc/admonitions.adoc b/preview-src/asciidoc/admonitions.adoc new file mode 100644 index 00000000..5cd8d05c --- /dev/null +++ b/preview-src/asciidoc/admonitions.adoc @@ -0,0 +1,70 @@ += Admonitions +:idprefix: +:idseparator: - +:table-caption!: + +== Basic admonitions + +.Optional title +[NOTE] +==== +An admonition draws the reader's attention to auxiliary information. +==== + +IMPORTANT: Sign off before stepping away from your computer. + +TIP: Look for the warp zone under the bridge. + +CAUTION: Slippery when wet. + +WARNING: The software you're about to use is untested. + +== Examples + +=== Complex admonition + +.The title of a complex admonition +[NOTE] +==== +An admonition block may contain complex content, like lists and tables. + +.A list +* List item +** Nested list item +*** Deeper nested list item +* List item + ** Another nested list item +* List item + +.A table +[cols="3*"] +|=== +|Cell in column 1, row 1 +|Cell in column 2, row 1 + +|Cell in column 1, row 2 +|Cell in column 2, row 2 + +|Cell in column 1, row 3 +|Cell in column 2, row 3 +|=== + +.A code block +[source,javascript] +---- +vfs + .src('js/vendor/*.js', { cwd: 'src', cwdbase: true, read: false }) + .pipe(tap((file) => { // <.> + file.contents = browserify(file.relative, { basedir: 'src', detectGlobals: false }).bundle() + })) +---- +<.> Maybe with a callout. + +.Another admonition +[CAUTION] +====== +Admonition styles are set on example blocks, which are delimited by four equal signs (`====`). +When nesting a delimited block that uses the same structural container, it's necessary to vary the length of the delimiter lines (i.e., make the length of the delimiter lines for the child block different than the length of the delimiter lines for the parent block). +Varying the delimiter line length allows the parser to distinguish one block from another. +====== +==== \ No newline at end of file diff --git a/preview-src/asciidoc/blocks.adoc b/preview-src/asciidoc/blocks.adoc new file mode 100644 index 00000000..0e528154 --- /dev/null +++ b/preview-src/asciidoc/blocks.adoc @@ -0,0 +1,136 @@ += Blocks and other elements +:idprefix: +:idseparator: - +:example-caption!: +:stem: + +== Collapsible blocks + +.Basic collapsible block +[%collapsible] +==== +Details. + +Loads of details. +==== + +.Collapsible block, defaulted to open +[%collapsible%open] +==== +Details. + +Loads of details. +==== + +=== Collapsible enclosure + +.Collapsible code block +[%collapsible] +==== +[source,asciidoc] +---- +Some code. +---- +==== + +=== Collapsible results + +[source,asciidoc] +---- +Run this code. +---- + +.Result +[%collapsible.result] +==== +[source,console] +---- +Voila! +---- +==== + +== Sidebar + +.Sidebar title +**** +Sidebars are used to visually separate auxiliary bits of content that supplement the main text. +**** + +== Horizontal rule + +A line with three single quotation marks (i.e., `'''`) is a special macro that inserts a thematic break (aka horizontal rule): + +''' + +Horizontal rules shouldn't be required in the normal course of writing documentation. +However, they are an optional tool available in AsciiDoc that can be used to visually separate content in a pinch. + +== Example block + +.Optional title +==== +An example block is useful for visually delineating content that illustrates a concept or showing the result of an operation. + +An example can contain any type of content and AsciiDoc syntax. + +Here's a sample AsciiDoc document: + +[source,asciidoc] +---- += Title of Document +Doc Writer +:toc: + +This guide provides... +---- + +The document header is useful, but not required. +==== + +== Blockquote + + +[,'Famous Person. Cum dicat putant ne.','Cum dicat putant ne. https://example.com[Famous Person Website^,role=external]'] +____ +Lorem ipsum dolor sit amet, consectetur adipiscing elit. +Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna. +Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae! +Lorem ipsum dolor sit amet, consectetur adipiscing elit. +Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna. +Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae! +____ + +=== Verse + +[verse] +____ +The fog comes +on little cat feet. +____ + +== Equations and formulas (STEM) + +[NOTE] +==== +The AsciiDoc language supports embedding math-mode macros from https://docs.mathjax.org/en/latest/input/tex/index.html[LaTeX^,role=external] and/or https://docs.mathjax.org/en/latest/input/asciimath.html[AsciiMath^,role=external] notation as block or inline elements. +These elements act as passthroughs to preserve the expressions as entered. +The expressions are then passed on to the converter to be processed and rendered for display using a STEM provider (e.g., MathJax). + +Although AsciiDoc supports STEM at the https://docs.asciidoctor.org/asciidoc/latest/stem/[language level^,role=external], the STEM provider must be configured in the output converter to render the expressions. +See the discussion in https://gitlab.com/antora/antora/-/issues/184[Antora Issue #184^,role=external] to learn more about the requirements for configuring STEM in Antora. +==== + +=== Inline stem macro + +stem:[sqrt(4) = 2] + +Water (stem:[H_2O]) is a critical component. + +A matrix can be written as stem:[[[a,b\],[c,d\]\]((n),(k))]. + +=== Block STEM content + +[stem] +++++ +sqrt(4) = 2 +++++ diff --git a/preview-src/asciidoc/code.adoc b/preview-src/asciidoc/code.adoc new file mode 100644 index 00000000..7f56a6a9 --- /dev/null +++ b/preview-src/asciidoc/code.adoc @@ -0,0 +1,157 @@ += Code +:idprefix: +:idseparator: - + +== Inline code + +Monospace text formatting is typically used to represent text shown in `computer terminals` or `code editors` (often referred to as a codespan). + +Like other inline text formatting, you can add multiple emphasis styles to `monospace` text as long as the `*syntax*` is `_placed_` in the correct `*_order_*`. + +[#code-blocks] +== Code blocks + +=== Basic code block (console) + +[source,console] +---- +A code block with [source,console]. +---- + +.Optional title +[source,console] +---- +A code block with a title. +---- + +=== Language code block + +[source,json] +---- +{ + "name": "module-name", + "version": "10.0.1", + "description": "An example module to illustrate the usage of package.json", + "author": "Author Name ", + "scripts": { + "test": "mocha", + "lint": "eslint" + } +} +---- + +.Language code block w/ title +[source,json] +---- +{ + "name": "module-name", + "version": "10.0.1", + "description": "An example module to illustrate the usage of package.json", + "author": "Author Name ", + "scripts": { + "test": "mocha", + "lint": "eslint" + } +} +---- + +.Language code block w/ hidden language +[source,java,role=nolang] +---- +public class CurrentDateTime { + public static void main(String[] args) { + LocalDateTime current = LocalDateTime.now(); + + System.out.println("Current Date and Time is: " + current); + } +} +---- + +[source,java,role=nolang] +---- +// Language code block with no title and hidden language name +public class CurrentDateTime { + public static void main(String[] args) { + LocalDateTime current = LocalDateTime.now(); + + System.out.println("Current Date and Time is: " + current); + } +} +---- + +=== Line wrapping + +.Line wrapping is turned off by default +[source,console] +---- +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +---- + +.Code block w/ forced wrapping +[source,console,role=wrap] +---- +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +---- + +=== Text formatting + +[source,bash,subs="quotes"] +---- +cd /Users/*_your-name_*/repos/astra-vector-docs/build/site +---- + + +== Callouts + +[source,javascript] +---- +vfs + .src('js/vendor/*.js', { cwd: 'src', cwdbase: true, read: false }) + .pipe(tap((file) => { // <.> + file.contents = browserify(file.relative, { basedir: 'src', detectGlobals: false }).bundle() + })) + .pipe(buffer()) // <.> + .pipe(uglify()) + .pipe(gulp.dest('build')) +---- +<.> The `tap` function is used to wiretap the data in the pipe. +<.> Wrap each streaming file in a buffer so the files can be processed by uglify. +Uglify can only work with buffers, not streams. + +== Listing and literal blocks + +[NOTE] +==== +Listing blocks and literal blocks display the text you write exactly as you see it in the source. +Literal text is treated as preformatted text. +The text is presented in a fixed-width font and endlines are preserved. +Only special characters and callouts are replaced when the document is converted. + +The only meaningful difference between a listing block and a literal block is that you can turn a listing block into a <> and apply syntax highlighting. +==== + +=== Listing block + + When a line begins with one or more spaces it is displayed as a listing block. + +---- +This is a delimited _listing_ block. + +The content inside is displayed as 
 text.
+----
+
+.Optional title
+----
+This is a delimited _listing_ block with a title.
+----
+
+=== Literal block
+
+....
+This is a delimited _literal_ block.
+....
+
+.Optional title
+....
+This is a delimited _literal_ block with a title.
+....
diff --git a/preview-src/asciidoc/images.adoc b/preview-src/asciidoc/images.adoc
new file mode 100644
index 00000000..d496aeb6
--- /dev/null
+++ b/preview-src/asciidoc/images.adoc
@@ -0,0 +1,170 @@
+= Images and media
+:idprefix:
+:idseparator: -
+:figure-caption!:
+
+== Block images
+
+.Optional title
+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"]
+
+.400px width, 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"]
+
+=== Float
+
+[.float-group]
+--
+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]
+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/pause_circle_FILL0_wght400_GRAD0_opsz24.svg[title=Pause] when you need a break.
+
+== Image theming (light/dark mode)
+
+[NOTE]
+======
+You can define an image such that it appears differently in light mode vs. dark mode.
+There are methods for doing this.
+
+Method 1: Two separate images::
+Define two images, one that looks good in light mode and one that looks good in dark mode.
+Assign the corresponding roles -- `for-light` and `for-dark` -- to each image.
++
+All non-SVG images, such as screenshot PNG files, must use this method.
+All SVG images that do not use CSS variables must also use this method.
++
+.block image
+[source,asciidoc]
+----
+image::light-mode-illustration.png[Alt text,400,role=for-light]
+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].
+----
+
+Method 2: SVG image with CSS variables::
+Use the custom `svg` macro to define an SVG image that uses CSS variables to support light and dark mode.
++
+.block svg
+[source,asciidoc]
+----
+svg::ROOT:illustration.svg[Alt text,400]
+----
++
+.inline svg
+[source,asciidoc]
+----
+Click the Astra Vector icon svg:ROOT:your-diagram.svg[title="Astra Vector"].
+----
++
+[IMPORTANT]
+====
+CSS variables must use the tokens supported by the UI.
+For example:
+
+[source,svg]
+----
+
+  
+  
+  
+
+----
+====
+======
+
+.themed block image
+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]
+
+.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].
+
+== Icons
+
+[NOTE]
+======
+You can define icons from https://fonts.google.com/icons?icon.set=Material+Icons&icon.style=Outlined[Material Icons,role=external,window=_blank] or an svg file using the customized `icon` macro or the `material-icons` role.
+
+Method 1: Inline icon macro with an svg file::
+The customized inline icon macro accepts a file path as it's target source. The file must be an svg file.
++
+This methods supports using CSS variables within the svg.
++
+[source]
+----
+icon:ROOT:ui/icons/vector.svg[]
+----
+
+Method 2: Inline icon macro with a material-icons target::
+The customized inline icon macro supports material icon names as it's target source prefixed with `material-icons:`. Ensure the name is lower case with underscores instead of spaces.
++
+This method supports light and dark mode automatically.
++
+[source]
+----
+icon:material-icons:thumb_up[]
+----
+
+Method 3: material-icons role::
+Use the custom role `material-icons` on block or inline content. The content must be a material icon name in lower case. If there are spaces in the name, use underscores instead.
++
+This method supports light and dark mode automatically.
++
+.block style
+[source]
+----
+[.material-icons]
+thumb_up
+----
++
+.Inline style using a text span
+[source]
+----
+Inline material icons [.material-icons]#thumb_up#
+----
+======
+
+[.material-icons]
+add_reaction
+
+Inline material icons [.material-icons]#thumb_up# [.material-icons]#support# [.material-icons]#code# [.material-icons]#rocket_launch# [.material-icons.text-2xl]#rocket_launch# [.material-icons.text-3xl]#rocket_launch#
+
+== Video
+
+.YouTube (unconstrained; default alignment)
+video::n_LcVqqHSY8[youtube]
+
+.Vimeo (640x360; default alignment)
+video::300817511[vimeo,640,360]
+
+== Audio
+
+.Take a zen moment
+audio::ocean-waves.wav[]
diff --git a/preview-src/asciidoc/lists.adoc b/preview-src/asciidoc/lists.adoc
new file mode 100644
index 00000000..ebd4c073
--- /dev/null
+++ b/preview-src/asciidoc/lists.adoc
@@ -0,0 +1,218 @@
+= Lists
+:idprefix:
+:idseparator: -
+:table-caption!:
+
+== Unordered list
+
+* List item
+** Nested list item
+*** Deeper nested list item
+* List item
+ ** Another nested list item
+* List item
+
+.Unordered list max level nesting
+* Level 1 list item
+** Level 2 list item
+*** Level 3 list item
+**** Level 4 list item
+***** Level 5 list item
+****** etc.
+* Level 1 list item
+
+== Ordered list
+
+. Step 1
+. Step 2
+.. Step 2a
+.. Step 2b
+. Step 3
+
+.Ordered list max level nesting
+. Level 1 list item
+.. Level 2 list item
+... Level 3 list item
+.... Level 4 list item
+..... Level 5 list item
+. Level 1 list item
+
+== Customized markers and numeration
+
+.Unordered list w/ customized marker (square)
+[square]
+* ultricies sociosqu tristique integer
+* lacus volutpat semper porttitor aliquet ornare primis nulla enim
+* etiam pulvinar inceptos velit quisque aptent himenaeos
+
+.Ordered list w/ customized numeration (upperalpha)
+[upperalpha]
+. potenti donec cubilia tincidunt
+. etiam pulvinar inceptos velit quisque aptent himenaeos
+. lacus volutpat semper porttitor aliquet ornare primis nulla enim
+
+.Ordered list numeration styles
+****
+[cols="6*a",role="scrolltable"]
+|===
+|`decimal`
+|`loweralpha`
+|`upperalpha`
+|`lowerroman`
+|`upperroman`
+|`lowergreek`
+
+a|[decimal]
+. Protons
+. Electrons
+. Neutrons
+
+a|[loweralpha]
+. Protons
+. Electrons
+. Neutrons
+
+a|[upperalpha]
+. Protons
+. Electrons
+. Neutrons
+
+a|[lowerroman]
+. Protons
+. Electrons
+. Neutrons
+
+a|[upperroman]
+. Protons
+. Electrons
+. Neutrons
+
+a|[lowergreek]
+. Protons
+. Electrons
+. Neutrons
+|===
+****
+
+== Description list
+
+First term:: Description of the first term.
+Second term:: Description of the second term.
++
+With another paragraph.
+Third term::
+Description of the first term.
+
+
+=== Horizontal description list (unconstrained)
+
+[horizontal]
+CPU:: The brain of the computer.
+Hard drive:: Permanent storage for operating system and/or user files.
++
+Solid state drives (SSDs) are faster than hard drives, but are also more expensive.
+RAM::
+Temporarily stores information the CPU uses during operation.
+
+=== Horizontal description list (constrained)
+
+[horizontal,labelwidth=25,itemwidth=75]
+A short term:: The term for this item likely fits inside the column's width.
+A long term that wraps across multiple lines:: The term for this item wraps since the width of the term column is restricted using the `labelwidth` attribute.
+
+== Question and answer list
+
+[qanda]
+What is the answer?::
+This is the answer.
+
+Are cameras allowed?::
+Are backpacks allowed?::
+No.
+
+== Checklist
+
+* [*] checked
+* [x] also checked
+* [ ] not checked
+
+.Interactive checklist
+[%interactive]
+* [*] checked
+* [x] also checked
+* [ ] not checked
+
+== Examples
+
+=== Mixed list
+
+Operating Systems::
+  Linux:::
+    . Fedora
+      * Desktop
+    . Ubuntu
+      * Desktop
+      * Server
+  BSD:::
+    . FreeBSD
+    . NetBSD
+
+Cloud Providers::
+  PaaS:::
+    . OpenShift
+    . CloudBees
+  IaaS:::
+    . Amazon EC2
+    . Rackspace
+
+=== Drop the principal text
+
+. {empty}
++
+----
+print("one")
+----
+. {empty}
++
+----
+print("one")
+----
+
+=== List continuation (complex list)
+
+* Every list item has at least one paragraph of content,
+  which may be wrapped, even using a hanging indent.
++
+Additional paragraphs or blocks are adjoined by putting
+a list continuation on a line adjacent to both blocks.
+
+* A literal paragraph does not require a list continuation.
+
+ $ cd projects/my-book
+
+* The header in AsciiDoc must start with a document title.
++
+----
+= Document Title
+----
++
+Keep in mind that the header is optional.
+
+** The header in AsciiDoc must start with a document title.
++
+--
+----
+= Document Title
+----
+
+NOTE: The header is optional.
+--
+
+* AsciiDoc lists may contain any complex content.
++
+|===
+|Column 1, Header Row |Column 2, Header Row
+
+|Column 1, Row 1
+|Column 2, Row 1
+|===
diff --git a/preview-src/asciidoc/tables.adoc b/preview-src/asciidoc/tables.adoc
new file mode 100644
index 00000000..946beb51
--- /dev/null
+++ b/preview-src/asciidoc/tables.adoc
@@ -0,0 +1,342 @@
+= Tables
+:idprefix:
+:idseparator: -
+:table-caption!:
+
+== Basic table
+
+.Optional title
+[cols="3*"]
+|===
+|Cell in column 1, row 1
+|Cell in column 2, row 1
+|Cell in column 3, row 1
+
+|Cell in column 1, row 2
+|Cell in column 2, row 2
+|Cell in column 3, row 2
+
+|Cell in column 1, row 3
+|Cell in column 2, row 3
+|Cell in column 3, row 3
+|===
+
+== Header and footer
+
+.Table w/ header row
+|===
+|Column 1, header row |Column 2, header row |Column 3, header row
+
+|Cell in column 1, row 2
+|Cell in column 2, row 2
+|Cell in column 3, row 2
+
+|Cell in column 1, row 3
+|Cell in column 2, row 3
+|Cell in column 3, row 3
+|===
+
+.Table w/ header column
+[cols="1h,2*"]
+|===
+|Row 1, header column
+|Cell in column 2, row 1
+|Cell in column 3, row 1
+
+|Row 2, header column
+|Cell in column 2, row 2
+|Cell in column 3, row 2
+
+|Row 3, header column
+|Cell in column 2, row 3
+|Cell in column 3, row 3
+|===
+
+.Table w/ header row and header column
+[cols="1h,2*"]
+|===
+|Column 1, header row |Column 2, header row |Column 3, header row
+
+|Row 2, header column
+|Cell in column 2, row 2
+|Cell in column 3, row 2
+
+|Row 3, header column
+|Cell in column 2, row 3
+|Cell in column 3, row 3
+|===
+
+.Table w/ footer row
+[cols="3*",options="footer"]
+|===
+|Cell in column 1, row 1
+|Cell in column 2, row 1
+|Cell in column 3, row 1
+
+
+|Cell in column 1, row 2
+|Cell in column 2, row 2
+|Cell in column 3, row 2
+
+|Cell in column 1, row 3
+|Cell in column 2, row 3
+|Cell in column 3, row 3
+
+
+|Total = 3
+|Total = 3
+|Total = 3
+|===
+
+.Table w/ header row, header column, and footer row
+[%footer%autowidth.stretch]
+|===
+|Header |Header |Header |Header
+
+h|Item
+|2
+|1
+|5
+
+h|Item
+|2
+|1
+|5
+
+h|Total
+|4
+|2
+|10
+|===
+
+== Striping
+
+.Table w/ even striping
+[cols="3*",stripes=even]
+|===
+|Column 1, header row |Column 2, header row |Column 3, header row
+
+|Cell in column 1, row 2
+|Cell in column 2, row 2
+|Cell in column 3, row 2
+
+|Cell in column 1, row 3
+|Cell in column 2, row 3
+|Cell in column 3, row 3
+
+|Cell in column 1, row 4
+|Cell in column 2, row 4
+|Cell in column 3, row 4
+|===
+
+.Table w/ hover striping
+[cols="3*",stripes=hover]
+|===
+|Column 1, header row |Column 2, header row |Column 3, header row
+
+|Cell in column 1, row 2
+|Cell in column 2, row 2
+|Cell in column 3, row 2
+
+|Cell in column 1, row 3
+|Cell in column 2, row 3
+|Cell in column 3, row 3
+|===
+
+== Custom width
+
+.Table w/ width set to 75%
+[width=75%]
+|===
+|Column 1, header row |Column 2, header row |Column 3, header row
+
+|Cell in column 1, row 2
+|Cell in column 2, row 2
+|Cell in column 3, row 2
+
+|Cell in column 1, row 3
+|Cell in column 2, row 3
+|Cell in column 3, row 3
+|===
+
+.Table w/ autowidth
+[%autowidth]
+|===
+|Column 1, header row |Column 2, header row |Column 3, header row
+
+|Cell in column 1, row 2
+|Cell in column 2, row 2
+|Cell in column 3, row 2
+
+|Cell in column 1, row 3
+|Cell in column 2, row 3
+|Cell in column 3, row 3
+|===
+
+== Custom borders
+
+=== Frame
+
+.Table w/ frame=ends
+[frame=ends]
+|===
+|Column 1, header row |Column 2, header row |Column 3, header row
+
+|Cell in column 1, row 2
+|Cell in column 2, row 2
+|Cell in column 3, row 2
+
+|Cell in column 1, row 3
+|Cell in column 2, row 3
+|Cell in column 3, row 3
+|===
+
+.Table w/ frame=sides
+[frame=sides]
+|===
+|Column 1, header row |Column 2, header row |Column 3, header row
+
+|Cell in column 1, row 2
+|Cell in column 2, row 2
+|Cell in column 3, row 2
+
+|Cell in column 1, row 3
+|Cell in column 2, row 3
+|Cell in column 3, row 3
+|===
+
+.Table w/ frame=none
+[frame=none]
+|===
+|Column 1, header row |Column 2, header row |Column 3, header row
+
+|Cell in column 1, row 2
+|Cell in column 2, row 2
+|Cell in column 3, row 2
+
+|Cell in column 1, row 3
+|Cell in column 2, row 3
+|Cell in column 3, row 3
+|===
+
+=== Grid
+
+.Table w/ grid=rows
+[grid=rows]
+|===
+|Column 1, header row |Column 2, header row |Column 3, header row
+
+|Cell in column 1, row 2
+|Cell in column 2, row 2
+|Cell in column 3, row 2
+
+|Cell in column 1, row 3
+|Cell in column 2, row 3
+|Cell in column 3, row 3
+|===
+
+.Table w/ grid=cols
+[grid=cols]
+|===
+|Column 1, header row |Column 2, header row |Column 3, header row
+
+|Cell in column 1, row 2
+|Cell in column 2, row 2
+|Cell in column 3, row 2
+
+|Cell in column 1, row 3
+|Cell in column 2, row 3
+|Cell in column 3, row 3
+|===
+
+.Table w/ grid=none
+[grid=none]
+|===
+|Column 1, header row |Column 2, header row |Column 3, header row
+
+|Cell in column 1, row 2
+|Cell in column 2, row 2
+|Cell in column 3, row 2
+
+|Cell in column 1, row 3
+|Cell in column 2, row 3
+|Cell in column 3, row 3
+|===
+
+== Examples
+
+=== Complex table w/ AsciiDoc content
+
+[cols="1,1,2a"]
+|===
+|Name |Category |Description
+
+|Firefox
+|Browser
+|Mozilla Firefox is an open source web browser.
+
+image::firefox-window.png[Screenshot of Firefox window]
+
+It's designed for:
+
+* standards compliance
+* performance
+* portability
+
+image::https://upload.wikimedia.org/wikipedia/commons/a/a0/Firefox_logo%2C_2019.svg[Firefox logo,align=left,link=https://getfirefox.com]
+https://getfirefox.com[Get Firefox^,role=external]!
+
+|Arquillian
+|Testing
+|An innovative and highly extensible testing platform.
+Empowers developers to easily create real, automated tests.
+
+Each Arquillian test is associated with at least one deployment.
+
+[NOTE]
+====
+The deployment is configured using a static method annotated with @Deployment that returns a ShrinkWrap archive. Here’s an example:
+
+[source,java]
+----
+@Deployment
+public static JavaArchive createDeployment() {
+    return ShrinkWrap.create(JavaArchive.class)
+        .addClass(Greeter.class)
+        .addAsManifestResource(EmptyAsset.INSTANCE, "beans.xml");
+}
+----
+====
+|===
+
+=== Table w/ formatted, aligned, and merged cells
+
+[cols="e,m,^,>s"]
+|===
+|1 >s|2 |3 |4
+^|5 2.2+^.^|6 .3+<.>m|7
+^|8
+|9 2+>|10
+|===
+
+=== Nested table
+
+[cols="1,2a"]
+|===
+| Col 1 | Col 2
+
+| Cell 1.1
+| Cell 1.2
+
+| Cell 2.1
+| Cell 2.2
+
+[cols="2,1"]
+!===
+! Col1 ! Col2
+
+! C11
+! C12
+
+!===
+|===
diff --git a/preview-src/asciidoc/tabsets.adoc b/preview-src/asciidoc/tabsets.adoc
new file mode 100644
index 00000000..ad1904f3
--- /dev/null
+++ b/preview-src/asciidoc/tabsets.adoc
@@ -0,0 +1,307 @@
+= Tabsets
+:idprefix:
+:idseparator: -
+: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]
+
+[NOTE]
+====
+Tabsets depend on the https://github.com/asciidoctor/asciidoctor-tabs[Asciidoctor Tabs^,role=external] extension.
+
+Tabs syncing is controlled by the `tabs-sync-option` attribute.
+For more information, see the Asciidoctor Tabs https://github.com/asciidoctor/asciidoctor-tabs#tabs-sync[documentation^,role=external].
+====
+
+== Basic tabset
+
+[tabs]
+======
+Tab A:: Contents of Tab A.
+
+Tab B::
++
+Contents of Tab B.
+
+Tab C::
++
+--
+Contents of Tab C.
+
+Contains more than one block.
+--
+======
+
+== Tabset w/ overflow tab titles
+
+[tabs.overflow]
+======
+Tab Name:: Contents of Tab.
+
+Longer Tab Name::
++
+Contents of Longer Tab.
+
+An Even Longer Tab Name::
++
+Contents of Even Longer Tab.
+
+This Is The Longest Tab Name::
++
+Contents of The Longest Tab.
+======
+
+== Tabset w/ wrapping tab titles
+
+[tabs.wrapping]
+======
+Tab Name:: Contents of Tab.
+
+Longer Tab Name::
++
+Contents of Longer Tab.
+
+An Even Longer Tab Name::
++
+Contents of Even Longer Tab.
+
+This Is The Longest Tab Name::
++
+Contents of The Longest Tab.
+======
+
+== Experimental: Tabset icons
+
+[tabs]
+======
+{cassandra-icon} CQL::
++
+[source,sql]
+----
+USE cycling;
+CREATE TABLE rank_by_year_and_name (
+  race_year int,
+  race_name text,
+  cyclist_name text,
+  rank int,
+  PRIMARY KEY ((race_year, race_name), rank)
+);
+----
+
+{python-icon} Python::
++
+[source,python]
+----
+    log.info("creating table...")
+    session.execute("""
+        CREATE TABLE IF NOT EXISTS cyclist_by_year_and_name (
+            race_year int,
+            race_name text,
+            rank int,
+            cyclist_name text,
+            PRIMARY KEY ((race_year,race_name),rank)
+        )
+        """)
+----
+
+{java-icon} Java::
++
+[source,java]
+----
+CreateTable create = createTable("cycling", "cyclist_by_year_and_name")
+    .withPartitionKey("race_year", DataTypes.INT)
+    .withPartitionKey("race_name", DataTypes.TEXT)
+    .withClusteringColumn("rank", DataTypes.INT)
+    .withColumn("cyclist_name", DataTypes.TEXT);
+// CREATE TABLE cycling.cyclist_by_year_and_name (race_year int,race_name text,rank int,cyclist_name text,PRIMARY KEY((race_year,race_name),rank))
+----
+
+{shell-icon} REST API::
++
+[source,json]
+----
+curl -s --location \
+--request POST http://localhost:8082/v2/schemas/keyspaces/cycling/tables \
+--header "X-Cassandra-Token: $AUTH_TOKEN" \
+--header "Content-Type: application/json" \
+--header "Accept: application/json" \
+--data '{
+	"name": "cyclist_by_year_and_name",
+	"columnDefinitions":
+	  [
+        {
+	      "name": "race_year",
+	      "typeDefinition": "int"
+	    },
+        {
+	      "name": "race_name",
+	      "typeDefinition": "text"
+	    },
+        {
+	      "name": "rank",
+	      "typeDefinition": "int"
+	    }
+        ,
+        {
+          "name": "cyclist_name",
+          "typeDefinition": "text"
+        }
+	  ],
+	"primaryKey":
+	  {
+	    "partitionKey": ["race_year", "race_name"],
+	    "clusteringKey": ["rank"]
+	  },
+	"tableOptions":
+	  {
+	    "defaultTimeToLive": 0,
+	    "clusteringExpression":
+	      [{ "column": "rank", "order": "ASC" }]
+	  }
+}'
+----
+======
+
+== Examples
+
+=== Tabset w/ only code blocks
+
+[tabs]
+======
+Command::
++
+[source,curl]
+----
+curl -s -L -X GET https://$ASTRA_CLUSTER_ID-$ASTRA_REGION.apps.astra.datastax.com/api/rest/v2/schemas/keyspaces/users_keyspace \
+-H "X-Cassandra-Token: $ASTRA_DB_APPLICATION_TOKEN" \
+-H "Content-Type: application/json" \
+-H "Accept: application/json"
+----
+
+Result::
++
+[source,console]
+----
+{"data":{"name":"users_keyspace"}}
+----
+======
+
+=== Complex tabset w/ nested tabsets
+
+[tabs]
+======
+Tarball::
++
+. If you haven't already, start by downloading the Cassandra binary tarball.
+For example, to download Cassandra 4.1.2:
++
+[tabs]
+====
+cURL::
++
+--
+[source,shell]
+----
+curl -OL https://archive.apache.org/dist/cassandra/4.1.2/apache-cassandra-4.1.2-bin.tar.gz
+----
+--
+
+Wget::
++
+--
+[source,shell]
+----
+wget https://archive.apache.org/dist/cassandra/4.1.2/apache-cassandra-4.1.2-bin.tar.gz
+----
+--
+====
++
+[NOTE]
+====
+To download a different version of Cassandra, visit the https://archive.apache.org/dist/cassandra/[Apache Archives^,role=external].
+====
++
+. (Optional) Verify the integrity of the downloaded tarball using one of the methods https://www.apache.org/dyn/closer.cgi#verify[here^,role=external].
++
+.. For example, to verify the SHA256 hash of the downloaded file using GPG:
++
+[source,shell]
+----
+gpg --print-md SHA256 apache-cassandra-4.1.2-bin.tar.gz
+----
++
+.. Compare the output with the contents of the SHA256 file:
++
+[source,shell]
+----
+curl -L https://archive.apache.org/dist/cassandra/4.1.2/apache-cassandra-4.1.2-bin.tar.gz.sha256
+----
+
+Debian::
++
+. (Optional) Verify the integrity of the downloaded tarball using one of the methods https://www.apache.org/dyn/closer.cgi#verify[here^,role=external].
++
+.. For example, to verify the SHA256 hash of the downloaded file using GPG:
++
+[tabs]
+====
+Command::
++
+--
+[source,shell]
+----
+gpg --print-md SHA256 apache-cassandra-4.1.2-bin.tar.gz
+----
+--
+
+Result::
++
+--
+[source,console]
+----
+apache-cassandra-4.1.2-bin.tar.gz: 7CE3103A 76B8AF76 FFD8488D 6BF484E1 F1751196
+                                   17F3205A E0526C71 D816C6F7
+----
+--
+====
++
+.. Compare the output with the contents of the SHA256 file:
++
+[tabs]
+====
+cURL::
++
+--
+[source,shell]
+----
+curl -L https://archive.apache.org/dist/cassandra/4.1.2/apache-cassandra-4.1.2-bin.tar.gz.sha256
+----
+--
+
+Wget::
++
+--
+[source,shell]
+----
+wget --quiet -O - https://archive.apache.org/dist/cassandra/4.1.2/apache-cassandra-4.1.2-bin.tar.gz.sha256
+----
+--
+
+Result::
++
+--
+[source,console]
+----
+7ce3103a76b8af76ffd8488d6bf484e1f175119617f3205ae0526c71d816c6f7
+----
+--
+====
+
+CentOS:: Just text.
+======
+
+
diff --git a/preview-src/asciidoc/text-formatting.adoc b/preview-src/asciidoc/text-formatting.adoc
new file mode 100644
index 00000000..071b08ac
--- /dev/null
+++ b/preview-src/asciidoc/text-formatting.adoc
@@ -0,0 +1,185 @@
+= Text formatting
+:idprefix:
+:idseparator: -
+:experimental:
+
+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.
+
+When creating paragraphs in AsciiDoc, it's inefficient to write entire paragraphs on a single line.
+Instead, put each sentence on its own line, a technique known as _ventilated prose_.
+
+== Level 1 section title
+
+=== Level 2 section title
+
+==== Level 3 section title
+
+===== Level 4 section title
+
+====== Level 5 section title
+
+[.header-noline]
+== Level 1 section title w/ custom role (no line)
+
+Apply `[.header-noline]` to level 1 section titles to remove the line that normally appears below the section title.
+
+[discrete]
+== Level 1 section title (discrete)
+
+Applying the `[discrete]` style effectively demotes the section title to a normal heading.
+Discrete headings are not part of the section hierarchy, and they are not included in the table of contents, page TOC, etc.
+
+[#text-formatting]
+== Text formatting
+
+A bold *word*, and a bold *phrase of text*.
+Bold c**hara**cter**s** within a word.
+
+An italic _word_, and an italic _phrase of text_.
+Italic c__hara__cter__s__ within a word.
+
+A monospace `word`, and a monospace `phrase of text`.
+Monospace c``hara``cter``s`` within a word.
+
+That *_really_* has to go.
+Can't pick one?
+Let's use them `*_all_*`.
+
+A highlighted #word#, and a highlighted #phrase of text#.
+Highlighted c##hara##cter##s## within a word.
+
+Where did all the [.underline]#cores# go?
+
+We need [.line-through]#ten# twenty VMs.
+
+^super^script
+
+~sub~script
+
+"`Well the H~2~O formula written on their whiteboard could be part
+of a shopping list, but I don't think the local bodega sells
+E=mc^2^,`" Lazarus replied.
+
+=== Custom inline styles
+
+A [.myrole]#custom role# must be fulfilled by the theme.
+
+== Links
+
+=== Internal link
+
+Instead of having to enclose text within <>, you can focus on expressing your ideas and content in a clear and concise manner.
+
+=== External link
+
+External links have a special icon and open in a new tab https://www.datastax.com[when clicked^,role=external].
+
+[NOTE]
+====
+An _external link_ is any link that targets an address outside of the `docs.datastax.com` subdomain.
+External links should always have the following behavior, regardless of any AsciiDoc attributes that a writer might apply to them:
+
+* Different visual styling than an internal link, e.g. an `open_in_new` icon after the link text.
+* Open in a new tab when clicked.
+
+The links in the example sentences below all target the same external URL -- `\https://www.datastax.com` -- however, they each have different AsciiDoc attributes applied to them.
+
+[source,asciidoc]
+----
+External links have a special icon and open in a new tab https://www.datastax.com[when clicked,role=external,window=_blank].
+External links have a special icon and open in a new tab https://www.datastax.com[when clicked^].
+External links have a special icon and open in a new tab https://www.datastax.com[when clicked].
+----
+
+The UI should disregard these attributes and apply the same styling and behavior to each link.
+====
+
+=== Unresolved link
+
+If an xref fails to resolve, the https://example.org[link text,role=unresolved] is displayed as-is, but in red.
+
+== Keyboard, button, and menu macros
+
+To save the file, select menu:File[Save].
+Select menu:View[Zoom > Reset] to reset the zoom level to the default setting.
+
+Press the btn:[OK] button when you are finished.
+Select a file in the file navigator and click btn:[Open].
+
+Press kbd:[F11] to toggle fullscreen.
+Press kbd:[Ctrl+T] to open a new tab.
+
+== Footnote
+
+AsciiDoc provides the `footnote` macro for adding footnotes to your document.footnote:[Look! A footnote!]
+
+== Symbol replacements
+
+[%autowidth,cols="~,^~,^~,^~,~"]
+|===
+|Name |Syntax |Unicode Replacement |Rendered |Notes
+
+|Copyright
+|+(C)+
+|+©+
+|(C)
+|
+
+|Registered
+|+(R)+
+|+®+
+|(R)
+|
+
+|Trademark
+|+(TM)+
+|+™+
+|(TM)
+|
+
+|Em dash
+|+--+
+|+—+
+|{empty}--{empty}
+|Only replaced if between two word characters, between a word character and a line boundary, or flanked by spaces.
+
+When flanked by space characters (e.g., `+a -- b+`), the normal spaces are replaced by thin spaces (\ ).
+Otherwise, the em dash is followed by a zero-width space (\​) to provide a break opportunity.
+
+|Ellipsis
+|+...+
+|+…+
+|...
+|The ellipsis is followed by a zero-width space (\​) to provide a break opportunity.
+
+|Single right arrow
+|+->+
+|+→+
+|->
+|
+
+|Double right arrow
+|+=>+
+|+⇒+
+|=>
+|
+
+|Single left arrow
+|+<-+
+|+←+
+|<-
+|
+
+|Double left arrow
+|+<=+
+|+⇐+
+|<=
+|
+
+|Typographic apostrophe
+|Sam\'s
+|+Sam’s+
+|Sam's
+|The typewriter apostrophe is replaced with the typographic (aka curly or smart) apostrophe.
+|===
diff --git a/preview-src/astra.adoc b/preview-src/astra.adoc
deleted file mode 100644
index ba218961..00000000
--- a/preview-src/astra.adoc
+++ /dev/null
@@ -1,112 +0,0 @@
-= DataStax Astra
-:page-layout: full
-
-[.max-w-[650px]]
-DataStax Astra is a cutting-edge cloud-native database platform designed to empower developers.
-Harnessing the strengths of vector databases, serverless computing, and real-time streaming, Astra propels application development into the next generation.
-From AI-driven capabilities to robust data stream management, Astra simplifies complex tasks, offering unparalleled performance and scalability.
-
-[.[&>h2]:hidden]
-== {empty}
-
-++++
-

-

-++++
-
-[discrete.[&>h2]:border-0.!m-0]
-== image:astra-vector.svg[vector,20,role="for-light landing-card-icon block mb-1"] image:astra-vector-dark.svg[vector,20,role="for-dark landing-card-icon block mb-1"] 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.
-
-++++
-

-++++
-
-https://astra.datastax.com[Explore Astra Vector^,role="btn btn-primary btn-solid"]
-
-https://astra.datastax.com[Create Astra Account^,role="btn btn-primary btn-outlined external"]
-
-++++
-

-

-
-

-

-

-++++
-
-[discrete.m-0]
-=== [.material-icons.landing-card-icon.block.mb-1]#table_chart# Serverless C*
-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.
-
-[.landing-a]
-https://docs.datastax.com/en/astra-serverless/docs/index.html[Discover Astra Serverless C*]
-
-++++
-

-

-++++
-
-[discrete]
-=== [.material-icons.landing-card-icon.block.mb-1]#air# 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.
-
-[.landing-a]
-https://docs.datastax.com/en/streaming/astra-streaming/index.html[Dive into Astra Streaming]
-
-++++
-

-

-++++
-
-[.text-h1.header-noline]
-== Explore More of Astra
-
-++++
-

-++++
-
-=== Dive Deeper into Vector
-
-Get a broader understanding of vector databases and their capabilities within Astra.
-
-[unstyled.landing-a]
-* link:{#}[Vector Basics and Concepts]
-* link:{#}[Advanced Vector Techniques]
-* link:{#}[Vector Search Optimization]
-
-=== Serverless C* Unveiled
-
-Explore the intricacies and features of Astra's serverless database offering.
-
-[unstyled.landing-a]
-* link:{#}[Understanding CDC in Serverless C*]
-* link:{#}[Clients, CLI, and Tools for Serverless C*]
-* link:{#}[Serverless C* Best Practices]
-
-=== Streaming Insights
-
-Delve deeper into the real-time data processing capabilities of Astra.
-
-[unstyled.landing-a]
-* link:{#}[Streaming Fundamentals]
-* link:{#}[Advanced Streaming Configurations]
-* link:{#}[Starlight Integrations: JMS, Kafka, RabbitMQ]
-
-++++
-

-++++
\ No newline at end of file
diff --git a/preview-src/examples/integrations-detail.adoc b/preview-src/examples/integrations-detail.adoc
deleted file mode 100644
index 4d8e58eb..00000000
--- a/preview-src/examples/integrations-detail.adoc
+++ /dev/null
@@ -1,114 +0,0 @@
-= Lang Chain
-
-== Overview
-
-By integrating LangChain with Astra, you can seamlessly 
-utilize advanced linguistic processing capabilities of 
-LangChain within the Astra vector database environment. 
-This combination enhances vector data analysis, 
-allowing natural language data to be processed, 
-stored, and queried with efficiency.
-
-image::ROOT:template-examples/langchain-overview.png["Architecture diagram"]
-
-To get started, ensure you have an 
-https://example.com[active LangChain account,role=external] with the requisite permissions.
-
-You will also need an https://example.com[active LangChain account,role=external] 
-an access to its API keys.
-
-== Setup
-
-=== [.step]#1# Acquire API Key from LangChain:
-
-Log into your LangChain dashboard and navigate to the 'API' section to obtain your API key.
-
-=== [.step]#2# Configure Astra's SDK for LangChain
-
-[source,python]
-----
-from astra import VectorDB
-db = VectorDB(config='astra_config.yaml')
-db.set_integration('LangChain', api_key='YOUR_LANGCHAIN_API_KEY')
-----
-
-=== [.step]#3# Initialize Data Transfer
-
-[source,python]
-----
-db.sync_from('LangChain')
-----
-
-== Verify Integration
-
-Ensure your integration was successful by checking for new linguistic vector entries in your Astra database:
-
-. Navigate to the Astra dashboard.
-. Open the 'Vector Data' tab.
-. Confirm the appearance of recent vector entries from LangChain.
-
-image::ROOT:template-examples/langchain-screenshot.png["Screenshot"]
-
-[.header-noline]
-== Advanced Configuration
-
-[cols="1,1"]
-|===
-|Parameter |Description
-
-|Sync Frequency
-|The lower the value, the more frequent the sync, impacting server performance.
-
-Sample `30 min`
-
-|Data Volume Limit
-|The lower the value, the more frequent the sync, impacting server performance.
-
-Sample `500 MB`
-|===
-
-
-[.header-noline]
-== Troubleshotting
-[cols="1,1"]
-|===
-|Error |Solution
-
-|`LangChain API key invalid`
-|Make sure you copied the correct API key. Refresh or regenerate the key in the LangChain dashboard if necessary.
-
-|`Data sync failed`
-|Ensure both Astra and LangChain servers are running without issues. Check network connectivity and try syncing again after a few minutes.
-|===
-
-
-[.header-noline]
-== Next Steps
-
-[.ds-card]
---
-[unstyled]
-* https://example.com[Advanced Natural Language Processing with Astra and LangChain] [.material-icons]#auto_stories# Tutorial 
-+
-Dive into how the combination of Astra's vector database and LangChain's 
-linguistic prowess can enhance your NLP projects.
---
-
-[.ds-card]
---
-[unstyled.guide]
-* https://example.com[Optimizing Linguistic Vector Searches in Astra] [.material-icons]#auto_stories# Tutorial 
-+
-Discover best practices and techniques to improve the efficiency and accuracy 
-of linguistic vector searches in Astra, leveraging LangChain integrations.
---
-
-[.ds-card]
---
-[unstyled]
-* https://example.com[Cohere] [.material-icons]#integration_instructions# Integration 
-+
-Cohere provides advanced NLP models designed for a variety of tasks, ranging from text generation to understanding. 
-Their models offer a balance between performance and efficiency. 
-With Astra's integration, developers can effortlessly combine Cohere's capabilities with a powerful vector database solution.
---
\ No newline at end of file
diff --git a/preview-src/astra-browser.png b/preview-src/img/astra-browser.png
similarity index 100%
rename from preview-src/astra-browser.png
rename to preview-src/img/astra-browser.png
diff --git a/preview-src/img/astra-database.svg b/preview-src/img/astra-database.svg
new file mode 100644
index 00000000..8f73f140
--- /dev/null
+++ b/preview-src/img/astra-database.svg
@@ -0,0 +1,4 @@
+
+    
+
\ No newline at end of file
diff --git a/preview-src/img/astra-streaming.svg b/preview-src/img/astra-streaming.svg
new file mode 100644
index 00000000..577e5727
--- /dev/null
+++ b/preview-src/img/astra-streaming.svg
@@ -0,0 +1,4 @@
+
+    
+
+    
\ No newline at end of file
diff --git a/preview-src/astra-vector-dark.svg b/preview-src/img/astra-vector-dark.svg
similarity index 100%
rename from preview-src/astra-vector-dark.svg
rename to preview-src/img/astra-vector-dark.svg
diff --git a/preview-src/astra-vector.svg b/preview-src/img/astra-vector-light.svg
similarity index 100%
rename from preview-src/astra-vector.svg
rename to preview-src/img/astra-vector-light.svg
diff --git a/preview-src/img/astra-vector.svg b/preview-src/img/astra-vector.svg
new file mode 100644
index 00000000..5ea6917b
--- /dev/null
+++ b/preview-src/img/astra-vector.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/preview-src/browser.png b/preview-src/img/browser.png
similarity index 100%
rename from preview-src/browser.png
rename to preview-src/img/browser.png
diff --git a/preview-src/cassandra-original.svg b/preview-src/img/cassandra-original.svg
similarity index 100%
rename from preview-src/cassandra-original.svg
rename to preview-src/img/cassandra-original.svg
diff --git a/preview-src/examples/cassio.svg b/preview-src/img/cassio.svg
similarity index 100%
rename from preview-src/examples/cassio.svg
rename to preview-src/img/cassio.svg
diff --git a/preview-src/examples/cohere.svg b/preview-src/img/cohere.svg
similarity index 100%
rename from preview-src/examples/cohere.svg
rename to preview-src/img/cohere.svg
diff --git a/preview-src/img/cosine-similarity-distribution-dark.png b/preview-src/img/cosine-similarity-distribution-dark.png
new file mode 100644
index 00000000..42d57c85
Binary files /dev/null and b/preview-src/img/cosine-similarity-distribution-dark.png differ
diff --git a/preview-src/img/cosine-similarity-distribution-light.png b/preview-src/img/cosine-similarity-distribution-light.png
new file mode 100644
index 00000000..4c74d0ac
Binary files /dev/null and b/preview-src/img/cosine-similarity-distribution-light.png differ
diff --git a/preview-src/dark-mode-illustration.png b/preview-src/img/dark-mode-illustration.png
similarity index 100%
rename from preview-src/dark-mode-illustration.png
rename to preview-src/img/dark-mode-illustration.png
diff --git a/preview-src/examples/deepset.svg b/preview-src/img/deepset.svg
similarity index 100%
rename from preview-src/examples/deepset.svg
rename to preview-src/img/deepset.svg
diff --git a/preview-src/firefox-window.png b/preview-src/img/firefox-window.png
similarity index 100%
rename from preview-src/firefox-window.png
rename to preview-src/img/firefox-window.png
diff --git a/preview-src/examples/hugging-face.svg b/preview-src/img/hugging-face.svg
similarity index 100%
rename from preview-src/examples/hugging-face.svg
rename to preview-src/img/hugging-face.svg
diff --git a/preview-src/java-original.svg b/preview-src/img/java-original.svg
similarity index 100%
rename from preview-src/java-original.svg
rename to preview-src/img/java-original.svg
diff --git a/preview-src/examples/jina.svg b/preview-src/img/jina.svg
similarity index 100%
rename from preview-src/examples/jina.svg
rename to preview-src/img/jina.svg
diff --git a/preview-src/examples/langchain.svg b/preview-src/img/langchain.svg
similarity index 100%
rename from preview-src/examples/langchain.svg
rename to preview-src/img/langchain.svg
diff --git a/preview-src/light-mode-illustration.png b/preview-src/img/light-mode-illustration.png
similarity index 100%
rename from preview-src/light-mode-illustration.png
rename to preview-src/img/light-mode-illustration.png
diff --git a/preview-src/examples/llamaindex.svg b/preview-src/img/llamaindex.svg
similarity index 100%
rename from preview-src/examples/llamaindex.svg
rename to preview-src/img/llamaindex.svg
diff --git a/preview-src/multirepo-ssg.svg b/preview-src/img/multirepo-ssg.svg
similarity index 100%
rename from preview-src/multirepo-ssg.svg
rename to preview-src/img/multirepo-ssg.svg
diff --git a/preview-src/examples/openai.svg b/preview-src/img/openai.svg
similarity index 100%
rename from preview-src/examples/openai.svg
rename to preview-src/img/openai.svg
diff --git a/preview-src/pause_circle_FILL0_wght400_GRAD0_opsz24.svg b/preview-src/img/pause_circle_FILL0_wght400_GRAD0_opsz24.svg
similarity index 100%
rename from preview-src/pause_circle_FILL0_wght400_GRAD0_opsz24.svg
rename to preview-src/img/pause_circle_FILL0_wght400_GRAD0_opsz24.svg
diff --git a/preview-src/img/placeholder-image.svg b/preview-src/img/placeholder-image.svg
new file mode 100644
index 00000000..20299c3e
--- /dev/null
+++ b/preview-src/img/placeholder-image.svg
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/preview-src/play_circle_FILL0_wght400_GRAD0_opsz24.svg b/preview-src/img/play_circle_FILL0_wght400_GRAD0_opsz24.svg
similarity index 100%
rename from preview-src/play_circle_FILL0_wght400_GRAD0_opsz24.svg
rename to preview-src/img/play_circle_FILL0_wght400_GRAD0_opsz24.svg
diff --git a/preview-src/python-original.svg b/preview-src/img/python-original.svg
similarity index 100%
rename from preview-src/python-original.svg
rename to preview-src/img/python-original.svg
diff --git a/preview-src/screenshot.png b/preview-src/img/screenshot.png
similarity index 100%
rename from preview-src/screenshot.png
rename to preview-src/img/screenshot.png
diff --git a/preview-src/shell-original.svg b/preview-src/img/shell-original.svg
similarity index 100%
rename from preview-src/shell-original.svg
rename to preview-src/img/shell-original.svg
diff --git a/preview-src/simple-diagram.svg b/preview-src/img/simple-diagram.svg
similarity index 100%
rename from preview-src/simple-diagram.svg
rename to preview-src/img/simple-diagram.svg
diff --git a/preview-src/tux.png b/preview-src/img/tux.png
similarity index 100%
rename from preview-src/tux.png
rename to preview-src/img/tux.png
diff --git a/preview-src/index.adoc b/preview-src/index.adoc
index 8f2184a3..d77d07eb 100644
--- a/preview-src/index.adoc
+++ b/preview-src/index.adoc
@@ -1,1355 +1 @@
-= Document Title (Level 0)
-:description: The component style guide for the DataStax Docs UI. All major AsciiDoc components are represented, including admonitions, tables, lists, and more.
-:keywords: AsciiDoc, Antora, UI, style guide
-:idprefix:
-:idseparator: -
-:!example-caption:
-:!table-caption:
-:page-pagination:
-:experimental:
-:stem: latexmath
-:tabs-sync-option:
-:tabs-sync-storage-key: tabs
-:tabs-sync-storage-scope: session
-:cassandra-icon: image:cassandra-original.svg[,28]
-:java-icon: image:java-original.svg[,22]
-:python-icon: image:python-original.svg[,22]
-:shell-icon: image:shell-original.svg[,20]
-
-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.
-
-xref:vector-home.adoc[Vector Home,role="btn btn-primary btn-solid"]
-
-== Level 1 section title
-
-[.rolename]
-=== Level 2 section title
-
-==== Level 3 section title
-
-===== Level 4 section title
-
-====== Level 5 section title
-
-[discrete]
-== Level 1 section title (Discrete)
-
-[.rolename]
-=== Example: Section title w/ custom role
-
-////
-When the document type is article (the default), the document can only have one level 0 section title (`=`), which is the document title (i.e., doctitle).
-
-When a page is converted to HTML, each section title becomes a heading element where the heading level matches the number of equals signs.
-For example, a level 1 section (`==`) maps to an `
` HTML tag.
-
-Each section title has an auto-generated section ID that forms the fragment identifier for the section.
-The auto-generated section ID is a URL-safe version of the section title, converted to lowercase, with all non-alphanumeric characters replaced with hyphens (controlled by the `idprefix` and `idseparator` attributes).
-An anchor (empty link) is added before the section title, and an anchor icon floats to the left of the section title (controlled by the `sectanchors` attribute).
-
-Section titles appear in the page table of contents (TOC) in the order they appear in the document.
-The depth of the page TOC can be configured using the `page-toclevels` attribute.
-
-A `discrete` heading is declared and styled in a manner similar to that of a section title, but it’s not part of the section hierarchy and not included in the table of contents,etc.
-////
-
-[#text-formatting]
-== Text formatting
-
-Nominavi luptatum eos, an vim hinc philosophia intellegebat.
-Lorem pertinacia `expetenda` et nec, [.underline]#wisi# illud [.line-through]#sonet# qui ea.
-H~2~0.
-E = mc^2^.
-
-[cols="1,2a",frame=none,grid=none]
-|===
-|Constrained bold, italic, and monospace
-|It has *strong* significance to me.
-
-I _cannot_ stress this enough.
-
-Type `OK` to accept.
-
-That *_really_* has to go.
-
-Can't pick one? Let's use them `*_all_*`.
-
-|Unconstrained bold, italic, and monospace
-|**C**reate, **R**ead, **U**pdate, and **D**elete (CRUD)
-
-That's fan__freakin__tastic!
-
-Don't pass generic ``Object``s to methods that accept ``String``s!
-
-It was Beatle**__mania__**!
-
-|Highlight, underline, strikethrough, and custom role
-|Mark my words, #automation is essential#.
-
-##Mark##up refers to text that contains formatting ##mark##s.
-
-Where did all the [.underline]#cores# go?
-
-We need [.line-through]#ten# twenty VMs.
-
-A [.myrole]#custom role# must be fulfilled by the theme.
-
-|Superscript and subscript
-|^super^script
-
-~sub~script
-
-|Smart quotes and apostrophes
-|"`double curved quotes`"
-
-'`single curved quotes`'
-
-Olaf's desk was a mess.
-
-A ``std::vector```'s size is the number of items it contains.
-
-All of the werewolves`' desks were a mess.
-
-Olaf had been with the company since the `'00s.
-|===
-
-=== Links
-
-==== Internal link
-
-Instead of having to enclose text within <>, you can focus on expressing your ideas and content in a clear and concise manner.
-
-==== External link
-
-By separating paragraphs with blank lines, you visually https://www.datastax.com[distinguish each paragraph,role=external,window=_blank]
-
-By separating paragraphs with blank lines, you visually https://www.datastax.com[distinguish each paragraph^]
-
-By separating paragraphs with blank lines, you visually https://www.datastax.com[distinguish each paragraph]
-
-////
-An _external link_ is any link that targets an address outside of the docs.datastax.com subdomain.
-External links should have the following behavior, regardless of any AsciiDoc attributes that a writer might apply to them:
-
-* Different visual styling than an internal link, e.g. an `open_in_new` icon after the link text.
-* Open in a new tab or window when clicked.
-
-The links in the example sentences above all target the same external URL -- `\https://www.datastax.com`.
-However, they each have different AsciiDoc attributes applied to them.
-
-[source,asciidoc]
-----
-https://www.datastax.com[distinguish each paragraph,role=external,window=_blank]
-https://www.datastax.com[distinguish each paragraph^]
-https://www.datastax.com[distinguish each paragraph]
-----
-
-The UI should disregard these attributes and apply the same styling and behavior to each link.
-////
-
-==== Unresolved link
-
-Vestibulum consectetur nec urna a luctus.
-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.
-
-=== Keyboard, button, and menu macros
-
-To save the file, select menu:File[Save].
-Select menu:View[Zoom > Reset] to reset the zoom level to the default setting.
-
-Press the btn:[OK] button when you are finished.
-Select a file in the file navigator and click btn:[Open].
-
-Press kbd:[F11] to toggle fullscreen.
-Press kbd:[Ctrl+T] to open a new tab.
-
-=== Footnote
-
-Eum an doctus maiestatis efficiantur.
-Eu mea inani iriure.footnote:[Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae! Lorem ipsum dolor sit amet, consectetur adipiscing elit.]
-
-
-[#lists]
-== Lists
-
-=== Unordered list
-
-* List item
-** Nested list item
-*** Deeper nested list item
-* List item
- ** Another nested list item
-* List item
-
-.Unordered list max level nesting
-* Level 1 list item
-** Level 2 list item
-*** Level 3 list item
-**** Level 4 list item
-***** Level 5 list item
-****** etc.
-* Level 1 list item
-
-=== Ordered list
-
-. Step 1
-. Step 2
-.. Step 2a
-.. Step 2b
-. Step 3
-
-.Ordered list max level nesting
-. Level 1 list item
-.. Level 2 list item
-... Level 3 list item
-.... Level 4 list item
-..... Level 5 list item
-. Level 1 list item
-
-==== Ordered list numeration styles
-
-[.scrolltable]
---
-[cols="6*a"]
-|===
-|`decimal`
-|`loweralpha`
-|`upperalpha`
-|`lowerroman`
-|`upperroman`
-|`lowergreek`
-
-a|[decimal]
-. Protons
-. Electrons
-. Neutrons
-
-a|[loweralpha]
-. Protons
-. Electrons
-. Neutrons
-
-a|[upperalpha]
-. Protons
-. Electrons
-. Neutrons
-
-a|[lowerroman]
-. Protons
-. Electrons
-. Neutrons
-
-a|[upperroman]
-. Protons
-. Electrons
-. Neutrons
-
-a|[lowergreek]
-. Protons
-. Electrons
-. Neutrons
-|===
---
-
-.Ordered list w/ customized numeration
-[upperalpha]
-. potenti donec cubilia tincidunt
-. etiam pulvinar inceptos velit quisque aptent himenaeos
-. lacus volutpat semper porttitor aliquet ornare primis nulla enim
-
-Natum facilisis theophrastus an duo.
-No sea, at invenire voluptaria mnesarchum has.
-
-.Unordered list w/ customized marker
-[square]
-* ultricies sociosqu tristique integer
-* lacus volutpat semper porttitor aliquet ornare primis nulla enim
-* etiam pulvinar inceptos velit quisque aptent himenaeos
-
-=== Description list
-
-First term:: Description of the first term.
-Second term:: Description of the second term.
-+
-With another paragraph.
-Third term::
-Description of the first term.
-
-==== Horizontal description list (unconstrained)
-
-[horizontal]
-CPU:: The brain of the computer.
-Hard drive:: Permanent storage for operating system and/or user files.
-+
-Solid state drives (SSDs) are faster than hard drives, but are also more expensive.
-RAM::
-Temporarily stores information the CPU uses during operation.
-
-==== Horizontal description list (constrained)
-
-[horizontal,labelwidth=25,itemwidth=75]
-A short term:: The term for this item likely fits inside the column's width.
-A long term that wraps across multiple lines:: The term for this item wraps since the width of the term column is restricted using the `labelwidth` attribute.
-
-==== Question and Answer List
-
-[qanda]
-What is the answer?::
-This is the answer.
-
-Are cameras allowed?::
-Are backpacks allowed?::
-No.
-
-=== Checklist
-
-* [*] checked
-* [x] also checked
-* [ ] not checked
-
-.Interactive checklist
-[%interactive]
-* [*] checked
-* [x] also checked
-* [ ] not checked
-
-=== Example: Mixed list
-
-Operating Systems::
-  Linux:::
-    . Fedora
-      * Desktop
-    . Ubuntu
-      * Desktop
-      * Server
-  BSD:::
-    . FreeBSD
-    . NetBSD
-
-Cloud Providers::
-  PaaS:::
-    . OpenShift
-    . CloudBees
-  IaaS:::
-    . Amazon EC2
-    . Rackspace
-
-=== Example: Complex lists
-
-.Drop the principal text
-. {empty}
-+
-----
-print("one")
-----
-. {empty}
-+
-----
-print("one")
-----
-
-.List continuation
-* Every list item has at least one paragraph of content,
-  which may be wrapped, even using a hanging indent.
-+
-Additional paragraphs or blocks are adjoined by putting
-a list continuation on a line adjacent to both blocks.
-
-* A literal paragraph does not require a list continuation.
-
- $ cd projects/my-book
-
-* The header in AsciiDoc must start with a document title.
-+
-----
-= Document Title
-----
-+
-Keep in mind that the header is optional.
-
-** The header in AsciiDoc must start with a document title.
-+
---
-----
-= Document Title
-----
-
-NOTE: The header is optional.
---
-
-* AsciiDoc lists may contain any complex content.
-+
-|===
-|Column 1, Header Row |Column 2, Header Row
-
-|Column 1, Row 1
-|Column 2, Row 1
-|===
-
-== Code
-
-=== Inline code
-
-Output literal monospace text, such as `my-python-function` or `initial-scale=1.0`.
-
-=== Code blocks
-
-[source,json]
-----
-{
-  "name": "module-name",
-  "version": "10.0.1",
-  "description": "An example module to illustrate the usage of package.json",
-  "author": "Author Name ",
-  "scripts": {
-    "test": "mocha",
-    "lint": "eslint"
-  }
-}
-----
-
-.Console code block
-[source,console]
-----
-$ pip install astra-vector
-$ python3
-----
-
-[.wrap]
-.Text does not wrap by default
-[source]
-----
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-----
-
-[.nolang]
-.Hide language name
-[source,java]
-----
-// A title with hidden language name
-public class CurrentDateTime {
-    public static void main(String[] args) {
-        LocalDateTime current = LocalDateTime.now();
-
-        System.out.println("Current Date and Time is: " + current);
-    }
-}
-----
-
-[.nolang]
-[source,java]
-----
-// No title with hidden language name
-public class CurrentDateTime {
-    public static void main(String[] args) {
-        LocalDateTime current = LocalDateTime.now();
-
-        System.out.println("Current Date and Time is: " + current);
-    }
-}
-----
-
-=== Callouts
-
-[source,js]
-----
-vfs
-  .src('js/vendor/*.js', { cwd: 'src', cwdbase: true, read: false })
-  .pipe(tap((file) => { // <.>
-    file.contents = browserify(file.relative, { basedir: 'src', detectGlobals: false }).bundle()
-  }))
-  .pipe(buffer()) // <.>
-  .pipe(uglify())
-  .pipe(gulp.dest('build'))
-----
-<.> The `tap` function is used to wiretap the data in the pipe.
-<.> Wrap each streaming file in a buffer so the files can be processed by uglify.
-Uglify can only work with buffers, not streams.
-
-== Tabset
-
-[tabs]
-======
-Tab A:: Contents of Tab A.
-
-Tab B::
-+
-Contents of Tab B.
-
-Tab C::
-+
---
-Contents of Tab C.
-
-Contains more than one block.
---
-======
-
-=== Example: Overflow tabset
-
-[tabs.overflow]
-======
-Tab Name:: Contents of Tab.
-
-Longer Tab Name::
-+
-Contents of Longer Tab.
-
-An Even Longer Tab Name::
-+
-Contents of Even Longer Tab.
-
-This Is The Longest Tab Name::
-+
-Contents of The Longest Tab.
-======
-
-[tabs.wrapping]
-======
-Tab Name:: Contents of Tab.
-
-Longer Tab Name::
-+
-Contents of Longer Tab.
-
-An Even Longer Tab Name::
-+
-Contents of Even Longer Tab.
-
-This Is The Longest Tab Name::
-+
-Contents of The Longest Tab.
-======
-
-=== Example: Complex tabset
-
-[tabs]
-======
-Tarball::
-+
-. If you haven't already, start by downloading the Cassandra binary tarball.
-For example, to download Cassandra 4.1.2:
-+
-[tabs]
-====
-cURL::
-+
---
-[source,shell,subs="attributes+"]
-----
-curl -OL https://archive.apache.org/dist/cassandra/4.1.2/apache-cassandra-4.1.2-bin.tar.gz
-----
---
-
-Wget::
-+
---
-[source,shell,subs="attributes+"]
-----
-wget https://archive.apache.org/dist/cassandra/4.1.2/apache-cassandra-4.1.2-bin.tar.gz
-----
---
-====
-+
-[NOTE]
-====
-To download a different version of Cassandra, visit the https://archive.apache.org/dist/cassandra/[Apache Archives].
-====
-+
-. (Optional) Verify the integrity of the downloaded tarball using one of the methods https://www.apache.org/dyn/closer.cgi#verify[here^].
-+
-.. For example, to verify the SHA256 hash of the downloaded file using GPG:
-+
-[source,shell,subs="attributes+"]
-----
-gpg --print-md SHA256 apache-cassandra-4.1.2-bin.tar.gz
-----
-+
-.. Compare the output with the contents of the SHA256 file:
-+
-[source,shell,subs="attributes+"]
-----
-curl -L https://archive.apache.org/dist/cassandra/4.1.2/apache-cassandra-4.1.2-bin.tar.gz.sha256
-----
-
-Debian::
-+
-. (Optional) Verify the integrity of the downloaded tarball using one of the methods https://www.apache.org/dyn/closer.cgi#verify[here^].
-+
-.. For example, to verify the SHA256 hash of the downloaded file using GPG:
-+
-[tabs]
-====
-Command::
-+
---
-[source,shell,subs="attributes+"]
-----
-gpg --print-md SHA256 apache-cassandra-4.1.2-bin.tar.gz
-----
---
-
-Result::
-+
---
-[source,console,subs="attributes+"]
-----
-apache-cassandra-4.1.2-bin.tar.gz: 7CE3103A 76B8AF76 FFD8488D 6BF484E1 F1751196
-                                   17F3205A E0526C71 D816C6F7
-----
---
-====
-+
-.. Compare the output with the contents of the SHA256 file:
-+
-[tabs]
-====
-cURL::
-+
---
-[source,shell,subs="attributes+"]
-----
-curl -L https://archive.apache.org/dist/cassandra/4.1.2/apache-cassandra-4.1.2-bin.tar.gz.sha256
-----
---
-
-Wget::
-+
---
-[source,shell,subs="attributes+"]
-----
-wget --quiet -O - https://archive.apache.org/dist/cassandra/4.1.2/apache-cassandra-4.1.2-bin.tar.gz.sha256
-----
---
-
-Result::
-+
---
-[source,console]
-----
-7ce3103a76b8af76ffd8488d6bf484e1f175119617f3205ae0526c71d816c6f7
-----
---
-====
-
-CentOS:: Just text.
-======
-
-=== Experimental: Tabset icons
-
-[tabs]
-======
-{cassandra-icon} CQL::
-+
-[source,sql]
-----
-USE cycling;
-CREATE TABLE rank_by_year_and_name (
-  race_year int,
-  race_name text,
-  cyclist_name text,
-  rank int,
-  PRIMARY KEY ((race_year, race_name), rank)
-);
-----
-
-{python-icon} Python::
-+
-[source,python]
-----
-    log.info("creating table...")
-    session.execute("""
-        CREATE TABLE IF NOT EXISTS cyclist_by_year_and_name (
-            race_year int,
-            race_name text,
-            rank int,
-            cyclist_name text,
-            PRIMARY KEY ((race_year,race_name),rank)
-        )
-        """)
-----
-
-{java-icon} Java::
-+
-[source,java]
-----
-CreateTable create = createTable("cycling", "cyclist_by_year_and_name")
-    .withPartitionKey("race_year", DataTypes.INT)
-    .withPartitionKey("race_name", DataTypes.TEXT)
-    .withClusteringColumn("rank", DataTypes.INT)
-    .withColumn("cyclist_name", DataTypes.TEXT);
-// CREATE TABLE cycling.cyclist_by_year_and_name (race_year int,race_name text,rank int,cyclist_name text,PRIMARY KEY((race_year,race_name),rank))
-----
-
-{shell-icon} REST API::
-+
-[source,json]
-----
-curl -s --location \
---request POST http://localhost:8082/v2/schemas/keyspaces/cycling/tables \
---header "X-Cassandra-Token: $AUTH_TOKEN" \
---header "Content-Type: application/json" \
---header "Accept: application/json" \
---data '{
-	"name": "cyclist_by_year_and_name",
-	"columnDefinitions":
-	  [
-        {
-	      "name": "race_year",
-	      "typeDefinition": "int"
-	    },
-        {
-	      "name": "race_name",
-	      "typeDefinition": "text"
-	    },
-        {
-	      "name": "rank",
-	      "typeDefinition": "int"
-	    }
-        ,
-        {
-          "name": "cyclist_name",
-          "typeDefinition": "text"
-        }
-	  ],
-	"primaryKey":
-	  {
-	    "partitionKey": ["race_year", "race_name"],
-	    "clusteringKey": ["rank"]
-	  },
-	"tableOptions":
-	  {
-	    "defaultTimeToLive": 0,
-	    "clusteringExpression":
-	      [{ "column": "rank", "order": "ASC" }]
-	  }
-}'
-----
-======
-
-== Admonitions
-
-NOTE: An admonition draws the reader's attention to auxiliary information.
-
-IMPORTANT: Sign off before stepping away from your computer.
-
-TIP: Look for the warp zone under the bridge.
-
-CAUTION: Slippery when wet.
-
-WARNING: The software you're about to use is untested.
-
-.Complex admonition
-[NOTE]
-====
-An admonition block may contain complex content, like <> and <>.
-
-.A list
-* List item
-** Nested list item
-*** Deeper nested list item
-* List item
- ** Another nested list item
-* List item
-
-.A table
-[cols="3*"]
-|===
-|Cell in column 1, row 1
-|Cell in column 2, row 1
-
-|Cell in column 1, row 2
-|Cell in column 2, row 2
-
-|Cell in column 1, row 3
-|Cell in column 2, row 3
-|===
-
-.A code block
-[source,js]
-----
-vfs
-  .src('js/vendor/*.js', { cwd: 'src', cwdbase: true, read: false })
-  .pipe(tap((file) => { // <.>
-    file.contents = browserify(file.relative, { basedir: 'src', detectGlobals: false }).bundle()
-  }))
-----
-<.> Maybe with a callout.
-
-.Another admonition
-[TIP]
-======
-Admonition styles are set on example blocks, which are delimited by four equal signs (`====`).
-When nesting a delimited block that uses the same structural container, it's necessary to vary the length of the delimiter lines (i.e., make the length of the delimiter lines for the child block different than the length of the delimiter lines for the parent block).
-Varying the delimiter line length allows the parser to distinguish one block from another.
-======
-====
-
-[#tables]
-== Tables
-
-[frame=none, grid=rows,%autowidth.stretch]
-.Default
-|===
-|Column 1, header row |Column 2, header row |Column 3, header row
-
-|Cell in column 1, row 2
-|Cell in column 2, row 2
-|Cell in column 3, row 2
-
-|Cell in column 1, row 3
-|Cell in column 2, row 3
-|Cell in column 3, row 3
-|===
-
-[%autowidth.stretch,stripes=even]
-.Striped
-|===
-|Header |Header |Header |Header
-
-|Cell
-|Cell
-|Cell
-|Cell
-
-|Cell
-|Cell
-|Cell
-|Cell
-
-|Cell
-|Cell
-|Cell
-|Cell
-|===
-
-
-[%footer%autowidth.stretch]
-.Footer
-|===
-|Header |Header |Header |Header
-
-h|Item
-|2
-|1
-|5
-
-h|Item
-|2
-|1
-|5
-
-h|Total
-|4
-|2
-|10
-|===
-
-.Basic table
-[cols="3*"]
-|===
-|Cell in column 1, row 1
-|Cell in column 2, row 1
-|Cell in column 3, row 1
-
-|Cell in column 1, row 2
-|Cell in column 2, row 2
-|Cell in column 3, row 2
-
-|Cell in column 1, row 3
-|Cell in column 2, row 3
-|Cell in column 3, row 3
-|===
-
-.Table w/ header row
-[%autowidth.stretch]
-|===
-|Column 1, header row |Column 2, header row |Column 3, header row
-
-|Cell in column 1, row 2
-|Cell in column 2, row 2
-|Cell in column 3, row 2
-
-|Cell in column 1, row 3
-|Cell in column 2, row 3
-|Cell in column 3, row 3
-|===
-
-.Table w/ header row, footer row, and autowidth
-[#dependencies%footer%autowidth]
-|===
-|Library |Version
-
-|eslint
-|^1.7.3
-
-|eslint-config-gulp
-|^2.0.0
-
-|expect
-|^1.20.2
-
-|istanbul
-|^0.4.3
-
-|istanbul-coveralls
-|^1.0.3
-
-|jscs
-|^2.3.5
-
-h|Total
-|6
-|===
-
-=== Example: Complex tables
-
-.Table w/ header row, variable column widths, and AsciiDoc content
-[cols="1,1,2a"]
-|===
-|Name |Category |Description
-
-|Firefox
-|Browser
-|Mozilla Firefox is an open source web browser.
-
-image::firefox-window.png[Screenshot of Firefox window]
-
-It's designed for:
-
-* standards compliance
-* performance
-* portability
-
-image::https://upload.wikimedia.org/wikipedia/commons/a/a0/Firefox_logo%2C_2019.svg[Firefox logo,align=left,link=https://getfirefox.com]
-https://getfirefox.com[Get Firefox]!
-
-|Arquillian
-|Testing
-|An innovative and highly extensible testing platform.
-Empowers developers to easily create real, automated tests.
-
-Each Arquillian test is associated with at least one deployment.
-
-[NOTE]
-====
-The deployment is configured using a static method annotated with @Deployment that returns a ShrinkWrap archive. Here’s an example:
-
-[source,java]
-----
-@Deployment
-public static JavaArchive createDeployment() {
-    return ShrinkWrap.create(JavaArchive.class)
-        .addClass(Greeter.class)
-        .addAsManifestResource(EmptyAsset.INSTANCE, "beans.xml");
-}
-----
-====
-|===
-
-.Table w/ formatted, aligned, and merged cells
-[cols="e,m,^,>s"]
-|===
-|1 >s|2 |3 |4
-^|5 2.2+^.^|6 .3+<.>m|7
-^|8
-|9 2+>|10
-|===
-
-.Table w/ `frame=none`, `grid=none`
-[frame=none, grid=none]
-|===
-|Column 1, header row |Column 2, header row |Column 3, header row
-
-|Cell in column 1, row 2
-|Cell in column 2, row 2
-|Cell in column 3, row 2
-
-|Cell in column 1, row 3
-|Cell in column 2, row 3
-|Cell in column 3, row 3
-|===
-
-.Nested table
-[cols="1,2a"]
-|===
-| Col 1 | Col 2
-
-| Cell 1.1
-| Cell 1.2
-
-| Cell 2.1
-| Cell 2.2
-
-[cols="2,1"]
-!===
-! Col1 ! Col2
-
-! C11
-! C12
-
-!===
-|===
-
-.Striped table (even striping)
-[cols=2*,stripes=even]
-|===
-|A1
-|B1
-|A2
-|B2
-|A3
-|B3
-|===
-
-.Striped table (hover striping)
-[cols=2*,stripes=hover]
-|===
-|A1
-|B1
-|A2
-|B2
-|A3
-|B3
-|===
-
-
-== Images
-
-=== Images for Light and Dark modes
-
-[source,adoc]
-----
-[.for-light]
-image::your-light-image.png[Description]
-[.for-dark]
-image::your-dark-image.png[Description]
-
-// You can also define the role within the macro itself
-
-image::light-mode-illustration.png[Description,role=for-light]
-image::dark-mode-illustration.png[Description,role=for-dark]
-----
-
-[.for-light]
-image::light-mode-illustration.png[Description,400]
-[.for-dark]
-image::dark-mode-illustration.png[Description,400]
-
-=== SVG with CSS variables for Light and Dark modes
-
-.Currently unsupported
-[WARNING]
-====
-The method described below for embedding an SVG directly into the HTML won't work until Antora adds support for the `opts=inline` option (see https://gitlab.com/antora/antora/-/issues/1001).
-Therefore, unless a suitable workaround is discovered, we can't support SVGs with CSS variables until Antora fixes this issue.
-====
-
-[source,svg]
-----
-
-  
-  
-  
-
-----
-
-[source,adoc]
-----
-image::your-diagram.svg[Description,300,opts=inline] <1>
-----
-
-<1> The `opts=inline` attribute is required to embed the SVG directly into the HTML.
-
-image::preview-src/simple-diagram.svg[Simple Diagram,192,opts=inline]
-
-=== Inline images
-
-Click image:play_circle_FILL0_wght400_GRAD0_opsz24.svg[title=Play] to get the party started.
-
-Click image:pause_circle_FILL0_wght400_GRAD0_opsz24.svg[title=Pause] when you need a break.
-
-=== Block images
-
-.Bitmap image (unconstrained; default alignment)
-image::screenshot.png[Screenshot of Astra Portal Home]
-
-.Bitmap image (300px width; default alignment)
-image::screenshot.png[Screenshot of Astra Portal Home,300]
-
-.SVG image (300px width; default alignment). Image is rasterized (`opts=` _none_).
-image::preview-src/multirepo-ssg.svg[Multirepo SSG,300]
-
-.SVG image (300px width; default alignment). Image embedded as a live, interactive object (`opts=interactive`).
-image::preview-src/multirepo-ssg.svg[Multirepo SSG,300,opts=interactive]
-
-.SVG image (300px width; default alignment). Image embedded directly into the HTML itself (`opts=inline`).
-image::preview-src/multirepo-ssg.svg[Multirepo SSG,300,opts=inline]
-
-==== Aligning block images
-
-.Bitmap image (aligned left)
-image::screenshot.png[Screenshot of Astra Portal Home,300,align="left"]
-
-.Bitmap image (aligned right)
-image::screenshot.png[Screenshot of Astra Portal Home,300,align="right"]
-
-.Bitmap image (aligned center)
-image::screenshot.png[Screenshot of Astra Portal Home,300,align="center"]
-
-==== Floating block images
-
-[.float-group]
---
-image: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::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.
---
-
-== Video
-
-.YouTube (unconstrained; default alignment)
-video::n_LcVqqHSY8[youtube]
-
-.Vimeo (640x360; default alignment)
-video::300817511[vimeo,640,360]
-
-== Audio
-
-.Take a zen moment
-audio::ocean-waves.wav[]
-
-== Collapsible block
-
-.Basic collapsible block
-[%collapsible]
-====
-Details.
-
-Loads of details.
-====
-
-.Collapsible `code block`
-[%collapsible]
-====
-[source,asciidoc]
-----
-Some code.
-----
-====
-
-=== Collapsible results
-
-[source,asciidoc]
-----
-Run this code.
-----
-
-.Result
-[%collapsible.result]
-====
-[source,console]
-----
-Voila!
-----
-====
-
-== Sidebar
-
-.Sidebar title
-****
-Sidebars are used to visually separate auxiliary bits of content that supplement the main text.
-****
-
-== Horizontal rule
-
-A line with three single quotation marks (i.e., `'''`) is a special macro that inserts a thematic break (aka horizontal rule):
-
-'''
-
-There are rare circumstances where a horizontal rule is required.
-
-== More blocks
-
-As you might have seen in the examples further up on this page -- any block can have a title.
-A block title is defined using a line of text above the block that starts with a dot.
-That dot cannot be followed by a space.
-For block images, the title is displayed below the block.
-For all other blocks, the title is typically displayed above it.
-
-=== Example block
-
-.Optional title
-====
-Here's a sample AsciiDoc document:
-
-[source,asciidoc]
-----
-= Title of Document
-Doc Writer
-:toc:
-
-This guide provides...
-----
-
-The document header is useful, but not required.
-====
-
-=== Listing block
-
-.Optional title
-----
-This is a _delimited listing block_.
-
-The content inside is displayed as 
 text.
-----
-
-=== Literal block
-
-.Optional title
-....
-error: 1954 Forbidden search
-absolutely fatal: operation lost in the dodecahedron of doom
-Would you like to try again? y/n
-....
-
-=== Blockquote
-
-[,'Famous Person. Cum dicat putant ne.','Cum dicat putant ne. https://example.com[Famous Person Website]']
-____
-Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna.
-Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae!
-Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna.
-Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae!
-____
-
-=== Verse
-
-[verse]
-____
-The fog comes
-on little cat feet.
-____
-
-== Equations and formulas (STEM)
-
-=== Inline stem macro
-
-stem:[sqrt(4) = 2]
-
-Water (stem:[H_2O]) is a critical component.
-
-A matrix can be written as stem:[[[a,b\],[c,d\]\]((n),(k))].
-
-=== Block STEM content
-
-[stem]
-++++
-sqrt(4) = 2
-++++
-
-=== Mixing STEM notations
-
-.An e-xciting limit with LaTeX!
-[stem]
-++++
-\lim_{n \to \infty}\frac{n}{\sqrt[n]{n!}} = {\large e}
-++++
-
-.A basic square root with AsciiMath
-[asciimath]
-++++
-sqrt(4) = 2
-++++
-
-== Miscellaneous
-
-=== Textual symbol replacements
-
-[%autowidth,cols="~,^~,^~,^~,~"]
-|===
-|Name |Syntax |Unicode Replacement |Rendered |Notes
-
-|Copyright
-|+(C)+
-|+©+
-|(C)
-|
-
-|Registered
-|+(R)+
-|+®+
-|(R)
-|
-
-|Trademark
-|+(TM)+
-|+™+
-|(TM)
-|
-
-|Em dash
-|+--+
-|+—+
-|{empty}--{empty}
-|Only replaced if between two word characters, between a word character and a line boundary, or flanked by spaces.
-
-When flanked by space characters (e.g., `+a -- b+`), the normal spaces are replaced by thin spaces (\ ).
-Otherwise, the em dash is followed by a zero-width space (\​) to provide a break opportunity.
-
-|Ellipsis
-|+...+
-|+…+
-|...
-|The ellipsis is followed by a zero-width space (\​) to provide a break opportunity.
-
-|Single right arrow
-|+->+
-|+→+
-|->
-|
-
-|Double right arrow
-|+=>+
-|+⇒+
-|=>
-|
-
-|Single left arrow
-|+<-+
-|+←+
-|<-
-|
-
-|Double left arrow
-|+<=+
-|+⇐+
-|<=
-|
-
-|Typographic apostrophe
-|Sam\'s
-|+Sam’s+
-|Sam's
-|The typewriter apostrophe is replaced with the typographic (aka curly or smart) apostrophe.
-|===
-
-[#english+中文]
-=== English + 中文
-
-爱屋及乌 -- Love me, love my dog.
-
-== Fin
-
-That's all, folks!
+include::preview-src/page-templates/landing.adoc[]
\ No newline at end of file
diff --git a/preview-src/page-templates/full.adoc b/preview-src/page-templates/full.adoc
new file mode 100644
index 00000000..3365b441
--- /dev/null
+++ b/preview-src/page-templates/full.adoc
@@ -0,0 +1,74 @@
+= {company} Astra
+:page-layout: full
+
+[.max-w-[650px]]
+DataStax Astra is a cutting-edge cloud-native database platform designed to empower developers.
+Harnessing the strengths of vector databases, serverless computing, and real-time streaming, Astra propels application development into the next generation.
+From AI-driven capabilities to robust data stream management, Astra simplifies complex tasks, offering unparalleled performance and scalability.
+
+[.[&>h2]:!hidden]
+== {empty}
+
+++++
+

+

+++++
+
+[discrete.!m-0]
+== [.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.
+
+xref:astra-db-vector:ROOT:index.adoc[Go to Vector Docs,role="btn btn-primary btn-solid inline-flex"]
+
+++++
+

+
+

+++++
+
+[discrete.[&+hr]:!mt-2]
+== Other Astra Products
+
+''''
+
+++++
+

+

+++++
+
+[discrete]
+== [.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.
+
+[.landing-a]
+https://docs.datastax.com/en/astra-serverless/docs/index.html[Go to Serverless Docs]
+
+++++
+

+

+++++
+
+[discrete]
+== [.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.
+
+[.landing-a]
+https://docs.datastax.com/en/streaming/astra-streaming/index.html[Go to Streaming Docs]
+
+++++
+

+

+++++
diff --git a/preview-src/page-templates/integrations-detail.adoc b/preview-src/page-templates/integrations-detail.adoc
new file mode 100644
index 00000000..8b5bf96e
--- /dev/null
+++ b/preview-src/page-templates/integrations-detail.adoc
@@ -0,0 +1,140 @@
+= LangChain
+:page-layout: tutorial
+: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.
+:page-colab-link: https://colab.research.google.com/github/datastaxdevs/mini-demo-astradb-langchain/blob/main/AstraDB_langchain_quickstart_1.ipynb
+:page-time-commitment: 15 min
+:page-tags: Machine Learning Frameworks, Embedding Services, Astra, SDK
+:figure-caption!:
+
+._Integration-specific formatting_
+[%collapsible%open]
+====
+Tutorial formatting::
+Integrations use the same general AsciiDoc formatting as xref:tutorial.adoc[tutorials], e.g. page attributes and step numbering.
+
+Special page attributes::
+Add the following attributes to the page header to automatically add the corresponding details to the page.
++
+.Page icon
+[source,asciidoc]
+----
+:page-icon: ROOT:ui/icons/langchain.svg
+----
++
+.Page tags
+[source,asciidoc]
+----
+:page-tags: Machine Learning Frameworks, Embedding Services, Astra, SDK
+----
+====
+
+== Overview
+
+By integrating LangChain with Astra, you can seamlessly utilize advanced linguistic processing capabilities of LangChain within the Astra vector database environment.
+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"]
+
+To get started, ensure you have an https://example.com[active LangChain account^,role=external] with the requisite permissions.
+
+You will also need an https://example.com[active LangChain account^,role=external] an access to its API keys.
+
+== Setup
+
+[.step]
+=== Acquire API key from LangChain
+
+Log into your LangChain dashboard and navigate to the 'API' section to obtain your API key.
+
+[.step]
+=== Configure Astra's SDK for LangChain
+
+[source,python]
+----
+from astra import VectorDB
+db = VectorDB(config='astra_config.yaml')
+db.set_integration('LangChain', api_key='YOUR_LANGCHAIN_API_KEY')
+----
+
+[.step]
+=== Initialize data transfer
+
+[source,python]
+----
+db.sync_from('LangChain')
+----
+
+== Verify integration
+
+Ensure your integration was successful by checking for new linguistic vector entries in your Astra database:
+
+. Navigate to the Astra dashboard.
+. Open the 'Vector Data' tab.
+. Confirm the appearance of recent vector entries from LangChain.
+
+image::/img/placeholder-image.svg["Screenshot"]
+
+[.header-noline]
+== Advanced configuration
+
+[cols="1h,1"]
+|===
+|Parameter |Description
+
+|Sync Frequency
+|The lower the value, the more frequent the sync, impacting server performance.
+
+Sample `30 min`
+
+|Data Volume Limit
+|The lower the value, the more frequent the sync, impacting server performance.
+
+Sample `500 MB`
+|===
+
+[.header-noline]
+== Troubleshooting
+
+[cols="1,1"]
+|===
+|Error |Solution
+
+|`LangChain API key invalid`
+|Make sure you copied the correct API key. Refresh or regenerate the key in the LangChain dashboard if necessary.
+
+|`Data sync failed`
+|Ensure both Astra and LangChain servers are running without issues. Check network connectivity and try syncing again after a few minutes.
+|===
+
+[.header-noline]
+== Next steps
+
+[.ds-card]
+--
+[unstyled]
+* https://example.com[Advanced Natural Language Processing with Astra and LangChain] [.material-icons]#auto_stories# Tutorial
++
+Dive into how the combination of Astra's vector database and LangChain's linguistic prowess can enhance your NLP projects.
+--
+
+[.ds-card]
+--
+[unstyled.guide]
+* https://example.com[Optimizing Linguistic Vector Searches in Astra] [.material-icons]#auto_stories# Tutorial
++
+Discover best practices and techniques to improve the efficiency and accuracy of linguistic vector searches in Astra, leveraging LangChain integrations.
+--
+
+[.ds-card]
+--
+[unstyled]
+* https://example.com[Cohere] [.material-icons]#integration_instructions# Integration
++
+Cohere provides advanced NLP models designed for a variety of tasks, ranging from text generation to understanding.
+Their models offer a balance between performance and efficiency.
+With Astra's integration, developers can effortlessly combine Cohere's capabilities with a powerful vector database solution.
+--
diff --git a/preview-src/examples/integrations-overview.adoc b/preview-src/page-templates/integrations-overview.adoc
similarity index 87%
rename from preview-src/examples/integrations-overview.adoc
rename to preview-src/page-templates/integrations-overview.adoc
index c6746bad..9808385b 100644
--- a/preview-src/examples/integrations-overview.adoc
+++ b/preview-src/page-templates/integrations-overview.adoc
@@ -1,13 +1,13 @@
 = Integrations
 :page-layout: tutorial
-:hugging-icon: image:hugging-face.svg[,20]
-:langchain-icon: image:langchain.svg[,20]
-:openai-icon: image:openai.svg[,20]
-:jina-icon: image:jina.svg[,20]
-:deepset-icon: image:deepset.svg[,20]
-:cohere-icon: image:cohere.svg[,20]
-:llamaindex-icon: image:llamaindex.svg[,20]
-:cassio-icon: image: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.
@@ -32,7 +32,7 @@ sentiment analysis, and more. Integrating with Astra empowers developers
 to harness these models directly alongside their database operations.
 
 [.tags-container]
-[.tag]#Natural Language# [.tag]#Machine Learning# 
+[.tag]#Natural Language# [.tag]#Machine Learning#
 
 [.landing-card-icon]
 {hugging-icon}
@@ -50,7 +50,7 @@ human-like text, analyze data, or even create chatbots. Integration with Astra e
 that data can be fetched, analyzed, and stored seamlessly when working with OpenAI tools.
 
 [.tags-container]
-[.tag]#Natural Language# [.tag]#Machine Learning# 
+[.tag]#Natural Language# [.tag]#Machine Learning#
 
 [.landing-card-icon.bg-black]
 {openai-icon}
@@ -75,7 +75,7 @@ embeddings but also ensures real-time syncing of data, giving your applications
 an edge in language-based operations.
 
 [.tags-container]
-[.tag]#Natural Language# [.tag]#Machine Learning# 
+[.tag]#Natural Language# [.tag]#Machine Learning#
 
 [.landing-card-icon]
 {langchain-icon}
@@ -92,7 +92,7 @@ Whether it's text, images, or videos, Jina can index and retrieve data with high
 Integration with Astra enables an optimized storage solution that complements Jina's search capabilities.
 
 [.tags-container]
-[.tag]#Natural Language# [.tag]#Machine Learning# 
+[.tag]#Natural Language# [.tag]#Machine Learning#
 
 [.landing-card-icon]
 {jina-icon}
@@ -160,4 +160,4 @@ https://example.com[arrow_forward]
 
 [.landing-card-icon]
 {cassio-icon}
---
\ No newline at end of file
+--
diff --git a/preview-src/page-templates/landing.adoc b/preview-src/page-templates/landing.adoc
new file mode 100644
index 00000000..7c37ed7d
--- /dev/null
+++ b/preview-src/page-templates/landing.adoc
@@ -0,0 +1,93 @@
+= {product}
+:page-layout: landing
+
+Efficiently store and query vector embeddings for better similarity search. If you're new, read our xref:get-started:concepts.adoc[introduction to vector databases].
+
+[.[&>h2]:!hidden]
+== {empty}
+
+++++
+

+

+++++
+
+[discrete.flex.lg:flex-col.gap-3.!m-0]
+== Get Started
+
+Dive straight into Astra Vector with this concise guide tailored for developers.
+Learn the essentials of how to connect to a database, ingest vectors, and perform a similarity search.
+
+[.[&>p]:flex.[&>p]:gap-1]
+xref:get-started:quickstart.adoc[Quickstart,role="btn btn-primary btn-solid"] https://astra.datastax.com[Create Astra Account^,role="btn btn-neutral btn-outlined external"]
+
+++++
+

+
+

+++++
+
+[.[&>h2]:!text-h1]
+== Next steps
+
+++++
+

+

+++++
+
+[discrete.flex.items-center.lg:items-start.lg:flex-col.gap-1]
+== [.rounded-xl.border.p-1.w-max.material-icons]#fact_check# Load your data 
+
+Get your data and embeddings into a database.
+
+[.landing-a]
+xref:data:load-data.adoc[Load data]
+
+++++
+

+

+++++
+
+[discrete.flex.items-center.lg:items-start.lg:flex-col.gap-1]
+== [.rounded-xl.border.p-1.w-max.material-icons]#auto_stories# Explore your data
+
+Perform similarity searches and browse the results.
+
+[.landing-a]
+link:{#}[Explore data]
+
+++++
+

+

+++++
+
+[discrete.flex.items-center.lg:items-start.lg:flex-col.gap-1]
+== [.rounded-xl.border.p-1.w-max.material-icons]#power# Connect to your database
+
+Work with your data using our clients and APIs.
+
+[.landing-a]
+xref:data:connect-to-database.adoc[Connect database]
+
+++++
+

+

+++++
diff --git a/preview-src/examples/quickstart.adoc b/preview-src/page-templates/tutorial.adoc
similarity index 75%
rename from preview-src/examples/quickstart.adoc
rename to preview-src/page-templates/tutorial.adoc
index 2c461450..911201b5 100644
--- a/preview-src/examples/quickstart.adoc
+++ b/preview-src/page-templates/tutorial.adoc
@@ -1,5 +1,4 @@
-= Quickstart
-:navtitle: Quickstart
+= Tutorial
 :page-layout: tutorial
 :page-colab-link: https://colab.research.google.com/github/CassioML/cassio-website/blob/main/docs/frameworks/langchain/.colab/colab_qa-basic.ipynb
 :page-time-commitment: 15 min
@@ -7,21 +6,56 @@
 :astra-link: https://astra.datastax.com
 :astra-nodejs-link: https://docs.datastax.com/en/astra-serverless/docs/develop/sdks/rest-nodejs-client.html
 :astra-json-link: https://docs.datastax.com/en/astra-serverless/docs/develop/dev-with-json.html
-:page-tags: Machine Learning Frameworks, Embeding Services, Astra, SDK
 :keywords: Machine Learning Frameworks, Embeding Services, Astra, SDK
 
+.Tutorial-specific formatting
+[%collapsible%open]
+====
+Special page attributes::
+Add the following attributes to the page header to automatically add the corresponding heading details to the top of the page.
++
+[source,asciidoc]
+----
+:page-skill-level: Beginner
+:page-time-commitment: 15 min
+:page-colab-link: https://colab.research.google.com/
+----
+
+Automatic steps::
+Add the `.step` role to a section title to prefix it with an auto-incrementing step number.
+The number does not appear in the auto-generated anchor link or the table of contents.
++
+[source,asciidoc]
+----
+[.step]
+=== Install the Python SDK and open a Python REPL.
+...
+[.step]
+=== Connect to Astra and create a database.
+----
+
+Step reset:::
+Add the `.step-reset` role to a section title to reset the step number.
++
+[source,asciidoc]
+----
+[.step-reset]
+=== This title will now be prefixed with "1." regardless of order.
+----
+====
+
 == Objective
 
 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::ROOT:template-examples/quickstart-overview.png["Tutorial overview"]
+image::/img/placeholder-image.svg["Tutorial overview"]
 
 == Prerequisites
 
-To get started, ensure you have an {astra-link}[active Astra account] with the requisite permissions.
+To get started, ensure you have an {astra-link}[active Astra account^,role=external] with the requisite permissions.
 
 [.step]
-=== Install the Python SDK and open a Python REPL.
+=== Install the Python SDK and open a Python REPL
 
 [source,shell]
 ----
@@ -39,7 +73,7 @@ Additional clients, such as {astra-nodejs-link}[Node.js] and {astra-json-link}[J
 ====
 
 [.step]
-=== Connect to Astra and create a database.
+=== Connect to Astra and create a database
 
 [source,python]
 ----
@@ -64,7 +98,7 @@ db.create_table(table_name)
 == Core steps
 
 [.step]
-=== Prepare and ingest data.
+=== Prepare and ingest data
 
 [source,python]
 ----
@@ -79,7 +113,7 @@ for data in sample_vectors:
 ----
 
 [.step]
-=== Perform a similarity search.
+=== Perform a similarity search
 
 [source,python]
 ----
@@ -89,7 +123,7 @@ results = db.similarity_search(table_name, query_vector, k=5)
 ----
 
 [.step]
-=== Show the results.
+=== Show the results
 
 [source,python]
 ----
@@ -101,7 +135,7 @@ for result in results:
 == Cleanup
 
 [.step.step-reset]
-=== Delete all resources.
+=== Delete all resources
 
 [source,python]
 ----
@@ -126,12 +160,12 @@ In this tutorial, you learned how to:
 You're well on your way to becoming an Astra Vector expert!
 
 [.header-noline]
-== Next Steps
+== Next steps
 
 [.ds-card]
 --
 [unstyled]
-* https://example.com[Grasp the basics] [.material-icons]#auto_stories# Tutorial 
+* https://example.com[Grasp the basics] [.material-icons]#auto_stories# Tutorial
 +
 Before diving deep, ensure a solid understanding of foundational concepts surrounding vector databases.
 Delve into embeddings, the nature of high-dimensional data, and their profound impact on machine learning processes.
@@ -149,8 +183,8 @@ Delve into embeddings, the nature of high-dimensional data, and their profound i
 [.ds-card]
 --
 [unstyled]
-* https://example.com[Ingest and store vector data] [.material-icons]#auto_stories# Tutorial 
+* https://example.com[Ingest and store vector data] [.material-icons]#auto_stories# Tutorial
 +
 Before diving deep, ensure a solid understanding of foundational concepts surrounding vector databases.
 Delve into embeddings, the nature of high-dimensional data, and their profound impact on machine learning processes.
---
\ No newline at end of file
+--
diff --git a/preview-src/ui-model.yml b/preview-src/ui-model.yml
index a84d1acb..f9f76dfd 100644
--- a/preview-src/ui-model.yml
+++ b/preview-src/ui-model.yml
@@ -4,127 +4,64 @@ asciidoc:
   - '@asciidoctor/tabs'
 site:
   url: http://localhost:5252
-  title: Brand Docs
-  isPreviewSite: true
-  homeUrl: &home_url /xyz/5.2/index.html
+  title: PREVIEW Datastax Docs
+  homeUrl: &home_url http://localhost:5252
   components:
-  - name: abc
-    title: Component ABC
-    url: '#'
-    versions:
-    - &latest_version_abc
-      url: '#'
-      version: '1.1'
-      displayVersion: '1.1'
-    - url: '#'
-      version: '1.0'
-      displayVersion: '1.0'
-    latestVersion: *latest_version_abc
   - &component
-    name: xyz
-    title: &component_title Component XYZ
-    url: /xyz/6.0/index.html
-    versions:
-    - &latest_version_xyz
-      url: /xyz/6.0/index.html
-      version: '6.0'
-      displayVersion: '6.0'
-    - &component_version
-      title: *component_title
-      url: '#'
-      version: '5.2'
-      displayVersion: '5.2'
-    - url: '#'
-      version: '5.1'
-      displayVersion: '5.1'
-    - url: '#'
-      version: '5.0'
-      displayVersion: '5.0'
-    latestVersion: *latest_version_xyz
-  - name: '123'
-    title: Component 123
+    name: datastax
+    title: PREVIEW Datastax Docs
     url: '#'
     versions:
-    - &latest_version_123
-      url: '#'
-      version: '2.2'
-      displayVersion: '2.2'
-    - url: '#'
-      version: '2.1'
-      displayVersion: '2.1'
-    - url: '#'
-      version: '2.0'
-      displayVersion: '2.0'
-    latestVersion: *latest_version_123
+    - &latest_version
+      url: *home_url
+      version: 'latest'
+      displayVersion: 'latest'
+    latestVersion: *latest_version
 page:
-  url: *home_url
-  home: true
-  title: Brand’s Hardware & Software Requirements
-  component: *component
-  componentVersion: *component_version
-  version: '5.2'
-  displayVersion: '5.2'
-  module: ROOT
-  relativeSrcPath: index.adoc
-  editUrl: http://example.com/project-xyz/blob/main/index.adoc
-  origin:
-    private: false
-  previous:
-    content: Quickstart
-    url: '#'
-    urlType: 'internal'
-  next:
-    content: Liber Recusabo
-    url: '#'
-    urlType: 'internal'
-  breadcrumbs:
-  - content: Quickstart
-    url: '#'
-    urlType: fragment
-  - content: Brand’s Hardware & Software Requirements
-    url: /xyz/5.2/index.html
-    urlType: internal
-  versions:
-  - version: '6.0'
-    displayVersion: '6.0'
-    url: '#'
-  - version: '5.2'
-    displayVersion: '5.2'
-    url: '#'
-  - version: '5.1'
-    displayVersion: '5.1'
-    url: '#'
-  - version: '5.0'
-    displayVersion: '5.0'
-    missing: true
-    url: '#'
+  src:
+    component: *component
+    version: *latest_version
   navigation:
-  - root: true
-    items:
-    - content: Quickstart
-      url: '#'
-      urlType: fragment
+    - content: Page Templates
       items:
-      - content: Brand’s Hardware & Software Requirements
-        url: /xyz/5.2/index.html
+      - content: Full
+        url: /page-templates/full.html
         urlType: internal
-      - content: Cu Solet
-        url: '/xyz/5.2/index.html#cu-solet'
+      - content: Landing
+        url: /page-templates/landing.html
         urlType: internal
-      - content: English + 中文
-        url: '/xyz/5.2/index.html#english+中文'
+      - content: Tutorial
+        url: /page-templates/tutorial.html
         urlType: internal
-    - content: Liber Recusabo
-      url: '#liber-recusabo'
-      urlType: fragment
-    - content: Reference
+      - content: Integrations Overview
+        url: /page-templates/integrations-overview.html
+        urlType: internal
+      - content: Integrations Detail
+        url: /page-templates/integrations-detail.html
+        urlType: internal
+    - content: Asciidoc Examples
       items:
-      - content: Keyboard Shortcuts
-        url: '#'
-        urlType: fragment
-      - content: Importing and Exporting
-        url: '#'
-        urlType: fragment
-      - content: Some Code
-        url: '/xyz/5.2/index.html#some-code'
+      - content: Text formatting
+        url: /asciidoc/text-formatting.html
+        urlType: internal
+      - content: Lists
+        url: /asciidoc/lists.html
+        urlType: internal
+      - content: Tables
+        url: /asciidoc/tables.html
+        urlType: internal
+      - content: Images and media
+        url: /asciidoc/images.html
+        urlType: internal
+      - content: Code
+        url: /asciidoc/code.html
+        urlType: internal
+      - content: Tabsets
+        url: /asciidoc/tabsets.html
+        urlType: internal
+      - content: Blocks
+        url: /asciidoc/blocks.html
+        urlType: internal
+      - content: Admonitions
+        url: /asciidoc/admonitions.html
         urlType: internal
diff --git a/preview-src/vector-home.adoc b/preview-src/vector-home.adoc
deleted file mode 100644
index dd19391c..00000000
--- a/preview-src/vector-home.adoc
+++ /dev/null
@@ -1,149 +0,0 @@
-= 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].
-
-[.[&>h2]:hidden]
-== {empty}
-
-++++
-

-

-++++
-
-[discrete.[&>h2]:border-0.!m-0]
-== 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.
-
-++++
-

-++++
-
-xref:ROOT:templates/examples/quickstart.adoc[Quick Start,role="btn btn-primary btn-solid"]
-
-https://astra.datastax.com[Create Astra Account^,role="btn btn-neutral btn-outlined external"]
-
-++++
-

-

-
-

-

-

-++++
-
-[.explore.header-noline.[&>h2]:text-h1.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]
-====
---
diff --git a/src/css/base.css b/src/css/base.css
index fe08625d..513f363f 100644
--- a/src/css/base.css
+++ b/src/css/base.css
@@ -70,11 +70,13 @@ sup {
   top: -0.5em;
 }
 
-em em { /* stylelint-disable-line */
+em em {
+  /* stylelint-disable-line */
   font-style: normal;
 }
 
-strong strong { /* stylelint-disable-line */
+strong strong {
+  /* stylelint-disable-line */
   font-weight: normal;
 }
 
diff --git a/src/css/doc.css b/src/css/doc.css
index 836e2a85..13d38be8 100644
--- a/src/css/doc.css
+++ b/src/css/doc.css
@@ -182,7 +182,7 @@
 
 .doc a.external::after {
   font-family: "Material Icons Outlined", sans-serif;
-  content: '\e89e';
+  content: "\e89e";
   font-size: calc(16 / var(--rem-base) * 1rem);
   vertical-align: bottom;
   margin-left: var(--ds-space-h);
@@ -240,11 +240,11 @@
 }
 
 .doc .float-gap.right {
-  margin: 0 var(--ds-space-2) var(--ds-space-2) 0;
+  margin: 0 0 var(--ds-space-2) var(--ds-space-2);
 }
 
 .doc .float-gap.left {
-  margin: 0 0 var(--ds-space-2) var(--ds-space-2);
+  margin: 0 var(--ds-space-2) var(--ds-space-2) 0;
 }
 
 .doc .float-group::after {
@@ -989,7 +989,9 @@
   background: var(--kbd-background);
   border: 1px solid var(--kbd-border-color);
   border-radius: 0.25em;
-  box-shadow: 0 1px 0 var(--kbd-border-color), 0 0 0 0.1em var(--body-background) inset;
+  box-shadow:
+    0 1px 0 var(--kbd-border-color),
+    0 0 0 0.1em var(--body-background) inset;
   padding: 0.25em 0.5em;
   vertical-align: text-bottom;
   white-space: nowrap; /* effectively ignores hyphens setting */
@@ -1073,7 +1075,7 @@
 #footnotes {
   font-size: 0.85em;
   line-height: 1.5;
-  margin: var(--ds-space-3) calc(var(--ds-space-1) * -1) 0;
+  margin: var(--ds-space-3) 0;
 }
 
 .doc td.tableblock > .content #footnotes {
diff --git a/src/css/footer.css b/src/css/footer.css
deleted file mode 100644
index eb756338..00000000
--- a/src/css/footer.css
+++ /dev/null
@@ -1,127 +0,0 @@
-footer.footer {
-  background-color: var(--footer-background);
-  color: var(--footer-font-color);
-  font-size: calc(14.5 / var(--rem-base) * 1rem);
-  line-height: var(--footer-line-height);
-  padding: var(--ds-space-5);
-  display: flex;
-  flex: 1;
-  gap: var(--ds-space-3);
-  padding-left: var(--ds-space-3);
-}
-
-.footer-column {
-  display: flex;
-  flex-direction: column;
-  gap: var(--ds-space-3);
-  flex: 1 auto;
-}
-
-.footer-column.contact {
-  align-items: flex-end;
-}
-
-.footer p {
-  margin: 0;
-}
-
-.footer a {
-  color: var(--footer-link-font-color);
-}
-
-.footer--divider {
-  background: var(--ds-divider);
-  height: calc(1 / var(--rem-base) * 1rem);
-  margin: 0 var(--ds-space-3);
-}
-
-.footer--contact-us {
-  text-align: right;
-}
-
-.footer--contact-us a {
-  color: var(--footer-font-color);
-}
-
-.footer--trademarks {
-  font-size: calc(12 / var(--rem-base) * 1rem);
-  color: var(--text-tertiary);
-  max-width: 640px;
-  align-self: stretch;
-}
-
-.social-icons {
-  display: flex;
-  gap: var(--ds-space-2);
-}
-
-.social-icons a {
-  width: var(--ds-space-2h);
-  height: var(--ds-space-2h);
-  background-repeat: no-repeat;
-}
-
-/* footer icons */
-
-a.facebook-icon {
-  background-image: url('../img/social-facebook.svg');
-}
-
-a.x-icon {
-  background-image: url('../img/social-x.svg');
-}
-
-a.git-icon {
-  background-image: url('../img/social-github.svg');
-}
-
-a.medium-icon {
-  background-image: url('../img/social-medium.svg');
-}
-
-a.linkedin-icon {
-  background-image: url('../img/social-linkedin.svg');
-}
-
-a.twitch-icon {
-  content: url('../img/social-twitch.svg');
-}
-
-html[data-theme="dark"] {
-  .social-icons a {
-    filter: invert(1);
-  }
-}
-
-@media screen and (max-width: 1023.5px) {
-  footer.footer {
-    padding-left: var(--site-padding--mobile);
-    padding-right: var(--site-padding--mobile);
-  }
-
-  .footer--divider {
-    margin: 0 var(--site-padding--mobile);
-  }
-}
-
-@media screen and (max-width: 768.5px) {
-  footer.footer {
-    flex-wrap: wrap;
-  }
-
-  .footer--contact-us {
-    text-align: left;
-  }
-
-  .footer-column.contact {
-    align-items: flex-start;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme="light"]):not([data-theme="dark"]) {
-    .social-icons a {
-      filter: invert(1);
-    }
-  }
-}
diff --git a/src/css/site.css b/src/css/site.css
index 67912a1d..86376a36 100644
--- a/src/css/site.css
+++ b/src/css/site.css
@@ -24,9 +24,7 @@
 @import "ds-admonition-block.css";
 @import "pagination.css";
 @import "header.css";
-@import "footer.css";
 @import "highlight.css";
 @import "print.css";
-@import "tutorial-info.css";
 @import "docsearch.css";
-@import "tailwind/tailwind.css"
+@import "tailwind/tailwind.css";
diff --git a/src/css/tutorial-info.css b/src/css/tutorial-info.css
deleted file mode 100644
index b98ae968..00000000
--- a/src/css/tutorial-info.css
+++ /dev/null
@@ -1,32 +0,0 @@
-.tutorial-info {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--ds-space-1);
-  margin-bottom: var(--ds-space-3);
-}
-
-.tutorial-info .info-item {
-  display: flex;
-  gap: var(--ds-space-h);
-  font-size: calc(14.5 / var(--rem-base) * 1rem);
-  color: var(--ds-text-tertiary);
-}
-
-.tutorial-info .info-item .material-icons {
-  font-size: var(--ds-space-2);
-}
-
-.tutorial-info .tutorial-actions {
-  margin-left: auto;
-}
-
-.tutorial-info .colab-icon {
-  background: url('../img/colab.svg') no-repeat center center;
-  height: 1em;
-  width: 1.5em;
-}
-
-html[data-layout="tutorial"] h1.page:first-child {
-  margin-bottom: var(--ds-space-1);
-}
diff --git a/src/helpers/svg.js b/src/helpers/svg.js
index 908adc0a..43c2a402 100644
--- a/src/helpers/svg.js
+++ b/src/helpers/svg.js
@@ -9,9 +9,11 @@ const logger = require('@antora/logger')('hbs-helper:svg')
  *  asciidoc:  :page-icon: ROOT:ui/icons/icon.svg
  *  handlebars: {{svg page.attributes.icon}}
  */
-
 module.exports = (target, { data }) => {
   const { contentCatalog, page } = data.root
+
+  if (!contentCatalog) return
+
   const pageContext = { component: page.component.name, version: page.component.latest.version, module: page.module }
   const resolvedPage = contentCatalog.resolvePage(page.relativeSrcPath, pageContext)
   if (!resolvedPage) {
diff --git a/src/partials/article-404.hbs b/src/partials/article-404.hbs
index 436b2801..3591d9fe 100644
--- a/src/partials/article-404.hbs
+++ b/src/partials/article-404.hbs
@@ -1,10 +1,15 @@
 

-
{{{or page.title 'Page Not Found'}}}

-

-
The page you’re looking for does not exist. It may have been moved. You can{{#with site.homeUrl}} return to the start page, or{{/with}} follow one of the links in the navigation to the left.

-

-

-
If you arrived on this page by clicking on a link, please notify the owner of the site that the link is broken.
-If you typed the URL of this page manually, please double check that you entered the address correctly.

-

-

+  
{{{or page.title "Page Not Found"}}}

+  

+    
The page you’re looking for does not exist. It may have been moved.
+      You can{{#with site.homeUrl}}
+        return to the
+        start page, or{{/with}}
+      follow one of the links in the navigation to the left.

+  

+  

+    
If you arrived on this page by clicking on a link, please notify the
+      owner of the site that the link is broken. If you typed the URL of this
+      page manually, please double check that you entered the address correctly.

+  

+
\ No newline at end of file
diff --git a/src/partials/article.hbs b/src/partials/article.hbs
index 68d01ed0..0e8244fb 100644
--- a/src/partials/article.hbs
+++ b/src/partials/article.hbs
@@ -1,8 +1,11 @@
 

   {{#if page.title}}
   {{#if page.attributes.icon}}
-  
{{{svg
-      page.attributes.icon}}}{{{page.title}}}

+  

+    
+      {{{svg page.attributes.icon}}}
+    {{{page.title}}}
+  

   {{else}}
   
{{{page.title}}}

   {{/if}}
diff --git a/src/partials/edit-this-page.hbs b/src/partials/edit-this-page.hbs
index 27946f49..d59dcc7b 100644
--- a/src/partials/edit-this-page.hbs
+++ b/src/partials/edit-this-page.hbs
@@ -1,5 +1,9 @@
 {{#if (and page.fileUri (not env.CI))}}
-
Edit this Page

-{{else if (and page.editUrl (or env.FORCE_SHOW_EDIT_PAGE_LINK (not page.origin.private)))}}
-
Edit this Page

-{{/if}}
+  
Edit this Page

+{{else if
+  (and
+    page.editUrl (or env.FORCE_SHOW_EDIT_PAGE_LINK (not page.origin.private))
+  )
+}}
+  
Edit this Page

+{{/if}}
\ No newline at end of file
diff --git a/src/partials/footer-content.hbs b/src/partials/footer-content.hbs
index 53184115..60d4c5ff 100644
--- a/src/partials/footer-content.hbs
+++ b/src/partials/footer-content.hbs
@@ -1,39 +1,95 @@
-

+

 
-