mdsvex

README.md

@@ -1,20 +1,13 @@
 # sveltekit-netlify-cms
 
-A preconfigured SvelteKit skeleton app with Netlify CMS living in `/admin`.
+A SvelteKit skeleton app with Netlify CMS living in `/admin`. Netlify CMS is configured to directly edit `/routes/*.md` files, which are preprocessed by [mdsvex](https://mdsvex.com).
 
 <a href="https://app.netlify.com/start/deploy?repository=https://github.com/buhrmi/sveltekit-netlify-cms&amp;stack=cms"><img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify"></a>
 
-## Downloading this template
-
-To download this template, open your command line and run:
-
-```bash
-git pull https://github.com/buhrmi/sveltekit-netlify-cms
-```
 
 ## Developing
 
-Once you've downloaded the template and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+Once you've downloaded this repo and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
 
 ```bash
 npm run dev

mdsvex.config.js

@@ -0,0 +1,14 @@
+const config = {
+  "extensions": [".svelte.md", ".md", ".svx"],
+
+  "smartypants": {
+    "dashes": "oldschool"
+  },
+  "layout": {
+    _: "./src/layouts/default.svelte"
+  },
+  "remarkPlugins": [],
+  "rehypePlugins": []
+};
+
+export default config;

package.json

@@ -1,15 +1,16 @@
 {
-  "name": "~TODO~",
-  "version": "0.0.1",
-  "scripts": {
-    "dev": "svelte-kit dev",
-    "build": "svelte-kit build",
-    "preview": "svelte-kit preview"
-  },
-  "devDependencies": {
-    "@sveltejs/adapter-netlify": "^1.0.0-next.29",
-    "@sveltejs/kit": "next",
-    "svelte": "^3.34.0"
-  },
-  "type": "module"
-}
+	"name": "~TODO~",
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "svelte-kit dev",
+		"build": "svelte-kit build",
+		"preview": "svelte-kit preview"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-netlify": "^1.0.0-next.29",
+		"@sveltejs/kit": "next",
+		"mdsvex": "^0.9.8",
+		"svelte": "^3.34.0"
+	},
+	"type": "module"
+}

src/layouts/default.svelte

@@ -0,0 +1,9 @@
+<script>
+  export let title
+</script>
+
+<svelte:head>
+  <title>{title}</title>
+</svelte:head>
+
+<slot />

src/routes/index.md

@@ -0,0 +1,9 @@
+---
+title: 'Welcome'
+---
+
+# Welcome to the SvelteKit Netlify CMS example
+
+You are viewing the `/routes/index.md` file, which is preprocessed by mdsex and is editable directly through Netlify CMS.
+
+See the [GitHub repo](https://github.com/buhrmi/sveltekit-netlify-cms) for more information.

static/admin/config.yml

@@ -1,17 +1,16 @@
 backend:
   name: git-gateway
   branch: main
-  base_url: https://api.netlify.com
 collections:
-  - name: pages
-    label: Pages
-    folder: content/pages
+  - name: routes
+    label: routes
+    folder: src/routes
     create: true
     fields:
       - name: title
       - name: body
-media_folder: "static/netlify"
-public_folder: "/netlify"
+media_folder: "static/uploads"
+public_folder: "/uploads"
 
 # site_url: https://your-site.com
 # display_url: https://your-site.com

svelte.config.js

@@ -1,6 +1,8 @@
+import { mdsvex } from "mdsvex";
+import mdsvexConfig from "./mdsvex.config.js";
 import adapter from '@sveltejs/adapter-netlify'
 
-export default {
+const config = {
 	kit: {
 		adapter: adapter(), // currently the adapter does not take any options
 		target: '#svelte',
@@ -10,5 +12,9 @@ export default {
 			onError: 'continue',
 			pages: ['*'],
 		},
-	}
-}
+	},
+	extensions: [".svelte", ...mdsvexConfig.extensions],
+	preprocess: [mdsvex(mdsvexConfig)]
+};
+
+export default config;