feat(home): page ✨

detect banner at first line

Author: PierreBrisorgueil

src/modules/home/components/home.banner.component.vue

@@ -19,11 +19,12 @@
       <v-img
         :min-height="'calc(100vh/' + ratio + ' - ' + $vuetify.application.top + 'px)'"
         :max-height="'calc(100vh/' + ratio + ' - ' + $vuetify.application.top + 'px)'"
-        :src="
+        :src="banner ? banner : (
           config.home.temporalBackground
             ? generateTemporalBackground()
-            : require('@/assets/images/background.jpg')
+            : require('@/assets/images/background.jpg'))
         "
+        :gradient="banner ? 'rgba(0,0,0,.25), rgba(0,0,0,.25)' : ''"
       >
         <v-theme-provider dark>
           <v-container fill-height>
@@ -67,7 +68,7 @@
                   class="align-self-end"
                   fab
                   outlined
-                  @click="$vuetify.goTo('#about-me')"
+                  @click="$vuetify.goTo('#downloads')"
                   data-aos="fade-up"
                 >
                   <v-icon>fa-angle-down</v-icon>
@@ -120,7 +121,7 @@ import { mapGetters } from 'vuex';
  */
 export default {
   name: 'homeBannerComponent',
-  props: ['ratio', 'subscribe', 'app', 'statusMargin'],
+  props: ['ratio', 'subscribe', 'app', 'statusMargin', 'banner'],
   data() {
     return {
       valid: false,

src/modules/home/stores/home.store.js

@@ -57,11 +57,15 @@ const actions = {
       const pages = await Vue.prototype.axios.get(`${api}/${config.api.endPoints.home}/pages/${name}`);
       commit(
         'contents_set',
-        pages.data.data.map((item) => ({
-          title: null,
-          markdown: item.markdown,
-          style: 'classic',
-        })),
+        pages.data.data.map((item) => {
+          const firstLine = item.markdown.split('\n')[0];
+          return {
+            title: null,
+            banner: firstLine[0] === '!' ? /\(([^)]+)\)/.exec(firstLine)[1] : null,
+            markdown: firstLine[0] === '!' ? item.markdown.substring(firstLine.length + 2) : item.markdown,
+            style: 'classic',
+          };
+        }),
       );
     } catch (err) {
       commit('task_error', err);

src/modules/home/views/pages.view.vue

@@ -4,6 +4,7 @@
       v-bind:ratio="3"
       v-bind:subscribe="false"
       v-bind:app="{ subtitle: this.$route.meta.title || this._.startCase(this.$route.params.name) }"
+      v-bind:banner="(contents.length == 1 && contents[0].banner) ? contents[0].banner : null"
     ></homeBannerComponent>
     <section id="about-me">
       <v-container class="pb-12">