diff options
Diffstat (limited to 'examples/with-mdx')
| -rw-r--r-- | examples/with-mdx/.gitignore | 19 | ||||
| -rw-r--r-- | examples/with-mdx/.npmrc | 2 | ||||
| -rw-r--r-- | examples/with-mdx/.stackblitzrc | 6 | ||||
| -rw-r--r-- | examples/with-mdx/.vscode/extensions.json | 4 | ||||
| -rw-r--r-- | examples/with-mdx/.vscode/launch.json | 11 | ||||
| -rw-r--r-- | examples/with-mdx/README.md | 9 | ||||
| -rw-r--r-- | examples/with-mdx/astro.config.mjs | 11 | ||||
| -rw-r--r-- | examples/with-mdx/package.json | 17 | ||||
| -rw-r--r-- | examples/with-mdx/public/favicon.ico | bin | 0 -> 4286 bytes | |||
| -rw-r--r-- | examples/with-mdx/sandbox.config.json | 11 | ||||
| -rw-r--r-- | examples/with-mdx/src/components/Counter.jsx | 18 | ||||
| -rw-r--r-- | examples/with-mdx/src/components/Title.astro | 7 | ||||
| -rw-r--r-- | examples/with-mdx/src/pages/index.mdx | 19 | ||||
| -rw-r--r-- | examples/with-mdx/tsconfig.json | 15 |
14 files changed, 149 insertions, 0 deletions
diff --git a/examples/with-mdx/.gitignore b/examples/with-mdx/.gitignore new file mode 100644 index 000000000..02f6e50b4 --- /dev/null +++ b/examples/with-mdx/.gitignore @@ -0,0 +1,19 @@ +# 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-mdx/.npmrc b/examples/with-mdx/.npmrc new file mode 100644 index 000000000..ef83021af --- /dev/null +++ b/examples/with-mdx/.npmrc @@ -0,0 +1,2 @@ +# Expose Astro dependencies for `pnpm` users +shamefully-hoist=true diff --git a/examples/with-mdx/.stackblitzrc b/examples/with-mdx/.stackblitzrc new file mode 100644 index 000000000..43798ecff --- /dev/null +++ b/examples/with-mdx/.stackblitzrc @@ -0,0 +1,6 @@ +{ + "startCommand": "npm start", + "env": { + "ENABLE_CJS_IMPORTS": true + } +}
\ No newline at end of file diff --git a/examples/with-mdx/.vscode/extensions.json b/examples/with-mdx/.vscode/extensions.json new file mode 100644 index 000000000..22a15055d --- /dev/null +++ b/examples/with-mdx/.vscode/extensions.json @@ -0,0 +1,4 @@ +{ + "recommendations": ["astro-build.astro-vscode"], + "unwantedRecommendations": [] +} diff --git a/examples/with-mdx/.vscode/launch.json b/examples/with-mdx/.vscode/launch.json new file mode 100644 index 000000000..d64220976 --- /dev/null +++ b/examples/with-mdx/.vscode/launch.json @@ -0,0 +1,11 @@ +{ + "version": "0.2.0", + "configurations": [ + { + "command": "./node_modules/.bin/astro dev", + "name": "Development server", + "request": "launch", + "type": "node-terminal" + } + ] +} diff --git a/examples/with-mdx/README.md b/examples/with-mdx/README.md new file mode 100644 index 000000000..1a13dcdcc --- /dev/null +++ b/examples/with-mdx/README.md @@ -0,0 +1,9 @@ +# Astro Example: MDX + +``` +npm init astro -- --template with-mdx +``` + +[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/with-mdx) + +This example showcases using [`@astrojs/mdx`](https://www.npmjs.com/package/@astrojs/mdx) to author content using [MDX](https://mdxjs.com/). diff --git a/examples/with-mdx/astro.config.mjs b/examples/with-mdx/astro.config.mjs new file mode 100644 index 000000000..57011d4ee --- /dev/null +++ b/examples/with-mdx/astro.config.mjs @@ -0,0 +1,11 @@ +import { defineConfig } from 'astro/config'; +import mdx from '@astrojs/mdx'; +import preact from '@astrojs/preact'; + +// https://astro.build/config +export default defineConfig({ + integrations: [ + mdx(), + preact() + ] +}); diff --git a/examples/with-mdx/package.json b/examples/with-mdx/package.json new file mode 100644 index 000000000..fdff7d48d --- /dev/null +++ b/examples/with-mdx/package.json @@ -0,0 +1,17 @@ +{ + "name": "@example/with-mdx", + "version": "0.0.1", + "private": true, + "scripts": { + "dev": "astro dev", + "start": "astro dev", + "build": "astro build", + "preview": "astro preview" + }, + "devDependencies": { + "@astrojs/mdx": "^0.0.1", + "@astrojs/preact": "^0.2.0", + "astro": "^1.0.0-beta.58", + "preact": "^10.6.5" + } +} diff --git a/examples/with-mdx/public/favicon.ico b/examples/with-mdx/public/favicon.ico Binary files differnew file mode 100644 index 000000000..578ad458b --- /dev/null +++ b/examples/with-mdx/public/favicon.ico diff --git a/examples/with-mdx/sandbox.config.json b/examples/with-mdx/sandbox.config.json new file mode 100644 index 000000000..9178af77d --- /dev/null +++ b/examples/with-mdx/sandbox.config.json @@ -0,0 +1,11 @@ +{ + "infiniteLoopProtection": true, + "hardReloadOnChange": false, + "view": "browser", + "template": "node", + "container": { + "port": 3000, + "startScript": "start", + "node": "14" + } +} diff --git a/examples/with-mdx/src/components/Counter.jsx b/examples/with-mdx/src/components/Counter.jsx new file mode 100644 index 000000000..801eefe73 --- /dev/null +++ b/examples/with-mdx/src/components/Counter.jsx @@ -0,0 +1,18 @@ +import { useState } from 'preact/hooks'; + +export default function Counter({ children }) { + const [count, setCount] = useState(0); + const add = () => setCount((i) => i + 1); + const subtract = () => setCount((i) => i - 1); + + return ( + <> + <div class="counter"> + <button onClick={subtract}>-</button> + <pre>{count}</pre> + <button onClick={add}>+</button> + </div> + <div class="counter-message">{children}</div> + </> + ); +} diff --git a/examples/with-mdx/src/components/Title.astro b/examples/with-mdx/src/components/Title.astro new file mode 100644 index 000000000..6d0dcb86c --- /dev/null +++ b/examples/with-mdx/src/components/Title.astro @@ -0,0 +1,7 @@ +<h1><slot /></h1> + +<style> + h1 { + color: red; + } +</style> diff --git a/examples/with-mdx/src/pages/index.mdx b/examples/with-mdx/src/pages/index.mdx new file mode 100644 index 000000000..e541df27c --- /dev/null +++ b/examples/with-mdx/src/pages/index.mdx @@ -0,0 +1,19 @@ +import Counter from '../components/Counter.jsx' +import Title from '../components/Title.astro' +export const components = { h1: Title } + +# Hello world! + +export const authors = [ + {name: 'Jane', email: 'hi@jane.com'}, + {name: 'John', twitter: '@john2002'} +] +export const published = new Date('2022-02-01') + +Written by: {new Intl.ListFormat('en').format(authors.map(d => d.name))}. + +Published on: {new Intl.DateTimeFormat('en', {dateStyle: 'long'}).format(published)}. + +<Counter client:idle> +## Counter +</Counter> diff --git a/examples/with-mdx/tsconfig.json b/examples/with-mdx/tsconfig.json new file mode 100644 index 000000000..7ac81809a --- /dev/null +++ b/examples/with-mdx/tsconfig.json @@ -0,0 +1,15 @@ +{ + "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 Vite runtime. + "types": ["vite/client"] + } +} |