diff options
| -rw-r--r-- | package-lock.json | 154 | ||||
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | src/layouts/default.vue | 25 | ||||
| -rw-r--r-- | src/pages/UploadCreate.vue | 19 | ||||
| -rw-r--r-- | src/pages/UploadDetail.vue | 7 |
5 files changed, 192 insertions, 14 deletions
diff --git a/package-lock.json b/package-lock.json index 39a9ce4..49d7f59 100644 --- a/package-lock.json +++ b/package-lock.json @@ -232,7 +232,6 @@ "version": "1.0.10", "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", - "dev": true, "requires": { "sprintf-js": "1.0.3" } @@ -5464,6 +5463,11 @@ "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0=", "dev": true }, + "highlight.js": { + "version": "9.12.0", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.12.0.tgz", + "integrity": "sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4=" + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -6457,6 +6461,14 @@ "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-2.2.0.tgz", "integrity": "sha1-fYa9VmefWM5qhHBKZX3TkruoGnk=" }, + "katex": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/katex/-/katex-0.6.0.tgz", + "integrity": "sha1-EkGOCRIcBckgQbazuftrqyE8tvM=", + "requires": { + "match-at": "0.1.1" + } + }, "killable": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.0.tgz", @@ -6516,6 +6528,14 @@ "type-check": "0.3.2" } }, + "linkify-it": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-1.2.4.tgz", + "integrity": "sha1-B3NSbDF8j9E71TTuHRgP+Iq/iBo=", + "requires": { + "uc.micro": "1.0.5" + } + }, "load-json-file": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz", @@ -6797,6 +6817,92 @@ "object-visit": "1.0.1" } }, + "markdown-it": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-6.1.1.tgz", + "integrity": "sha1-ztA39Ec+6fUVOsQU933IPJG6knw=", + "requires": { + "argparse": "1.0.10", + "entities": "1.1.1", + "linkify-it": "1.2.4", + "mdurl": "1.0.1", + "uc.micro": "1.0.5" + } + }, + "markdown-it-abbr": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/markdown-it-abbr/-/markdown-it-abbr-1.0.4.tgz", + "integrity": "sha1-1mtTZFIcuz3Yqlna37ovtoZcj9g=" + }, + "markdown-it-deflist": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/markdown-it-deflist/-/markdown-it-deflist-2.0.3.tgz", + "integrity": "sha512-/BNZ8ksW42bflm1qQLnRI09oqU2847Z7MVavrR0MORyKLtiUYOMpwtlAfMSZAQU9UCvaUZMpgVAqoS3vpToJxw==" + }, + "markdown-it-emoji": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/markdown-it-emoji/-/markdown-it-emoji-1.4.0.tgz", + "integrity": "sha1-m+4OmpkKljupbfaYDE/dsF37Tcw=" + }, + "markdown-it-footnote": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/markdown-it-footnote/-/markdown-it-footnote-2.0.0.tgz", + "integrity": "sha1-FOnE9o/xLPNU+jZa43gnboEEypQ=" + }, + "markdown-it-ins": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/markdown-it-ins/-/markdown-it-ins-2.0.0.tgz", + "integrity": "sha1-papqMPHi9x6Ul1Z8/f9A8f3mdIM=" + }, + "markdown-it-katex": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/markdown-it-katex/-/markdown-it-katex-2.0.3.tgz", + "integrity": "sha1-17hqGuoLnWSW+rTnkZoY/e9YnDk=", + "requires": { + "katex": "0.6.0" + } + }, + "markdown-it-mark": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/markdown-it-mark/-/markdown-it-mark-2.0.0.tgz", + "integrity": "sha1-RqGqlHEFrtgYiXjgoBYXnkBPQsc=" + }, + "markdown-it-sub": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/markdown-it-sub/-/markdown-it-sub-1.0.0.tgz", + "integrity": "sha1-N1/WAm6ufdywEkl/ZBEZXqHjr+g=" + }, + "markdown-it-sup": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/markdown-it-sup/-/markdown-it-sup-1.0.0.tgz", + "integrity": "sha1-y5yf+RpSVawI8/09YyhuFd8KH8M=" + }, + "markdown-it-task-lists": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/markdown-it-task-lists/-/markdown-it-task-lists-2.1.0.tgz", + "integrity": "sha512-3mT1oQ/brZiV719l3iY/ZIEQLIn60Y9U840l4hh3sA1seHM+ZZjzE5Env1+V1bWqKE1BeVffiuE7qNALzh7r2Q==" + }, + "markdown-it-toc-and-anchor": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/markdown-it-toc-and-anchor/-/markdown-it-toc-and-anchor-4.1.2.tgz", + "integrity": "sha1-snH2lKcL9xnmtygFbXvZMdNkIU0=", + "requires": { + "clone": "2.1.1", + "uslug": "1.0.4" + }, + "dependencies": { + "clone": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.1.tgz", + "integrity": "sha1-0hfR6WERjjrJpLi7oyhVU79kfNs=" + } + } + }, + "match-at": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/match-at/-/match-at-0.1.1.tgz", + "integrity": "sha512-h4Yd392z9mST+dzc+yjuybOGFNOZjmXIPKWjxBd1Bb23r4SmDOsk2NYCU2BMUBGbSpZqwVsZYNq26QS3xfaT3Q==" + }, "math-expression-evaluator": { "version": "1.2.17", "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz", @@ -6825,6 +6931,11 @@ } } }, + "mdurl": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz", + "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=" + }, "media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", @@ -9936,8 +10047,7 @@ "sprintf-js": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", - "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=", - "dev": true + "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=" }, "ssri": { "version": "5.2.4", @@ -10535,6 +10645,11 @@ "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=", "dev": true }, + "uc.micro": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.5.tgz", + "integrity": "sha512-JoLI4g5zv5qNyT09f4YAvEZIIV1oOjqnewYg5D38dkQljIzpPT296dbIGvKro3digYI1bkb7W6EP1y4uDlmzLg==" + }, "uglify-es": { "version": "3.3.9", "resolved": "https://registry.npmjs.org/uglify-es/-/uglify-es-3.3.9.tgz", @@ -10729,6 +10844,11 @@ "integrity": "sha1-+nG63UQ3r0wUiEHjs7Fl+enlkLc=", "dev": true }, + "unorm": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/unorm/-/unorm-1.4.1.tgz", + "integrity": "sha1-NkIA1fE2RsqLzURJAnEzVhR5IwA=" + }, "unpipe": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", @@ -10957,6 +11077,14 @@ } } }, + "uslug": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/uslug/-/uslug-1.0.4.tgz", + "integrity": "sha1-uaIvCRTgqGFAYz2swwLl9PpFBnc=", + "requires": { + "unorm": "1.4.1" + } + }, "util": { "version": "0.10.3", "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz", @@ -11099,6 +11227,26 @@ } } }, + "vue-markdown": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/vue-markdown/-/vue-markdown-2.2.4.tgz", + "integrity": "sha512-hoTX/W1UIdHZrp/b0vpHSsJXAEfWsafaQLgtE2VX4gY8O/C3L2Gabqu95gyG429rL4ML1SwGv+xsPABX7yfFIQ==", + "requires": { + "highlight.js": "9.12.0", + "markdown-it": "6.1.1", + "markdown-it-abbr": "1.0.4", + "markdown-it-deflist": "2.0.3", + "markdown-it-emoji": "1.4.0", + "markdown-it-footnote": "2.0.0", + "markdown-it-ins": "2.0.0", + "markdown-it-katex": "2.0.3", + "markdown-it-mark": "2.0.0", + "markdown-it-sub": "1.0.0", + "markdown-it-sup": "1.0.0", + "markdown-it-task-lists": "2.1.0", + "markdown-it-toc-and-anchor": "4.1.2" + } + }, "vue-moment": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/vue-moment/-/vue-moment-3.2.0.tgz", diff --git a/package.json b/package.json index 665a9d8..5e4cab4 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "moment": "^2.21.0", "quasar-extras": "^1.0.2", "vue-i18n": "^7.3.3", + "vue-markdown": "^2.2.4", "vue-moment": "^3.2.0", "vue-truncate-collapsed": "^1.3.0", "vue2-dropzone": "^3.0.5" diff --git a/src/layouts/default.vue b/src/layouts/default.vue index 36c2635..84db2c1 100644 --- a/src/layouts/default.vue +++ b/src/layouts/default.vue @@ -71,4 +71,29 @@ </script> <style> + .indent { + margin-left: 1rem; + } + + .markdown h1 { + font-size: 1.1rem; + font-style: italic; + font-weight: bold; + } + + .markdown h2 { + font-size: 1.1rem; + font-style: italic; + font-weight: 500; + } + + .markdown h3 { + font-size: 1.1rem; + font-style: italic; + } + + .markdown h4, .markdown h5, .markdown h6 { + font-size: 1.0rem; + font-style: italic; + } </style> diff --git a/src/pages/UploadCreate.vue b/src/pages/UploadCreate.vue index 26e7703..1c2506a 100644 --- a/src/pages/UploadCreate.vue +++ b/src/pages/UploadCreate.vue @@ -14,20 +14,22 @@ icon="fa-pencil"> <q-input v-model="title" float-label="Title" /> </q-field> - <q-field :error="errors.description !== undefined" - :error-label="errors.description" - icon="fa-bars"> - <q-input v-model="description" type="textarea" float-label="Description" /> - </q-field> <q-field :error="errors.tags !== undefined" :error-label="errors.tags" icon="fa-tags"> <q-chips-input v-model="tags" float-label="Tags"></q-chips-input> </q-field> + <q-field :error="errors.description !== undefined" + :error-label="errors.description" + icon="fa-bars"> + <q-input v-model="description" type="textarea" float-label="Description (Markdown possible)" /> + </q-field> </div> <q-stepper-navigation> <q-btn color="primary" :disabled="!description || !title" @click="$refs.stepper.next()">Next</q-btn> </q-stepper-navigation> + <h5>Description Preview</h5> + <vue-markdown class="markdown indent" :html="false" :source="description"></vue-markdown> </q-step> <q-step name="pic" title="Add image"> <p>You can upload an image, e.g. a screenshot, that will be used as a preview for your mod</p> @@ -128,6 +130,7 @@ <script> import Dropzone from 'vue2-dropzone' import 'vue2-dropzone/dist/vue2Dropzone.css' + import VueMarkdown from 'vue-markdown' import { LocalStorage, @@ -136,6 +139,7 @@ export default { components: { Dropzone, + VueMarkdown, }, data () { return { @@ -264,8 +268,3 @@ }, } </script> - -<style lang="styl" type="text/stylus" scoped> - .indent - margin: 1rem 3rem 2rem 3rem -</style> diff --git a/src/pages/UploadDetail.vue b/src/pages/UploadDetail.vue index d85e3cc..223ad35 100644 --- a/src/pages/UploadDetail.vue +++ b/src/pages/UploadDetail.vue @@ -35,8 +35,11 @@ </q-card-actions> <q-card-main> <p class="text-faded"> - {{ upload.description }} + <vue-markdown class="markdown" :html="false" :source="upload.description"></vue-markdown> </p> + </q-card-main> + <q-card-title>Tags</q-card-title> + <q-card-main> <div class="group"> <q-chip v-for="tag of upload.tags" :key="tag">{{ tag }}</q-chip> </div> @@ -180,11 +183,13 @@ import UploadVoter from 'components/UploadVoter' import CommentVoter from 'components/CommentVoter' import FileSaver from 'file-saver' + import VueMarkdown from 'vue-markdown' export default { components: { CommentVoter, UploadVoter, + VueMarkdown, }, computed: { routeId () { |