feat(website):Add mdx to Astro and configure for it. (#1354)

* add mdx

* update

* update

* add special theming

* update

* update

* updates

* update

* update

* css changes

* format

* fix package lock

website/astro.config.mjs

@@ -3,11 +3,12 @@ import node from '@astrojs/node';
 import tailwind from '@astrojs/tailwind';
 import Icons from 'unplugin-icons/vite';
 import react from '@astrojs/react';
+import mdx from '@astrojs/mdx';
 
 // https://astro.build/config
 export default defineConfig({
     output: 'server',
-    integrations: [tailwind(), react()],
+    integrations: [tailwind(), react(), mdx()],
     adapter: node({
         mode: 'standalone',
     }),

website/package.json

@@ -18,6 +18,7 @@
     "e2e:headed": "npx playwright test --headed"
   },
   "dependencies": {
+    "@astrojs/mdx": "^1.1.5",
     "@astrojs/node": "^6.1.0",
     "@emotion/react": "^11.11.4",
     "@headlessui/react": "^1.7.18",

website/src/layouts/MdLayout.astro

@@ -0,0 +1,12 @@
+---
+import '../styles/mdcontainer.scss';
+import BaseLayout from './BaseLayout.astro';
+
+const { frontmatter } = Astro.props;
+---
+
+<BaseLayout title={frontmatter.title}>
+    <div class='mdContainer'>
+        <slot />
+    </div>
+</BaseLayout>

website/src/pages/governance/index.mdx

@@ -0,0 +1,23 @@
+---
+layout: ../../layouts/MdLayout.astro
+title: "Governance"
+---
+
+
+# Governance
+
+
+Governance page goes here
+
+<b>Bold</b>
+
+_italic_  etc.
+
+```
+code blocks
+are great
+```
+
+and `commands`
+
+[Link](http://google.com)

website/src/styles/base.scss

@@ -93,4 +93,4 @@ table, tr, td {
 
   border-radius: 1rem;
   display:flex
-}
+}

website/src/styles/mdcontainer.scss

@@ -0,0 +1,25 @@
+
+.mdContainer{
+    @apply max-w-3xl mx-auto;
+  }
+
+  .mdContainer h1{
+    @apply text-2xl font-semibold text-main break-all my-3;
+  }
+
+  .mdContainer h2{
+    @apply text-xl font-semibold text-main break-all my-3;
+  }
+
+  .mdContainer h3{
+    @apply text-lg font-semibold text-main break-all my-3;
+
+  }
+
+  .mdContainer p{
+    @apply my-2;
+  }
+
+  .mdContainer a{
+    @apply text-main underline hover:font-semibold;
+  }