Compare commits

..

No commits in common. "main" and "post/series" have entirely different histories.

22 changed files with 6062 additions and 9932 deletions

View File

@ -7,10 +7,10 @@ A blog framework
To create the production version, To create the production version,
```bash ```bash
pnpm run build npm run build
``` ```
You can preview the production build with `pnpm run dev --open`. You can preview the production build with `npm run preview`.
### Content ### Content
@ -35,23 +35,24 @@ image.
Install [pre-commit](https://pre-commit.com/). Install [pre-commit](https://pre-commit.com/).
Install dependencies with `pnpm install`. Then start the dev server with Install dependencies with `npm install` (or `pnpm install` or `yarn`). Then
start the dev server with
```bash ```bash
pnpm run dev [-- --open] npm run dev [-- --open]
``` ```
### Formatting ### Formatting
``` bash ``` bash
pnpx eslint npx eslint
``` ```
### Testing ### Testing
To run tests To run tests
``` bash ``` bash
pnpx playwright test npx playwright test
``` ```
All tests must have the suffix `.spec.[jt]s`. Be cautious while updating All tests must have the suffix `.spec.[jt]s`. Be cautious while updating

5927
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -1,6 +1,6 @@
{ {
"name": "chrysoblog", "name": "chrysoblog",
"version": "0.0.4", "version": "0.0.2",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "vite dev", "dev": "vite dev",
@ -16,47 +16,47 @@
"prepare": "svelte-kit sync" "prepare": "svelte-kit sync"
}, },
"devDependencies": { "devDependencies": {
"@eslint/js": "^9.29.0", "@eslint/js": "^9.11.1",
"@playwright/test": "^1.53.1", "@playwright/test": "^1.40.0",
"@sveltejs/adapter-auto": "^3.3.1", "@sveltejs/adapter-auto": "^3.0.0",
"@sveltejs/adapter-static": "^3.0.8", "@sveltejs/adapter-static": "^3.0.5",
"@sveltejs/kit": "^2.22.0", "@sveltejs/kit": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^5.1.0", "@sveltejs/vite-plugin-svelte": "^3.0.0",
"@tailwindcss/typography": "^0.5.16", "@tailwindcss/typography": "^0.5.15",
"@types/eslint": "^9.6.1", "@types/eslint": "^9.6.0",
"autoprefixer": "^10.4.21", "autoprefixer": "^10.4.20",
"eslint": "^9.29.0", "eslint": "^9.11.1",
"eslint-config-prettier": "^9.1.0", "eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.46.1", "eslint-plugin-svelte": "^2.36.0",
"globals": "^15.15.0", "globals": "^15.9.0",
"mdsvex": "^0.12.6", "mdsvex": "^0.12.3",
"mdsvex-relative-images": "^1.0.3", "mdsvex-relative-images": "^1.0.3",
"prettier": "^3.5.3", "prettier": "^3.1.1",
"prettier-plugin-svelte": "^3.4.0", "prettier-plugin-svelte": "^3.1.2",
"prettier-plugin-tailwindcss": "^0.6.13", "prettier-plugin-tailwindcss": "^0.6.5",
"rehype-katex-svelte": "^1.2.0", "rehype-katex-svelte": "^1.2.0",
"remark-math": "^3.0.1", "remark-math": "^3.0.0",
"svelte": "^5.34.7", "svelte": "^4.2.7",
"svelte-check": "^4.0.0", "svelte-check": "^4.0.0",
"tailwindcss": "^3.4.17", "tailwindcss": "^3.4.9",
"typescript": "~5.5.4", "typescript": "5.5",
"typescript-eslint": "^8.34.1", "typescript-eslint": "^8.7.0",
"unist-util-visit": "^5.0.0", "unist-util-visit": "^5.0.0",
"vite": "^6.0.0", "vite": "^5.0.3",
"vitest": "^2.1.9" "vitest": "^2.0.0"
}, },
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-free": "^6.7.2", "@fortawesome/fontawesome-free": "^6.6.0",
"bits-ui": "^2.8.0", "bits-ui": "^0.21.13",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"lucide-svelte": "^0.451.0", "lucide-svelte": "^0.451.0",
"rehype-slug": "^6.0.0", "rehype-slug": "^6.0.0",
"remark-github-blockquote-alert": "^1.3.1", "remark-github-blockquote-alert": "^1.2.1",
"remark-toc": "^9.0.0", "remark-toc": "^9.0.0",
"shiki": "^1.29.2", "shiki": "^1.22.0",
"svelte-radix": "^1.1.1", "svelte-radix": "^1.1.1",
"tailwind-merge": "^2.6.0", "tailwind-merge": "^2.5.2",
"tailwind-variants": "^0.2.1" "tailwind-variants": "^0.2.1"
} }
} }

