Add markdown support

components/Markdown.vue

@@ -0,0 +1,15 @@
+<template>
+  <!-- eslint-disable vue/no-v-html -->
+  <div v-if="content" v-html="$md.render(content)" />
+</template>
+
+<script>
+export default {
+  props: {
+    content: {
+      type: String,
+      required: true,
+    },
+  },
+}
+</script>

nuxt.config.js

@@ -36,12 +36,19 @@ export default {
   ],
 
   // Modules: https://go.nuxtjs.dev/config-modules
-  modules: [],
+  modules: ['@nuxtjs/markdownit'],
 
   // Build Configuration: https://go.nuxtjs.dev/config-build
   build: {},
 
   tailwindcss: {
     jit: true,
   },
+
+  markdownit: {
+    preset: 'default',
+    linkify: true,
+    breaks: true,
+    injected: true,
+  },
 }

package.json

@@ -18,6 +18,7 @@
     }
   },
   "dependencies": {
+    "@nuxtjs/markdownit": "^2.0.0",
     "core-js": "^3.9.1",
     "nuxt": "^2.15.3",
     "vue-click-outside": "^1.1.0"

pages/courses/_slug.vue

@@ -16,31 +16,8 @@
             <img src="~/assets/icon-arrow.svg" class="inline-block ml-2.5" />
           </router-link>
           <div class="bg-white grey-800 rounded-xl shadow-md p-5 pb-6">
-            <h3 class="text-2xl font-bold">Crucea Rosie</h3>
-            <div class="mt-8 space-y-7">
-              <p>
-                Crucea Rosie este cel mai mare furnizor de cursuri si
-                interventii in domeniul primului ajutor din tara. Oferim o gama
-                larga de cursuri de prim ajutor pentru persoanele cu varsta de
-                peste 16 ani care doresc sa invete primul ajutor pentru viata
-                lor de zi cu zi. Nu aveti nevoie de nicio experienta anterioara
-                ci doar de dorinta de a invata si de a lua parte la exercitii.
-              </p>
-              <p>
-                Crucea Rosie Romana are certificare europeana a cursurilor de
-                prim ajutor eliberata de Centrul Mondial de Referinta pentru
-                acordarea primului ajutor al Federatiei Internationale de Cruce
-                Rosie si Semiluna Rosie. Crucea Rosie Romana este furnizor de
-                prim ajutor acreditat de Ministerul Educatiei si Cercetarii
-                Stiintifice.
-              </p>
-              <p>
-                Programa de curs este standardizata la nivel national si
-                armonizata in conformitate cu recomandarile Consiliului European
-                de Resuscitare si ale Federatiei Internationale a Societatilor
-                de Cruce Rosie si Semiluna Rosie.
-              </p>
-            </div>
+            <h3 class="text-2xl font-bold">{{ provider.title }}</h3>
+            <Markdown class="mt-8 space-y-7" :content="provider.content" />
           </div>
         </div>
         <div>
@@ -49,33 +26,17 @@
             class="flex flex-col md:flex-row space-y-5 md:space-y-0 md:space-x-5 mt-10"
           >
             <div
-              class="inline-block border border-4 border-red-500 py-8 px-4 bg-white font-bold text-gray-800 text-xl text-center rounded-md md:w-1/3"
+              class="inline-block border-4 border-red-500 py-8 px-4 bg-white font-bold text-gray-800 text-xl text-center rounded-md md:w-1/3"
             >
               {{ date }}
             </div>
             <div
-              class="inline-block border border-4 border-red-500 py-8 px-4 bg-white font-bold text-gray-800 text-xl text-center rounded-md md:w-2/3"
+              class="inline-block border-4 border-red-500 py-8 px-4 bg-white font-bold text-gray-800 text-xl text-center rounded-md md:w-2/3"
             >
               {{ address }}
             </div>
           </div>
-          <div>
-            <div class="mt-10 space-y-7">
-              <p>
-                Durata unui curs este de 12 ore. Cursurile sunt furnizate de
-                medici, sau instructori atestati ca formatori de prim ajutor de
-                baza. Cursul de prim ajutor se finalizeaza cu un examen, in urma
-                caruia se primeste certificat de absolvire si legitimatie care
-                confirma ca persoana este instruita sa acorde primul.
-              </p>
-              <p>
-                Dupa absolvirea cursurilor de prim ajutor, persoana respectiva
-                stie sa acorde prim ajutor in caz de: pierderea starii de
-                constienta; stop cardio-respirator; hemoragii; luxatii, entorse;
-                arsuri (in caz de electrocutare sau insolatie), înec.
-              </p>
-            </div>
-          </div>
+          <Markdown class="mt-10 space-y-7" :content="article.content" />
           <ShareButtons class="mt-16" />
         </div>
       </div>
@@ -89,6 +50,19 @@ export default {
     return {
       title:
         'Acesta ar fi tilul unui curs de prima ajutor foarte frumos cu un titlu lung',
+      provider: {
+        title: 'Crucea Rosie',
+        content: `Crucea Rosie este cel mai mare furnizor de cursuri si interventii in domeniul primului ajutor din tara. Oferim o gama larga de cursuri de prim ajutor pentru persoanele cu varsta de peste 16 ani care doresc sa invete primul ajutor pentru viata lor de zi cu zi. Nu aveti nevoie de nicio experienta anterioara ci doar de dorinta de a invata si de a lua parte la exercitii.
+
+Crucea Rosie Romana are certificare europeana a cursurilor de prim ajutor eliberata de Centrul Mondial de Referinta pentru acordarea primului ajutor al Federatiei Internationale de Cruce Rosie si Semiluna Rosie. Crucea Rosie Romana este furnizor de prim ajutor acreditat de Ministerul Educatiei si Cercetarii Stiintifice.
+
+Programa de curs este standardizata la nivel national si armonizata in conformitate cu recomandarile Consiliului European de Resuscitare si ale Federatiei Internationale a Societatilor de Cruce Rosie si Semiluna Rosie.`,
+      },
+      article: {
+        content: `Durata unui curs este de 12 ore. Cursurile sunt furnizate de medici, sau instructori atestati ca formatori de prim ajutor de baza. Cursul de prim ajutor se finalizeaza cu un examen, in urma caruia se primeste certificat de absolvire si legitimatie care confirma ca persoana este instruita sa acorde primul.
+
+Dupa absolvirea cursurilor de prim ajutor, persoana respectiva stie sa acorde prim ajutor in caz de: pierderea starii de constienta; stop cardio-respirator; hemoragii; luxatii, entorse; arsuri (in caz de electrocutare sau insolatie), înec.`,
+      },
       date: '6 aprilie 2021',
       address: 'Str Viorele nr 2, sector 4, București',
       button: 'Înscrie-te',

pages/info/_slug.vue

@@ -4,73 +4,11 @@
       <Hero :title="title" :footer="description" />
     </section>
     <section class="container mx-auto px-5 pt-10 md:pt-16">
-      <div class="grid md:grid-cols-12 gap-5">
-        <div class="md:col-span-8 space-y-4 leading-relaxed">
-          <h2 class="text-lg">
-            Sagittis scelerisque nulla cursus in enim consectetur quam. Dictum
-            urna sed consectetur neque tristique pellentesque. Blandit amet, sed
-            aenean erat arcu morbi.
-          </h2>
-          <p>
-            Sollicitudin tristique eros erat odio sed vitae, consequat turpis
-            elementum. Lorem nibh vel, eget pretium arcu vitae. Eros eu viverra
-            donec ut volutpat donec laoreet quam urna.
-          </p>
-          <p>
-            Bibendum eu nulla feugiat justo, elit adipiscing. Ut tristique sit
-            nisi lorem pulvinar. Urna, laoreet fusce nibh leo. Dictum et et et
-            sit. Faucibus sed non gravida lectus dignissim imperdiet a.
-          </p>
-          <p>
-            Dictum magnis risus phasellus vitae quam morbi. Quis lorem lorem
-            arcu, metus, egestas netus cursus. In.
-          </p>
-          <h4 class="text-lg font-bold pt-3">How we helped</h4>
-          <p>
-            Tincidunt integer commodo, cursus etiam aliquam neque, et.
-            Consectetur pretium in volutpat, diam. Montes, magna cursus nulla
-            feugiat dignissim id lobortis amet. Laoreet sem est phasellus eu
-            proin massa, lectus. Diam rutrum posuere donec ultricies non morbi.
-            Mi a platea auctor mi.
-          </p>
-          <ul class="list-disc list-inside space-y-2">
-            <li>Quis elit egestas venenatis mattis dignissim.</li>
-            <li>
-              Cras cras lobortis vitae vivamus ultricies facilisis tempus.
-            </li>
-            <li>Orci in sit morbi dignissim metus diam arcu pretium.</li>
-          </ul>
-          <p>
-            Sollicitudin tristique eros erat odio sed vitae, consequat turpis
-            elementum. Lorem nibh vel, eget pretium arcu vitae. Eros eu viverra
-            donec ut volutpat donec laoreet quam urna.
-          </p>
-          <p>
-            Bibendum eu nulla feugiat justo, elit adipiscing. Ut tristique sit
-            nisi lorem pulvinar. Urna, laoreet fusce nibh leo. Dictum et et et
-            sit. Faucibus sed non gravida lectus dignissim imperdiet a.
-          </p>
-          <p>
-            Dictum magnis risus phasellus vitae quam morbi. Quis lorem lorem
-            arcu, metus, egestas netus cursus. In.
-          </p>
-          <p>
-            Dictum magnis risus phasellus vitae quam morbi. Quis lorem lorem
-            arcu, metus, egestas netus cursus. In.
-          </p>
-          <h4 class="text-lg font-bold pt-3">How we helped</h4>
-          <p>
-            Tincidunt integer commodo, cursus etiam aliquam neque, et.
-            Consectetur pretium in volutpat, diam. Montes, magna cursus nulla
-            feugiat dignissim id lobortis amet. Laoreet sem est phasellus eu
-            proin massa, lectus. Diam rutrum posuere donec ultricies non morbi.
-            Mi a platea auctor mi.
-          </p>
-        </div>
-
-        <div class="md:col-span-4">
+      <div class="info__grid">
+        <Markdown class="info__article" :content="content" />
+        <div class="info__aside">
           <ShareButtons />
-          <img class="w-full mt-10 mx-auto rounded-lg" :src="image" />
+          <img class="info__image" :src="image" />
         </div>
       </div>
     </section>
@@ -82,10 +20,76 @@ export default {
   data() {
     return {
       title: 'How to use search engine optimization to drive sales',
+      content: `## Sagittis scelerisque nulla cursus in enim consectetur quam. Dictum urna sed consectetur neque tristique pellentesque. Blandit amet, sed aenean erat arcu morbi.
+
+Sollicitudin tristique eros erat odio sed vitae, consequat turpis elementum. Lorem nibh vel, eget pretium arcu vitae. Eros eu viverra donec ut volutpat donec laoreet quam urna.
+
+Bibendum eu nulla feugiat justo, elit adipiscing. Ut tristique sit nisi lorem pulvinar. Urna, laoreet fusce nibh leo. Dictum et et et sit. Faucibus sed non gravida lectus dignissim imperdiet a.
+
+Dictum magnis risus phasellus vitae quam morbi. Quis lorem lorem arcu, metus, egestas netus cursus. In.
+
+- Quis elit egestas venenatis mattis dignissim.
+- Cras cras lobortis vitae vivamus ultricies facilisis tempus.
+- Orci in sit morbi dignissim metus diam arcu pretium.
+
+Rhoncus nisl, libero egestas diam fermentum dui. At quis tincidunt vel ultricies. Vulputate aliquet velit faucibus semper. Pellentesque in venenatis vestibulum consectetur nibh id. In id ut tempus egestas. Enim sit aliquam nec, a. Morbi enim fermentum lacus in. Viverra.
+
+### How we helped
+
+Tincidunt integer commodo, cursus etiam aliquam neque, et. Consectetur pretium in volutpat, diam. Montes, magna cursus nulla feugiat dignissim id lobortis amet. Laoreet sem est phasellus eu proin massa, lectus. Diam rutrum posuere donec ultricies non morbi. Mi a platea auctor mi.
+
+Sagittis scelerisque nulla cursus in enim consectetur quam. Dictum urna sed consectetur neque tristique pellentesque. Blandit amet, sed aenean erat arcu morbi.
+
+Sollicitudin tristique eros erat odio sed vitae, consequat turpis elementum. Lorem nibh vel, eget pretium arcu vitae. Eros eu viverra donec ut volutpat donec laoreet quam urna.
+
+Bibendum eu nulla feugiat justo, elit adipiscing. Ut tristique sit nisi lorem pulvinar. Urna, laoreet fusce nibh leo. Dictum et et et sit. Faucibus sed non gravida lectus dignissim imperdiet a.
+
+Dictum magnis risus phasellus vitae quam morbi. Quis lorem lorem arcu, metus, egestas netus cursus. In.
+
+- Quis elit egestas venenatis mattis dignissim.
+- Cras cras lobortis vitae vivamus ultricies facilisis tempus.
+- Orci in sit morbi dignissim metus diam arcu pretium.
+
+Rhoncus nisl, libero egestas diam fermentum dui. At quis tincidunt vel ultricies. Vulputate aliquet velit faucibus semper. Pellentesque in venenatis vestibulum consectetur nibh id. In id ut tempus egestas. Enim sit aliquam nec, a. Morbi enim fermentum lacus in. Viverra.
+
+### How we helped
+Tincidunt integer commodo, cursus etiam aliquam neque, et. Consectetur pretium in volutpat, diam. Montes, magna cursus nulla feugiat dignissim id lobortis amet. Laoreet sem est phasellus eu proin massa, lectus. Diam rutrum posuere donec ultricies non morbi. Mi a platea auctor mi.
+
+Sagittis scelerisque nulla cursus in enim consectetur quam. Dictum urna sed consectetur neque tristique pellentesque. Blandit amet, sed aenean erat arcu morbi.`,
       description: 'Feb 12, 2020 · 11 min read',
       date: '6 aprilie 2021',
       image: 'https://picsum.photos/480/560?random=1',
     }
   },
 }
 </script>
+
+<style>
+.info__grid {
+  @apply grid md:grid-cols-12 gap-5;
+}
+
+.info__aside {
+  @apply md:col-span-4;
+}
+
+.info__article {
+  @apply md:col-span-8 space-y-4 leading-relaxed;
+}
+
+.info__article h2 {
+  @apply text-xl;
+}
+
+.info__article h3 {
+  @apply text-lg font-bold pt-3;
+}
+
+.info__article ul {
+  @apply list-disc list-inside space-y-2;
+}
+
+.info__image {
+  @apply w-full mt-10 mx-auto rounded-lg;
+}
+</style>