summaryrefslogtreecommitdiff
path: root/examples/remote-markdown
diff options
context:
space:
mode:
Diffstat (limited to 'examples/remote-markdown')
-rw-r--r--examples/remote-markdown/astro.config.mjs5
-rw-r--r--examples/remote-markdown/docs/dev.md48
-rw-r--r--examples/remote-markdown/package.json17
-rw-r--r--examples/remote-markdown/src/components/Yell.jsx5
-rw-r--r--examples/remote-markdown/src/layouts/main.astro14
-rw-r--r--examples/remote-markdown/src/pages/index.astro72
6 files changed, 161 insertions, 0 deletions
diff --git a/examples/remote-markdown/astro.config.mjs b/examples/remote-markdown/astro.config.mjs
new file mode 100644
index 000000000..c7bfe91b0
--- /dev/null
+++ b/examples/remote-markdown/astro.config.mjs
@@ -0,0 +1,5 @@
+export default {
+ extensions: {
+ '.jsx': 'preact'
+ }
+}
diff --git a/examples/remote-markdown/docs/dev.md b/examples/remote-markdown/docs/dev.md
new file mode 100644
index 000000000..d9223cbbd
--- /dev/null
+++ b/examples/remote-markdown/docs/dev.md
@@ -0,0 +1,48 @@
+# Development Server
+
+The development server comes as part of the Astro CLI. Start the server with:
+
+```shell
+astro dev
+```
+
+In your project root. You can specify an alternative
+
+## Special routes
+
+The dev server will serve the following special routes:
+
+### /400
+
+This is a custom **400** status code page. You can add this route by adding a page component to your `src/pages` folder:
+
+```
+├── src/
+│ ├── components/
+│ └── pages/
+│ └── 400.astro
+```
+
+For any URL you visit that doesn't have a corresponding page, the `400.astro` file will be used.
+
+### /500
+
+This is a custom **500** status code page. You can add this route by adding a page component to your `src/pages` folder:
+
+```astro
+├── src/ │ ├── components/ │ └── pages/ │ └── 500.astro
+```
+
+This page is used any time an error occurs in the dev server.
+
+The 500 page will receive an `error` query parameter which you can access with:
+
+```
+---
+const error = Astro.request.url.searchParams.get('error');
+---
+
+<strong>{error}</strong>
+```
+
+A default error page is included with Astro so you will get pretty error messages even without adding a custom 500 page.
diff --git a/examples/remote-markdown/package.json b/examples/remote-markdown/package.json
new file mode 100644
index 000000000..dc20a1a66
--- /dev/null
+++ b/examples/remote-markdown/package.json
@@ -0,0 +1,17 @@
+{
+ "name": "@example/remote-markdown",
+ "version": "0.0.1",
+ "private": true,
+ "scripts": {
+ "start": "astro dev",
+ "build": "astro build",
+ "astro-dev": "nodemon --delay 0.5 -w ../../packages/astro/dist -x '../../packages/astro/astro.mjs dev'"
+ },
+ "devDependencies": {
+ "astro": "0.0.13",
+ "nodemon": "^2.0.7"
+ },
+ "snowpack": {
+ "workspaceRoot": "../.."
+ }
+}
diff --git a/examples/remote-markdown/src/components/Yell.jsx b/examples/remote-markdown/src/components/Yell.jsx
new file mode 100644
index 000000000..ae7d0d959
--- /dev/null
+++ b/examples/remote-markdown/src/components/Yell.jsx
@@ -0,0 +1,5 @@
+import { h, Fragment } from 'preact';
+
+export default function Yell({ children }) {
+ return children.filter(v => typeof v === 'string').join('').toUpperCase() + '!'
+}
diff --git a/examples/remote-markdown/src/layouts/main.astro b/examples/remote-markdown/src/layouts/main.astro
new file mode 100644
index 000000000..37fcc0ee7
--- /dev/null
+++ b/examples/remote-markdown/src/layouts/main.astro
@@ -0,0 +1,14 @@
+---
+export let content;
+---
+
+<html>
+ <head>
+ <title>{content.title}</title>
+ </head>
+
+ <body>
+ <slot />
+ <pre>{JSON.stringify(content)}</pre>
+ </body>
+</html>
diff --git a/examples/remote-markdown/src/pages/index.astro b/examples/remote-markdown/src/pages/index.astro
new file mode 100644
index 000000000..402780065
--- /dev/null
+++ b/examples/remote-markdown/src/pages/index.astro
@@ -0,0 +1,72 @@
+---
+import Markdown from 'astro/components/Markdown.astro';
+import Yell from '../components/Yell.jsx';
+const title = 'INTERPOLATED';
+const quietTest = 'interpolated';
+const content = await fetch('https://raw.githubusercontent.com/snowpackjs/snowpack/main/README.md').then(res => res.text());
+---
+
+<!-- Basic -->
+<Markdown>
+# Hello world!
+</Markdown>
+
+ <!-- Indented -->
+ <Markdown>
+ # Hello indent!
+ </Markdown>
+
+<!-- Interpolation -->
+<Markdown>
+# Hello {title}!
+</Markdown>
+
+
+ <!-- Can I break this? -->
+ <Markdown>
+ # I cannot!
+
+ <div>
+ # ahhhh
+ </div>
+
+ <Yell>{quietTest}</Yell>
+
+ <strong>Dope</strong>
+
+ `nice`
+
+ ```
+ plain fence
+ ```
+
+ ```html
+ don't <div>me</div> bro
+ ```
+
+ ```js
+ Astro.fetchContent()
+ ```
+
+ ### cool stuff?
+ ```astro
+ {'can\'t interpolate'}
+ {}
+ {title}
+
+ Do I break? <Markdown> </Markdown>
+ ```
+ </Markdown>
+
+<!-- external content -->
+<Markdown>{content}</Markdown>
+
+<!-- external with newlines -->
+<Markdown>
+ {content}
+</Markdown>
+
+ <!-- external with indentation -->
+ <Markdown>
+ {content}
+ </Markdown>