diff --git a/src/components/markdown/examples/markdown-blockquotes.tsx b/src/components/markdown/examples/markdown-blockquotes.tsx new file mode 100644 index 00000000..86a78a2d --- /dev/null +++ b/src/components/markdown/examples/markdown-blockquotes.tsx @@ -0,0 +1,23 @@ +import { Component, h } from '@stencil/core'; + +const markdown = ` +> Blockquotes are very handy in email to emulate reply text. +> This line is part of the same quote. + +Quote break. + +> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote. +`; + +/** + * Blockquotes + */ +@Component({ + tag: 'kompendium-example-markdown-blockquotes', + shadow: true, +}) +export class MarkdownBlockquotesExample { + public render(): HTMLElement { + return ; + } +} diff --git a/src/components/markdown/examples/markdown-callout.tsx b/src/components/markdown/examples/markdown-callout.tsx new file mode 100644 index 00000000..b6fd92f2 --- /dev/null +++ b/src/components/markdown/examples/markdown-callout.tsx @@ -0,0 +1,40 @@ +import { Component, h } from '@stencil/core'; + +const markdown = ` +:::note +Some important note. +::: + +:::tip +A very useful tip! +::: + +:::warning +Just be careful. +::: + +:::danger +This is too risky. +::: + +:::important +This is vey important! +::: + +:::info +Just for your information… +::: +`; + +/** + * Callout + */ +@Component({ + tag: 'kompendium-example-markdown-callout', + shadow: true, +}) +export class MarkdownCalloutExample { + public render(): HTMLElement { + return ; + } +} diff --git a/src/components/markdown/examples/markdown-code.tsx b/src/components/markdown/examples/markdown-code.tsx new file mode 100644 index 00000000..cbefcb7e --- /dev/null +++ b/src/components/markdown/examples/markdown-code.tsx @@ -0,0 +1,26 @@ +import { Component, h } from '@stencil/core'; + +const markdown = ` +~~~ +const s = "JavaScript no syntax highlighting"; +alert(s); +~~~ + +~~~javascript +const a = "JavaScript no syntax highlighting"; +alert(a); +~~~ +`; + +/** + * Code + */ +@Component({ + tag: 'kompendium-example-markdown-code', + shadow: true, +}) +export class MarkdownCodeExample { + public render(): HTMLElement { + return ; + } +} diff --git a/src/components/markdown/examples/markdown-emphasis.tsx b/src/components/markdown/examples/markdown-emphasis.tsx new file mode 100644 index 00000000..b9297e6b --- /dev/null +++ b/src/components/markdown/examples/markdown-emphasis.tsx @@ -0,0 +1,24 @@ +import { Component, h } from '@stencil/core'; + +const markdown = ` +Emphasis, aka italics, with *asterisks* or _underscores_. + +Strong emphasis, aka bold, with **asterisks** or __underscores__. + +Combined emphasis with **asterisks and _underscores_**. + +Strikethrough uses two tildes. ~~Scratch this.~~ +`; + +/** + * Emphasis + */ +@Component({ + tag: 'kompendium-example-markdown-emphasis', + shadow: true, +}) +export class MarkdownEmphasisExample { + public render(): HTMLElement { + return ; + } +} diff --git a/src/components/markdown/examples/markdown-example.ts b/src/components/markdown/examples/markdown-example.ts deleted file mode 100644 index 68f3a1fe..00000000 --- a/src/components/markdown/examples/markdown-example.ts +++ /dev/null @@ -1,149 +0,0 @@ -export const markdownExample = ` -## Headings - -The following HTML \`

\`—\`

\` elements represent six levels of section headings. \`

\` is the highest section level while \`

\` is the lowest. - -# H1 -## H2 -### H3 -#### H4 -##### H5 -###### H6 - -## Paragraph - -Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat. - -Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat. - -## Blockquotes - -The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a \`footer\` or \`cite\` element, and optionally with in-line changes such as annotations and abbreviations. - -#### Blockquote without attribution - -> Tiam, ad mint andaepu dandae nostion secatur sequo quae. -> **Note** that you can use *Markdown syntax* within a blockquote. - -#### Blockquote with attribution - -> Don't communicate by sharing memory, share memory by communicating.

-> — Rob Pike[^1] - - -[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015. - -## Tables - -Tables aren't part of the core Markdown spec, but Hugo supports supports them out-of-the-box. - - | Name | Age | - | ----- | --- | - | Bob | 27 | - | Alice | 23 | - -#### Inline Markdown within tables - -| Inline    | Markdown    | In    | Table | -| ------------------------ | -------------------------- | ----------------------------------- | ------ | -| *italics* | **bold** | ~~strikethrough~~    | \`code\` | - -## Code Blocks - -#### Code block with backticks - -\`\`\` -html - - - - - Example HTML5 Document - - -

Test

- - -\`\`\` - -#### Code block indented with four spaces - - - - - - Example HTML5 Document - - -

Test

- - - -## List Types - -#### Ordered List - -1. First item -2. Second item -3. Third item - -#### Unordered List - -* List item -* Another item -* And another item - -#### Nested list - -* Fruit - * Apple - * Orange - * Banana -* Dairy - * Milk - * Cheese - -## Other Elements — abbr, sub, sup, kbd, mark - -GIF is a bitmap image format. - -H2O - -Xn + Yn = Zn - -Press CTRL+ALT+Delete to end the session. - -Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures. - -## Emoji Rendering - -

🙈 :see_no_evil: 🙉 :hear_no_evil: 🙊 :speak_no_evil:

-
- -## Callout Rendering - -:::note -Some important note. -::: - -:::tip -A very useful tip! -::: - -:::warning -Just be careful. -::: - -:::danger -This is too risky. -::: - -:::important -This is vey important! -::: - -:::info -Just for your information… -::: - -`; diff --git a/src/components/markdown/examples/markdown-headings.tsx b/src/components/markdown/examples/markdown-headings.tsx new file mode 100644 index 00000000..118c96a6 --- /dev/null +++ b/src/components/markdown/examples/markdown-headings.tsx @@ -0,0 +1,31 @@ +import { Component, h } from '@stencil/core'; + +const markdown = ` +# Headline 1 +## Headline 2 +### Headline 3 +#### Headline 4 +##### Headline 5 +###### Headline 6 + +Alternatively, H1 and H2 can be typed underline-ish style like this: + +Alternative H1 +=== + +Alternative H2 +--- +`; + +/** + * Headings + */ +@Component({ + tag: 'kompendium-example-markdown-headings', + shadow: true, +}) +export class MarkdownHeadingsExample { + public render(): HTMLElement { + return ; + } +} diff --git a/src/components/markdown/examples/markdown-horizontal-rule.tsx b/src/components/markdown/examples/markdown-horizontal-rule.tsx new file mode 100644 index 00000000..700f2c65 --- /dev/null +++ b/src/components/markdown/examples/markdown-horizontal-rule.tsx @@ -0,0 +1,30 @@ +import { Component, h } from '@stencil/core'; + +const markdown = ` +Three or more of… + +--- + +Hyphens, + +*** + +Asterisks, + +___ + +Or Underscores +`; + +/** + * Horizontal Rule + */ +@Component({ + tag: 'kompendium-example-markdown-horizontal-rule', + shadow: true, +}) +export class MarkdownHorizontalRuleExample { + public render(): HTMLElement { + return ; + } +} diff --git a/src/components/markdown/examples/markdown-images.tsx b/src/components/markdown/examples/markdown-images.tsx new file mode 100644 index 00000000..3b28804e --- /dev/null +++ b/src/components/markdown/examples/markdown-images.tsx @@ -0,0 +1,26 @@ +import { Component, h } from '@stencil/core'; + +const markdown = ` +Here's our logo (hover to see the title text): + +Inline-style: +![alt text](https://docs.kompendium.dev/~gitbook/image?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F35954987%2F99229931-f5889200-27ee-11eb-934e-6284b6978b07.png&width=300&dpr=2&quality=100&sign=5a11d8e&sv=1 "Logo Title Text 1") + +Reference-style: +![alt text][logo] + +[logo]: https://docs.kompendium.dev/~gitbook/image?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F35954987%2F99229931-f5889200-27ee-11eb-934e-6284b6978b07.png&width=300&dpr=2&quality=100&sign=5a11d8e&sv=1 "Logo Title Text 2" +`; + +/** + * Images + */ +@Component({ + tag: 'kompendium-example-markdown-images', + shadow: true, +}) +export class MarkdownImageExample { + public render(): HTMLElement { + return ; + } +} diff --git a/src/components/markdown/examples/markdown-links.tsx b/src/components/markdown/examples/markdown-links.tsx new file mode 100644 index 00000000..ea715267 --- /dev/null +++ b/src/components/markdown/examples/markdown-links.tsx @@ -0,0 +1,40 @@ +import { Component, h } from '@stencil/core'; + +const markdown = ` +URLs and URLs in angle brackets will automatically get turned into links, like +http://www.example.com or . + +*** + +[I'm an inline-style link](https://www.google.com) + +[I'm an inline-style link with title](https://www.google.com "Google's Homepage") + +[I'm a reference-style link][Arbitrary case-insensitive reference text] + +[I'm a relative reference to a repository file](../blob/master/LICENSE) + +[You can use numbers for reference-style link definitions][1] + +Or leave it empty and use the [link text itself]. + +Below, you find some text that the reference links can follow, but they will not be rendered in the body. + +[arbitrary case-insensitive reference text]: https://www.mozilla.org +[1]: http://wikipedia.org +[link text itself]: http://www.wikipedia.org +`; + +/** + * Links + * There are two ways to create links. + */ +@Component({ + tag: 'kompendium-example-markdown-links', + shadow: true, +}) +export class MarkdownLinksExample { + public render(): HTMLElement { + return ; + } +} diff --git a/src/components/markdown/examples/markdown-lists.tsx b/src/components/markdown/examples/markdown-lists.tsx new file mode 100644 index 00000000..e1f5bf0c --- /dev/null +++ b/src/components/markdown/examples/markdown-lists.tsx @@ -0,0 +1,33 @@ +import { Component, h } from '@stencil/core'; + +const markdown = ` +1. First ordered list item +2. Another item + * Unordered sub-list +1. Actual numbers don't matter, just that it's a number + 1. Ordered sub-list +4. And another item. + + You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown). + + To have a line break without a paragraph, you will need to use two trailing spaces. + Note that this line is separate, but within the same paragraph. + (This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.) + +* Unordered list can use asterisks +- Or minuses ++ Or pluses +`; + +/** + * Lists + */ +@Component({ + tag: 'kompendium-example-markdown-lists', + shadow: true, +}) +export class MarkdownListExample { + public render(): HTMLElement { + return ; + } +} diff --git a/src/components/markdown/examples/markdown-other-elements.tsx b/src/components/markdown/examples/markdown-other-elements.tsx new file mode 100644 index 00000000..25a459c7 --- /dev/null +++ b/src/components/markdown/examples/markdown-other-elements.tsx @@ -0,0 +1,33 @@ +import { Component, h } from '@stencil/core'; + +const markdown = ` +## abbr, sub, sup, kbd, mark + +GIF is a bitmap image format. + +H2O + +Xn + Yn = Zn + +Press CTRL+ALT+Delete to end the session. + +Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures. + +## Emoji Rendering + +

🙈 :see_no_evil: 🙉 :hear_no_evil: 🙊 :speak_no_evil:

+

+`; + +/** + * Other Elements + */ +@Component({ + tag: 'kompendium-example-markdown-other', + shadow: true, +}) +export class MarkdownOtherExample { + public render(): HTMLElement { + return ; + } +} diff --git a/src/components/markdown/examples/markdown-tables.tsx b/src/components/markdown/examples/markdown-tables.tsx new file mode 100644 index 00000000..56340005 --- /dev/null +++ b/src/components/markdown/examples/markdown-tables.tsx @@ -0,0 +1,33 @@ +import { Component, h } from '@stencil/core'; + +const markdown = ` +Colons can be used to align columns. + +| Tables | Are | Cool | +| ------------- |:-------------:| -----:| +| col 3 is | right-aligned | $1600 | +| col 2 is | centered | $12 | +| zebra stripes | are neat | $1 | + +There must be at least 3 dashes separating each header cell. +The outer pipes (|) are optional, and you don't need to make the +raw Markdown line up prettily. You can also use inline Markdown. + +Markdown | Less | Pretty +--- | --- | --- +*Still* | renders | **nicely** +1 | 2 | 3 +`; + +/** + * Tables + */ +@Component({ + tag: 'kompendium-example-markdown-tables', + shadow: true, +}) +export class MarkdownTablesExample { + public render(): HTMLElement { + return ; + } +} diff --git a/src/components/markdown/examples/markdown.tsx b/src/components/markdown/examples/markdown.tsx deleted file mode 100644 index c39196df..00000000 --- a/src/components/markdown/examples/markdown.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { Component, h } from '@stencil/core'; -import { markdownExample } from './markdown-example'; - -/** - * This is a simple example of how the `kompendium-markdown` component is used - * @sourceFile markdown-example.ts - */ -@Component({ - tag: 'kompendium-example-markdown', - shadow: true, -}) -export class MarkdownExample { - public render(): HTMLElement { - return ; - } -} diff --git a/src/components/markdown/markdown.tsx b/src/components/markdown/markdown.tsx index fff9e450..4c572db3 100644 --- a/src/components/markdown/markdown.tsx +++ b/src/components/markdown/markdown.tsx @@ -4,7 +4,17 @@ import { getTypes } from './markdown-types'; /** * This component renders markdown - * @exampleComponent kompendium-example-markdown + * @exampleComponent kompendium-example-markdown-headings + * @exampleComponent kompendium-example-markdown-emphasis + * @exampleComponent kompendium-example-markdown-lists + * @exampleComponent kompendium-example-markdown-links + * @exampleComponent kompendium-example-markdown-images + * @exampleComponent kompendium-example-markdown-code + * @exampleComponent kompendium-example-markdown-tables + * @exampleComponent kompendium-example-markdown-blockquotes + * @exampleComponent kompendium-example-markdown-horizontal-rule + * @exampleComponent kompendium-example-markdown-callout + * @exampleComponent kompendium-example-markdown-other */ @Component({ tag: 'kompendium-markdown', @@ -32,8 +42,16 @@ export class Markdown { private async renderMarkdown() { const types = getTypes(); const file = await markdownToHtml(this.text, types); - this.host.shadowRoot.querySelector('#root').innerHTML = - file?.toString(); + + let fileContent = typeof file === 'string' ? file : file.toString(); + + fileContent = fileContent.replace(/
(.*?)<\/h5>/g, (_match, p1) => { + const id = p1.toLowerCase().replace(/\s+/g, '-'); + + return `
${p1}
`; + }); + + this.host.shadowRoot.querySelector('#root').innerHTML = fileContent; } render(): HTMLElement {