Merge branch 'main' into table-css

packages/logos-docusaurus-theme/src/client/containers/MDXEnhacement/MDXEnhancement.context.ts

@@ -0,0 +1,36 @@
+import React, { useContext, useMemo } from 'react'
+
+export type MDXComponentType = 'heading'
+export type MDXEnhancementPosition = 'after'
+
+export type MDXEnhancementItem = {
+  component: MDXComponentType
+  position: MDXEnhancementPosition
+  render: (props: any) => React.ReactNode
+}
+
+export type MDXEnhancementContextType = {
+  items: MDXEnhancementItem[]
+}
+
+export const MDXEnhancementContext =
+  React.createContext<MDXEnhancementContextType>({
+    items: [],
+  })
+
+export const useMDXEnhancementElements = <T = any>(
+  component: MDXComponentType,
+  position: MDXEnhancementPosition,
+  props: T,
+): React.ReactNode => {
+  const ctx = useContext(MDXEnhancementContext)
+  if (!ctx) return []
+
+  return useMemo(() => {
+    const items = ctx.items.filter(
+      (item) => item.component === component && item.position === position,
+    )
+
+    return items.map((item) => item.render(props))
+  }, [component, position, props])
+}

packages/logos-docusaurus-theme/src/client/containers/MDXEnhacement/index.ts

@@ -0,0 +1 @@
+export * from './MDXEnhancement.context'

packages/logos-docusaurus-theme/src/client/css/custom.scss

@@ -1,5 +1,5 @@
-@use './utils';
-@use './lsd';
+@use "./utils";
+@use "./lsd";
 
 /**
  * Any CSS included here will be global. The classic template
@@ -71,8 +71,8 @@
   /* Typography. */
   --ifm-font-family-base: var(--lsd-typography-generic-font-family);
   --ifm-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
-    'Liberation Mono', 'Courier New', monospace;
-  --lgs-font-family-secondary: Georgia, 'Times New Roman', serif;
+    "Liberation Mono", "Courier New", monospace;
+  --lgs-font-family-secondary: Georgia, "Times New Roman", serif;
 
   --ifm-font-size-base: 100%;
   --ifm-line-height-base: 1.625;
@@ -231,20 +231,20 @@
   --ifm-table-background: transparent !important;
   --ifm-table-stripe-background: transparent !important;
 
-  @include utils.responsive('xl', 'down') {
+  @include utils.responsive("xl", "down") {
     --container-max-width: 912px;
   }
 }
 
