- vite + markdown-it

src/views/AboutView.vue

@@ -1,3 +1,25 @@
+<script setup>
+import { onMounted, onUnmounted } from 'vue';
+import { useStore } from 'vuex';
+import { useRoute } from 'vue-router';
+
+const store = useStore();
+const route = useRoute();
+
+onMounted(() => {
+  const header = {
+    title: route.meta.title,
+    description: 'Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.',
+  }
+  store.commit('setHeader', header);
+});
+
+onUnmounted(() => {
+  store.commit('resetHeaderTitle');
+  store.commit('resetHeaderDescription');
+});
+</script>
+
 <template>
   <section class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
     <p class="font-bold">
@@ -20,7 +42,7 @@
     <p>
       W ramach studiów uzyskałem zaświadczenie dotyczące ukończenia kursu:
       <a
-        :href="publicPath + 'download/certyfikat-laravel.pdf'"
+        href="/download/certyfikat-laravel.pdf"
         class="text-gray-500 underline hover:text-kamilcraft-green hover:no-underline"
         target="_blank"
         rel="noopener nofollow noreferrer"
@@ -42,27 +64,3 @@
     </p>
   </section>
 </template>
-
-<script setup>
-import { onMounted, onUnmounted } from 'vue'
-import { useStore } from 'vuex'
-import { useRoute } from 'vue-router'
-
-const publicPath = process.env.VUE_APP_BASE_URL + '/'
-
-const store = useStore()
-const route = useRoute()
-
-onMounted(() => {
-  const header = {
-    title: route.meta.title,
-    description: 'Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.'
-  }
-  store.commit('setHeader', header)
-})
-
-onUnmounted(() => {
-  store.commit('resetHeaderTitle')
-  store.commit('resetHeaderDescription')
-})
-</script>

src/views/ContactView.vue

@@ -9,8 +9,8 @@
 import { onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { useStore } from 'vuex'
-import MailContact from '@/components/sections/contacts/MailContact'
-import OtherContact from '@/components/sections/contacts/OtherContact'
+import MailContact from '@/components/sections/contacts/MailContact.vue'
+import OtherContact from '@/components/sections/contacts/OtherContact.vue'
 
 const route = useRoute()
 const store = useStore()

src/views/HomeView.vue

@@ -1,21 +1,13 @@
-<template>
-  <section class="home">
-    <About />
-    <ExperiencesSection />
-    <FavoriteProjects />
-  </section>
-</template>
-
 <script setup>
-import { onMounted, onUnmounted } from 'vue'
-import { useStore } from 'vuex'
-import { useRoute } from 'vue-router'
-import About from '@/components/sections/AboutSection'
-import ExperiencesSection from '@/components/sections/ExperiencesSection'
-import FavoriteProjects from '@/components/sections/FavoriteProjects'
+import { onMounted, onUnmounted } from 'vue';
+import { useStore } from 'vuex';
+import { useRoute } from 'vue-router';
+import About from '@/components/sections/AboutSection.vue';
+import ExperiencesSection from '@/components/sections/ExperiencesSection.vue';
+import FavoriteProjects from '@/components/sections/FavoriteProjects.vue';
 
-const store = useStore()
-const route = useRoute()
+const store = useStore();
+const route = useRoute();
 
 onMounted(() => {
   const header = {
@@ -23,13 +15,21 @@ onMounted(() => {
     description: [
       'Chciałbym Państwa powitać na mojej stronie!',
       'Przedstawiam tutaj część swojego życia związaną z programowaniem i projektowaniem aplikacji internetowych.'
-    ]
+    ],
   }
-  store.commit('setHeader', header)
+  store.commit('setHeader', header);
 })
 
 onUnmounted(() => {
-  store.commit('resetHeaderTitle')
-  store.commit('resetHeaderDescription')
+  store.commit('resetHeaderTitle');
+  store.commit('resetHeaderDescription');
 })
 </script>
+
+<template>
+  <section class="home">
+    <About />
+    <ExperiencesSection />
+    <FavoriteProjects />
+  </section>
+</template>

src/views/ProjectView.vue

@@ -64,9 +64,9 @@
           :alt="project.title"
         >
       </figure>
-      <div
+      <Markdown
         class="markdown mt-9"
-        v-html="markdownToHtml"
+        :source="project.description"
       />
     </div>
   </section>
@@ -79,52 +79,52 @@
 </template>
 
 <script setup>
-import { ref, reactive, computed, onMounted } from 'vue'
-import { useRoute } from 'vue-router'
-import { useStore } from 'vuex'
-import { marked } from 'marked'
+import { ref, reactive, computed, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { useStore } from 'vuex';
+import Markdown from '@/components/markdowns/MarkdownDescription.vue';
 
-const route = useRoute()
-const store = useStore()
+const apiURL = import.meta.env.VITE_APP_API_URL;
+const route = useRoute();
+const store = useStore();
 
-const isLoaded = ref(false)
-let project = reactive({})
+const isLoaded = ref(false);
+let project = reactive({});
 
-const getCategories = computed(() => store.getters.getCategories)
-const markdownToHtml = computed(() => marked.parse(project.description))
+const getCategories = computed(() => store.getters.getCategories);
 
 onMounted(() => {
   if (getCategories.value.length === 0) {
-    store.dispatch('fetchCategories')
+    store.dispatch('fetchCategories');
   }
-  loadProject(route.params.id)
+  loadProject(route.params.id);
 })
 
 function getCategoryName(categories = []) {
-  const categoriesText = []
+  const categoriesText = [];
   categories.forEach(categoryElement => {
-    const category = getCategories.value.find(category => category.slug === categoryElement)
+    const category = getCategories.value.find(category => category.slug === categoryElement);
     if (category) {
-      categoriesText.push(category.name)
+      categoriesText.push(category.name);
     }
-  })
-  return categoriesText[0] ?? undefined
+  });
+  return categoriesText[0] ?? undefined;
 }
 
 function loadProject(id) {
-  fetch(process.env.VUE_APP_API_URL + '/project/' + id)
+  fetch(apiURL + '/project/' + id)
     .then(response => response.json())
     .then(data => {
-      project.title = data.title
-      project.description = data.description
-      project.release_date = data.release_date
-      project.author = data.author
-      project.categories = data.categories
-      project.project_version = data.project_version
-      project.project_url = data.project_url
-      project.images = data.images
-      isLoaded.value = true
-    })
+      project.title = data.title;
+      project.description = data.description;
+      project.release_date = data.release_date;
+      project.author = data.author;
+      project.categories = data.categories;
+      project.project_version = data.project_version;
+      project.project_url = data.project_url;
+      project.images = data.images;
+      isLoaded.value = true;
+    });
 }
 </script>
 
