diff options
Diffstat (limited to 'examples/astro-markdown/src')
-rw-r--r-- | examples/astro-markdown/src/components/PreactCounter.tsx | 20 | ||||
-rw-r--r-- | examples/astro-markdown/src/components/ReactCounter.jsx | 19 | ||||
-rw-r--r-- | examples/astro-markdown/src/components/SvelteCounter.svelte | 22 | ||||
-rw-r--r-- | examples/astro-markdown/src/components/VueCounter.vue | 27 | ||||
-rw-r--r-- | examples/astro-markdown/src/layouts/main.astro | 13 | ||||
-rw-r--r-- | examples/astro-markdown/src/pages/index.astro | 56 | ||||
-rw-r--r-- | examples/astro-markdown/src/pages/other.md | 18 |
7 files changed, 0 insertions, 175 deletions
diff --git a/examples/astro-markdown/src/components/PreactCounter.tsx b/examples/astro-markdown/src/components/PreactCounter.tsx deleted file mode 100644 index e3761643f..000000000 --- a/examples/astro-markdown/src/components/PreactCounter.tsx +++ /dev/null @@ -1,20 +0,0 @@ -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/astro-markdown/src/components/ReactCounter.jsx b/examples/astro-markdown/src/components/ReactCounter.jsx deleted file mode 100644 index 92871a8d8..000000000 --- a/examples/astro-markdown/src/components/ReactCounter.jsx +++ /dev/null @@ -1,19 +0,0 @@ -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/astro-markdown/src/components/SvelteCounter.svelte b/examples/astro-markdown/src/components/SvelteCounter.svelte deleted file mode 100644 index 8d6b3f5e1..000000000 --- a/examples/astro-markdown/src/components/SvelteCounter.svelte +++ /dev/null @@ -1,22 +0,0 @@ - -<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/astro-markdown/src/components/VueCounter.vue b/examples/astro-markdown/src/components/VueCounter.vue deleted file mode 100644 index 8179fb1d9..000000000 --- a/examples/astro-markdown/src/components/VueCounter.vue +++ /dev/null @@ -1,27 +0,0 @@ -<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/astro-markdown/src/layouts/main.astro b/examples/astro-markdown/src/layouts/main.astro deleted file mode 100644 index 26993bcaf..000000000 --- a/examples/astro-markdown/src/layouts/main.astro +++ /dev/null @@ -1,13 +0,0 @@ ---- ---- - -<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/astro-markdown/src/pages/index.astro b/examples/astro-markdown/src/pages/index.astro deleted file mode 100644 index 666e0557f..000000000 --- a/examples/astro-markdown/src/pages/index.astro +++ /dev/null @@ -1,56 +0,0 @@ ---- -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/astro-markdown/src/pages/other.md b/examples/astro-markdown/src/pages/other.md deleted file mode 100644 index d4180940d..000000000 --- a/examples/astro-markdown/src/pages/other.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Some Markdown Page -layout: ../layouts/main.astro ---- - -# Code - -```js -var foo = 'bar'; - -function doSomething() { - return foo; -} -``` - -# Paragraph - -text here. |