Merge pull request #3 from Gintamashiichan/dev

feat(views): add icon and 404 page
Gintamashiichan · Dec 5, 2023 · 77b00e9 · 77b00e9
2 parents ea6ee2b + d1a3c8f
commit 77b00e9
Show file tree

Hide file tree

Showing 13 changed files with 60 additions and 63 deletions.
diff --git a/index.html b/index.html
@@ -2,9 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/icon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue + TS</title>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
+    />
+    <title>Xenus</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "nexus",
   "private": true,
-  "version": "0.0.9",
+  "version": "0.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.vue b/src/App.vue
@@ -1,5 +1,18 @@
 <template>
   <div id="app">
+    <div class="select-none h-full flex flex-col">
+      <NavBar />
+    </div>
     <router-view />
   </div>
 </template>
+<script lang="ts">
+import NavBar from "./components/NavBar.vue";
+
+export default {
+  name: "App",
+  components: {
+    NavBar,
+  },
+};
+</script>
diff --git a/src/assets/github-mark.svg b/src/assets/github-mark.svg
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
@@ -7,42 +7,29 @@
       <ul class="menu menu-horizontal">
         <li v-for="nav in Navs" :key="nav.name">
           <a :href="nav.link" class="ml-6 font-black">
+            <i class="fa-solid" :class="[`fa-${nav.icon}`]"></i>
             {{ nav.name }}
           </a>
         </li>
       </ul>
     </div>
-    <div className="drawer navbar-end">
-      <input id="drawer" type="checkbox" className="drawer-toggle" />
-      <div className="drawer-content">
-        <label
-          htmlFor="drawer"
-          className="btn btn-ghost drawer-button sm:hidden"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            class="inline-block w-5 h-5 stroke-current"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M4 6h16M4 12h16M4 18h16"
-            ></path>
-          </svg>
+    <div class="drawer navbar-end">
+      <input id="drawer" type="checkbox" class="drawer-toggle" />
+      <div class="drawer-content">
+        <label htmlFor="drawer" class="btn btn-ghost drawer-button sm:hidden">
+          <i class="fa-solid fa-bars fa-2xl"></i>
         </label>
       </div>
-      <div className="drawer-side">
+      <div class="drawer-side">
         <label
           htmlFor="drawer"
           aria-label="close sidebar"
-          className="drawer-overlay"
+          class="drawer-overlay"
         ></label>
-        <ul className="menu p-4 w-64 min-h-full bg-base-100 text-base-content">
+        <ul class="menu p-4 w-64 min-h-full bg-base-100 text-base-content">
           <li v-for="nav in Navs" :key="nav.name">
             <a :href="nav.link" class="mt-8 text-xl font-black">
+              <i class="fa-solid" :class="[`fa-${nav.icon}`]"></i>
               {{ nav.name }}
             </a>
           </li>
@@ -61,14 +48,17 @@ export default {
         {
           name: "Home",
           link: "/",
+          icon: "home",
         },
         {
           name: "Blog",
           link: "/posts",
+          icon: "blog",
         },
         {
           name: "Tags",
           link: "/tags",
+          icon: "tags",
         },
       ],
     };

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -6,6 +6,7 @@ import PostList from "../views/Blogs/PostList.vue";
 import BlogView from "../views/Blogs/BlogView.vue";
 import TagList from "../views/Tags/TagList.vue";
 import TagClassification from "../views/Tags/TagClassification.vue";
+import NotFoundView from "../views/Errors/NotFoundView.vue";
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -33,6 +34,11 @@ const routes: Array<RouteRecordRaw> = [
     name: "Tag",
     component: TagClassification,
   },
