fix: enhance 404 error page layout and styling; refactor navigation components for improved responsiveness and user experience

onmax · onmax · commit 66459bdc76c8 · 2025-07-04T15:52:43.000+02:00
diff --git a/docs/index.md b/docs/index.md
@@ -1,12 +1,18 @@
 ---
 layout: 'home'
-secondarySidebar: false
-sidebar: false
 
 title: Nimiq UI
 description: Build your app with the Nimiq theme
 ---
 
+<script setup lang="ts">
+  import './node_modules/nimiq-css/dist/css/static-content.css'
+</script>
+
+<section bg-neutral-0 min-h-screen>
+
 <NqHeadline />
 
 <NqModulesGrid />
+
+</section>
diff --git a/docs/uno.config.ts b/docs/uno.config.ts
@@ -133,7 +133,7 @@ export default defineConfig<PresetWind3Theme>({
       collections: {
         ...createExternalPackageIconLoader('@iconify-json/tabler'),
         ...createExternalPackageIconLoader('@iconify-json/simple-icons'),
-        custom: FileSystemIconLoader('public/assets/icons'),
+        local: FileSystemIconLoader('public/assets/icons'),
       },
     }),
   ],
diff --git a/packages/nimiq-icons/src/flags/icons.json b/packages/nimiq-icons/src/flags/icons.json
@@ -1268,7 +1268,7 @@
 			"body": "<mask id=\"nimiq-flags-zw-hexagon-pbk987\" width=\"32\" height=\"28\" x=\"0\" y=\"2\" maskUnits=\"userSpaceOnUse\" style=\"mask-type:alpha\"><path fill=\"#fff\" d=\"M31.15 14.71 24.707 3.54a2.58 2.58 0 00-2.234-1.29H9.582c-.92 0-1.77.49-2.23 1.29L.907 14.71c-.46.8-.46 1.78 0 2.58l6.445 11.17c.46.8 1.31 1.29 2.23 1.29h12.89c.92 0 1.77-.49 2.23-1.29l6.445-11.17c.464-.8.464-1.78.004-2.58\"/></mask><g fill=\"none\"><g mask=\"url(#nimiq-flags-zw-hexagon-pbk987)\"><path fill=\"#6DA544\" d=\"M1.962 0H32v32H1.962z\"/><path fill=\"#FFDA44\" d=\"M3.613 4.581H32v4.582l-4.069 6.875 4.07 6.875v4.58H3.612z\"/><path fill=\"#D80027\" d=\"M8.25 9.162H32v4.582l-1.687 2.25L32 18.325v4.581H8.25z\"/><path fill=\"#EEE\" d=\"M0 0v32l17.488-16z\"/><path fill=\"#D80027\" d=\"m6.437 11.825 1.032 3.188h3.35l-2.713 1.975 1.038 3.187-2.713-1.969-2.712 1.969 1.037-3.187-2.712-1.976h3.35z\"/><path fill=\"#FFDA44\" d=\"m9.281 16.263-2.7-.957-.212-1.937a1.044 1.044 0 10-2.032.475l-.75.756h1.344c0 1.4-1.044 1.4-1.044 2.794l.575 1.387h3.482l.58-1.387q.086-.198.107-.413c.5-.2.65-.719.65-.719\"/><path fill=\"#333\" d=\"m1.963 0 13.75 13.75H32v4.575H15.638L1.962 32H0l16-16L0 0z\"/><path fill=\"url(#nimiq-flags-zw-hexagon-pbk987)\" d=\"M31.15 14.71 24.707 3.54a2.58 2.58 0 00-2.234-1.29H9.582c-.92 0-1.77.49-2.23 1.29L.907 14.71c-.46.8-.46 1.78 0 2.58l6.445 11.17c.46.8 1.31 1.29 2.23 1.29h12.89c.92 0 1.77-.49 2.23-1.29l6.445-11.17c.464-.8.464-1.78.004-2.58\"/></g><defs><radialGradient id=\"nimiq-flags-zw-hexagon-pbk987\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(30.943 0 0 30.9452 23.829 29.395)\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#1D1D1B\" stop-opacity=\".3\"/><stop offset=\"1\" stop-color=\"#E9B213\" stop-opacity=\"0\"/></radialGradient></defs></g>"
 		}
 	},
