Add awesome section to v3 documentation index page

This commit is contained in:
Dimitry Ivanov 2019-02-17 15:18:12 +03:00
parent a3ee7549a7
commit c390cb0502
2 changed files with 54 additions and 10 deletions

View File

@ -7,6 +7,9 @@
<div class="container-item display" v-html="markdownHtml"></div> <div class="container-item display" v-html="markdownHtml"></div>
</div> </div>
<div class="footer"> <div class="footer">
<!-- <p v-if="permalink">
Permalink: <span v-html="permalink"></span>
</p> -->
<p> <p>
<em> <em>
* Please note that this tool can be used to evaluate how commonmark * Please note that this tool can be used to evaluate how commonmark
@ -18,7 +21,9 @@
<p> <p>
<em> <em>
** For a more sophisticated commonmark sandbox editor ** For a more sophisticated commonmark sandbox editor
<a href="https://spec.commonmark.org/dingus/">the dingus</a> can be used. <a
href="https://spec.commonmark.org/dingus/"
>the dingus</a> can be used.
</em> </em>
</p> </p>
</div> </div>
@ -31,22 +36,40 @@ import commonmark from "commonmark";
const parser = new commonmark.Parser(); const parser = new commonmark.Parser();
const writer = new commonmark.HtmlRenderer(); const writer = new commonmark.HtmlRenderer();
const initialMarkdown = `# Header 1\n\n*Hello* __there!__`;
export default { export default {
name: "CommonmarkSandbox", name: "CommonmarkSandbox",
data() { data() {
return { return {
markdownInput: initialMarkdown, markdownInput: this.initialMarkdown()
markdownHtml: writer.render(parser.parse(initialMarkdown))
}; };
}, },
methods: { methods: {
initialMarkdown() {
// const query = this.$route.query;
// if (query) {
// const md = query.md;
// if (md) {
// query.md = null;
// return md;
// }
// }
return `# Header 1\n\n*Hello* __there!__`;
},
processMarkdown(e) { processMarkdown(e) {
const input = e.target.value; this.markdownInput = e.target.value;
const parsed = parser.parse(input);
this.markdownHtml = writer.render(parsed);
} }
},
computed: {
markdownHtml() {
return writer.render(parser.parse(this.markdownInput));
},
// permalink() {
// if (!this.markdownInput) {
// return null;
// }
// const url = `${window.location.href}?md=${encodeURIComponent(this.markdownInput)}`;
// return `<a href="#" title="${url}" onclick="">click to copy</a>`;
// }
} }
}; };
</script> </script>

View File

@ -70,3 +70,24 @@ Screenshots are taken from sample application. It is a generic markdown viewer
with support to display markdown content via `http`, `https` &amp; `file` schemes with support to display markdown content via `http`, `https` &amp; `file` schemes
and 2 themes included: Light &amp; Dark. It can be downloaded from [releases](https://github.com/noties/Markwon/releases) and 2 themes included: Light &amp; Dark. It can be downloaded from [releases](https://github.com/noties/Markwon/releases)
::: :::
## Awesome Markwon
<u>Applications using Markwon</u>:
* [Partico](https://partiko.app/) - Partiko is a censorship free social network.
* [FairNote](https://play.google.com/store/apps/details?id=com.rgiskard.fairnote) - simple and intuitive notepad app. It gives you speed and efficiency when you write notes, to-do lists, e-mails, or jot down quick ideas.
<u>Extension/plugins</u>:
* [MarkwonCodeEx](https://github.com/kingideayou/MarkwonCodeEx) - Markwon extension support elegant code background.
---
[Help to improve][awesome_link] this section by submitting your application/library/anything
that is using `Markwon`
[awesome_link]: https://github.com/noties/Markwon/issues/new?labels=awesome&body=Please%20provide%20the%20following%3A%0A*%20Project%20name%0A*%20Project%20URL%20(repository%2C%20store%20listing%2C%20web%20page)%0A*%20Optionally%20_brand_%20image%20URL%0A%0APlease%20make%20sure%20that%20there%20is%20the%20**awesome**%20label%20selected%20for%20this%20issue.%0A%0A%F0%9F%99%8C%20