SSR and CSR working together
This commit is contained in:
parent
cb42872df8
commit
47b93b26bd
GPG Key ID:
6C9D970C50D26A25
|
|
@ -10,7 +10,7 @@ async function startServer() {
|
|||
const app = express();
|
||||
|
||||
if (isProduction) {
|
||||
app.use(express.static(`${root}/${outDir}/client`));
|
||||
app.use(express.static(`${root}/client`));
|
||||
} else {
|
||||
const vite = require("vite");
|
||||
const viteDevServer = await vite.createServer({
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
@import "./markdown/markdown.scss";
|
||||
|
||||
:root {
|
||||
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
|
|
@ -20,11 +18,11 @@
|
|||
--large-curve: 0.9375rem;
|
||||
}
|
||||
|
||||
body {
|
||||
:global(body) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
:global(a) {
|
||||
font-weight: 500;
|
||||
color: var(--primary-link);
|
||||
text-decoration: inherit;
|
||||
|
|
@ -42,7 +40,7 @@ a {
|
|||
}
|
||||
}
|
||||
|
||||
button {
|
||||
:global(button) {
|
||||
border-radius: var(--small-curve);
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<script lang="ts">
|
||||
export let secondary: boolean = false;
|
||||
</script>
|
||||
|
||||
<button class:secondary on:click><slot /></button>
|
||||
|
||||
<style lang="scss">
|
||||
button {
|
||||
border-radius: var(--small-curve);
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: var(--primary-main);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.25s;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--primary-hover);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background-color: var(--secondary-main);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--secondary-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,10 +1,7 @@
|
|||
<script lang="ts">
|
||||
import melonLogo from "~/assets/melon.svg";
|
||||
import {link, useLocation} from "svelte-navigator";
|
||||
|
||||
const location = useLocation();
|
||||
let isHome: boolean;
|
||||
$: isHome = $location.pathname == "/";
|
||||
export let isHome: boolean = false;
|
||||
</script>
|
||||
|
||||
<header>
|
||||
|
|
@ -12,7 +9,7 @@
|
|||
{#if isHome}
|
||||
<span />
|
||||
{:else}
|
||||
<a class="home-link" href="/" use:link>
|
||||
<a class="home-link" href="/">
|
||||
<img src={melonLogo} alt="Melon Logo" />
|
||||
<h1>MrMelon54.com</h1>
|
||||
</a>
|
||||
|
|
@ -20,8 +17,8 @@
|
|||
|
||||
<nav>
|
||||
<a href={import.meta.env.VITE_URL_ID} rel="noreferrer" target="_blank">ID</a>
|
||||
<a href="/minecraft" use:link>Minecraft</a>
|
||||
<a href="/ktane" use:link>KTaNE</a>
|
||||
<a href="/minecraft">Minecraft</a>
|
||||
<a href="/ktane">KTaNE</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -4,10 +4,31 @@
|
|||
const locationHost = window.location.host;
|
||||
|
||||
export let domain: string;
|
||||
export let secondary: boolean = false;
|
||||
</script>
|
||||
|
||||
{#if domain == locationHost}
|
||||
<a href="//{domain}" use:link><slot /></a>
|
||||
<a class:secondary href="//{domain}" use:link><slot /></a>
|
||||
{:else}
|
||||
<a href="//{domain}"><slot /></a>
|
||||
<a class:secondary href="//{domain}"><slot /></a>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: var(--primary-link);
|
||||
text-decoration: inherit;
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-hover);
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
color: var(--secondary-link);
|
||||
|
||||
&:hover {
|
||||
color: var(--secondary-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,41 @@
|
|||
<script lang="ts">
|
||||
import CenterScreen from "~/components/CenterScreen.svelte";
|
||||
import Header from "~/components/Header.svelte";
|
||||
|
||||
export let isHome: boolean = false;
|
||||
</script>
|
||||
|
||||
<div id="app-router">
|
||||
<Header {isHome} />
|
||||
<main>
|
||||
<CenterScreen>
|
||||
<slot />
|
||||
</CenterScreen>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
:root {
|
||||
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: var(--primary-text);
|
||||
background-color: var(--bg);
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
|
||||
--small-curve: 0.5rem;
|
||||
--large-curve: 0.9375rem;
|
||||
}
|
||||
|
||||
:global(body) {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,10 +1,8 @@
|
|||
export {render};
|
||||
|
||||
export const clientRouting = true;
|
||||
|
||||
export const prefetchStaticAssets = {when: "HOVER"};
|
||||
|
||||
async function render(pageContext) {
|
||||
export async function render(pageContext) {
|
||||
const app_el = document.getElementById("app");
|
||||
new pageContext.Page({
|
||||
target: app_el,
|
||||
|
|
@ -14,3 +12,20 @@ async function render(pageContext) {
|
|||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function onPageTransitionStart(pageContext) {
|
||||
console.log("Page transition start");
|
||||
// `pageContext.isBackwardNavigation` is also set at `render(pageContext)`
|
||||
// and `onPageTransitionEnd(pageContext)`.
|
||||
console.log("Is backwards navigation?", pageContext.isBackwardNavigation);
|
||||
// For example:
|
||||
document.body.classList.add("page-transition");
|
||||
}
|
||||
|
||||
export function onPageTransitionEnd(pageContext) {
|
||||
console.log("Page transition end");
|
||||
// For example:
|
||||
document.body.classList.remove("page-transition");
|
||||
}
|
||||
|
||||
console.log("hi");
|
||||
|
|
|
|||
|
|
@ -0,0 +1,152 @@
|
|||
<script lang="ts">
|
||||
import {navigate} from "vite-plugin-ssr/client/router";
|
||||
import Layout from "./__layout.svelte";
|
||||
|
||||
export let pageProps;
|
||||
</script>
|
||||
|
||||
<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"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<line x1="12" y1="8" x2="12" y2="12" />
|
||||
<line x1="12" y1="16" x2="12.01" 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>
|
||||
{:else}{/if}
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
<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>
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
<script lang="ts">
|
||||
import melonLogo from "~/assets/melon.svg";
|
||||
import CenterScreen from "~/components/CenterScreen.svelte";
|
||||
import Layout from "~/pages/__layout.svelte";
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>MrMelon54.com</title>
|
||||
</svelte:head>
|
||||
|
||||
<CenterScreen>
|
||||
<Layout isHome={true}>
|
||||
<div class="title-logo">
|
||||
<a href="https://mrmelon54.com">
|
||||
<img src={melonLogo} class="logo" alt="Melon Logo" />
|
||||
|
|
@ -16,7 +16,9 @@
|
|||
<h1 class="title-text">MrMelon54.com</h1>
|
||||
|
||||
<p class="coming-soon">Coming soon to an internet server near you.</p>
|
||||
</CenterScreen>
|
||||
|
||||
<a href="/hi">hi</a>
|
||||
</Layout>
|
||||
|
||||
<style lang="scss">
|
||||
.title-logo .logo {
|
||||
|
|
|
|||
Loading…
Reference in New Issue