summaryrefslogtreecommitdiff
path: root/examples/with-markdown/src
diff options
context:
space:
mode:
Diffstat (limited to 'examples/with-markdown/src')
-rw-r--r--examples/with-markdown/src/components/PreactCounter.tsx20
-rw-r--r--examples/with-markdown/src/components/ReactCounter.jsx19
-rw-r--r--examples/with-markdown/src/components/SvelteCounter.svelte22
-rw-r--r--examples/with-markdown/src/components/VueCounter.vue27
-rw-r--r--examples/with-markdown/src/layouts/main.astro18
-rw-r--r--examples/with-markdown/src/pages/external.astro19
-rw-r--r--examples/with-markdown/src/pages/index.astro65
-rw-r--r--examples/with-markdown/src/pages/other.md18
-rw-r--r--examples/with-markdown/src/styles/global.css70
9 files changed, 0 insertions, 278 deletions
diff --git a/examples/with-markdown/src/components/PreactCounter.tsx b/examples/with-markdown/src/components/PreactCounter.tsx
deleted file mode 100644
index e67afb4fe..000000000
--- a/examples/with-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/with-markdown/src/components/ReactCounter.jsx b/examples/with-markdown/src/components/ReactCounter.jsx
deleted file mode 100644
index e322f7050..000000000
--- a/examples/with-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/with-markdown/src/components/SvelteCounter.svelte b/examples/with-markdown/src/components/SvelteCounter.svelte
deleted file mode 100644
index 8d6b3f5e1..000000000
--- a/examples/with-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/with-markdown/src/components/VueCounter.vue b/examples/with-markdown/src/components/VueCounter.vue
deleted file mode 100644
index 2f25066dc..000000000
--- a/examples/with-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/with-markdown/src/layouts/main.astro b/examples/with-markdown/src/layouts/main.astro
deleted file mode 100644
index 006c4ca6c..000000000
--- a/examples/with-markdown/src/layouts/main.astro
+++ /dev/null
@@ -1,18 +0,0 @@
----
-import "../styles/global.css";
-
-const { content } = Astro.props;
----
-
-<html lang={content.lang || "en"}>
- <head>
- <meta charset="utf-8" />
-
- <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-
- <title>{content.title}</title>
- </head>
- <body>
- <slot />
- </body>
-</html>
diff --git a/examples/with-markdown/src/pages/external.astro b/examples/with-markdown/src/pages/external.astro
deleted file mode 100644
index 395e27c71..000000000
--- a/examples/with-markdown/src/pages/external.astro
+++ /dev/null
@@ -1,19 +0,0 @@
----
-import { Markdown } from "astro/components";
-import Layout from "../layouts/main.astro";
-
-const title = `External Markdown`;
-const content = `Markdown *content* to render`;
----
-
-<Layout content={{ title }}>
- <main>
- <div>
- <Markdown {content}>
-
- </Markdown>
- <p>Some other stuff</p>
- </div>
- <p>Lastly...</p>
- </main>
-</Layout>
diff --git a/examples/with-markdown/src/pages/index.astro b/examples/with-markdown/src/pages/index.astro
deleted file mode 100644
index 1cc85c16c..000000000
--- a/examples/with-markdown/src/pages/index.astro
+++ /dev/null
@@ -1,65 +0,0 @@
----
-// 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>
diff --git a/examples/with-markdown/src/pages/other.md b/examples/with-markdown/src/pages/other.md
deleted file mode 100644
index d4180940d..000000000
--- a/examples/with-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.
diff --git a/examples/with-markdown/src/styles/global.css b/examples/with-markdown/src/styles/global.css
deleted file mode 100644
index 7ea16821e..000000000
--- a/examples/with-markdown/src/styles/global.css
+++ /dev/null
@@ -1,70 +0,0 @@
-pre,
-code {
- color: #d4d4d4;
- font-size: 14px;
- font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
- line-height: 1.5;
- direction: ltr;
- white-space: pre;
- text-align: left;
- text-shadow: none;
- word-break: normal;
- word-spacing: normal;
- -moz-tab-size: 4;
- -o-tab-size: 4;
- tab-size: 4;
- -webkit-hyphens: none;
- -moz-hyphens: none;
- -ms-hyphens: none;
- hyphens: none;
-}
-
-pre::selection,
-code::selection {
- text-shadow: none;
- background: #b3d4fc;
-}
-
-@media print {
- pre,
- code {
- text-shadow: none;
- }
-}
-
-pre {
- margin: 0.5rem 0 16px;
- padding: 0.8rem 1rem 0.9rem;
- overflow: auto;
- background: #282a36;
- border-radius: 4px;
-}
-
-code {
- padding: 0.1em 0.3em;
- color: #db4c69;
- background: #f9f2f4;
- border-radius: 0.3em;
- white-space: pre-wrap;
-}
-
-pre.astro-code > code {
- all: unset;
-}
-
-/*********************************************************
-* Line highlighting
-*/
-pre[data-line] {
- position: relative;
-}
-
-pre > code {
- position: relative;
- z-index: 1;
-}
-
-body {
- max-width: 900px;
- margin: auto;
-}