From 8597c7227ccaf1cf9bc257cb7ffa9bc0c6ad3b62 Mon Sep 17 00:00:00 2001
From: Gideon Shils <GideonShils@users.noreply.github.com>
Date: Thu, 26 Oct 2023 17:18:06 -0400
Subject: [PATCH] Ensure we load stoplight css first so that base styles get
 overridden (#4348)

Closes https://github.com/dbt-labs/docs.getdbt.com/issues/4346

## What are you changing in this pull request and why?
<!---
Describe your changes and why you're making them. If linked to an open
issue or a pull request on dbt Core, then link to them here!

To learn more about the writing conventions used in the dbt Labs docs,
see the [Content style
guide](https://github.com/dbt-labs/docs.getdbt.com/blob/current/contributing/content-style-guide.md).
-->

Previously the header on the API docs pages was using the wrong font.
This was because the Stoplight styles used for rendering API docs were
loading last, and were therefore overriding the page level font. This PR
swaps the css to load using the standard docusaurus pattern so that the
styles load _first_, and are overridden later by the expected font
styling.

## Checklist
<!--
Uncomment if you're publishing docs for a prerelease version of dbt
(delete if not applicable):
- [ ] Add versioning components, as described in [Versioning
Docs](https://github.com/dbt-labs/docs.getdbt.com/blob/current/contributing/single-sourcing-content.md#versioning-entire-pages)
- [ ] Add a note to the prerelease version [Migration
Guide](https://github.com/dbt-labs/docs.getdbt.com/tree/current/website/docs/guides/migration/versions)
-->
- [x] Review the [Content style
guide](https://github.com/dbt-labs/docs.getdbt.com/blob/current/contributing/content-style-guide.md)
and [About
versioning](https://github.com/dbt-labs/docs.getdbt.com/blob/current/contributing/single-sourcing-content.md#adding-a-new-version)
so my content adheres to these guidelines.
- [x] Add a checklist item for anything that needs to happen before this
PR is merged, such as "needs technical review" or "change base branch."

Co-authored-by: Leona B. Campbell <3880403+runleonarun@users.noreply.github.com>
---
 website/docusaurus.config.js              |  5 +++++
 website/src/components/stoplight/index.js | 27 +++++++++--------------
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index ce81d614c65..a24cab32ef2 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -278,6 +278,11 @@ var siteSettings = {
     },
     {rel: 'icon', href: '/img/favicon.png', type: 'image/png'},
     {rel: 'icon', href: '/img/favicon.svg', type: 'image/svg+xml'},
+    {
+      href: "https://unpkg.com/@stoplight/elements/styles.min.css",
+      type: "text/css",
+      crossorigin: "anonymous"
+    },
   ],
 };
 
diff --git a/website/src/components/stoplight/index.js b/website/src/components/stoplight/index.js
index bff43dd27c8..c7d2731903c 100644
--- a/website/src/components/stoplight/index.js
+++ b/website/src/components/stoplight/index.js
@@ -6,22 +6,15 @@ export default function Stoplight({ version }) {
     return null;
   }
   return (
-    <>
-      <link
-        href="https://unpkg.com/@stoplight/elements/styles.min.css"
-        type="text/css"
-        rel="stylesheet"
-      />
-      <API
-        apiDescriptionUrl={
-          "https://raw.githubusercontent.com/dbt-labs/dbt-cloud-openapi-spec/master/openapi-" +
-          version +
-          ".yaml"
-        }
-        platformUrl={useBaseUrl("/")}
-        basePath={useBaseUrl("/dbt-cloud/api-" + version) + "#"}
-        hideSchemas
-      />
-    </>
+    <API
+      apiDescriptionUrl={
+        "https://raw.githubusercontent.com/dbt-labs/dbt-cloud-openapi-spec/master/openapi-" +
+        version +
+        ".yaml"
+      }
+      platformUrl={useBaseUrl("/")}
+      basePath={useBaseUrl("/dbt-cloud/api-" + version) + "#"}
+      hideSchemas
+    />
   );
 }