From 082f224e419955755e9ea37bf2344ab7c4f307e3 Mon Sep 17 00:00:00 2001
From: Amit Singh <amitksingh1490@gmail.com>
Date: Sat, 24 Aug 2024 13:33:07 +0530
Subject: [PATCH 1/2] chore: Gql Conf 2024 banner (#464)

* chore:  Gql Conf 2024 banner
---
 src/components/contact/index.tsx              |   6 +
 src/components/home/index.tsx                 |   7 +-
 src/components/playground/index.tsx           |  12 +-
 src/components/shared/Announcement.tsx        |  26 +++
 src/theme/BlogLayout/index.tsx                |  36 ++++
 src/theme/DocRoot/Layout/Main/index.tsx       |  25 +++
 .../DocRoot/Layout/Main/styles.module.css     |  19 ++
 .../Layout/Sidebar/ExpandButton/index.tsx     |  30 +++
 .../Sidebar/ExpandButton/styles.module.css    |  27 +++
 src/theme/DocRoot/Layout/Sidebar/index.tsx    | 193 +++++-------------
 .../DocRoot/Layout/Sidebar/styles.module.css  | 116 +++--------
 src/theme/DocRoot/Layout/index.tsx            |  36 ++++
 src/theme/DocRoot/Layout/styles.module.css    |   9 +
 13 files changed, 310 insertions(+), 232 deletions(-)
 create mode 100644 src/components/shared/Announcement.tsx
 create mode 100644 src/theme/BlogLayout/index.tsx
 create mode 100644 src/theme/DocRoot/Layout/Main/index.tsx
 create mode 100644 src/theme/DocRoot/Layout/Main/styles.module.css
 create mode 100644 src/theme/DocRoot/Layout/Sidebar/ExpandButton/index.tsx
 create mode 100644 src/theme/DocRoot/Layout/Sidebar/ExpandButton/styles.module.css
 create mode 100644 src/theme/DocRoot/Layout/index.tsx
 create mode 100644 src/theme/DocRoot/Layout/styles.module.css

diff --git a/src/components/contact/index.tsx b/src/components/contact/index.tsx
index 282c7e7320..87cb7f7dd7 100644
--- a/src/components/contact/index.tsx
+++ b/src/components/contact/index.tsx
@@ -1,9 +1,15 @@
 import React from "react"
 import Hello from "./Hello"
+import Announcement from "@site/src/components/shared/Announcement"
 
 const ContactPage = (): JSX.Element => {
   return (
     <>
+      <Announcement
+        text={"📣 Catch Us at GraphQLConf 2024 • September 10-12 • San Francisco • "}
+        refLink={"https://graphql.org/conf/2024/schedule/870876ffad45b79d11e09393e7f22587/"}
+        refText={" Know more → "}
+      />
       <Hello />
     </>
   )
diff --git a/src/components/home/index.tsx b/src/components/home/index.tsx
index a119f1b90c..b05e3a00c0 100644
--- a/src/components/home/index.tsx
+++ b/src/components/home/index.tsx
@@ -5,11 +5,16 @@ import Graph from "./Graph"
 import Benefits from "./Benefits"
 import Discover from "../shared/Discover"
 import Configuration from "./Configuration"
-import Playground from "./Playground"
 import Testimonials from "./Testimonials"
+import Announcement from "../shared/Announcement"
 const HomePage = (): JSX.Element => {
   return (
     <div className="">
+      <Announcement
+        text={"📣 Catch Us at GraphQLConf 2024 • September 10-12 • San Francisco • "}
+        refLink={"https://graphql.org/conf/2024/schedule/870876ffad45b79d11e09393e7f22587/"}
+        refText={" Know more → "}
+      />
       <Banner />
       <Configuration />
       <Testimonials />
diff --git a/src/components/playground/index.tsx b/src/components/playground/index.tsx
index 47af09e4b4..1c87f2469a 100644
--- a/src/components/playground/index.tsx
+++ b/src/components/playground/index.tsx
@@ -1,8 +1,18 @@
 import React from "react"
 import Playground from "./Playground"
+import Announcement from "@site/src/components/shared/Announcement"
 
 const PlaygroundPage = (): JSX.Element => {
-  return <Playground />
+  return (
+    <>
+      <Announcement
+        text={"📣 Catch Us at GraphQLConf 2024 • September 10-12 • San Francisco • "}
+        refLink={"https://graphql.org/conf/2024/schedule/870876ffad45b79d11e09393e7f22587/"}
+        refText={" Know more → "}
+      />
+      <Playground />
+    </>
+  )
 }
 
 export default PlaygroundPage
diff --git a/src/components/shared/Announcement.tsx b/src/components/shared/Announcement.tsx
new file mode 100644
index 0000000000..3c6123f320
--- /dev/null
+++ b/src/components/shared/Announcement.tsx
@@ -0,0 +1,26 @@
+import React from "react"
+
+interface AnnouncementProps {
+  text: string
+  refLink?: string
+  refText?: string
+}
+
+const Announcement: React.FC<AnnouncementProps> = ({text, refLink, refText}) => {
+  return (
+    <div className="w-full h-auto bg-black text-white flex items-center justify-center p-2 sm:p-3">
+      <div className="text-center">
+        <span className="text-sm sm:text-base md:text-lg font-bold">
+          {text}
+          {refLink && refText && (
+            <a className="text-tailCall-yellow font-bold ml-2" href={refLink}>
+              {refText}
+            </a>
+          )}
+        </span>
+      </div>
+    </div>
+  )
+}
+
+export default Announcement
diff --git a/src/theme/BlogLayout/index.tsx b/src/theme/BlogLayout/index.tsx
new file mode 100644
index 0000000000..ea34f56e28
--- /dev/null
+++ b/src/theme/BlogLayout/index.tsx
@@ -0,0 +1,36 @@
+import React from "react"
+import clsx from "clsx"
+import Layout from "@theme/Layout"
+import BlogSidebar from "@theme/BlogSidebar"
+
+import type {Props} from "@theme/BlogLayout"
+import Announcement from "@site/src/components/shared/Announcement"
+
+export default function BlogLayout(props: Props): JSX.Element {
+  const {sidebar, toc, children, ...layoutProps} = props
+  const hasSidebar = sidebar && sidebar.items.length > 0
+
+  return (
+    <Layout {...layoutProps}>
+      <Announcement
+        text={"📣 Catch Us at GraphQLConf 2024 • September 10-12 • San Francisco • "}
+        refLink={"https://graphql.org/conf/2024/schedule/870876ffad45b79d11e09393e7f22587/"}
+        refText={" Know more → "}
+      />
+      <div className="container margin-vert--lg">
+        <div className="row">
+          <BlogSidebar sidebar={sidebar} />
+          <main
+            className={clsx("col", {
+              "col--7": hasSidebar,
+              "col--9 col--offset-1": !hasSidebar,
+            })}
+          >
+            {children}
+          </main>
+          {toc && <div className="col col--2">{toc}</div>}
+        </div>
+      </div>
+    </Layout>
+  )
+}
diff --git a/src/theme/DocRoot/Layout/Main/index.tsx b/src/theme/DocRoot/Layout/Main/index.tsx
new file mode 100644
index 0000000000..45fb49cdb0
--- /dev/null
+++ b/src/theme/DocRoot/Layout/Main/index.tsx
@@ -0,0 +1,25 @@
+import React from "react"
+import clsx from "clsx"
+import {useDocsSidebar} from "@docusaurus/theme-common/internal"
+import type {Props} from "@theme/DocRoot/Layout/Main"
+
+import styles from "./styles.module.css"
+
+export default function DocRootLayoutMain({hiddenSidebarContainer, children}: Props): JSX.Element {
+  const sidebar = useDocsSidebar()
+  return (
+    <main
+      className={clsx(styles.docMainContainer, (hiddenSidebarContainer || !sidebar) && styles.docMainContainerEnhanced)}
+    >
+      <div
+        className={clsx(
+          "container padding-top--md padding-bottom--lg",
+          styles.docItemWrapper,
+          hiddenSidebarContainer && styles.docItemWrapperEnhanced,
+        )}
+      >
+        {children}
+      </div>
+    </main>
+  )
+}
diff --git a/src/theme/DocRoot/Layout/Main/styles.module.css b/src/theme/DocRoot/Layout/Main/styles.module.css
new file mode 100644
index 0000000000..b0319384eb
--- /dev/null
+++ b/src/theme/DocRoot/Layout/Main/styles.module.css
@@ -0,0 +1,19 @@
+.docMainContainer {
+  display: flex;
+  width: 100%;
+}
+
+@media (min-width: 997px) {
+  .docMainContainer {
+    flex-grow: 1;
+    max-width: calc(100% - var(--doc-sidebar-width));
+  }
+
+  .docMainContainerEnhanced {
+    max-width: calc(100% - var(--doc-sidebar-hidden-width));
+  }
+
+  .docItemWrapperEnhanced {
+    max-width: calc(var(--ifm-container-width) + var(--doc-sidebar-width)) !important;
+  }
+}
diff --git a/src/theme/DocRoot/Layout/Sidebar/ExpandButton/index.tsx b/src/theme/DocRoot/Layout/Sidebar/ExpandButton/index.tsx
new file mode 100644
index 0000000000..57703e0272
--- /dev/null
+++ b/src/theme/DocRoot/Layout/Sidebar/ExpandButton/index.tsx
@@ -0,0 +1,30 @@
+import React from "react"
+import {translate} from "@docusaurus/Translate"
+import IconArrow from "@theme/Icon/Arrow"
+import type {Props} from "@theme/DocRoot/Layout/Sidebar/ExpandButton"
+
+import styles from "./styles.module.css"
+
+export default function DocRootLayoutSidebarExpandButton({toggleSidebar}: Props): JSX.Element {
+  return (
+    <div
+      className={styles.expandButton}
+      title={translate({
+        id: "theme.docs.sidebar.expandButtonTitle",
+        message: "Expand sidebar",
+        description: "The ARIA label and title attribute for expand button of doc sidebar",
+      })}
+      aria-label={translate({
+        id: "theme.docs.sidebar.expandButtonAriaLabel",
+        message: "Expand sidebar",
+        description: "The ARIA label and title attribute for expand button of doc sidebar",
+      })}
+      tabIndex={0}
+      role="button"
+      onKeyDown={toggleSidebar}
+      onClick={toggleSidebar}
+    >
+      <IconArrow className={styles.expandButtonIcon} />
+    </div>
+  )
+}
diff --git a/src/theme/DocRoot/Layout/Sidebar/ExpandButton/styles.module.css b/src/theme/DocRoot/Layout/Sidebar/ExpandButton/styles.module.css
new file mode 100644
index 0000000000..cc480551b2
--- /dev/null
+++ b/src/theme/DocRoot/Layout/Sidebar/ExpandButton/styles.module.css
@@ -0,0 +1,27 @@
+@media (min-width: 997px) {
+  .expandButton {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color var(--ifm-transition-fast) ease;
+    background-color: var(--docusaurus-collapse-button-bg);
+  }
+
+  .expandButton:hover,
+  .expandButton:focus {
+    background-color: var(--docusaurus-collapse-button-bg-hover);
+  }
+
+  .expandButtonIcon {
+    transform: rotate(0);
+  }
+
+  [dir="rtl"] .expandButtonIcon {
+    transform: rotate(180deg);
+  }
+}
diff --git a/src/theme/DocRoot/Layout/Sidebar/index.tsx b/src/theme/DocRoot/Layout/Sidebar/index.tsx
index 23ae5b650a..98c3963587 100644
--- a/src/theme/DocRoot/Layout/Sidebar/index.tsx
+++ b/src/theme/DocRoot/Layout/Sidebar/index.tsx
@@ -1,148 +1,65 @@
-import React, {useEffect, useState, useRef} from "react"
-import {useHistory} from "react-router-dom"
-import Sidebar from "@theme-original/DocRoot/Layout/Sidebar"
-import Search from "docusaurus-lunr-search/src/theme/SearchBar"
-import useIsBrowser from "@docusaurus/useIsBrowser"
-import Platform from "react-platform-js"
+import React, {type ReactNode, useState, useCallback} from "react"
+import clsx from "clsx"
+import {prefersReducedMotion, ThemeClassNames} from "@docusaurus/theme-common"
+import {useDocsSidebar} from "@docusaurus/theme-common/internal"
+import {useLocation} from "@docusaurus/router"
+import DocSidebar from "@theme/DocSidebar"
+import ExpandButton from "@theme/DocRoot/Layout/Sidebar/ExpandButton"
+import type {Props} from "@theme/DocRoot/Layout/Sidebar"
 
-import PageSearchIcon from "@site/static/icons/basic/page-search.svg"
-import EnterKeyIcon from "@site/static/icons/basic/enter-key.svg"
-import UpDownKeyIcon from "@site/static/icons/basic/up-down-key.svg"
-import EscapeKeyIcon from "@site/static/icons/basic/escape-key.svg"
 import styles from "./styles.module.css"
-import {getSearchInputRef, setBodyOverflow} from "@site/src/utils"
 
-const CustomSearch = () => {
-  const [isSearchModalVisible, setIsSearchModalVisible] = useState<boolean>(false)
-  const focusRef = useRef()
-  const history = useHistory()
-  const isBrowser = useIsBrowser()
-  const placeholder = isBrowser ? (Platform.OS.startsWith("Mac") ? "Search ⌘+K" : "Search Ctrl+K") : "Search"
-
-  // Function to handle opening the search modal
-  const handleSearchClick = () => {
-    setIsSearchModalVisible(true)
-  }
-
-  // Function to handle closing the search modal
-  const handleSearchModalClose = () => {
-    setIsSearchModalVisible(false)
-  }
-
-  // Function to control body scroll based on modal visibility
-  const setBodyScroll = () => {
-    if (isSearchModalVisible) {
-      setBodyOverflow("hidden")
-    } else {
-      setBodyOverflow("initial")
-    }
-  }
-
-  // Function to handle key press events
-  const handleKeyPress = (event: KeyboardEvent) => {
-    if (event.key === "Escape") {
-      handleSearchModalClose()
-    }
-    if (
-      (event.metaKey && event.key === "k" && Platform.UA.includes("Mac")) ||
-      (event.ctrlKey && event.key === "k" && Platform.UA.includes("Win"))
-    ) {
-      handleSearchClick()
-    }
-  }
-
-  useEffect(() => {
-    // handle body scroll based on modal visibility changes
-    setBodyScroll()
-
-    // handle keydown events for search functionality
-    document.addEventListener("keydown", handleKeyPress)
-
-    // close the search modal when route changes
-    const unlisten = history.listen((location, action) => {
-      if (action === "PUSH" || action === "POP") {
-        setIsSearchModalVisible(false)
-      }
-    })
-
-    const focusSearchBar = () => {
-      const searchInput = getSearchInputRef()
-      if (searchInput && focusRef.current !== "Loading...") {
-        setTimeout(() => {
-          searchInput.focus()
-        }, 20)
-      }
-    }
+// Reset sidebar state when sidebar changes
+// Use React key to unmount/remount the children
+// See https://github.com/facebook/docusaurus/issues/3414
+function ResetOnSidebarChange({children}: {children: ReactNode}) {
+  const sidebar = useDocsSidebar()
+  return <React.Fragment key={sidebar?.name ?? "noSidebar"}>{children}</React.Fragment>
+}
 
-    const searchContainer = document.getElementById("search-container")
-    if (searchContainer) {
-      searchContainer.addEventListener("DOMSubtreeModified", focusSearchBar)
+export default function DocRootLayoutSidebar({
+  sidebar,
+  hiddenSidebarContainer,
+  setHiddenSidebarContainer,
+}: Props): JSX.Element {
+  const {pathname} = useLocation()
+
+  const [hiddenSidebar, setHiddenSidebar] = useState(false)
+  const toggleSidebar = useCallback(() => {
+    if (hiddenSidebar) {
+      setHiddenSidebar(false)
     }
-
-    // Cleanup (when component unmounts or dependencies change)
-    return () => {
-      setBodyOverflow("initial")
-      document.removeEventListener("keydown", handleKeyPress)
-      unlisten()
-
-      if (searchContainer) {
-        searchContainer.removeEventListener("DOMSubtreeModified", focusSearchBar)
-      }
+    // onTransitionEnd won't fire when sidebar animation is disabled
+    // fixes https://github.com/facebook/docusaurus/issues/8918
+    if (!hiddenSidebar && prefersReducedMotion()) {
+      setHiddenSidebar(true)
     }
-  }, [history, isSearchModalVisible])
-
-  return (
-    <>
-      {/* Search input container */}
-      <div className={styles.inputContainer} onClick={handleSearchClick}>
-        <span aria-label="expand searchbar" role="button" className="search-icon" tabIndex={0}></span>
-        <input readOnly placeholder={placeholder} className={styles.input} />
-      </div>
+    setHiddenSidebarContainer((value) => !value)
+  }, [setHiddenSidebarContainer, hiddenSidebar])
 
-      {/* Search modal */}
-      <div id="search-container">
-        {isSearchModalVisible ? (
-          <>
-            <div onClick={handleSearchModalClose} className={styles.overlay}></div>
-            <div className={styles.modal}>
-              <div className={styles.modalContent}>
-                <Search />
-                <div className={styles.initialCase}>
-                  <PageSearchIcon />
-                  <div className={styles.searchDocsTitle}>Search Docs</div>
-                  <div className={styles.searchDocsDesc}>Search anything within the docs</div>
-                </div>
-              </div>
-              <div className={styles.footer}>
-                <div className={styles.navigationInfoItem}>
-                  <EnterKeyIcon />
-                  <span>to select</span>
-                </div>
-                <div className={styles.navigationInfoItem}>
-                  <UpDownKeyIcon />
-                  <span>to navigate</span>
-                </div>
-                <div className={styles.navigationInfoItem}>
-                  <EscapeKeyIcon />
-                  <span>to close</span>
-                </div>
-              </div>
-            </div>
-          </>
-        ) : null}
-      </div>
-    </>
-  )
-}
-
-// Wrapper component combining Sidebar with CustomSearch
-const SidebarWrapper = (props: SidebarConfig) => {
   return (
-    <div className="sidebar-search-container flex flex-col lg:mb-[100px]">
-      <CustomSearch />
-      <Sidebar {...props} />
-    </div>
+    <aside
+      className={clsx(
+        ThemeClassNames.docs.docSidebarContainer,
+        styles.docSidebarContainer,
+        hiddenSidebarContainer && styles.docSidebarContainerHidden,
+      )}
+      onTransitionEnd={(e) => {
+        if (!e.currentTarget.classList.contains(styles.docSidebarContainer!)) {
+          return
+        }
+
+        if (hiddenSidebarContainer) {
+          setHiddenSidebar(true)
+        }
+      }}
+    >
+      <ResetOnSidebarChange>
+        <div className={clsx(styles.sidebarViewport, hiddenSidebar && styles.sidebarViewportHidden)}>
+          <DocSidebar sidebar={sidebar} path={pathname} onCollapse={toggleSidebar} isHidden={hiddenSidebar} />
+          {hiddenSidebar && <ExpandButton toggleSidebar={toggleSidebar} />}
+        </div>
+      </ResetOnSidebarChange>
+    </aside>
   )
 }
-
-export default SidebarWrapper
diff --git a/src/theme/DocRoot/Layout/Sidebar/styles.module.css b/src/theme/DocRoot/Layout/Sidebar/styles.module.css
index 4b08164d45..221aabf564 100644
--- a/src/theme/DocRoot/Layout/Sidebar/styles.module.css
+++ b/src/theme/DocRoot/Layout/Sidebar/styles.module.css
@@ -1,100 +1,32 @@
-.input {
-  width: 100%;
-  border-radius: 8px;
-  border: 1px solid var(--ifm-color-gray-800);
-  background-color: transparent;
-  height: 44px;
-  outline: 0;
-  appearance: none;
-  color: var(--ifm-navbar-search-input-color);
-  cursor: text;
-  display: inline-block;
-  font-size: var(--ifm-search-input-font-size);
-  padding: 0 0.5rem 0 2.2rem;
-  background: transparent var(--ifm-navbar-search-input-icon) no-repeat 0.75rem center/1rem 1rem;
+:root {
+  --doc-sidebar-width: 300px;
+  --doc-sidebar-hidden-width: 30px;
 }
 
-.inputContainer {
-  padding: 1.3rem;
-  padding-bottom: 1rem;
+.docSidebarContainer {
+  display: none;
 }
 
-.overlay {
-  background-color: var(--ifm-color-white-opacity-15);
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  backdrop-filter: blur(3px);
-  overflow: hidden;
-}
-
-.modal {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  margin-right: -50%;
-  z-index: 9;
-  background: var(--ifm-color-brand-light);
-  width: 640px;
-  transform: translate(-50%, -50%);
-  border: 1px solid var(--ifm-color-brand-dark-100);
-  border-radius: 8px;
-}
-
-.initialCase {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: calc(100% - 44px);
-}
-
-.footer {
-  padding: 0.75rem 1rem;
-  border-top: 1px solid var(--ifm-color-gray-600);
-}
-
-.navigationInfoItem {
-  display: flex;
-  align-items: center;
-}
-
-.navigationInfoItem span {
-  color: var(--ifm-color-gray-800);
-  display: block;
-  margin-left: 0.25rem;
-  font-size: 12px;
-}
-
-.footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.modalContent {
-  height: 340px;
-}
-
-.searchDocsTitle {
-  margin-top: 8px;
-  font-weight: bold;
-}
+@media (min-width: 997px) {
+  .docSidebarContainer {
+    display: block;
+    width: var(--doc-sidebar-width);
+    margin-top: calc(-1 * var(--ifm-navbar-height));
+    border-right: 1px solid var(--ifm-toc-border-color);
+    will-change: width;
+    transition: width var(--ifm-transition-fast) ease;
+    clip-path: inset(0);
+  }
 
-.searchDocsDesc {
-  font-size: var(--ifm-search-desc-font-size);
-  line-height: 20.73px;
-  letter-spacing: -4%;
-  font-weight: 400;
-  color: var(--ifm-color-brand-dark-400);
-}
+  .docSidebarContainerHidden {
+    width: var(--doc-sidebar-hidden-width);
+    cursor: pointer;
+  }
 
-@media (max-height: 600px) {
-  .modal {
-    top: calc(var(--header-height) + 1rem);
-    transform: translate(-50%, 0);
+  .sidebarViewport {
+    top: 0;
+    position: sticky;
+    height: 100%;
+    max-height: 100vh;
   }
 }
diff --git a/src/theme/DocRoot/Layout/index.tsx b/src/theme/DocRoot/Layout/index.tsx
new file mode 100644
index 0000000000..29f82af3b5
--- /dev/null
+++ b/src/theme/DocRoot/Layout/index.tsx
@@ -0,0 +1,36 @@
+import React, {useState} from "react"
+import {useDocsSidebar} from "@docusaurus/theme-common/internal"
+import BackToTopButton from "@theme/BackToTopButton"
+import DocRootLayoutSidebar from "@theme/DocRoot/Layout/Sidebar"
+import DocRootLayoutMain from "@theme/DocRoot/Layout/Main"
+import type {Props} from "@theme/DocRoot/Layout"
+
+import styles from "./styles.module.css"
+import Announcement from "@site/src/components/shared/Announcement"
+
+export default function DocRootLayout({children}: Props): JSX.Element {
+  const sidebar = useDocsSidebar()
+  const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false)
+  return (
+    <>
+      <Announcement
+        text={"📣 Catch Us at GraphQLConf 2024 • September 10-12 • San Francisco • "}
+        refLink={"https://graphql.org/conf/2024/schedule/870876ffad45b79d11e09393e7f22587/"}
+        refText={" Know more → "}
+      />
+      <div className={styles.docsWrapper}>
+        <BackToTopButton />
+        <div className={styles.docRoot}>
+          {sidebar && (
+            <DocRootLayoutSidebar
+              sidebar={sidebar.items}
+              hiddenSidebarContainer={hiddenSidebarContainer}
+              setHiddenSidebarContainer={setHiddenSidebarContainer}
+            />
+          )}
+          <DocRootLayoutMain hiddenSidebarContainer={hiddenSidebarContainer}>{children}</DocRootLayoutMain>
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/src/theme/DocRoot/Layout/styles.module.css b/src/theme/DocRoot/Layout/styles.module.css
new file mode 100644
index 0000000000..a77c975898
--- /dev/null
+++ b/src/theme/DocRoot/Layout/styles.module.css
@@ -0,0 +1,9 @@
+.docRoot {
+  display: flex;
+  width: 100%;
+}
+
+.docsWrapper {
+  display: flex;
+  flex: 1 0 auto;
+}

From 2768ac0ba5167611a5341ba75ac3404bb1cf3108 Mon Sep 17 00:00:00 2001
From: Tushar Mathur <tusharmath@gmail.com>
Date: Mon, 26 Aug 2024 19:34:07 +0530
Subject: [PATCH 2/2] update catch us link

---
 src/components/contact/index.tsx    | 2 +-
 src/components/home/index.tsx       | 2 +-
 src/components/playground/index.tsx | 2 +-
 src/theme/BlogLayout/index.tsx      | 2 +-
 src/theme/DocRoot/Layout/index.tsx  | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/contact/index.tsx b/src/components/contact/index.tsx
index 87cb7f7dd7..ca5e9a49ce 100644
--- a/src/components/contact/index.tsx
+++ b/src/components/contact/index.tsx
@@ -6,7 +6,7 @@ const ContactPage = (): JSX.Element => {
   return (
     <>
       <Announcement
-        text={"📣 Catch Us at GraphQLConf 2024 • September 10-12 • San Francisco • "}
+        text={"📣 Catch us at GraphQLConf 2024 • September 10-12 • San Francisco • "}
         refLink={"https://graphql.org/conf/2024/schedule/870876ffad45b79d11e09393e7f22587/"}
         refText={" Know more → "}
       />
diff --git a/src/components/home/index.tsx b/src/components/home/index.tsx
index b05e3a00c0..19460b2f29 100644
--- a/src/components/home/index.tsx
+++ b/src/components/home/index.tsx
@@ -11,7 +11,7 @@ const HomePage = (): JSX.Element => {
   return (
     <div className="">
       <Announcement
-        text={"📣 Catch Us at GraphQLConf 2024 • September 10-12 • San Francisco • "}
+        text={"📣 Catch us at GraphQLConf 2024 • September 10-12 • San Francisco • "}
         refLink={"https://graphql.org/conf/2024/schedule/870876ffad45b79d11e09393e7f22587/"}
         refText={" Know more → "}
       />
diff --git a/src/components/playground/index.tsx b/src/components/playground/index.tsx
index 1c87f2469a..4f36e95419 100644
--- a/src/components/playground/index.tsx
+++ b/src/components/playground/index.tsx
@@ -6,7 +6,7 @@ const PlaygroundPage = (): JSX.Element => {
   return (
     <>
       <Announcement
-        text={"📣 Catch Us at GraphQLConf 2024 • September 10-12 • San Francisco • "}
+        text={"📣 Catch us at GraphQLConf 2024 • September 10-12 • San Francisco • "}
         refLink={"https://graphql.org/conf/2024/schedule/870876ffad45b79d11e09393e7f22587/"}
         refText={" Know more → "}
       />
diff --git a/src/theme/BlogLayout/index.tsx b/src/theme/BlogLayout/index.tsx
index ea34f56e28..02af4409b9 100644
--- a/src/theme/BlogLayout/index.tsx
+++ b/src/theme/BlogLayout/index.tsx
@@ -13,7 +13,7 @@ export default function BlogLayout(props: Props): JSX.Element {
   return (
     <Layout {...layoutProps}>
       <Announcement
-        text={"📣 Catch Us at GraphQLConf 2024 • September 10-12 • San Francisco • "}
+        text={"📣 Catch us at GraphQLConf 2024 • September 10-12 • San Francisco • "}
         refLink={"https://graphql.org/conf/2024/schedule/870876ffad45b79d11e09393e7f22587/"}
         refText={" Know more → "}
       />
diff --git a/src/theme/DocRoot/Layout/index.tsx b/src/theme/DocRoot/Layout/index.tsx
index 29f82af3b5..8f21814e2b 100644
--- a/src/theme/DocRoot/Layout/index.tsx
+++ b/src/theme/DocRoot/Layout/index.tsx
@@ -14,7 +14,7 @@ export default function DocRootLayout({children}: Props): JSX.Element {
   return (
     <>
       <Announcement
-        text={"📣 Catch Us at GraphQLConf 2024 • September 10-12 • San Francisco • "}
+        text={"📣 Catch us at GraphQLConf 2024 • September 10-12 • San Francisco • "}
         refLink={"https://graphql.org/conf/2024/schedule/870876ffad45b79d11e09393e7f22587/"}
         refText={" Know more → "}
       />