Move Help section to the end of the left column

package.json

@@ -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/App.vue

@@ -32,7 +32,10 @@
                 <LocaleChooser class="locale-chooser" />
             </div>
             <div class="columns">
-                <Stepper v-model="currentStepId" />
+                <div class="column">
+                    <Stepper v-model="currentStepId" />
+                    <help-section />
+                </div>
                 <div class="column">
                     <div class="fixed-right-column">
                         <LicenseDetailsCard
@@ -41,7 +44,6 @@
                         <LicenseUseCard
                             v-if="showLicenseUse"
                         />
-                        <HelpSection />
                     </div>
                 </div>
             </div>
@@ -88,7 +90,7 @@ export default {
         if (process.env.NODE_ENV === 'production') {
             this.$ga.page('/')
         }
-        this.$store.subscribe((mutation, state) => {
+        this.$store.subscribe((mutation) => {
             if (mutation.type === 'updateAttributesFromShort' || mutation.type === 'setSelected') {
                 this.showLicense = true
             }

src/components/LicenseDetailsCard.vue

@@ -79,7 +79,7 @@ export default {
         },
         cardHeading() {
             return this.shortName === LICENSES.CC0.SHORT
-                ? this.$t('license-details-card.cc0-heading')
+                ? this.$t('license-details-card.heading-cc0')
                 : this.$t('license-details-card.heading')
         }
 

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/components/Stepper.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="stepper__container column">
+    <div class="stepper__container">
         <div
             v-for="(step, idx) in visibleSteps()"
             :key="idx"
@@ -286,7 +286,6 @@ export default {
         --step-left-padding: calc(var(--h-padding) + var(--counter-size) + 1rem);
         &:last-of-type {
             border-bottom: 2px solid #d8d8d8;
-            margin-bottom: 15rem;
          }
     }
     .step-container.completed:not(.disabled):hover {
@@ -355,7 +354,7 @@ export default {
             /*transform: scaleY(1);*/
         }
     }
-    @media (max-width: 860px) {
+    @media only screen and (max-width: 768px) {
         .step-container:last-of-type {
             margin-bottom: 1rem;
         }

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