Merge pull request #3272 from replicatedhq/reformat-dropdown-header

Reformat "open in chatgpt" dropdown

Author: paigecalvert

docs/intro.md

@@ -1,6 +1,7 @@
 ---
 slug: /
 pagination_next: null
+hide_table_of_contents: true
 ---  
 
 # Home

src/components/CopyMarkdown.js

@@ -9,6 +9,7 @@
 
 import React, { useState, useEffect, useCallback, useRef } from 'react';
 import styles from './CopyMarkdown.module.css';
+import clsx from 'clsx';
 
 function CopyMarkdown() {
   const [isOpen, setIsOpen] = useState(false);
@@ -137,8 +138,13 @@ function CopyMarkdown() {
 
   // Initialize on client side
   useEffect(() => {
-    // Check if we have markdown content
-    const hasMarkdownContent = !!document.querySelector('.theme-doc-markdown.markdown h1');
+    // Check for content
+    const hasH1 = document.querySelector('h1');
+    const hasArticle = document.querySelector('article');
+    const hasMainContent = document.querySelector('main');
+    
+    // Set content flag if we have both an h1 and either an article or main element
+    const hasMarkdownContent = !!hasH1 && (!!hasArticle || !!hasMainContent);
     setHasContent(hasMarkdownContent);
 
     // Set up click outside handler
@@ -174,10 +180,10 @@ function CopyMarkdown() {
   }
 
   return (
-    <div className={styles.container}>
+    <div className={clsx(styles.container, 'copy-markdown-container')}>
       <button 
         ref={buttonRef}
-        className={`${styles.button} ${isCopied ? styles.copied : ''}`}
+        className={clsx(styles.button, isCopied && styles.copied)}
         onClick={!isCopied ? toggleDropdown : undefined}
         aria-expanded={isOpen}
         aria-haspopup="true"
@@ -212,7 +218,7 @@ function CopyMarkdown() {
           aria-orientation="vertical"
         >
           <ul className={styles.list}>
-          <li className={styles.item}>
+            <li className={styles.item}>
               <button 
                 className={styles.actionButton} 
                 onClick={openInChatGpt}

src/components/CopyMarkdown.module.css

@@ -1,8 +1,19 @@
 .container {
   position: relative;
-  display: inline-block;
-  margin-left: auto;
+  display: flex;
+  align-items: center;
+  margin-left: 0;
+  z-index: 10;
+  flex-shrink: 0;
+}
+
+/* Add global class for targeting from parent components */
+:global(.copy-markdown-container) {
+  position: relative;
+  display: flex;
+  align-items: center;
   z-index: 10;
+  flex-shrink: 0;
 }
 
 .copyIcon {
@@ -70,7 +81,6 @@
 }
 
 .dropdown {
-  display: block;
   position: absolute;
   top: 100%;
   left: 0;
@@ -218,7 +228,9 @@ html[data-theme='dark'] .actionDescription {
 
 @media (max-width: 768px) {
   .container {
-    margin-top: 1rem;
+    margin-top: 0;
     margin-left: 0;
+    flex-direction: column;
+    align-items: flex-start;
   }
 } 

src/components/HomepageFeatures.js

@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import {useDoc} from '@docusaurus/plugin-content-docs/client';
+import Heading from '@theme/Heading';
+import MDXContent from '@theme/MDXContent';
+import type {Props} from '@theme/DocItem/Content';
+import CopyMarkdown from '../../../components/CopyMarkdown';
+import styles from './styles.module.css';
+
+/**
+ Title can be declared inside md content or declared through
+ front matter and added manually. To make both cases consistent,
+ the added title is added under the same div.markdown block
+ See https://github.com/facebook/docusaurus/pull/4882#issuecomment-853021120
+
+ We render a "synthetic title" if:
+ - user doesn't ask to hide it with front matter
+ - the markdown content does not already contain a top-level h1 heading
+*/
+function useSyntheticTitle(): string | null {
+  const {metadata, frontMatter, contentTitle} = useDoc();
+  const shouldRender =
+    !frontMatter.hide_title && typeof contentTitle === 'undefined';
+  if (!shouldRender) {
+    return null;
+  }
+  return metadata.title;
+}
+
+export default function DocItemContent({children}: Props): ReactNode {
+  const syntheticTitle = useSyntheticTitle();
+  return (
+    <div className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown', styles.docItemContainer)}>
+      <CopyMarkdown />
+      {syntheticTitle && (
+        <header>
+          <Heading as="h1">{syntheticTitle}</Heading>
+        </header>
+      )}
+      <MDXContent>{children}</MDXContent>
+    </div>
+  );
+}

src/components/HomepageFeatures.module.css

@@ -0,0 +1,70 @@
+.docHeader {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+/* When there's no title, align the dropdown to the right */
+.docHeader:empty,
+.docHeader:has(> :only-child) {
+  justify-content: flex-end;
+}
+
+.docTitle {
+  font-size: 2.5rem;
+  margin-bottom: 0;
+  margin-right: 0;
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow-wrap: normal;
+  word-wrap: normal;
+  word-break: keep-all;
+  hyphens: none;
+  max-width: calc(100% - 180px);
+  line-height: 1.2;
+}
+
+.docItemContainer {
+  position: relative;
+}
+
+/* Position the CopyMarkdown component relative to the first h1 */
+.docItemContainer :global(.copy-markdown-container) {
+  position: absolute;
+  top: 0.75rem; /* Approximate vertical center of h1 */
+  right: 0;
+  z-index: 10;
+}
+
+/* Ensure h1 elements have enough right margin for the dropdown */
+.docItemContainer :global(h1:first-of-type) {
+  margin-right: 200px;
+  margin-bottom: 1.5rem;
+}
+
+/* Responsive design for mobile */
+@media (max-width: 768px) {
+  .docHeader {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .docTitle {
+    max-width: 100%;
+    margin-bottom: 1rem;
+  }
+  
+  .docItemContainer :global(.copy-markdown-container) {
+    position: static;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+  
+  .docItemContainer :global(h1:first-of-type) {
+    margin-right: 0;
+    margin-bottom: 1rem;
+  }
+}