Fix markdown h1 bug for guides (#5918)

dbt-labs · Aug 13, 2024 · 64fa95e · 64fa95e
2 parents c964825 + 56ca96e
commit 64fa95e
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 7 deletions.
diff --git a/website/src/components/quickstartTOC/index.js b/website/src/components/quickstartTOC/index.js
@@ -82,14 +82,15 @@ function QuickstartTOC() {
         buttonContainer.classList.add(style.buttonContainer);
         const prevButton = document.createElement("a");
         const nextButton = document.createElement("a");
-        
+
         prevButton.innerHTML =
           '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M7.4 273.4C2.7 268.8 0 262.6 0 256s2.7-12.8 7.4-17.4l176-168c9.6-9.2 24.8-8.8 33.9 .8s8.8 24.8-.8 33.9L83.9 232 424 232c13.3 0 24 10.7 24 24s-10.7 24-24 24L83.9 280 216.6 406.6c9.6 9.2 9.9 24.3 .8 33.9s-24.3 9.9-33.9 .8l-176-168z"/></svg> Back';
         prevButton.classList.add(clsx(style.button, style.prevButton));
         prevButton.disabled = index === 0;
         prevButton.addEventListener("click", () => handlePrev(index + 1));
 
-        nextButton.innerHTML = 'Next <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M440.6 273.4c4.7-4.5 7.4-10.8 7.4-17.4s-2.7-12.8-7.4-17.4l-176-168c-9.6-9.2-24.8-8.8-33.9 .8s-8.8 24.8 .8 33.9L364.1 232 24 232c-13.3 0-24 10.7-24 24s10.7 24 24 24l340.1 0L231.4 406.6c-9.6 9.2-9.9 24.3-.8 33.9s24.3 9.9 33.9 .8l176-168z"/></svg>';
+        nextButton.innerHTML =
+          'Next <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M440.6 273.4c4.7-4.5 7.4-10.8 7.4-17.4s-2.7-12.8-7.4-17.4l-176-168c-9.6-9.2-24.8-8.8-33.9 .8s-8.8 24.8 .8 33.9L364.1 232 24 232c-13.3 0-24 10.7-24 24s10.7 24 24 24l340.1 0L231.4 406.6c-9.6 9.2-9.9 24.3-.8 33.9s24.3 9.9 33.9 .8l176-168z"/></svg>';
         nextButton.classList.add(clsx(style.button, style.nextButton));
         nextButton.disabled = index === stepWrappers.length - 1;
         nextButton.addEventListener("click", () => handleNext(index + 1));
@@ -108,8 +109,26 @@ function QuickstartTOC() {
         }
       });
 
-      const quickstartTitle = document.querySelector("header h1");
-      quickstartTitle.classList.add(style.quickstartTitle);
+      // Get title by frontmatter title
+      let quickstartTitle = document?.querySelector("header h1");
+
+      // Get lifecycle badge from markdown content h1
+      // Example: # Demo h1 title <Lifecycle status="beta"/>
+      const markdownTitleLifeCycleBadge = document?.querySelectorAll(
+        ".quickstart-container .step-container > h1 > span.lifecycle-badge"
+      );
+
+      if (quickstartTitle) {
+        quickstartTitle.classList.add(style.quickstartTitle);
+
+        // If markdown title also set, check if LifeCycle span
+        // elements exists and move to quickstartTitle if so.
+        if (markdownTitleLifeCycleBadge?.length) {
+          for (let i = 0; i < markdownTitleLifeCycleBadge.length; i++) {
+            quickstartTitle.appendChild(markdownTitleLifeCycleBadge[i]);
+          }
+        }
+      }
     }
   }, [mounted]);
 

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
@@ -2026,6 +2026,13 @@ html[data-theme="dark"] .theme-doc-sidebar-container>div>button.button:hover {
   width: 100%;
 }
 
+/* Hide `contentTitle` h1 from content for guides.
+   This header appears in the upperleft section for guides.
+*/
+.quickstart-container .step-container > h1 {
+  display: none;
+}
+
 .quickstart-container .step-container .intro {
   order: -1;
 }

diff --git a/website/src/theme/DocItem/Content/index.js b/website/src/theme/DocItem/Content/index.js
@@ -29,12 +29,18 @@ import styles from "./styles.module.css";
 
 function useSyntheticTitle() {
   const { metadata, frontMatter, contentTitle } = useDoc();
-  const shouldRender =
-    !frontMatter.hide_title && typeof contentTitle === "undefined";
+
+  const shouldRender = 
+  metadata?.id?.includes("guides/") || 
+  (
+    !frontMatter.hide_title && typeof contentTitle === "undefined"
+  );
+
   if (!shouldRender) {
     return null;
   }
-  return metadata.title;
+
+  return contentTitle || metadata.title;
 }
 export default function DocItemContent({ children }) {
   const syntheticTitle = useSyntheticTitle();