File diff suppressed because it is too large Load Diff

View File

@ -126,7 +126,7 @@ a.disabled-link {
color: rgb(128,128,128); color: rgb(128,128,128);
pointer-events: none; pointer-events: none;
} }
main a:not(.icon) { a:not(.icon) {
position: relative; position: relative;
text-decoration: inherit; text-decoration: inherit;

View File

@ -6,7 +6,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head% %sveltekit.head%
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
<meta name="theme-color" content="#028760" />
</head> </head>
<body data-sveltekit-preload-data="hover" class="font-serif"> <body data-sveltekit-preload-data="hover" class="font-serif">
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>

View File

@ -1,6 +0,0 @@
---
title: Research
---
# Research
I teach Lean!

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 149 KiB

View File

@ -37,7 +37,9 @@
<p class="text-gray-200 flex justify-center"> <p class="text-gray-200 flex justify-center">
{#each (post?.tags ?? []) as tag, i} {#each (post?.tags ?? []) as tag, i}
{#if i > 0} {#if i > 0}
<div class="separator text-sm">
<DividerVertical /> <DividerVertical />
</div>
{/if} {/if}
<a href="/tag/{tag}">{tag}</a> <a href="/tag/{tag}">{tag}</a>
{/each} {/each}

View File

@ -20,10 +20,7 @@
} }
</script> </script>
<button <button class="nav-link" on:click={toggleTheme} aria-label="Toggle Theme">
id="theme-switch"
class="nav-link"
on:click={toggleTheme} aria-label="Toggle Theme">
{#if $theme === "tokiwa"} {#if $theme === "tokiwa"}
<Sun /> <Sun />
{:else} {:else}
@ -33,7 +30,6 @@
<style> <style>
button { button {
flex-shrink: 0;
padding: 0; padding: 0;
font-weight: inherit; font-weight: inherit;
background: none; background: none;

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 340 KiB

View File

@ -1,8 +1,8 @@
import siteMetadata from '$content/metadata.json';
export const routes: { route: string, name: string, disabled?: boolean }[] = [ export const routes: { route: string, name: string, disabled?: boolean }[] = [
{ route: "/", name: "Home" }, { route: "/", name: "Home" },
{ route: "/post", name: "Blog" }, { route: "/post", name: "Blog" },
{ route: "/tag", name: "Tags" }, { route: "/tag", name: "Tags" },
{ route: "/gallery", name: "Gallery", disabled: true }, { route: "/gallery", name: "Gallery", disabled: true },
{ route: "/research", name: "Research" }, ].concat(siteMetadata?.extra || []);
{ route: "/archives", name: "Archives" },
]

View File

@ -1,4 +1,4 @@
import { writable, get } from 'svelte/store' import { writable } from 'svelte/store'
import { browser } from "$app/environment" import { browser } from "$app/environment"
type Theme = 'tokiwa' | 'star' type Theme = 'tokiwa' | 'star'
@ -11,11 +11,3 @@ export const theme = writable(userTheme ?? 'tokiwa')
export function setTheme(newTheme: Theme) { export function setTheme(newTheme: Theme) {
theme.set(newTheme) theme.set(newTheme)
} }
export function getThemeObject(key: string, obj: { [key in Theme]: string } | string) {
if (typeof obj === 'object') {
return obj[key];
} else {
return obj;
}
}

View File

@ -1,7 +1,6 @@
<script lang="ts"> <script lang="ts">
import '../app.css'; import '../app.css';
import { page } from '$app/stores'; import { page } from '$app/stores';
import { name } from '$content/metadata.json';
import Footer from "./Footer.svelte"; import Footer from "./Footer.svelte";
import Navbar from "./Navbar.svelte"; import Navbar from "./Navbar.svelte";
import PageTransition from "./PageTransition.svelte"; import PageTransition from "./PageTransition.svelte";
@ -12,8 +11,7 @@
<!-- Homepage has its own navbar with animations --> <!-- Homepage has its own navbar with animations -->
{#if $page.url.pathname != "/"} {#if $page.url.pathname != "/"}
<div id="layout"> <div id="layout">
<div id="nav"> <div id="navbar">
<p id="bio-name">{name}</p>
<Navbar /> <Navbar />
<slot name="header" /> <slot name="header" />
</div> </div>
@ -33,12 +31,6 @@
{/if} {/if}
<style> <style>
#bio-name {
font-family: serif;
font-size: 3rem;
font-weight: normal;
color: var(--name);
}
#layout { #layout {
max-width: max(80vw, 100vh); max-width: max(80vw, 100vh);
margin-left: auto; margin-left: auto;
@ -66,7 +58,7 @@
width: min(100vw, max(50vw, 100vh)); width: min(100vw, max(50vw, 100vh));
grid-area: content; grid-area: content;
} }
#nav { #navbar {
align-self: right; align-self: right;
padding-left: 10px; padding-left: 10px;
grid-area: nav; grid-area: nav;

View File

@ -1,39 +1,12 @@
<script lang="ts"> <script lang="ts">
import { onMount } from 'svelte';
import { derived } from 'svelte/store'
import { routes } from "$lib/sitemap.ts" import { routes } from "$lib/sitemap.ts"
import { Separator } from "$lib/components/ui/separator/index.js"; import { Separator } from "$lib/components/ui/separator/index.js";
import { theme, setTheme, getThemeObject } from '$lib/theme'
import { Rss } from "lucide-svelte"; import { Rss } from "lucide-svelte";
import ThemeSwitch from "$lib/components/ThemeSwitch.svelte" import ThemeSwitch from "$lib/components/ThemeSwitch.svelte"
import Cover from "$lib/Cover.svelte"
let scrollPosition: number = .5; let scrollPosition: number = .5;
let scrollHeight: number = 1; let scrollHeight: number = 1;
let progress: number let progress: number = 0;
= 0.0;
let button_blog;
function toggleTheme() {
theme.update((currentTheme) => {
const newTheme = currentTheme === 'tokiwa' ? 'star' : 'tokiwa'
document.documentElement.setAttribute('color-scheme', newTheme)
localStorage.setItem('color-scheme', newTheme)
if (newTheme === "tokiwa") {
document.documentElement.classList.remove('dark');
} else {
document.documentElement.classList.add('dark');
}
setTheme(newTheme);
return newTheme
})
}
onMount(() => {
let entity_switch = document.getElementById("switch");
entity_switch.addEventListener("click", toggleTheme);
});
function onScroll() { function onScroll() {
if (scrollHeight > 1) { if (scrollHeight > 1) {
progress = Math.max(0, Math.min(1, scrollPosition / scrollHeight)); progress = Math.max(0, Math.min(1, scrollPosition / scrollHeight));
@ -72,29 +45,34 @@
</svelte:head> </svelte:head>
<div <div
id="cover" id="background"
style="opacity: {1 - progress}; --grid-line: #999; --grid-line-dark: #333; --grid-cell: #707078" style="opacity: {1 - progress}; background-image: url('{metadata.frontCover}')"
> >
<div id="cover-image"> </div>
<Cover />
</div>
<div id="navbar"> <div id="front">
<div> <div id="floater">
<p class="text-2xl" style="color: #888; z-index: 2">{metadata.frontDescription}</p> <p class="text-2xl floater-elem" style="color: #888">{metadata.frontDescription}</p>
</div> <div
<div id="link-container" class="h-5 items-center"> class="floater-elem"
<a class="nav-link" href="#bio">Bio</a> style="padding-bottom: {(1 - progress) * 50}vh"
{#each routes as item} >
{#if item.route !== "/"} <div id="navbar" class="h-5 items-center space-x-4 text-sm">
<a <a class="nav-link" href="#bio">Bio</a>
href={item.route} <Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
class="nav-link" {#each routes as item}
class:disabled-link={item.disabled}>{item.name}</a> {#if item.route !== "/"}
{/if} <a
{/each} href={item.route}
<a class="icon nav-link" href="/rss.xml"><Rss /></a> class="nav-link"
<ThemeSwitch /> class:disabled-link={item.disabled}>{item.name}</a>
<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
{/if}
{/each}
<a class="icon nav-link" href="/rss.xml"><Rss /></a>
<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
<ThemeSwitch />
</div>
</div> </div>
</div> </div>
</div> </div>
@ -107,7 +85,7 @@
<p id="bio-name">{name}</p> <p id="bio-name">{name}</p>
<div class="w-100"> <div class="w-100">
{#each iconLinks as [cl, link]} {#each iconLinks as [cl, link]}
<a class="icon m-1" href={link} aria-label={cl}><i class="fa-xl {cl}"></i></a> <a class="icon m-1" href={link}><i class="fa-xl {cl}"></i></a>
{/each} {/each}
</div> </div>
</div> </div>
@ -129,130 +107,40 @@
/> />
<style> <style>
#cover { #background {
background: background-attachment: fixed;
repeating-linear-gradient(128.6deg, transparent, var(--grid-line) 1px, var(--grid-line) 2px, transparent 1px, transparent 55px), background-size: cover;
repeating-linear-gradient(11deg, transparent, var(--grid-line) 1px, var(--grid-line) 2px, transparent 1px, transparent 40px), background-repeat: no-repeat;
var(--grid-cell) background-position: center center;
; z-index: -10;
/* position: fixed;
position: absolute; min-width: 100%;
background-size: contain; min-height: 100%;
background-position: center center; */
overscroll-behaviour: none; overscroll-behaviour: none;
}
#front {
height: 100vh;
display: flex; display: flex;
justify-content: center;
flex-direction: column; flex-direction: column;
visibility: visible; overscroll-behavior: none;
} }
:global(.dark #cover) { #floater {
background: display: flex;
repeating-linear-gradient(128.6deg, transparent, var(--grid-line-dark) 1px, var(--grid-line-dark) 2px, transparent 1px, transparent 55px), flex-direction: column;
repeating-linear-gradient(11deg, transparent, var(--grid-line-dark) 1px, var(--grid-line-dark) 2px, transparent 1px, transparent 40px), justify-content: center;
black margin-top: auto;
; margin-left: auto;
} margin-right: auto;
:global(#cover-image > svg) {
max-width: 100svw;
max-height: 100svh;
width: 100%;
height: 100%;
}
:global(svg a) {
pointer-events: all;
:global(path) {
filter: contrast(50%);
}
:global(.effect) {
visibility: hidden;
}
&:hover,
&:focus {
:global(.effect) {
visibility: visible;
}
:global(path) {
filter: contrast(100%);
}
}
}
:global(.dark .shadow) {
visibility: hidden;
}
:global(svg .shadow) {
pointer-events: none;
}
:global(#switch-right) {
visibility: hidden;
}
:global(#switch-left) {
visibility: visible;
}
:global(.dark #switch-right) {
visibility: visible;
}
:global(.dark #switch-left) {
visibility: hidden;
}
:global(.effect > .glow) {
filter: blur(.3rem);
}
.nav-link {
display: inline-block;
} }
#navbar { #navbar {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding-top: 30%; justify-content: center;
flex-direction: column;
div {
padding-left: 5%;
}
} }
#link-container { .floater-elem {
display: flex; margin-left: auto;
flex-direction: column; margin-right: auto;
align-items: flex-start;
} }
/* mobile */
@media (max-width: 700px) {
#navbar {
visibility: visible;
height: 100svh;
}
#cover {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
#cover-image {
position: absolute;
max-height: 100svh;
max-width: 100svw;
pointer-events: none;
:global(.effect) {
visibility: visible;
}
}
:global(#cover-image a) {
pointer-events: none;
}
:global(svg .entity-label) {
visibility: hidden;
}
}
/* desktop */
@media (min-width: 701px) {
#navbar {
padding-top: 0;
visibility: hidden;
height: 0;
width: 0;
}
}
/* main */
main { main {
width: 100%; width: 100%;
@apply bg-background; @apply bg-background;

View File

@ -1,95 +1,43 @@
<script lang="ts"> <script lang="ts">
import { page } from '$app/stores'; import { page } from '$app/stores';
import { routes } from "$lib/sitemap.ts" import { routes } from "$lib/sitemap.ts"
import { name } from '$content/metadata.json';
import ThemeSwitch from "$lib/components/ThemeSwitch.svelte" import ThemeSwitch from "$lib/components/ThemeSwitch.svelte"
import { Rss, Menu } from "lucide-svelte"; import { Rss } from "lucide-svelte";
function isCurrentLink(pathname, route) { function isCurrentLink(pathname, route) {
return route != "/" && pathname.startsWith(route) return route != "/" && pathname.startsWith(route)
|| route == "/post" && pathname.startsWith("/page"); || route == "/post" && pathname.startsWith("/page");
} }
import { onMount } from 'svelte';
let showDropdown = false;
function onDropdownToggle(event) {
showDropdown = !showDropdown;
}
function onKeyDown(event) {
if (event.key == "Escape") {
showDropdown = !showDropdown;
}
}
</script> </script>
<nav <div id="navbar" class="h-5 space-x-4">
id="navbar" <p id="bio-name">{name}</p>
class="h-5 space-x-4" {#each routes as item}
class:dropdown-opened={showDropdown}> <a
<div class="nav-link"
class="link-container" class:disabled-link={item.disabled}
role="button" class:current-link={isCurrentLink($page.url.pathname, item.route)}
tabindex={0} href={item.route}>{item.name}</a>
on:keydown={onKeyDown} {/each}
on:click={() => { showDropdown = false; }} <a class="nav-link icon" href="/rss.xml"><Rss /></a>
> <div><ThemeSwitch /></div>
{#each routes as item} </div>
<a
class="nav-link"
class:disabled-link={item.disabled}
class:current-link={isCurrentLink($page.url.pathname, item.route)}
on:click={() => { showDropdown = false; }}
href={item.route}>
{item.name}
</a>
{/each}
<a class="nav-link icon" href="/rss.xml"><Rss /></a>
<div><ThemeSwitch /></div>
</div>
<button
id="dropdown-toggle"
aria-hidden="true"
on:click={onDropdownToggle}>
<Menu />
</button>
</nav>
<svelte:window on:keydown={onKeyDown} />
<style> <style>
.link-container { #bio-name {
font-family: serif;
font-size: 3rem;
font-weight: normal;
color: var(--name);
}
#navbar {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: flex-end;
position: sticky; justify-content: between;
top: 0;
} }
#dropdown-toggle { @media (max-width: 700px) {
display: none;
}
/* mobile mode */
@media (max-width: 768px) {
.link-container {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100vh;
justify-content: center;
margin: 0;
padding-left: 5vw;
padding-right: 5vw;
background: hsl(var(--background) / .8);
/* Initial hidden state */
opacity: 0;
transform: translateY(-100%);
transition: transform 0.2s, opacity 0.2s;
}
#navbar { #navbar {
display: inline-block; display: inline-block;
white-space: pre-wrap; white-space: pre-wrap;
@ -97,14 +45,5 @@
#navbar .nav-link { #navbar .nav-link {
display: inline-block; display: inline-block;
} }
#dropdown-toggle {
display: initial;
z-index: 5;
}
.dropdown-opened > .link-container {
opacity: 1;
z-index: 1;
transform: translateY(0);
}
} }
</style> </style>

