Merge pull request #87 from gdsc-ncku/yeeway

Refactor component styles and update breadcrumb logic

src/components/Breadcrumb.vue

@@ -14,6 +14,7 @@
 <script>
 import departmentHandbookData from '../data/departmentHandbook.json';
 import featuredArticlesData from '../data/featuredArticles.json';
+import LetterToHighSchoolStudents from '../data/LetterToHighSchoolStudents.json';
 
 export default {
   data() {
@@ -37,19 +38,21 @@ export default {
 
       if (this.$route.params) {
         const dynamicParam = Object.values(this.$route.params)[0];
-        console.log(dynamicParam);
+
         if (dynamicParam) {
           const targetDepartment = departmentHandbookData.map((college) => {
             return college.departments.find((department) => {
               return department.id === dynamicParam;
             });
           }).filter(Boolean)[0]
-          // console.log(targetDepartment);
 
           const targetArticle = featuredArticlesData.find((article) => {
             return article.id === dynamicParam;
           })
-          // console.log(targetArticle);
+
+          const targetLetter = LetterToHighSchoolStudents.find((letter) => {
+            return letter.id === dynamicParam;
+          })
 
           if (targetDepartment) {
             this.breadcrumbs.push({
@@ -61,11 +64,14 @@ export default {
               to: this.$route.path,
               label: targetArticle.title,
             });
-          } else {
-            // error handling
+          } else if (targetLetter) {
+            this.breadcrumbs.push({
+              to: this.$route.path,
+              label: targetLetter.author,
+            });
           }
         }
-        // console.log(this.breadcrumbs);
+
       }
     },
   },

src/components/Letter.vue

@@ -1,10 +1,10 @@
 <template>
   <RouterLink
     :to="link"
-    class="h-[18rem] w-[20rem] block rounded-lg pt-[6rem] group overflow-hidden last:mr-auto"
+    class="h-[18rem] w-[20rem] block rounded-lg pt-[6rem] group overflow-hidden"
   >
     <div class="w-full h-[12rem] relative isolate bg-primary-900">
-      <div class="absolute bottom-4 right-3 text-xl font-bold text-white">FROM {{ name }}</div>
+      <div class="absolute bottom-4 right-3 text-xl font-bold text-white">From {{ name }}</div>
 
       <!-- letter closed -->
       <div class="group-hover:hidden w-full h-[2rem] absolute top-0 bg-primary-700"></div>