docs: add HeroDevs support banners to specific pages. Add new menu item.

docusaurus.config.js

@@ -121,6 +121,7 @@ const config = {
           { to: '/organisations', label: 'Adopters', position: 'left' },
           { to: '/contribute', label: 'Contribute', position: 'left' },
           { to: '/resources', label: 'Resources', position: 'left' },
+          { to: '/docs/latest/Reference/LTS', label: 'Support', position: 'left' },
           {
             type: 'docsVersionDropdown',
             position: 'right',

src/theme/DocPage/Layout/Main/index.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import clsx from 'clsx'
+import { useDocsSidebar } from '@docusaurus/theme-common/internal'
+import styles from './styles.module.css'
+export default function DocPageLayoutMain({ hiddenSidebarContainer, children }) {
+  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/DocPage/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/DocPage/Layout/Sidebar/ExpandButton/index.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import { translate } from '@docusaurus/Translate'
+import IconArrow from '@theme/Icon/Arrow'
+import styles from './styles.module.css'
+export default function DocPageLayoutSidebarExpandButton({ toggleSidebar }) {
+  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/DocPage/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);
+  }
+}

src/theme/DocPage/Layout/Sidebar/index.js

@@ -0,0 +1,53 @@
+import React, { 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/DocPage/Layout/Sidebar/ExpandButton'
+import styles from './styles.module.css'
+// 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 }) {
+  const sidebar = useDocsSidebar()
+  return <React.Fragment key={sidebar?.name ?? 'noSidebar'}>{children}</React.Fragment>
+}
+export default function DocPageLayoutSidebar({ sidebar, hiddenSidebarContainer, setHiddenSidebarContainer }) {
+  const { pathname } = useLocation()
+  const [hiddenSidebar, setHiddenSidebar] = useState(false)
+  const toggleSidebar = useCallback(() => {
+    if (hiddenSidebar) {
+      setHiddenSidebar(false)
+    }
+    // onTransitionEnd won't fire when sidebar animation is disabled
+    // fixes https://github.com/facebook/docusaurus/issues/8918
+    if (!hiddenSidebar && prefersReducedMotion()) {
+      setHiddenSidebar(true)
+    }
+    setHiddenSidebarContainer((value) => !value)
+  }, [setHiddenSidebarContainer, hiddenSidebar])
+  return (
+    <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>
+  )
+}

src/theme/DocPage/Layout/Sidebar/styles.module.css

@@ -0,0 +1,32 @@
+:root {
+  --doc-sidebar-width: 300px;
+  --doc-sidebar-hidden-width: 30px;
+}
+
+.docSidebarContainer {
+  display: none;
+}
+
+@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);
+  }
+
+  .docSidebarContainerHidden {
+    width: var(--doc-sidebar-hidden-width);
+    cursor: pointer;
+  }
+
+  .sidebarViewport {
+    top: 0;
+    position: sticky;
+    height: 100%;
+    max-height: 100vh;
+  }
+}

src/theme/DocPage/Layout/index.js

@@ -0,0 +1,26 @@
+import React, { useState } from 'react'
+import { useDocsSidebar } from '@docusaurus/theme-common/internal'
+import Layout from '@theme/Layout'
+import BackToTopButton from '@theme/BackToTopButton'
+import DocPageLayoutSidebar from '@theme/DocPage/Layout/Sidebar'
+import DocPageLayoutMain from '@theme/DocPage/Layout/Main'
+import styles from './styles.module.css'
+export default function DocPageLayout({ children }) {
+  const sidebar = useDocsSidebar()
+  const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false)
+  return (
+    <Layout wrapperClassName={styles.docsWrapper}>
+      <BackToTopButton />
+      <div className={styles.docPage}>
+        {sidebar && (
+          <DocPageLayoutSidebar
+            sidebar={sidebar.items}
+            hiddenSidebarContainer={hiddenSidebarContainer}
+            setHiddenSidebarContainer={setHiddenSidebarContainer}
+          />
+        )}
+        <DocPageLayoutMain hiddenSidebarContainer={hiddenSidebarContainer}>{children}</DocPageLayoutMain>
+      </div>
+    </Layout>
+  )
+}

