|
| 1 | +--- |
| 2 | +type: podcast |
| 3 | +authors: |
| 4 | + - alex-patterson |
| 5 | +episode: 16 |
| 6 | +recording_date: May 4, 2023 2:15 PM |
| 7 | +season: 3 |
| 8 | +published: published |
| 9 | +podcast: CodingCat.dev |
| 10 | +chapters_done: true |
| 11 | +cloudinary_convert: false |
| 12 | +cover: https://media.codingcat.dev/image/upload/v1683829447/main-codingcatdev-photo/MDSvex-with-pngwn.jpg |
| 13 | +devto: |
| 14 | +excerpt: 'Pngwn joins Alex to show discuss his program MDSvex and to walk Alex through how to use it on his own Coding Cat site.' |
| 15 | +guests: |
| 16 | + - pngwn |
| 17 | +hashnode: |
| 18 | +picks: |
| 19 | + [ |
| 20 | + { author: 'pngwn', name: 'Hugging Face', site: 'https://huggingface.co/chat/' }, |
| 21 | + { author: 'pngwn', name: 'Open Assitant', site: 'https://open-assistant.io/' }, |
| 22 | + { author: 'alex-patterson', name: 'Xata', site: 'https://xata.io' } |
| 23 | + ] |
| 24 | +slug: 3-16-MDSvex-with-pngwn |
| 25 | +sponsors: |
| 26 | + - storyblok |
| 27 | +spotify: https://open.spotify.com/episode/2dkxDnNqCPvsOwBTUhu0bD?si=_wknx6m5RVa4r1q0uTyvew |
| 28 | +start: June 14, 2023 |
| 29 | +title: 'MDSvex with pngwn' |
| 30 | +youtube: https://youtu.be/0ukXs_xUbJ8 |
| 31 | +--- |
| 32 | + |
| 33 | +<script lang="ts"> |
| 34 | + import Button from '$lib/components/content/Button.svelte' |
| 35 | +</script> |
| 36 | + |
| 37 | +## What is mdsvex |
| 38 | + |
| 39 | +[mdsvex](https://mdsvex.pngwn.io/) is a file format that combines the best of Markdown and Svelte. It allows you to write content in Markdown, but also includes the ability to embed Svelte components into your posts. This can be useful for adding interactive elements to your blog, such as polls, quizzes, and code editors. |
| 40 | + |
| 41 | +### Benefits of using mdsvex |
| 42 | + |
| 43 | +There are several benefits to using mdsvex: |
| 44 | + |
| 45 | +- **Simplicity:** mdsvex files are just regular Markdown files, with the addition of the `.svx` extension. This means that you can use any Markdown editor to write your posts, and you don't need to learn any new syntax. |
| 46 | +- **Power:** Svelte is a powerful JavaScript framework that allows you to create interactive web components. With mdsvex, you can embed these components directly into your Markdown posts. This opens up a whole new range of possibilities for your blog. |
| 47 | +- **Flexibility:** mdsvex is compatible with any SvelteKit project. This means that you can use it to create a blog from scratch, or to add interactive elements to an existing blog. |
| 48 | + |
| 49 | +### How to use mdsvex |
| 50 | + |
| 51 | +To use mdsvex, you first need to install the `mdsvex` package. You can do this with npm or yarn: |
| 52 | + |
| 53 | +```sh |
| 54 | +npm install mdsvex |
| 55 | +``` |
| 56 | + |
| 57 | +```sh |
| 58 | +yarn add mdsvex |
| 59 | +``` |
| 60 | + |
| 61 | +Once you have installed the package, you need to add it to your SvelteKit project's `svelte.config.js` file: |
| 62 | + |
| 63 | +```ts |
| 64 | +import mdsvex from 'mdsvex'; |
| 65 | + |
| 66 | +export default { |
| 67 | + plugins: [mdsvex()] |
| 68 | +}; |
| 69 | +``` |
| 70 | + |
| 71 | +CodingCat.dev's `svelte.config.js` |
| 72 | + |
| 73 | +```ts |
| 74 | +import preprocess from 'svelte-preprocess'; |
| 75 | +import adapter from '@sveltejs/adapter-auto'; |
| 76 | +import { mdsvex } from 'mdsvex'; |
| 77 | + |
| 78 | +// TODO: remove .svx and .md from production builds |
| 79 | + |
| 80 | +/** @type {import('@sveltejs/kit').Config} */ |
| 81 | +console.log(`Using ${process.env.NODE_ENV} config`); |
| 82 | +const config = { |
| 83 | + kit: { |
| 84 | + adapter: adapter(), |
| 85 | + prerender: { |
| 86 | + handleMissingId: 'warn', |
| 87 | + handleHttpError: ({ path, referrer, message }) => { |
| 88 | + // if nothing refers to it we don't care |
| 89 | + // most likely this is a draft in production |
| 90 | + // TODO: can we make this better? |
| 91 | + if (referrer === null) { |
| 92 | + console.debug('SKIPPING 404 ISSUE', path); |
| 93 | + return; |
| 94 | + } |
| 95 | + |
| 96 | + // otherwise fail the build |
| 97 | + throw new Error(message); |
| 98 | + } |
| 99 | + } |
| 100 | + }, |
| 101 | + extensions: ['.svelte', '.svx', '.md'], |
| 102 | + preprocess: [ |
| 103 | + mdsvex({ extensions: ['.svx', '.md'] }), |
| 104 | + preprocess({ |
| 105 | + postcss: true |
| 106 | + }) |
| 107 | + ] |
| 108 | +}; |
| 109 | + |
| 110 | +export default config; |
| 111 | +``` |
| 112 | + |
| 113 | +Now, you can start writing mdsvex files! To do this, simply create a new file with the `.svx` or `.md` extension. You can then write Markdown in the file, and embed Svelte components using the `<script>` and `<style>` tags. |
| 114 | + |
| 115 | +For example, in this actual post we have the below (appreviated), where in our `.md` file we import the `Button`. |
| 116 | + |
| 117 | +```md |
| 118 | +--- |
| 119 | +type: podcast |
| 120 | +--- |
| 121 | + |
| 122 | +<script lang="ts"> |
| 123 | + import Button from '$lib/components/content/Button.svelte' |
| 124 | +</script> |
| 125 | + |
| 126 | +<Button /> |
| 127 | +``` |
| 128 | + |
| 129 | +Which allows for this very button below to be used directly from our markdown. Go ahead click away on it! |
| 130 | + |
| 131 | +<Button /> |
| 132 | + |
| 133 | +When you build your [SvelteKit](https://kit.svelte.dev/) project, [mdsvex](https://mdsvex.pngwn.io/) will compile the Svelte components in your mdsvex files to JavaScript. This JavaScript will then be included in the HTML of your blog posts. |
| 134 | + |
| 135 | +### Conclusion |
| 136 | + |
| 137 | +mdsvex is a powerful tool that allows you to create interactive and engaging blog posts. It is easy to use, and it is compatible with any SvelteKit project. If you are looking for a way to add more dynamism to your blog, I highly recommend using mdsvex. |
0 commit comments