refactor: yay fixed stuffs

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+    "tailwindCSS.emmetCompletions": true,
+    "files.associations": {
+        "*.css": "tailwindcss"
+    },
+    "editor.quickSuggestions": {
+        "strings": "on"
+    }
+}

package.json

@@ -16,6 +16,7 @@
     "@sveltejs/adapter-static": "^3.0.2",
     "@sveltejs/kit": "^2.5.20",
     "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@tailwindcss/typography": "^0.5.14",
     "@types/eslint": "^8.56.11",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.8.0",
@@ -39,5 +40,8 @@
   "dependencies": {
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0"
-  }
+  },
+  "trustedDependencies": [
+    "svelte-preprocess"
+  ]
 }

src/routes/+layout.svelte

@@ -1,5 +1,5 @@
-<script>
-    import "../app.postcss";
+<script lang="ts">
+    import "../app.css";
 </script>
   
 <slot />

src/routes/posts/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { PostData } from './+page.js';
+	import type { PostData } from './+page.ts';
 
 	export let data;
 

src/routes/posts/_layout.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+    import "../../app.css";
+
+    export let title;
+    export let author;
+    export let date;
+</script>
+
+<div class="prose lg:prose-lg">
+    <h1 class="font-mono">{ title }</h1>
+    <ul>on: { date }</ul>
+    <ul>by: { author }</ul>
+    <slot/>
+</div>

src/routes/posts/hello-world/+page.md

@@ -2,6 +2,7 @@
 title: Hello World
 author: Jeff
 date: 2022-05-27
+layout: blogpost
 excerpt: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget massa sit amet arcu varius lacinia nec quis lacus.
 ---
 

svelte.config.js

@@ -18,7 +18,10 @@ const config = {
 				rehypeAutolinkHeadings,
 			],
 			smartypants: { dashes: 'oldschool' },
-			layout: './src/routes/+layout.svelte',
+			layout: {
+				_: './src/routes/+layout.svelte',
+				blogpost: './src/routes/posts/_layout.svelte',
+			},
 		}),
 	],
 

tailwind.config.js

@@ -1,9 +1,11 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: ['./src/**/*.{html,js,svelte,ts}'],
+  content: ['./src/**/*.{html,js,svelte,ts,md}'],
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [
+    require('@tailwindcss/typography')
+  ],
 }