Add awesome section to v3 documentation index page

docs/.vuepress/components/CommonmarkSandbox.vue

@@ -7,6 +7,9 @@
       <div class="container-item display" v-html="markdownHtml"></div>
     </div>
     <div class="footer">
+      <!-- <p v-if="permalink">
+        Permalink: <span v-html="permalink"></span>
+      </p> -->
       <p>
         <em>
           * Please note that this tool can be used to evaluate how commonmark
@@ -18,7 +21,9 @@
       <p>
         <em>
           ** 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>
       </p>
     </div>
@@ -31,22 +36,40 @@ import commonmark from "commonmark";
 const parser = new commonmark.Parser();
 const writer = new commonmark.HtmlRenderer();
 
-const initialMarkdown = `# Header 1\n\n*Hello* __there!__`;
-
 export default {
   name: "CommonmarkSandbox",
   data() {
     return {
-      markdownInput: initialMarkdown,
-      markdownHtml: writer.render(parser.parse(initialMarkdown))
+      markdownInput: this.initialMarkdown()
     };
   },
   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) {
-      const input = e.target.value;
-      const parsed = parser.parse(input);
-      this.markdownHtml = writer.render(parsed);
+      this.markdownInput = e.target.value;
     }
+  },
+  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>
@@ -74,8 +97,8 @@ export default {
   background-color: rgba(0, 0, 0, 0.05);
 }
 .footer {
-    color: #666;
-    font-size: 0.85em;
+  color: #666;
+  font-size: 0.85em;
 }
 </style>
 

docs/docs/v3/README.md

@@ -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` & `file` schemes 
 and 2 themes included: Light & 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