Compare commits
12 Commits
main
...
home/cover
| Author | SHA1 | Date |
|---|---|---|
 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
|
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
56
package.json
56
package.json
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
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,14 +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, getThemeObject } from '$lib/theme'
|
||||
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));
|
||||
|
|
@ -40,11 +65,6 @@
|
|||
};
|
||||
const iconLinks: [string, string][] = Object.entries(metadata.links).map(
|
||||
([key, link]) => [iconMap[key], link]);
|
||||
|
||||
const frontCover = derived(
|
||||
theme,
|
||||
($theme) => getThemeObject($theme, metadata.frontCover)
|
||||
)
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
|
|
@ -52,34 +72,29 @@
|
|||
</svelte:head>
|
||||
|
||||
<div
|
||||
id="background"
|
||||
style="opacity: {1 - progress}; background-image: url('{$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>
|
||||
|
|
@ -92,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>
|
||||
|
|
@ -114,39 +129,130 @@
|
|||
/>
|
||||
|
||||
<style>
|
||||
#background {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
z-index: -10;
|
||||
#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;
|
||||
min-width: 100svw;
|
||||
height: 100svh;
|
||||
background-size: contain;
|
||||
background-position: center center; */
|
||||
overscroll-behaviour: none;
|
||||
}
|
||||
#front {
|
||||
height: 100svh;
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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