Add Remark to make descriptions render Markdown

Author: Mark Otto

package-lock.json

@@ -168,6 +168,8 @@
     "prettier": "^2.8.4",
     "prettier-plugin-astro": "^0.8.0",
     "rehype-autolink-headings": "^6.1.1",
+    "remark": "^15.0.1",
+    "remark-html": "^16.0.1",
     "rollup": "^4.38.0",
     "rollup-plugin-istanbul": "^5.0.0",
     "rtlcss": "^4.3.0",
@@ -179,6 +181,7 @@
     "terser": "^5.39.0",
     "unist-util-visit": "^4.1.2",
     "vnu-jar": "24.10.17",
+    "yaml": "^2.7.0",
     "zod": "^3.20.6"
   },
   "files": [

package.json

@@ -1,6 +1,6 @@
 ---
 title: Form controls
-description: Give textual form controls like <input>s and <textarea>s an upgrade with custom styles, sizing, focus states, and more.
+description: Give textual form controls like `<input>`s and `<textarea>`s an upgrade with custom styles, sizing, focus states, and more.
 toc: true
 ---
 

site/src/content/docs/forms/form-control.mdx

@@ -3,7 +3,7 @@ import type { MarkdownHeading } from 'astro'
 import type { CollectionEntry } from 'astro:content'
 import { getConfig } from '@libs/config'
 import type { LayoutOverridesHTMLAttributes } from '@libs/layout'
-import { getSlug } from '@libs/utils'
+import { getSlug, processMarkdownToHtml } from '@libs/utils'
 import { getVersionedDocsPath } from '@libs/path'
 import Ads from '@components/Ads.astro'
 import BaseLayout from '@layouts/BaseLayout.astro'
@@ -75,9 +75,9 @@ if (frontmatter.toc) {
           </div>
           <h1 class="bd-title mb-0" id="content">{frontmatter.title}</h1>
         </div>
-        <p class="bd-lead">
-          {frontmatter.description && <Fragment set:html={frontmatter.description} />}
-        </p>
+        <div class="bd-subtitle">
+          {frontmatter.description && <Fragment set:html={processMarkdownToHtml(frontmatter.description)} />}
+        </div>
         <Ads />
       </div>
 

site/src/layouts/DocsLayout.astro

@@ -1,6 +1,8 @@
 import { slug } from 'github-slugger'
 import fromMarkdown from 'mdast-util-from-markdown'
 import toString from 'mdast-util-to-string'
+import { remark } from 'remark'
+import remarkHtml from 'remark-html'
 
 export function capitalizeFirstLetter(str: string) {
   return str.charAt(0).toUpperCase() + str.slice(1)
@@ -34,3 +36,11 @@ export function trimLeadingAndTrailingSlashes(str: string) {
 export function stripMarkdown(str: string) {
   return toString(fromMarkdown(str))
 }
+
+export function processMarkdownToHtml(markdown: string): string {
+  // Use remark to process markdown to HTML
+  const result = remark()
+    .use(remarkHtml)
+    .processSync(markdown)
+  return result.toString()
+}

site/src/libs/utils.ts

@@ -106,7 +106,7 @@
   @include font-size(3rem);
 }
 
-.bd-lead {
+.bd-subtitle {
   @include font-size(1.5rem);
   font-weight: 300;
 }