aniva/Chrysoblog
aniva
/
Chrysoblog
1
1
Fork 0
Code Issues 8 Pull Requests 2 Packages Projects Releases Wiki Activity

chore: Update svelte, add new cover svg

This commit is contained in:
Leni Aniva 2025-06-21 23:43:26 -07:00
parent 2b11a969fc
commit 83666fc504
Signed by: aniva
GPG Key ID: D5F96287843E8DFB
6 changed files with 8432 additions and 5973 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
README.md
View File

@ -7,10 +7,10 @@ A blog framework
To create the production version, To create the production version,
```bash ```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 ### Content
@ -35,24 +35,23 @@ image.
Install [pre-commit](https://pre-commit.com/). Install [pre-commit](https://pre-commit.com/).
Install dependencies with `npm install` (or `pnpm install` or `yarn`). Then Install dependencies with `pnpm install`. Then start the dev server with
start the dev server with
```bash ```bash
npm run dev [-- --open] pnpm run dev [-- --open]
``` ```
### Formatting ### Formatting
``` bash ``` bash
npx eslint pnpx eslint
``` ```
### Testing ### Testing
To run tests To run tests
``` bash ``` bash
npx playwright test pnpx 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
View File

File diff suppressed because it is too large Load Diff

56
package.json
View File

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

4258
pnpm-lock.yaml Normal file
View File

File diff suppressed because it is too large Load Diff

4092
src/lib/Cover.svelte Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 224 KiB

59
src/routes/+page.svelte
View File

@ -1,14 +1,22 @@
<script lang="ts"> <script lang="ts">
import { onMount } from 'svelte';
import { derived } from 'svelte/store' 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, getThemeObject } from '$lib/theme' import { theme, 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 = 0; let progress: number = 0;
let button_blog;
onMount(() => {
let entity_blog = document.getElementById("visor");
entity_blog.appendChild(button_blog);
});
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));
@ -51,12 +59,15 @@
<title>{metadata.name}</title> <title>{metadata.name}</title>
</svelte:head> </svelte:head>
<div <div class="cover" style="opacity: {1 - progress}">
id="background" <Cover />
style="opacity: {1 - progress}; background-image: url('{$frontCover}')" <a
> bind:this={button_blog}
href="/post"
class="entity-nav-link nav-link"><text style="font: 14pt">Placeholder</text></a>
</div> </div>
<!--
<div id="front"> <div id="front">
<div id="floater"> <div id="floater">
<p class="text-2xl floater-elem" style="color: #888">{metadata.frontDescription}</p> <p class="text-2xl floater-elem" style="color: #888">{metadata.frontDescription}</p>
@ -83,7 +94,7 @@
</div> </div>
</div> </div>
</div> </div>
-->
<main> <main>
<div id="bio"> <div id="bio">
<div class="p-1"> <div class="p-1">
@ -114,16 +125,42 @@
/> />
<style> <style>
#background { .cover {
background-size: cover; background:
background-repeat: no-repeat; /* no-repeat url("/cover.svg"), */
background-position: center center; repeating-linear-gradient(129deg, transparent, #aaa 1px, #aaa 2px, transparent 1px, transparent 60px),
z-index: -10; repeating-linear-gradient(11deg, transparent, #aaa 1px, #aaa 2px, transparent 1px, transparent 40px),
#707078
;
/*
position: absolute; position: absolute;
background-size: contain;
background-position: center center; */
z-index: -10;
min-width: 100svw; min-width: 100svw;
height: 100svh; min-height: 100svh;
overscroll-behaviour: none; overscroll-behaviour: none;
} }
:global(.cover > svg) {
max-width: 100svw;
max-height: 100svh;
z-index: -10;
width: 100%;
height: 100%;
}
:global(svg > .entity) {
filter: contrast(50%);
&:hover,
&:focus {
filter: contrast(100%);
}
}
.entity-nav-link {
display: block;
height: 20px;
width: 50px;
z-index: 10;
}
#front { #front {
height: 100svh; height: 100svh;
display: flex; display: flex;