Updates for Docusaurus v4 future-proofing (#207)

* Move deprecated setting
* Update to new stable class names

---------

Signed-off-by: Dan Barr <[email protected]>
Co-authored-by: Dan Barr <[email protected]>

Author: danbarr

docusaurus.config.ts

@@ -41,7 +41,7 @@ const config: Config = {
   projectName: 'docs-website', // Usually your repo name.
 
   onBrokenLinks: 'throw',
-  onBrokenMarkdownLinks: 'warn',
+  onBrokenAnchors: 'warn',
 
   // Even if you don't use internationalization, you can use this field to set
   // useful metadata like html lang. For example, if your site is Chinese, you
@@ -58,6 +58,10 @@ const config: Config = {
       admonitions: false,
       headingIds: true,
     },
+    hooks: {
+      onBrokenMarkdownLinks: 'warn',
+      onBrokenMarkdownImages: 'throw',
+    },
   },
 
   themes: ['@docusaurus/theme-mermaid', 'docusaurus-json-schema-plugin'],

src/css/custom.css

@@ -167,17 +167,17 @@ thead th {
   );
 }
 
-.navbar .DocSearch-Button {
+.theme-layout-navbar .DocSearch-Button {
   border-style: solid;
   border-width: 1px;
   height: 40px;
 }
 
-.navbar .DocSearch-Button {
+.theme-layout-navbar .DocSearch-Button {
   border-color: #dcdcdc;
 }
 
-[data-theme='dark'] .navbar .DocSearch-Button {
+[data-theme='dark'] .theme-layout-navbar .DocSearch-Button {
   border-color: #333333;
 }
 
@@ -211,23 +211,23 @@ thead th {
 }
 
 /* Tab components */
-.tabs-container {
+.theme-tabs-container {
   background-color: var(--ifm-card-background-color);
   border: 1px solid var(--ifm-table-border-color);
   border-radius: var(--ifm-card-border-radius);
   margin-bottom: 1rem;
 }
 
-.tabs-container > ul {
+.theme-tabs-container > ul {
   background-color: #f8fafc;
 }
 
-[data-theme='dark'] .tabs-container > ul {
+[data-theme='dark'] .theme-tabs-container > ul {
   background-color: #1a1c1f;
   border-color: #1a1a1c;
 }
 
-.tabs-container > ul {
+.theme-tabs-container > ul {
   border-bottom: 1px solid #f0f0f0;
   border-top-left-radius: var(--ifm-card-border-radius);
   border-top-right-radius: var(--ifm-card-border-radius);

src/css/footer.css

@@ -29,12 +29,12 @@
   padding: 0px 12px;
 }
 
-.footer__col:first-child {
+.theme-layout-footer-column:first-child {
   max-width: 400px;
   margin-right: auto;
 }
 
-.footer__col:last-child {
+.theme-layout-footer-column:last-child {
   max-width: 200px;
   margin-right: 0px;
 }