Skip to content

Commit 2cf8b8d

Browse files
yanthomasdevyanthomasdev
committed
Add 404 and small improvements
1 parent 82652d7 commit 2cf8b8d

10 files changed

Lines changed: 119 additions & 55 deletions

File tree

‎src/assets/impostor.webp‎

11.1 KB
Loading

‎src/components/BlogPosts.astro‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,16 @@ posts.sort((first, second) => {
1313
});
1414
---
1515

16+
<h1 class="text-2xl sm:text-4xl text-neutral-50 font-bold mb-6">
17+
What I've been writing...
18+
</h1>
1619
<ul class="flex flex-col gap-4 mb-12">
1720
{
1821
posts.map(({ slug, data }) => (
1922
<li>
2023
<a
2124
class="block bg-neutral-800 hover:bg-neutral-700 transition-colors p-8 max-w-2xl"
22-
href={`/blog/${slug}`}
25+
href={`/blog/${slug}/`}
2326
>
2427
<h2 class="text-2xl sm:text-4xl text-neutral-50 font-bold mb-3">
2528
{data.title}

‎src/components/Navigation.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
const currentPage = Astro.url.pathname;
33
const pages = [
44
{ label: "About", link: "/" },
5-
{ label: "Blog", link: "/blog" },
5+
{ label: "Blog", link: "/blog/" },
66
{ label: "Twitter", link: "https://twitter.com/yanthomasdev" },
77
{ label: "GitHub", link: "https://github.com/Yan-Thomas" },
88
];

‎src/content/blog/building-yanthomasdev.mdx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ description: "Here’s how I built a super performant personal site using one tr
44
pubDate: "2023-07-19"
55
---
66

7+
This isn't a real article yet.
8+
79
## Ensem perdendum favorem
810

911
Lorem **markdownum sudore**. Traxerat arboribus, leto unde consorte videre

‎src/layouts/MainLayout.astro‎

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,24 @@
11
---
22
import cover from "@assets/og_cover.jpg";
3+
import { ensureTrailingSlash } from "@utils";
34
45
export interface Props {
56
title: string;
67
description?: string;
8+
overflow?: boolean;
79
}
810
9-
const { title, description = "Yan Thomas' personal website" } = Astro.props;
11+
const {
12+
title,
13+
description = "Yan Thomas' personal website",
14+
overflow = true,
15+
} = Astro.props;
1016
1117
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
12-
13-
const ensureTrailingSlash = (url: string | URL) =>
14-
url.toString().replace(/\/$/, "") + "/";
1518
---
1619

1720
<!DOCTYPE html>
18-
<html class="h-full" lang="en">
21+
<html class:list={["h-full", { "overflow-hidden": !overflow }]} lang="en">
1922
<head>
2023
<!-- High Priority -->
2124
<meta charset="UTF-8" />
@@ -40,8 +43,12 @@ const ensureTrailingSlash = (url: string | URL) =>
4043
<meta property="og:url" content={ensureTrailingSlash(canonicalURL)} />
4144
<meta property="og:image" content={cover.src} />
4245
</head>
43-
<body class="min-h-full text-neutral-300">
44-
<slot />
46+
<body class="min-h-full text-neutral-300 scroll">
47+
<main
48+
class="min-h-screen pt-4 px-5 sm:grid sm:grid-cols-2 md:grid-cols-3 md:px-6 max-w-7xl mx-auto"
49+
>
50+
<slot />
51+
</main>
4552
</body>
4653
</html>
4754

@@ -57,4 +64,12 @@ const ensureTrailingSlash = (url: string | URL) =>
5764
html {
5865
background-image: url("/noise.svg");
5966
}
67+
68+
body::-webkit-scrollbar {
69+
width: 0.5em;
70+
}
71+
72+
body::-webkit-scrollbar-thumb {
73+
@apply bg-neutral-500;
74+
}
6075
</style>

‎src/layouts/ThreeGrid.astro‎

Whitespace-only changes.

‎src/layouts/TwoThirdsLayout.astro‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,14 @@
22
import Navigation from "../components/Navigation.astro";
33
---
44

5-
<main
6-
class="min-h-screen pt-4 px-5 sm:grid sm:grid-cols-2 md:grid-cols-3 md:px-6 max-w-7xl mx-auto"
7-
>
8-
<div class="sm:hidden">
5+
<div class="sm:hidden">
6+
<Navigation />
7+
</div>
8+
<div class="md:col-span-2 mt-24 pb-12">
9+
<slot />
10+
</div>
11+
<div class="hidden sm:block h-full max-h-full">
12+
<div class="sticky top-[50vh] translate-y-[-124px]">
913
<Navigation />
1014
</div>
11-
<div class="md:col-span-2 mt-24 pb-12">
12-
<slot />
13-
</div>
14-
<div class="hidden sm:block h-full max-h-full">
15-
<div class="sticky top-[50vh] translate-y-[-124px]">
16-
<Navigation />
17-
</div>
18-
</div>
19-
</main>
15+
</div>

‎src/pages/404.astro‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
import MainLayout from "@layouts/MainLayout.astro";
3+
import TwoThirdsLayout from "@layouts/TwoThirdsLayout.astro";
4+
import { Image } from "astro:assets";
5+
import impostor from "@assets/impostor.webp";
6+
---
7+
8+
<MainLayout title="404 | Yan Thomas" overflow={false}>
9+
<TwoThirdsLayout>
10+
<div class="grid place-content-center h-full">
11+
<Image
12+
class="flying absolute top-[50%] left-0"
13+
width="48"
14+
src={impostor}
15+
alt="An impostor from Among Us"
16+
/>
17+
<h1 class="text-neutral-50 text-3xl font-bold md:text-4xl lg:text-5xl">
18+
<span class="block text-9xl">404</span>
19+
This page was an impostor.
20+
</h1>
21+
<h1 class="mt-4 text-xl md:text-2xl lg:text-4xl">
22+
Instead, go to one of these links next to you.
23+
</h1>
24+
</div>
25+
</TwoThirdsLayout>
26+
</MainLayout>
27+
28+
<style>
29+
@keyframes wandering-space {
30+
from {
31+
left: 0;
32+
transform: rotate(0deg);
33+
}
34+
to {
35+
left: 120%;
36+
transform: rotate(360deg);
37+
}
38+
}
39+
40+
.flying {
41+
transform: translateX(-3000px);
42+
animation-name: wandering-space;
43+
animation-duration: 24s;
44+
animation-delay: 5s;
45+
animation-timing-function: ease-out;
46+
z-index: -10;
47+
}
48+
</style>

‎src/pages/index.astro‎

Lines changed: 29 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -5,40 +5,36 @@ import Avatar from "@components/Avatar.astro";
55
---
66

77
<MainLayout title="About | Yan Thomas">
8-
<main
9-
class="min-h-screen pt-4 px-5 sm:grid sm:grid-cols-2 md:grid-cols-3 md:px-6 max-w-7xl mx-auto"
10-
>
11-
<div class="sm:hidden">
12-
<Navigation />
13-
</div>
14-
<div class="grid place-content-center">
15-
<div class="md:hidden mt-12 mb-4">
16-
<Avatar />
17-
</div>
18-
<div class="text-center md:text-left">
19-
<p class="text-neutral-300 md:text-xl lg:text-2xl">
20-
Hello there visitor, I am
21-
</p>
22-
<h1 class="text-neutral-50 text-4xl font-bold md:text-5xl lg:text-6xl">
23-
Yan Thomas
24-
</h1>
25-
</div>
26-
<div class="mt-8 border-l-2 py-2 pl-4">
27-
<p>
28-
I’m a web developer from Brazil, currently working as a open-source
29-
maintainer of Astro.
30-
</p>
31-
<p class="pt-2">
32-
Building accessible, fast, and exciting websites is what I am
33-
passionate about.
34-
</p>
35-
</div>
36-
</div>
37-
<div class="hidden md:flex md:items-center">
8+
<div class="sm:hidden">
9+
<Navigation />
10+
</div>
11+
<div class="grid place-content-center">
12+
<div class="md:hidden mt-12 mb-4">
3813
<Avatar />
3914
</div>
40-
<div class="hidden sm:block my-auto">
41-
<Navigation />
15+
<div class="text-center md:text-left">
16+
<p class="text-neutral-300 md:text-xl lg:text-2xl">
17+
Hello there visitor, I am
18+
</p>
19+
<h1 class="text-neutral-50 text-4xl font-bold md:text-5xl lg:text-6xl">
20+
Yan Thomas
21+
</h1>
22+
</div>
23+
<div class="mt-8 border-l-2 py-2 pl-4">
24+
<p>
25+
I’m a web developer from Brazil, currently working as a open-source
26+
maintainer of Astro.
27+
</p>
28+
<p class="pt-2">
29+
Building accessible, fast, and exciting websites is what I am passionate
30+
about.
31+
</p>
4232
</div>
43-
</main>
33+
</div>
34+
<div class="hidden md:flex md:items-center">
35+
<Avatar />
36+
</div>
37+
<div class="hidden sm:block my-auto">
38+
<Navigation />
39+
</div>
4440
</MainLayout>

‎src/utils.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
11
export function formatDate(date: Date) {
22
return new Intl.DateTimeFormat("en", { dateStyle: "medium" }).format(date);
33
}
4+
5+
export function ensureTrailingSlash(url: string | URL) {
6+
return url.toString().replace(/\/$/, "") + "/";
7+
}

0 commit comments

Comments
 (0)