Merge branch 'develop' into spacing-component

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 />
     </>
   )

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 />

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

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

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>
+  )
+}

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>
+  )
+}

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;
+  }
+}

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>
+  )
+}

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);
+  }
+}