#185 [blog] better visibility of the "blog" section

assets/style.scss

@@ -57,6 +57,10 @@ section {
     margin: 2*$spacer 0;
 }
 
+.main > section:first-child {
+    margin-top: 0;
+}
+
 code {
     @include font-size($code-font-size);
     color: $code-color;

components/Blog.vue

@@ -0,0 +1,15 @@
+<template>
+    <section v-if="Object.keys(config.contact.blog).length">
+        <h2>
+            <Icon v="pen-nib"/>
+            <T>contact.team.blog</T>
+        </h2>
+        <ul>
+            <li v-for="(title, slug) in config.contact.blog" class="mb-2">
+                <nuxt-link :to="`/blog/${slug}`">
+                    {{title}}
+                </nuxt-link>
+            </li>
+        </ul>
+    </section>
+</template>

components/Header.vue

@@ -190,6 +190,7 @@
                         icon: 'bookmark',
                         text: this.$t('links.header'),
                         textLong: this.$t('links.headerLong'),
+                        extra: ['blog', 'blogEntry'],
                     });
                 }
 

components/Links.vue

@@ -1,5 +1,5 @@
 <template>
-    <section :class="{'mt-0': top}" v-if="config.links.links.length">
+    <section v-if="config.links.links.length">
         <h2 class="mb-3">
             <Icon v="bookmark"/>
             <T>links.headerLong</T>
@@ -9,11 +9,3 @@
         </ul>
     </section>
 </template>
-
-<script>
-    export default {
-        props: {
-            top: { type: Boolean },
-        }
-    };
-</script>

nuxt.config.js

@@ -184,7 +184,10 @@ export default {
 
             if (config.links.enabled) {
                 routes.push({ path: '/' + config.links.route, component: resolve(__dirname, 'routes/links.vue') });
-                routes.push({ path: '/' + config.links.blogRoute + '/:slug', component: resolve(__dirname, 'routes/blog.vue'), name: 'blog' });
+                if (Object.keys(config.contact.blog).length) {
+                    routes.push({ path: '/' + config.links.blogRoute, component: resolve(__dirname, 'routes/blog.vue'), name: 'blog' });
+                    routes.push({ path: '/' + config.links.blogRoute + '/:slug', component: resolve(__dirname, 'routes/blogEntry.vue'), name: 'blogEntry' });
+                }
             }
 
             if (config.people.enabled) {

routes/blog.vue

@@ -1,7 +1,6 @@
 <template>
-    <NotFound v-if="!content"/>
-    <div v-else class="blog-post">
-        <div v-html="content"></div>
+    <div class="main">
+        <Blog/>
     </div>
 </template>
 
@@ -9,66 +8,10 @@
     import { head } from "../src/helpers";
 
     export default {
-        async asyncData({route}) {
-            try {
-                const content = (await import(`../data/blog/${route.params.slug}.md`)).default;
-                const titleMatch = content.match('<h1[^>]*>([^<]+)</h1>');
-                const title = titleMatch ? titleMatch[1] : null;
-                const imgMatch = content.match('<img src="([^"]+)"[^>]*>');
-                const img = imgMatch ? imgMatch[1] : null;
-
-                return {
-                    content,
-                    title,
-                    img,
-                }
-            } catch {
-                return {
-                    content: null,
-                };
-            }
-        },
         head() {
             return head({
-                title: this.title,
-                banner: this.img,
+                title: this.$t('contact.team.blog'),
             });
         },
     };
 </script>
-
-<style lang="scss">
-    @import "assets/variables";
-
-    .blog-post {
-        img {
-            max-width: 100%;
-        }
-
-        figure {
-            width: 100%;
-            max-width: 24rem;
-            padding: $spacer;
-            img {
-                width: 100%;
-            }
-            figcaption {
-                margin-top: $spacer / 2;
-                font-size: $small-font-size;
-            }
-        }
-
-        .forms-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(18rem, 3fr));
-            grid-gap: $spacer;
-            justify-items: center;
-            figure {
-                padding: 0;
-                figcaption {
-                    font-size: 90%;
-                }
-            }
-        }
-    }
-</style>

routes/blogEntry.vue

@@ -0,0 +1,79 @@
+<template>
+    <NotFound v-if="!content"/>
+    <div v-else class="blog-post">
+        <router-link :to="'/' + config.links.blogRoute" v-if="Object.keys(config.contact.blog).length">
+            <Icon v="pen-nib"/>
+            <T>contact.team.blog</T>
+        </router-link>
+
+        <div v-html="content"></div>
+    </div>
+</template>
+
+<script>
+    import { head } from "../src/helpers";
+
+    export default {
+        async asyncData({route}) {
+            try {
+                const content = (await import(`../data/blog/${route.params.slug}.md`)).default;
+                const titleMatch = content.match('<h1[^>]*>([^<]+)</h1>');
+                const title = titleMatch ? titleMatch[1] : null;
+                const imgMatch = content.match('<img src="([^"]+)"[^>]*>');
+                const img = imgMatch ? imgMatch[1] : null;
+
+                return {
+                    content,
+                    title,
+                    img,
+                }
+            } catch {
+                return {
+                    content: null,
+                };
+            }
+        },
+        head() {
+            return head({
+                title: this.title,
+                banner: this.img,
+            });
+        },
+    };
+</script>
+
+<style lang="scss">
+    @import "assets/variables";
+
+    .blog-post {
+        img {
+            max-width: 100%;
+        }
+
+        figure {
+            width: 100%;
+            max-width: 24rem;
+            padding: $spacer;
+            img {
+                width: 100%;
+            }
+            figcaption {
+                margin-top: $spacer / 2;
+                font-size: $small-font-size;
+            }
+        }
+
+        .forms-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(18rem, 3fr));
+            grid-gap: $spacer;
+            justify-items: center;
+            figure {
+                padding: 0;
+                figcaption {
+                    font-size: 90%;
+                }
+            }
+        }
+    }
+</style>

routes/links.vue

@@ -1,6 +1,7 @@
 <template>
-    <div>
-        <Links top/>
+    <div class="main">
+        <Blog/>
+        <Links/>
         <Media/>
         <Recommended/>
         <Socials/>

routes/team.vue

@@ -23,19 +23,11 @@
             <T>contact.team.description</T>
         </section>
 
-        <section v-if="Object.keys(config.contact.blog).length">
-            <h3>
-                <Icon v="pen-nib"/>
-                <T>contact.team.blog</T>
-            </h3>
-            <ul>
-                <li v-for="(title, slug) in config.contact.blog" class="mb-2">
-                    <nuxt-link :to="`/blog/${slug}`">
-                        {{title}}
-                    </nuxt-link>
-                </li>
-            </ul>
-        </section>
+        <router-link :to="'/' + config.links.blogRoute" v-if="Object.keys(config.contact.blog).length"
+                     class="btn btn-outline-primary btn-lg">
+            <Icon v="pen-nib"/>
+            <T>contact.team.blog</T>
+        </router-link>
 
         <section>
             <h3>