Add markdown compilation step

package.json

@@ -17,19 +17,16 @@
         "lint": "vue-cli-service lint",
         "test": "vue-cli-service test:unit --coverage && vue-cli-service test:e2e",
         "i18n:report": "vue-cli-service i18n:report -v --src src/**/*.vue --locales src/locales/**.json -o output.json",
-        "test:cypress": "node_modules/.bin/cypress open"
+        "test:cypress": "node_modules/.bin/cypress open",
+        "convertLocales": "node src/utils/locales.mjs"
     },
     "dependencies": {
         "@creativecommons/vocabulary": "^2020.11.3",
         "@creativecommons/vue-vocabulary": "^2020.11.3",
-        "@fullhuman/postcss-purgecss": "^3.1.3",
-        "@linusborg/vue-simple-portal": "^0.1.4",
         "@sentry/vue": "^5.29.2",
         "buefy": "^0.9.4",
         "clipboard": "^2.0.6",
         "core-js": "^3.6.5",
-        "cypress": "^6.2.1",
-        "markdown-it": "^12.0.3",
         "node-sass": "^4.14.1",
         "sass-loader": "^8.0.2",
         "vue": "^2.6.10",
@@ -40,6 +37,7 @@
         "vuex": "^3.5.1"
     },
     "devDependencies": {
+        "@fullhuman/postcss-purgecss": "^3.1.3",
         "@vue/cli-plugin-babel": "^4.4.6",
         "@vue/cli-plugin-e2e-nightwatch": "^4.4.6",
         "@vue/cli-plugin-eslint": "^4.4.6",
@@ -50,13 +48,15 @@
         "babel-eslint": "^10.1.0",
         "chromedriver": "^87.0.0",
         "clipboardy": "^2.3.0",
+        "cypress": "^6.2.1",
         "eslint": "^6.8.0",
         "eslint-plugin-import": "^2.22.0",
         "eslint-plugin-node": "^10.0.0",
         "eslint-plugin-promise": "^4.2.1",
         "eslint-plugin-standard": "^4.0.1",
         "eslint-plugin-vue": "^6.2.2",
         "geckodriver": "^1.19.1",
+        "markdown-it": "^12.0.3",
         "shx": "^0.3.3",
         "vue-cli-plugin-i18n": "^0.6.1",
         "vue-template-compiler": "^2.6.10"

src/App.vue

@@ -34,7 +34,7 @@
                         @restart="restart"
                         @done="done"
                     />
-                    <help-section />
+                    <help-section @change="openChooserModal" />
                 </div>
                 <div class="column right-column">
                     <!-- The right column with the recommended license should be fixed until
@@ -58,13 +58,18 @@
             </div>
         </div>
         <footer-section />
+        <chooser-modal
+            :active-modal="openModal"
+            @close="closeChooserModal"
+        />
     </div>
 </template>
 
 <script>
 // TODO Reduce custom styling in favour of Vocabulary styles
 import { mapMutations } from 'vuex'
 
+import ChooserModal from './components/ChooserModal'
 import HelpSection from './components/HelpSection'
 import Stepper from './components/Stepper'
 import LicenseUseCard from './components/LicenseUseCard'
@@ -80,11 +85,13 @@ export default {
         LicenseDetailsCard,
         LicenseUseCard,
         HeaderSection,
-        FooterSection
+        FooterSection,
+        ChooserModal
     },
     data() {
         return {
             currentStepId: 0,
+            openModal: null,
             showLicense: false,
             shouldShake: false,
             windowWidth: window.innerWidth
@@ -165,6 +172,14 @@ export default {
         },
         onResize() {
             this.windowWidth = window.innerWidth
+        },
+        openChooserModal(modal) {
+            console.log('Open chooser modal: ', modal, this.openModal)
+            this.openModal = modal
+            console.log('Open chooser modal: ', modal, this.openModal)
+        },
+        closeChooserModal() {
+            this.openModal = null
         }
     }
 }