From c265a36afa8e09f64e89818f022ed87fed96e1a7 Mon Sep 17 00:00:00 2001 From: Irene Park Date: Thu, 25 Nov 2021 16:51:08 -0500 Subject: [PATCH 01/21] Trimmed the extra white space when creating html --- src/store.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/store.ts b/src/store.ts index 87ede914..6a7899e8 100644 --- a/src/store.ts +++ b/src/store.ts @@ -14,6 +14,7 @@ const store = { state: reactive({ repoUsername: DEFAULT_REPO_INPUTS.username, repoName: DEFAULT_REPO_INPUTS.repoName, + asHtml: false, }), /** @@ -37,6 +38,17 @@ const store = { this.state.repoName = value; }, + + /** + * Store asHtml value. e.g. true or false. + */ + setAsHTML(value: boolean){ + if (DEBUG) { + console.debug(`Storing asHtml as: ${value}`); + } + + this.state.asHtml = value; + } }; export default store; From 47c775db04f19b6b95bb744276598df40ab9e8fd Mon Sep 17 00:00:00 2001 From: Irene Park Date: Thu, 25 Nov 2021 16:51:35 -0500 Subject: [PATCH 02/21] Trimmed extra white space when creating html code --- src/core/markdown.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/markdown.ts b/src/core/markdown.ts index f2e9309b..61a4fcfb 100644 --- a/src/core/markdown.ts +++ b/src/core/markdown.ts @@ -68,7 +68,7 @@ export function mdImageWithLink({ * Render Markdown code as HTML code. */ export function mdToHTML(value: string): string { - return md.render(value); + return md.render(value).trim(); } /** From 6272f5f045e3c053625897c1a55460a4ccddcc82 Mon Sep 17 00:00:00 2001 From: Irene Park Date: Thu, 25 Nov 2021 22:28:23 -0500 Subject: [PATCH 03/21] Store asHtml value whenever clicked --- src/components/Code.vue | 6 ++++-- src/store.ts | 1 + tests/unit/components/Code.spec.ts | 2 ++ 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/Code.vue b/src/components/Code.vue index f4809075..d83b0989 100644 --- a/src/components/Code.vue +++ b/src/components/Code.vue @@ -14,6 +14,8 @@ import { defineComponent } from "vue"; import { cleanHtml, mdToHTML } from "@/core/markdown"; import Checkbox from "./Checkbox.vue"; +import store from "@/store"; + export default defineComponent({ name: "Code", @@ -25,14 +27,14 @@ export default defineComponent({ }, data() { return { - asHtml: false, + asHtml: store.state.asHtml, }; }, computed: { outputCode(): String { + store.setAsHTML(this.asHtml); if (this.asHtml) { const htmlCode = mdToHTML(this.code); - return cleanHtml(htmlCode); } return this.code; diff --git a/src/store.ts b/src/store.ts index 6a7899e8..d990ab3a 100644 --- a/src/store.ts +++ b/src/store.ts @@ -4,6 +4,7 @@ import { DEBUG } from "@/constants/"; import { DEFAULT_REPO_INPUTS } from "@/constants/badgeValues"; import { reactive } from "vue"; +// import asHtml from "@/components/Code.vue"; /** * Global store. diff --git a/tests/unit/components/Code.spec.ts b/tests/unit/components/Code.spec.ts index a1b4a9a8..dd4e523b 100644 --- a/tests/unit/components/Code.spec.ts +++ b/tests/unit/components/Code.spec.ts @@ -1,5 +1,7 @@ import Code from "@/components/Code.vue"; import { shallowMount } from "@vue/test-utils"; +import store from "@/store"; + describe("Code.vue", () => { it("renders a Markdown codeblock as Markdown code, with highlighting", () => { From f02facf234b2fd20d63aad6cf5097703e551308f Mon Sep 17 00:00:00 2001 From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com> Date: Wed, 24 Nov 2021 08:21:36 +0200 Subject: [PATCH 04/21] Update README.md --- docs/development/README.md | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/docs/development/README.md b/docs/development/README.md index 97f68414..2b7c4c6f 100644 --- a/docs/development/README.md +++ b/docs/development/README.md @@ -16,9 +16,20 @@ See the [Installation](/docs/installation.md) and [Usage](/docs/usage.md) docs. -For plain development, just run the _serve_ task from the CLI or from the Tasks Explorer in VS Code. +You need Node 16 or higher. -For **debugging**, start the server and then launch the Firefox task under **Debugger** pane. This will open a new window and attach to the server, so you can set breakpoints. +Install Yarn globally. + +```sh +$ npm install -g yarn +``` + +Then run this in the project root: + +```sh +$ yarn install +$ yarn serve +``` ## Formatting From 214ae5a477258cd6dff72a8139cef62f98ad4341 Mon Sep 17 00:00:00 2001 From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com> Date: Wed, 24 Nov 2021 08:24:43 +0200 Subject: [PATCH 05/21] Update usage.md --- docs/usage.md | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/docs/usage.md b/docs/usage.md index 5ddc0038..2e87e1bb 100644 --- a/docs/usage.md +++ b/docs/usage.md @@ -3,7 +3,11 @@ ## Start a dev server -This will compile TS to JS and serve the app. Tests are left out so the app can still be used without passing tests. +### Using make + +For Windows, skip to [Yarn only](#yarn-only). + +This command will compile TS to JS and serve the app. Tests are left out so the app can still be used without passing tests. ```sh $ make serve @@ -13,12 +17,18 @@ Then open in the browser at: - http://localhost:8080 -That commands applies [Lint](#lint) fixes before starting the app - if you prefer to skip that linting, just run: +That commands applies [Lint](#lint) fixes before starting the app. + +### Yarn only + +If you prefer to skip that linting, just run: ```sh $ yarn start ``` +### Subpath + If you need to check that the site works on a GitHub Pages subpath, run this: ```sh @@ -31,6 +41,10 @@ Then open in the browser at: The Vue Router package handles navigation for us. For links outside of the navbar, search for use of `baseUrl` in the codebase. +### Debugging + +For debugging, start the server and then launch the Firefox task under the **Debugger** pane in VS Code. This will open a new window and attach to the server, so you can set breakpoints. + ## Fix From 396fd7a190c7cffa4031548122b48f83b5680075 Mon Sep 17 00:00:00 2001 From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com> Date: Wed, 24 Nov 2021 08:26:55 +0200 Subject: [PATCH 06/21] Update installation.md --- docs/installation.md | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/docs/installation.md b/docs/installation.md index 5f88d566..42cfdc64 100644 --- a/docs/installation.md +++ b/docs/installation.md @@ -4,7 +4,10 @@ ## 1. Install system dependencies -Install Node.js and Yarn - follow these [instructions][]. +1. Install Node.js. +1. Install Yarn globally. + +Follow these [instructions][]. [instructions]: https://gist.github.com/MichaelCurrin/aa1fc56419a355972b96bce23f3bccba @@ -19,8 +22,16 @@ $ cd badge-generator ## 3. Install project dependencies +### Using make + ```sh -$ yarn install -$ # Or $ make install ``` + +### Yarn only + +For Windows. + +```sh +$ yarn install +``` From 5ed970c0ff8b6d5ee01b57dabeb4ef2aea981fcc Mon Sep 17 00:00:00 2001 From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com> Date: Wed, 24 Nov 2021 08:28:37 +0200 Subject: [PATCH 07/21] Update installation.md --- docs/installation.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/installation.md b/docs/installation.md index 42cfdc64..46bbf02c 100644 --- a/docs/installation.md +++ b/docs/installation.md @@ -9,8 +9,7 @@ Follow these [instructions][]. -[instructions]: https://gist.github.com/MichaelCurrin/aa1fc56419a355972b96bce23f3bccba - +[instructions]: https://gist.github.com/MichaelCurrin/bdc34c554fa3023ee81449eb77375fcb ## 2. Clone From 5ccdb3534173bb287647edf79f1c263ac7a27932 Mon Sep 17 00:00:00 2001 From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com> Date: Wed, 24 Nov 2021 11:27:45 +0200 Subject: [PATCH 08/21] refactor: update catalogue.ts --- src/constants/catalogue.ts | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/constants/catalogue.ts b/src/constants/catalogue.ts index 9dfc16dd..6a34156d 100644 --- a/src/constants/catalogue.ts +++ b/src/constants/catalogue.ts @@ -16,15 +16,16 @@ type TBadgeDetails = { hoverTitle?: string; }; -export const BADGE_DETAILS: TBadgeDetails[] = [ - { - label: "view", - message: "Documentation", - target: "/docs/", - isLarge: true, - hoverTitle: "Go to project documentation", - }, +export const DOCUMENTATION_BADGE: TBadgeDetails = { + label: "view", + message: "Documentation", + target: "/docs/", + isLarge: true, + hoverTitle: "Go to project documentation", +}; +export const BADGE_DETAILS: TBadgeDetails[] = [ + DOCUMENTATION_BADGE, // These would be useful on the Repo package, maybe with link to issues or PRs. { label: "maintained", From bad18eb0f2cd4b839a3e839560de323b693f7613 Mon Sep 17 00:00:00 2001 From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com> Date: Wed, 24 Nov 2021 11:29:09 +0200 Subject: [PATCH 09/21] refactor: split type --- src/constants/catalogue.d.ts | 9 +++++++++ src/constants/catalogue.ts | 12 ++---------- 2 files changed, 11 insertions(+), 10 deletions(-) create mode 100644 src/constants/catalogue.d.ts diff --git a/src/constants/catalogue.d.ts b/src/constants/catalogue.d.ts new file mode 100644 index 00000000..59102ec2 --- /dev/null +++ b/src/constants/catalogue.d.ts @@ -0,0 +1,9 @@ +export type TBadgeDetails = { + label: string; + message: string; + target: string; + logo?: string; + isLarge?: boolean; + altText?: string; + hoverTitle?: string; +}; diff --git a/src/constants/catalogue.ts b/src/constants/catalogue.ts index 6a34156d..82591542 100644 --- a/src/constants/catalogue.ts +++ b/src/constants/catalogue.ts @@ -1,4 +1,5 @@ import { COLOR_PRESETS } from "./appearance"; +import { TBadgeDetails } from "./catalogue.d"; export const BADGE_DEFAULTS = { IS_LARGE: false, @@ -6,16 +7,6 @@ export const BADGE_DEFAULTS = { LOGO_COLOR: COLOR_PRESETS.LogoDefault, }; -type TBadgeDetails = { - label: string; - message: string; - target: string; - logo?: string; - isLarge?: boolean; - altText?: string; - hoverTitle?: string; -}; - export const DOCUMENTATION_BADGE: TBadgeDetails = { label: "view", message: "Documentation", @@ -26,6 +17,7 @@ export const DOCUMENTATION_BADGE: TBadgeDetails = { export const BADGE_DETAILS: TBadgeDetails[] = [ DOCUMENTATION_BADGE, + // These would be useful on the Repo package, maybe with link to issues or PRs. { label: "maintained", From 4617a2821f1248a9f720f31ec5e99e1bdb156738 Mon Sep 17 00:00:00 2001 From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com> Date: Wed, 24 Nov 2021 11:29:19 +0200 Subject: [PATCH 10/21] update Repo.ts --- src/core/Repo.ts | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/src/core/Repo.ts b/src/core/Repo.ts index e0fc78ad..44b2f1ec 100644 --- a/src/core/Repo.ts +++ b/src/core/Repo.ts @@ -12,6 +12,7 @@ import { LICENSE_BADGE, TEMPLATE_BADGE, } from "@/constants/badgeValues"; +import { BADGE_DEFAULTS, DOCUMENTATION_BADGE } from "@/constants/catalogue"; import { DEFAULT_BRANCH, GITHUB_DOMAIN, @@ -27,6 +28,33 @@ import { TagTypes } from "./Repo.d"; import { ghCounterShieldUrl } from "./shieldsApi"; import { RepoMetric, StrMap } from "./types.d"; +// TODO: Use link to docs site for GH Pages or given link, with different text and link. +// For now just a flat badge. +function _documentationSectionMd() { + const docsBadge = genericBadge( + DOCUMENTATION_BADGE.label, + DOCUMENTATION_BADGE.message, + BADGE_DEFAULTS.COLOR, + DOCUMENTATION_BADGE.isLarge, + DOCUMENTATION_BADGE.target, + DOCUMENTATION_BADGE.logo, + "", + false, + DOCUMENTATION_BADGE.altText, + DOCUMENTATION_BADGE.hoverTitle + ); + + return `\ +## Documentation + +
+ +${docsBadge} + +
+`; +} + function _licenseSectionMd(license: string, user: string) { return `\ ## License @@ -203,6 +231,10 @@ export class Repo { ); } + documentationMessage() { + return _documentationSectionMd(); + } + licenseMessage() { if (!this.licenseType) { return ""; From b295a892c1322ddb386b7b0b1ed839e6d19942c3 Mon Sep 17 00:00:00 2001 From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com> Date: Wed, 24 Nov 2021 11:29:27 +0200 Subject: [PATCH 11/21] update RepoBadges.vue --- src/views/RepoBadges.vue | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/views/RepoBadges.vue b/src/views/RepoBadges.vue index 4a688f27..5883d34e 100644 --- a/src/views/RepoBadges.vue +++ b/src/views/RepoBadges.vue @@ -219,6 +219,7 @@ export default defineComponent({ // section or maybe here - just add output URL and assume the other data. const ghPagesButton = this.ghPages ? repo.ghPagesBadge() : ""; + const documentationMessage = repo.documentationMessage(); const licenseMessage = repo.licenseMessage(); this.result = `\ @@ -245,6 +246,8 @@ ${ghPagesButton} +${documentationMessage} + ${licenseMessage}`; }, }, From cef1bc5092c69bf4566739d7d20f7c37305bb325 Mon Sep 17 00:00:00 2001 From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com> Date: Wed, 24 Nov 2021 11:49:23 +0200 Subject: [PATCH 12/21] update Repo.ts --- src/core/Repo.ts | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/core/Repo.ts b/src/core/Repo.ts index 44b2f1ec..2fae9b2d 100644 --- a/src/core/Repo.ts +++ b/src/core/Repo.ts @@ -10,7 +10,7 @@ import { GH_BADGE, GH_PAGES_BADGE, LICENSE_BADGE, - TEMPLATE_BADGE, + TEMPLATE_BADGE } from "@/constants/badgeValues"; import { BADGE_DEFAULTS, DOCUMENTATION_BADGE } from "@/constants/catalogue"; import { @@ -19,7 +19,7 @@ import { GITHUB_IO, LICENSE_PATH, SHIELDS_API, - VERSION_PARAMS, + VERSION_PARAMS } from "@/constants/urls"; import { buildUrl } from "./badges"; import { genericBadge } from "./genericBadge"; @@ -30,7 +30,7 @@ import { RepoMetric, StrMap } from "./types.d"; // TODO: Use link to docs site for GH Pages or given link, with different text and link. // For now just a flat badge. -function _documentationSectionMd() { +export function _documentationSectionMd() { const docsBadge = genericBadge( DOCUMENTATION_BADGE.label, DOCUMENTATION_BADGE.message, @@ -55,12 +55,11 @@ ${docsBadge} `; } -function _licenseSectionMd(license: string, user: string) { +export function _licenseSectionMd(license: string, user: string) { return `\ ## License -Released under ${license} by ${user}. - `; +Released under ${license} by ${user}.`; } export class Repo { From 55005b2b4bd41d253c2109c8d0d462656a375fbb Mon Sep 17 00:00:00 2001 From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com> Date: Wed, 24 Nov 2021 11:49:29 +0200 Subject: [PATCH 13/21] test: update Repo.spec.ts with case --- tests/unit/core/Repo.spec.ts | 28 +++++++++++++++++++++++----- 1 file changed, 23 insertions(+), 5 deletions(-) diff --git a/tests/unit/core/Repo.spec.ts b/tests/unit/core/Repo.spec.ts index 9a5855e5..2012ea8d 100644 --- a/tests/unit/core/Repo.spec.ts +++ b/tests/unit/core/Repo.spec.ts @@ -1,4 +1,22 @@ -import { Repo } from "@/core/Repo"; +import { Repo, _licenseSectionMd } from "@/core/Repo"; + +describe("Markdown section snippets", () => { + describe("#_licenseSectionMd", () => { + it("returns Markdown snippet when given badge link and user link", () => { + const result = _licenseSectionMd( + '[MIT](/LICENSE)', + '[@MichaelCurrin](https://github.com/MichaelCurrin)' + ) + + const expected = `\ +## License + +Released under [MIT](/LICENSE) by [@MichaelCurrin](https://github.com/MichaelCurrin).`; + + expect(result).toBe(expected) + }) + }) +}) describe("#Repo", () => { const repoNoLicense = new Repo("MichaelCurrin", "badge-generator"); @@ -143,12 +161,12 @@ describe("#Repo", () => { describe("#licenseMessage", () => { it("return a correct license message for a known license type and local file", () => { - const message = `\ + const result = `\ ## License -Released under [MIT](/LICENSE) by [@MichaelCurrin](https://github.com/MichaelCurrin). - `; - expect(repoWithLicense.licenseMessage()).toBe(message); +Released under [MIT](/LICENSE) by [@MichaelCurrin](https://github.com/MichaelCurrin).`; + + expect(repoWithLicense.licenseMessage()).toBe(result); }); it("return an empty license message for no license type", () => { From 802e05548550622d8a444b07d143089d7c783333 Mon Sep 17 00:00:00 2001 From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com> Date: Wed, 24 Nov 2021 11:52:07 +0200 Subject: [PATCH 14/21] test: update Repo.spec.ts with _documentationSectionMd case --- tests/unit/core/Repo.spec.ts | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/tests/unit/core/Repo.spec.ts b/tests/unit/core/Repo.spec.ts index 2012ea8d..6d4dedbc 100644 --- a/tests/unit/core/Repo.spec.ts +++ b/tests/unit/core/Repo.spec.ts @@ -1,8 +1,26 @@ -import { Repo, _licenseSectionMd } from "@/core/Repo"; +import { Repo, _documentationSectionMd, _licenseSectionMd } from "@/core/Repo"; describe("Markdown section snippets", () => { + describe("#_documentationSectionMd", () => { + it("returns the correct Markdown snippet about documentation", () => { + const result = _documentationSectionMd() + + const expected = `\ +## Documentation + +
+ +[![view - Documentation](https://img.shields.io/badge/view-Documentation-blue?style=for-the-badge)](/docs/ "Go to project documentation") + +
+`; + + expect(result).toBe(expected) + }) + }) + describe("#_licenseSectionMd", () => { - it("returns Markdown snippet when given badge link and user link", () => { + it("returns the correct Markdown snippet about license, for license and user links", () => { const result = _licenseSectionMd( '[MIT](/LICENSE)', '[@MichaelCurrin](https://github.com/MichaelCurrin)' From aec5ecfffbb1b28b6e4b2af72ee35723c74136c8 Mon Sep 17 00:00:00 2001 From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com> Date: Wed, 24 Nov 2021 11:54:31 +0200 Subject: [PATCH 15/21] style: update Repo.ts and Repo.spec.ts --- src/core/Repo.ts | 4 ++-- tests/unit/core/Repo.spec.ts | 22 +++++++++++----------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/core/Repo.ts b/src/core/Repo.ts index 2fae9b2d..64b4b8ae 100644 --- a/src/core/Repo.ts +++ b/src/core/Repo.ts @@ -10,7 +10,7 @@ import { GH_BADGE, GH_PAGES_BADGE, LICENSE_BADGE, - TEMPLATE_BADGE + TEMPLATE_BADGE, } from "@/constants/badgeValues"; import { BADGE_DEFAULTS, DOCUMENTATION_BADGE } from "@/constants/catalogue"; import { @@ -19,7 +19,7 @@ import { GITHUB_IO, LICENSE_PATH, SHIELDS_API, - VERSION_PARAMS + VERSION_PARAMS, } from "@/constants/urls"; import { buildUrl } from "./badges"; import { genericBadge } from "./genericBadge"; diff --git a/tests/unit/core/Repo.spec.ts b/tests/unit/core/Repo.spec.ts index 6d4dedbc..578fab07 100644 --- a/tests/unit/core/Repo.spec.ts +++ b/tests/unit/core/Repo.spec.ts @@ -3,7 +3,7 @@ import { Repo, _documentationSectionMd, _licenseSectionMd } from "@/core/Repo"; describe("Markdown section snippets", () => { describe("#_documentationSectionMd", () => { it("returns the correct Markdown snippet about documentation", () => { - const result = _documentationSectionMd() + const result = _documentationSectionMd(); const expected = `\ ## Documentation @@ -15,26 +15,26 @@ describe("Markdown section snippets", () => { `; - expect(result).toBe(expected) - }) - }) + expect(result).toBe(expected); + }); + }); describe("#_licenseSectionMd", () => { it("returns the correct Markdown snippet about license, for license and user links", () => { const result = _licenseSectionMd( - '[MIT](/LICENSE)', - '[@MichaelCurrin](https://github.com/MichaelCurrin)' - ) + "[MIT](/LICENSE)", + "[@MichaelCurrin](https://github.com/MichaelCurrin)" + ); const expected = `\ ## License Released under [MIT](/LICENSE) by [@MichaelCurrin](https://github.com/MichaelCurrin).`; - expect(result).toBe(expected) - }) - }) -}) + expect(result).toBe(expected); + }); + }); +}); describe("#Repo", () => { const repoNoLicense = new Repo("MichaelCurrin", "badge-generator"); From 16537bb4a6e6357994a748e57a15bba77a441059 Mon Sep 17 00:00:00 2001 From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com> Date: Wed, 24 Nov 2021 14:11:48 +0200 Subject: [PATCH 16/21] Update upgrading.md --- docs/development/upgrading.md | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/docs/development/upgrading.md b/docs/development/upgrading.md index ba0713a7..913d0ea5 100644 --- a/docs/development/upgrading.md +++ b/docs/development/upgrading.md @@ -29,6 +29,17 @@ $ yarn add PACKAGE_NAME Leave off the version number to get the highest available, but without conflicting with extant packages. +### CI + +See [upgrade-packages.yml](https://github.com/MichaelCurrin/badge-generator/blob/master/.github/workflows/upgrade-packages.yml) as a GH Actions workflow to upgrade packages manually or on schedule, within semver restrictions. + + +## ESLint + +See issue [#15175](https://github.com/eslint/eslint/issues/15175) in the `eslint` repo. + +Vue is not compatible yet with ESLint 8, so stick to 7. + ## Vue CLI @@ -40,15 +51,13 @@ See [vue-cli CHANGELOG.md](https://github.com/vuejs/vue-cli/blob/dev/CHANGELOG.m ### Outdated -View outdated Vue packages. +View outdated Vue-relaated packages. ```sh $ npx vue outdated ``` -### Upgrade - -Upgrade Vue packages. +### Upgrade Vue-related packages ```sh $ npx vue upgrade From 05fce817a0854bccf6d5a701075f0d8522d2af17 Mon Sep 17 00:00:00 2001 From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com> Date: Fri, 26 Nov 2021 21:35:30 +0200 Subject: [PATCH 17/21] style: update Code.vue --- src/components/Code.vue | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Code.vue b/src/components/Code.vue index d83b0989..82a36aaf 100644 --- a/src/components/Code.vue +++ b/src/components/Code.vue @@ -16,7 +16,6 @@ import { cleanHtml, mdToHTML } from "@/core/markdown"; import Checkbox from "./Checkbox.vue"; import store from "@/store"; - export default defineComponent({ name: "Code", components: { @@ -33,10 +32,13 @@ export default defineComponent({ computed: { outputCode(): String { store.setAsHTML(this.asHtml); + if (this.asHtml) { const htmlCode = mdToHTML(this.code); + return cleanHtml(htmlCode); } + return this.code; }, }, From 04572d6c2866f87d1687d5abca73a522d1855c8e Mon Sep 17 00:00:00 2001 From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com> Date: Fri, 26 Nov 2021 21:35:41 +0200 Subject: [PATCH 18/21] docs: update markdown.ts --- src/core/markdown.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/markdown.ts b/src/core/markdown.ts index 61a4fcfb..ff7859da 100644 --- a/src/core/markdown.ts +++ b/src/core/markdown.ts @@ -65,7 +65,7 @@ export function mdImageWithLink({ /** * Markdown to HTML. * - * Render Markdown code as HTML code. + * Render Markdown code as HTML code, without trailing newline. */ export function mdToHTML(value: string): string { return md.render(value).trim(); From 2c015aa2e51fd3ced5d1cdf426509513f07a2b12 Mon Sep 17 00:00:00 2001 From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com> Date: Fri, 26 Nov 2021 21:35:54 +0200 Subject: [PATCH 19/21] docs: update store.ts --- src/store.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/store.ts b/src/store.ts index d990ab3a..afd29653 100644 --- a/src/store.ts +++ b/src/store.ts @@ -4,7 +4,6 @@ import { DEBUG } from "@/constants/"; import { DEFAULT_REPO_INPUTS } from "@/constants/badgeValues"; import { reactive } from "vue"; -// import asHtml from "@/components/Code.vue"; /** * Global store. @@ -41,15 +40,15 @@ const store = { }, /** - * Store asHtml value. e.g. true or false. + * Store value for whether output is displayed as HTML or Markdown. */ - setAsHTML(value: boolean){ + setAsHTML(value: boolean) { if (DEBUG) { console.debug(`Storing asHtml as: ${value}`); } this.state.asHtml = value; - } + }, }; export default store; From f399c8b4322e1d96682ef00cafeb0dc7e85b7f5f Mon Sep 17 00:00:00 2001 From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com> Date: Fri, 26 Nov 2021 22:00:27 +0200 Subject: [PATCH 20/21] update Code.vue --- src/components/Code.vue | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/Code.vue b/src/components/Code.vue index 82a36aaf..19c82f48 100644 --- a/src/components/Code.vue +++ b/src/components/Code.vue @@ -1,7 +1,7 @@ // Render Markdown as a codeblock. Apply highlighting on content changes.