Extend HTML mode - persist checkbox value and use across views

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

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

docs/installation.md

@@ -4,10 +4,12 @@
 
 ## 1. Install system dependencies
 
-Install Node.js and Yarn - follow these [instructions][].
+1. Install Node.js.
+1. Install Yarn globally.
 
-[instructions]: https://gist.github.com/MichaelCurrin/aa1fc56419a355972b96bce23f3bccba
+Follow these [instructions][].
 
+[instructions]: https://gist.github.com/MichaelCurrin/bdc34c554fa3023ee81449eb77375fcb
 
 ## 2. Clone
 
@@ -19,8 +21,16 @@ $ cd badge-generator
 
 ## 3. Install project dependencies
 
+### Using make
+
 ```sh
-$ yarn install
-$ # Or
 $ make install
 ```
+
+### Yarn only
+
+For Windows.
+
+```sh
+$ yarn install
+```

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
 

src/components/Code.vue

@@ -1,7 +1,7 @@
 // Render Markdown as a codeblock. Apply highlighting on content changes.
 <template>
   <div>
-    <Checkbox label="Show HTML" v-model="asHtml" />
+    <Checkbox label="Show HTML" v-model="asHtml" @change="storeAsHtml()" />
     <br />
 
     <pre><code ref="codeBlock" class="markdown">{{ outputCode }}</code></pre>
@@ -14,6 +14,7 @@ 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,7 +26,7 @@ export default defineComponent({
   },
   data() {
     return {
-      asHtml: false,
+      asHtml: store.state.asHtml,
     };
   },
   computed: {
@@ -35,10 +36,14 @@ export default defineComponent({
 
         return cleanHtml(htmlCode);
       }
+
       return this.code;
     },
   },
   methods: {
+    storeAsHtml() {
+      store.setAsHtml(this.asHtml);
+    },
     highlight() {
       const block = this.$refs.codeBlock as HTMLElement;
       hljs.highlightElement(block);

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;
+};

src/constants/catalogue.ts

@@ -1,29 +1,22 @@
 import { COLOR_PRESETS } from "./appearance";
+import { TBadgeDetails } from "./catalogue.d";
 
 export const BADGE_DEFAULTS = {
   IS_LARGE: false,
   COLOR: COLOR_PRESETS.Default,
   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",
+  target: "/docs/",
+  isLarge: true,
+  hoverTitle: "Go to project documentation",
 };
 
 export const BADGE_DETAILS: TBadgeDetails[] = [
-  {
-    label: "view",
-    message: "Documentation",
-    target: "/docs/",
-    isLarge: true,
-    hoverTitle: "Go to project documentation",
-  },
+  DOCUMENTATION_BADGE,
 
   // These would be useful on the Repo package, maybe with link to issues or PRs.
   {

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,12 +28,38 @@ import { TagTypes } from "./Repo.d";
 import { ghCounterShieldUrl } from "./shieldsApi";
 import { RepoMetric, StrMap } from "./types.d";
 
-function _licenseSectionMd(license: string, user: string) {
+// TODO: Use link to docs site for GH Pages or given link, with different text and link.
+// For now just a flat badge.
+export 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
+
+<div align="center">
+
+${docsBadge}
+
+</div>
+`;
+}
+
+export function _licenseSectionMd(license: string, user: string) {
   return `\
 ## License
 
-Released under ${license} by ${user}.
-  `;
+Released under ${license} by ${user}.`;
 }
 
 export class Repo {
@@ -203,6 +230,10 @@ export class Repo {
     );
   }
 
+  documentationMessage() {
+    return _documentationSectionMd();
+  }
+
   licenseMessage() {
     if (!this.licenseType) {
       return "";

src/core/markdown.ts

@@ -65,10 +65,10 @@ 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);
+  return md.render(value).trim();
 }
 
 /**

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 value for whether output is displayed as HTML or Markdown.
+   */
+  setAsHtml(value: boolean) {
+    if (DEBUG) {
+      console.debug(`Storing asHtml as: ${value}`);
+    }
+
+    this.state.asHtml = value;
+  },
 };
 
 export default store;

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}
 
 </div>
 
+${documentationMessage}
+
 ${licenseMessage}`;
     },
   },

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", () => {