-[data-theme='dark'] {
+[data-theme="dark"] {
   --ifm-color-scheme: dark;
 }
 
-[data-theme='light'] {
+[data-theme="light"] {
   --ifm-color-scheme: light;
 }
 
-@include utils.responsive('lg', 'down') {
+@include utils.responsive("lg", "down") {
   :root {
     --ifm-background-color: rgb(var(--lsd-surface-primary));
   }
@@ -287,23 +287,23 @@ svg * {
 }
 
 h1 {
-  @include lsd.typography('h1');
+  @include lsd.typography("h1");
 }
 
 h2 {
-  @include lsd.typography('h2');
+  @include lsd.typography("h2");
 }
 
 h3 {
-  @include lsd.typography('h3');
+  @include lsd.typography("h3");
 }
 
 h4 {
-  @include lsd.typography('h4');
+  @include lsd.typography("h4");
 }
 
 code {
-  @include lsd.typography('body1');
+  @include lsd.typography("body1");
   color: rgb(var(--lsd-text-primary));
   border-radius: 0;
   background: rgba(255, 255, 255, 0.15);
@@ -401,7 +401,7 @@ small {
 }
 
 .external-link {
-  @include lsd.typography('body2');
+  @include lsd.typography("body2");
 }
 
 .dropdown__link:hover {
@@ -417,7 +417,7 @@ small {
 }
 
 .breadcrumbs__item:not(:last-child):after {
-  content: '/';
+  content: "/";
   opacity: 1;
   background: none;
 }
@@ -459,9 +459,9 @@ small {
   text-decoration-color: #fff !important;
 }
 
-.navbar__left-items > a:not(:last-child)[href^='/'] {
+.navbar__left-items > a:not(:last-child)[href^="/"] {
   &:after {
-    content: '•';
+    content: "•";
     margin-left: 16px;
     text-decoration: none;
     display: inline-block;
@@ -469,7 +469,7 @@ small {
 }
 
 .menu__list-item .menu__link {
-  @include lsd.typography('body2');
+  @include lsd.typography("body2");
 }
 
 .menu__link--active {
@@ -611,7 +611,7 @@ small {
   align-items: center;
 }
 
-a[class^='sidebarLogo_'] {
+a[class^="sidebarLogo_"] {
   margin: 0;
 
   img {
@@ -620,7 +620,7 @@ a[class^='sidebarLogo_'] {
 }
 
 table {
-  @include lsd.typography('body2');
+  @include lsd.typography("body2");
   thead > tr {
     border: 1px solid rgb(var(--lsd-border-primary));
   }
@@ -641,6 +641,26 @@ table {
   }
 }
 
+.theme-doc-footer {
+  margin-bottom: 96px;
+}
+
+.theme-doc-footer-edit-meta-row {
+  div[class*="lastUpdated_"] {
+    @include lsd.typography("body2");
+    font-style: normal;
+    opacity: 0.7;
+
+    small {
+      display: none;
+    }
+
+    b {
+      font-weight: 400 !important;
+    }
+  }
+}
+
 .navbar-sidebar__item {
   padding-inline: var(--content-padding);
   padding-block: 0;
@@ -666,7 +686,7 @@ table {
   display: none;
 }
 
-@include utils.responsive('sm', 'down') {
+@include utils.responsive("sm", "down") {
   :root {
     --ifm-global-spacing: 0.5rem;
     --ifm-spacing-vertical: var(--ifm-global-spacing);
@@ -715,7 +735,7 @@ table {
   }
 }
 
-@include utils.responsive('lg', 'up') {
+@include utils.responsive("lg", "up") {
   .main-wrapper {
     main > .container {
       padding-bottom: 200px !important;
@@ -761,7 +781,7 @@ table {
   }
 }
 
-@include utils.responsive('xl', 'up') {
+@include utils.responsive("xl", "up") {
   .main-wrapper {
     & > div {
       display: grid;
@@ -833,7 +853,7 @@ table {
   text-align: unset;
   grid-column: 1 / 12;
   grid-row: 1 / 1;
-  @include lsd.typography('body2');
+  @include lsd.typography("body2");
 
   & > div:first-of-type {
     display: none;
@@ -841,7 +861,7 @@ table {
 }
 
 .footer__title {
-  @include lsd.typography('label1');
+  @include lsd.typography("label1");
   margin-bottom: 4px;
   font-weight: var(--ifm-font-weight-normal);
 }
@@ -884,7 +904,7 @@ table {
 
   &,
   a {
-    @include lsd.typography('label1');
+    @include lsd.typography("label1");
   }
 
   a {
@@ -893,7 +913,7 @@ table {
 
   &:not(:last-child) {
     &::after {
-      content: '•';
+      content: "•";
       margin-left: 8px;
       text-decoration: none;
       display: inline-block;
@@ -902,7 +922,7 @@ table {
 }
 
 .footer__copyright {
-  @include lsd.typography('body2');
+  @include lsd.typography("body2");
 }
 
 .footer__logo {
@@ -916,7 +936,7 @@ table {
   flex-direction: row;
 }
 
-@include utils.responsive('xl', 'up') {
+@include utils.responsive("xl", "up") {
   .navbar__inner {
     display: grid;
     gap: 16px;
@@ -943,7 +963,7 @@ table {
   }
 }
 
-@include utils.responsive('lg', 'down') {
+@include utils.responsive("lg", "down") {
   main > .container {
     padding-bottom: 84px !important;
   }
@@ -1031,7 +1051,7 @@ table {
       border-left: none;
 
       > div {
-        @include lsd.typography('subtitle2');
+        @include lsd.typography("subtitle2");
         text-decoration: none;
       }
     }
@@ -1092,7 +1112,7 @@ table {
   }
 }
 
-[data-hidden-doc-sidebar='true'] {
+[data-hidden-doc-sidebar="true"] {
   .theme-doc-sidebar-container {
     display: none;
   }

packages/logos-docusaurus-theme/src/client/static/icons/hashtag.svg

@@ -1,3 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5.28257 14.7173V18.8233H6.48257V14.7173H13.5179V18.8233H14.7179V14.7173H18.8236V13.5173H14.7179V6.48201H18.8236V5.28201H14.7179V1.17627H13.5179V5.28201H6.48257V1.17627H5.28257V5.28201H1.17651L1.17651 6.48201H5.28257V13.5173H1.17651L1.17651 14.7173H5.28257ZM6.48257 13.5173L13.5179 13.5173V6.48201L6.48257 6.48201V13.5173Z" fill="black"/>
-</svg>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3.99992 13.3333L4.66659 10.6667H2.33325L2.66659 9.33332H4.99992L5.66659 6.66666H2.99992L3.33325 5.33332H5.99992L6.66659 2.66666H7.99992L7.33325 5.33332H9.99992L10.6666 2.66666H11.9999L11.3333 5.33332H13.6666L13.3333 6.66666H10.9999L10.3333 9.33332H12.9999L12.6666 10.6667H9.99992L9.33325 13.3333H7.99992L8.66658 10.6667H5.99992L5.33325 13.3333H3.99992ZM6.33325 9.33332H8.99992L9.66658 6.66666H6.99992L6.33325 9.33332Z" fill="white"/>
+</svg>

packages/logos-docusaurus-theme/src/client/theme/DocItem/Content/index.tsx

@@ -4,6 +4,7 @@ import { ThemeClassNames } from '@docusaurus/theme-common'
 import { useDoc } from '@docusaurus/theme-common/internal'
 import Heading from '@theme/Heading'
 import MDXContent from '@theme/MDXContent'
+import MDXHeading from '@theme/MDXComponents/Heading'
 /**
  Title can be declared inside md content or declared through
  front matter and added manually. To make both cases consistent,
@@ -29,7 +30,7 @@ export default function DocItemContent({ children }) {
     <div className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>
       {syntheticTitle && (
         <header>
-          <Heading as="h1">{syntheticTitle}</Heading>
+          <MDXHeading as="h1">{syntheticTitle}</MDXHeading>
         </header>
       )}
       <MDXContent>{children}</MDXContent>

packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/index.tsx

@@ -1,17 +1,19 @@
-import React from 'react'
-import clsx from 'clsx'
 import { useWindowSize } from '@docusaurus/theme-common'
 import { useDoc } from '@docusaurus/theme-common/internal'
-import DocItemPaginator from '@theme/DocItem/Paginator'
-import DocVersionBanner from '@theme/DocVersionBanner'
-import DocVersionBadge from '@theme/DocVersionBadge'
-import DocItemFooter from '@theme/DocItem/Footer'
-import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile'
-import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop'
-import DocItemContent from '@theme/DocItem/Content'
 import DocBreadcrumbs from '@theme/DocBreadcrumbs'
-import styles from './styles.module.scss'
+import DocItemContent from '@theme/DocItem/Content'
+import DocItemFooter from '@theme/DocItem/Footer'
+import DocItemPaginator from '@theme/DocItem/Paginator'
+import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop'
+import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile'
+import DocVersionBadge from '@theme/DocVersionBadge'
+import DocVersionBanner from '@theme/DocVersionBanner'
+import { Props as HeadingProps } from '@theme/Heading'
+import clsx from 'clsx'
+import React from 'react'
 import { useMedia } from 'react-use'
+import { MDXEnhancementContext } from '../../../containers/MDXEnhacement/MDXEnhancement.context'
+import styles from './styles.module.scss'
 
 /**
  * Decide if the toc should be rendered, on mobile or desktop viewports
@@ -50,8 +52,20 @@ export default function DocItemLayout({ children }) {
           <article>
             <DocBreadcrumbs />
             <DocVersionBadge />
-            {docTOC.mobile}
-            <DocItemContent>{children}</DocItemContent>
+            <MDXEnhancementContext.Provider
+              value={{
+                items: [
+                  {
+                    component: 'heading',
+                    position: 'after',
+                    render: (props: HeadingProps) =>
+                      props.as === 'h1' && docTOC.mobile,
+                  },
+                ],
+              }}
+            >
+              <DocItemContent>{children}</DocItemContent>
+            </MDXEnhancementContext.Provider>
             <DocItemFooter />
           </article>
           <DocItemPaginator />

packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/styles.module.scss

@@ -20,8 +20,18 @@
 }
 
 .tocMobile {
+  margin-top: -0.5rem;
+  margin-bottom: 2rem;
+
   & > div {
     display: block !important;
+    margin: 0;
+  }
+}
+
+.docItemContainer {
+  .tocMobile:not(:first-of-type) {
+    display: none;
   }
 }
 

packages/logos-docusaurus-theme/src/client/theme/MDXComponents/Heading.tsx

@@ -0,0 +1,15 @@
+import Heading from '@docusaurus/theme-classic/lib/theme/MDXComponents/Heading'
+import type { Props } from '@theme/MDXComponents/Heading'
+import React from 'react'
+import { useMDXEnhancementElements } from '../../containers/MDXEnhacement/MDXEnhancement.context'
+
+export default function MDXHeading(props: Props): JSX.Element {
+  const after = useMDXEnhancementElements('heading', 'after', props)
+
+  return (
+    <>
+      <Heading {...props} />
+      {after}
+    </>
+  )
+}

packages/logos-docusaurus-theme/src/client/theme/SearchBar/SearchResultItem/SearchResultItem.tsx

@@ -9,7 +9,7 @@ import styles from './SearchResultItem.module.scss'
 
 const icons: Record<SearchDocumentType, React.ReactElement> = {
   [SearchDocumentType.Title]: (
-    <DocumentIcon className={clsx(styles.icon, styles.l1, styles.stroke)} />
+    <DocumentIcon className={clsx(styles.icon, styles.l1, styles.fill)} />
   ),
   [SearchDocumentType.Heading]: (
     <BlockIcon className={clsx(styles.icon, styles.l2, styles.fill)} />