From 9468072108ddf16d54e8580e69223c91c1bfc295 Mon Sep 17 00:00:00 2001 From: Jason Karlavige Date: Mon, 20 Nov 2023 14:57:00 -0500 Subject: [PATCH 01/10] add svgs for font awesome icons used --- website/static/img/fontawesome/arrow-left.svg | 1 + website/static/img/fontawesome/arrow-right.svg | 1 + website/static/img/fontawesome/caret-down.svg | 1 + website/static/img/fontawesome/clock.svg | 1 + website/static/img/fontawesome/expand.svg | 1 + website/static/img/fontawesome/external-link.svg | 1 + website/static/img/fontawesome/github.svg | 1 + website/static/img/fontawesome/linkedin.svg | 1 + website/static/img/fontawesome/readme.svg | 1 + website/static/img/fontawesome/slack.svg | 1 + website/static/img/fontawesome/square-terminal.svg | 1 + website/static/img/fontawesome/x-twitter.svg | 1 + website/static/img/fontawesome/xmark.svg | 1 + 13 files changed, 13 insertions(+) create mode 100644 website/static/img/fontawesome/arrow-left.svg create mode 100644 website/static/img/fontawesome/arrow-right.svg create mode 100644 website/static/img/fontawesome/caret-down.svg create mode 100644 website/static/img/fontawesome/clock.svg create mode 100644 website/static/img/fontawesome/expand.svg create mode 100644 website/static/img/fontawesome/external-link.svg create mode 100644 website/static/img/fontawesome/github.svg create mode 100644 website/static/img/fontawesome/linkedin.svg create mode 100644 website/static/img/fontawesome/readme.svg create mode 100644 website/static/img/fontawesome/slack.svg create mode 100644 website/static/img/fontawesome/square-terminal.svg create mode 100644 website/static/img/fontawesome/x-twitter.svg create mode 100644 website/static/img/fontawesome/xmark.svg diff --git a/website/static/img/fontawesome/arrow-left.svg b/website/static/img/fontawesome/arrow-left.svg new file mode 100644 index 00000000000..1d99104c7cc --- /dev/null +++ b/website/static/img/fontawesome/arrow-left.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/static/img/fontawesome/arrow-right.svg b/website/static/img/fontawesome/arrow-right.svg new file mode 100644 index 00000000000..d652621c647 --- /dev/null +++ b/website/static/img/fontawesome/arrow-right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/static/img/fontawesome/caret-down.svg b/website/static/img/fontawesome/caret-down.svg new file mode 100644 index 00000000000..833732ac771 --- /dev/null +++ b/website/static/img/fontawesome/caret-down.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/static/img/fontawesome/clock.svg b/website/static/img/fontawesome/clock.svg new file mode 100644 index 00000000000..3623ebfca10 --- /dev/null +++ b/website/static/img/fontawesome/clock.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/static/img/fontawesome/expand.svg b/website/static/img/fontawesome/expand.svg new file mode 100644 index 00000000000..5af2ac47598 --- /dev/null +++ b/website/static/img/fontawesome/expand.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/static/img/fontawesome/external-link.svg b/website/static/img/fontawesome/external-link.svg new file mode 100644 index 00000000000..774fedc45bd --- /dev/null +++ b/website/static/img/fontawesome/external-link.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/static/img/fontawesome/github.svg b/website/static/img/fontawesome/github.svg new file mode 100644 index 00000000000..25f9df583b7 --- /dev/null +++ b/website/static/img/fontawesome/github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/static/img/fontawesome/linkedin.svg b/website/static/img/fontawesome/linkedin.svg new file mode 100644 index 00000000000..663cfa13e67 --- /dev/null +++ b/website/static/img/fontawesome/linkedin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/static/img/fontawesome/readme.svg b/website/static/img/fontawesome/readme.svg new file mode 100644 index 00000000000..03132076a47 --- /dev/null +++ b/website/static/img/fontawesome/readme.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/static/img/fontawesome/slack.svg b/website/static/img/fontawesome/slack.svg new file mode 100644 index 00000000000..4b884d9023a --- /dev/null +++ b/website/static/img/fontawesome/slack.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/static/img/fontawesome/square-terminal.svg b/website/static/img/fontawesome/square-terminal.svg new file mode 100644 index 00000000000..e28b88062c1 --- /dev/null +++ b/website/static/img/fontawesome/square-terminal.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/static/img/fontawesome/x-twitter.svg b/website/static/img/fontawesome/x-twitter.svg new file mode 100644 index 00000000000..f5feed78f30 --- /dev/null +++ b/website/static/img/fontawesome/x-twitter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/static/img/fontawesome/xmark.svg b/website/static/img/fontawesome/xmark.svg new file mode 100644 index 00000000000..73cf9513fe4 --- /dev/null +++ b/website/static/img/fontawesome/xmark.svg @@ -0,0 +1 @@ + \ No newline at end of file From 0f0991e678fd4944707e782b794bccbf038c869c Mon Sep 17 00:00:00 2001 From: Jason Karlavige Date: Mon, 20 Nov 2023 15:18:29 -0500 Subject: [PATCH 02/10] convert footer icons to svgs --- website/docusaurus.config.js | 37 +++++++++++--------- website/src/css/custom.css | 2 ++ website/static/img/fontawesome/x-twitter.svg | 2 +- 3 files changed, 24 insertions(+), 17 deletions(-) diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 466103796ad..f01a238373f 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"), @@ -279,8 +284,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/src/css/custom.css b/website/src/css/custom.css index 1feb5510cc5..c1f9f98f8d2 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -1089,6 +1089,8 @@ html[data-theme="dark"] .main-wrapper nav a:active { /* fontawesome icons in footer */ .footer .fa-brands { color: var(--color-footer-accent); + fill: var(--color-footer-accent); + width: 25px; font-size: 1.6rem; transition: all 0.3s ease-in-out; } diff --git a/website/static/img/fontawesome/x-twitter.svg b/website/static/img/fontawesome/x-twitter.svg index f5feed78f30..4c3e84b57fd 100644 --- a/website/static/img/fontawesome/x-twitter.svg +++ b/website/static/img/fontawesome/x-twitter.svg @@ -1 +1 @@ - \ No newline at end of file + From 7b1f3750dc78d24b643b7716aa406922c01979b0 Mon Sep 17 00:00:00 2001 From: Jason Karlavige Date: Mon, 20 Nov 2023 15:36:18 -0500 Subject: [PATCH 03/10] adjust author social icons --- website/src/components/author/index.js | 99 ++++++++++++++------- website/src/css/custom.css | 9 ++ website/static/img/fontawesome/github.svg | 2 +- website/static/img/fontawesome/linkedin.svg | 2 +- website/static/img/fontawesome/readme.svg | 2 +- website/static/img/fontawesome/slack.svg | 2 +- 6 files changed, 81 insertions(+), 35 deletions(-) diff --git a/website/src/components/author/index.js b/website/src/components/author/index.js index 6b49295936d..c8743a3c81d 100644 --- a/website/src/components/author/index.js +++ b/website/src/components/author/index.js @@ -28,49 +28,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 ? ( +
+ {getSvg(link?.icon)} +
+ ) : null} +
+ ))} + + )} +

