Design updated for future API update

package.json

@@ -16,6 +16,7 @@
     "bootstrap": "^5.0.2",
     "core-js": "^3.15.2",
     "jquery": "^3.6.0",
+    "marked": "^4.0.12",
     "popper.js": "^1.16.1",
     "vue": "^2.6.14",
     "vue-meta": "^2.4.0",

src/components/SelectedProjects.vue

@@ -5,13 +5,12 @@
       <div class="project"
            v-for="project in projects"
            :key="project.title.slug">
-        <img class="project_image" :src="project.image" :alt="project.title" />
+        <img v-if="project.images.small" class="project_image" :src="project.images.small" :alt="project.title" />
+        <img v-else-if="project.images.large" class="project_image" :src="project.images.large" :alt="project.title" />
         <div class="project_content">
           <h3 class="project_title">{{ project.title }}</h3>
           <div class="project_release">{{ project.version }}</div>
-          <div class="project_description">
-            <p>{{ project.short_description }}</p>
-          </div>
+          <div class="project_description" v-html="markdownToText(project)"></div>
         </div>
         <div class="more-button">
           <base-btn has-icon
@@ -55,6 +54,7 @@
         width: 200px;
         height: 200px;
         object-fit: cover;
+        object-position: top center;
       }
 
       .project_content {
@@ -181,6 +181,7 @@
 
 <script>
 import BaseButton from './BaseButton'
+import { marked } from 'marked'
 
 export default {
   name: 'SelectedProjects',
@@ -191,12 +192,19 @@ export default {
     const header = {
       title: this.$route.meta.title,
       description: [
-        'Witam Państwa na podstronie z moimi projektami!',
-        'Lista i treść jest niekompletna! (BETA)'
+        'Witam Państwa na podstronie z moimi projektami!'
       ]
     }
     this.$store.commit('setHeader', header)
   },
+  methods: {
+    markdownToText (project) {
+      const projectText = marked.parse(project.description)
+      const nodeElement = document.createElement('div')
+      nodeElement.innerHTML = projectText
+      return nodeElement.querySelector('p').innerText.substr(0, 350)
+    }
+  },
   props: {
     projects: {
       type: Array

src/components/sections/FavoriteProjects.vue

@@ -31,7 +31,7 @@ export default {
   },
   methods: {
     loadProjectList () {
-      fetch(process.env.VUE_APP_API_URL + '/projects/category/selected')
+      fetch(process.env.VUE_APP_API_URL + '/projects?category=selected')
         .then(response => response.json())
         .then(data => {
           this.select_projects = data

src/views/Project.vue

@@ -5,7 +5,7 @@
       <ul class="project_info">
         <li class="info_text">
           <font-awesome-icon class="icon" :icon="['far', 'clock']"/>
-          <span>{{ project.release_data }}</span>
+          <span>{{ project.release_date }}</span>
         </li>
         <li class="info_text">
           <font-awesome-icon class="icon" :icon="['far', 'user']"/>
@@ -17,19 +17,21 @@
         </li>
         <li class="info_text">
           <font-awesome-icon class="icon" :icon="['fas', 'code-branch']"/>
-          <span>{{ project.version }}</span>
+          <span>{{ project.project_version }}</span>
+        </li>
+        <li class="info_text" v-if="project.project_url">
+          <font-awesome-icon class="icon" :icon="['fas', 'link']"/>
+          <span><a :href="project.project_url"
+                  target="_blank"
+                  rel="noopener nofollow noreferrer">Link</a></span>
         </li>
       </ul>
     </header>
     <div class="container">
       <component :is="`figure`" class="project-photo">
-        <img :src="`${publicPath}${project.image}`" :alt="project.title">
+        <img :src="`${project.images.large}`" :alt="project.title">
       </component>
-      <div class="content">
-        <p v-for="(description, key) in project.description.split('\n')" :key="key">
-          {{ description }}
-        </p>
-      </div>
+      <div class="content" v-html="markdownToHtml"></div>
     </div>
   </section>
   <div v-else class="loading">
@@ -38,6 +40,8 @@
 </template>
 
 <script>
+import { marked } from 'marked'
+
 export default {
   name: 'Project',
   data () {
@@ -55,6 +59,9 @@ export default {
   computed: {
     getCategories () {
       return this.$store.getters.getCategories
+    },
+    markdownToHtml () {
+      return marked.parse(this.project.description)
     }
   },
   methods: {
@@ -69,7 +76,7 @@ export default {
       return categoriesText
     },
     loadProject (id) {
-      fetch('https://api.kamilcraft.com/projects/' + id)
+      fetch(process.env.VUE_APP_API_URL + '/project/' + id)
         .then(response => response.json())
         .then(data => {
           this.project = data
@@ -79,7 +86,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import "scss/default";
 
 .project {
@@ -147,16 +154,72 @@ export default {
     .content {
       margin: 35px 0;
 
-      p {
-        text-align: justify;
-        text-indent: 1.5em;
+      a {
+        color: #8D8D8D;
+
+        &:hover {
+          color: #A2CF00;
+        }
+      }
+
+      h2, h3 {
+        margin-top: 15px;
+        margin-bottom: 5px;
+      }
+
+      h2:first-of-type {
+        margin-top: 0;
+      }
+
+      h2 {
+        font-size: 1.6em;
+      }
+
+      h3 {
+        font-size: 1.4em;
+      }
+
+      p, ol li, ul li {
         line-height: 1.8em;
+        font-size: 1.1em;
 
         @include media-tablet {
-          font-size: 1em;
+          font-size: 1.2em;
           line-height: 1.5em;
         }
       }
+
+      p + ol, p + ul, p + blockquote {
+        margin-top: -10px;
+      }
+
+      ol, ul {
+        margin-bottom: 10px;
+        padding-inline-start: 2.1em;
+
+        li img {
+          display: block;
+          width: 100%;
+          padding: 0 5px 5px;
+          margin-top: .9em;
+        }
+      }
+
+      p {
+        margin-bottom: 10px;
+        text-align: justify;
+        /* text-indent: 1.5em; */
+      }
+
+      blockquote {
+        padding-left: 25px;
+        margin-left: 1.3em;
+        border-left: 1px solid rgb(116, 116, 116);
+
+        p {
+          text-indent: unset;
+        }
+      }
     }
   }
 }

src/views/Projects.vue

@@ -122,9 +122,9 @@ export default {
     async loadAllData () {
       await this.$store.dispatch('fetchCategories')
       await this.$store.dispatch('fetchProjects').then(projects => {
-        projects.sort((firstProduct, secondProduct) => {
+        /* projects.sort((firstProduct, secondProduct) => {
           return secondProduct.id - firstProduct.id
-        })
+        }) */
         this.projects = projects
       }).catch(error => {
         console.log(error)