View File

@ -1,10 +1,10 @@
<script lang="ts"> <script lang="ts">
import type { PageData } from './$types'; import type { PageData } from './$types';
export let data: PageData; export let data: PageData;
const { metadata, Content } = data; const { slug, metadata, Content } = data;
import siteMetadata from '$content/metadata.json'; import siteMetadata from '$content/metadata.json';
const title = metadata?.title const title = metadata?.title || (slug[0].toUpperCase() + slug.slice(1));
</script> </script>
<svelte:head> <svelte:head>

View File

@ -0,0 +1,12 @@
import type { PageLoad } from './$types';
export const load: PageLoad = async ({ params }) => {
const post = await import(`$content/extra/${params.slug}.md`);
const Content = post.default;
return {
slug: params.slug,
metadata: post.metadata,
Content,
};
}

View File

@ -1,14 +0,0 @@
import { error } from '@sveltejs/kit';
import type { PageLoad } from './$types';
export const load: PageLoad = async (_) => {
const post = await import(`$content/extra/archives.md`);
if (!post) throw error(404);
const { name } = post.metadata;
const Content = post.default;
return {
name,
Content,
};
}

View File

@ -1,18 +0,0 @@
<script lang="ts">
import type { PageData } from './$types';
export let data: PageData;
const { metadata, Content } = data;
import siteMetadata from '$content/metadata.json';
const title = metadata?.title
</script>
<svelte:head>
<title>{title} | {siteMetadata.blogName}</title>
</svelte:head>
<hr />
<article class="prose lg:prose-xl dark:prose-dark p-4">
<Content />
</article>
<hr />

View File

@ -1,14 +0,0 @@
import { error } from '@sveltejs/kit';
import type { PageLoad } from './$types';
export const load: PageLoad = async (_) => {
const post = await import(`$content/extra/research.md`);
if (!post) throw error(404);
const { name } = post.metadata;
const Content = post.default;
return {
name,
Content,
};
}

View File

@ -1,34 +0,0 @@
User-agent: GPTBot
Disallow: /
User-agent: ChatGPT-User
Disallow: /
User-agent: Google-Extended
Disallow: /
User-agent: PerplexityBot
Disallow: /
User-agent: Amazonbot
Disallow: /
User-agent: ClaudeBot
Disallow: /
User-agent: Omgilibot
Disallow: /
User-Agent: FacebookBot
Disallow: /
User-Agent: Applebot
Disallow: /
User-agent: anthropic-ai
Disallow: /
User-agent: Bytespider
Disallow: /
User-agent: Claude-Web
Disallow: /
User-agent: Diffbot
Disallow: /
User-agent: ImagesiftBot
Disallow: /
User-agent: Omgilibot
Disallow: /
User-agent: Omgili
Disallow: /
User-agent: YouBot
Disallow: /