123 lines
5.0 KiB
Plaintext
123 lines
5.0 KiB
Plaintext
|
import { escape } from "html-escaper";
|
||
|
|
function template({
|
||
|
|
title,
|
||
|
|
pathname,
|
||
|
|
statusCode = 404,
|
||
|
|
tabTitle,
|
||
|
|
body
|
||
|
|
}) {
|
||
|
|
return `<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>${tabTitle}</title>
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--gray-10: hsl(258, 7%, 10%);
|
||
|
|
--gray-20: hsl(258, 7%, 20%);
|
||
|
|
--gray-30: hsl(258, 7%, 30%);
|
||
|
|
--gray-40: hsl(258, 7%, 40%);
|
||
|
|
--gray-50: hsl(258, 7%, 50%);
|
||
|
|
--gray-60: hsl(258, 7%, 60%);
|
||
|
|
--gray-70: hsl(258, 7%, 70%);
|
||
|
|
--gray-80: hsl(258, 7%, 80%);
|
||
|
|
--gray-90: hsl(258, 7%, 90%);
|
||
|
|
--black: #13151A;
|
||
|
|
--accent-light: #E0CCFA;
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
html {
|
||
|
|
background: var(--black);
|
||
|
|
color-scheme: dark;
|
||
|
|
accent-color: var(--accent-light);
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
background-color: var(--gray-10);
|
||
|
|
color: var(--gray-80);
|
||
|
|
font-family: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
|
||
|
|
line-height: 1.5;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
a {
|
||
|
|
color: var(--accent-light);
|
||
|
|
}
|
||
|
|
|
||
|
|
.center {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
height: 100vh;
|
||
|
|
width: 100vw;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
margin-bottom: 8px;
|
||
|
|
color: white;
|
||
|
|
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||
|
|
font-weight: 700;
|
||
|
|
margin-top: 1rem;
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.statusCode {
|
||
|
|
color: var(--accent-light);
|
||
|
|
}
|
||
|
|
|
||
|
|
.astro-icon {
|
||
|
|
height: 124px;
|
||
|
|
width: 124px;
|
||
|
|
}
|
||
|
|
|
||
|
|
pre, code {
|
||
|
|
padding: 2px 8px;
|
||
|
|
background: rgba(0,0,0, 0.25);
|
||
|
|
border: 1px solid rgba(255,255,255, 0.25);
|
||
|
|
border-radius: 4px;
|
||
|
|
font-size: 1.2em;
|
||
|
|
margin-top: 0;
|
||
|
|
max-width: 60em;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<main class="center">
|
||
|
|
<svg class="astro-icon" xmlns="http://www.w3.org/2000/svg" width="64" height="80" viewBox="0 0 64 80" fill="none"> <path d="M20.5253 67.6322C16.9291 64.3531 15.8793 57.4632 17.3776 52.4717C19.9755 55.6188 23.575 56.6157 27.3035 57.1784C33.0594 58.0468 38.7122 57.722 44.0592 55.0977C44.6709 54.7972 45.2362 54.3978 45.9045 53.9931C46.4062 55.4451 46.5368 56.9109 46.3616 58.4028C45.9355 62.0362 44.1228 64.8429 41.2397 66.9705C40.0868 67.8215 38.8669 68.5822 37.6762 69.3846C34.0181 71.8508 33.0285 74.7426 34.403 78.9491C34.4357 79.0516 34.4649 79.1541 34.5388 79.4042C32.6711 78.5705 31.3069 77.3565 30.2674 75.7604C29.1694 74.0757 28.6471 72.2121 28.6196 70.1957C28.6059 69.2144 28.6059 68.2244 28.4736 67.257C28.1506 64.8985 27.0406 63.8425 24.9496 63.7817C22.8036 63.7192 21.106 65.0426 20.6559 67.1268C20.6215 67.2865 20.5717 67.4446 20.5218 67.6304L20.5253 67.6322Z" fill="white"/> <path d="M20.5253 67.6322C16.9291 64.3531 15.8793 57.4632 17.3776 52.4717C19.9755 55.6188 23.575 56.6157 27.3035 57.1784C33.0594 58.0468 38.7122 57.722 44.0592 55.0977C44.6709 54.7972 45.2362 54.3978 45.9045 53.9931C46.4062 55.4451 46.5368 56.9109 46.3616 58.4028C45.9355 62.0362 44.1228 64.8429 41.2397 66.9705C40.0868 67.8215 38.8669 68.5822 37.6762 69.3846C34.0181 71.8508 33.0285 74.7426 34.403 78.9491C34.4357 79.0516 34.4649 79.1541 34.5388 79.4042C32.6711 78.5705 31.3069 77.3565 30.2674 75.7604C29.1694 74.0757 28.6471 72.2121 28.6196 70.1957C28.6059 69.2144 28.6059 68.2244 28.4736 67.257C28.1506 64.8985 27.0406 63.8425 24.9496 63.7817C22.8036 63.7192 21.106 65.0426 20.6559 67.1268C20.6215 67.2865 20.5717 67.4446 20.5218 67.6304L20.5253 67.6322Z" fill="url(#paint0_linear_738_686)"/> <path d="M0 51.6401C0 51.6401 10.6488 46.4654 21.3274 46.4654L29.3786 21.6102C29.6801 20.4082 30.5602 19.5913 31.5538 19.5913C32.5474 19.5913 33.4275 20.4082 33.7289 21.6102L41.7802 46.4654C54.4274 46.4654 63.1076 51.6401 63.1076 51.6401C63.1076 51.6401 45.0197 2.48776 44.9843 2.38914C44.4652 0.935933 43.5888 0 42.4073 0H20.7022C19.5206 0 18.6796 0.935933 18.1251 2.38914C18.086 2.4859 0 51.6401 0 51.6401Z" fill="white"/> <defs> <linearGradient id="paint0_linear_738_686" x1="31.554" y1="75.4423" x2="39.7462" y2="48.376" gradientUnits="userSpaceOnUse"> <stop stop-color="#D83333"/> <stop offset="1" stop-color="#F041FF"/> </linearGradient> </defs> </svg>
|
||
|
|
<h1>${statusCode ? `<span class="statusCode">${statusCode}: </span> ` : ""}<span class="statusMessage">${title}</span></h1>
|
||
|
|
${body || `
|
||
|
|
<pre>Path: ${escape(pathname)}</pre>
|
||
|
|
`}
|
||
|
|
</main>
|
||
|
|
</body>
|
||
|
|
</html>`;
|
||
|
|
}
|
||
|
|
function subpathNotUsedTemplate(base, pathname) {
|
||
|
|
return template({
|
||
|
|
pathname,
|
||
|
|
statusCode: 404,
|
||
|
|
title: "Not found",
|
||
|
|
tabTitle: "404: Not Found",
|
||
|
|
body: `<p>In your <code>site</code> you have your base path set to <a href="${base}">${base}</a>. Do you want to go there instead?</p>
|
||
|
|
<p>Come to our <a href="https://astro.build/chat">Discord</a> if you need help.</p>`
|
||
|
|
});
|
||
|
|
}
|
||
|
|
function notFoundTemplate(pathname, message = "Not found") {
|
||
|
|
return template({
|
||
|
|
pathname,
|
||
|
|
statusCode: 404,
|
||
|
|
title: message,
|
||
|
|
tabTitle: `404: ${message}`
|
||
|
|
});
|
||
|
|
}
|
||
|
|
export {
|
||
|
|
template as default,
|
||
|
|
notFoundTemplate,
|
||
|
|
subpathNotUsedTemplate
|
||
|
|
};
|