Skip to content

Commit 32e5f77

Browse files
authored
[cdn] updating pages based on the design recommendations (#1391)
### Description Updating the examples to adhere to the design guidelines ### Type of Change - [ ] New Example - [x] Example updates (Bug fixes, new features, etc.) - [ ] Other (changes to the codebase, but not to examples) ### New Example Checklist - [ ] 🛫 `npm run new-example` was used to create the example - [ ] 📚 The template wasn't used but I carefuly read the [Adding a new example](https://github.com/vercel/examples#adding-a-new-example) steps and implemented them in the example - [ ] 📱 Is it responsive? Are mobile and tablets considered?
1 parent 658d799 commit 32e5f77

File tree

6 files changed

+22
-12
lines changed

6 files changed

+22
-12
lines changed

cdn/custom-error-pages-app-dir/app/500/page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default function ServerError() {
1212
<p className="mt-2 text-sm text-gray-500">
1313
Error: ::vercel:ERROR_CODE::
1414
</p>
15-
<a href="/" className="mt-6 text-blue-600 hover:underline">
15+
<a href="/" className="mt-6 text-blue-600 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 rounded">
1616
Go back home
1717
</a>
1818
</div>

cdn/custom-error-pages-app-dir/app/504/page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default function GatewayTimeout() {
1212
<p className="mt-2 text-sm text-gray-500">
1313
Error: ::vercel:ERROR_CODE::
1414
</p>
15-
<a href="/" className="mt-6 text-blue-600 hover:underline">
15+
<a href="/" className="mt-6 text-blue-600 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 rounded">
1616
Go back home
1717
</a>
1818
</div>

cdn/custom-error-pages-app-dir/app/page.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Image from "next/image";
33
export default function Home() {
44
return (
55
<div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
6-
<main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-16 px-8 bg-white dark:bg-black sm:items-start sm:px-16 sm:py-24">
6+
<main className="flex w-full max-w-3xl flex-col items-center gap-8 py-12 px-8 bg-white dark:bg-black sm:items-start sm:px-16">
77
<Image
88
className="dark:invert"
99
src="/vercel.svg"
@@ -13,7 +13,7 @@ export default function Home() {
1313
priority
1414
/>
1515
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
16-
<h1 className="max-w-lg text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
16+
<h1 className="max-w-lg text-3xl font-semibold leading-10 tracking-tight text-black text-balance dark:text-zinc-50">
1717
Custom Error Pages with App Router
1818
</h1>
1919
<p className="max-w-lg text-base leading-7 text-zinc-600 dark:text-zinc-400">
@@ -67,21 +67,21 @@ export default function Home() {
6767
</div>
6868
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row sm:flex-wrap">
6969
<a
70-
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] sm:w-auto"
70+
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-zinc-950 dark:hover:bg-[#ccc] dark:focus-visible:ring-zinc-300 sm:w-auto"
7171
href="/slow-page"
7272
>
7373
Trigger Timeout
7474
</a>
7575
<a
76-
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] sm:w-auto"
76+
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-zinc-950 dark:border-white/[.145] dark:hover:bg-[#1a1a1a] dark:focus-visible:ring-zinc-300 sm:w-auto"
7777
href="https://github.com/vercel/examples/tree/main/cdn/custom-error-pages-app-dir"
7878
target="_blank"
7979
rel="noopener noreferrer"
8080
>
8181
View Source
8282
</a>
8383
<a
84-
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] sm:w-auto"
84+
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-zinc-950 dark:border-white/[.145] dark:hover:bg-[#1a1a1a] dark:focus-visible:ring-zinc-300 sm:w-auto"
8585
href="https://vercel.com/docs/custom-error-pages"
8686
target="_blank"
8787
rel="noopener noreferrer"

cdn/custom-error-pages-public-dir/app/page.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Image from "next/image";
33
export default function Home() {
44
return (
55
<div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
6-
<main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-16 px-8 bg-white dark:bg-black sm:items-start sm:px-16 sm:py-24">
6+
<main className="flex w-full max-w-3xl flex-col items-center gap-8 py-12 px-8 bg-white dark:bg-black sm:items-start sm:px-16">
77
<Image
88
className="dark:invert"
99
src="/vercel.svg"
@@ -13,7 +13,7 @@ export default function Home() {
1313
priority
1414
/>
1515
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
16-
<h1 className="max-w-lg text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
16+
<h1 className="max-w-lg text-3xl font-semibold leading-10 tracking-tight text-black text-balance dark:text-zinc-50">
1717
Custom Error Pages with Public Directory
1818
</h1>
1919
<p className="max-w-lg text-base leading-7 text-zinc-600 dark:text-zinc-400">
@@ -67,21 +67,21 @@ export default function Home() {
6767
</div>
6868
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row sm:flex-wrap">
6969
<a
70-
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] sm:w-auto"
70+
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-zinc-950 dark:hover:bg-[#ccc] dark:focus-visible:ring-zinc-300 sm:w-auto"
7171
href="/slow-page"
7272
>
7373
Trigger Timeout
7474
</a>
7575
<a
76-
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] sm:w-auto"
76+
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-zinc-950 dark:border-white/[.145] dark:hover:bg-[#1a1a1a] dark:focus-visible:ring-zinc-300 sm:w-auto"
7777
href="https://github.com/vercel/examples/tree/main/cdn/custom-error-pages-public-dir"
7878
target="_blank"
7979
rel="noopener noreferrer"
8080
>
8181
View Source
8282
</a>
8383
<a
84-
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] sm:w-auto"
84+
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-zinc-950 dark:border-white/[.145] dark:hover:bg-[#1a1a1a] dark:focus-visible:ring-zinc-300 sm:w-auto"
8585
href="https://vercel.com/docs/custom-error-pages"
8686
target="_blank"
8787
rel="noopener noreferrer"

cdn/custom-error-pages-public-dir/public/500.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,15 @@
3939
margin-top: 1.5rem;
4040
color: #2563eb;
4141
text-decoration: none;
42+
border-radius: 0.25rem;
4243
}
4344
a:hover {
4445
text-decoration: underline;
4546
}
47+
a:focus-visible {
48+
outline: none;
49+
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2563eb;
50+
}
4651
</style>
4752
</head>
4853
<body>

cdn/custom-error-pages-public-dir/public/504.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,15 @@
3939
margin-top: 1.5rem;
4040
color: #2563eb;
4141
text-decoration: none;
42+
border-radius: 0.25rem;
4243
}
4344
a:hover {
4445
text-decoration: underline;
4546
}
47+
a:focus-visible {
48+
outline: none;
49+
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2563eb;
50+
}
4651
</style>
4752
</head>
4853
<body>

0 commit comments

Comments
 (0)