Remove fontawesome (#4514)

## What are you changing in this pull request and why? [Asana task](https://app.asana.com/0/1200099998847559/1205952377161421/f) This removes Font Awesome as part of the effort to reduce our Font Awesome bandwidth usage. We didn't use Font Awesome much, and these sections have been updated to use SVGs instead. ## Previews Social icons in footer: https://docs-getdbt-com-git-remove-fontawesome-dbt-labs.vercel.app/ Social icons for authors: https://docs-getdbt-com-git-remove-fontawesome-dbt-labs.vercel.app/author/joel_labes https://docs-getdbt-com-git-remove-fontawesome-dbt-labs.vercel.app/author/doug_guthrie https://docs-getdbt-com-git-remove-fontawesome-dbt-labs.vercel.app/author/emily_riederer Guide card icons (search icon, external link icons, fa icons on cards in bullets below): https://docs-getdbt-com-git-remove-fontawesome-dbt-labs.vercel.app/guides - Quickstart for dbt Core using GitHub Codespace - Quickstart for dbt Core from a manual install Individual guide prev/next arrows and mobile menu caret: https://docs-getdbt-com-git-remove-fontawesome-dbt-labs.vercel.app/guides/adapter-creation?step=5 Available integrations (external link icon on cards: https://docs-getdbt-com-git-remove-fontawesome-dbt-labs.vercel.app/docs/use-dbt-semantic-layer/avail-sl-integrations
dbt-labs · Nov 21, 2023 · 893f011 · 893f011
2 parents 0866d54 + a2cdffa
commit 893f011
Show file tree

Hide file tree

Showing 28 changed files with 294 additions and 90 deletions.
diff --git 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 = {
           </div>
 
           <div class='footer__items--right'>
-            <a href='https://twitter.com/getdbt'><i class="fa-brands fa-x-twitter"></i></a>
-            <a href='https://www.getdbt.com/community/join-the-community/'><i class="fa-brands fa-slack"></i></a>
-            <a href='https://github.com/dbt-labs/dbt-core'><i class="fa-brands fa-github"></i></a>
+            <!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+            <a href='https://twitter.com/getdbt' title="X" target="_blank" rel="noreferrer noopener"><svg class="fa-brands" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg></a>
+            <a href='https://www.getdbt.com/community/join-the-community/' title="Community Slack" target="_blank" rel="noreferrer noopener"><svg class="fa-brands" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M94.12 315.1c0 25.9-21.16 47.06-47.06 47.06S0 341 0 315.1c0-25.9 21.16-47.06 47.06-47.06h47.06v47.06zm23.72 0c0-25.9 21.16-47.06 47.06-47.06s47.06 21.16 47.06 47.06v117.84c0 25.9-21.16 47.06-47.06 47.06s-47.06-21.16-47.06-47.06V315.1zm47.06-188.98c-25.9 0-47.06-21.16-47.06-47.06S139 32 164.9 32s47.06 21.16 47.06 47.06v47.06H164.9zm0 23.72c25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06H47.06C21.16 243.96 0 222.8 0 196.9s21.16-47.06 47.06-47.06H164.9zm188.98 47.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06h-47.06V196.9zm-23.72 0c0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06V79.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06V196.9zM283.1 385.88c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06v-47.06h47.06zm0-23.72c-25.9 0-47.06-21.16-47.06-47.06 0-25.9 21.16-47.06 47.06-47.06h117.84c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06H283.1z"/></svg></a>
+            <a href='https://github.com/dbt-labs/dbt-core' title="GitHub" target="_blank" rel="noreferrer noopener"><svg class="fa-brands" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg></a>
           </div>
           `,
         },
@@ -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/[email protected]/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
@@ -26,7 +26,7 @@ The following tools integrate with the dbt Semantic Layer:
       className="external-link"
       target="_blank"
       rel="noopener noreferrer">
-      <i className="fa fa-external-link"></i>
+      <Icon name='fa-external-link' />
     </a>
   </div>
 
@@ -40,7 +40,7 @@ The following tools integrate with the dbt Semantic Layer:
     className="external-link"
       target="_blank"
       rel="noopener noreferrer">
-      <i className="fa fa-external-link"></i>
+      <Icon name='fa-external-link' />
     </a>
 </div>
 
@@ -54,7 +54,7 @@ The following tools integrate with the dbt Semantic Layer:
     className="external-link"
       target="_blank"
       rel="noopener noreferrer">
-      <i className="fa fa-external-link"></i>
+      <Icon name='fa-external-link' />
     </a>
 </div>
 
@@ -68,7 +68,7 @@ The following tools integrate with the dbt Semantic Layer:
     className="external-link"
       target="_blank"
       rel="noopener noreferrer">
-      <i className="fa fa-external-link"></i>
+      <Icon name='fa-external-link' />
     </a>
 </div>
 
@@ -82,7 +82,7 @@ The following tools integrate with the dbt Semantic Layer:
     className="external-link"
       target="_blank"
       rel="noopener noreferrer">
-      <i className="fa fa-external-link"></i>
+      <Icon name='fa-external-link' />
     </a>
 </div>
 
@@ -96,7 +96,7 @@ The following tools integrate with the dbt Semantic Layer:
     className="external-link"
       target="_blank"
       rel="noopener noreferrer">
-      <i className="fa fa-external-link"></i>
+      <Icon name='fa-external-link' />
     </a>
 </div>
 

diff --git 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) {
     <BlogLayout title={name}>
       <Head>
         <meta property="og:type" content="profile" />
-        <meta property="og:title" content={`${name} - ${blogData && blogData.blogTitle && blogData.blogTitle}`} />
-        {description &&
+        <meta
+          property="og:title"
+          content={`${name} - ${
+            blogData && blogData.blogTitle && blogData.blogTitle
+          }`}
+        />
+        {description && (
           <meta property="og:description" content={`${description}`} />
-        }
+        )}
       </Head>
 
-      <main
-        itemScope
-        itemType="http://schema.org/Person">
+      <main itemScope itemType="http://schema.org/Person">
         <section className="author-header row align-items-center">
           <div className="author-header-left">
-            <img src={imageCacheWrapper(image_url)} alt={name} itemProp="image" />
+            <img
+              src={imageCacheWrapper(image_url)}
+              alt={name}
+              itemProp="image"
+            />
           </div>
           <div className="author-header-right">
             <h1 itemProp="name">{name}</h1>
             <h4 className="author-title" itemProp="jobTitle">
-              {job_title && job_title} {organization && `@ ${organization}`} 
+              {job_title && job_title} {organization && `@ ${organization}`}
               <div className="author-links">
-              {links && links.length > 0 && (
-                <>
-                <span>|</span>
-                {links.map((link, i) => (
-                  <a 
-                    href={link.url} 
-                    title={`${name} - Social`} 
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    key={i}
-                  >
-                    <i className={`fab ${link.icon}`}></i>
-                  </a>
-                ))}
-                </>
-              )
-              }
-            </div>
+                {links && links.length > 0 && (
+                  <>
+                    <span>|</span>
+                    {links.map((link, i) => (
+                      <a
+                        href={link.url}
+                        title={`${name} - Social`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        key={i}
+                      >
+                        {/* <!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --> */}
+                        {link?.icon ? (
+                          <div className="social-icon">
+                            {getSvgIcon(link?.icon)}
+                          </div>
+                        ) : null}
+                      </a>
+                    ))}
+                  </>
+                )}
+              </div>
             </h4>
-            <p itemProp="description">{description ? description : ''}</p>
+            <p itemProp="description">{description ? description : ""}</p>
           </div>
         </section>
-        {authorPosts && authorPosts.length > 0 && 
-          <AuthorPosts posts={authorPosts} siteImg={siteConfig.themeConfig && siteConfig.themeConfig.image} />
-        }
+        {authorPosts && authorPosts.length > 0 && (
+          <AuthorPosts
+            posts={authorPosts}
+            siteImg={siteConfig.themeConfig && siteConfig.themeConfig.image}
+          />
+        )}
       </main>
     </BlogLayout>
   );
@@ -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
@@ -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
@@ -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 (
     <Link to={`/guides/${id}`} className={styles.quickstartCard}>
       {recently_updated && (
@@ -21,7 +24,7 @@ export default function QuickstartGuideCard({ frontMatter }) {
       )}
 
       <span to={`/guides/${id}`} className={styles.start}>
-        Start <i className="fa-regular fa-arrow-right"></i>
+        Start <span className={styles.right_arrow}>{rightArrow}</span>
       </span>
 
       {(tags || level) && (
@@ -50,7 +53,7 @@ export function QuickstartGuideTitle({ frontMatter }) {
         <span className={styles.recently_updated}>Updated</span>
       )}
       {time_to_complete && (
-        <span className={styles.time_to_complete}><i className="fa-regular fa-clock"></i> {time_to_complete}</span>
+        <span className={styles.time_to_complete}>{getSvgIcon('fa-clock')} {time_to_complete}</span>
       )}
 
       {(tags || level) && (

diff --git 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 {