melon-mirror
/
mrmelon54.com
mirror of https://github.com/mrmelon54/mrmelon54.com.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Finish up first prototype SSR site

This commit is contained in:
Melon 2023-03-05 21:55:54 +00:00
parent 8403b687cc
commit b32fc099d0
Signed by: melon
GPG Key ID: 6C9D970C50D26A25
26 changed files with 255 additions and 307 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
index.html
View File

@ -1,28 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<title>MrMelon54.com</title>
<meta name="theme-color" content="#469b4c" />
<meta name="default-theme" content="auto" />
<meta name="author" content="mrmelon54.com" />
<meta name="description" content="mrmelon54.com" />
<meta name="keywords" content="go,mrmelon54.com,mrmelon54" />
<meta name="referrer" content="no-referrer" />
<meta property="og:title" content="MrMelon54" />
<meta property="og:url" content="https://mrmelon54.com" />
<meta property="og:type" content="object" />
<meta property="og:image" content="https://mrmelon54.com/assets/melon.svg" />
<meta property="og:site_name" content="MrMelon54" />
<link rel="icon" type="image/svg+xml" href="/melon.svg" />
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

2
package.json
View File

@ -1,5 +1,5 @@
{
"name": "mrmelon54.com-frontend",
"name": "mrmelon54.com",
"private": true,
"version": "0.0.0",
"type": "module",

0
src/assets/crafting_table.png → public/assets/crafting_table.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.9 KiB

After

Width:  |  Height:  |  Size: 6.9 KiB

15
src/assets/melon.svg
View File

@ -1,15 +0,0 @@
<svg width="512" height="512" viewBox="0 0 135.47 135.47" xmlns="http://www.w3.org/2000/svg">
<path d="M36.575 78.978c0 2.117.562 4.156 1.58 5.929l-28.84 16.751a17.87 17.87 0 0 1-2.37-8.9V42.712a17.9 17.9 0 0 1 2.366-8.895l28.843 16.746a11.912 11.912 0 0 0-1.579 5.932z" fill="#05873f"/>
<path d="M128.534 42.71v25.025h-29.63v-11.24c0-2.118-.561-4.16-1.582-5.933l28.84-16.746a17.835 17.835 0 0 1 2.37 8.899z" fill="#1d9d4b"/>
<path d="M128.534 67.735v25.024c0 3.18-.844 6.242-2.37 8.9l-27.26-15.827-1.583-.92a11.888 11.888 0 0 0 1.583-5.933V67.736Z" fill="#05873f"/>
<path d="M126.164 101.658a17.8 17.8 0 0 1-6.478 6.515l-21.549 12.512L83.318 94.88l9.686-5.624a11.88 11.88 0 0 0 4.317-4.341l28.84 16.746z" fill="#165f31"/>
<path d="M98.137 120.682 76.59 133.194a17.625 17.625 0 0 1-8.85 2.384V102.09c2.035 0 4.07-.53 5.9-1.592l9.679-5.623 14.819 25.805z" fill="#05873f"/>
<path d="M98.137 14.788 83.32 40.593l-9.68-5.623a11.733 11.733 0 0 0-5.899-1.588V-.108c3.056 0 6.112.796 8.85 2.384z" fill="#1d9d4b"/>
<path d="M67.739-.108v33.49c-2.035 0-4.07.525-5.9 1.587L42.475 46.216a11.819 11.819 0 0 0-4.32 4.345L9.311 33.815a17.782 17.782 0 0 1 6.483-6.515L58.89 2.275a17.625 17.625 0 0 1 8.849-2.384zm58.425 33.923L97.324 50.56a11.853 11.853 0 0 0-4.316-4.341l-9.686-5.624L98.141 14.79l21.549 12.511a17.745 17.745 0 0 1 6.478 6.516z" fill="#6db245"/>
<path d="M67.739 102.092v33.489c-3.056 0-6.111-.796-8.849-2.384L15.794 108.17a17.77 17.77 0 0 1-6.478-6.515l28.84-16.746a11.88 11.88 0 0 0 4.316 4.341l19.365 11.248a11.736 11.736 0 0 0 5.9 1.591z" fill="#165f31"/>
<path d="M111.386 51.996v31.488c0 5.94-3.146 11.422-8.261 14.387l-27.12 15.751a16.435 16.435 0 0 1-16.522 0l-27.12-15.75c-5.115-2.966-8.261-8.448-8.261-14.388V51.996c0-5.94 3.146-11.423 8.261-14.388l27.12-15.75a16.428 16.428 0 0 1 8.261-2.224c2.85 0 5.7.74 8.262 2.224l13.554 7.875 13.565 7.875a16.637 16.637 0 0 1 8.261 14.388z" fill="#d6b69b"/>
<path d="M28.074 82.053V53.43c0-5.4 2.86-10.382 7.51-13.078l24.65-14.317a14.939 14.939 0 0 1 15.019 0l24.65 14.317c4.65 2.696 7.51 7.679 7.51 13.078v28.622c0 5.399-2.86 10.382-7.51 13.078l-24.65 14.317a14.933 14.933 0 0 1-7.51 2.02c-2.59 0-5.18-.673-7.509-2.02l-12.32-7.159-12.33-7.158a15.123 15.123 0 0 1-7.51-13.078z" fill="#c13c2d"/>
<path d="M28.074 82.053V53.43a15.133 15.133 0 0 1 7.51-13.078l12.33-7.158 12.32-7.159a14.94 14.94 0 0 1 7.51-2.026v43.73l-29.58 17.17-8.08 4.69a15.133 15.133 0 0 1-2.015-7.552z" fill="#bf3123"/>
<path d="M67.745 67.745v-43.73c2.59 0 5.18.674 7.51 2.026l24.65 14.317a15.125 15.125 0 0 1 7.51 13.078v28.621c0 2.695-.715 5.296-2.015 7.552L67.742 67.75z" fill="#af160b"/>
<path d="M59.523 41.028a4.63 4.63 0 1 1-9.261 0 4.63 4.63 0 0 1 9.26 0zm16.424 0a4.63 4.63 0 1 0 9.261 0 4.63 4.63 0 0 0-9.26 0zM48.71 88.23a4.63 4.63 0 1 1 4.63 8.02 4.63 4.63 0 0 1-4.63-8.02zm-8.212-14.224a4.63 4.63 0 1 0-4.63-8.02 4.63 4.63 0 0 0 4.63 8.02zm54.496-.012a4.63 4.63 0 1 1 4.63-8.02 4.63 4.63 0 0 1-4.63 8.02zm-8.212 14.225a4.63 4.63 0 1 0-4.63 8.02 4.63 4.63 0 0 0 4.63-8.02zM61.705 61.67a4.63 4.63 0 1 1-9.26 0 4.63 4.63 0 0 1 9.26 0zm3.79 14.348a4.63 4.63 0 1 1 4.63 8.02 4.63 4.63 0 0 1-4.63-8.02zm10.53-10.455a4.63 4.63 0 1 1 4.63-8.02 4.63 4.63 0 0 1-4.63 8.02z" fill="#3b180f"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 3.2 KiB

4
src/components/Header.svelte
View File

@ -1,6 +1,4 @@
<script lang="ts">
import melonLogo from "~/assets/melon.svg";
export let isHome: boolean = false;
</script>
@ -10,7 +8,7 @@
<span />
{:else}
<a class="home-link" href="/">
<img src={melonLogo} alt="Melon Logo" />
<img src="melon.svg" alt="Melon Logo" />
<h1>MrMelon54.com</h1>
</a>
{/if}

0
src/markdown/Markdown.svelte → src/components/Markdown.svelte
View File

27
src/components/MetaTags.svelte
View File

@ -1,14 +1,29 @@
<script>
import appStyles from "~/assets/app.scss";
export let title;
export let description;
<script lang="ts">
export let url: string;
export let title: string;
export let description: string;
export let keywords: string;
</script>
<svelte:head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<title>{title}</title>
<meta name="theme-color" content="#469b4c" />
<meta name="default-theme" content="auto" />
<meta name="author" content="MrMelon54" />
<meta name="description" content={description} />
<link rel="stylesheet" href={appStyles} />
<meta name="keywords" content="mrmelon54.com,mrmelon54,{keywords}" />
<meta name="referrer" content="no-referrer" />
<meta property="og:title" content={title} />
<meta property="og:url" content={url} />
<meta property="og:type" content="object" />
<meta property="og:image" content="https://mrmelon54.com/assets/melon.svg" />
<meta property="og:site_name" content="MrMelon54" />
<link rel="icon" type="image/svg+xml" href="/melon.svg" />
<link rel="stylesheet" href="{import.meta.env.VITE_CSS_VAR}.light.css" media="screen" />
<link rel="stylesheet" href="{import.meta.env.VITE_CSS_VAR}.dark.css" media="screen and (prefers-color-scheme: dark)" />
</svelte:head>

1
src/pages/__layout.svelte
View File

@ -1,6 +1,7 @@
<script lang="ts">
import CenterScreen from "~/components/CenterScreen.svelte";
import Header from "~/components/Header.svelte";
import "~/styles/app.scss";
export let isHome: boolean = false;
</script>

4
src/pages/_default/_default.page.client.js
View File

@ -8,7 +8,7 @@ export async function render(pageContext) {
target: app_el,
hydrate: true,
props: {
pageProps: pageContext.pageProps,
__: pageContext.__,
},
});
}
@ -27,5 +27,3 @@ export function onPageTransitionEnd(pageContext) {
// For example:
document.body.classList.remove("page-transition");
}
console.log("hi");

