A Post With Interactivity

So you don’t always need to add interactivity to your posts, but in case you want to, you can! The thing is that these .md files can be treated like Svelte components - you are not restricted to markdown format. So how about the old click counter from the Svelte tutorials?

Wow that works!

The <script> tag needs to be under the markdown frontmatter (the meta attributes between --- at the top of the file) in order to work since the frontmatter should always be at the top. The entire .md file for this page is below in a code block.

---
active: true
title: "A Post With Interactivity"
date: "2025-03-26"
categories:
    - "interesting-things"
excerpt: "This is a post that shows you can use the .md files like Svelte components."
---

<script>
    let count = $state(0);

	function increment() {
		count += 1;
	}
</script>

So you don't always need to add interactivity to your posts, but in case you want to, you can! The thing is that these .md files can be treated like Svelte components - you are not restricted to markdown format. So how about the old click counter from the Svelte tutorials?

<button class="bg-blue-400 hover:bg-blue-500 text-white font-mono font-bold py-2 px-4 rounded" onclick={increment}>
	Click Count: {count}
</button>

Wow that works!

The `<script>` tag needs to be under the markdown frontmatter (the meta attributes between `---` at the top of the file) in order to work since the frontmatter should always be at the top. The entire .md file for this page is below in a code block.