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

@@ -1,8 +1,10 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
-	theme: {
+  theme: {
-		extend: {},
+    extend: {},
-	},
+  },
-	plugins: [],
+  plugins: [
-}
+    require('@tailwindcss/typography'),
+  ],
+};