aljaz/opencode
1
0
Fork 0
mirror of https://github.com/aljazceru/opencode.git synced 2025-12-25 11:44:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

ignore: 404

Browse Source
This commit is contained in:
Jay V
2025-09-04 01:39:54 -07:00
parent 03522471a1
commit 85ac243752
2 changed files with 162 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
cloud/app/src/routes/[...404].css Normal file
View File

@@ -0,0 +1,130 @@
[data-page="not-found"] {
--color-text: hsl(224, 10%, 10%);
--color-text-secondary: hsl(224, 7%, 46%);
--color-text-dimmed: hsl(224, 6%, 63%);
--color-text-inverted: hsl(0, 0%, 100%);
--color-border: hsl(224, 6%, 77%);
}
[data-page="not-found"] {
@media (prefers-color-scheme: dark) {
--color-text: hsl(0, 0%, 100%);
--color-text-secondary: hsl(224, 6%, 66%);
--color-text-dimmed: hsl(224, 7%, 46%);
--color-text-inverted: hsl(224, 10%, 10%);
--color-border: hsl(224, 6%, 36%);
}
}
[data-page="not-found"] {
--padding: 3rem;
--vertical-padding: 1.5rem;
--heading-font-size: 1.375rem;
@media (max-width: 30rem) {
--padding: 1rem;
--vertical-padding: 0.75rem;
--heading-font-size: 1rem;
}
font-family: var(--font-mono);
color: var(--color-text);
padding: calc(var(--padding) + 1rem);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
a {
color: var(--color-text);
text-decoration: underline;
text-underline-offset: var(--space-0-75);
text-decoration-thickness: 1px;
}
[data-component="content"] {
max-width: 40rem;
width: 100%;
border: 1px solid var(--color-border);
}
[data-component="top"] {
padding: var(--padding);
display: flex;
flex-direction: column;
align-items: center;
gap: calc(var(--vertical-padding) / 2);
text-align: center;
[data-slot="logo-link"] {
text-decoration: none;
}
img {
height: auto;
width: clamp(200px, 85vw, 400px);
}
[data-slot="logo dark"] {
display: none;
}
@media (prefers-color-scheme: dark) {
[data-slot="logo light"] {
display: none;
}
[data-slot="logo dark"] {
display: block;
}
}
[data-slot="title"] {
line-height: 1.25;
font-weight: 500;
text-align: center;
font-size: var(--heading-font-size);
color: var(--color-text);
text-transform: uppercase;
margin: 0;
}
}
[data-component="actions"] {
border-top: 1px solid var(--color-border);
display: flex;
[data-slot="action"] {
flex: 1;
text-align: center;
line-height: 1.4;
padding: var(--vertical-padding) 1rem;
text-transform: uppercase;
font-size: 1rem;
a {
display: block;
width: 100%;
height: 100%;
color: var(--color-text);
text-decoration: underline;
text-underline-offset: var(--space-0-75);
text-decoration-thickness: 1px;
}
}
[data-slot="action"] + [data-slot="action"] {
border-left: 1px solid var(--color-border);
}
@media (max-width: 40rem) {
flex-direction: column;
[data-slot="action"] + [data-slot="action"] {
border-left: none;
border-top: 1px solid var(--color-border);
}
}
}
}

45
cloud/app/src/routes/[...404].tsx
View File

@@ -1,19 +1,38 @@
import { Title } from "@solidjs/meta";
import { HttpStatusCode } from "@solidjs/start";
import "./[...404].css"
import { Title } from "@solidjs/meta"
import { HttpStatusCode } from "@solidjs/start"
import logoLight from "../asset/logo-ornate-light.svg"
import logoDark from "../asset/logo-ornate-dark.svg"
export default function NotFound() {
return (
<main>
<Title>Not Found</Title>
<main data-page="not-found">
<Title>Not Found | opencode</Title>
<HttpStatusCode code={404} />
<h1>Page Not Found</h1>
<p>
Visit{" "}
<a href="https://start.solidjs.com" target="_blank">
start.solidjs.com
</a>{" "}
to learn how to build SolidStart apps.
</p>
<div data-component="content">
<section data-component="top">
<a href="/" data-slot="logo-link">
<img data-slot="logo light" src={logoLight} alt="opencode logo light" />
<img data-slot="logo dark" src={logoDark} alt="opencode logo dark" />
</a>
<h1 data-slot="title">404 - Page Not Found</h1>
</section>
<section data-component="actions">
<div data-slot="action">
<a href="/">Home</a>
</div>
<div data-slot="action">
<a href="/docs">Docs</a>
</div>
<div data-slot="action">
<a href="https://github.com/sst/opencode">GitHub</a>
</div>
<div data-slot="action">
<a href="/discord">Discord</a>
</div>
</section>
</div>
</main>
);
)
}