💄 redesign page, use vector maps

.env

@@ -0,0 +1 @@
+SCAVENGER_HUNT_DISABLED=true

.prettierrc

@@ -4,5 +4,6 @@
   "singleQuote": true,
   "jsxSingleQuote": false,
   "endOfLine": "lf",
-  "singleAttributePerLine": true
+  "singleAttributePerLine": true,
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

.vscode/settings.json

@@ -4,5 +4,14 @@
   "editor.formatOnPaste": true,
   "[javascript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "typescript.preferences.importModuleSpecifier": "non-relative",
+  "files.associations": {
+    "*.css": "tailwindcss"
+  },
+  "editor.quickSuggestions": {
+    "other": "on",
+    "comments": "off",
+    "strings": "on"
   }
 }

components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

components/guide/glossaryAccordion.tsx

@@ -0,0 +1,44 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion'
+import { COMPONENTS } from '@/components/ui/markdownComponents'
+import ReactMarkdown from 'react-markdown'
+
+export interface GlossaryItem {
+  title: string
+  content: string
+}
+
+interface GlossaryAccordionProps {
+  glossary: GlossaryItem[]
+}
+
+export default function GlossaryAccordion({
+  glossary,
+}: GlossaryAccordionProps) {
+  return (
+    <Accordion
+      type="single"
+      collapsible
+    >
+      {glossary.map((item) => (
+        <AccordionItem
+          value={item.title}
+          key={item.title}
+        >
+          <AccordionTrigger className="max-w-full py-6">
+            <div className="truncate pr-6">{item.title}</div>
+          </AccordionTrigger>
+          <AccordionContent className="text-base">
+            <ReactMarkdown components={COMPONENTS}>
+              {item.content}
+            </ReactMarkdown>
+          </AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  )
+}