Improve font/image examples anf fix canary markers

Author: aurorascharff

src/components/Layout/Toc.tsx

@@ -11,6 +11,7 @@
 
 import cx from 'classnames';
 import {useTocHighlight} from './useTocHighlight';
+import {IsInTocContext} from '../MDX/TocContext';
 import type {Toc} from '../MDX/TocContext';
 
 export function Toc({headings}: {headings: Toc}) {
@@ -32,37 +33,39 @@ export function Toc({headings}: {headings: Toc}) {
           overscrollBehavior: 'contain',
         }}>
         <ul className="space-y-2 pb-16">
-          {headings.length > 0 &&
-            headings.map((h, i) => {
-              if (!h.url && process.env.NODE_ENV === 'development') {
-                console.error('Heading does not have URL');
-              }
-              return (
-                <li
-                  key={`heading-${h.url}-${i}`}
-                  className={cx(
-                    'text-sm px-2 rounded-s-xl',
-                    selectedIndex === i
-                      ? 'bg-highlight dark:bg-highlight-dark'
-                      : null,
-                    {
-                      'ps-4': h?.depth === 3,
-                      hidden: h.depth && h.depth > 3,
-                    }
-                  )}>
-                  <a
+          <IsInTocContext.Provider value={true}>
+            {headings.length > 0 &&
+              headings.map((h, i) => {
+                if (!h.url && process.env.NODE_ENV === 'development') {
+                  console.error('Heading does not have URL');
+                }
+                return (
+                  <li
+                    key={`heading-${h.url}-${i}`}
                     className={cx(
+                      'text-sm px-2 rounded-s-xl',
                       selectedIndex === i
-                        ? 'text-link dark:text-link-dark font-bold'
-                        : 'text-secondary dark:text-secondary-dark',
-                      'block hover:text-link dark:hover:text-link-dark leading-normal py-2'
-                    )}
-                    href={h.url}>
-                    {h.text}
-                  </a>
-                </li>
-              );
-            })}
+                        ? 'bg-highlight dark:bg-highlight-dark'
+                        : null,
+                      {
+                        'ps-4': h?.depth === 3,
+                        hidden: h.depth && h.depth > 3,
+                      }
+                    )}>
+                    <a
+                      className={cx(
+                        selectedIndex === i
+                          ? 'text-link dark:text-link-dark font-bold'
+                          : 'text-secondary dark:text-secondary-dark',
+                        'block hover:text-link dark:hover:text-link-dark leading-normal py-2'
+                      )}
+                      href={h.url}>
+                      {h.text}
+                    </a>
+                  </li>
+                );
+              })}
+          </IsInTocContext.Provider>
         </ul>
       </div>
     </nav>

src/components/MDX/MDXComponents.tsx

@@ -36,7 +36,7 @@ import YouWillLearnCard from './YouWillLearnCard';
 import {Challenges, Hint, Solution} from './Challenges';
 import {IconNavArrow} from '../Icon/IconNavArrow';
 import ButtonLink from 'components/ButtonLink';
-import {TocContext} from './TocContext';
+import {TocContext, IsInTocContext} from './TocContext';
 import type {Toc, TocItem} from './TocContext';
 import {TeamMember} from './TeamMember';
 import {LanguagesContext} from './LanguagesContext';
@@ -122,33 +122,57 @@ const RSC = ({children}: {children: React.ReactNode}) => (
   <ExpandableCallout type="rsc">{children}</ExpandableCallout>
 );
 
-const CanaryBadge = ({title}: {title: string}) => (
-  <span
-    title={title}
-    className={
-      'text-base font-display px-1 py-0.5 font-bold bg-gray-10 dark:bg-gray-60 text-gray-60 dark:text-gray-10 rounded'
-    }>
-    <IconCanary
-      size="s"
-      className={'inline me-1 mb-0.5 text-sm text-gray-60 dark:text-gray-10'}
-    />
-    Canary only
-  </span>
-);
+const CanaryBadge = ({title}: {title: string}) => {
+  const isInToc = useContext(IsInTocContext);
+  if (isInToc) {
+    return (
+      <IconCanary
+        size="s"
+        title={title}
+        className="inline me-1 mb-0.5 text-gray-60 dark:text-gray-10"
+      />
+    );
+  }
+  return (
+    <span
+      title={title}
+      className={
+        'text-base font-display px-1 py-0.5 font-bold bg-gray-10 dark:bg-gray-60 text-gray-60 dark:text-gray-10 rounded'
+      }>
+      <IconCanary
+        size="s"
+        className={'inline me-1 mb-0.5 text-sm text-gray-60 dark:text-gray-10'}
+      />
+      Canary only
+    </span>
+  );
+};
 
-const ExperimentalBadge = ({title}: {title: string}) => (
-  <span
-    title={title}
-    className={
-      'text-base font-display px-1 py-0.5 font-bold bg-gray-10 dark:bg-gray-60 text-gray-60 dark:text-gray-10 rounded'
-    }>
-    <IconExperimental
-      size="s"
-      className={'inline me-1 mb-0.5 text-sm text-gray-60 dark:text-gray-10'}
-    />
-    Experimental only
-  </span>
-);
+const ExperimentalBadge = ({title}: {title: string}) => {
+  const isInToc = useContext(IsInTocContext);
+  if (isInToc) {
+    return (
+      <IconExperimental
+        size="s"
+        title={title}
+        className="inline me-1 mb-0.5 text-gray-60 dark:text-gray-10"
+      />
+    );
+  }
+  return (
+    <span
+      title={title}
+      className={
+        'text-base font-display px-1 py-0.5 font-bold bg-gray-10 dark:bg-gray-60 text-gray-60 dark:text-gray-10 rounded'
+      }>
+      <IconExperimental
+        size="s"
+        className={'inline me-1 mb-0.5 text-sm text-gray-60 dark:text-gray-10'}
+      />
+      Experimental only
+    </span>
+  );
+};
 
 const NextMajorBadge = ({title}: {title: string}) => (
   <span
@@ -422,7 +446,11 @@ function InlineToc() {
   if (root.children.length < 2) {
     return null;
   }
-  return <InlineTocItem items={root.children} />;
+  return (
+    <IsInTocContext.Provider value={true}>
+      <InlineTocItem items={root.children} />
+    </IsInTocContext.Provider>
+  );
 }
 
 function InlineTocItem({items}: {items: Array<NestedTocNode>}) {

src/components/MDX/TocContext.tsx

@@ -20,3 +20,6 @@ export type TocItem = {
 export type Toc = Array<TocItem>;
 
 export const TocContext = createContext<Toc>([]);
+
+// Lets badge components render compactly when inside the table of contents.
+export const IsInTocContext = createContext(false);