chore(docs): update code components to use css modules

packages/dev-utils/src/indexer/parseMarkdown.ts

@@ -1,5 +1,5 @@
 import { decode } from "he";
-import marked from "marked";
+import { parse, Renderer } from "marked";
 
 import { getPackages } from "../utils";
 import { TOCAnchor } from "./types";
@@ -16,7 +16,7 @@ const whitespace = "(?=\r?\n| |[^/])";
 export function parseMarkdown(markdown: string): MarkdownResult {
   const joinedNames = getPackages().join("|");
   const anchors: TOCAnchor[] = [];
-  const renderer = new marked.Renderer({ gfm: true, sanitize: false });
+  const renderer = new Renderer({ gfm: true, sanitize: false });
   renderer.heading = (text, _level, _raw, slugger) => {
     // if it is over 60 characters, it is probably not really a title
     const isNoMargin = text.includes("<!-- no-margin -->");
@@ -106,7 +106,7 @@ export function parseMarkdown(markdown: string): MarkdownResult {
       /#customizing-your-theme/g,
       "[customizing your theme](/guides/customizing-your-theme)"
     );
-  marked.parse(updated, { renderer });
+  parse(updated, { renderer });
 
   return {
     anchors,

packages/documentation/.babelrc

@@ -7,16 +7,18 @@
       {
         "languages": [
           "javascript",
-          "typescript",
           "jsx",
+          "typescript",
           "tsx",
           "css",
           "scss",
           "css-extras",
           "markup",
+          "markdown",
           "bash",
-          "diff",
+          "shell",
           "git",
+          "diff",
           "json",
           "properties"
         ],

packages/documentation/src/components/Blockquote.module.scss

@@ -0,0 +1,22 @@
+@use '../everything' as *;
+
+.blockquote {
+  $border-style: 0.25em solid rmd-divider-theme-var(background-color);
+
+  @include rmd-theme(color, text-secondary-on-background);
+  @include rmd-typography(subtitle-1);
+  @include rmd-utils-rtl-auto(border-left, $border-style);
+
+  font-style: italic;
+  margin: 1em 0;
+  padding: 0.5em 1em;
+  position: relative;
+
+  p:only-child {
+    margin: 0;
+  }
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+}

packages/documentation/src/components/Code/Code.module.scss

@@ -0,0 +1,23 @@
+@use '../../everything' as *;
+
+.code {
+  @include rmd-typography(body-1);
+
+  font-family: 'Source Code Pro', Consolas, Monaco, monospace;
+}
+
+.inline {
+  color: var(--code-color);
+  white-space: pre-wrap;
+}
+
+.ticked {
+  &::before,
+  &::after {
+    content: '\`';
+  }
+}
+
+.oneline {
+  white-space: nowrap;
+}

packages/documentation/src/components/Code/Code.tsx

@@ -1,29 +1,64 @@
-import React, { forwardRef, HTMLAttributes, ReactNode } from "react";
+import React, { forwardRef, HTMLAttributes } from "react";
 import cn from "classnames";
 
+import styles from "./Code.module.scss";
+
 export interface CodeProps extends HTMLAttributes<HTMLElement> {
-  className?: string;
-  children: ReactNode;
+  /**
+   * Boolean if the code is displayed inline with other text normally meaning it
+   * is not a child of the `CodeBlock` component.
+   *
+   * @defaultValue `true` when the `dangerouslySetInnerHTML` prop is not defined
+   */
   inline?: boolean;
+
+  /**
+   * Boolean if the code should no be able to line wrap. This should really only
+   * be enabled when the parent element also has `white-space: nowrap` and
+   * overflown text should be ellipsis-ed
+   *
+   * @defaultValue `false`
+   */
   noWrap?: boolean;
+
+  /**
+   * Boolean if the code should display backticks before and after the content
+   * to help show that this is a code block.
+   *
+   * @defaultValue `true` when the `dangerouslySetInnerHTML` prop is not define
+   */
+  ticked?: boolean;
 }
 
+/**
+ * This component is normally used to render inline code throughout the website.
+ */
 export default forwardRef<HTMLElement, CodeProps>(function Code(
-  { inline = true, noWrap = false, className, children, ...props },
+  {
+    children,
+    className,
+    dangerouslySetInnerHTML,
+    inline = !dangerouslySetInnerHTML,
+    ticked = inline,
+    noWrap = false,
+    ...props
+  },
   ref
 ) {
   return (
     <code
       {...props}
       ref={ref}
       className={cn(
-        "code",
+        styles.code,
         {
-          "code--inline": inline,
-          "code--no-wrap": inline && noWrap,
+          [styles.inline]: inline,
+          [styles.ticked]: ticked,
+          [styles.oneline]: inline && noWrap,
         },
         className
       )}
+      dangerouslySetInnerHTML={dangerouslySetInnerHTML}
     >
       {children}
     </code>

packages/documentation/src/components/Code/CodeBlock.module.scss

@@ -0,0 +1,112 @@
+@use '../../everything' as *;
+
+.block {
+  @include rmd-typography(body-1);
+
+  background-color: $solarized-base-03;
+  color: $solarized-base-1;
+
+  // always enforce ltr for blocked code
+  direction: ltr;
+  font-family: 'Source Code Pro', Consolas, Monaco, monospace;
+  margin: 0.5em 0;
+  overflow: auto;
+  padding: 1em;
+
+  &::selection,
+  *::selection {
+    background-color: $solarized-base-02;
+  }
+
+  // to help with the collapse transition on expandable code, update it so
+  // that only the vertical overflow is hidden.
+  &.rmd-collapse--no-overflow {
+    overflow-y: hidden;
+  }
+
+  // prismjs custom theme
+  // this is _basically_ my current vim theme, but not aas good since
+  // Prism doesn't have as many tokenizers
+  :global {
+    .token {
+      position: relative;
+      z-index: 1;
+
+      &.comment,
+      &.doctype {
+        color: $solarized-base-01;
+      }
+
+      &.keyword {
+        color: $solarized-green;
+      }
+
+      &.punctuation {
+        color: $solarized-base-01;
+      }
+
+      &.inserted,
+      &.string,
+      .language-tsx &.attr-value {
+        color: $solarized-cyan;
+      }
+
+      &.tag,
+      &.selector,
+      &.class-name {
+        color: $solarized-blue;
+      }
+
+      &.attr-name,
+      &.property,
+      &.builtin {
+        color: $solarized-yellow;
+      }
+
+      &.script,
+      &.interpolation {
+        color: $solarized-base-1;
+      }
+
+      &.deleted,
+      &.boolean,
+      &.number,
+      &.interpolation-punctuation {
+        color: $solarized-red;
+      }
+
+      &.important,
+      &.bold {
+        font-weight: map-get($rmd-typography-font-weights, bold);
+      }
+
+      &.italic {
+        font-style: italic;
+      }
+
+      &.entity {
+        cursor: help;
+      }
+    }
+  }
+
+  &:global(.language-scss) :global .token.function,
+  &:global(.language-scss) :global .token.variable {
+    color: $solarized-blue;
+  }
+
+  &:global(.language-ts) :global .token + .class-name,
+  &:global(.language-tsx) :global .token + .class-name {
+    color: $solarized-base-1;
+  }
+
+  &:global(.language-scss) :global .token.function,
+  &:global(.language-shell) :global .token.function {
+    color: $solarized-orange;
+  }
+}
+
+.counted {
+  padding-left: 3em;
+  position: relative;
+}