Skip to content

Commit 61ffb04

Browse files
colegoldsmithcolegoldsmith
authored
Add Tailwind (#34)
* add config and styles + landing page update * remove style linkj
1 parent 29026bf commit 61ffb04

File tree

10 files changed

+110
-41
lines changed

10 files changed

+110
-41
lines changed

‎gulp.d/tasks/build.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ module.exports = (src, dest, preview) => () => {
7878
.pipe(map((file, enc, next) => next(null, Object.assign(file, { extname: '' }, { extname: '.js' })))),
7979
// NOTE use the next line to bundle a JavaScript library that cannot be browserified, like jQuery
8080
//vfs.src(require.resolve('<package-name-or-require-path>'), opts).pipe(concat('js/vendor/<library-name>.js')),
81+
vfs.src('./tailwind.config.js').pipe(concat('js/tailwind.config.js')),
8182
vfs
8283
.src(['css/site.css', 'css/vendor/*.css'], { ...opts, sourcemaps })
8384
.pipe(postcss((file) => ({ plugins: postcssPlugins, options: { file } }))),

‎preview-src/astra.adoc‎

Lines changed: 53 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,65 @@
1-
= {company} Astra
1+
= DataStax Astra
22
:page-layout: full
3-
:vector-image: image::ROOT:ui/integrations-browser.png[Browser,420,220,align=center]
43

4+
[.max-w-[650px]]
55
DataStax Astra is a cutting-edge cloud-native database platform designed to empower developers.
66
Harnessing the strengths of vector databases, serverless computing, and real-time streaming, Astra propels application development into the next generation.
77
From AI-driven capabilities to robust data stream management, Astra simplifies complex tasks, offering unparalleled performance and scalability.
88

9-
[.ds-feature-buttons]
10-
https://astra.datastax.com[Explore Astra Vector^,role="ds-button ds-button\--color-primary ds-button\--variant-solid"]
11-
https://astra.datastax.com[Create Astra Account^,role="ds-button ds-button\--color-primary ds-button\--variant-outlined external"]
9+
[.[&>h2]:hidden]
10+
== {empty}
1211

13-
[.vector.header-noline.text-h1.row.border-bottom]
14-
== Vector
15-
--
16-
[.landing-card-icon]
17-
image:astra-vector.svg[vector,20,role=for-light]
18-
image:astra-vector-dark.svg[vector,20,role=for-dark]
12+
++++
13+
<div class="flex rounded-[6px] bg-[var(--ds-neutral-soft-bg)] p-3 -mx-3">
14+
<div class="flex flex-col lg:basis-2/4">
15+
++++
16+
17+
[discrete.[&>h2]:border-0.!m-0]
18+
== 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
1919

2020
Delve into a database optimized for AI-driven tasks.
2121
Astra Vector is tailored to offer unparalleled precision, speed, and scalability for AI applications, transforming how your applications perceive and interact with data.
2222

23-
[.landing-a]
24-
xref:astra-vector::index.adoc[Learn More About Astra Vector]
25-
--
26-
image::astra-browser.png[Browser,420,220,align=center,float=bottom]
23+
++++
24+
<div class="flex flex-nowrap gap-1">
25+
++++
2726

28-
''''
27+
https://astra.datastax.com[Explore Astra Vector^,role="ds-button ds-button\--color-primary ds-button\--variant-solid"]
2928

30-
[.grid]
31-
--
32-
[discrete]
33-
=== Serverless C*
29+
https://astra.datastax.com[Create Astra Account^,role="ds-button ds-button\--color-primary ds-button\--variant-outlined external"]
30+
31+
++++
32+
</div>
33+
</div>
34+
<div class="hidden lg:block flex basis-2/4 relative">
35+
++++
3436

37+
[.absolute.-bottom-3.right-0]
38+
image::astra-browser.png[Browser,550,348,align=center,float=top]
39+
40+
++++
41+
</div>
42+
</div>
43+
<div class="flex flex-col md:flex-row gap-3">
44+
<div class="flex-col">
45+
++++
46+
47+
[discrete.m-0]
48+
=== [.material-icons.landing-card-icon.block.mb-1]#table_chart# Serverless C*
3549
Delve deep into high-dimensional spaces with Astra Vector.
3650
Engineered for AI-intensive tasks, it offers unparalleled precision, speed, and scalability.
3751
Bring complex AI models into production with confidence, leveraging Astra's robust architecture.
3852

3953
[.landing-a]
4054
https://docs.datastax.com/en/astra-serverless/docs/index.html[Discover Astra Serverless C*]
4155

42-
[.material-icons.landing-card-icon]
43-
table_chart
56+
++++
57+
</div>
58+
<div class="flex-col">
59+
++++
4460

45-
--
46-
47-
[.grid]
48-
--
4961
[discrete]
50-
=== Streaming
62+
=== [.material-icons.landing-card-icon.block.mb-1]#air# Streaming
5163

5264
Harness real-time data with Astra Streaming.
5365
Process, analyze, and act on data as it's generated.
@@ -56,15 +68,18 @@ Whether you're analyzing user behavior or monitoring systems, Astra Streaming de
5668
[.landing-a]
5769
https://docs.datastax.com/en/streaming/astra-streaming/index.html[Dive into Astra Streaming]
5870

59-
[.material-icons.landing-card-icon]
60-
air
61-
62-
--
71+
++++
72+
</div>
73+
</div>
74+
++++
6375

64-
65-
[.header-noline.text-h1.ds-row.ds-grid]
76+
[.text-h1.[&>h2]:!border-0]
6677
== Explore More of Astra
6778

79+
++++
80+
<div class="flex flex-col lg:flex-row gap-3 mb-5">
81+
++++
82+
6883
=== Dive Deeper into Vector
6984

7085
Get a broader understanding of vector databases and their capabilities within Astra.
@@ -90,4 +105,8 @@ Delve deeper into the real-time data processing capabilities of Astra.
90105
[unstyled.landing-a]
91106
* link:{#}[Streaming Fundamentals]
92107
* link:{#}[Advanced Streaming Configurations]
93-
* link:{#}[Starlight Integrations: JMS, Kafka, RabbitMQ]
108+
* link:{#}[Starlight Integrations: JMS, Kafka, RabbitMQ]
109+
110+
++++
111+
</div>
112+
++++

‎preview-src/index.adoc‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -992,13 +992,13 @@ image::screenshot.png[Screenshot of Astra Portal Home]
992992
image::screenshot.png[Screenshot of Astra Portal Home,300]
993993

994994
.SVG image (300px width; default alignment). Image is rasterized (`opts=` _none_).
995-
image::multirepo-ssg.svg[Multirepo SSG,300]
995+
image::preview-src/multirepo-ssg.svg[Multirepo SSG,300]
996996

997997
.SVG image (300px width; default alignment). Image embedded as a live, interactive object (`opts=interactive`).
998-
image::multirepo-ssg.svg[Multirepo SSG,300,opts=interactive]
998+
image::preview-src/multirepo-ssg.svg[Multirepo SSG,300,opts=interactive]
999999

10001000
.SVG image (300px width; default alignment). Image embedded directly into the HTML itself (`opts=inline`).
1001-
image::multirepo-ssg.svg[Multirepo SSG,300,opts=inline]
1001+
image::preview-src/multirepo-ssg.svg[Multirepo SSG,300,opts=inline]
10021002

10031003
==== Aligning block images
10041004

‎preview-src/ui-model.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ asciidoc:
55
site:
66
url: http://localhost:5252
77
title: Brand Docs
8+
isPreviewSite: true
89
homeUrl: &home_url /xyz/5.2/index.html
910
components:
1011
- name: abc

‎src/css/print.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,8 @@
6868
}
6969

7070
.doc .admonitionblock td.icon {
71-
color-adjust: exact;
71+
/* stylelint-disable-next-line property-no-unknown */
72+
print-color-adjust: exact;
7273
}
7374

7475
.doc .listingblock code[data-lang]::before {

‎src/css/site.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,5 @@
2727
@import "highlight.css";
2828
@import "print.css";
2929
@import "tutorial-info.css";
30-
@import "docsearch.css"
30+
@import "docsearch.css";
31+
@import "tailwind.css"

‎src/css/tailwind.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/* stylelint-disable at-rule-no-unknown */
2+
@tailwind base;
3+
@tailwind components;
4+
@tailwind utilities;

‎src/js/01-nav.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
var SECT_CLASS_RX = /^sect(\d)$/
55

66
var navContainer = document.querySelector('.nav-container')
7+
8+
if (!navContainer) return
9+
710
var navToggle = document.querySelector('.nav-toggle')
811
var nav = navContainer.querySelector('.nav')
912

‎src/partials/head-styles.hbs‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,9 @@
1-
<link rel="stylesheet" href="{{{uiRootPath}}}/css/site.css">
2-
<link rel="stylesheet" href="{{{uiRootPath}}}/css/vendor/tabs.css">
1+
<link rel="stylesheet" href="{{{uiRootPath}}}/css/site.css">
2+
<link rel="stylesheet" href="{{{uiRootPath}}}/css/vendor/tabs.css">
3+
{{#if site.isPreviewSite}}
4+
<script src="https://cdn.tailwindcss.com"></script>
5+
<script type="module">
6+
import tailwindconfig from '/{{{uiRootPath}}}/js/tailwind.config.js'
7+
tailwind.config = tailwindconfig
8+
</script>
9+
{{/if}}

‎tailwind.config.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
const tailwindconfig = {
2+
content: ['./build/site/**/*.{html,js}'],
3+
theme: {
4+
spacing: {
5+
0: '0',
6+
0.5: '0.5rem',
7+
1: '1rem',
8+
1.5: '1.5rem',
9+
2: '2rem',
10+
2.5: '2.5rem',
11+
3: '3rem',
12+
3.5: '3.5rem',
13+
4: '4rem',
14+
5: '5rem',
15+
6: '6rem',
16+
7: '7rem',
17+
8: '8rem',
18+
9: '9rem',
19+
10: '10rem',
20+
11: '11rem',
21+
15: '15rem',
22+
},
23+
extend: {
24+
spacing: {
25+
0.25: '0.25rem',
26+
},
27+
},
28+
},
29+
plugins: [],
30+
}
31+
32+
export default tailwindconfig

0 commit comments

Comments
 (0)