- vite + markdown-it

src/components/SelectedProjects.vue

@@ -1,3 +1,32 @@
+<script setup>
+import { defineProps, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+import BaseButton from '@/components/buttons/BaseButton.vue';
+import Markdown from "@/components/markdowns/MarkdownShort.vue";
+
+defineProps({
+  projects: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+onMounted(() => {
+  const header = {
+    title: route.meta.title,
+    description: [
+      'Witam Państwa na podstronie z moimi projektami!'
+    ]
+  }
+  store.commit('setHeader', header)
+})
+</script>
+
 <template>
   <section
     id="projects"
@@ -31,10 +60,7 @@
               {{ project.project_version }}
             </p>
           </header>
-          <p
-            class="text-sm"
-            v-html="markdownToText(project)"
-          />
+          <Markdown :source="project.description" />
         </div>
         <div
           class="project-button lg:flex lg:absolute lg:justify-center lg:items-center lg:left-0 lg:top-0 lg:w-full lg:h-full"
@@ -55,43 +81,7 @@
   </section>
 </template>
 
-<script setup>
-import { defineProps, onMounted } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useStore } from 'vuex'
-import BaseButton from '@/components/buttons/BaseButton'
-import { marked } from 'marked'
-
-defineProps({
-  projects: {
-    type: Array,
-    default: () => []
-  }
-})
-
-const route = useRoute()
-const router = useRouter()
-const store = useStore()
-
-onMounted(() => {
-  const header = {
-    title: route.meta.title,
-    description: [
-      'Witam Państwa na podstronie z moimi projektami!'
-    ]
-  }
-  store.commit('setHeader', header)
-})
-
-function markdownToText (project) {
-  const projectText = marked.parse(project.description)
-  const nodeElement = document.createElement('div')
-  nodeElement.innerHTML = projectText
-  return nodeElement.querySelector('p').innerText.substr(0, 350)
-}
-</script>
-
-<style lang="scss" scoped>
+<style lang="scss">
 @import 'scss/media';
 
 .grid-project {

src/components/SiteHeader.vue

@@ -27,7 +27,7 @@
 import { computed } from 'vue'
 import { useStore } from 'vuex'
 import { useRoute } from 'vue-router'
-import Navigation from '@/components/NavigationHeader'
+import Navigation from '@/components/NavigationHeader.vue'
 
 const store = useStore()
 const route = useRoute()

src/components/markdowns/MarkdownDescription.vue

@@ -0,0 +1,20 @@
+<script setup>
+import MarkdownIt from 'markdown-it';
+
+const markdown = new MarkdownIt();
+
+const props = defineProps({
+    source: {
+        type: String,
+        required: true,
+    }
+});
+
+function render() {
+    return markdown.render(props.source);
+}
+</script>
+
+<template>
+  <div v-html="render()" />
+</template>

src/components/markdowns/MarkdownShort.vue

@@ -0,0 +1,33 @@
+<script setup>
+import MarkdownIt from 'markdown-it';
+
+const markdown = new MarkdownIt();
+
+const props = defineProps({
+    source: {
+        type: String,
+        required: true,
+    }
+});
+
+function render() {
+    const nodeChildElement = markdown.render(props.source);
+    const nodeElement = document.createElement('div');
+    nodeElement.innerHTML = nodeChildElement;
+    let length = 0;
+    let returnText = '';
+    nodeElement.querySelectorAll('p').forEach(value => {
+        if (length < 351) {
+            length += value.innerText.length;
+            returnText += value.innerText + ' ';
+        } else {
+            return;
+        }
+    });
+    return returnText.substring(0, 350).trim();
+}
+</script>
+
+<template>
+  <p v-text="render()" />
+</template>

src/components/sections/AboutSection.vue

@@ -1,3 +1,16 @@
+<script setup>
+import BaseButton from '@/components/buttons/BaseButton.vue'
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+function scrollTo(id) {
+  document.querySelector(id).scrollIntoView({
+    behavior: 'smooth'
+  })
+}
+</script>
+
 <template>
   <div class="bg-neutral-50">
     <div class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
@@ -37,7 +50,7 @@
         <div id="grid-photo">
           <figure>
             <img
-              :src="`${publicPath}assets/me.jpg`"
+              src="/assets/me.jpg"
               class="mx-auto rounded-full object-cover w-[12.5rem] h-[12.5rem]"
               alt="Moje zdjęcie"
             >
@@ -48,20 +61,6 @@
   </div>
 </template>
 
-<script setup>
-import BaseButton from '@/components/buttons/BaseButton'
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
-const publicPath = process.env.VUE_APP_BASE_URL + '/'
-
-function scrollTo(id) {
-  document.querySelector(id).scrollIntoView({
-    behavior: 'smooth'
-  })
-}
-</script>
-
 <style lang="scss">
 #grid-columns {
   grid-template-columns: 1fr 1fr .8fr;

src/components/sections/FavoriteProjects.vue

@@ -24,10 +24,11 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import Projects from '@/components/SelectedProjects'
-import GhostButton from '@/components/buttons/GhostButton'
+import Projects from '@/components/SelectedProjects.vue'
+import GhostButton from '@/components/buttons/GhostButton.vue'
 
 const router = useRouter()
+const apiURL = import.meta.env.VITE_APP_API_URL
 
 let select_projects = ref([])
 
@@ -36,7 +37,7 @@ onMounted(() => {
 })
 
 function loadProjectList() {
-  fetch(process.env.VUE_APP_API_URL + '/projects?category=selected')
+  fetch(apiURL + '/projects?category=selected')
     .then(response => response.json())
     .then(data => {
       select_projects.value = data
@@ -44,7 +45,7 @@ function loadProjectList() {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import "scss/default";
 
 .selected-projects {

src/components/sections/contacts/MailContact.vue

@@ -103,7 +103,7 @@
 </template>
 
 <script setup>
-import BaseButton from '@/components/buttons/BaseButton'
+import BaseButton from '@/components/buttons/BaseButton.vue'
 import { ref, reactive, watch, computed } from 'vue'
 
 function emailValidate (mailObj) {