fix faq styling

frontend/packages/data-portal/app/components/MDX/MdxAccordion.module.css

@@ -0,0 +1,184 @@
+/* stylelint-disable selector-class-pattern */
+
+.accordion {
+  h2 {
+    @apply text-sds-header-xs leading-sds-header-xs font-semibold;
+    @apply mt-sds-l mb-sds-xxs;
+  }
+
+  h3 {
+    @apply text-sds-header-xxs leading-sds-header-xxs font-semibold;
+    @apply mt-sds-m mb-sds-xxxs;
+  }
+
+  p:not(:first-child) {
+    @apply mt-sds-m;
+  }
+
+  section {
+    &:has(> h2) {
+      @apply text-sds-body-xs leading-sds-body-xs;
+    }
+
+    &:has(> h3) {
+      @apply text-sds-body-xxs leading-sds-body-xxs;
+    }
+  }
+
+  ul {
+    @apply list-disc;
+  }
+
+  ol {
+    @apply list-decimal;
+  }
+
+  ul,
+  ol {
+    @apply space-y-sds-xs ml-4;
+
+    &:not(:first-child) {
+      @apply mt-sds-m;
+    }
+  }
+
+  a {
+    @apply text-sds-info-400;
+  }
+
+  table {
+    @apply table-auto;
+    @apply text-sds-body-s;
+    @apply mx-sds-s;
+
+    :not(:first-child) {
+      @apply mt-sds-l;
+    }
+
+    > thead > tr {
+      @apply border-b-2;
+      @apply border-sds-gray-300;
+
+      @apply font-sds-semibold font-semibold;
+      @apply uppercase;
+      @apply text-sds-gray-600;
+    }
+
+    th,
+    td {
+      @apply py-sds-l px-sds-xl;
+    }
+  }
+
+  code {
+    font-family: 'Andale Mono', monospace;
+    @apply text-sds-body-s leading-sds-body-s;
+    @apply p-sds-xxxs;
+    @apply bg-sds-gray-100;
+    @apply rounded-sds-m;
+    border: 0.5px solid theme('colors.gray.300');
+    @apply whitespace-nowrap;
+
+    font-size: inherit;
+  }
+
+  pre {
+    @apply p-sds-m;
+    @apply bg-sds-gray-100;
+    @apply rounded-sds-m;
+    border: 0.5px solid theme('colors.gray.300');
+    @apply overflow-x-scroll;
+
+    &:not(:first-child) {
+      @apply mt-sds-m;
+    }
+
+    code {
+      @apply p-0;
+      @apply border-none;
+      @apply whitespace-pre;
+    }
+  }
+
+  :global {
+    .token {
+      &.comment,
+      &.prolog,
+      &.doctype,
+      &.cdata {
+        color: #708090;
+      }
+
+      &.punctuation {
+        color: #999;
+      }
+
+      &.namespace {
+        opacity: 0.7;
+      }
+
+      &.property,
+      &.tag,
+      &.boolean,
+      &.number,
+      &.constant,
+      &.symbol,
+      &.deleted {
+        color: #905;
+      }
+
+      &.selector,
+      &.attr-name,
+      &.string,
+      &.char,
+      &.builtin,
+      &.inserted {
+        color: #690;
+      }
+
+      &.operator,
+      &.entity,
+      &.url,
+      .language-css .token.string,
+      .style .token.string {
+        color: #9a6e3a;
+        /* This background color was intended by the author of this theme. */
+        background: hsla(0, 0%, 100%, 0.5);
+      }
+
+      &.atrule,
+      &.attr-value,
+      &.keyword {
+        color: #07a;
+      }
+
+      &.function {
+        color: #5361f9;
+      }
+
+      &.class-name {
+        color: #f95353;
+      }
+
+      &.regex,
+      &.important,
+      &.variable {
+        color: #e90;
+      }
+
+      &.important,
+      &.bold {
+        font-weight: bold;
+      }
+
+      &.italic {
+        font-style: italic;
+      }
+
+      &.entity {
+        cursor: help;
+      }
+    }
+  }
+}
+/* stylelint-enable selector-class-pattern */

frontend/packages/data-portal/app/components/MDX/MdxAccordion.tsx

@@ -5,7 +5,7 @@ import {
 } from '@czi-sds/components'
 import { ReactNode } from 'react'
 
