From 1eb3fc2d74b777055a9739d2cb6fe22585d1bf48 Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <hello@benleonard.co.uk>
Date: Fri, 20 Sep 2024 15:29:06 +0100
Subject: [PATCH 1/2] Fixes callouts not rendering properly

---
 app/components/AsciidocBlocks/Listing.tsx | 34 +++++++++++++++++++++--
 app/components/AsciidocBlocks/index.ts    |  8 +++++-
 app/routes/rfd.$slug.tsx                  |  9 +++++-
 app/styles/lib/asciidoc.css               |  4 +++
 4 files changed, 50 insertions(+), 5 deletions(-)

diff --git a/app/components/AsciidocBlocks/Listing.tsx b/app/components/AsciidocBlocks/Listing.tsx
index 583a098..4631d89 100644
--- 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
 
+  // Function to 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 }
+  }
+
+  // Function to 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
index 22d326d..ae872d8 100644
--- 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
index 5d265e9..b1d8fcb 100644
--- 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
index 5c47912..287b7cb 100644
--- 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;
+  }
 }

From 23436e5ad1650b54f354a0a5978a00d95b66e666 Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <hello@benleonard.co.uk>
Date: Fri, 20 Sep 2024 15:30:51 +0100
Subject: [PATCH 2/2] Comment tweaks

---
 app/components/AsciidocBlocks/Listing.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/AsciidocBlocks/Listing.tsx b/app/components/AsciidocBlocks/Listing.tsx
index 4631d89..7a222b8 100644
--- a/app/components/AsciidocBlocks/Listing.tsx
+++ b/app/components/AsciidocBlocks/Listing.tsx
@@ -79,7 +79,7 @@ const Listing = ({ node }: { node: AdocTypes.Block }) => {
   const content = getContent(node)
   const decodedContent = decode(content) || content // unescape the html entities
 
-  // Function to replace callouts with placeholders
+  // Replace callouts with placeholders
   const replaceCallouts = (content: string) => {
     const calloutRegex = /<i class="conum" data-value="\d+"><\/i>/g
     const callouts: string[] = []
@@ -90,7 +90,7 @@ const Listing = ({ node }: { node: AdocTypes.Block }) => {
     return { placeholderContent, callouts }
   }
 
-  // Function to restore callouts from placeholders
+  // Restore callouts from placeholders
   const restoreCallouts = (highlightedContent: string, callouts: string[]) => {
     return highlightedContent.replace(
       /__CALLOUT_PLACEHOLDER_(\d+)__/g,