src/theme/DocPage/Layout/styles.module.css

@@ -0,0 +1,18 @@
+.docPage {
+  display: flex;
+  width: 100%;
+  flex: 1 0;
+}
+
+.docsWrapper {
+  display: flex;
+  flex: 1 0 auto;
+}
+
+/*
+JS disabled??? Show light version by default => better than showing nothing
+TODO bad, but we currently always show light mode when there's no data-theme
+ */
+html:not([data-theme]) .themedComponent--light {
+  display: initial;
+}

src/theme/DocPage/index.js

@@ -0,0 +1,78 @@
+import React from 'react'
+import clsx from 'clsx'
+import { HtmlClassNameProvider, ThemeClassNames, PageMetadata } from '@docusaurus/theme-common'
+import {
+  docVersionSearchTag,
+  DocsSidebarProvider,
+  DocsVersionProvider,
+  useDocRouteMetadata,
+} from '@docusaurus/theme-common/internal'
+import DocPageLayout from '@theme/DocPage/Layout'
+import NotFound from '@theme/NotFound'
+import SearchMetadata from '@theme/SearchMetadata'
+import { useLocation } from '@docusaurus/router'
+
+function DocPageMetadata(props) {
+  const { versionMetadata } = props
+  return (
+    <>
+      <SearchMetadata
+        version={versionMetadata.version}
+        tag={docVersionSearchTag(versionMetadata.pluginId, versionMetadata.version)}
+      />
+      <PageMetadata>{versionMetadata.noIndex && <meta name="robots" content="noindex, nofollow" />}</PageMetadata>
+    </>
+  )
+}
+export default function DocPage(props) {
+  const { versionMetadata } = props
+  const currentDocRouteMetadata = useDocRouteMetadata(props)
+  const location = useLocation()
+
+  if (!currentDocRouteMetadata) {
+    return <NotFound />
+  }
+  const { docElement, sidebarName, sidebarItems } = currentDocRouteMetadata
+
+  // Show this warning only on migration guide pages for the latest version.
+  const isMigrationGuide = location.pathname.toLowerCase().includes('migration-guide')
+  const versionNumber = parseVersion(versionMetadata.version)
+
+  return (
+    <>
+      <DocPageMetadata {...props} />
+      <HtmlClassNameProvider
+        className={clsx(
+          // TODO: it should be removed from here
+          ThemeClassNames.wrapper.docsPages,
+          ThemeClassNames.page.docsDocPage,
+          props.versionMetadata.className,
+        )}>
+        <DocsVersionProvider version={versionMetadata}>
+          <DocsSidebarProvider name={sidebarName} items={sidebarItems}>
+            <DocPageLayout>
+              {/* NaN indicates the latest version */}
+              {isMigrationGuide && (isNaN(versionNumber) || versionNumber === 5) && (
+                <div className="alert alert--warning margin-top--md margin-bottom--md" role="alert">
+                  <p>Version 3 and before of Fastify are no longer maintained.</p>
+                  For information about support options for end-of-life versions, see the{' '}
+                  <a href="/docs/latest/Reference/LTS">Long Term Support</a> page.
+                </div>
+              )}
+              {docElement}
+            </DocPageLayout>
+          </DocsSidebarProvider>
+        </DocsVersionProvider>
+      </HtmlClassNameProvider>
+    </>
+  )
+}
+
+const parseVersion = (versionString) => {
+  // Remove 'v' prefix if present
+  const cleanVersion = versionString.startsWith('v') ? versionString.slice(1) : versionString
+  // Split the version string and get the first part (major version)
+  const majorVersion = cleanVersion.split('.')[0]
+  // Parse the major version to an integer
+  return parseInt(majorVersion, 10)
+}