20
src/pages/_default/_default.page.server.js
View File

@ -1,13 +1,23 @@
import {escapeInject, dangerouslySkipEscape} from "vite-plugin-ssr";
const base = import.meta.env.BASE_URL;
export {render};
export {passToClient};
// See https://vite-plugin-ssr.com/data-fetching
const passToClient = ["pageProps", "routeParams"];
export const passToClient = ["__", "pageProps", "routeParams", "urlOriginal"];
async function render(pageContext) {
export async function onBeforeRender(pageContext) {
const {routeParams, urlOriginal} = pageContext;
return {
pageContext: {
__: {
routeParams,
urlOriginal,
},
},
};
}
export async function render(pageContext) {
const app = pageContext.Page.render(pageContext);
const appHtml = app.html;
const appCss = app.css.code;

60
src/pages/_error.page.svelte
View File

@ -1,13 +1,47 @@
<script lang="ts">
import {navigate} from "vite-plugin-ssr/client/router";
import MetaTags from "~/components/MetaTags.svelte";
import Layout from "./__layout.svelte";
export let pageProps;
</script>
<MetaTags title="Error | MrMelon54.com" description="" />
<Layout>
<div id="missing-page">
{#if pageProps.is404}
<div class="title-logo">
<div class="settings-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M5.51 18.49a12 12 0 0 0 16.12.78c.49-.41.49-1.15.03-1.6L6.34 2.33a1.08 1.08 0 0 0-1.6.03A12 12 0 0 0 5.5 18.5Z" />
<path d="M8.34 15.66a8 8 0 0 0 10.4.78c.54-.4.54-1.16.06-1.64L9.2 5.2c-.48-.48-1.25-.48-1.64.06a8 8 0 0 0 .78 10.4Z" />
<path d="m14 10-5.5 5.5" />
<path d="M14 10v8" />
<path d="M14 10H6" />
</svg>
</div>
</div>
<h1 class="title-text">404 Not Found</h1>
<p class="coming-soon">You have lost your way, please return to valid paths.</p>
<p><button on:click={() => navigate("/")} class="refresh-btn">Back to homepage</button></p>
<div class="card-wrapper">
<div class="card">
<h3>What can I do?</h3>
<p class="sub-text">If you're a site visitor</p>
<p class="small-text">Maybe you followed a broken link? Try returning to the homepage or press the back button.</p>
<p class="small-text">If you need immediate assistance, please send us an email instead. We apologize for any inconvenience.</p>
</div>
</div>
{:else}
<div class="title-logo">
<div class="settings-icon">
<svg
@ -25,18 +59,18 @@
</svg>
</div>
</div>
<h1 class="title-text">404 Not Found</h1>
<p class="coming-soon">You have lost your way, please return to valid paths.</p>
<h1 class="title-text">500 Internal Server Error</h1>
<p class="coming-soon">The server had an issue with this page.</p>
<p><button on:click={() => navigate("/")} class="refresh-btn">Back to homepage</button></p>
<div class="card-wrapper">
<div class="card">
<h3>What can I do?</h3>
<p class="sub-text">If you're a site visitor</p>
<p class="small-text">Maybe you followed a broken link? Try returning to the homepage or press the back button.</p>
<p class="small-text">Maybe the server is not playing nice?</p>
<p class="small-text">If you need immediate assistance, please send us an email instead. We apologize for any inconvenience.</p>
</div>
</div>
{:else}{/if}
{/if}
</div>
</Layout>
@ -46,24 +80,6 @@
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.center-screen-wrapper {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
/* min-height: calc(100vh); */
box-sizing: border-box;
}
.center-screen {
max-width: min(100%, 1280px);
margin: 0 auto;
padding: 2rem 0;
text-align: center;
box-sizing: border-box;
width: 100%;
}
.title-logo {
display: inline-flex;
color: rgb(35, 148, 253);

2
src/pages/dev-bot.page.svelte
View File

@ -9,7 +9,7 @@
<MetaTags title="Dev Bot | MrMelon54.com" description="MrMelon54.com Dev Bot" />
<Layout isHome={true}>
<Layout>
<h1 class="title-text">Melon Dev Bot</h1>
<ul>
<li><a href="https://github.com/MelonDevBot" target="_blank" rel="noreferrer">Github</a></li>

2
src/pages/hosting.page.svelte
View File

@ -8,7 +8,7 @@
<MetaTags title="Hosting | MrMelon54.com" description="MrMelon54.com Hosting" />
<Layout isHome={true}>
<Layout>
<h1 class="title-text">MrMelon54 Hosting</h1>
<ul>
<li><a href="https://discord-plays.xyz" target="_blank" rel="noreferrer">Discord Plays</a></li>

10
src/pages/index.page.svelte
View File

@ -1,25 +1,21 @@
<script lang="ts">
import melonLogo from "~/assets/melon.svg";
import MetaTags from "~/components/MetaTags.svelte";
import Layout from "~/pages/__layout.svelte";
export let pageProps;
let _ = pageProps;
export let __;
</script>
<MetaTags title="MrMelon54.com" description="MrMelon54.com Home Page" />
<MetaTags url={__.urlOriginal} title="MrMelon54.com" description="MrMelon54.com Home Page" keywords="" />
<Layout isHome={true}>
<div class="title-logo">
<a href="https://mrmelon54.com">
<img src={melonLogo} class="logo" alt="Melon Logo" />
<img src="melon.svg" class="logo" alt="Melon Logo" />
</a>
</div>
<h1 class="title-text">MrMelon54.com</h1>
<p class="coming-soon">Coming soon to an internet server near you.</p>
<a href="/hi">hi</a>
</Layout>
<style lang="scss">

2
src/pages/ktane.page.svelte
View File

@ -8,7 +8,7 @@
<MetaTags title="KTaNE | MrMelon54.com" description="MrMelon54.com KTaNE Projects" />
<Layout isHome={true}>
<Layout>
<h1 class="title-text">MrMelon54 KTaNE Projects</h1>
<ul>
<li>

2
src/pages/minecraft.page.svelte
View File

@ -10,7 +10,7 @@
<MetaTags title="Minecraft | MrMelon54.com" description="MrMelon54.com Minecraft" />
<Layout isHome={true}>
<Layout>
<h1 class="title-text">MrMelon54 Minecraft Projects</h1>
{#if $modStore instanceof Error}
<div class="projects-loading">{$modStore.message}</div>

14
src/pages/minecraft/@project.page.server.ts
View File

@ -1,12 +1,4 @@
export async function onBeforeRender(pageContext) {
const {project} = pageContext.routeParams;
const pageProps = {project};
return {
pageContext: {
pageProps,
},
};
export async function prerender() {
let userProjects = await fetch("https://api.modrinth.com/v2/user/mrmelon54/projects").then(resp => resp.json());
return userProjects.map(x => `/minecraft/${x.slug}`);
}
export const passToClient = ["pageProps"];

165
src/pages/minecraft/@project.page.svelte
View File

@ -12,9 +12,7 @@
import {onMount} from "svelte";
export const props = ["project"];
export let pageProps;
console.log("Props:", pageProps);
export let __;
let modData: ModData;
let buttonData: ButtonData;
@ -22,7 +20,7 @@
onMount(() => {
updateData = new Promise((res, rej) => {
fetch(`${import.meta.env.VITE_TIMELINE_API}/project/minecraft/${pageProps.project}`)
fetch(`${import.meta.env.VITE_TIMELINE_API}/project/minecraft/${__.routeParams.project}`)
.then(resp => res(resp.json()))
.catch(err => rej(err));
});
@ -33,8 +31,8 @@
modData = null;
buttonData = null;
} else if (x) {
modData = x.projectsSlugMap[pageProps.project];
buttonData = modData ? x.modAlias[pageProps.project] : null;
modData = x.projectsSlugMap[__.routeParams.project];
buttonData = modData ? x.modAlias[modData.id] : null;
} else {
modData = null;
buttonData = null;
@ -42,7 +40,7 @@
});
</script>
<MetaTags title={(modData ? `${modData.title} | ` : "") + "Minecraft | MrMelon54.com"} description="" />
<MetaTags url={__.urlOriginal} title={(modData ? `${modData.title} | ` : "") + "Minecraft | MrMelon54.com"} description="" keywords="minecraft,minecraft mod,{__.routeParams.project}" />
<Layout>
{#if modData}
@ -83,9 +81,160 @@
{/await}
</div>
<div class="body-text">
<LazyComponent component={() => import("~/markdown/Markdown.svelte")} delayMs={500} source={modData.body}>Loading...</LazyComponent>
<LazyComponent component={() => import("~/components/Markdown.svelte")} delayMs={500} source={modData.body}>Loading...</LazyComponent>
</div>
{:else}
<div class="projects-loading" />
{/if}
</Layout>
<style lang="scss">
.mod-meta {
.title-img {
width: max(25%, 100px);
aspect-ratio: 1/1;
border-radius: 32px;
margin-bottom: 32px;
-webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.5);
}
.title-text {
margin: 0 0 24px 0;
font-size: 3.2em;
line-height: 1.1;
}
.link-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
margin-bottom: 32px;
> .brand-button {
border-radius: 0.75rem;
padding: 6px;
min-width: 32px;
height: 32px;
-webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.5);
cursor: pointer;
color: #dddddd;
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
font-size: 115%;
font-family: sans-serif;
@media (max-width: 600px) {
& {
width: 48px;
height: 48px;
}
}
:global(svg) {
display: inline-block;
vertical-align: middle;
aspect-ratio: 1/1;
height: 100%;
}
&::after {
display: inline-block;
height: 32px;
line-height: 32px;
margin-right: 2px;
@media (max-width: 600px) {
& {
display: none;
}
}
}
}
> .button-modrinth {
color: #1bd96a;
background: #353535;
&::after {
color: #dddddd;
content: "Modrinth";
}
}
> .button-curseforge {
background: #d34037;
&::after {
content: "CurseForge";
}
}
> .button-github {
background: #6e40c9;
&::after {
content: "Github";
}
}
}
.progress {
margin-bottom: 32px;
> .progress-bar {
width: 100%;
height: 32px;
border-radius: 24px;
background-color: var(--bg-panel);
overflow: hidden;
position: relative;
-webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.5);
> .progress-bar-done {
transform: translateX(-100%);
-webkit-animation: loadBar 1s forwards;
animation: loadBar 1s forwards;
height: 100%;
background-color: var(--primary-main);
@keyframes loadBar {
100% {
transform: translateX(0);
}
}
> .progress-bar-text {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
font-family: monospace;
}
}
}
}
}
.body-text {
text-align: left;
background: var(--bg-panel);
border-radius: 16px;
-webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.5);
padding: 16px;
:global(.markdown-body) :global(h1:first-child) {
display: none;
}
}
</style>

12
src/pages/minecraft/crafting.page.svelte
View File

@ -1,15 +1,19 @@
<script lang="ts">
import CraftingTable from "~/assets/crafting_table.png";
import {onMount} from "svelte";
import Layout from "../__layout.svelte";
const craftWidth = 124;
const craftHeight = 62;
let craftingBg = new Image(124, 62);
craftingBg.src = CraftingTable;
craftingBg.onload = () => render();
let craftingBg;
let craftingCanvas;
onMount(() => {
craftingBg = new Image(124, 62);
craftingBg.src = "assets/crafting_table.png";
craftingBg.onload = () => render();
});
function render() {
let craftingCtx = craftingCanvas.getContext("2d");
craftingCtx.fillStyle = "#ff0000";

36
src/routes/MinecraftCrafting.svelte
View File

@ -1,36 +0,0 @@
<script lang="ts">
import CraftingTable from "~/assets/crafting_table.png";
const craftWidth = 124;
const craftHeight = 62;
let craftingBg = new Image(124, 62);
craftingBg.src = CraftingTable;
craftingBg.onload = () => render();
let craftingCanvas;
function render() {
let craftingCtx = craftingCanvas.getContext("2d");
craftingCtx.fillStyle = "#ff0000";
craftingCtx.fillRect(0, 0, craftWidth, craftHeight);
craftingCtx.drawImage(craftingBg, 0, 0);
}
</script>
<canvas bind:this={craftingCanvas} on:load={() => render()} width={craftWidth} height={craftHeight} />
<input type="file" id="actual-btn" hidden />
<label for="upload">Choose file</label>
<style lang="scss">
label {
background-color: indigo;
color: white;
padding: 0.5rem;
font-family: sans-serif;
border-radius: 0.3rem;
cursor: pointer;
margin-top: 1rem;
}
</style>

151
src/routes/_Default.svelte
View File

@ -1,151 +0,0 @@
<script>
import {link, navigate} from "svelte-navigator";
</script>
<div id="missing-page">
<div class="center-screen-wrapper">
<div class="center-screen">
<div class="title-logo">
<div class="settings-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect x="3" y="11" width="18" height="10" rx="2" />
<circle cx="12" cy="5" r="2" />
<path d="M12 7v4" />
<line x1="8" y1="16" x2="8" y2="16" />
<line x1="16" y1="16" x2="16" y2="16" />
</svg>
</div>
</div>
<h1 class="title-text">404 Not Found</h1>
<p class="coming-soon">You have lost your way, please return to valid paths.</p>
<p><button on:click={() => navigate("/")} class="refresh-btn">Back to homepage</button></p>
<div class="card-wrapper">
<div class="card">
<h3>What can I do?</h3>
<p class="sub-text">If you're a site visitor</p>
<p class="small-text">Maybe you followed a broken link? Try returning to the homepage or press the back button.</p>
<p class="small-text">If you need immediate assistance, please send us an email instead. We apologize for any inconvenience.</p>
</div>
</div>
</div>
</div>
</div>
<style>
#missing-page {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.center-screen-wrapper {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
/* min-height: calc(100vh); */
box-sizing: border-box;
}
.center-screen {
max-width: min(100%, 1280px);
margin: 0 auto;
padding: 2rem 0;
text-align: center;
box-sizing: border-box;
width: 100%;
}
.title-logo {
display: inline-flex;
color: rgb(35, 148, 253);
}
.title-text {
margin: 0 0 24px;
font-size: 3.2em;
line-height: 1.1;
}
.title-logo {
padding: 0;
position: relative;
height: 100px;
aspect-ratio: 1/1;
}
.title-logo .settings-icon {
aspect-ratio: 1/1;
width: 80px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.coming-soon {
text-align: center;
font-size: 1.25rem;
font-weight: 300;
}
.refresh-btn {
color: rgb(117, 230, 178);
background-color: unset;
border: 1px solid rgb(32, 175, 109);
border-radius: 0.3rem;
padding: 0.5rem 1rem;
font-size: 1.25rem;
font-weight: 400;
line-height: 1.5;
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
user-select: none;
}
.card-wrapper {
padding: 0 1rem;
}
.card {
border: 1px solid rgba(140, 130, 115, 0.13);
border-radius: 0.3rem;
padding: 2rem;
margin: 2rem auto;
width: 50%;
word-wrap: break-word;
box-sizing: border-box;
}
@media screen and (max-width: 900px) {
.card {
margin: 2rem 0;
width: 100%;
padding: 1rem;
}
}
.card h3 {
font-size: 1.75rem;
text-align: left;
}
.card p.sub-text {
font-size: 1.5rem;
text-align: left;
}
.card p.small-text {
font-size: 1.25rem;
text-align: left;
}
</style>

2
src/assets/app.scss → src/styles/app.scss
View File

@ -1,4 +1,4 @@
@import "../markdown/markdown.scss";
@import "./markdown.scss";
:root {
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;

0
src/markdown/hljs.scss → src/styles/hljs.scss
View File

2
src/markdown/markdown.scss → src/styles/markdown.scss
View File

@ -257,7 +257,7 @@
}
> :last-child,
details[open] > :last-child:not(summary) {
details[open]> :last-child:not(summary) {
margin-bottom: 0 !important;
}

0
src/assets/panel.scss → src/styles/panel.scss
View File

1
vite.config.ts
View File

@ -6,7 +6,6 @@ import ssr from "vite-plugin-ssr/plugin";
// https://vitejs.dev/config/
export default defineConfig({
base: `${process.env.BASE_URL || "/"}`,
build: {
emptyOutDir: true,
},