diff options
Diffstat (limited to 'examples')
| -rw-r--r-- | examples/with-markdown-plugins/.gitignore | 18 | ||||
| -rw-r--r-- | examples/with-markdown-plugins/.npmrc | 2 | ||||
| -rw-r--r-- | examples/with-markdown-plugins/astro.config.mjs | 25 | ||||
| -rw-r--r-- | examples/with-markdown-plugins/package.json | 20 | ||||
| -rw-r--r-- | examples/with-markdown-plugins/public/favicon.svg | 11 | ||||
| -rw-r--r-- | examples/with-markdown-plugins/public/global.css | 53 | ||||
| -rw-r--r-- | examples/with-markdown-plugins/src/layouts/main.astro | 32 | ||||
| -rw-r--r-- | examples/with-markdown-plugins/src/pages/about.astro | 20 | ||||
| -rw-r--r-- | examples/with-markdown-plugins/src/pages/index.md | 34 |
9 files changed, 215 insertions, 0 deletions
diff --git a/examples/with-markdown-plugins/.gitignore b/examples/with-markdown-plugins/.gitignore new file mode 100644 index 000000000..d436c6dad --- /dev/null +++ b/examples/with-markdown-plugins/.gitignore @@ -0,0 +1,18 @@ +# build output +dist + +# dependencies +node_modules/ +.snowpack/ + +# logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# environment variables +.env +.env.production + +# macOS-specific files +.DS_Store diff --git a/examples/with-markdown-plugins/.npmrc b/examples/with-markdown-plugins/.npmrc new file mode 100644 index 000000000..0cc653b2c --- /dev/null +++ b/examples/with-markdown-plugins/.npmrc @@ -0,0 +1,2 @@ +## force pnpm to hoist +shamefully-hoist = true
\ No newline at end of file diff --git a/examples/with-markdown-plugins/astro.config.mjs b/examples/with-markdown-plugins/astro.config.mjs new file mode 100644 index 000000000..9057b5c2f --- /dev/null +++ b/examples/with-markdown-plugins/astro.config.mjs @@ -0,0 +1,25 @@ +export default { + // projectRoot: '.', // Where to resolve all URLs relative to. Useful if you have a monorepo project. + // pages: './src/pages', // Path to Astro components, pages, and data + // dist: './dist', // When running `astro build`, path to final static output + // public: './public', // A folder of static files Astro will copy to the root. Useful for favicons, images, and other files that don’t need processing. + buildOptions: { + site: 'http://example.com', // Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs. + // sitemap: true, // Generate sitemap (set to "false" to disable) + }, + markdownOptions: { + remarkPlugins: [ + 'remark-code-titles', + 'remark-slug', + ['remark-autolink-headings', { behavior: 'prepend' }], + ], + rehypePlugins: [ + ['rehype-toc', { headings: ["h2", "h3"] }], + ['rehype-add-classes', { 'h1,h2,h3': 'title', }], + ] + }, + devOptions: { + // port: 3000, // The port to run the dev server on. + // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js' + }, +}; diff --git a/examples/with-markdown-plugins/package.json b/examples/with-markdown-plugins/package.json new file mode 100644 index 000000000..f37b72225 --- /dev/null +++ b/examples/with-markdown-plugins/package.json @@ -0,0 +1,20 @@ +{ + "name": "@example/with-markdown-plugins", + "version": "0.0.2", + "private": true, + "scripts": { + "start": "astro dev", + "build": "astro build" + }, + "devDependencies": { + "astro": "^0.15.0", + "rehype-add-classes": "^1.0.0", + "rehype-toc": "^3.0.2", + "remark-autolink-headings": "^6.0.1", + "remark-code-titles": "^0.1.2", + "remark-slug": "^6.0.0" + }, + "snowpack": { + "workspaceRoot": "../.." + } +} diff --git a/examples/with-markdown-plugins/public/favicon.svg b/examples/with-markdown-plugins/public/favicon.svg new file mode 100644 index 000000000..542f90aec --- /dev/null +++ b/examples/with-markdown-plugins/public/favicon.svg @@ -0,0 +1,11 @@ +<svg width="256" height="256" fill="none" xmlns="http://www.w3.org/2000/svg"> + <style> + #flame { fill: #FF5D01; } + #a { fill: #000014; } + @media (prefers-color-scheme: dark) { + #a { fill: #fff; } + } + </style> + <path id="a" fill-rule="evenodd" clip-rule="evenodd" d="M163.008 18.929c1.944 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53l-28.198-95.29a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.225 180.225 0 00-52.01 17.557l43.52-142.281c1.99-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.086 1.157a16.004 16.004 0 016.487 4.806z" /> + <path id="flame" fill-rule="evenodd" clip-rule="evenodd" d="M168.19 180.151c-7.139 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.961 10.367-1.961 13.902 0 0-1.056 17.355 11.015 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.974-19.87 5.976-3.79 12.616-8.001 17.192-16.449a31.024 31.024 0 003.743-14.82c0-3.299-.513-6.479-1.463-9.463z" /> +</svg> diff --git a/examples/with-markdown-plugins/public/global.css b/examples/with-markdown-plugins/public/global.css new file mode 100644 index 000000000..f1e536546 --- /dev/null +++ b/examples/with-markdown-plugins/public/global.css @@ -0,0 +1,53 @@ +body { + font-family: system-ui; +} + +.content { + max-width: 640px; + margin: 40px auto; + padding: 0 20px; +} + +.title { + position: relative; +} +.title a { + position: absolute; + display: block; + height: 100%; + width: 100%; + color: inherit; +} + +.title a:before { + position: absolute; + right: 100%; + display: block; + content: '#'; + margin-right: 0.2em; + visibility: hidden; + opacity: 0.5; +} + +.title:hover a:before { + visibility: visible; +} + +.remark-code-title, +pre[class^="language-"] { + padding: 10px; + margin: 0; +} + +.remark-code-title { + border-bottom: 1px solid rgba(0,0,0,.05); + border-radius: 4px 4px 0 0; + background: rgba(0,0,0,.08); + font-family: monospace; + font-weight: bold; +} + +pre[class^="language-"] { + background: rgba(0,0,0,.05); + border-radius: 0 0 4px 4px; +} diff --git a/examples/with-markdown-plugins/src/layouts/main.astro b/examples/with-markdown-plugins/src/layouts/main.astro new file mode 100644 index 000000000..d324d2017 --- /dev/null +++ b/examples/with-markdown-plugins/src/layouts/main.astro @@ -0,0 +1,32 @@ +--- +const { content } = Astro.props; +--- + +<html> + <head> + <meta charset="utf-8" /> + <title>{content.title}</title> + <link rel="stylesheet" href="/global.css" /> + <style> + .nav { + border-bottom: 1px solid #ccc; + margin-bottom: 40px; + padding-bottom: 20px; + } + .nav > * + * { + margin-left: 10px; + } + </style> + </head> + <body> + <main class="content"> + <header> + <nav class="nav"> + <a href="/">Home</a> + <a href="/about">About</a> + </nav> + </header> + <slot /> + </main> + </body> +</html> diff --git a/examples/with-markdown-plugins/src/pages/about.astro b/examples/with-markdown-plugins/src/pages/about.astro new file mode 100644 index 000000000..c313f98a9 --- /dev/null +++ b/examples/with-markdown-plugins/src/pages/about.astro @@ -0,0 +1,20 @@ +--- +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-plugins/src/pages/index.md b/examples/with-markdown-plugins/src/pages/index.md new file mode 100644 index 000000000..a6f8879a8 --- /dev/null +++ b/examples/with-markdown-plugins/src/pages/index.md @@ -0,0 +1,34 @@ +--- +layout: ../layouts/main.astro +title: Asto with Remark Plugins +--- + +# Heading 1 + +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. + +## Heading 2 + +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. + +### Heading 3 + +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. + +### Heading 3 + +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. + +```jsx:file.jsx +import Router from 'next/router' + +function MyComponent() { + const [show, setShow] = useState(false) + + useEffect(() => { + console.log(2) + }, []) + + return <>...</> +} +``` |
