Add markdown layout component

.gitignore

@@ -2,10 +2,10 @@ node_modules
 .DS_Store
 dist
 dist-ssr
-config
-pages
-components
-panels
+/config
+/pages
+/components
+/panels
 public
 README.md
 *.local

src/components/Markdown/MarkdownLayout.global.vue

@@ -0,0 +1,35 @@
+<template>
+  <component
+    :is="tag"
+    :class="layoutClasses"
+  >
+    <slot />
+  </component>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  tag: {
+    type: String,
+    default: 'div'
+  },
+
+  frontmatter: {
+    type: Object,
+    required: true
+  }
+})
+
+const LAYOUT_CLASSES = {
+  fullwidth: 'p-4 sm:px-0 prose dark:prose-invert max-w-none'
+}
+
+const DEFAULT_LAYOUT =
+  '!container mx-auto p-4 sm:px-0 prose dark:prose-invert box-border'
+
+const layoutClasses = computed(
+  () => LAYOUT_CLASSES[props.frontmatter.layout] || DEFAULT_LAYOUT
+)
+</script>

vite.config.js

@@ -32,8 +32,7 @@ export default () => {
       }),
 
       Markdown({
-        wrapperClasses:
-          '!container mx-auto p-4 sm:pl-0 sm:pr-0 prose dark:prose-invert box-border',
+        wrapperComponent: 'markdown-layout',
         markdownItSetup(md) {
           md.use(markdownAnchor)
           md.use(variableReplacementPlugin, {