Compare commits
30 Commits
post/serie
...
main
| Author | SHA1 | Date |
|---|---|---|
 Leni Aniva
|
cc44b37a35 | |
|
Leni Aniva
|
1a3b0a2e05
|
|
|
Leni Aniva
|
795e10938e | |
|
Leni Aniva
|
50555eb10c
|
|
|
Leni Aniva
|
ed2f417999
|
|
|
Leni Aniva
|
afc3e2d2fb
|
|
|
Leni Aniva
|
24c7b137df
|
|
|
Leni Aniva
|
f014ebd1cd
|
|
|
Leni Aniva
|
6024a151b2
|
|
|
Leni Aniva
|
3f71107a0a
|
|
|
Leni Aniva
|
f5843184d5
|
|
|
Leni Aniva
|
2d1e5d20fb
|
|
|
Leni Aniva
|
8d0fb521d4
|
|
|
Leni Aniva
|
33ebd62026
|
|
|
Leni Aniva
|
23f715e6ac
|
|
|
Leni Aniva
|
83666fc504
|
|
|
Leni Aniva
|
045311168d | |
|
Leni Aniva
|
2b11a969fc
|
|
|
Leni Aniva
|
4b9a131d35
|
|
|
Leni Aniva
|
c04e04667c
|
|
|
Leni Aniva
|
7cf3e31b22 | |
|
Leni Aniva
|
c2362e26ef | |
|
Leni Aniva
|
442e589874
|
|
|
Leni Aniva
|
f8bdcb811a
|
|
|
Leni Aniva
|
1d7be8373f
|
|
|
Leni Aniva
|
7daa6eb70d | |
|
Leni Aniva
|
6f5933d902
|
|
|
Leni Aniva
|
46ca660a13
|
|
|
Leni Aniva
|
e8e52588e4
|
|
|
Leni Aniva
|
482f7e59a7
|
13
README.md
13
README.md
|
|
@ -7,10 +7,10 @@ A blog framework
|
|||
To create the production version,
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
pnpm run build
|
||||
```
|
||||
|
||||
You can preview the production build with `npm run preview`.
|
||||
You can preview the production build with `pnpm run dev --open`.
|
||||
|
||||
### Content
|
||||
|
||||
|
|
@ -35,24 +35,23 @@ image.
|
|||
|
||||
Install [pre-commit](https://pre-commit.com/).
|
||||
|
||||
Install dependencies with `npm install` (or `pnpm install` or `yarn`). Then
|
||||
start the dev server with
|
||||
Install dependencies with `pnpm install`. Then start the dev server with
|
||||
|
||||
```bash
|
||||
npm run dev [-- --open]
|
||||
pnpm run dev [-- --open]
|
||||
```
|
||||
|
||||
### Formatting
|
||||
|
||||
``` bash
|
||||
npx eslint
|
||||
pnpx eslint
|
||||
```
|
||||
|
||||
### Testing
|
||||
|
||||
To run tests
|
||||
``` bash
|
||||
npx playwright test
|
||||
pnpx playwright test
|
||||
```
|
||||
|
||||
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",
|
||||
"version": "0.0.2",
|
||||
"version": "0.0.4",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
|
|
@ -16,47 +16,47 @@
|
|||
"prepare": "svelte-kit sync"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.11.1",
|
||||
"@playwright/test": "^1.40.0",
|
||||
"@sveltejs/adapter-auto": "^3.0.0",
|
||||
"@sveltejs/adapter-static": "^3.0.5",
|
||||
"@sveltejs/kit": "^2.0.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
||||
"@tailwindcss/typography": "^0.5.15",
|
||||
"@types/eslint": "^9.6.0",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"eslint": "^9.11.1",
|
||||
"@eslint/js": "^9.29.0",
|
||||
"@playwright/test": "^1.53.1",
|
||||
"@sveltejs/adapter-auto": "^3.3.1",
|
||||
"@sveltejs/adapter-static": "^3.0.8",
|
||||
"@sveltejs/kit": "^2.22.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^5.1.0",
|
||||
"@tailwindcss/typography": "^0.5.16",
|
||||
"@types/eslint": "^9.6.1",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"eslint": "^9.29.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-plugin-svelte": "^2.36.0",
|
||||
"globals": "^15.9.0",
|
||||
"mdsvex": "^0.12.3",
|
||||
"eslint-plugin-svelte": "^2.46.1",
|
||||
"globals": "^15.15.0",
|
||||
"mdsvex": "^0.12.6",
|
||||
"mdsvex-relative-images": "^1.0.3",
|
||||
"prettier": "^3.1.1",
|
||||
"prettier-plugin-svelte": "^3.1.2",
|
||||
"prettier-plugin-tailwindcss": "^0.6.5",
|
||||
"prettier": "^3.5.3",
|
||||
"prettier-plugin-svelte": "^3.4.0",
|
||||
"prettier-plugin-tailwindcss": "^0.6.13",
|
||||
"rehype-katex-svelte": "^1.2.0",
|
||||
"remark-math": "^3.0.0",
|
||||
"svelte": "^4.2.7",
|
||||
"remark-math": "^3.0.1",
|
||||
"svelte": "^5.34.7",
|
||||
"svelte-check": "^4.0.0",
|
||||
"tailwindcss": "^3.4.9",
|
||||
"typescript": "5.5",
|
||||
"typescript-eslint": "^8.7.0",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "~5.5.4",
|
||||
"typescript-eslint": "^8.34.1",
|
||||
"unist-util-visit": "^5.0.0",
|
||||
"vite": "^5.0.3",
|
||||
"vitest": "^2.0.0"
|
||||
"vite": "^6.0.0",
|
||||
"vitest": "^2.1.9"
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "^6.6.0",
|
||||
"bits-ui": "^0.21.13",
|
||||
"@fortawesome/fontawesome-free": "^6.7.2",
|
||||
"bits-ui": "^2.8.0",
|
||||
"clsx": "^2.1.1",
|
||||
"lucide-svelte": "^0.451.0",
|
||||
"rehype-slug": "^6.0.0",
|
||||
"remark-github-blockquote-alert": "^1.2.1",
|
||||
"remark-github-blockquote-alert": "^1.3.1",
|
||||
"remark-toc": "^9.0.0",
|
||||
"shiki": "^1.22.0",
|
||||
"shiki": "^1.29.2",
|
||||
"svelte-radix": "^1.1.1",
|
||||
"tailwind-merge": "^2.5.2",
|
||||
"tailwind-merge": "^2.6.0",
|
||||
"tailwind-variants": "^0.2.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -126,7 +126,7 @@ a.disabled-link {
|
|||
color: rgb(128,128,128);
|
||||
pointer-events: none;
|
||||
}
|
||||
a:not(.icon) {
|
||||
main a:not(.icon) {
|
||||
position: relative;
|
||||
text-decoration: inherit;
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%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">
|
||||
<meta name="theme-color" content="#028760" />
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover" class="font-serif">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: Research
|
||||
---
|
||||
# Research
|
||||
|
||||
I teach Lean!
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 149 KiB |
|
|
@ -37,9 +37,7 @@
|
|||
<p class="text-gray-200 flex justify-center">
|
||||
{#each (post?.tags ?? []) as tag, i}
|
||||
{#if i > 0}
|
||||
<div class="separator text-sm">
|
||||
<DividerVertical />
|
||||
</div>
|
||||
{/if}
|
||||
<a href="/tag/{tag}">{tag}</a>
|
||||
{/each}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,10 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<button class="nav-link" on:click={toggleTheme} aria-label="Toggle Theme">
|
||||
<button
|
||||
id="theme-switch"
|
||||
class="nav-link"
|
||||
on:click={toggleTheme} aria-label="Toggle Theme">
|
||||
{#if $theme === "tokiwa"}
|
||||
<Sun />
|
||||
{:else}
|
||||
|
|
@ -30,6 +33,7 @@
|
|||
|
||||
<style>
|
||||
button {
|
||||
flex-shrink: 0;
|
||||
padding: 0;
|
||||
font-weight: inherit;
|
||||
background: none;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 340 KiB |
|
|
@ -1,8 +1,8 @@
|
|||
import siteMetadata from '$content/metadata.json';
|
||||
|
||||
export const routes: { route: string, name: string, disabled?: boolean }[] = [
|
||||
{ route: "/", name: "Home" },
|
||||
{ route: "/post", name: "Blog" },
|
||||
{ route: "/tag", name: "Tags" },
|
||||
{ route: "/gallery", name: "Gallery", disabled: true },
|
||||
].concat(siteMetadata?.extra || []);
|
||||
{ route: "/research", name: "Research" },
|
||||
{ route: "/archives", name: "Archives" },
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { writable } from 'svelte/store'
|
||||
import { writable, get } from 'svelte/store'
|
||||
import { browser } from "$app/environment"
|
||||
|
||||
type Theme = 'tokiwa' | 'star'
|
||||
|
|
@ -11,3 +11,11 @@ export const theme = writable(userTheme ?? 'tokiwa')
|
|||
export function setTheme(newTheme: Theme) {
|
||||
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,6 +1,7 @@
|
|||
<script lang="ts">
|
||||
import '../app.css';
|
||||
import { page } from '$app/stores';
|
||||
import { name } from '$content/metadata.json';
|
||||
import Footer from "./Footer.svelte";
|
||||
import Navbar from "./Navbar.svelte";
|
||||
import PageTransition from "./PageTransition.svelte";
|
||||
|
|
@ -11,7 +12,8 @@
|
|||
<!-- Homepage has its own navbar with animations -->
|
||||
{#if $page.url.pathname != "/"}
|
||||
<div id="layout">
|
||||
<div id="navbar">
|
||||
<div id="nav">
|
||||
<p id="bio-name">{name}</p>
|
||||
<Navbar />
|
||||
<slot name="header" />
|
||||
</div>
|
||||
|
|
@ -31,6 +33,12 @@
|
|||
{/if}
|
||||
|
||||
<style>
|
||||
#bio-name {
|
||||
font-family: serif;
|
||||
font-size: 3rem;
|
||||
font-weight: normal;
|
||||
color: var(--name);
|
||||
}
|
||||
#layout {
|
||||
max-width: max(80vw, 100vh);
|
||||
margin-left: auto;
|
||||
|
|
@ -58,7 +66,7 @@
|
|||
width: min(100vw, max(50vw, 100vh));
|
||||
grid-area: content;
|
||||
}
|
||||
#navbar {
|
||||
#nav {
|
||||
align-self: right;
|
||||
padding-left: 10px;
|
||||
grid-area: nav;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,39 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { derived } from 'svelte/store'
|
||||
import { routes } from "$lib/sitemap.ts"
|
||||
import { Separator } from "$lib/components/ui/separator/index.js";
|
||||
import { theme, setTheme, getThemeObject } from '$lib/theme'
|
||||
import { Rss } from "lucide-svelte";
|
||||
import ThemeSwitch from "$lib/components/ThemeSwitch.svelte"
|
||||
import Cover from "$lib/Cover.svelte"
|
||||
let scrollPosition: number = .5;
|
||||
let scrollHeight: number = 1;
|
||||
let progress: number = 0;
|
||||
let progress: number
|
||||
= 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() {
|
||||
if (scrollHeight > 1) {
|
||||
progress = Math.max(0, Math.min(1, scrollPosition / scrollHeight));
|
||||
|
|
@ -45,34 +72,29 @@
|
|||
</svelte:head>
|
||||
|
||||
<div
|
||||
id="background"
|
||||
style="opacity: {1 - progress}; background-image: url('{metadata.frontCover}')"
|
||||
id="cover"
|
||||
style="opacity: {1 - progress}; --grid-line: #999; --grid-line-dark: #333; --grid-cell: #707078"
|
||||
>
|
||||
</div>
|
||||
<div id="cover-image">
|
||||
<Cover />
|
||||
</div>
|
||||
|
||||
<div id="front">
|
||||
<div id="floater">
|
||||
<p class="text-2xl floater-elem" style="color: #888">{metadata.frontDescription}</p>
|
||||
<div
|
||||
class="floater-elem"
|
||||
style="padding-bottom: {(1 - progress) * 50}vh"
|
||||
>
|
||||
<div id="navbar" class="h-5 items-center space-x-4 text-sm">
|
||||
<a class="nav-link" href="#bio">Bio</a>
|
||||
<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
|
||||
{#each routes as item}
|
||||
{#if item.route !== "/"}
|
||||
<a
|
||||
href={item.route}
|
||||
class="nav-link"
|
||||
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 id="navbar">
|
||||
<div>
|
||||
<p class="text-2xl" style="color: #888; z-index: 2">{metadata.frontDescription}</p>
|
||||
</div>
|
||||
<div id="link-container" class="h-5 items-center">
|
||||
<a class="nav-link" href="#bio">Bio</a>
|
||||
{#each routes as item}
|
||||
{#if item.route !== "/"}
|
||||
<a
|
||||
href={item.route}
|
||||
class="nav-link"
|
||||
class:disabled-link={item.disabled}>{item.name}</a>
|
||||
{/if}
|
||||
{/each}
|
||||
<a class="icon nav-link" href="/rss.xml"><Rss /></a>
|
||||
<ThemeSwitch />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -85,7 +107,7 @@
|
|||
<p id="bio-name">{name}</p>
|
||||
<div class="w-100">
|
||||
{#each iconLinks as [cl, link]}
|
||||
<a class="icon m-1" href={link}><i class="fa-xl {cl}"></i></a>
|
||||
<a class="icon m-1" href={link} aria-label={cl}><i class="fa-xl {cl}"></i></a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -107,40 +129,130 @@
|
|||
/>
|
||||
|
||||
<style>
|
||||
#background {
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
z-index: -10;
|
||||
position: fixed;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
#cover {
|
||||
background:
|
||||
repeating-linear-gradient(128.6deg, transparent, var(--grid-line) 1px, var(--grid-line) 2px, transparent 1px, transparent 55px),
|
||||
repeating-linear-gradient(11deg, transparent, var(--grid-line) 1px, var(--grid-line) 2px, transparent 1px, transparent 40px),
|
||||
var(--grid-cell)
|
||||
;
|
||||
/*
|
||||
position: absolute;
|
||||
background-size: contain;
|
||||
background-position: center center; */
|
||||
overscroll-behaviour: none;
|
||||
}
|
||||
#front {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
#floater {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-top: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
flex-direction: column;
|
||||
visibility: visible;
|
||||
}
|
||||
:global(.dark #cover) {
|
||||
background:
|
||||
repeating-linear-gradient(128.6deg, transparent, var(--grid-line-dark) 1px, var(--grid-line-dark) 2px, transparent 1px, transparent 55px),
|
||||
repeating-linear-gradient(11deg, transparent, var(--grid-line-dark) 1px, var(--grid-line-dark) 2px, transparent 1px, transparent 40px),
|
||||
black
|
||||
;
|
||||
}
|
||||
: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 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
padding-top: 30%;
|
||||
flex-direction: column;
|
||||
div {
|
||||
padding-left: 5%;
|
||||
}
|
||||
}
|
||||
.floater-elem {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
#link-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
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 {
|
||||
width: 100%;
|
||||
@apply bg-background;
|
||||
|
|
|
|||
|
|
@ -1,43 +1,95 @@
|
|||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import { routes } from "$lib/sitemap.ts"
|
||||
import { name } from '$content/metadata.json';
|
||||
import ThemeSwitch from "$lib/components/ThemeSwitch.svelte"
|
||||
import { Rss } from "lucide-svelte";
|
||||
import { Rss, Menu } from "lucide-svelte";
|
||||
|
||||
function isCurrentLink(pathname, route) {
|
||||
return route != "/" && pathname.startsWith(route)
|
||||
|| 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>
|
||||
|
||||
<div id="navbar" class="h-5 space-x-4">
|
||||
<p id="bio-name">{name}</p>
|
||||
{#each routes as item}
|
||||
<a
|
||||
class="nav-link"
|
||||
class:disabled-link={item.disabled}
|
||||
class:current-link={isCurrentLink($page.url.pathname, item.route)}
|
||||
href={item.route}>{item.name}</a>
|
||||
{/each}
|
||||
<a class="nav-link icon" href="/rss.xml"><Rss /></a>
|
||||
<div><ThemeSwitch /></div>
|
||||
</div>
|
||||
<nav
|
||||
id="navbar"
|
||||
class="h-5 space-x-4"
|
||||
class:dropdown-opened={showDropdown}>
|
||||
<div
|
||||
class="link-container"
|
||||
role="button"
|
||||
tabindex={0}
|
||||
on:keydown={onKeyDown}
|
||||
on:click={() => { showDropdown = false; }}
|
||||
>
|
||||
{#each routes as item}
|
||||
<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>
|
||||
#bio-name {
|
||||
font-family: serif;
|
||||
font-size: 3rem;
|
||||
font-weight: normal;
|
||||
color: var(--name);
|
||||
}
|
||||
#navbar {
|
||||
.link-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
justify-content: between;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
#dropdown-toggle {
|
||||
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 {
|
||||
display: inline-block;
|
||||
white-space: pre-wrap;
|
||||
|
|
@ -45,5 +97,14 @@
|
|||
#navbar .nav-link {
|
||||
display: inline-block;
|
||||
}
|
||||
#dropdown-toggle {
|
||||
display: initial;
|
||||
z-index: 5;
|
||||
}
|
||||
.dropdown-opened > .link-container {
|
||||
opacity: 1;
|
||||
z-index: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
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,10 +1,10 @@
|
|||
<script lang="ts">
|
||||
import type { PageData } from './$types';
|
||||
export let data: PageData;
|
||||
const { slug, metadata, Content } = data;
|
||||
const { metadata, Content } = data;
|
||||
import siteMetadata from '$content/metadata.json';
|
||||
|
||||
const title = metadata?.title || (slug[0].toUpperCase() + slug.slice(1));
|
||||
const title = metadata?.title
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
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,
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<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 />
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
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,
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
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