add source codes

src/routes/code/+layout.ts

@@ -0,0 +1 @@
+export const csr = false

src/routes/code/+page.server.ts

@@ -0,0 +1,12 @@
+import { POST_DIR } from '$env/static/private';
+import Path from 'node:path';
+import fs from 'node:fs';
+
+export async function load({}) {
+
+    const files = fs.readdirSync(`${POST_DIR}/Codes`);
+
+    const codes = files.filter((content)=> Path.extname(content)=='.html')
+
+    return {codes}
+}

src/routes/code/+page.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    const { data } = $props();
+    import { base } from '$app/paths';
+</script>
+
+<ul>
+{#each data.codes as code}
+    <li><a href="{base}/code/{code}">{code}</a></li>
+{/each}
+</ul>

src/routes/code/[slug]/+layout.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+    let { children } = $props();
+
+    import './app.css'
+
+    function toggleFullScreen() {
+        if (document.fullscreenElement) {
+            document.exitFullscreen();
+        } else {
+            document.querySelector("body")?.requestFullscreen();
+        }
+    }
+
+    function hideContent() {
+        let uuid = crypto.randomUUID()
+        window.name = uuid
+        window.parent.postMessage({"id": uuid, 'message': 'toggleHide'}, '*');
+    }
+</script>
+
+<svelte:head>
+    <meta name="robots" content="noindex">
+</svelte:head>
+
+<div id='window'>
+    <div class="menubar">
+        <button style="background-color: rgb(255 95 87)"  aria-label="reload"     onclick={()=>{location.reload()}}></button>
+        <button style="background-color: rgb(255 188 46)" aria-label="close"      onclick={hideContent}></button>
+        <button style="background-color: rgb(40 200 64)"  aria-label="fullscreen" onclick={toggleFullScreen}></button>
+    </div>
+    <div class="code">
+        {@render children()}
+    </div>
+</div>
+
+<style>
+    #window {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        width: 100%;
+        box-sizing: border-box;
+        border: solid var(--border-color) 1px;
+        border-radius: 12px;
+        box-shadow: 0px 8px 40px var(--shadow-color);
+        background-color: var(--back-color);
+        font-family: sans-serif;
+        overflow: hidden;
+    }
+
+    .menubar {
+        display: flex;
+        height: 28px;
+        padding: 0 4px;
+        border-radius: 12px 12px 0 0;
+        background-color: var(--head-color);
+        border-bottom: solid var(--divider-color) 1px;
+
+        & >* {
+            all: unset;
+            width: 12px;
+            height: 12px;
+            margin: 8px 4px;
+            border-radius: 50%;
+            background-color: gray;
+            cursor: pointer;
+        }
+    }
+
+    .code {
+        height: calc(100% - 28px);
+        overflow-x: hidden;
+        overflow-y: auto;
+    }
+</style>

src/routes/code/[slug]/+page.server.ts

@@ -0,0 +1,10 @@
+import { POST_DIR } from '$env/static/private';
+import fs from 'node:fs';
+
+export async function load({params}) {
+    const code =  params.slug.replace(/\.html$/, "");
+
+    const html = fs.readFileSync(`${POST_DIR}/Codes/${code}.html`, 'utf-8');
+
+    return {html}
+}

src/routes/code/[slug]/+page.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    const { data } = $props();
+</script>
+
+<div>{@html data.html}</div>

src/routes/code/[slug]/app.css

@@ -0,0 +1,35 @@
+:root {
+    height: 100%;
+    background-color: var(--white-black);
+
+    --back-color: white;  /*rgb(240 238 245)*/
+    --head-color: rgb(245, 245, 245);  /*rgb(244 243 250)*/
+    --divider-color: rgb(220 220 220);
+    --border-color: #bbb;
+    --shadow-color: #0009;
+    --white-black: #fff;
+    --font-color: #222;
+    
+    @media(prefers-color-scheme: dark){
+        --back-color: rgb(43 48 55);
+        --head-color: rgb(58 60 66);
+        --divider-color: #222;
+        --border-color: #555;
+        --shadow-color: #000;
+        --white-black: #000;
+        --font-color: #f5f5f5;
+    }
+}
+
+body {
+    margin: 0;
+    height: 100%;
+    background-color: var(--white-black);
+    color: var(--font-color);
+}
+
+body:fullscreen {
+    padding: 10%;
+    background-image: url(https://moris.day/files/img/BigSur.avif);
+    background-size: cover;
+}