Add layout for Markdown files

package.json

@@ -12,7 +12,10 @@
   "dependencies": {
     "@astrojs/image": "^0.17.0",
     "@astrojs/tailwind": "^4.0.0",
-    "astro": "^2.6.6",
+    "astro": "^2.7.0",
     "tailwindcss": "^3.3.2"
+  },
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.9"
   }
 }

src/layouts/MarkdownFileLayout.astro

@@ -0,0 +1,12 @@
+---
+import Layout from './Layout.astro';
+const {frontmatter} = Astro.props;
+---
+
+<Layout title={frontmatter.title}>
+    <main class="w-screen min-h-screen bg-gray-400 p-10">
+        <article class="container bg-gray-300 mx-auto p-5 prose lg:prose-xl rounded-md shadow-2xl">
+            <slot/>
+        </article>
+    </main>
+</Layout>

src/pages/doc/index.md

@@ -0,0 +1,7 @@
+---
+title: Getting Start
+layout: ../../layouts/MarkdownFileLayout.astro
+---
+
+# Getting Start
+

src/pages/documentation/index.md

@@ -1,2 +0,0 @@
-# Getting Start
-

src/pages/index.astro

@@ -2,7 +2,6 @@
 import Layout from '../layouts/Layout.astro';
 import {WidgetState} from '../models/WidgetState';
 import WidgetCardList from '../components/WidgetCardList.astro';
-import Card from '../layouts/Card.astro';
 
 const widgets = await Astro.glob<WidgetState>('./widgets/*.astro');
 ---

tailwind.config.cjs

@@ -4,5 +4,7 @@ module.exports = {
   theme: {
     extend: {},
   },
-	plugins: [],
-}
+  plugins: [
+    require('@tailwindcss/typography'),
+  ],
+};