From 22587b75e4f5a0b275ed1cce226b2f5d611dc1a9 Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Mon, 4 Sep 2023 16:18:08 -0300
Subject: [PATCH] Add markdown layout component

---
 .gitignore                                    |  8 ++---
 .../Markdown/MarkdownLayout.global.vue        | 35 +++++++++++++++++++
 vite.config.js                                |  3 +-
 3 files changed, 40 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Markdown/MarkdownLayout.global.vue

diff --git a/.gitignore b/.gitignore
index 52fcb2c..30e63a6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,10 +2,10 @@ node_modules
 .DS_Store
 dist
 dist-ssr
-config
-pages
-components
-panels
+/config
+/pages
+/components
+/panels
 public
 README.md
 *.local
diff --git a/src/components/Markdown/MarkdownLayout.global.vue b/src/components/Markdown/MarkdownLayout.global.vue
new file mode 100644
index 0000000..72014a4
--- /dev/null
+++ b/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>
diff --git a/vite.config.js b/vite.config.js
index 789f04f..e734819 100644
--- a/vite.config.js
+++ b/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, {