-	"lastModified": 1751548397,
+	"lastModified": 1751635600,
 	"width": 32,
 	"height": 32
 }
diff --git a/packages/nimiq-icons/src/flags/info.json b/packages/nimiq-icons/src/flags/info.json
@@ -2,7 +2,7 @@
 	"prefix": "nimiq-flags",
 	"name": "nimiq-flags",
 	"total": 422,
-	"version": "1.0.0-beta.56",
+	"version": "1.0.0-beta.60",
 	"author": {
 		"name": "onmax",
 		"url": "https://github.com/onmax"
diff --git a/packages/nimiq-icons/src/flags/package.json b/packages/nimiq-icons/src/flags/package.json
@@ -2,7 +2,7 @@
 	"name": "nimiq-flags",
 	"description": "The Nimiq Flags as an iconify icon set.",
 	"version": "1.0.0-beta.60",
-	"iconSetVersion": "1.0.0-beta.56",
+	"iconSetVersion": "1.0.0-beta.60",
 	"main": "index.js",
 	"module": "index.mjs",
 	"types": "index.d.ts",
diff --git a/packages/nimiq-icons/src/icons/icons.json b/packages/nimiq-icons/src/icons/icons.json
@@ -1586,7 +1586,7 @@
 			"hidden": true
 		}
 	},
-	"lastModified": 1751548397,
+	"lastModified": 1751635600,
 	"width": 12,
 	"height": 12
 }
diff --git a/packages/nimiq-icons/src/icons/info.json b/packages/nimiq-icons/src/icons/info.json
@@ -2,7 +2,7 @@
 	"prefix": "nimiq",
 	"name": "nimiq-icons",
 	"total": 84,
