feat: highlight GitHub links in rose with icon in parsed markdown

Author: rschlaefli

src/globals.css

@@ -19,3 +19,26 @@ html {
 div[role='group'][tabindex] {
   height: 100%;
 }
+
+/* Style GitHub links in rendered markdown content */
+.parsed-text a[href*='github.com'] {
+  color: #f088a5;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.parsed-text a[href*='github.com']:hover {
+  text-decoration: underline;
+}
+
+.parsed-text a[href*='github.com']::before {
+  content: '';
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  margin-right: 0.25em;
+  vertical-align: -0.125em;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F088A5'%3E%3Cpath d='M12 1.27a11 11 0 00-3.48 21.46c.55.09.73-.28.73-.55v-1.84c-3.03.64-3.67-1.46-3.67-1.46-.55-1.29-1.28-1.65-1.28-1.65-.92-.65.1-.65.1-.65 1.1 0 1.73 1.1 1.73 1.1.92 1.65 2.57 1.2 3.21.92a2.16 2.16 0 01.64-1.47c-2.47-.27-5.04-1.19-5.04-5.5 0-1.1.46-2.1 1.2-2.84a3.76 3.76 0 010-2.93s.91-.28 3.11 1.1c1.8-.49 3.7-.49 5.5 0 2.1-1.38 3.02-1.1 3.02-1.1a3.76 3.76 0 010 2.93c.74.74 1.2 1.74 1.2 2.84 0 4.31-2.58 5.23-5.04 5.5.45.37.82.92.82 2.02v3.03c0 .27.18.64.73.55A11 11 0 0012 1.27'/%3E%3C/svg%3E");
+  background-size: contain;
+  background-repeat: no-repeat;
+}

src/lib/mdxParser.tsx

@@ -10,7 +10,7 @@ function ParsedText({ content }: { content: string }) {
     .use(rehypeStringify)
     .processSync(content).value
 
-  return <div dangerouslySetInnerHTML={{ __html: output }} />
+  return <div className="parsed-text" dangerouslySetInnerHTML={{ __html: output }} />
 }
 
 export default ParsedText

src/pages/simplesites/[slug].tsx

@@ -25,46 +25,38 @@ function Simplesite({ simplesite }: { simplesite: SimpleSite }) {
     showContactHint,
     showBackButton,
   } = simplesite
-  let textComponents: React.ReactNode[] = []
   const color = pickColor(title)
 
-  if (textBlocks != null) {
-    const orderedTextBlocks = sortBy(textBlocks, [prop('order'), 'asc'])
-    textComponents = textComponents.concat(
-      orderedTextBlocks.map((block) => (
-        <TextBlock
-          key={block.title}
-          title={block.title}
-          content={<ParsedText content={block.content} />}
-        />
-      ))
-    )
-  }
+  const allBlocks = [
+    ...(textBlocks ?? []).map((b) => ({ type: 'text' as const, order: b.order, data: b })),
+    ...(multiColumnBlocks ?? []).map((b) => ({ type: 'multiColumn' as const, order: b.order, data: b })),
+    ...(gridBlocks ?? []).map((b) => ({ type: 'grid' as const, order: b.order, data: b })),
+  ]
 
-  if (multiColumnBlocks != null) {
-    const orderedMultiColumnBlocks = sortBy(multiColumnBlocks, [
-      prop('order'),
-      'asc',
-    ])
-    textComponents = textComponents.concat(
-      orderedMultiColumnBlocks.map((block) => (
-        <MultiColumnBlock
-          key={block.title}
-          color={color}
-          multiColumnBlock={block}
-        />
-      ))
-    )
-  }
+  const orderedBlocks = sortBy(allBlocks, [prop('order'), 'asc'])
 
-  if (gridBlocks != null) {
-    const orderedGridBlocks = sortBy(gridBlocks, [prop('order'), 'asc'])
-    textComponents = textComponents.concat(
-      orderedGridBlocks.map((block) => (
-        <GridBlock key={block.title} gridBlock={block} />
-      ))
-    )
-  }
+  const textComponents: React.ReactNode[] = orderedBlocks.map((block) => {
+    switch (block.type) {
+      case 'text':
+        return (
+          <TextBlock
+            key={block.data.title}
+            title={block.data.title}
+            content={<ParsedText content={block.data.content} />}
+          />
+        )
+      case 'multiColumn':
+        return (
+          <MultiColumnBlock
+            key={block.data.title}
+            color={color}
+            multiColumnBlock={block.data}
+          />
+        )
+      case 'grid':
+        return <GridBlock key={block.data.title} gridBlock={block.data} />
+    }
+  })
 
   if (showContactHint === 'true') {
     textComponents.push(<ContactHint color={color} />)