feat(home): init markdown for texts ✨

weareopensource · Jul 8, 2020 · af71a50 · af71a50
1 parent c1c9148
commit af71a50
Show file tree

Hide file tree

Showing 4 changed files with 174 additions and 13 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -48,6 +48,7 @@
     "lodash": "^4.17.15",
     "snyk": "^1.360.0",
     "vue": "^2.6.11",
+    "vue-markdown": "^2.2.4",
     "vue-router": "^3.3.4",
     "vuetify": "^2.3.4",
     "vuex": "^3.5.1"

diff --git a/src/lib/plugins/vuetify.js b/src/lib/plugins/vuetify.js
@@ -1,3 +1,6 @@
+/**
+ * Module dependencies.
+ */
 import Vue from 'vue';
 import Vuetify from 'vuetify/lib';
 import config from '@/config';

diff --git a/src/modules/home/views/home.view.vue b/src/modules/home/views/home.view.vue
@@ -30,6 +30,7 @@
         </v-img>
       </v-row>
     </section>
+
     <section id="about-me">
       <v-container class="text-center pb-12">
         <v-row align="center" justify="center">
@@ -43,8 +44,9 @@
             <v-responsive
               class="mx-auto title font-weight-light mb-8"
               max-width="720"
-              v-text="text"
-            ></v-responsive>
+            >
+              <vue-markdown :source=text />
+            </v-responsive>
             <v-avatar v-if="image" class="elevation-12 mb-12" size="128">
               <v-img :src="image"></v-img>
             </v-avatar>
@@ -69,7 +71,7 @@
                   </v-avatar>
                 </div>
               <v-card-title class="justify-center font-weight-black text-uppercase" v-text="title"></v-card-title>
-              <v-card-text class="subtitle-1" v-text="text"></v-card-text>
+              <v-card-text class="subtitle-1"><vue-markdown :source=text /></v-card-text>
             </v-card>
           </v-col>
         </v-row>
@@ -104,7 +106,7 @@
             <v-img :src="image" class="mb-4" height="275" max-width="100%"></v-img>
             <h3 class="font-weight-black mb-4 text-uppercase" v-text="title"></h3>
 
-            <div class="title font-weight-light mb-5" v-text="text"></div>
+            <div class="title font-weight-light mb-5"><vue-markdown :source=text /></div>
             <v-btn class="ml-n4 font-weight-black" text>Continue Reading</v-btn>
           </v-col>
         </v-row>
@@ -141,6 +143,7 @@
  * Module dependencies.
  */
 import { mapGetters } from 'vuex';
+import VueMarkdown from 'vue-markdown'; // production
 
 /**
  * Export default
@@ -152,7 +155,7 @@ export default {
       abouts: [
         {
           title: 'About Us',
-          text: 'Today, we dreams to create Backs/Fronts, aligns on feats, in multiple languages, in order to allow anyone to compose fullstack on demand (React, Angular, VusJS, Node, Nest, Swift, Go). Feel free to discuss, share other kind of bricks, and invite whoever you want with this mindset to come help us. There are so many innovations possible, starting a clean test should be simple.',
+          text: 'Today, we dreams to create Backs/Fronts, **aligns on feats**, in **multiple languages**, in order to allow anyone to **compose fullstack on demand** (React, Angular, VusJS, Node, Nest, Swift, Go). Feel free to discuss, share other kind of bricks, and invite whoever you want with this mindset to come help us. There are so many innovations possible, starting a clean test should be simple.',
           image: 'https://avatars3.githubusercontent.com/u/8588816?s=200&v=4',
           button: 'Github',
           link: 'https://github.com/weareopensource',
@@ -164,17 +167,17 @@ export default {
           {
             icon: 'users',
             title: 'Vibrant Community',
-            text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto cupiditate sint possimus quidem atque harum excepturi nemo velit tempora! Enim inventore fuga, qui ipsum eveniet facilis obcaecati corrupti asperiores nam',
+            text: '**Lorem** ipsum dolor sit amet consectetur adipisicing elit. Iusto cupiditate sint possimus quidem atque harum excepturi nemo velit tempora! Enim inventore fuga, qui ipsum eveniet facilis obcaecati corrupti asperiores nam',
           },
           {
             icon: 'cloud-upload-alt',
             title: 'Frequent Updates',
-            text: 'Sed ut elementum justo. Suspendisse non justo enim. Vestibulum cursus mauris dui, a luctus ex blandit. Lorem ipsum dolor sit amet consectetur adipisicing elit. qui ipsum eveniet facilis obcaecati corrupti consectetur adipisicing elit.',
+            text: '**Sed** ut elementum justo. Suspendisse non justo enim. Vestibulum cursus mauris dui, a luctus ex blandit. Lorem ipsum dolor sit amet consectetur adipisicing elit. qui ipsum eveniet facilis obcaecati corrupti consectetur adipisicing elit.',
           },
           {
             icon: 'history',
             title: 'Long-term Support',
-            text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto cupiditate sint possimus quidem atque harum excepturi nemo velit tempora! Enim inventore fuga, qui ipsum eveniet facilis obcaecati corrupti asperiores nam',
+            text: '**Lorem** ipsum dolor sit amet consectetur adipisicing elit. Iusto cupiditate sint possimus quidem atque harum excepturi nemo velit tempora! Enim inventore fuga, qui ipsum eveniet facilis obcaecati corrupti asperiores nam',
           },
         ],
       },
@@ -184,17 +187,17 @@ export default {
           {
             image: 'https://images.unsplash.com/photo-1423784346385-c1d4dac9893a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80',
             title: 'Mobile first & Responsive',
-            text: 'Phasellus lorem enim, luctus ut velit eget, convallis egestas eros. Sed ornare ligula eget tortor tempor, quis porta tellus dictum.',
+            text: '**Phasellus** lorem enim, luctus ut velit eget, convallis egestas eros. Sed ornare ligula eget tortor tempor, quis porta tellus dictum.',
           },
           {
             image: 'https://images.unsplash.com/photo-1475938476802-32a7e851dad1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80',
             title: 'Think outside the box',
-            text: 'Nam ut leo ipsum. Maecenas pretium aliquam feugiat. Aenean vel tempor est, vitae tincidunt risus. Sed sodales vestibulum nibh.',
+            text: '**Nam** ut leo ipsum. Maecenas pretium aliquam feugiat. Aenean vel tempor est, vitae tincidunt risus. Sed sodales vestibulum nibh.',
           },
           {
             image: 'https://images.unsplash.com/photo-1416339442236-8ceb164046f8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1892&q=80',
             title: 'Small changes, big difference',
-            text: 'Vestibulum in dictum velit, in rhoncus nibh. Maecenas neque libero, interdum a dignissim in, aliquet vitae lectus. Phasellus lorem enim, luctus ut velit eget.',
+            text: '**Vestibulum** in dictum velit, in rhoncus nibh. Maecenas neque libero, interdum a dignissim in, aliquet vitae lectus. Phasellus lorem enim, luctus ut velit eget.',
           },
         ],
       },
@@ -213,6 +216,9 @@ export default {
       },
     };
   },
+  components: {
+    VueMarkdown,
+  },
   computed: {
     ...mapGetters(['theme']),
   },