RFD site asciidoc fixes

.github/workflows/license-check.yaml

@@ -10,4 +10,4 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - name: Check License Header
-        uses: apache/skywalking-eyes/header@5dfa68f93380a5e57259faaf95088b7f133b5778
+        uses: apache/skywalking-eyes/header@5dfa68f93380a5e57259faaf95088b7f133b5778

.licenserc.yaml

@@ -16,4 +16,4 @@ header:
     - '**/*.md'
     - 'LICENSE'
 
-  comment: on-failure
+  comment: on-failure

components/dist/asciidoc.css

@@ -32,6 +32,14 @@
     @apply text-accent;
   }
 
+  .asciidoc-body .admonition-content .paragraph {
+    @apply mb-1 last:mb-0;
+  }
+
+  .asciidoc-body .admonition-content > div {
+    @apply normal-case;
+  }
+
   .asciidoc-body img {
     @apply mx-auto h-auto w-auto w-full rounded-lg border border-tertiary;
     max-height: max(500px, 75vh);

components/dist/index.d.ts

@@ -15,6 +15,9 @@ declare const AsciiDocBlocks: {
     Table: ({ node }: {
         node: _asciidoctor_core_types.Table;
     }) => react_jsx_runtime.JSX.Element;
+    Section: ({ node }: {
+        node: _asciidoctor_core_types.Section;
+    }) => react_jsx_runtime.JSX.Element;
 };
 
 type BadgeColor = 'default' | 'destructive' | 'notice' | 'neutral' | 'purple' | 'blue';

components/src/AsciiDoc/Admonition.tsx

@@ -5,19 +5,14 @@
  *
  * Copyright Oxide Computer Company
  */
-
-import { type AdocTypes, Content, Title, useGetContent } from '@oxide/react-asciidoc'
+import { type AdocTypes, Title, getContent } from '@oxide/react-asciidoc'
 import parse from 'html-react-parser'
 
 import { titleCase } from '../utils'
 
 const Admonition = ({ node }: { node: AdocTypes.Block }) => {
   const attrs = node.getAttributes()
-  const content = useGetContent(node)
-
-  // Undocumented asciidoc attribute
-  // Use this to check if we should render the content as is, or use a <Content /> block
-  const contentModel = node.getContentModel()
+  const content = getContent(node)
 
   let icon
   if (attrs.name === 'caution') {
@@ -34,13 +29,10 @@ const Admonition = ({ node }: { node: AdocTypes.Block }) => {
       <div className="admonition-content content">
         <Title node={node} />
         <div>{titleCase(attrs.name)}</div>
-        <p>
-          {contentModel === 'simple' ? (
-            parse(content)
-          ) : (
-            <Content blocks={node.getBlocks()} />
-          )}
-        </p>
+        <div>
+          <Title node={node} />
+          {parse(content)}
+        </div>
       </div>
     </div>
   )

components/src/AsciiDoc/Listing.tsx

@@ -5,22 +5,28 @@
  *
  * Copyright Oxide Computer Company
  */
-
-import { type AdocTypes, CaptionedTitle, useGetContent } from '@oxide/react-asciidoc'
+import {
+  type AdocTypes,
+  CaptionedTitle,
+  getContent,
+  getLineNumber,
+} from '@oxide/react-asciidoc'
 import cn from 'classnames'
 import hljs from 'highlight.js'
+import { decode } from 'html-entities'
 
 const Listing = ({ node }: { node: AdocTypes.Block }) => {
   const document = node.getDocument()
   const attrs = node.getAttributes()
   const nowrap = node.isOption('nowrap') || !document.hasAttribute('prewrap')
-  const content = useGetContent(node)
+  const content = getContent(node)
+  const decodedContent = decode(content) || content // unescape the html entities
 
   if (node.getStyle() === 'source') {
     const lang = attrs.language
 
     return (
-      <div className="listingblock">
+      <div className="listingblock" {...getLineNumber(node)}>
         <CaptionedTitle node={node} />
         <div className="content">
           <pre className={cn('highlight', nowrap ? ' nowrap' : '')}>
@@ -30,25 +36,23 @@ const Listing = ({ node }: { node: AdocTypes.Block }) => {
                 data-lang={lang}
                 dangerouslySetInnerHTML={{
                   __html: hljs.getLanguage(lang)
-                    ? hljs.highlight(content, { language: lang }).value
-                    : content,
+                    ? hljs.highlight(decodedContent, { language: lang }).value
+                    : decodedContent,
                 }}
               />
             ) : (
-              <code dangerouslySetInnerHTML={{ __html: content }} />
+              <code dangerouslySetInnerHTML={{ __html: decodedContent }} />
             )}
           </pre>
         </div>
       </div>
     )
   } else {
     return (
-      <div className="listingblock">
+      <div className="listingblock" {...getLineNumber(node)}>
         <CaptionedTitle node={node} />
         <div className="content">
-          <pre className={nowrap ? ' nowrap' : ''}>
-            <code dangerouslySetInnerHTML={{ __html: node.getSource() }} />
-          </pre>
+          <pre className={nowrap ? ' nowrap' : ''}>{node.getSource()}</pre>
         </div>
       </div>
     )

components/src/AsciiDoc/Table.tsx

@@ -5,7 +5,6 @@
  *
  * Copyright Oxide Computer Company
  */
-
 import { type AdocTypes, Table as InnerTable } from '@oxide/react-asciidoc'
 
 const Table = ({ node }: { node: AdocTypes.Table }) => (

components/src/AsciiDoc/index.ts

@@ -5,13 +5,14 @@
  *
  * Copyright Oxide Computer Company
  */
-
 import Admonition from './Admonition'
 import Listing from './Listing'
+import Section from './Section'
 import Table from './Table'
 
 export const AsciiDocBlocks = {
   Admonition,
   Listing,
   Table,
+  Section,
 }

components/src/asciidoc/Section.tsx

@@ -0,0 +1,84 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+
+import { Link16Icon } from '@/icons/react'
+import { type AdocTypes, Content, getRole } from '@oxide/react-asciidoc'
+import cn from 'classnames'
+import parse from 'html-react-parser'
+import { createElement } from 'react'
+
+const Section = ({ node }: { node: AdocTypes.Section }) => {
+  const docAttrs = node.getDocument().getAttributes()
+  const level = node.getLevel()
+  let title: JSX.Element | string = ''
+
+  let sectNum = node.getSectionNumeral()
+  sectNum = sectNum === '.' ? '' : sectNum
+
+  const sectNumLevels = docAttrs['sectnumlevels'] ? parseInt(docAttrs['sectnumlevels']) : 3
+
+  if (node.getCaption()) {
+    title = node.getCaptionedTitle()
+  } else if (node.isNumbered() && level <= sectNumLevels) {
+    if (level < 2 && node.getDocument().getDoctype() === 'book') {
+      const sectionName = node.getSectionName()
+      if (sectionName === 'chapter') {
+        const signifier = docAttrs['chapter-signifier']
+        title = `${signifier || ''} ${sectNum} ${node.getTitle()}`
+      } else if (sectionName === 'part') {
+        const signifier = docAttrs['part-signifier']
+        title = `${signifier || ''} ${sectNum} ${node.getTitle()}`
+      } else {
+        title = node.getTitle() || ''
+      }
+    } else {
+      title = node.getTitle() || ''
+    }
+  } else {
+    title = node.getTitle() || ''
+  }
+
+  title = (
+    <>
+      <a className="anchor" id={node.getId() || ''} aria-hidden />
+      <a className="link group" href={`#${node.getId()}`}>
+        {parse(title)}
+        <Link16Icon className="text-accent-secondary hidden group-hover:inline-block ml-2" />
+      </a>
+    </>
+  )
+
+  if (level === 0) {
+    return (
+      <>
+        <h1 className={cn('sect0', getRole(node))} data-sectnum={sectNum}>
+          {title}
+        </h1>
+        <Content blocks={node.getBlocks()} />
+      </>
+    )
+  } else {
+    return (
+      <div className={cn(`sect${level}`, getRole(node))}>
+        {createElement(`h${level + 1}`, { 'data-sectnum': sectNum }, title)}
+        <div className="sectionbody">
+          <Content blocks={node.getBlocks()} />
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Section

components/src/assets/asciidoc.css

@@ -32,6 +32,14 @@
     @apply text-accent;
   }
 
+  .asciidoc-body .admonition-content .paragraph {
+    @apply mb-1 last:mb-0;
+  }
+
+  .asciidoc-body .admonition-content > div {
+    @apply normal-case;
+  }
+
   .asciidoc-body img {
     @apply mx-auto h-auto w-auto w-full rounded-lg border border-tertiary;
     max-height: max(500px, 75vh);

components/src/ui/badge/Badge.tsx

@@ -5,7 +5,6 @@
  *
  * Copyright Oxide Computer Company
  */
-
 import cn from 'classnames'
 
 export type BadgeColor =

components/src/ui/button/Button.tsx

@@ -5,7 +5,6 @@
  *
  * Copyright Oxide Computer Company
  */
-
 import cn from 'classnames'
 import type { MouseEventHandler } from 'react'
 import { forwardRef } from 'react'

components/src/ui/spinner/Spinner.tsx

@@ -5,7 +5,6 @@
  *
  * Copyright Oxide Computer Company
  */
-
 import cn from 'classnames'
 import type { ReactNode } from 'react'
 import { useEffect, useRef, useState } from 'react'

components/src/ui/tabs/Tabs.tsx

@@ -5,7 +5,6 @@
  *
  * Copyright Oxide Computer Company
  */
-
 import type {
   TabsContentProps,
   TabsListProps,

icons/react/Access16Icon.tsx

@@ -5,14 +5,33 @@
  *
  * Copyright Oxide Computer Company
  */
-import { SVGProps } from "react";
+import { SVGProps } from 'react'
+
 interface SVGRProps {
-  title?: string;
-  titleId?: string;
+  title?: string
+  titleId?: string
 }
 const Access16Icon = ({
   title,
   titleId,
   ...props
-}: SVGProps<SVGSVGElement> & SVGRProps) => <svg width={16} height={16} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fillRule="evenodd" clipRule="evenodd" d="M5 13.29a6.316 6.316 0 0 1-3-5.354V3.541a.75.75 0 0 1 .513-.712l5.25-1.75a.75.75 0 0 1 .474 0l5.25 1.75a.75.75 0 0 1 .513.712v4.395c0 2.152-1.12 4.126-3 5.348a7.33 7.33 0 0 1-.2.125l-2.43 1.38a.75.75 0 0 1-.74 0L5.2 13.41a6.375 6.375 0 0 1-.2-.12Zm0-2.887c0 .175.06.347.18.474.29.307.63.576 1.011.795l.003.002 1.435.815c.23.13.512.13.742 0l1.416-.804c.394-.242.74-.523 1.033-.835a.69.69 0 0 0 .18-.475V10a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v.402ZM10 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z" fill="currentColor" /></svg>;
-export default Access16Icon;
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
+  <svg
+    width={16}
+    height={16}
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5 13.29a6.316 6.316 0 0 1-3-5.354V3.541a.75.75 0 0 1 .513-.712l5.25-1.75a.75.75 0 0 1 .474 0l5.25 1.75a.75.75 0 0 1 .513.712v4.395c0 2.152-1.12 4.126-3 5.348a7.33 7.33 0 0 1-.2.125l-2.43 1.38a.75.75 0 0 1-.74 0L5.2 13.41a6.375 6.375 0 0 1-.2-.12Zm0-2.887c0 .175.06.347.18.474.29.307.63.576 1.011.795l.003.002 1.435.815c.23.13.512.13.742 0l1.416-.804c.394-.242.74-.523 1.033-.835a.69.69 0 0 0 .18-.475V10a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v.402ZM10 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+export default Access16Icon

icons/react/Access24Icon.tsx

@@ -5,14 +5,33 @@
  *
  * Copyright Oxide Computer Company
  */
-import { SVGProps } from "react";
+import { SVGProps } from 'react'
+
 interface SVGRProps {
-  title?: string;
-  titleId?: string;
+  title?: string
+  titleId?: string
 }
 const Access24Icon = ({
   title,
   titleId,
   ...props
-}: SVGProps<SVGSVGElement> & SVGRProps) => <svg width={24} height={24} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fillRule="evenodd" clipRule="evenodd" d="M3 4.72a1 1 0 0 1 .684-.948l8-2.667a1 1 0 0 1 .632 0l8 2.667a1 1 0 0 1 .684.949v8.572a8 8 0 0 1-4.115 6.993l-4.4 2.444a1 1 0 0 1-.97 0l-4.4-2.444A8 8 0 0 1 3 13.293V4.72ZM7 15a3 3 0 0 1 3-3h4a3 3 0 0 1 3 3v1.434a1 1 0 0 1-.485.857l-4 2.4a1 1 0 0 1-1.03 0l-4-2.4A1 1 0 0 1 7 16.434V15Zm5-5a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" fill="currentColor" /></svg>;
-export default Access24Icon;
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
+  <svg
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3 4.72a1 1 0 0 1 .684-.948l8-2.667a1 1 0 0 1 .632 0l8 2.667a1 1 0 0 1 .684.949v8.572a8 8 0 0 1-4.115 6.993l-4.4 2.444a1 1 0 0 1-.97 0l-4.4-2.444A8 8 0 0 1 3 13.293V4.72ZM7 15a3 3 0 0 1 3-3h4a3 3 0 0 1 3 3v1.434a1 1 0 0 1-.485.857l-4 2.4a1 1 0 0 1-1.03 0l-4-2.4A1 1 0 0 1 7 16.434V15Zm5-5a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+export default Access24Icon