Merge pull request #4 from ConstructFund/feature/router

fix: add correct router, link and icons

Author: skymen

.gitignore

@@ -26,3 +26,4 @@ coverage
 *.njsproj
 *.sln
 *.sw?
+codealike.json

package-lock.json

@@ -12,6 +12,7 @@
     "@vueuse/core": "^10.1.2",
     "vite-plugin-vuetify": "^1.0.2",
     "vue": "^3.2.47",
+    "vue-router": "^4.2.4",
     "vuetify": "^3.2.1",
     "webfontloader": "^1.6.28"
   },

package.json

@@ -1,64 +1,7 @@
 <template>
   <v-app dark>
     <v-main>
-      <v-toolbar app>
-        <v-toolbar-title>Construct Fund</v-toolbar-title>
-        <v-spacer></v-spacer>
-        <v-btn text @click="reportIssue('_self')" @auxclick="reportIssue('_blank')">
-          <v-icon right>mdi-open-in-new</v-icon>
-          Report issue
-        </v-btn>
-      </v-toolbar>
-      <div class="parent">
-        <Card v-for="(item, i) in content" :key="i" :content="item"/>
-      </div>
+      <router-view></router-view>
     </v-main>
   </v-app>
 </template>
-
-<script setup>
-import Card from "@/components/Card.vue";
-import content from "@/assets/content.json";
-
-function reportIssue(target) {
-  window.open(
-      "https://github.com/ConstructFund/constructfund.github.io/issues/",
-      target);
-}
-</script>
-
-<style scoped>
-.parent {
-  width: 100%;
-  height: calc(100% - 64px);
-  overflow: auto;
-  padding-left: 30%;
-  padding-right: 30%;
-  padding-top: 50px;
-  padding-bottom: 50px;
-}
-
-/* media query for mobile padding */
-@media (max-width: 700px) {
-  .parent {
-    padding-left: 20px;
-    padding-right: 20px;
-  }
-}
-
-/* media query for small screen padding min width 801 */
-@media (min-width: 701px) and (max-width: 1200px) {
-  .parent {
-    padding-left: 10%;
-    padding-right: 10%;
-  }
-}
-
-/* media query for small screen padding min width 801 */
-@media (min-width: 1201px) and (max-width: 1500px) {
-  .parent {
-    padding-left: 20%;
-    padding-right: 20%;
-  }
-}
-</style>

src/App.vue

@@ -9,10 +9,11 @@
       <v-spacer></v-spacer>
       <div v-if="content.hasWebsite">
         <v-btn
-            @click="openWebsite('_self')"
-            @auxclick="openWebsite('_blank')"
-            variant="text"> Open Website </v-btn>
-        <v-icon right>mdi-open-in-new</v-icon>
+            :href="props.content.url"
+            variant="text">
+            Open Website
+            <v-icon end>mdi-open-in-new</v-icon>
+          </v-btn>
       </div>
     </v-toolbar>
     <div v-else>
@@ -33,7 +34,7 @@
       </v-sheet>
 
       <v-sheet v-if="content.hasWebsite" width="100%" class="button">
-        <v-btn @click="openWebsite('_self')" @auxclick="openWebsite('_blank')" variant="text" style="width: 100%">
+        <v-btn :href="props.content.url" variant="text" style="width: 100%">
           Open Website
         </v-btn>
       </v-sheet>
@@ -44,13 +45,15 @@
     <v-card-actions>
       <div>
         <v-chip :color="chipColor">
-          <div class="prechip">Status:</div>
+          <div class="prechip">Status</div>
           {{ content.status }}
         </v-chip>
       </div>
       <div style="display: flex; flex-wrap: nowrap" v-if="content.hasRepo">
-        <v-btn @click="openRepo('_self')" @auxclick="openRepo('_blank')">Open Repo</v-btn>
-        <v-icon>mdi-github</v-icon>
+        <v-btn :href="props.content.repo">
+          Open Repo
+          <v-icon end>mdi-github</v-icon>
+        </v-btn>
       </div>
     </v-card-actions>
   </v-card>
@@ -76,14 +79,6 @@ const chipColor = computed(() => {
 });
 
 const isMobile = useMediaQuery("(max-width: 700px)");
-
-function openWebsite(target) {
-  window.open(props.content.url, target);
-}
-
-function openRepo(target) {
-  window.open(props.content.repo, target);
-}
 </script>
 
 <style scoped>

src/components/Card.vue

@@ -8,6 +8,8 @@
 import App from "./App.vue";
 import "./assets/main.css";
 
+import { router } from './router/router'
+
 // Composables
 import { createApp } from "vue";
 
@@ -18,4 +20,6 @@ const app = createApp(App);
 
 registerPlugins(app);
 
+app.use(router)
+
 app.mount("#app");

src/main.js

@@ -0,0 +1,56 @@
+<template>
+  <v-toolbar app>
+    <v-toolbar-title>Construct Fund</v-toolbar-title>
+    <v-spacer></v-spacer>
+    <v-btn text :href="issueURL">
+      <v-icon start>mdi-open-in-new</v-icon>
+      Report issue
+    </v-btn>
+  </v-toolbar>
+  <div class="parent">
+    <Card v-for="(item, i) in content" :key="i" :content="item"/>
+  </div>
+</template>
+
+<script setup>
+import Card from "@/components/Card.vue";
+import content from "@/assets/content.json";
+
+const issueURL = "https://github.com/ConstructFund/constructfund.github.io/issues/"
+</script>
+
+<style scoped>
+.parent {
+  width: 100%;
+  height: calc(100% - 64px);
+  overflow: auto;
+  padding-left: 30%;
+  padding-right: 30%;
+  padding-top: 50px;
+  padding-bottom: 50px;
+}
+
+/* media query for mobile padding */
+@media (max-width: 700px) {
+  .parent {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+}
+
+/* media query for small screen padding min width 801 */
+@media (min-width: 701px) and (max-width: 1200px) {
+  .parent {
+    padding-left: 10%;
+    padding-right: 10%;
+  }
+}
+
+/* media query for small screen padding min width 801 */
+@media (min-width: 1201px) and (max-width: 1500px) {
+  .parent {
+    padding-left: 20%;
+    padding-right: 20%;
+  }
+}
+</style>

src/pages/Home.vue

@@ -0,0 +1,12 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+const Home = () => import('../pages/Home.vue')
+
+const routes = [
+  { path: '/', component: Home },
+]
+
+export const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})