---
// Component Imports
import { Markdown } from "astro/components";
import Layout from "../layouts/main.astro";
import ReactCounter from "../components/ReactCounter.jsx";
import PreactCounter from "../components/PreactCounter.tsx";
import VueCounter from "../components/VueCounter.vue";
import SvelteCounter from "../components/SvelteCounter.svelte";

// Component Script:
// You can write any JavaScript/TypeScript that you'd like here.
// It will run during the build, but never in the browser.
// All variables are available to use in the HTML template below.
const title = "Astro Markdown";
const variable = "content";
const items = ["A", "B", "C"];

// Full Astro Component Syntax:
// https://docs.astro.build/core-concepts/astro-components/
---

<Layout content={{ title }}>
	<Markdown>
		# Introducing {title}

		**Astro Markdown** brings native Markdown support to HTML!

		> It's inspired by [`MDX`](https://mdxjs.com/) and powered by [`remark`](https://github.com/remarkjs/remark).

		The best part? It comes with all the Astro features you expect.

		[Other example](./other)

		## Embed framework components

		<ReactCounter client:visible />
		<PreactCounter client:visible />
		<VueCounter client:visible />
		<SvelteCounter client:visible />

		## Use Expressions

		You can use any {variable} in scope and use JavaScript for templating ({items.join(', ')})

		## Oh yeah...

		<ReactCounter client:visible>

		🤯 It's also _recursive_!

		### Markdown can be embedded in any child component

		</ReactCounter>

		## Code

		Should work!

		```js
		import Something from "./another";

		const thing = new Something();
		```
	</Markdown>
</Layout>