From c15b27e5aa72c1f94e133dd63545e963c786834f Mon Sep 17 00:00:00 2001 From: mirnawong1 Date: Fri, 17 Nov 2023 20:46:38 +0000 Subject: [PATCH 1/6] add index and styles --- website/docs/docs/introduction.md | 3 ++- website/src/components/lifeCycle/index.js | 8 ++++++++ website/src/components/lifeCycle/styles.module.css | 13 +++++++++++++ 3 files changed, 23 insertions(+), 1 deletion(-) create mode 100644 website/src/components/lifeCycle/index.js create mode 100644 website/src/components/lifeCycle/styles.module.css diff --git a/website/docs/docs/introduction.md b/website/docs/docs/introduction.md index 61cda6e1d3e..dfeefb91dab 100644 --- a/website/docs/docs/introduction.md +++ b/website/docs/docs/introduction.md @@ -5,13 +5,14 @@ pagination_next: null pagination_prev: null --- + dbt compiles and runs your analytics code against your data platform, enabling you and your team to collaborate on a single source of truth for metrics, insights, and business definitions. This single source of truth, combined with the ability to define tests for your data, reduces errors when logic changes, and alerts you when issues arise. Read more about why we want to enable analysts to work more like software engineers in [The dbt Viewpoint](/community/resources/viewpoint). -## dbt optimizes your workflow +## dbt optimizes your workflow - Avoid writing boilerplate  and by managing transactions, dropping tables, and managing schema changes. Write business logic with just a SQL `select` statement, or a Python DataFrame, that returns the dataset you need, and dbt takes care of . - Build up reusable, or modular, data models that can be referenced in subsequent work instead of starting at the raw data with every analysis. diff --git a/website/src/components/lifeCycle/index.js b/website/src/components/lifeCycle/index.js new file mode 100644 index 00000000000..051e382a28d --- /dev/null +++ b/website/src/components/lifeCycle/index.js @@ -0,0 +1,8 @@ +import React from 'react' +import styles from './styles.module.css'; + +export default function Lifecycle(props) { + return ( + {props.status} + ); +} diff --git a/website/src/components/lifeCycle/styles.module.css b/website/src/components/lifeCycle/styles.module.css new file mode 100644 index 00000000000..4a983adbba3 --- /dev/null +++ b/website/src/components/lifeCycle/styles.module.css @@ -0,0 +1,13 @@ +.lifecycle { + background-color: #ffeb3b; /* Yellow background similar to OpenAI's beta badge */ + color: #333; /* Dark text color for contrast */ + font-size: 0.75em; /* Slightly smaller text */ + padding: 1px 8px; /* Adjust padding for a more pill-like shape */ + border-radius: 16px; /* Larger border-radius for rounded edges */ + margin-left: 8px; /* Margin to separate from the header text */ + vertical-align: middle; /* Align with the title */ + display: inline-block; /* Use inline-block for better control */ + font-weight: bold; /* Bold text */ + text-transform: uppercase; /* Uppercase text */ + line-height: 1.6; /* Adjust line height for vertical alignment */ +} From e5bff71cda3655b3604a935556e77a1631272978 Mon Sep 17 00:00:00 2001 From: mirnawong1 Date: Wed, 22 Nov 2023 10:32:47 -0500 Subject: [PATCH 2/6] add css colors --- website/docs/docs/introduction.md | 2 +- website/src/components/lifeCycle/styles.module.css | 8 ++++---- website/src/theme/MDXComponents/index.js | 2 ++ 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/website/docs/docs/introduction.md b/website/docs/docs/introduction.md index dfeefb91dab..46d7e3d229c 100644 --- a/website/docs/docs/introduction.md +++ b/website/docs/docs/introduction.md @@ -12,7 +12,7 @@ dbt compiles and runs your analytics code against your data platform, enabling y Read more about why we want to enable analysts to work more like software engineers in [The dbt Viewpoint](/community/resources/viewpoint). -## dbt optimizes your workflow +## dbt optimizes your workflow - Avoid writing boilerplate  and by managing transactions, dropping tables, and managing schema changes. Write business logic with just a SQL `select` statement, or a Python DataFrame, that returns the dataset you need, and dbt takes care of . - Build up reusable, or modular, data models that can be referenced in subsequent work instead of starting at the raw data with every analysis. diff --git a/website/src/components/lifeCycle/styles.module.css b/website/src/components/lifeCycle/styles.module.css index 4a983adbba3..0609da3695f 100644 --- a/website/src/components/lifeCycle/styles.module.css +++ b/website/src/components/lifeCycle/styles.module.css @@ -1,13 +1,13 @@ .lifecycle { - background-color: #ffeb3b; /* Yellow background similar to OpenAI's beta badge */ - color: #333; /* Dark text color for contrast */ - font-size: 0.75em; /* Slightly smaller text */ + background-color: #047377; /* Yellow background similar to OpenAI's beta badge */ + color: #fff; /* Dark text color for contrast */ + font-size: 0.4em; /* Slightly smaller text */ padding: 1px 8px; /* Adjust padding for a more pill-like shape */ border-radius: 16px; /* Larger border-radius for rounded edges */ margin-left: 8px; /* Margin to separate from the header text */ vertical-align: middle; /* Align with the title */ display: inline-block; /* Use inline-block for better control */ font-weight: bold; /* Bold text */ - text-transform: uppercase; /* Uppercase text */ + text-transform: capitalize; /* Uppercase text */ line-height: 1.6; /* Adjust line height for vertical alignment */ } diff --git a/website/src/theme/MDXComponents/index.js b/website/src/theme/MDXComponents/index.js index 921e0102677..dead3375489 100644 --- a/website/src/theme/MDXComponents/index.js +++ b/website/src/theme/MDXComponents/index.js @@ -42,6 +42,7 @@ import CommunitySpotlightCard from '@site/src/components/communitySpotlightCard' import CommunitySpotlightList from '@site/src/components/communitySpotlightList'; import dbtEditor from '@site/src/components/dbt-editor'; import Icon from '@site/src/components/icon'; +import Lifecycle from '@site/src/components/lifeCycle'; const MDXComponents = { head: MDXHead, @@ -90,5 +91,6 @@ const MDXComponents = { CommunitySpotlightList, dbtEditor: dbtEditor, Icon: Icon, + Lifecycle: Lifecycle, }; export default MDXComponents; From e9b6d9544219ec1c1b38a376af6397e6467fdb7a Mon Sep 17 00:00:00 2001 From: mirnawong1 Date: Wed, 22 Nov 2023 11:39:55 -0500 Subject: [PATCH 3/6] adjust css --- website/docs/docs/introduction.md | 2 +- website/src/components/lifeCycle/styles.module.css | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/website/docs/docs/introduction.md b/website/docs/docs/introduction.md index 46d7e3d229c..c575a9ae657 100644 --- a/website/docs/docs/introduction.md +++ b/website/docs/docs/introduction.md @@ -12,7 +12,7 @@ dbt compiles and runs your analytics code against your data platform, enabling y Read more about why we want to enable analysts to work more like software engineers in [The dbt Viewpoint](/community/resources/viewpoint). -## dbt optimizes your workflow +## dbt optimizes your workflow - Avoid writing boilerplate  and by managing transactions, dropping tables, and managing schema changes. Write business logic with just a SQL `select` statement, or a Python DataFrame, that returns the dataset you need, and dbt takes care of . - Build up reusable, or modular, data models that can be referenced in subsequent work instead of starting at the raw data with every analysis. diff --git a/website/src/components/lifeCycle/styles.module.css b/website/src/components/lifeCycle/styles.module.css index 0609da3695f..d1ec4148450 100644 --- a/website/src/components/lifeCycle/styles.module.css +++ b/website/src/components/lifeCycle/styles.module.css @@ -1,6 +1,6 @@ .lifecycle { - background-color: #047377; /* Yellow background similar to OpenAI's beta badge */ - color: #fff; /* Dark text color for contrast */ + background-color: #047377; /* Teal background to align with dbt Labs' color */ + color: #fff; /* Light text color for contrast */ font-size: 0.4em; /* Slightly smaller text */ padding: 1px 8px; /* Adjust padding for a more pill-like shape */ border-radius: 16px; /* Larger border-radius for rounded edges */ From 523dedea28e3fb615069042b26c8dd8fa5cb9ead Mon Sep 17 00:00:00 2001 From: mirnawong1 Date: Fri, 24 Nov 2023 05:28:15 -0500 Subject: [PATCH 4/6] add null function --- website/src/components/lifeCycle/index.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/website/src/components/lifeCycle/index.js b/website/src/components/lifeCycle/index.js index 051e382a28d..ffeb4aabc6d 100644 --- a/website/src/components/lifeCycle/index.js +++ b/website/src/components/lifeCycle/index.js @@ -1,6 +1,14 @@ import React from 'react' import styles from './styles.module.css'; +function Null({ status }) { + if (status) { + return null; + } + + return {status}; +} + export default function Lifecycle(props) { return ( {props.status} From 10bbcbb33f85f756de49bf133d3eb40a0f46993a Mon Sep 17 00:00:00 2001 From: mirnawong1 Date: Sat, 25 Nov 2023 14:24:28 -0500 Subject: [PATCH 5/6] combine --- website/src/components/lifeCycle/index.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/website/src/components/lifeCycle/index.js b/website/src/components/lifeCycle/index.js index ffeb4aabc6d..a92efd80d0d 100644 --- a/website/src/components/lifeCycle/index.js +++ b/website/src/components/lifeCycle/index.js @@ -1,15 +1,18 @@ import React from 'react' import styles from './styles.module.css'; -function Null({ status }) { - if (status) { - return null; - } +// function Item ({ status }) { +// if (status) { +// return null; +// } - return {status}; -} +// return {status}; +// } export default function Lifecycle(props) { + if (!props.status) { + return null; + } return ( {props.status} ); From dd956f98e47fe08b10fc69acc9534b011f894c99 Mon Sep 17 00:00:00 2001 From: mirnawong1 Date: Mon, 27 Nov 2023 10:20:54 -0500 Subject: [PATCH 6/6] adjust to rem --- website/src/components/lifeCycle/index.js | 8 -------- website/src/components/lifeCycle/styles.module.css | 2 +- 2 files changed, 1 insertion(+), 9 deletions(-) diff --git a/website/src/components/lifeCycle/index.js b/website/src/components/lifeCycle/index.js index a92efd80d0d..ca08783a017 100644 --- a/website/src/components/lifeCycle/index.js +++ b/website/src/components/lifeCycle/index.js @@ -1,14 +1,6 @@ import React from 'react' import styles from './styles.module.css'; -// function Item ({ status }) { -// if (status) { -// return null; -// } - -// return {status}; -// } - export default function Lifecycle(props) { if (!props.status) { return null; diff --git a/website/src/components/lifeCycle/styles.module.css b/website/src/components/lifeCycle/styles.module.css index d1ec4148450..ca145294127 100644 --- a/website/src/components/lifeCycle/styles.module.css +++ b/website/src/components/lifeCycle/styles.module.css @@ -1,7 +1,7 @@ .lifecycle { background-color: #047377; /* Teal background to align with dbt Labs' color */ color: #fff; /* Light text color for contrast */ - font-size: 0.4em; /* Slightly smaller text */ + font-size: 0.78rem; /* Using rem so font size is relative to root */ padding: 1px 8px; /* Adjust padding for a more pill-like shape */ border-radius: 16px; /* Larger border-radius for rounded edges */ margin-left: 8px; /* Margin to separate from the header text */