-	"version": "1.0.0-beta.56",
+	"version": "1.0.0-beta.60",
 	"author": {
 		"name": "onmax",
 		"url": "https://github.com/onmax"
diff --git a/packages/nimiq-icons/src/icons/package.json b/packages/nimiq-icons/src/icons/package.json
@@ -2,7 +2,7 @@
 	"name": "nimiq-icons",
 	"description": "The Nimiq Icons as an iconify icon set.",
 	"version": "1.0.0-beta.60",
-	"iconSetVersion": "1.0.0-beta.56",
+	"iconSetVersion": "1.0.0-beta.60",
 	"main": "index.js",
 	"module": "index.mjs",
 	"types": "index.d.ts",
diff --git a/packages/nimiq-vitepress-theme/examples/404-demo.md b/packages/nimiq-vitepress-theme/examples/404-demo.md
diff --git a/packages/nimiq-vitepress-theme/src/layout/Changelog.vue b/packages/nimiq-vitepress-theme/src/layout/Changelog.vue
@@ -12,9 +12,6 @@ const [DefineCommitRegularLine, CommitRegularLine] = createReusableTemplate<Comm
 </script>
 
 <template>
-  <h2 id="changelog" sr-only>
-    Changelog
-  </h2>
   <Collapsible.Root
     v-if="commits.length > 0"
     class="nq-raw"
diff --git a/packages/nimiq-vitepress-theme/src/layout/DesktopHeader.vue b/packages/nimiq-vitepress-theme/src/layout/DesktopHeader.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { withBase } from 'vitepress'
+import { useVisibleModules } from '../composables/useVisibleModules'
+import CommandMenu from './CommandMenu.vue'
+import Logo from './Logo.vue'
+
+const { visibleModules } = useVisibleModules()
+</script>
+
+<template>
+  <header z-1000 fixed inset-x-0 top-0 border="b-1 neutral-400" shadow bg-neutral-0 f-h-xl flex="~ gap-32" f-px-xl f-py-sm>
+    <Logo />
+    <CommandMenu max-w-320 ml-auto />
+    <nav flex="~ items-center gap-32">
+      <a v-for="module in visibleModules" :key="module.text" shrink-0 :href="withBase(module.defaultPageLink)">
+        {{ module.text }}</a>
+    </nav>
+  </header>
+</template>
diff --git a/packages/nimiq-vitepress-theme/src/layout/DocNavigation.vue b/packages/nimiq-vitepress-theme/src/layout/DocNavigation.vue
@@ -6,20 +6,20 @@ const { navigation, showNavigation } = useDocNavigation()
 
 <template>
   <nav v-if="showNavigation && (navigation.prev || navigation.next)" flex="~ gap-8" justify-between f-mt-lg>
-    <a v-if="navigation.prev" :href="navigation.prev.link" nq-hoverable flex="~ gap-8" items-center un-text-neutral-800>
+    <a v-if="navigation.prev" :href="navigation.prev.link" nq-hoverable grid="~ cols-[1fr_auto] rows-2 gap-8" items-center un-text-neutral-800>
       <div relative>
         <div nq-label>Previous</div>
+        <div i-nimiq:arrow-left text-16 />
         <div f-text-sm>{{ navigation.prev.text }}</div>
-        <div i-nimiq:arrow-left text-16 absolute top-0 right-0 />
       </div>
     </a>
     <div v-else />
 
-    <a v-if="navigation.next" :href="navigation.next.link" nq-hoverable flex="~ gap-8" items-center un-text-neutral-800>
+    <a v-if="navigation.next" :href="navigation.next.link" nq-hoverable grid="~ cols-[1fr_auto] rows-2 gap-8" items-center un-text-neutral-800>
       <div relative>
         <div nq-label>Next</div>
+        <div i-nimiq:arrow-right text-16 />
         <div f-text-sm>{{ navigation.next.text }}</div>
-        <div i-nimiq:arrow-right text-16 absolute top-0 right-0 />
       </div>
     </a>
     <div v-else />
diff --git a/packages/nimiq-vitepress-theme/src/layout/Layout.vue b/packages/nimiq-vitepress-theme/src/layout/Layout.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
 import { useBreakpoints } from '@vueuse/core'
-import { useData, withBase } from 'vitepress'
+import { useData } from 'vitepress'
 import { computed } from 'vue'
 import { useSecondarySidebar } from '../composables/useSecondarySidebar'
-import { useVisibleModules } from '../composables/useVisibleModules'
-import CommandMenu from './CommandMenu.vue'
-import Logo from './Logo.vue'
+import DesktopHeader from './DesktopHeader.vue'
 import MobileNav from './MobileNav.vue'
 import MobileOutlineAccordion from './MobileOutlineAccordion.vue'
+import NotFound from './NotFound.vue'
 import PageContent from './PageContent.vue'
 import SecondarySidebar from './SecondarySidebar.vue'
 import Sidebar from './Sidebar.vue'
 
-const { frontmatter } = useData()
+const { frontmatter, page } = useData()
 
 const isHome = computed(() => frontmatter.value.layout === 'home')
+const is404 = computed(() => page.value.isNotFound || frontmatter.value.layout === '404')
 const showSidebar = computed(() => {
   if (frontmatter.value.sidebar !== undefined)
     return frontmatter.value.sidebar
@@ -23,16 +23,18 @@ const showSidebar = computed(() => {
   return true
 })
 
-const { visibleModules } = useVisibleModules()
-
 const { showSecondarySidebar } = useSecondarySidebar()
 
 const breakpoints = useBreakpoints({ lg: 1224 })
 const isMobileOrTablet = breakpoints.smaller('lg')
 </script>
 
 <template>
-  <div v-if="!isHome" id="viewport" flex relative var:nq-sidebar-width:100vw md:var:nq-sidebar-width:288px data-layout="docs">
+  <!-- 404 Not Found Page -->
+  <NotFound v-if="is404" />
+
+  <!-- Documentation Pages -->
+  <div v-else-if="!isHome" id="viewport" flex relative var:nq-sidebar-width:100vw md:var:nq-sidebar-width:288px data-layout="docs">
     <!-- TODO Add skip -->
     <div v-if="!isMobileOrTablet" flex w-full>
       <div shrink-0 relative w="$nq-sidebar-width">
@@ -64,20 +66,14 @@ const isMobileOrTablet = breakpoints.smaller('lg')
     </template>
   </div>
 
-  <div v-else data-layout="home">
+  <!-- Home Page -->
+  <div v-else data-layout="home" min-h-screen>
     <template v-if="isMobileOrTablet">
-      <PageContent />
+      <Content />
       <MobileNav fixed bottom-0 />
     </template>
     <template v-else>
-      <header z-1000 fixed inset-x-0 top-0 border="b-1 neutral-400" shadow bg-neutral-0 f-h-xl flex="~ gap-32" f-px-xl f-py-sm>
-        <Logo />
-        <CommandMenu max-w-320 ml-auto />
-        <nav flex="~ items-center gap-32">
-          <a v-for="module in visibleModules" :key="module.text" shrink-0 :href="withBase(module.defaultPageLink)">
-            {{ module.text }}</a>
-        </nav>
-      </header>
+      <DesktopHeader />
       <Content f-pt-xl />
     </template>
   </div>
diff --git a/packages/nimiq-vitepress-theme/src/layout/NotFound.vue b/packages/nimiq-vitepress-theme/src/layout/NotFound.vue
diff --git a/packages/nimiq-vitepress-theme/src/layout/PageContent.vue b/packages/nimiq-vitepress-theme/src/layout/PageContent.vue

Original file line number	Diff line number	Diff line change
`@@ -1268,7 +1268,7 @@`
`1268`	`1268`	"body": "<mask id=\"nimiq-flags-zw-hexagon-pbk987\" width=\"32\" height=\"28\" x=\"0\" y=\"2\" maskUnits=\"userSpaceOnUse\" style=\"mask-type:alpha\"><path fill=\"#fff\" d=\"M31.15 14.71 24.707 3.54a2.58 2.58 0 00-2.234-1.29H9.582c-.92 0-1.77.49-2.23 1.29L.907 14.71c-.46.8-.46 1.78 0 2.58l6.445 11.17c.46.8 1.31 1.29 2.23 1.29h12.89c.92 0 1.77-.49 2.23-1.29l6.445-11.17c.464-.8.464-1.78.004-2.58\"/></mask><g fill=\"none\"><g mask=\"url(#nimiq-flags-zw-hexagon-pbk987)\"><path fill=\"#6DA544\" d=\"M1.962 0H32v32H1.962z\"/><path fill=\"#FFDA44\" d=\"M3.613 4.581H32v4.582l-4.069 6.875 4.07 6.875v4.58H3.612z\"/><path fill=\"#D80027\" d=\"M8.25 9.162H32v4.582l-1.687 2.25L32 18.325v4.581H8.25z\"/><path fill=\"#EEE\" d=\"M0 0v32l17.488-16z\"/><path fill=\"#D80027\" d=\"m6.437 11.825 1.032 3.188h3.35l-2.713 1.975 1.038 3.187-2.713-1.969-2.712 1.969 1.037-3.187-2.712-1.976h3.35z\"/><path fill=\"#FFDA44\" d=\"m9.281 16.263-2.7-.957-.212-1.937a1.044 1.044 0 10-2.032.475l-.75.756h1.344c0 1.4-1.044 1.4-1.044 2.794l.575 1.387h3.482l.58-1.387q.086-.198.107-.413c.5-.2.65-.719.65-.719\"/><path fill=\"#333\" d=\"m1.963 0 13.75 13.75H32v4.575H15.638L1.962 32H0l16-16L0 0z\"/><path fill=\"url(#nimiq-flags-zw-hexagon-pbk987)\" d=\"M31.15 14.71 24.707 3.54a2.58 2.58 0 00-2.234-1.29H9.582c-.92 0-1.77.49-2.23 1.29L.907 14.71c-.46.8-.46 1.78 0 2.58l6.445 11.17c.46.8 1.31 1.29 2.23 1.29h12.89c.92 0 1.77-.49 2.23-1.29l6.445-11.17c.464-.8.464-1.78.004-2.58\"/></g><defs><radialGradient id=\"nimiq-flags-zw-hexagon-pbk987\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(30.943 0 0 30.9452 23.829 29.395)\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#1D1D1B\" stop-opacity=\".3\"/><stop offset=\"1\" stop-color=\"#E9B213\" stop-opacity=\"0\"/></radialGradient></defs></g>"
`1269`	`1269`	`}`
`1270`	`1270`	`},`
`1271`		`- "lastModified": 1751548397,`
	`1271`	`+ "lastModified": 1751635600,`
`1272`	`1272`	`"width": 32,`
`1273`	`1273`	`"height": 32`
`1274`	`1274`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1586,7 +1586,7 @@`
`1586`	`1586`	`"hidden": true`
`1587`	`1587`	`}`
`1588`	`1588`	`},`
`1589`		`- "lastModified": 1751548397,`
	`1589`	`+ "lastModified": 1751635600,`
`1590`	`1590`	`"width": 12,`
`1591`	`1591`	`"height": 12`
`1592`	`1592`	`}`