feat: add 404 page
This commit is contained in:
kaivanwong
parent
90eaaa8ae4
commit
848543accf
14 changed files with 55 additions and 48 deletions
7
src/content/blog/talks/post-1.md
Normal file
7
src/content/blog/talks/post-1.md
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: Talk Name
|
||||
duration: 30min
|
||||
date: 2022-12-01
|
||||
---
|
||||
|
||||
Writing...
|
||||
|
|
@ -6,7 +6,7 @@ import Header from '@/components/Header.vue'
|
|||
import Footer from '@/components/Footer.vue'
|
||||
import ScrollToTop from '@/components/ScrollToTop.vue'
|
||||
|
||||
const { pageOperate = false, ...head } = Astro.props
|
||||
const { ...head } = Astro.props
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
|
|
|
|||
9
src/pages/404.mdx
Normal file
9
src/pages/404.mdx
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<BaseLayout title="Not Found" description="Sorry, we couldn't find what you were looking for.">
|
||||
<article class="prose">
|
||||
<h1>404 :( </h1>
|
||||
<h2>Page Not Found</h2>
|
||||
<p>Sorry, we couldn't find what you were looking for.</p>
|
||||
</article>
|
||||
</ BaseLayout>
|
||||
|
|
@ -21,11 +21,9 @@ const { title, description, image } = page.data
|
|||
const { Content } = await page.render()
|
||||
---
|
||||
|
||||
<BaseLayout title={title} description={description} pageOperate={true}>
|
||||
<article class="mb-16 max-w-none prose">
|
||||
<h1 class="text-title">
|
||||
{title}
|
||||
</h1>
|
||||
<BaseLayout title={title} description={description}>
|
||||
<article class="prose">
|
||||
<h1>{title}</h1>
|
||||
{
|
||||
image && (
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,17 @@
|
|||
---
|
||||
import BaseLayout from '@/layouts/BaseLayout.astro'
|
||||
import ListPosts from '@/components/ListPosts.vue'
|
||||
import { getPosts } from '@/utils/posts'
|
||||
import siteConfig from '@/site-config'
|
||||
import { uniqBy } from 'lodash-es'
|
||||
import { getPosts } from '@/utils/posts'
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const blogEntries = await getPosts()
|
||||
return uniqBy(
|
||||
blogEntries.map((entry) => {
|
||||
const paths = siteConfig.page.blogLinks.map((nav) => {
|
||||
const href = nav.href.replace('/blog', '')
|
||||
return {
|
||||
params: {
|
||||
path: entry.slug.includes('/')
|
||||
? entry.slug.split('/').shift()
|
||||
: undefined,
|
||||
},
|
||||
params: { path: href === '' ? undefined : href },
|
||||
}
|
||||
}),
|
||||
'params.path',
|
||||
)
|
||||
})
|
||||
return paths
|
||||
}
|
||||
|
||||
const { path } = Astro.params
|
||||
|
|
@ -34,7 +27,7 @@ const posts = await getPosts(path)
|
|||
>
|
||||
<div class="flex flex-col gap-2 sm:flex-row sm:gap-4 flex-wrap mb-8">
|
||||
{
|
||||
siteConfig.page.navLinks.map((nav) => (
|
||||
siteConfig.page.blogLinks.map((nav) => (
|
||||
<a
|
||||
aria-label={nav.text}
|
||||
class={`nav-link text-3xl font-bold ${Astro.url.pathname === nav.href ? 'opacity-80' : 'opacity-30 hover:opacity-50'}`}
|
||||
|
|
|
|||
|
|
@ -56,20 +56,19 @@ import siteConfig from '@/site-config'
|
|||
> for style, it's fast.
|
||||
</p>
|
||||
<p>
|
||||
Visit
|
||||
Visit it
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://github.com/kaivanwong/astro-theme-vitesse"
|
||||
>
|
||||
it on GitHub
|
||||
on GitHub
|
||||
</a>
|
||||
to fork the repository, read the docs or one-click deploy on Netlify.
|
||||
</p>
|
||||
<p>
|
||||
If you like Vitesse theme for Astro, please
|
||||
<a target="_blank" href="https://github.com/kaivanwong">
|
||||
click follow for me
|
||||
</a>.
|
||||
<a target="_blank" href="https://github.com/kaivanwong"> click follow </a>
|
||||
for me.
|
||||
</p>
|
||||
<hr class="hr-line" />
|
||||
<p>Find me on</p>
|
||||
|
|
|
|||
|
|
@ -27,16 +27,9 @@ function getDate(date: string) {
|
|||
}
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title={title}
|
||||
description={description}
|
||||
pageType="article"
|
||||
pageOperate={true}
|
||||
>
|
||||
<article class="mb-16 max-w-none prose">
|
||||
<h1 class="text-title">
|
||||
{title}
|
||||
</h1>
|
||||
<BaseLayout title={title} description={description} pageType="article">
|
||||
<article class="prose">
|
||||
<h1>{title}</h1>
|
||||
<p op-50>
|
||||
{date && <time datetime={getDate(date)}>{date.split(',')}</time>}
|
||||
{duration && <span>· {duration}</span>}
|
||||
|
|
|
|||
|
|
@ -4,11 +4,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro'
|
|||
import ListProjects from '@/components/ListProjects.vue'
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title="Projects"
|
||||
description="List of projects that I am proud of"
|
||||
pageOperate={true}
|
||||
>
|
||||
<BaseLayout title="Projects" description="List of projects that I am proud of">
|
||||
<h1 class="mb-10 text-title">Projects</h1>
|
||||
<div mb-16 sm:mb-24>
|
||||
{
|
||||
|
|
|
|||
|
|
@ -58,8 +58,12 @@ export const siteConfig = {
|
|||
href: '/blog',
|
||||
},
|
||||
{
|
||||
text: 'Note',
|
||||
href: '/blog/note',
|
||||
text: 'Notes',
|
||||
href: '/blog/notes',
|
||||
},
|
||||
{
|
||||
text: 'Talks',
|
||||
href: '/blog/talks',
|
||||
},
|
||||
{
|
||||
text: 'Projects',
|
||||
|
|
@ -68,14 +72,18 @@ export const siteConfig = {
|
|||
],
|
||||
},
|
||||
page: {
|
||||
navLinks: [
|
||||
blogLinks: [
|
||||
{
|
||||
text: 'Blog',
|
||||
href: '/blog',
|
||||
},
|
||||
{
|
||||
text: 'Note',
|
||||
href: '/blog/note',
|
||||
text: 'Notes',
|
||||
href: '/blog/notes',
|
||||
},
|
||||
{
|
||||
text: 'Talks',
|
||||
href: '/blog/talks',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -34,6 +34,10 @@ img {
|
|||
--at-apply: rd-1.5;
|
||||
}
|
||||
|
||||
.prose {
|
||||
--at-apply: mb-16 max-w-none min-h-60;
|
||||
}
|
||||
|
||||
.prose-link i {
|
||||
--at-apply: text-sm mr-1;
|
||||
}
|
||||
|
|
@ -43,7 +47,7 @@ img {
|
|||
}
|
||||
|
||||
.prose h1 {
|
||||
--at-apply: text-9 mb-4;
|
||||
--at-apply: text-9 mb-4 text-title;
|
||||
}
|
||||
|
||||
.prose h2 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue