Compare commits
No commits in common. "main" and "post/series" have entirely different histories.
main
...
post/serie
13
README.md
13
README.md
|
@ -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
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
58
package.json
58
package.json
|
@ -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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
4258
pnpm-lock.yaml
4258
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
@ -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;
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 |
|
@ -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}
|
||||||
|
|
|
@ -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 |
|
@ -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" },
|
|
||||||
]
|
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
|
@ -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,
|
||||||
|
};
|
||||||
|
}
|
|
@ -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,
|
|
||||||
};
|
|
||||||
}
|
|
|
@ -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 />
|
|
|
@ -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,
|
|
||||||
};
|
|
||||||
}
|
|
|
@ -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: /
|
|
Loading…
Reference in New Issue