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 Footer from '@/components/Footer.vue'
|
||||||
import ScrollToTop from '@/components/ScrollToTop.vue'
|
import ScrollToTop from '@/components/ScrollToTop.vue'
|
||||||
|
|
||||||
const { pageOperate = false, ...head } = Astro.props
|
const { ...head } = Astro.props
|
||||||
---
|
---
|
||||||
|
|
||||||
<!doctype html>
|
<!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()
|
const { Content } = await page.render()
|
||||||
---
|
---
|
||||||
|
|
||||||
<BaseLayout title={title} description={description} pageOperate={true}>
|
<BaseLayout title={title} description={description}>
|
||||||
<article class="mb-16 max-w-none prose">
|
<article class="prose">
|
||||||
<h1 class="text-title">
|
<h1>{title}</h1>
|
||||||
{title}
|
|
||||||
</h1>
|
|
||||||
{
|
{
|
||||||
image && (
|
image && (
|
||||||
<p>
|
<p>
|
||||||
|
|
|
||||||
|
|
@ -1,24 +1,17 @@
|
||||||
---
|
---
|
||||||
import BaseLayout from '@/layouts/BaseLayout.astro'
|
import BaseLayout from '@/layouts/BaseLayout.astro'
|
||||||
import ListPosts from '@/components/ListPosts.vue'
|
import ListPosts from '@/components/ListPosts.vue'
|
||||||
import { getPosts } from '@/utils/posts'
|
|
||||||
import siteConfig from '@/site-config'
|
import siteConfig from '@/site-config'
|
||||||
import { uniqBy } from 'lodash-es'
|
import { getPosts } from '@/utils/posts'
|
||||||
|
|
||||||
export async function getStaticPaths() {
|
export async function getStaticPaths() {
|
||||||
const blogEntries = await getPosts()
|
const paths = siteConfig.page.blogLinks.map((nav) => {
|
||||||
return uniqBy(
|
const href = nav.href.replace('/blog', '')
|
||||||
blogEntries.map((entry) => {
|
return {
|
||||||
return {
|
params: { path: href === '' ? undefined : href },
|
||||||
params: {
|
}
|
||||||
path: entry.slug.includes('/')
|
})
|
||||||
? entry.slug.split('/').shift()
|
return paths
|
||||||
: undefined,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
'params.path',
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const { path } = Astro.params
|
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">
|
<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
|
<a
|
||||||
aria-label={nav.text}
|
aria-label={nav.text}
|
||||||
class={`nav-link text-3xl font-bold ${Astro.url.pathname === nav.href ? 'opacity-80' : 'opacity-30 hover:opacity-50'}`}
|
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.
|
> for style, it's fast.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
Visit
|
Visit it
|
||||||
<a
|
<a
|
||||||
target="_blank"
|
target="_blank"
|
||||||
href="https://github.com/kaivanwong/astro-theme-vitesse"
|
href="https://github.com/kaivanwong/astro-theme-vitesse"
|
||||||
>
|
>
|
||||||
it on GitHub
|
on GitHub
|
||||||
</a>
|
</a>
|
||||||
to fork the repository, read the docs or one-click deploy on Netlify.
|
to fork the repository, read the docs or one-click deploy on Netlify.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
If you like Vitesse theme for Astro, please
|
If you like Vitesse theme for Astro, please
|
||||||
<a target="_blank" href="https://github.com/kaivanwong">
|
<a target="_blank" href="https://github.com/kaivanwong"> click follow </a>
|
||||||
click follow for me
|
for me.
|
||||||
</a>.
|
|
||||||
</p>
|
</p>
|
||||||
<hr class="hr-line" />
|
<hr class="hr-line" />
|
||||||
<p>Find me on</p>
|
<p>Find me on</p>
|
||||||
|
|
|
||||||
|
|
@ -27,16 +27,9 @@ function getDate(date: string) {
|
||||||
}
|
}
|
||||||
---
|
---
|
||||||
|
|
||||||
<BaseLayout
|
<BaseLayout title={title} description={description} pageType="article">
|
||||||
title={title}
|
<article class="prose">
|
||||||
description={description}
|
<h1>{title}</h1>
|
||||||
pageType="article"
|
|
||||||
pageOperate={true}
|
|
||||||
>
|
|
||||||
<article class="mb-16 max-w-none prose">
|
|
||||||
<h1 class="text-title">
|
|
||||||
{title}
|
|
||||||
</h1>
|
|
||||||
<p op-50>
|
<p op-50>
|
||||||
{date && <time datetime={getDate(date)}>{date.split(',')}</time>}
|
{date && <time datetime={getDate(date)}>{date.split(',')}</time>}
|
||||||
{duration && <span>· {duration}</span>}
|
{duration && <span>· {duration}</span>}
|
||||||
|
|
|
||||||
|
|
@ -4,11 +4,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro'
|
||||||
import ListProjects from '@/components/ListProjects.vue'
|
import ListProjects from '@/components/ListProjects.vue'
|
||||||
---
|
---
|
||||||
|
|
||||||
<BaseLayout
|
<BaseLayout title="Projects" description="List of projects that I am proud of">
|
||||||
title="Projects"
|
|
||||||
description="List of projects that I am proud of"
|
|
||||||
pageOperate={true}
|
|
||||||
>
|
|
||||||
<h1 class="mb-10 text-title">Projects</h1>
|
<h1 class="mb-10 text-title">Projects</h1>
|
||||||
<div mb-16 sm:mb-24>
|
<div mb-16 sm:mb-24>
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -58,8 +58,12 @@ export const siteConfig = {
|
||||||
href: '/blog',
|
href: '/blog',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: 'Note',
|
text: 'Notes',
|
||||||
href: '/blog/note',
|
href: '/blog/notes',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Talks',
|
||||||
|
href: '/blog/talks',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: 'Projects',
|
text: 'Projects',
|
||||||
|
|
@ -68,14 +72,18 @@ export const siteConfig = {
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
page: {
|
page: {
|
||||||
navLinks: [
|
blogLinks: [
|
||||||
{
|
{
|
||||||
text: 'Blog',
|
text: 'Blog',
|
||||||
href: '/blog',
|
href: '/blog',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: 'Note',
|
text: 'Notes',
|
||||||
href: '/blog/note',
|
href: '/blog/notes',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Talks',
|
||||||
|
href: '/blog/talks',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -34,6 +34,10 @@ img {
|
||||||
--at-apply: rd-1.5;
|
--at-apply: rd-1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.prose {
|
||||||
|
--at-apply: mb-16 max-w-none min-h-60;
|
||||||
|
}
|
||||||
|
|
||||||
.prose-link i {
|
.prose-link i {
|
||||||
--at-apply: text-sm mr-1;
|
--at-apply: text-sm mr-1;
|
||||||
}
|
}
|
||||||
|
|
@ -43,7 +47,7 @@ img {
|
||||||
}
|
}
|
||||||
|
|
||||||
.prose h1 {
|
.prose h1 {
|
||||||
--at-apply: text-9 mb-4;
|
--at-apply: text-9 mb-4 text-title;
|
||||||
}
|
}
|
||||||
|
|
||||||
.prose h2 {
|
.prose h2 {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue