7 files changed, 175 insertions, 0 deletions
diff --git a/examples/with-markdown/src/components/PreactCounter.tsx b/examples/with-markdown/src/components/PreactCounter.tsx
new file mode 100644
index 000000000..e3761643f
--- /dev/null
+++ b/examples/with-markdown/src/components/PreactCounter.tsx
@@ -0,0 +1,20 @@
+import { h, Fragment } from 'preact';
+import { useState } from 'preact/hooks';
+
+/** a counter written in Preact */
+export default function PreactCounter({ children }) {
+  const [count, setCount] = useState(0);
+  const add = () => setCount((i) => i + 1);
+  const subtract = () => setCount((i) => i - 1);
+
+  return (
+    <>
+      <div className="counter">
+        <button onClick={subtract}>-</button>
+        <pre>{count}</pre>
+        <button onClick={add}>+</button>
+      </div>
+      <div className="children">{children}</div>
+    </>
+  );
+}
diff --git a/examples/with-markdown/src/components/ReactCounter.jsx b/examples/with-markdown/src/components/ReactCounter.jsx
new file mode 100644
index 000000000..92871a8d8
--- /dev/null
+++ b/examples/with-markdown/src/components/ReactCounter.jsx
@@ -0,0 +1,19 @@
+import React, { useState } from 'react';
+
+/** a counter written in React */
+export default function ReactCounter({ children }) {
+  const [count, setCount] = useState(0);
+  const add = () => setCount((i) => i + 1);
+  const subtract = () => setCount((i) => i - 1);
+
+  return (
+    <>
+      <div className="counter">
+        <button onClick={subtract}>-</button>
+        <pre>{count}</pre>
+        <button onClick={add}>+</button>
+      </div>
+      <div className="children">{children}</div>
+    </>
+  );
+}
diff --git a/examples/with-markdown/src/components/SvelteCounter.svelte b/examples/with-markdown/src/components/SvelteCounter.svelte
new file mode 100644
index 000000000..8d6b3f5e1
--- /dev/null
+++ b/examples/with-markdown/src/components/SvelteCounter.svelte
@@ -0,0 +1,22 @@
+
+<script>
+  let children;
+  let count = 0;
+
+  function add() {
+		count += 1;
+	}
+
+  function subtract() {
+		count -= 1;
+	}
+</script>
+
+<div class="counter">
+    <button on:click={subtract}>-</button>
+    <pre>{ count }</pre>
+    <button on:click={add}>+</button>
+</div>
+<div class="children">
+    <slot />
+</div>
diff --git a/examples/with-markdown/src/components/VueCounter.vue b/examples/with-markdown/src/components/VueCounter.vue
new file mode 100644
index 000000000..8179fb1d9
--- /dev/null
+++ b/examples/with-markdown/src/components/VueCounter.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="counter">
+      <button @click="subtract()">-</button>
+      <pre>{{ count }}</pre>
+      <button @click="add()">+</button>
+  </div>
+  <div class="children">
+      <slot />
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+export default {
+  setup() {
+    const count = ref(0)
+    const add = () => count.value = count.value + 1;
+    const subtract = () => count.value = count.value - 1;
+
+    return {
+      count,
+      add,
+      subtract
+    }
+  }
+}
+</script>
diff --git a/examples/with-markdown/src/layouts/main.astro b/examples/with-markdown/src/layouts/main.astro
new file mode 100644
index 000000000..26993bcaf
--- /dev/null
+++ b/examples/with-markdown/src/layouts/main.astro
@@ -0,0 +1,13 @@
+---
+---
+
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>{content.title}</title>
+    <link rel="stylesheet" href="/styles/global.css">
+  </head>
+  <body>
+    <slot/>
+  </body>
+</html>
diff --git a/examples/with-markdown/src/pages/index.astro b/examples/with-markdown/src/pages/index.astro
new file mode 100644
index 000000000..666e0557f
--- /dev/null
+++ b/examples/with-markdown/src/pages/index.astro
@@ -0,0 +1,56 @@
+---
+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';
+
+const title = 'Astro Markdown';
+const variable = 'content';
+const items = ['A', 'B', 'C'];
+---
+
+<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:visible />
+    <PreactCounter:visible />
+    <VueCounter:visible />
+    <SvelteCounter:visible />
+
+    ## Use Expressions
+
+    You can use any {variable} in scope and use JavaScript for templating ({items.join(', ')})
+
+    ## Oh yeah...
+
+    <ReactCounter:visible>
+      🤯 It's also _recursive_!
+
+      ### Markdown can be embedded in any child component
+    </ReactCounter:visible>
+
+    ## Code
+
+    Should work!
+
+    ```js
+    import Something from './another';
+
+    const thing = new Something();
+    ```
+
+  </Markdown>
+</Layout>
diff --git a/examples/with-markdown/src/pages/other.md b/examples/with-markdown/src/pages/other.md
new file mode 100644
index 000000000..d4180940d
--- /dev/null
+++ b/examples/with-markdown/src/pages/other.md
@@ -0,0 +1,18 @@
+---
+title: Some Markdown Page
+layout: ../layouts/main.astro
+---
+
+# Code
+
+```js
+var foo = 'bar';
+
+function doSomething() {
+  return foo;
+}
+```
+
+# Paragraph
+
+text here.