Merge pull request #67 from oxidecomputer/rough-callout-fix

Fixes callouts not rendering properly
oxidecomputer · Sep 21, 2024 · a675e7d · a675e7d
2 parents b35e57c + 23436e5
commit a675e7d
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 5 deletions.
diff --git a/app/components/AsciidocBlocks/Listing.tsx b/app/components/AsciidocBlocks/Listing.tsx
@@ -79,11 +79,31 @@ const Listing = ({ node }: { node: AdocTypes.Block }) => {
   const content = getContent(node)
   const decodedContent = decode(content) || content // unescape the html entities
 
+  // Replace callouts with placeholders
+  const replaceCallouts = (content: string) => {
+    const calloutRegex = /<i class="conum" data-value="\d+"><\/i>/g
+    const callouts: string[] = []
+    let placeholderContent = content.replace(calloutRegex, (match) => {
+      callouts.push(match)
+      return `__CALLOUT_PLACEHOLDER_${callouts.length - 1}__`
+    })
+    return { placeholderContent, callouts }
+  }
+
+  // Restore callouts from placeholders
+  const restoreCallouts = (highlightedContent: string, callouts: string[]) => {
+    return highlightedContent.replace(
+      /__CALLOUT_PLACEHOLDER_(\d+)__/g,
+      (_, index) => callouts[parseInt(index)],
+    )
+  }
+
+  const { placeholderContent, callouts } = replaceCallouts(decodedContent)
+
   // Listing blocks of style `source` are source code, should have their syntax
   // highlighted (where we have language support) and be inside both a `pre` and `code` tag
   if (node.getStyle() === 'source') {
     const lang = attrs.language
-
     return (
       <div className="listingblock" {...getLineNumber(node)}>
         <CaptionedTitle node={node} />
@@ -98,7 +118,10 @@ const Listing = ({ node }: { node: AdocTypes.Block }) => {
                 dangerouslySetInnerHTML={{
                   __html:
                     (hljs.getLanguage(lang) &&
-                      hljs.highlight(decodedContent, { language: lang }).value) ||
+                      restoreCallouts(
+                        hljs.highlight(placeholderContent, { language: lang }).value,
+                        callouts,
+                      )) ||
                     decodedContent,
                 }}
               />
@@ -113,7 +136,12 @@ const Listing = ({ node }: { node: AdocTypes.Block }) => {
       <div className="listingblock" {...getLineNumber(node)}>
         <CaptionedTitle node={node} />
         <div className="content">
-          <pre className={nowrap ? ' nowrap' : ''}>{node.getSource()}</pre>
+          <pre
+            className={cn('highlight !block', nowrap ? 'nowrap' : '')}
+            dangerouslySetInnerHTML={{
+              __html: restoreCallouts(placeholderContent, callouts),
+            }}
+          />
         </div>
       </div>
     )

diff --git a/app/components/AsciidocBlocks/index.ts b/app/components/AsciidocBlocks/index.ts
@@ -69,4 +69,10 @@ const convertInlineQuoted = (node: AdocTypes.Inline) => {
   }
 }
 
-export { ui, convertInlineQuoted }
+function convertInlineCallout(node: AdocTypes.Inline): string {
+  let text = getText(node)
+
+  return `<i class="conum" data-value="${text}"></i>`
+}
+
+export { ui, convertInlineQuoted, convertInlineCallout }
diff --git a/app/routes/rfd.$slug.tsx b/app/routes/rfd.$slug.tsx
@@ -21,7 +21,12 @@ import { Fragment, Suspense, useMemo } from 'react'
 import { renderToString } from 'react-dom/server'
 import { ClientOnly } from 'remix-utils'
 
-import { convertInlineQuoted, opts, ui } from '~/components/AsciidocBlocks'
+import {
+  convertInlineCallout,
+  convertInlineQuoted,
+  opts,
+  ui,
+} from '~/components/AsciidocBlocks'
 import Image from '~/components/AsciidocBlocks/Image'
 import Container from '~/components/Container'
 import Header from '~/components/Header'
@@ -55,6 +60,8 @@ class InlineConverter {
         return renderToString(<Image node={node} hasLightbox={false} />)
       case 'inline_quoted':
         return convertInlineQuoted(node as unknown as AdocTypes.Inline) // We know this is always inline
+      case 'inline_callout':
+        return convertInlineCallout(node as unknown as AdocTypes.Inline) // We know this is always inline
       default:
         break
     }

diff --git a/app/styles/lib/asciidoc.css b/app/styles/lib/asciidoc.css
@@ -69,4 +69,8 @@
   .asciidoc-body .admonition-content > div:first-of-type {
     @apply text-sans-semi-md;
   }
+
+  .asciidoc-body pre .conum[data-value] {
+    @apply text-accent bg-accent-secondary-hover;
+  }
 }