🚧 Feat : implement 404 error page

This commit is contained in:
Freeze455
2021-08-17 01:07:16 +02:00
parent 212952007d
commit 7770e8f091
7 changed files with 541 additions and 3 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

View File

@@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 300 67" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g id="discord-ts-app-logo.jpg" transform="matrix(0.067,0,0,0.067,0,0)">
<clipPath id="_clip1">
<path d="M0,138.415C-0,101.705 14.583,66.499 40.541,40.541C66.499,14.583 101.705,-0 138.415,0C329.163,0 670.837,0 861.585,0C898.295,-0 933.501,14.583 959.459,40.541C985.417,66.499 1000,101.705 1000,138.415C1000,329.163 1000,670.837 1000,861.585C1000,898.295 985.417,933.501 959.459,959.459C933.501,985.417 898.295,1000 861.585,1000C670.837,1000 329.163,1000 138.415,1000C101.705,1000 66.499,985.417 40.541,959.459C14.583,933.501 -0,898.295 -0,861.585L0,138.415Z"/>
</clipPath>
<g clip-path="url(#_clip1)">
<g transform="matrix(14.9254,-0,-0,14.9254,0,0)">
<use xlink:href="#_Image2" x="0" y="0" width="67px" height="67px"/>
</g>
</g>
</g>
<g transform="matrix(0.767778,0,0,0.767778,22.0129,9.9378)">
<text x="72.153px" y="55px" style="font-family:'Roboto-Regular', 'Roboto';font-size:65.614px;fill:rgb(32,73,119);">F<tspan x="105.281px 150.038px 194.123px 234.683px 282.1px 323.269px " y="55px 55px 55px 55px 55px 55px ">ACTORY</tspan></text>
</g>
<defs>
<image id="_Image2" width="67px" height="67px" xlink:href="data:image/jpeg;base64,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"/>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 4.4 KiB

View File

@@ -4,11 +4,13 @@ import { createApp } from 'vue'
import App from './templates/layouts/Base.vue'
import { createRouter, createWebHistory } from 'vue-router'
import Default from './templates/modules/default/Routes'
import Error from './templates/modules/default/Error.vue'
const router = createRouter({
history: createWebHistory(),
routes: [
...Default,
{ path: '/:pathMatch(.*)*', component: Error }
]
})

View File

@@ -0,0 +1,87 @@
<!-- This example requires Tailwind CSS v2.0+ -->
<template>
<div class="bg-white dark:bg-gray-800">
<main class="max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-xl mx-auto py-16 sm:py-24">
<div class="text-center">
<p class="text-sm font-semibold text-blue-600 uppercase tracking-wide">404 error</p>
<h1 class="mt-2 text-gray-900 dark:text-gray-200 text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl">This page does not exist.</h1>
<p class="mt-2 text-lg text-gray-500">The page you are looking for could not be found.</p>
</div>
<div class="mt-12">
<h2 class="text-sm font-semibold text-gray-500 tracking-wide uppercase">Popular pages</h2>
<ul role="list" class="mt-4 border-t border-b border-gray-200 dark:border-gray-700 divide-y divide-gray-200 dark:divide-gray-700">
<li v-for="(link, linkIdx) in links" :key="linkIdx" class="relative py-6 flex items-start space-x-4">
<div class="flex-shrink-0">
<span class="flex items-center justify-center h-12 w-12 rounded-lg bg-blue-50 dark:bg-gray-900">
<component :is="link.icon" class="h-6 w-6 text-blue-700 dark:text-white" aria-hidden="true" />
</span>
</div>
<div class="min-w-0 flex-1">
<h3 class="text-gray-900 dark:text-gray-200 text-base font-medium text-gray-900">
<span class="rounded-sm">
<router-link :to="link.path" class="focus:outline-none">
<span class="absolute inset-0" aria-hidden="true" />
{{ link.title }}
</router-link>
</span>
</h3>
<p class="text-base text-gray-500">{{ link.description }}</p>
</div>
<div class="flex-shrink-0 self-center">
<ChevronRightIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
</div>
</li>
</ul>
<div class="mt-8">
<router-link to="/" class="text-base font-medium text-blue-600 hover:text-blue-500">Or go back home<span aria-hidden="true"> &rarr;</span></router-link>
</div>
</div>
</div>
</main>
</div>
</template>
<script setup lang="ts">
import { defineComponent, h } from 'vue'
import { ChevronRightIcon } from '@heroicons/vue/solid'
import { BookmarkAltIcon, BookOpenIcon, HomeIcon, RssIcon, ViewListIcon } from '@heroicons/vue/outline'
const links = [
{ title: 'Home', path: '/', description: 'Learn how to integrate our tools with your app', icon: HomeIcon },
{ title: 'Documentation', path: '/documentation', description: 'Learn how to integrate our tools with your app', icon: BookOpenIcon },
{ title: 'API Reference', path: '/', description: 'A complete API reference for our libraries', icon: ViewListIcon },
{ title: 'Guides', path: '/documentations/examples', description: 'Installation guides that cover popular setups', icon: BookmarkAltIcon },
// { title: 'Blog', path: '/', description: 'Read our latest news and articles', icon: RssIcon },
]
const social = [
{
name: 'Twitter',
href: '#',
icon: defineComponent({
render: () =>
h('svg', { fill: 'currentColor', viewBox: '0 0 24 24' }, [
h('path', {
d:
'M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84',
}),
]),
}),
},
{
name: 'GitHub',
href: '#',
icon: defineComponent({
render: () =>
h('svg', { fill: 'currentColor', viewBox: '0 0 24 24' }, [
h('path', {
'fill-rule': 'evenodd',
d:
'M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z',
'clip-rule': 'evenodd',
}),
]),
}),
},
]
</script>

4
src/utils/icons.ts Normal file
View File

@@ -0,0 +1,4 @@
export const BookOpen = `
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
</svg>`