manjaro · romangg · Jun 30, 2024 · Jun 30, 2024 · Jun 30, 2024 · Jun 30, 2024
diff --git a/components/iso-breadcrumbs.vue b/components/iso-breadcrumbs.vue
@@ -0,0 +1,101 @@
+<template>
+  <nav
+    class="mx-auto pt-6 px-4 text-gray-600 dark:text-gray-500"
+    aria-label="Breadcrumb"
+  >
+    <ol class="inline-flex flex-wrap items-center mb-3 sm:mb-0">
+      <li>
+        <NuxtLink
+          class="inline-flex items-center px-2 py-2 gap-2 text-center rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-100 dark:hover:bg-gray-800 dark:focus:ring-gray-700"
+          href="/products"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            class="bi bi-bag"
+            viewBox="0 0 16 16"
+          >
+            <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z" />
+          </svg>
+          Products
+        </NuxtLink>
+      </li>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="13"
+        height="13"
+        fill="currentColor"
+        class="text-gray-300 dark:text-gray-600 mx-1"
+        viewBox="0 0 16 16"
+      >
+        <path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z" />
+      </svg>
+      <li>
+        <NuxtLink
+          href="/products"
+          class="inline-flex items-center px-2 py-2 gap-1.5 text-center rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-100 dark:hover:bg-gray-800 dark:focus:ring-gray-700"
+        >
+          Download
+        </NuxtLink>
+      </li>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="13"
+        height="13"
+        fill="currentColor"
+        class="text-gray-300 dark:text-gray-600 mx-1"
+        viewBox="0 0 16 16"
+      >
+        <path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z" />
+      </svg>
+      <li>
+        <div class="dropdown">
+          <div
+            tabindex="0"
+            role="button"
+            class="inline-flex items-center px-2 py-2 gap-1.5 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 dark:focus:ring-gray-700"
+          >
+            {{ current }}
+          </div>
+          <ul
+            tabindex="0"
+            class="dropdown-content menu bg-base-100 rounded-box z-[1] w-24 p-2 shadow"
+          >
+            <li>
+              <NuxtLink
+                :class="getDropStyle('arm')"
+                href="/products/download/arm"
+              >
+                ARM
+              </NuxtLink>
+            </li>
+            <li>
+              <NuxtLink
+                class="tracking-widest"
+                :class="getDropStyle('x86')"
+                href="/products/download/x86"
+              >
+                x86
+              </NuxtLink>
+            </li>
+          </ul>
+        </div>
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  current: { type: String, required: true } },
+)
+
+const getDropStyle = (arch: string) => {
+  if (arch == props.current.toLowerCase()) {
+    return 'btn-disabled font-bold'
+  }
+  return ''
+}
+</script>
diff --git a/components/navbar-item.vue b/components/navbar-item.vue
@@ -224,7 +224,11 @@ onMounted(() => {
 })
 
 const getLinkStyle = (name: string) => {
-  const path = useRoute().name.split('-')
+  const routeName = useRoute().name
+  if (!routeName) {
+    return ''
+  }
+  const path = routeName.split('-')
   let ret = 'hover:text-accent dark:hover:text-accent'
   if (path[0] == name) {
     if (path.length == 1) {
@@ -235,7 +239,12 @@ const getLinkStyle = (name: string) => {
   return ret
 }
 const getDropdownLinkStyle = (name: string) => {
-  const path = useRoute().name.split('-')
+  const routeName = useRoute().name
+  if (!routeName) {
+    return ''
+  }
+
+  const path = routeName.split('-')
   let ret = ''
   if (path[0] == name) {
     if (path.length == 1) {
@@ -246,7 +255,11 @@ const getDropdownLinkStyle = (name: string) => {
   return ret
 }
 const getAriaCurrent = (name: string) => {
-  const path = useRoute().name.split('-')
+  const routeName = useRoute().name
+  if (!routeName) {
+    return 'false'
+  }
+  const path = routeName.split('-')
   if (path[0] == name && path.length == 1) {
     return 'page'
   }

diff --git a/error.vue b/error.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="min-h-screen flex flex-col bg-bgbright dark:bg-bgdark dark:text-white">
+    <div class="p-10 flex-grow flex flex-col items-center justify-center mb-14 text-center">
+      <img
+        src="/logo.svg"
+        class="h-28"
+      >
+      <h1 class="text-4xl font-medium tracking-wider mb-4 mt-12">
+        {{ error.statusCode }}
+      </h1>
+      <p class="lg:w-2/3 leading-relaxed text-xl text-gray-400 dark:text-gray-500">
+        {{ error.statusMessage }}
+      </p>
+      <button
+        class="mt-10 btn"
+        @click="handleError"
+      >
+        Back to Home
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+
+defineProps({
+  error: Object as () => NuxtError,
+})
+
+const handleError = () => clearError({ redirect: '/' })
+</script>
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -14,6 +14,10 @@ export default defineNuxtConfig({
     preference: 'system',
     dataValue: 'theme', // for daisyUI
   },
+  routeRules: {
+    '/products/download': { redirect: { to: '/products', statusCode: 302 } },
+    '/download': { redirect: { to: '/products', statusCode: 302 } },
+  },
   hooks: {
     async 'nitro:config'(nitroConfig) { await setDownloadRedirects(nitroConfig) },
   },

diff --git a/pages/index.vue b/pages/index.vue
@@ -18,7 +18,7 @@
               Taking the raw power and flexibility of Arch Linux and making it more accessible for a greater audience.
             </p>
             <div class="flex flex-wrap gap-y-4 gap-x-8 mt-8">
-              <NuxtLink href="/products/download">
+              <NuxtLink href="/products/download/x86">
                 <button class="btn lg:btn-lg flex gap-5">
                   <div>Download</div>
                   <svg

diff --git a/pages/news/[year]/[title].vue b/pages/news/[year]/[title].vue
@@ -1,10 +1,13 @@
 <template>
   <div class="max-w-screen-xl mx-auto">
-    <div class="mx-auto pt-6 px-6 breadcrumbs text-gray-600 dark:text-gray-500">
-      <ul>
+    <nav
+      class="mx-auto pt-6 px-4 text-gray-600 dark:text-gray-500"
+      aria-label="Breadcrumb"
+    >
+      <ol class="inline-flex flex-wrap items-center mb-3 sm:mb-0">
         <li>
           <NuxtLink
-            class="flex gap-1.5"
+            class="inline-flex items-center px-2 py-2 gap-2 text-center rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-100 dark:hover:bg-gray-800 dark:focus:ring-gray-700"
             href="/news"
           >
             <svg
@@ -21,9 +24,21 @@
             News
           </NuxtLink>
         </li>
-        <li>{{ data.title }}</li>
-      </ul>
-    </div>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="13"
+          height="13"
+          fill="currentColor"
+          class="text-gray-300 dark:text-gray-600 mx-1"
+          viewBox="0 0 16 16"
+        >
+          <path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z" />
+        </svg>
+        <li class="inline-flex items-center px-2 py-2 gap-1.5 text-center">
+          {{ data.title }}
+        </li>
+      </ol>
+    </nav>
     <article class="max-w-screen-sm mx-auto px-6 pt-4 md:pt-6">
       <div class="pb-8">
         <NuxtImg

diff --git a/pages/products/download-arm.vue → pages/products/download/arm.vue b/pages/products/download-arm.vue → pages/products/download/arm.vue
@@ -1,28 +1,6 @@
 <template>
   <div class="max-w-screen-xl mx-auto">
-    <div class="mx-auto pt-6 px-6 breadcrumbs text-gray-600 dark:text-gray-500">
-      <ul>
-        <li>
-          <NuxtLink
-            class="flex gap-1.5"
-            href="/products"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              fill="currentColor"
-              class="bi bi-bag"
-              viewBox="0 0 16 16"
-            >
-              <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z" />
-            </svg>
-            Products
-          </NuxtLink>
-        </li>
-        <li>ARM Download</li>
-      </ul>
-    </div>
+    <IsoBreadcrumbs current="ARM" />
     <section class="text-gray-600 body-font dark:text-gray-400">
       <div class="container px-5 pt-8 mx-auto">
         <div class="flex flex-col text-center w-full mb-14">
@@ -63,14 +41,6 @@
           </ClientOnly>
         </div>
       </div>
-
-      <div class="container px-5 pt-20 mx-auto flex w-full mb-12 justify-center">
-        <NuxtLink href="/products/download">
-          <div class="btn btn-ghost leading-relaxe font-normal tracking-widerd">
-            Click here for X86 images
-          </div>
-        </NuxtLink>
-      </div>
       <div class="hidden">
         <!-- Forces NuxtImg file creation for conditionally rendered cards. -->
         <NuxtImg
@@ -131,7 +101,7 @@ const latestDetailCard = ref('')
 // When the selection changes, update the query.
 watch(selectedDevice, (selectedDevice) => {
   router.push({
-    path: '/products/download-arm',
+    path: '/products/download/arm',
     query: { device: selectedDevice },
   })
 })

diff --git a/pages/products/download.vue → pages/products/download/x86.vue b/pages/products/download.vue → pages/products/download/x86.vue
@@ -1,33 +1,11 @@
 <template>
   <div class="max-w-screen-xl mx-auto">
-    <div class="mx-auto pt-6 px-6 breadcrumbs text-gray-600 dark:text-gray-500">
-      <ul>
-        <li>
-          <NuxtLink
-            class="flex gap-1.5"
-            href="/products"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              fill="currentColor"
-              class="bi bi-bag"
-              viewBox="0 0 16 16"
-            >
-              <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z" />
-            </svg>
-            Products
-          </NuxtLink>
-        </li>
-        <li>Download</li>
-      </ul>
-    </div>
+    <IsoBreadcrumbs current="x86" />
     <section class="text-gray-600 body-font dark:text-gray-400">
       <div class="container px-5 pt-8 mx-auto">
         <div class="flex flex-col text-center w-full mb-14">
           <h1 class="text-2xl font-medium title-font mb-4 text-gray-900 dark:text-gray-200 tracking-widest">
-            Official x86 Images
+            Official Images
           </h1>
           <p class="lg:w-2/3 mx-auto leading-relaxed">
             Provided by the Manjaro Team
@@ -48,7 +26,7 @@
         </div>
       </div>
 
-      <div class="container px-5 pt-24 mx-auto">
+      <div class="container px-5 pt-16 mx-auto">
         <div class="flex flex-col text-center w-full mb-14">
           <h1 class="text-2xl font-medium title-font mb-4 text-gray-900 dark:text-gray-200 tracking-widest">
             Community Images
@@ -71,14 +49,6 @@
           />
         </div>
       </div>
-
-      <div class="container px-5 pt-20 mx-auto flex w-full mb-12 justify-center">
-        <NuxtLink href="/products/download-arm">
-          <div class="btn btn-ghost leading-relaxed font-normal tracking-wider">
-            Click here for ARM images
-          </div>
-        </NuxtLink>
-      </div>
     </section>
   </div>
 </template>

diff --git a/pages/products/index.vue b/pages/products/index.vue
@@ -40,7 +40,7 @@
             </p>
             <div class="flex items-center">
               <NuxtLink
-                href="products/download"
+                href="/products/download/x86"
                 aria-label=""
                 class="btn btn-primary"
               >
@@ -66,7 +66,7 @@
             </p>
             <div class="flex items-center">
               <NuxtLink
-                href="products/download-arm"
+                href="/products/download/arm"
                 aria-label=""
                 class="btn btn-primary btn-sm"
               >

diff --git a/public/help/support.webp b/public/help/support.webp