+  { 
+    path: '/:pathMatch(.*)', 
+    component: NotFoundView
+  }
+
 ];
 
 const router = createRouter({

diff --git a/src/views/Blogs/BlogView.vue b/src/views/Blogs/BlogView.vue
@@ -1,7 +1,4 @@
 <template>
-  <div class="select-none h-full flex flex-col">
-    <NavBar />
-  </div>
   <div
     class="select-none h-full w-full flex flex-col items-center overflow-hidden"
   >
@@ -13,7 +10,6 @@
   </div>
 </template>
 <script lang="ts">
-import NavBar from "../../components/NavBar.vue";
 import { getPostData } from "../../libs/posts";
 import { PostData } from "../../types/Posts";
 
@@ -24,9 +20,6 @@ export default {
       postData: {} as PostData,
     };
   },
-  components: {
-    NavBar,
-  },
   async mounted() {
     this.postData = await getPostData(this.$route.params.id as string);
   },

diff --git a/src/views/Blogs/PostList.vue b/src/views/Blogs/PostList.vue
@@ -1,7 +1,4 @@
 <template>
-  <div class="select-none h-full flex flex-col">
-    <NavBar />
-  </div>
   <div
     class="select-none h-full w-full flex flex-row flex-wrap justify-center"
     v-if="posts"
@@ -17,9 +14,7 @@
 </template>
 
 <script lang="ts">
-import NavBar from "../../components/NavBar.vue";
 import Card from "../../components/Card.vue";
-import Buttons from "../../ui/Buttons.vue";
 import { getSortedPostsData } from "../../libs/posts";
 import type { Post } from "../../types/Posts";
 
@@ -31,8 +26,6 @@ export default {
     };
   },
   components: {
-    NavBar,
-    Buttons,
     Card,
   },
   async mounted() {

diff --git a/src/views/Errors/NotFoundView.vue b/src/views/Errors/NotFoundView.vue
@@ -0,0 +1,18 @@
+<template>
+    <h1 class="flex flex-col h-full w-full mx-auto items-center justify-center">
+        <i class="fa-solid fa-circle-exclamation fa-xl text-6xl"></i>
+        <span class="font-extrabold text-6xl my-10">404</span>
+        <span class="text-4xl mb-10">You reach the end of the world</span>
+        <Buttons type="neutral"><router-link to="/">Return</router-link></Buttons>
+    </h1>
+</template>
+<script lang="ts">
+import Buttons from '../../ui/Buttons.vue';
+
+export default {
+    name: 'NotFound',
+    components:{
+        Buttons
+    }
+}
+</script>
diff --git a/src/views/Index.vue b/src/views/Index.vue
@@ -1,17 +1,10 @@
 <script lang="ts">
-import NavBar from "../components/NavBar.vue";
-import Buttons from "../ui/Buttons.vue";
 export default {
   name: "Index",
-  components: {
-    NavBar,
-    Buttons,
-  },
 };
 </script>
 <template>
   <div class="select-none h-full flex flex-col">
-    <NavBar />
     <div class="flex-grow mt-48 max-sm:mt-16">
       <div class="flex w-full max-w-screen-lg mx-auto">
         <div class="w-1/5 mx-auto max-md:hidden">
@@ -29,10 +22,9 @@ Rookie Front-end Developer.
 Wanna know <a class="link no-underline hover:underline"><RouterLink to="/posts/about">more about me</RouterLink></a>?
             </pre>
             <a href="https://www.github.com/Gintamashiichan">
-              <img
-                src="../assets/github-mark.svg"
-                class="w-8 h-8 ease-in-out duration-300 hover:-translate-y-5 max-sm:mt-8"
-              />
+              <i
+                class="fa-brands fa-github fa-2xl ease-in-out duration-300 hover:-translate-y-5 max-sm:mt-8"
+              ></i>
             </a>
           </div>
         </div>

diff --git a/src/views/Tags/TagClassification.vue b/src/views/Tags/TagClassification.vue
@@ -1,7 +1,4 @@
 <template>
-  <div class="select-none h-full flex flex-col">
-    <NavBar />
-  </div>
   <h1 class="text-center text-3xl font-extrabold mb-8">
     Articles under "{{ $route.params.tag }}" tag
   </h1>
@@ -17,7 +14,6 @@
 </template>
 
 <script lang="ts">
-import NavBar from "../../components/NavBar.vue";
 import Buttons from "../../ui/Buttons.vue";
 import { getPostsByTag } from "../../libs/tags";
 
@@ -29,7 +25,6 @@ export default {
     };
   },
   components: {
-    NavBar,
     Buttons,
   },
   async mounted() {

diff --git a/src/views/Tags/TagList.vue b/src/views/Tags/TagList.vue
@@ -1,7 +1,4 @@
 <template>
-  <div class="select-none h-full flex flex-col">
-    <NavBar />
-  </div>
   <h1 class="text-center text-4xl font-extrabold mb-8">Tags</h1>
   <div
     class="select-none h-full w-full flex flex-row flex-wrap justify-center"
@@ -24,7 +21,6 @@
 </template>
 
 <script lang="ts">
-import NavBar from "../../components/NavBar.vue";
 import Buttons from "../../ui/Buttons.vue";
 import { getTagList } from "../../libs/tags";
 import type { Tag } from "../../types/Tags";
@@ -37,7 +33,6 @@ export default {
     };
   },
   components: {
-    NavBar,
     Buttons,
   },
   async mounted() {