Move the Markdown component to its own package (#3986)

* Move the Markdown component to its own package

* Update the examples

* Updated lockfile

* Use is:raw

* Add a main field

* Update the formatting of the readme

* Rename to @astrojs/markdown-component

21 files changed, 1 insertions, 403 deletions

diff --git a/examples/with-markdown-plugins/src/layouts/main.astro b/examples/with-markdown-plugins/src/layouts/main.astro
index 4ab5b7888..758e5d083 100644
--- a/examples/with-markdown-plugins/src/layouts/main.astro
+++ b/examples/with-markdown-plugins/src/layouts/main.astro
@@ -27,7 +27,6 @@ const { content } = Astro.props;
 			<header>
 				<nav class="nav">
 					<a href="/">Home</a>
-					<a href="/about">About</a>
 				</nav>
 			</header>
 			<slot />
diff --git a/examples/with-markdown-plugins/src/pages/about.astro b/examples/with-markdown-plugins/src/pages/about.astro
deleted file mode 100644
index e533ceac8..000000000
--- a/examples/with-markdown-plugins/src/pages/about.astro
+++ /dev/null
@@ -1,20 +0,0 @@
----
-import { Markdown } from "astro/components";
-import MainLayout from "../layouts/main.astro";
----
-
-<MainLayout content={{ title: "About" }}>
-	<Markdown>
-		# About
-
-		Sint ullamco sint ut irure laborum occaecat anim minim tempor enim dolore reprehenderit Lorem. Sit qui nisi in quis ut consequat minim. Ad commodo officia nisi culpa proident duis culpa eu reprehenderit incididunt do fugiat proident tempor. Et velit dolor aliqua dolor ipsum. Sunt eiusmod amet enim ut.
-
-		Sint ullamco sint ut irure laborum occaecat anim minim tempor enim dolore reprehenderit Lorem. Sit qui nisi in quis ut consequat minim. Ad commodo officia nisi culpa proident duis culpa eu reprehenderit incididunt do fugiat proident tempor. Et velit dolor aliqua dolor ipsum. Sunt eiusmod amet enim ut.
-
-		## My story
-
-		Sint ullamco sint ut irure laborum occaecat anim minim tempor enim dolore reprehenderit Lorem. Sit qui nisi in quis ut consequat minim. Ad commodo officia nisi culpa proident duis culpa eu reprehenderit incididunt do fugiat proident tempor. Et velit dolor aliqua dolor ipsum. Sunt eiusmod amet enim ut.
-
-		Sint ullamco sint ut irure laborum occaecat anim minim tempor enim dolore reprehenderit Lorem. Sit qui nisi in quis ut consequat minim. Ad commodo officia nisi culpa proident duis culpa eu reprehenderit incididunt do fugiat proident tempor. Et velit dolor aliqua dolor ipsum. Sunt eiusmod amet enim ut.
-	</Markdown>
-</MainLayout>
diff --git a/examples/with-markdown-shiki/README.md b/examples/with-markdown-shiki/README.md
index 5b744b15d..2c39f9334 100644
--- a/examples/with-markdown-shiki/README.md
+++ b/examples/with-markdown-shiki/README.md
@@ -8,5 +8,4 @@ npm init astro -- --template with-markdown-shiki
 
 This example showcases Astro's [built-in Markdown support](https://docs.astro.build/en/guides/markdown-content/).
 
-- `src/pages/index.astro` uses Astro's `<Markdown>` component.
-- `src/pages/other.md` is a treated as a page entrypoint and uses a `layout`.
+- `src/pages/index.md` is a treated as a page entrypoint and uses a `layout`.
diff --git a/examples/with-markdown/.gitignore b/examples/with-markdown/.gitignore
deleted file mode 100644
index 02f6e50b4..000000000
--- a/examples/with-markdown/.gitignore
+++ /dev/null
@@ -1,19 +0,0 @@
-# build output
-dist/
-
-# dependencies
-node_modules/
-
-# logs
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-
-
-# environment variables
-.env
-.env.production
-
-# macOS-specific files
-.DS_Store
diff --git a/examples/with-markdown/.npmrc b/examples/with-markdown/.npmrc
deleted file mode 100644
index ef83021af..000000000
--- a/examples/with-markdown/.npmrc
+++ /dev/null
@@ -1,2 +0,0 @@
-# Expose Astro dependencies for `pnpm` users
-shamefully-hoist=true
diff --git a/examples/with-markdown/.stackblitzrc b/examples/with-markdown/.stackblitzrc
deleted file mode 100644
index 43798ecff..000000000
--- a/examples/with-markdown/.stackblitzrc
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "startCommand": "npm start",
-  "env": {
-    "ENABLE_CJS_IMPORTS": true
-  }
-}
\ No newline at end of file
diff --git a/examples/with-markdown/README.md b/examples/with-markdown/README.md
deleted file mode 100644
index 5acc87f7c..000000000
--- a/examples/with-markdown/README.md
+++ /dev/null
@@ -1,12 +0,0 @@
-# Astro Example: Markdown
-
-```
-npm init astro -- --template with-markdown
-```
-
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/with-markdown)
-
-This example showcases Astro's [built-in Markdown support](https://docs.astro.build/en/guides/markdown-content/).
-
-- `src/pages/index.astro` uses Astro's `<Markdown>` component.
-- `src/pages/other.md` is a treated as a page entrypoint and uses a `layout`.
diff --git a/examples/with-markdown/astro.config.mjs b/examples/with-markdown/astro.config.mjs
deleted file mode 100644
index c5dcad073..000000000
--- a/examples/with-markdown/astro.config.mjs
+++ /dev/null
@@ -1,11 +0,0 @@
-import { defineConfig } from 'astro/config';
-import preact from '@astrojs/preact';
-import react from '@astrojs/react';
-import svelte from '@astrojs/svelte';
-import vue from '@astrojs/vue';
-
-// https://astro.build/config
-export default defineConfig({
-	// Enable many frameworks to support all different kinds of components.
-	integrations: [preact(), react(), svelte(), vue()],
-});
diff --git a/examples/with-markdown/package.json b/examples/with-markdown/package.json
deleted file mode 100644
index bea3a9ec3..000000000
--- a/examples/with-markdown/package.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "name": "@example/with-markdown",
-  "version": "0.0.1",
-  "private": true,
-  "scripts": {
-    "dev": "astro dev",
-    "start": "astro dev",
-    "build": "astro build",
-    "preview": "astro preview"
-  },
-  "devDependencies": {
-    "@astrojs/markdown-remark": "^0.12.0",
-    "@astrojs/preact": "^0.5.2",
-    "@astrojs/react": "^0.4.2",
-    "@astrojs/svelte": "^0.4.1",
-    "@astrojs/vue": "^0.4.1",
-    "astro": "^1.0.0-beta.73"
-  },
-  "dependencies": {
-    "preact": "^10.7.3",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
-    "svelte": "^3.48.0",
-    "vue": "^3.2.37"
-  }
-}
diff --git a/examples/with-markdown/public/favicon.ico b/examples/with-markdown/public/favicon.ico
deleted file mode 100644
index 578ad458b..000000000
--- a/examples/with-markdown/public/favicon.ico
+++ /dev/null
diff --git a/examples/with-markdown/sandbox.config.json b/examples/with-markdown/sandbox.config.json
deleted file mode 100644
index 9178af77d..000000000
--- a/examples/with-markdown/sandbox.config.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "infiniteLoopProtection": true,
-  "hardReloadOnChange": false,
-  "view": "browser",
-  "template": "node",
-  "container": {
-    "port": 3000,
-    "startScript": "start",
-    "node": "14"
-  }
-}
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;
-}
diff --git a/examples/with-markdown/tsconfig.json b/examples/with-markdown/tsconfig.json
deleted file mode 100644
index 4db6ee701..000000000
--- a/examples/with-markdown/tsconfig.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "compilerOptions": {
-    // Enable top-level await, and other modern ESM features.
-    "target": "ESNext",
-    "module": "ESNext",
-    // Enable node-style module resolution, for things like npm package imports.
-    "moduleResolution": "node",
-    // Enable JSON imports.
-    "resolveJsonModule": true,
-    // Enable stricter transpilation for better output.
-    "isolatedModules": true,
-    // Add type definitions for our Astro runtime.
-    "types": ["astro/client"]
-  }
-}