@@ -153,7 +153,7 @@ a {
   }
 
   p + ol, p + ul, p + blockquote {
-    @apply -mb-2.5;
+    @apply -mb-2;
   }
 
   ol {
@@ -174,7 +174,7 @@ a {
   }
 
   p {
-    @apply mb-2.5 text-justify;
+    @apply mb-2 text-justify;
   }
 
   blockquote {

src/views/ProjectsView.vue

@@ -1,3 +1,59 @@
+<script setup>
+import { ref, reactive, computed, onMounted, onUnmounted } from 'vue';
+import { useStore } from 'vuex';
+import SelectedProjects from '@/components/SelectedProjects.vue';
+
+const store = useStore();
+
+const activeCategory = ref('all');
+const projects = reactive([]);
+
+const getCategories = computed(() => store.getters.getCategories);
+
+onMounted(() => {
+  loadAllData();
+});
+
+onUnmounted(() => {
+  store.commit('resetHeaderTitle');
+  store.commit('resetHeaderDescription');
+});
+
+function loadAllData () {
+  store.dispatch('fetchCategories');
+  store.dispatch('fetchProjects').then(loadedProjects => {
+    loadedProjects.forEach(project => {
+      projects.push(project);
+    });
+  });
+}
+
+function loadListWhereCategory(category) {
+  projects.splice(0);
+  setTimeout(() => {
+    if (category !== 'all') {
+      const storedProjects = store.getters.getProjects.filter(project => project.categories.includes(category));
+      storedProjects.forEach(project => {
+        projects.push(project);
+      })
+    } else {
+      store.getters.getProjects.forEach(project => {
+        projects.push(project);
+      });
+    }
+  }, 500);
+}
+
+function changeCategory(category) {
+  activeCategory.value = category
+  loadListWhereCategory(category)
+}
+
+function selectedCategory(categorySlug) {
+  return activeCategory.value === categorySlug;
+}
+</script>
+
 <template>
   <SelectedProjects :projects="projects">
     <div class="pb-9">
@@ -25,62 +81,6 @@
   </div>
 </template>
 
-<script setup>
-import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
-import { useStore } from 'vuex'
-import SelectedProjects from '@/components/SelectedProjects'
-
-const store = useStore()
-
-const activeCategory = ref('all')
-const projects = reactive([])
-
-const getCategories = computed(() => store.getters.getCategories)
-
-onMounted(() => {
-  loadAllData()
-})
-
-onUnmounted(() => {
-  store.commit('resetHeaderTitle')
-  store.commit('resetHeaderDescription')
-})
-
-function loadAllData () {
-  store.dispatch('fetchCategories')
-  store.dispatch('fetchProjects').then(loadedProjects => {
-    loadedProjects.forEach(project => {
-      projects.push(project)
-    })
-  })
-}
-
-function loadListWhereCategory(category) {
-  projects.splice(0)
-  setTimeout(() => {
-    if (category !== 'all') {
-      const storedProjects = store.getters.getProjects.filter(project => project.categories.includes(category))
-      storedProjects.forEach(project => {
-        projects.push(project)
-      })
-    } else {
-      store.getters.getProjects.forEach(project => {
-        projects.push(project)
-      })
-    }
-  }, 500)
-}
-
-function changeCategory(category) {
-  activeCategory.value = category
-  loadListWhereCategory(category)
-}
-
-function selectedCategory(categorySlug) {
-  return activeCategory.value === categorySlug
-}
-</script>
-
 <style lang="scss">
 @import "scss/media";