refactoring and slight visual tweaks

Author: Stefterv

app.vue

@@ -32,23 +32,26 @@
 
 <script setup>
 import projects from 'assets/projects';
-import redirects from 'assets/links';
+import links from 'assets/links';
 
 const projectIndex = useCookie('projectIndex', {
   default: () => Math.floor(Math.random() * projects.length),
 })
+
+
+const project = ref(projects[projectIndex.value])
+provide('project', project)
 onMounted(() => {
   projectIndex.value += 1
   projectIndex.value %= projects.length
   project.value = projects[projectIndex.value]
 })
 
-const project = ref(projects[projectIndex.value])
-provide('project', project)
-
 const route = useRoute()
 onMounted(() => {
-  let redirect = redirects.filter(redirect => !redirect.page).find(r => r.path === route.path)
+  let redirect = links
+    .filter(link => !link.page)
+    .find(link => link.path === route.path)
   if (!redirect) return
   window.location.href = redirect.target
 })

nuxt.config.ts

@@ -1,5 +1,5 @@
 import fs from 'node:fs'
-import redirects from "./assets/links";
+import links from "./assets/links";
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
@@ -12,11 +12,12 @@ export default defineNuxtConfig({
   },
   hooks: {
     "build:done"() {
-      const file = redirects.filter(redirect => !redirect.page).map((redirect) => {
-        return `${redirect.path} ${redirect.target} 301`;
-      }).join("\n");
+      const file = links
+        .filter(link => !link.page)
+        .map(link => `${link.path} ${link.target} 301`)
+        .join("\n");
 
-      fs.writeFileSync("public/_redirects", file);
+      fs.writeFileSync("public/_redirects", `# Generated by Nuxt \n${file}`);
     },
   }
 });

pages/index.vue

@@ -2,30 +2,20 @@
   <section class="links">
     <h2>Links</h2>
     <ul>
-      <template v-for="redirect in redirects" :key="redirect.path">
-        <template v-if="redirect.page">
-          <NuxtLink :to="redirect.path">
-            <li class="redirect">
-              <main>{{ redirect.title }}</main>
-              <aside>{{ redirect.path }} </aside>
-            </li>
-          </NuxtLink>
-        </template>
-        <template v-else>
-          <a :href="redirect.target">
-            <li class="redirect">
-              <main>{{ redirect.title }}</main>
-              <aside>{{ redirect.path }} </aside>
-            </li>
-          </a>
-        </template>
+      <template v-for="{ page, path, target, title } in links" :key="path">
+        <NuxtLink :to="page ? path : target">
+          <li class="redirect">
+            <main>{{ title }}</main>
+            <aside>{{ path }} </aside>
+          </li>
+        </NuxtLink>
       </template>
     </ul>
   </section>
 </template>
 
 <script setup>
-import redirects from 'assets/links';
+import links from 'assets/links';
 
 </script>
 
@@ -40,6 +30,7 @@ import redirects from 'assets/links';
     color: white;
     border-radius: 2px;
     transition: 0.2s ease-in-out;
+    display: flex;
 
     aside {
       font-size: 0.8em;

public/_redirects

@@ -1,3 +1,4 @@
+# Generated by Nuxt 
 /meetup https://www.meetup.com/creativecodeberlin/ 301
 /ccs https://funprogramming.org/pad/p/ccs 301
 /ccs2 https://files.creativecode.berlin/s/fZaqsM25kroFfzz 301