diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 466103796ad..13c284dd557 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -49,7 +49,7 @@ var siteSettings = { onBrokenMarkdownLinks: "throw", trailingSlash: false, themeConfig: { - docs:{ + docs: { sidebar: { hideable: true, autoCollapseCategories: true, @@ -71,14 +71,14 @@ var siteSettings = { }, announcementBar: { id: "biweekly-demos", - content: - "Join our weekly demos and dbt Cloud in action!", + content: "Join our weekly demos and dbt Cloud in action!", backgroundColor: "#047377", textColor: "#fff", isCloseable: true, }, announcementBarActive: true, - announcementBarLink: "https://www.getdbt.com/resources/dbt-cloud-demos-with-experts?utm_source=docs&utm_medium=event&utm_campaign=q1-2024_cloud-demos-with-experts_awareness", + announcementBarLink: + "https://www.getdbt.com/resources/dbt-cloud-demos-with-experts?utm_source=docs&utm_medium=event&utm_campaign=q1-2024_cloud-demos-with-experts_awareness", // Set community spotlight member on homepage // This is the ID for a specific file under docs/community/spotlight communitySpotlightMember: "alison-stanton", @@ -127,12 +127,12 @@ var siteSettings = { position: "right", items: [ { - label: 'Courses', - href: 'https://courses.getdbt.com', + label: "Courses", + href: "https://courses.getdbt.com", }, { - label: 'Best Practices', - to: '/best-practices', + label: "Best Practices", + to: "/best-practices", }, { label: "Guides", @@ -145,7 +145,7 @@ var siteSettings = { { label: "Glossary", to: "/glossary", - } + }, ], }, { @@ -194,9 +194,10 @@ var siteSettings = {
- - - + + + +
`, }, @@ -230,7 +231,8 @@ var siteSettings = { }, blog: { blogTitle: "Developer Blog | dbt Developer Hub", - blogDescription: "Find tutorials, product updates, and developer insights in the dbt Developer Blog.", + blogDescription: + "Find tutorials, product updates, and developer insights in the dbt Developer Blog.", postsPerPage: 20, blogSidebarTitle: "Recent posts", blogSidebarCount: 5, @@ -244,7 +246,10 @@ var siteSettings = { [path.resolve("plugins/insertMetaTags"), { metatags }], path.resolve("plugins/svg"), path.resolve("plugins/customWebpackConfig"), - [path.resolve("plugins/buildGlobalData"), { versionedPages, versionedCategories }], + [ + path.resolve("plugins/buildGlobalData"), + { versionedPages, versionedCategories }, + ], path.resolve("plugins/buildAuthorPages"), path.resolve("plugins/buildSpotlightIndexPage"), path.resolve("plugins/buildQuickstartIndexPage"), @@ -262,8 +267,7 @@ var siteSettings = { "https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js", "/js/headerLinkCopy.js", "/js/gtm.js", - "/js/onetrust.js", - "https://kit.fontawesome.com/7110474d41.js", + "/js/onetrust.js" ], stylesheets: [ "/css/fonts.css", @@ -279,8 +283,8 @@ var siteSettings = { "sha384-odtC+0UGzzFL/6PNoE8rX/SPcQDXBJ+uRepguP4QkPCm2LBxH3FA3y+fKSiJ+AmM", crossorigin: "anonymous", }, - {rel: 'icon', href: '/img/favicon.png', type: 'image/png'}, - {rel: 'icon', href: '/img/favicon.svg', type: 'image/svg+xml'}, + { rel: "icon", href: "/img/favicon.png", type: "image/png" }, + { rel: "icon", href: "/img/favicon.svg", type: "image/svg+xml" }, ], }; diff --git a/website/snippets/_sl-partner-links.md b/website/snippets/_sl-partner-links.md index c97c682171b..2ad49b94e95 100644 --- a/website/snippets/_sl-partner-links.md +++ b/website/snippets/_sl-partner-links.md @@ -26,7 +26,7 @@ The following tools integrate with the dbt Semantic Layer: className="external-link" target="_blank" rel="noopener noreferrer"> - + @@ -40,7 +40,7 @@ The following tools integrate with the dbt Semantic Layer: className="external-link" target="_blank" rel="noopener noreferrer"> - + @@ -54,7 +54,7 @@ The following tools integrate with the dbt Semantic Layer: className="external-link" target="_blank" rel="noopener noreferrer"> - + @@ -68,7 +68,7 @@ The following tools integrate with the dbt Semantic Layer: className="external-link" target="_blank" rel="noopener noreferrer"> - + @@ -82,7 +82,7 @@ The following tools integrate with the dbt Semantic Layer: className="external-link" target="_blank" rel="noopener noreferrer"> - + @@ -96,7 +96,7 @@ The following tools integrate with the dbt Semantic Layer: className="external-link" target="_blank" rel="noopener noreferrer"> - + diff --git a/website/src/components/author/index.js b/website/src/components/author/index.js index 6b49295936d..6bbe786a5ac 100644 --- a/website/src/components/author/index.js +++ b/website/src/components/author/index.js @@ -5,6 +5,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import BlogLayout from '@theme/BlogLayout'; import getAllPosts from '../../utils/get-all-posts'; import imageCacheWrapper from '../../../functions/image-cache-wrapper'; +import getSvgIcon from '../../utils/get-svg-icon'; function Author(props) { const { authorData } = props @@ -28,49 +29,63 @@ function Author(props) { - - {description && + + {description && ( - } + )} -
+
- {name} + {name}

{name}

- {job_title && job_title} {organization && `@ ${organization}`} + {job_title && job_title} {organization && `@ ${organization}`}
- {links && links.length > 0 && ( - <> - | - {links.map((link, i) => ( - - - - ))} - - ) - } -
+ {links && links.length > 0 && ( + <> + | + {links.map((link, i) => ( + + {/* */} + {link?.icon ? ( +
+ {getSvgIcon(link?.icon)} +
+ ) : null} + + ))} + + )} +

-

{description ? description : ''}

+

{description ? description : ""}

- {authorPosts && authorPosts.length > 0 && - - } + {authorPosts && authorPosts.length > 0 && ( + + )}
); @@ -98,7 +113,5 @@ function AuthorPosts({posts}) { ) } - - export default Author; diff --git a/website/src/components/icon/index.js b/website/src/components/icon/index.js new file mode 100644 index 00000000000..ab294758c0b --- /dev/null +++ b/website/src/components/icon/index.js @@ -0,0 +1,7 @@ +import getSvgIcon from "../../utils/get-svg-icon" + +function Icon({ name }) { + return getSvgIcon(name) +} + +export default Icon diff --git a/website/src/components/quickstartGuideCard/index.js b/website/src/components/quickstartGuideCard/index.js index 104bb5cb35b..b13343c8ba7 100644 --- a/website/src/components/quickstartGuideCard/index.js +++ b/website/src/components/quickstartGuideCard/index.js @@ -2,11 +2,14 @@ import React from "react"; import Link from "@docusaurus/Link"; import styles from "./styles.module.css"; import getIconType from "../../utils/get-icon-type"; +import getSvgIcon from "../../utils/get-svg-icon"; export default function QuickstartGuideCard({ frontMatter }) { const { id, title, time_to_complete, icon, tags, level, recently_updated } = frontMatter; + const rightArrow = getSvgIcon('fa-arrow-right') + return ( {recently_updated && ( @@ -21,7 +24,7 @@ export default function QuickstartGuideCard({ frontMatter }) { )} - Start + Start {rightArrow} {(tags || level) && ( @@ -50,7 +53,7 @@ export function QuickstartGuideTitle({ frontMatter }) { Updated )} {time_to_complete && ( - {time_to_complete} + {getSvgIcon('fa-clock')} {time_to_complete} )} {(tags || level) && ( diff --git a/website/src/components/quickstartGuideCard/styles.module.css b/website/src/components/quickstartGuideCard/styles.module.css index 5df40c8479e..cc3e0df7146 100644 --- a/website/src/components/quickstartGuideCard/styles.module.css +++ b/website/src/components/quickstartGuideCard/styles.module.css @@ -29,6 +29,7 @@ [data-theme='dark'] .quickstartCard .icon { color: #fff; + fill: #fff; } .quickstartCard h3 { @@ -64,9 +65,17 @@ color: #fff; } -.quickstartCard .start i { +.quickstartCard .start .right_arrow svg { margin-left: 4px; - font-size: .9rem; + width: 12.6px; + fill: var(--ifm-link-color); +} +.quickstartCard .start:hover .right_arrow svg { + fill: var(--ifm-link-hover-color) +} + +[data-theme='dark'] .quickstartCard .start .right_arrow svg { + fill: #fff; } .quickstartCard .recently_updated { @@ -131,7 +140,16 @@ .infoContainer .time_to_complete { font-weight: 700; - +} + +.infoContainer .time_to_complete svg { + fill: var(--ifm-menu-color); + width: 18px; + margin: 0 4px -2px 0; +} + +[data-theme='dark'] .infoContainer .time_to_complete svg { + fill: #fff; } .infoContainer .recently_updated { diff --git a/website/src/components/quickstartTOC/index.js b/website/src/components/quickstartTOC/index.js index 3ff5e027208..c28d462ceb1 100644 --- a/website/src/components/quickstartTOC/index.js +++ b/website/src/components/quickstartTOC/index.js @@ -6,6 +6,7 @@ import clsx from "clsx"; import style from "./styles.module.css"; import { useLocation, useHistory } from "@docusaurus/router"; import queryString from "query-string"; +import getSvgIcon from "../../utils/get-svg-icon"; function QuickstartTOC() { const history = useHistory(); @@ -81,19 +82,14 @@ function QuickstartTOC() { buttonContainer.classList.add(style.buttonContainer); const prevButton = document.createElement("a"); const nextButton = document.createElement("a"); - const nextButtonIcon = document.createElement("i"); - const prevButtonIcon = document.createElement("i"); - - prevButtonIcon.classList.add("fa-regular", "fa-arrow-left"); - prevButton.textContent = "Back"; - prevButton.prepend(prevButtonIcon); + + prevButton.innerHTML = + ' Back'; prevButton.classList.add(clsx(style.button, style.prevButton)); prevButton.disabled = index === 0; prevButton.addEventListener("click", () => handlePrev(index + 1)); - nextButtonIcon.classList.add("fa-regular", "fa-arrow-right"); - nextButton.textContent = "Next"; - nextButton.appendChild(nextButtonIcon); + nextButton.innerHTML = 'Next '; nextButton.classList.add(clsx(style.button, style.nextButton)); nextButton.disabled = index === stepWrappers.length - 1; nextButton.addEventListener("click", () => handleNext(index + 1)); @@ -204,28 +200,30 @@ function QuickstartTOC() { if (tocListStyles.display === "none") { tocList.style.display = "block"; - tocMenuBtn.querySelector("i").style.transform = "rotate(0deg)"; + tocMenuBtn.querySelector("svg").style.transform = "rotate(0deg)"; } else { tocList.style.display = "none"; - tocMenuBtn.querySelector("i").style.transform = "rotate(-90deg)"; + tocMenuBtn.querySelector("svg").style.transform = "rotate(-90deg)"; } }; return ( <> - Menu -
    - {tocData.map((step) => ( -
  • - {step.stepNumber} {step.title} -
    • - ))} -
+ + Menu {getSvgIcon("fa-caret-down")} + +
    + {tocData.map((step) => ( +
  • + {step.stepNumber} {step.title} +
    • + ))} +
); } diff --git a/website/src/components/quickstartTOC/styles.module.css b/website/src/components/quickstartTOC/styles.module.css index 892e6f73be6..97dd9742756 100644 --- a/website/src/components/quickstartTOC/styles.module.css +++ b/website/src/components/quickstartTOC/styles.module.css @@ -99,6 +99,32 @@ html[data-theme="dark"] .stepWrapper .buttonContainer a:hover { margin-right: .4rem; } +.buttonContainer > a > svg { + width: 11.2px; + fill: var(--color-green-blue); + margin-bottom: -1px; +} + +.buttonContainer > a:hover > svg { + width: 11.2px; + fill: var(--color-white); +} + +html[data-theme="dark"] .buttonContainer > a > svg { + fill: var(--color-green-blue); +} + +html[data-theme="dark"] .buttonContainer > a:hover > svg { + fill: var(--color-white); +} + +.buttonContainer .prevButton svg { + margin-right: .4rem; +} +.buttonContainer .nextButton svg { + margin-left: .4rem; +} + .buttonContainer .nextButton { margin-left: auto; } @@ -111,6 +137,11 @@ html[data-theme="dark"] .stepWrapper .buttonContainer a:hover { .stepWrapper[data-step="1"] a.nextButton { background: var(--color-green-blue); color: var(--color-white); + fill: var(--color-white); +} + +.stepWrapper[data-step="1"] a.nextButton > svg { + fill: var(--color-white); } html[data-theme="dark"] .stepWrapper[data-step="1"] a.nextButton { @@ -129,11 +160,21 @@ html[data-theme="dark"] .stepWrapper[data-step="1"] a.nextButton { display: none; } -.toc_menu_btn i { +.toc_menu_btn i, .toc_menu_btn svg { transform: rotate(-90deg); vertical-align: middle; } +.toc_menu_btn svg { + width: 10px; + fill: var(--ifm-link-color); +} + +.toc_menu_btn:hover svg { + width: 10px; + fill: var(--ifm-link-hover-color); +} + @media (max-width: 996px) { .tocList { width: 100%; diff --git a/website/src/components/searchInput/index.js b/website/src/components/searchInput/index.js index e0a5faf4a82..5cba8b0acf1 100644 --- a/website/src/components/searchInput/index.js +++ b/website/src/components/searchInput/index.js @@ -1,5 +1,6 @@ import React from "react"; import styles from "./styles.module.css"; +import getSvgIcon from "../../utils/get-svg-icon"; const SearchInput = ({ value, @@ -9,7 +10,8 @@ const SearchInput = ({ }) => { return (