Merge pull request #66 from CreativeCodeBerlin/layout-rewrite

Layout rewrite

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;

pages/submit.vue

@@ -21,7 +21,8 @@
                     For images in can be on your own website, or on a service like <a
                         href="https://imgur.com">Imgur</a>.<br>
                     For websites you could use a service like <a href="https://www.netlify.com/">Netlify</a>.
-                    For video it can be on your own website, or on a service like <a href="https://vimeo.com">Vimeo</a> or
+                    For video it can be on your own website, or on a service like <a href="https://vimeo.com">Vimeo</a>
+                    or
                     <a href="https://youtube.com">Youtube</a>.<br>
                     Tip: When generating an embed code with an iFrame tag, use the url from the src attribute.
 
@@ -93,10 +94,15 @@ watch([url, author, author_url, color, scale], () => {
 
 <style lang="scss" scoped>
 .submit {
+    background: var(--background);
 
     padding: var(--pad2);
     padding-top: calc(var(--pad2) * 2);
-    min-width: 400px;
+
+    @media screen and (min-width: 800px) {
+        min-width: 400px;
+    }
+
     position: absolute;
 
     label {
@@ -118,6 +124,7 @@ select {
     width: 100%;
     padding: var(--pad);
     font-size: 1.2em;
+    box-sizing: border-box;
 }
 
 textarea {

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