-

{description ? description : ''}

+

{description ? description : ""}

- {authorPosts && authorPosts.length > 0 && - - } + {authorPosts && authorPosts.length > 0 && ( + + )}
); @@ -98,7 +112,30 @@ function AuthorPosts({posts}) { ) } - +// Get SVG based on icon name set for author +function getSvg(icon) { + switch (icon) { + case 'fa-linkedin': return ( + + ) + case 'fa-twitter': return ( + + + + ); + case 'fa-github': return ( + + + + ); + case 'fa-readme': return ( + + + + ); + default: return '' + } + } export default Author; diff --git a/website/src/css/custom.css b/website/src/css/custom.css index c1f9f98f8d2..17de59b856f 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -1507,6 +1507,7 @@ html[data-theme="dark"] .main-wrapper nav a:active { .author-header .author-links a { display: block; padding: 5px; + color: var(--ifm-link-color); } .author-header .author-links a:first-of-type { @@ -1517,6 +1518,14 @@ html[data-theme="dark"] .main-wrapper nav a:active { font-size: 1.1rem; } +.author-header .author-links a .social-icon > svg { + width: 15.4px; + fill: var(--ifm-link-color); +} +.author-header .author-links a:hover .social-icon > svg { + fill: var(--ifm-link-hover-color); +} + .author-posts-section { margin-top: 2rem; } diff --git a/website/static/img/fontawesome/github.svg b/website/static/img/fontawesome/github.svg index 25f9df583b7..15186d990ac 100644 --- a/website/static/img/fontawesome/github.svg +++ b/website/static/img/fontawesome/github.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/website/static/img/fontawesome/linkedin.svg b/website/static/img/fontawesome/linkedin.svg index 663cfa13e67..035e08c088d 100644 --- a/website/static/img/fontawesome/linkedin.svg +++ b/website/static/img/fontawesome/linkedin.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/website/static/img/fontawesome/readme.svg b/website/static/img/fontawesome/readme.svg index 03132076a47..2220c29c8dc 100644 --- a/website/static/img/fontawesome/readme.svg +++ b/website/static/img/fontawesome/readme.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/website/static/img/fontawesome/slack.svg b/website/static/img/fontawesome/slack.svg index 4b884d9023a..0c58581caf7 100644 --- a/website/static/img/fontawesome/slack.svg +++ b/website/static/img/fontawesome/slack.svg @@ -1 +1 @@ - \ No newline at end of file + From aa045405331d3d4080ba94bf9fe7f92692d08956 Mon Sep 17 00:00:00 2001 From: Jason Karlavige Date: Mon, 20 Nov 2023 16:11:38 -0500 Subject: [PATCH 04/10] update available integration external link icons --- website/snippets/_sl-partner-links.md | 12 ++--- website/src/components/author/index.js | 28 +---------- website/src/components/icon/index.js | 7 +++ website/src/css/custom.css | 2 + website/src/theme/MDXComponents/index.js | 2 + website/src/utils/get-icon-type.js | 11 ++++- website/src/utils/get-svg-icon.js | 46 +++++++++++++++++++ website/static/img/fontawesome/arrow-left.svg | 2 +- .../static/img/fontawesome/arrow-right.svg | 2 +- .../static/img/fontawesome/external-link.svg | 2 +- .../img/fontawesome/square-terminal.svg | 2 +- 11 files changed, 79 insertions(+), 37 deletions(-) create mode 100644 website/src/components/icon/index.js create mode 100644 website/src/utils/get-svg-icon.js 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 c8743a3c81d..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 @@ -67,7 +68,7 @@ function Author(props) { {/* */} {link?.icon ? (
- {getSvg(link?.icon)} + {getSvgIcon(link?.icon)}
) : null} @@ -112,30 +113,5 @@ function AuthorPosts({posts}) { ) } -// Get SVG based on icon name set for author -function getSvg(icon) { - switch (icon) { - case 'fa-linkedin': return ( - - ) - case 'fa-twitter': return ( - - - - ); - case 'fa-github': return ( - - - - ); - case 'fa-readme': return ( - - - - ); - default: return '' - } - } - 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/css/custom.css b/website/src/css/custom.css index 17de59b856f..094c3501e06 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -2042,7 +2042,9 @@ html[data-theme="dark"] .theme-doc-sidebar-container>div>button.button:hover { top: 0; right: 0; margin: 10px; + width: 18px; color: #818589; /* You can adjust the color as needed */ + fill: #818589; } h3.anchor a.hash-link:before, diff --git a/website/src/theme/MDXComponents/index.js b/website/src/theme/MDXComponents/index.js index f21b0b84452..921e0102677 100644 --- a/website/src/theme/MDXComponents/index.js +++ b/website/src/theme/MDXComponents/index.js @@ -41,6 +41,7 @@ import PostCarousel from '@site/src/components/postCarousel'; 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'; const MDXComponents = { head: MDXHead, @@ -88,5 +89,6 @@ const MDXComponents = { CommunitySpotlightCard, CommunitySpotlightList, dbtEditor: dbtEditor, + Icon: Icon, }; export default MDXComponents; diff --git a/website/src/utils/get-icon-type.js b/website/src/utils/get-icon-type.js index 9a2b7194adf..85c8892cb75 100644 --- a/website/src/utils/get-icon-type.js +++ b/website/src/utils/get-icon-type.js @@ -1,13 +1,22 @@ // Util function to check which icon to render import React from "react"; import { useColorMode } from "@docusaurus/theme-common"; +import getSvgIcon from "./get-svg-icon"; export default function getIconType(icon, ...styles) { const { colorMode } = useColorMode(); const combinedStyles = styles.join(" "); if (icon.startsWith("fa-")) { - return ; + return ( + <> + {/* */} + {/* ; */} +
+ {getSvgIcon(icon)} +
+ + ) } else { return ( + + + ); + case icon.includes("fa-twitter"): + return ( + + + + ); + case icon.includes("fa-github"): + return ( + + + + ); + case icon.includes("fa-readme"): + return ( + + + + ); + case icon.includes("fa-square-terminal"): + return ( + + + + ); + case icon.includes("fa-external-link"): + return ( + + + + ); + default: + return ""; + } +} diff --git a/website/static/img/fontawesome/arrow-left.svg b/website/static/img/fontawesome/arrow-left.svg index 1d99104c7cc..33dc4df829a 100644 --- a/website/static/img/fontawesome/arrow-left.svg +++ b/website/static/img/fontawesome/arrow-left.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/website/static/img/fontawesome/arrow-right.svg b/website/static/img/fontawesome/arrow-right.svg index d652621c647..22864f80591 100644 --- a/website/static/img/fontawesome/arrow-right.svg +++ b/website/static/img/fontawesome/arrow-right.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/website/static/img/fontawesome/external-link.svg b/website/static/img/fontawesome/external-link.svg index 774fedc45bd..06df69a6763 100644 --- a/website/static/img/fontawesome/external-link.svg +++ b/website/static/img/fontawesome/external-link.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/website/static/img/fontawesome/square-terminal.svg b/website/static/img/fontawesome/square-terminal.svg index e28b88062c1..9f241fd315c 100644 --- a/website/static/img/fontawesome/square-terminal.svg +++ b/website/static/img/fontawesome/square-terminal.svg @@ -1 +1 @@ - \ No newline at end of file + From 681019ebd2083fee8efc9c8130b24ed63f60cc92 Mon Sep 17 00:00:00 2001 From: Jason Karlavige Date: Mon, 20 Nov 2023 16:23:23 -0500 Subject: [PATCH 05/10] update guide card icons --- website/src/components/quickstartGuideCard/index.js | 5 ++++- .../quickstartGuideCard/styles.module.css | 13 +++++++++++-- website/src/utils/get-svg-icon.js | 12 ++++++++++++ website/static/img/fontawesome/arrow-left.svg | 2 +- 4 files changed, 28 insertions(+), 4 deletions(-) diff --git a/website/src/components/quickstartGuideCard/index.js b/website/src/components/quickstartGuideCard/index.js index 104bb5cb35b..cb8818702db 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) && ( diff --git a/website/src/components/quickstartGuideCard/styles.module.css b/website/src/components/quickstartGuideCard/styles.module.css index 5df40c8479e..93401d81b31 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 { diff --git a/website/src/utils/get-svg-icon.js b/website/src/utils/get-svg-icon.js index aa1841ccfa0..b6350afea09 100644 --- a/website/src/utils/get-svg-icon.js +++ b/website/src/utils/get-svg-icon.js @@ -40,6 +40,18 @@ export default function getSvgIcon(icon) { ); + case icon.includes("fa-arrow-right"): + return ( + + + + ); + case icon.includes("fa-arrow-left"): + return ( + + + + ); default: return ""; } diff --git a/website/static/img/fontawesome/arrow-left.svg b/website/static/img/fontawesome/arrow-left.svg index 33dc4df829a..e539e1b18c6 100644 --- a/website/static/img/fontawesome/arrow-left.svg +++ b/website/static/img/fontawesome/arrow-left.svg @@ -1 +1 @@ - \ No newline at end of file + From f553c2162b584da8fd1ac0b03dfd623c975a2aa9 Mon Sep 17 00:00:00 2001 From: Jason Karlavige Date: Mon, 20 Nov 2023 16:47:28 -0500 Subject: [PATCH 06/10] update arrow icons in quickstart ctas --- website/src/components/quickstartTOC/index.js | 13 +++----- .../quickstartTOC/styles.module.css | 31 +++++++++++++++++++ 2 files changed, 35 insertions(+), 9 deletions(-) diff --git a/website/src/components/quickstartTOC/index.js b/website/src/components/quickstartTOC/index.js index 3ff5e027208..ab478504485 100644 --- a/website/src/components/quickstartTOC/index.js +++ b/website/src/components/quickstartTOC/index.js @@ -81,19 +81,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)); diff --git a/website/src/components/quickstartTOC/styles.module.css b/website/src/components/quickstartTOC/styles.module.css index 892e6f73be6..9e200bbe960 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 { From 89cb5c97a6e2b17c277af46396b81c85212687ea Mon Sep 17 00:00:00 2001 From: Jason Karlavige Date: Mon, 20 Nov 2023 17:00:41 -0500 Subject: [PATCH 07/10] replace search icon for guides --- website/src/components/quickstartTOC/index.js | 33 ++++++++++--------- .../quickstartTOC/styles.module.css | 12 ++++++- website/src/components/searchInput/index.js | 4 ++- .../components/searchInput/styles.module.css | 9 +++-- website/src/utils/get-svg-icon.js | 12 +++++++ .../img/fontawesome/magnifying-glass.svg | 1 + 6 files changed, 52 insertions(+), 19 deletions(-) create mode 100644 website/static/img/fontawesome/magnifying-glass.svg diff --git a/website/src/components/quickstartTOC/index.js b/website/src/components/quickstartTOC/index.js index ab478504485..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(); @@ -199,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 9e200bbe960..97dd9742756 100644 --- a/website/src/components/quickstartTOC/styles.module.css +++ b/website/src/components/quickstartTOC/styles.module.css @@ -160,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 (