#59 multilingual support - routing, fixes

components/LinkedText.vue

@@ -34,7 +34,7 @@
                     );
                 }
 
-                return h('nuxt-link', {props: { to: linkBuffer || '/neutratywy#' + buffer }}, buffer);
+                return h('nuxt-link', {props: { to: linkBuffer || '/' + this.config.nouns.route + '#' + buffer }}, buffer);
             }
             const addChild = _ => {
                 if (!buffer) {

components/Links.vue

@@ -5,7 +5,7 @@
             <T>links.headerLong</T>
         </h2>
         <ul class="list-unstyled">
-            <Link v-for="link in config.links.links" :link="link"/>
+            <Link v-for="link in config.links.links" :link="link" :key="link.url"/>
         </ul>
     </section>
 </template>

components/Literature.vue

@@ -1,7 +1,7 @@
 <template>
-    <div v-if="Object.keys(sources).length">
+    <div v-if="config.sources.enabled && Object.keys(sources).length">
         <h2 class="h4">
-            <nuxt-link to="/literatura">
+            <nuxt-link :to="'/' + config.sources.route">
                 <Icon v="books"/>
                 <T>sources.headerLong</T>:
             </nuxt-link>
@@ -42,6 +42,7 @@
             return {
                 templates: templates,
                 getTemplate: getTemplate,
+                glue: ' ' + this.$t('template.or') + ' ',
             }
         }
     }

components/Media.vue

@@ -5,7 +5,7 @@
             <T>links.media</T>
         </h2>
         <ul class="list-unstyled">
-            <Link v-for="link in config.links.media" :link="link"/>
+            <Link v-for="link in config.links.media" :link="link" :key="link.url"/>
         </ul>
     </section>
 </template>

components/Socials.vue

@@ -5,7 +5,7 @@
             <T>links.social</T>
         </h2>
         <ul class="list-unstyled">
-            <Link v-for="link in config.links.socials" :link="link"/>
+            <Link v-for="link in config.links.socials" :link="link" :key="link.url"/>
         </ul>
     </section>
 </template>

locale/pl/config.suml

@@ -12,7 +12,6 @@ nouns:
     enabled: true
     route: 'neutratywy'
 
-
 links:
     enabled: true
     route: 'linki'

locale/pl/translations.suml

@@ -89,6 +89,7 @@ sources:
 nouns:
     header: 'Neutratywy'
     headerLong: 'Słownik neutratywów'
+    description: 'Feminatywy feminatywami, ale prawdziwe wyzwanie to tworzenie neutratywów! Przedstawiamy tworzony przez społeczność słownik rzeczowników z wyszczególnieniem ich formy męskiej, żeńskiej i neutralnej.'
     intro:
         - >
             Feminatywy feminatywami, ale prawdziwe wyzwanie to tworzenie neutratywów!

nuxt.config.js

@@ -1,4 +1,5 @@
 import translations from './server/translations';
+import config from './server/config';
 
 const title = translations.title;
 const description = translations.description;
@@ -89,4 +90,27 @@ export default {
     axios: {
         baseURL: process.env.BASE_URL,
     },
+    router: {
+        extendRoutes(routes, resolve) {
+            if (config.sources.enabled) {
+                routes.push({ path: '/' + config.sources.route, component: resolve(__dirname, 'routes/sources.vue') });
+            }
+
+            if (config.nouns.enabled) {
+                routes.push({ path: '/' + config.nouns.route, component: resolve(__dirname, 'routes/nouns.vue') });
+            }
+
+            if (config.links.enabled) {
+                routes.push({ path: '/' + config.links.route, component: resolve(__dirname, 'routes/links.vue') });
+            }
+
+            if (config.contact.enabled) {
+                routes.push({ path: '/' + config.contact.route, component: resolve(__dirname, 'routes/contact.vue') });
+            }
+
+            routes.push({ path: '/' + config.template.any.route, component: resolve(__dirname, 'routes/any.vue') });
+
+            routes.push({ path: '*', component: resolve(__dirname, 'routes/template.vue') });
+        },
+    },
 }

pages/index.vue

@@ -166,7 +166,7 @@
                 </li>
                 <li class="list-group-item">
                     <p class="h5">
-                        <nuxt-link to="/dowolne"><T>template.any.header</T></nuxt-link>
+                        <nuxt-link :to="'/' + config.template.any.route"><T>template.any.header</T></nuxt-link>
                     </p>
                     <p>
                         <T>template.any.description</T>
@@ -271,7 +271,7 @@
 </script>
 
 <style lang="scss">
-    @import "assets/style";
+    @import "../assets/style";
 
     .form-input {
         text-align: center;

routes/any.vue

@@ -60,8 +60,8 @@
         },
         head() {
             return head({
-                title: 'Moje zaimki to: dowolne',
-                banner: 'banner/dowolne.png',
+                title: `${this.$t('template.intro')}: ${this.$t('template.any.short')}`,
+                banner: `banner/${this.$t('template.any.short')}.png`,
             });
         },
         methods: {

routes/nouns.vue

@@ -266,8 +266,8 @@
         },
         head() {
             return head({
-                title: 'Słownik neutratywów',
-                description: 'Feminatywy feminatywami, ale prawdziwe wyzwanie to tworzenie neutratywów! Przedstawiamy tworzony przez społeczność słownik rzeczowników z wyszczególnieniem ich formy męskiej, żeńskiej i neutralnej.',
+                title: this.$t('nouns.headerLong'),
+                description: this.$t('nouns.description'),
                 banner: 'bannerNouns.png',
             });
         },

routes/sources.vue

@@ -147,7 +147,7 @@
         },
         head() {
             return head({
-                title: 'Niebinarna polszczyzna w tekstach kultury',
+                title: this.$t('sources.headerLonger'),
             });
         },
         computed: {

routes/template.vue

@@ -90,7 +90,7 @@
         },
         head() {
             return this.selectedTemplate ? head({
-                title: 'Moje zaimki to: ' + this.selectedTemplate.name(this.glue),
+                title: `${this.$t('template.intro')}: ${this.selectedTemplate.name(this.glue)}`,
                 banner: `banner${this.$route.path.replace(/\/$/, '')}.png`,
             }) : {};
         },
@@ -101,7 +101,3 @@
         },
     }
 </script>
-
-<style lang="scss">
-
-</style>

server/banner.js

@@ -55,7 +55,7 @@ export default async function (req, res, next) {
         context.fillText(templateNameOptions.join('\n'), width / leftRatio + imageSize / 1.5, height / 2 + (templateNameOptions.length <= 2 ? 72 : 24))
     } else {
         context.font = 'regular 120pt Quicksand'
-        context.fillText('Zaimki.pl', width / leftRatio + imageSize / 1.5, height / 2 + 48)
+        context.fillText(translations.title, width / leftRatio + imageSize / 1.5, height / 2 + 48)
     }
 
     res.setHeader('content-type', mime);

server/config.js

@@ -0,0 +1,3 @@
+import Suml from 'suml';
+const fs = require('fs');
+export default new Suml().parse(fs.readFileSync('./data/config.suml').toString());