diff options
Diffstat (limited to 'examples/with-markdown/src')
| -rw-r--r-- | examples/with-markdown/src/components/PreactCounter.tsx | 26 | ||||
| -rw-r--r-- | examples/with-markdown/src/components/ReactCounter.jsx | 26 | ||||
| -rw-r--r-- | examples/with-markdown/src/components/VueCounter.vue | 36 | ||||
| -rw-r--r-- | examples/with-markdown/src/layouts/main.astro | 20 | ||||
| -rw-r--r-- | examples/with-markdown/src/pages/external.astro | 16 | ||||
| -rw-r--r-- | examples/with-markdown/src/pages/index.astro | 52 | ||||
| -rw-r--r-- | examples/with-markdown/src/styles/global.css | 162 |
7 files changed, 170 insertions, 168 deletions
diff --git a/examples/with-markdown/src/components/PreactCounter.tsx b/examples/with-markdown/src/components/PreactCounter.tsx index e3761643f..e67afb4fe 100644 --- a/examples/with-markdown/src/components/PreactCounter.tsx +++ b/examples/with-markdown/src/components/PreactCounter.tsx @@ -3,18 +3,18 @@ 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); + 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> - </> - ); + 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 index 92871a8d8..e322f7050 100644 --- a/examples/with-markdown/src/components/ReactCounter.jsx +++ b/examples/with-markdown/src/components/ReactCounter.jsx @@ -2,18 +2,18 @@ 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); + 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> - </> - ); + 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/VueCounter.vue b/examples/with-markdown/src/components/VueCounter.vue index 2703b8b9b..2f25066dc 100644 --- a/examples/with-markdown/src/components/VueCounter.vue +++ b/examples/with-markdown/src/components/VueCounter.vue @@ -1,27 +1,27 @@ <template> - <div class="counter"> - <button @click="subtract()">-</button> - <pre>{{ count }}</pre> - <button @click="add()">+</button> - </div> - <div class="children"> - <slot /> - </div> + <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); + setup() { + const count = ref(0); + const add = () => (count.value = count.value + 1); + const subtract = () => (count.value = count.value - 1); - return { - count, - add, - subtract, - }; - }, + return { + count, + add, + subtract, + }; + }, }; </script> diff --git a/examples/with-markdown/src/layouts/main.astro b/examples/with-markdown/src/layouts/main.astro index ae7f04565..b3fdb345e 100644 --- a/examples/with-markdown/src/layouts/main.astro +++ b/examples/with-markdown/src/layouts/main.astro @@ -2,16 +2,16 @@ const { content } = Astro.props; --- -<html lang={ content.lang || 'en' }> - <head> - <meta charset="utf-8"> +<html lang={content.lang || 'en'}> + <head> + <meta charset="utf-8" /> - <link rel="icon" type="image/x-icon" href="/favicon.ico" /> + <link rel="icon" type="image/x-icon" href="/favicon.ico" /> - <title>{content.title}</title> - <link rel="stylesheet" href={Astro.resolve('../styles/global.css')}> - </head> - <body> - <slot/> - </body> + <title>{content.title}</title> + <link rel="stylesheet" href={Astro.resolve('../styles/global.css')} /> + </head> + <body> + <slot /> + </body> </html> diff --git a/examples/with-markdown/src/pages/external.astro b/examples/with-markdown/src/pages/external.astro index 1149666b2..82cac13d4 100644 --- a/examples/with-markdown/src/pages/external.astro +++ b/examples/with-markdown/src/pages/external.astro @@ -7,11 +7,13 @@ const content = `Markdown *content* to render`; --- <Layout content={{ title }}> - <main> - <div> - <Markdown {content} /> - <p>Some other stuff</p> - </div> - <p>Lastly...</p> - </main> + <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 index 7249f07cd..e70e12f35 100644 --- a/examples/with-markdown/src/pages/index.astro +++ b/examples/with-markdown/src/pages/index.astro @@ -18,48 +18,48 @@ 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! +<Layout content={{ title }}> + <Markdown> + # Introducing {title} - > It's inspired by [`MDX`](https://mdxjs.com/) and powered by [`remark`](https://github.com/remarkjs/remark). + **Astro Markdown** brings native Markdown support to HTML! - The best part? It comes with all the Astro features you expect. + > It's inspired by [`MDX`](https://mdxjs.com/) and powered by [`remark`](https://github.com/remarkjs/remark). - [Other example](./other) + The best part? It comes with all the Astro features you expect. - ## Embed framework components + [Other example](./other) - <ReactCounter client:visible /> - <PreactCounter client:visible /> - <VueCounter client:visible /> - <SvelteCounter client:visible /> + ## Embed framework components - ## Use Expressions + <ReactCounter client:visible /> + <PreactCounter client:visible /> + <VueCounter client:visible /> + <SvelteCounter client:visible /> - You can use any {variable} in scope and use JavaScript for templating ({items.join(', ')}) + ## Use Expressions - ## Oh yeah... + You can use any {variable} in scope and use JavaScript for templating ({items.join(', ')}) - <ReactCounter client:visible> + ## Oh yeah... - 🤯 It's also _recursive_! + <ReactCounter client:visible> - ### Markdown can be embedded in any child component + 🤯 It's also _recursive_! - </ReactCounter> + ### Markdown can be embedded in any child component - ## Code + </ReactCounter> - Should work! + ## Code - ```js - import Something from './another'; + Should work! - const thing = new Something(); - ``` + ```js + import Something from './another'; - </Markdown> + const thing = new Something(); + ``` + </Markdown> </Layout> diff --git a/examples/with-markdown/src/styles/global.css b/examples/with-markdown/src/styles/global.css index 16cd4577e..577e06182 100644 --- a/examples/with-markdown/src/styles/global.css +++ b/examples/with-markdown/src/styles/global.css @@ -1,69 +1,69 @@ 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; + 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; + text-shadow: none; + background: #b3d4fc; } @media print { - pre, - code { - text-shadow: none; - } + pre, + code { + text-shadow: none; + } } pre { - margin: 0.5rem 0 16px; - padding: 0.8rem 1rem 0.9rem; - overflow: auto; - background: #282a36; - border-radius: 4px; + 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; + padding: 0.1em 0.3em; + color: #db4c69; + background: #f9f2f4; + border-radius: 0.3em; + white-space: pre-wrap; } /********************************************************* * Tokens */ .namespace { - opacity: 0.7; + opacity: 0.7; } .token.comment, .token.prolog, .token.doctype, .token.cdata { - color: #6a9955; + color: #6a9955; } .token.punctuation { - color: #d4d4d4; + color: #d4d4d4; } .token.property, @@ -73,7 +73,7 @@ pre { .token.constant, .token.symbol, .token.deleted { - color: #b5cea8; + color: #b5cea8; } .token.selector, @@ -82,7 +82,7 @@ pre { .token.char, .token.builtin, .token.inserted { - color: #ce9178; + color: #ce9178; } .token.operator, @@ -90,86 +90,86 @@ pre { .token.url, .language-css .token.string, .style .token.string { - color: #d4d4d4; - background: #2d3748; + color: #d4d4d4; + background: #2d3748; } .token.atrule, .token.attr-value, .token.keyword { - color: #c586c0; + color: #c586c0; } .token.function { - color: #dcdcaa; + color: #dcdcaa; } .token.regex, .token.important, .token.variable { - color: #d16969; + color: #d16969; } .token.important, .token.bold { - font-weight: bold; + font-weight: bold; } .token.italic { - font-style: italic; + font-style: italic; } .token.constant { - color: #9cdcfe; + color: #9cdcfe; } .token.class-name { - color: #4ec9b0; + color: #4ec9b0; } .token.parameter { - color: #9cdcfe; + color: #9cdcfe; } .token.interpolation { - color: #9cdcfe; + color: #9cdcfe; } .token.punctuation.interpolation-punctuation { - color: #569cd6; + color: #569cd6; } .token.boolean { - color: #569cd6; + color: #569cd6; } .token.property { - color: #9cdcfe; + color: #9cdcfe; } .token.selector { - color: #d7ba7d; + color: #d7ba7d; } .token.tag { - color: #569cd6; + color: #569cd6; } .token.attr-name { - color: #9cdcfe; + color: #9cdcfe; } .token.attr-value { - color: #ce9178; + color: #ce9178; } .token.entity { - color: #4ec9b0; - cursor: unset; + color: #4ec9b0; + cursor: unset; } .token.namespace { - color: #4ec9b0; + color: #4ec9b0; } /********************************************************* @@ -177,58 +177,58 @@ pre { */ pre[class*='language-javascript'], code[class*='language-javascript'] { - color: #4ec9b0; + color: #4ec9b0; } pre[class*='language-css'], code[class*='language-css'] { - color: #ce9178; + color: #ce9178; } pre[class*='language-html'], code[class*='language-html'] { - color: #d4d4d4; + color: #d4d4d4; } .language-html .token.punctuation { - color: #808080; + color: #808080; } /********************************************************* * Line highlighting */ pre[data-line] { - position: relative; + position: relative; } pre > code { - position: relative; - z-index: 1; + 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; + 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; + color: #d4d4d4; } .token.comment { - color: #fff7; + color: #fff7; } body { - max-width: 900px; - margin: auto; + max-width: 900px; + margin: auto; } |