Restructure examples (#568)

* rename kitchen sink, pull out react example

* split out the rest of the examples

* align versions

* chore: rename examples

* chore: normalize gitignore

* chore: update package versions

* chore: move framework examples to `framework` namespace

* docs: add README to examples

Co-authored-by: Austin Crim <crim.austin@principal.com>

11 files changed, 0 insertions, 426 deletions

diff --git a/examples/astro-markdown/.npmrc b/examples/astro-markdown/.npmrc
deleted file mode 100644
index 0cc653b2c..000000000
--- a/examples/astro-markdown/.npmrc
+++ /dev/null
@@ -1,2 +0,0 @@
-## force pnpm to hoist 
-shamefully-hoist = true
\ No newline at end of file
diff --git a/examples/astro-markdown/package.json b/examples/astro-markdown/package.json
deleted file mode 100644
index 5565b0b14..000000000
--- a/examples/astro-markdown/package.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "name": "@astrojs/markdown-example",
-  "version": "0.0.1",
-  "private": true,
-  "scripts": {
-    "start": "astro dev",
-    "build": "astro build"
-  },
-  "devDependencies": {
-    "astro": "^0.15.0"
-  },
-  "snowpack": {
-    "workspaceRoot": "../.."
-  }
-}
diff --git a/examples/astro-markdown/public/styles/global.scss b/examples/astro-markdown/public/styles/global.scss
deleted file mode 100644
index 1eda4646f..000000000
--- a/examples/astro-markdown/public/styles/global.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@use "./prism.scss";
-
-body {
-  max-width: 900px;
-  margin: auto;
-}
\ No newline at end of file
diff --git a/examples/astro-markdown/public/styles/prism.scss b/examples/astro-markdown/public/styles/prism.scss
deleted file mode 100644
index 29a3cf5d8..000000000
--- a/examples/astro-markdown/public/styles/prism.scss
+++ /dev/null
@@ -1,228 +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;
-}
-
-:not(pre) > code {
-  padding: 0.1em 0.3em;
-  color: #db4c69;
-  background: #f9f2f4;
-  border-radius: 0.3em;
-  white-space: pre-wrap;
-}
-
-/*********************************************************
-* Tokens
-*/
-.namespace {
-  opacity: 0.7;
-}
-
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: #6a9955;
-}
-
-.token.punctuation {
-  color: #d4d4d4;
-}
-
-.token.property,
-.token.tag,
-.token.boolean,
-.token.number,
-.token.constant,
-.token.symbol,
-.token.deleted {
-  color: #b5cea8;
-}
-
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted {
-  color: #ce9178;
-}
-
-.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string {
-  color: #d4d4d4;
-  background: rgb(45, 55, 72);
-}
-
-.token.atrule,
-.token.attr-value,
-.token.keyword {
-  color: #c586c0;
-}
-
-.token.function {
-  color: #dcdcaa;
-}
-
-.token.regex,
-.token.important,
-.token.variable {
-  color: #d16969;
-}
-
-.token.important,
-.token.bold {
-  font-weight: bold;
-}
-
-.token.italic {
-  font-style: italic;
-}
-
-.token.constant {
-  color: #9cdcfe;
-}
-
-.token.class-name {
-  color: #4ec9b0;
-}
-
-.token.parameter {
-  color: #9cdcfe;
-}
-
-.token.interpolation {
-  color: #9cdcfe;
-}
-
-.token.punctuation.interpolation-punctuation {
-  color: #569cd6;
-}
-
-.token.boolean {
-  color: #569cd6;
-}
-
-.token.property {
-  color: #9cdcfe;
-}
-
-.token.selector {
-  color: #d7ba7d;
-}
-
-.token.tag {
-  color: #569cd6;
-}
-
-.token.attr-name {
-  color: #9cdcfe;
-}
-
-.token.attr-value {
-  color: #ce9178;
-}
-
-.token.entity {
-  color: #4ec9b0;
-  cursor: unset;
-}
-
-.token.namespace {
-  color: #4ec9b0;
-}
-
-/*********************************************************
-* Language Specific
-*/
-pre[class*='language-javascript'],
-code[class*='language-javascript'] {
-  color: #4ec9b0;
-}
-
-pre[class*='language-css'],
-code[class*='language-css'] {
-  color: #ce9178;
-}
-
-pre[class*='language-html'],
-code[class*='language-html'] {
-  color: #d4d4d4;
-}
-
-.language-html .token.punctuation {
-  color: #808080;
-}
-
-/*********************************************************
-* Line highlighting
-*/
-pre[data-line] {
-  position: relative;
-}
-
-pre > code {
-  position: relative;
-  z-index: 1;
-}
-
-.line-highlight {
-  position: absolute;
-  right: 0;
-  left: 0;
-  z-index: 0;
-  margin-top: 1em;
-  padding: inherit 0;
-  line-height: inherit;
-  white-space: pre;
-  background: #f7ebc6;
-  box-shadow: inset 5px 0 0 #f7d87c;
-  pointer-events: none;
-}
-
-pre[class*='language-bash'] .token.function {
-  color: #d4d4d4;
-}
-.token.comment {
-  color: #fff7;
-}
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.