Merge branch 'master' into spacing

# Conflicts:
#	src/App.vue
#	src/components/HelpSection.vue
#	src/components/Stepper.vue
#	src/locales/en.json
#	tests/unit/specs/components/HelpSection.spec.js

package.json

@@ -11,7 +11,7 @@
     "license": "MIT",
     "scripts": {
         "serve": "vue-cli-service serve",
-        "build": "vue-cli-service build",
+        "build": "vue-cli-service build && rm -f -r ./docs && cp -r ./dist ./docs && echo chooser-beta.creativecommons.org > ./docs/CNAME",
         "test:unit": "vue-cli-service test:unit",
         "test:e2e": "vue-cli-service test:e2e",
         "lint": "vue-cli-service lint",
@@ -31,6 +31,7 @@
         "buefy": "^0.9.4",
         "clipboard": "^2.0.6",
         "core-js": "^3.6.5",
+        "markdown-it": "^12.0.3",
         "vue": "^2.6.10",
         "vue-analytics": "^5.22.1",
         "vue-hotjar": "^1.2.0",

src/components/MdText.vue

@@ -0,0 +1,41 @@
+<script>
+import MarkdownIt from 'markdown-it'
+
+export default {
+    name: 'MdText',
+    props: {
+        source: {
+            type: String,
+            required: true
+        },
+        tag: {
+            type: String,
+            default: 'div'
+        }
+    },
+    data() {
+        return {
+            md: null
+        }
+    },
+    computed: {
+        content() {
+            const src = this.source
+            return this.md?.render(src)
+        }
+    },
+    created() {
+        this.md = new MarkdownIt()
+    },
+    destroyed() {
+        this.md = null
+    },
+    render(h) {
+        return h(this.tag, { domProps: { innerHTML: this.content } })
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

src/i18n.js

@@ -4,13 +4,13 @@ import VueI18n from 'vue-i18n'
 Vue.use(VueI18n)
 
 function loadLocaleMessages() {
-    const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
+    const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.js$/i)
     const messages = {}
     locales.keys().forEach(key => {
         const matched = key.match(/([A-Za-z0-9-_]+)\./i)
         if (matched && matched.length > 1) {
             const locale = matched[1]
-            messages[locale] = locales(key)
+            messages[locale] = locales(key).messages
         }
     })
     return messages

tests/unit/specs/components/App.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount, createLocalVue, config } from '@vue/test-utils'
+import { shallowMount, createLocalVue } from '@vue/test-utils'
 import App from '@/App'
 import Buefy from 'buefy'
 import VueI18n from 'vue-i18n'
@@ -16,24 +16,13 @@ describe('App.vue', () => {
         localVue.use(Vuex)
         localVue.use(Buefy)
         Vue.use(VueI18n)
-        const messages = require('@/locales/en.json')
-        const i18n = new VueI18n({
-            locale: 'en',
-            fallbackLocale: 'en',
-            messages: messages
-        })
-
-        config.mocks.i18n = i18n
 
-        config.mocks.$t = key => {
-            // key is a string (eg. 'stepper.ND.question')
-            // this line converts it into an object reference
-            // eg. messages['stepper.ND.question'] -> messages.stepper.ND.question
-            return key.split('.').reduce((messages, k) => messages[k], i18n.messages)
-        }
         wrapper = shallowMount(App, {
             store,
-            localVue
+            localVue,
+            mocks: {
+                $t: key => key
+            }
         })
         wrapper.vm.$on('input', (newVal) => {
             wrapper.setProps({ value: newVal })

tests/unit/specs/components/HelpSection.spec.js

@@ -15,44 +15,17 @@ describe('HelpSection.vue', () => {
             },
             data: () => ({
                 sixLicensesImg: '',
-                modals: {
-                    1: {
-                        status: false,
-                        title: 'what-are-cc-licenses'
-                    },
-                    2: {
-                        status: false,
-                        title: 'how-licenses-work'
-                    },
-                    3: {
-                        status: false,
-                        title: 'what-icons-mean'
-                    },
-                    4: {
-                        status: false,
-                        title: 'considerations-before-licensing'
-                    },
-                    5: {
-                        status: false,
-                        title: 'how-formally-license'
-                    },
-                    6: {
-                        status: false,
-                        title: 'six-cc-licenses'
-                    },
-                    7: {
-                        status: false,
-                        title: 'how-licenses-communicated'
-                    },
-                    8: {
-                        status: false,
-                        title: 'what-free-culture-license'
-                    },
-                    9: {
-                        status: false,
-                        title: 'look-earlier-license-ver'
-                    }
-                }
+                modals: [
+                    'what-are-cc-licenses',
+                    'how-licenses-work',
+                    'what-icons-mean',
+                    'considerations-before-licensing',
+                    'how-formally-license',
+                    'six-cc-licenses',
+                    'how-licenses-communicated',
+                    'what-free-culture-license',
+                    'look-earlier-license-ver'
+                ]
             })
         })
     })
@@ -71,67 +44,11 @@ describe('HelpSection.vue', () => {
     it('Check if all the 9 li tags are present in the DOM', () => {
         expect(wrapper.findAll('.help-link').length).toBe(9)
     })
-    it('Check if "What Are Creative Commons Licenses?" modal is rendered to DOM', () => {
-        const modalId = 1
-        const modalButton = `ul > li:nth-child(${modalId}) > a`
+    it('Check if modals are rendered to DOM', () => {
+        const modalId = 0
+        const modalButton = `ul > li:nth-child(${modalId + 1}) > button`
         expect(wrapper.contains(modalButton)).toBe(true)
         wrapper.find(modalButton).trigger('click')
-        expect(wrapper.vm.modals[modalId].status).toBe(true)
-    })
-    it('Check if "How do the Licenses Work?" modal is rendered to DOM', () => {
-        const modalId = 2
-        const modalButton = `ul > li:nth-child(${modalId}) > a`
-        expect(wrapper.contains(modalButton)).toBe(true)
-        wrapper.find(modalButton).trigger('click')
-        expect(wrapper.vm.modals[modalId].status).toBe(true)
-    })
-    it('Check if "What do the Icons Mean?" modal is rendered to DOM', () => {
-        const modalId = 3
-        const modalButton = `ul > li:nth-child(${modalId}) > a`
-        expect(wrapper.contains(modalButton)).toBe(true)
-        wrapper.find(modalButton).trigger('click')
-        expect(wrapper.vm.modals[modalId].status).toBe(true)
-    })
-    it('Check if "Considerations Before Licensing" modal is rendered to DOM', () => {
-        const modalId = 4
-        const modalButton = `ul > li:nth-child(${modalId}) > a`
-        expect(wrapper.contains(modalButton)).toBe(true)
-        wrapper.find(modalButton).trigger('click')
-        expect(wrapper.vm.modals[modalId].status).toBe(true)
-    })
-    it('Check if "How do I Formally License my Work?" modal is rendered to DOM', () => {
-        const modalId = 5
-        const modalButton = `ul > li:nth-child(${modalId}) > a`
-        expect(wrapper.contains(modalButton)).toBe(true)
-        wrapper.find(modalButton).trigger('click')
-        expect(wrapper.vm.modals[modalId].status).toBe(true)
-    })
-    it('Check if "The Six Creative Commons Licenses" modal is rendered to DOM', () => {
-        const modalId = 6
-        const modalButton = `ul > li:nth-child(${modalId}) > a`
-        expect(wrapper.contains(modalButton)).toBe(true)
-        wrapper.find(modalButton).trigger('click')
-        expect(wrapper.vm.modals[modalId].status).toBe(true)
-    })
-    it('Check if "How are Licenses Communicated?" modal is rendered to DOM', () => {
-        const modalId = 7
-        const modalButton = `ul > li:nth-child(${modalId}) > a`
-        expect(wrapper.contains(modalButton)).toBe(true)
-        wrapper.find(modalButton).trigger('click')
-        expect(wrapper.vm.modals[modalId].status).toBe(true)
-    })
-    it('Check if " What is a Free Culture License?" modal is rendered to DOM', () => {
-        const modalId = 8
-        const modalButton = `ul > li:nth-child(${modalId}) > a`
-        expect(wrapper.contains(modalButton)).toBe(true)
-        wrapper.find(modalButton).trigger('click')
-        expect(wrapper.vm.modals[modalId].status).toBe(true)
-    })
-    it('Check if "Looking for Earlier License Versions, including Ports?" modal is rendered to DOM', () => {
-        const modalId = 9
-        const modalButton = `ul > li:nth-child(${modalId}) > a`
-        expect(wrapper.contains(modalButton)).toBe(true)
-        wrapper.find(modalButton).trigger('click')
-        expect(wrapper.vm.modals[modalId].status).toBe(true)
+        expect(wrapper.vm.openModal).toEqual(modalId)
     })
 })

tests/unit/specs/components/LicenseHTML.spec.js

@@ -17,7 +17,7 @@ describe('LicenseHTML.vue', () => {
     // Vue i18n is looking for locale key in messages,
     // i.e. $t('app') becomes 'messages.<en>.app'
     const messages = {}
-    messages.en = require('@/locales/en.json')
+    messages.en = require('@/locales/en.js').messages
     beforeEach(() => {
         localVue = createLocalVue()
         localVue.use(VueI18n)

tests/unit/specs/components/LicenseText.spec.js

@@ -20,7 +20,7 @@ describe('LicenseText.vue', () => {
     // Vue i18n is looking for locale key in messages,
     // i.e. $t('app') becomes 'messages.<en>.app'
     const messages = {}
-    messages.en = require('@/locales/en.json')
+    messages.en = require('@/locales/en.js').messages
     beforeEach(() => {
         localVue = createLocalVue()
         localVue.use(VueI18n)