-import styles from './MdxAccodion.module.css'
+import styles from './MdxAccordion.module.css'
 
 export function MdxAccordion({
   children,

frontend/packages/data-portal/app/components/MDX/MdxCode.tsx

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react'
+
+export function MdxClass({ children }: { children: ReactNode }) {
+  return <span className="token class-name">{children}</span>
+}
+
+export function MdxFunction({ children }: { children: ReactNode }) {
+  return <span className="token function">{children}</span>
+}
+
+export function MdxOperator({ children }: { children: ReactNode }) {
+  return <span className="token operator">{children}</span>
+}
+
+export function MdxPunctuation({ children }: { children: ReactNode }) {
+  return <span className="token punctuation">{children}</span>
+}
+
+export function MdxString({ children }: { children: ReactNode }) {
+  return <span className="token string">{children}</span>
+}

frontend/packages/data-portal/app/components/MDX/MdxContent.tsx

@@ -4,6 +4,13 @@ import { useMdxFile } from 'app/hooks/useMdxFile'
 
 import { MdxAccordion } from './MdxAccordion'
 import { MdxBody } from './MdxBody'
+import {
+  MdxClass,
+  MdxFunction,
+  MdxOperator,
+  MdxPunctuation,
+  MdxString,
+} from './MdxCode'
 import { MdxEmail } from './MdxEmail'
 import { MdxPageTitle } from './MdxPageTitle'
 
@@ -18,7 +25,12 @@ export function MdxContent() {
           components={{
             Accordion: MdxAccordion,
             Body: MdxBody,
+            Class: MdxClass,
             Email: MdxEmail,
+            Function: MdxFunction,
+            Str: MdxString,
+            Op: MdxOperator,
+            Punc: MdxPunctuation,
             PageTitle: MdxPageTitle,
           }}
         />

frontend/packages/data-portal/app/root.tsx

@@ -102,6 +102,8 @@ const Document = withEmotionCache(
             rel="stylesheet"
           />
 
+          <link href="/fonts/ANDALEMO.ttf" rel="stylesheet" />
+
           <meta
             name="emotion-insertion-point"
             content="emotion-insertion-point"

frontend/packages/data-portal/app/utils/repo.server.ts

@@ -1,8 +1,10 @@
+import rehypePrism from '@mapbox/rehype-prism'
 import { AxiosResponse } from 'axios'
 import { readFileSync } from 'fs'
 import { serialize } from 'next-mdx-remote/serialize'
 import { Octokit } from 'octokit'
 import { dirname, resolve } from 'path'
+import remarkGfm from 'remark-gfm'
 import sectionize from 'remark-sectionize'
 import { typedjson } from 'remix-typedjson'
 import { fileURLToPath } from 'url'
@@ -41,7 +43,8 @@ async function serializeMdx(content: string, lastModified: Date | null) {
     lastModified,
     content: await serialize(content, {
       mdxOptions: {
-        remarkPlugins: [sectionize],
+        remarkPlugins: [sectionize, remarkGfm],
+        rehypePlugins: [rehypePrism],
       },
     }),
   })

frontend/packages/data-portal/package.json

@@ -36,6 +36,7 @@
     "@graphql-codegen/cli": "^5.0.0",
     "@graphql-codegen/client-preset": "^4.1.0",
     "@graphql-typed-document-node/core": "^3.2.0",
+    "@mapbox/rehype-prism": "^0.9.0",
     "@mui/base": "^5.0.0-beta.19",
     "@mui/icons-material": "^5.14.13",
     "@mui/lab": "^5.0.0-alpha.148",
@@ -74,6 +75,7 @@
     "react-i18next": "^13.5.0",
     "react-is": "^18.2.0",
     "react-transition-group": "^4.4.5",
+    "remark-gfm": "<4.0.0",
     "remark-sectionize": "^2.0.0",
     "remix-i18next": "^5.4.0",
     "remix-typedjson": "^0.2.2",
@@ -94,6 +96,7 @@
     "@types/jest": "^29.5.5",
     "@types/lodash": "^4.14.199",
     "@types/lodash-es": "^4.17.9",
+    "@types/mapbox__rehype-prism": "^0.8.3",
     "@types/morgan": "^1.9.6",
     "@types/node": "^20.8.4",
     "@types/react": "^18.2.28",