~repos /website
git clone https://pyrossh.dev/repos/website.git
木 Personal website of pyrossh. Built with astrojs, shiki, vite.
ba4e0e8f
—
pyrossh 7 months ago
improve css
- package.json +45 -45
- src/app.html +24 -19
- src/lib/components/Footer.svelte +12 -2
- src/lib/components/Header.svelte +51 -15
- src/lib/components/Slide.svelte +25 -12
- src/routes/+layout.svelte +34 -5
- src/routes/+page.svelte +14 -17
- src/routes/posts/[slug]/+page.svelte +8 -19
- src/vite-env.d.ts +1 -0
- vite.config.js +4 -4
package.json
CHANGED
|
@@ -1,46 +1,46 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
2
|
+
"name": "website",
|
|
3
|
-
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
-
|
|
4
|
+
"private": true,
|
|
5
|
-
|
|
5
|
+
"type": "module",
|
|
6
|
-
|
|
6
|
+
"scripts": {
|
|
7
|
-
|
|
7
|
+
"dev": "vite dev",
|
|
8
|
-
|
|
8
|
+
"build": "vite build",
|
|
9
|
-
|
|
9
|
+
"preview": "vite preview",
|
|
10
|
-
|
|
10
|
+
"publish": "rm -rf build && npm run build && tar -C build -cvz . > site.tar.gz && hut pages publish -d pyrossh.dev site.tar.gz && rm site.tar.gz",
|
|
11
|
-
|
|
11
|
+
"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
|
|
12
|
-
|
|
12
|
+
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
|
|
13
|
-
|
|
13
|
+
"test": "npm run test:integration && npm run test:unit",
|
|
14
|
-
|
|
14
|
+
"lint": "prettier --check . && eslint .",
|
|
15
|
-
|
|
15
|
+
"fmt": "prettier --write .",
|
|
16
|
-
|
|
16
|
+
"test:integration": "playwright test",
|
|
17
|
-
|
|
17
|
+
"test:unit": "vitest"
|
|
18
|
-
|
|
18
|
+
},
|
|
19
|
-
|
|
19
|
+
"devDependencies": {
|
|
20
|
-
|
|
20
|
+
"@iconify/svelte": "^4.0.2",
|
|
21
|
-
|
|
21
|
+
"@playwright/test": "^1.48.2",
|
|
22
|
-
|
|
22
|
+
"@poppanator/sveltekit-svg": "^5.0.0",
|
|
23
|
-
|
|
23
|
+
"@sveltejs/adapter-static": "^3.0.6",
|
|
24
|
-
|
|
24
|
+
"@sveltejs/enhanced-img": "^0.3.10",
|
|
25
|
-
|
|
25
|
+
"@sveltejs/kit": "^2.7.3",
|
|
26
|
-
|
|
26
|
+
"@sveltejs/vite-plugin-svelte": "^4.0.0",
|
|
27
|
-
|
|
27
|
+
"@sveltejs/vite-plugin-svelte-inspector": "^3.0.1",
|
|
28
|
-
|
|
28
|
+
"@tailwindcss/vite": "^4.0.3",
|
|
29
|
-
|
|
29
|
+
"@types/eslint": "8.56.0",
|
|
30
|
-
|
|
30
|
+
"autoprefixer": "^10.4.19",
|
|
31
|
-
|
|
31
|
+
"eslint": "^8.56.0",
|
|
32
|
-
|
|
32
|
+
"eslint-config-prettier": "^9.1.0",
|
|
33
|
-
|
|
33
|
+
"eslint-plugin-svelte": "^2.45.1",
|
|
34
|
-
|
|
34
|
+
"mdsvex": "^0.12.3",
|
|
35
|
-
|
|
35
|
+
"prettier": "^3.3.3",
|
|
36
|
-
|
|
36
|
+
"prettier-plugin-svelte": "^3.2.7",
|
|
37
|
-
|
|
37
|
+
"remark-github": "^12.0.0",
|
|
38
|
-
|
|
38
|
+
"shiki": "^1.22.1",
|
|
39
|
-
|
|
39
|
+
"super-sitemap": "^0.14.14",
|
|
40
|
-
|
|
40
|
+
"svelte": "^5.1.3",
|
|
41
|
-
|
|
41
|
+
"svelte-check": "^4.0.5",
|
|
42
|
-
|
|
42
|
+
"tailwindcss": "^4.0.3",
|
|
43
|
-
|
|
43
|
+
"vite": "^5.4.10",
|
|
44
|
-
|
|
44
|
+
"vitest": "^2.1.3"
|
|
45
|
-
|
|
45
|
+
}
|
|
46
|
-
}
|
|
46
|
+
}
|
src/app.html
CHANGED
|
@@ -1,23 +1,28 @@
|
|
|
1
1
|
<!doctype html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<script async src="https://www.googletagmanager.com/gtag/js?id=G-L1TPX7RGP2"></script>
|
|
5
|
-
<script>
|
|
6
|
-
window.dataLayer = window.dataLayer || [];
|
|
7
|
-
function gtag() {
|
|
8
|
-
dataLayer.push(arguments);
|
|
9
|
-
}
|
|
10
|
-
gtag('js', new Date());
|
|
11
3
|
|
|
4
|
+
<head>
|
|
5
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
6
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
7
|
+
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
|
|
8
|
+
rel="stylesheet">
|
|
9
|
+
<script async src="https://www.googletagmanager.com/gtag/js?id=G-L1TPX7RGP2"></script>
|
|
10
|
+
<script>
|
|
11
|
+
window.dataLayer = window.dataLayer || [];
|
|
12
|
+
function gtag() {
|
|
13
|
+
dataLayer.push(arguments);
|
|
14
|
+
}
|
|
15
|
+
gtag('js', new Date());
|
|
12
|
-
|
|
16
|
+
gtag('config', 'G-L1TPX7RGP2');
|
|
13
|
-
|
|
17
|
+
</script>
|
|
14
|
-
|
|
18
|
+
<meta charset="utf-8" />
|
|
15
|
-
|
|
19
|
+
<link rel="icon" type="image/png" href="%sveltekit.assets%/favicon.png" />
|
|
16
|
-
|
|
20
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
17
|
-
|
|
21
|
+
%sveltekit.head%
|
|
18
|
-
|
|
22
|
+
</head>
|
|
19
23
|
|
|
20
|
-
|
|
24
|
+
<body data-sveltekit-preload-data="hover">
|
|
21
|
-
|
|
25
|
+
<div class="contents">%sveltekit.body%</div>
|
|
22
|
-
|
|
26
|
+
</body>
|
|
27
|
+
|
|
23
|
-
</html>
|
|
28
|
+
</html>
|
src/lib/components/Footer.svelte
CHANGED
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
import SocialLinks from './SocialLinks.svelte';
|
|
4
4
|
</script>
|
|
5
5
|
|
|
6
|
-
<footer class="
|
|
6
|
+
<footer class="bg-black">
|
|
7
|
-
<div class="flex flex-row flex-1 py-4 px-3 max-w-5xl">
|
|
7
|
+
<div class="wrapper flex flex-row flex-1 py-4 px-3 max-w-5xl">
|
|
8
8
|
<div class="flex-1">
|
|
9
9
|
<SocialLinks />
|
|
10
10
|
</div>
|
|
@@ -13,3 +13,13 @@
|
|
|
13
13
|
</div>
|
|
14
14
|
</div>
|
|
15
15
|
</footer>
|
|
16
|
+
|
|
17
|
+
<style>
|
|
18
|
+
.wrapper {
|
|
19
|
+
max-width: calc(95ex - (1em * 2));
|
|
20
|
+
margin-right: auto;
|
|
21
|
+
margin-left: auto;
|
|
22
|
+
padding-left: 1em;
|
|
23
|
+
padding-right: 1em;
|
|
24
|
+
}
|
|
25
|
+
</style>
|
src/lib/components/Header.svelte
CHANGED
|
@@ -4,21 +4,57 @@
|
|
|
4
4
|
</script>
|
|
5
5
|
|
|
6
6
|
<header>
|
|
7
|
-
<nav class="
|
|
8
|
-
<
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
<
|
|
13
|
-
|
|
14
|
-
>
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
<div>|</div>
|
|
18
|
-
<a href="/posts" class:underline={isActive('/posts')} rel="prefetch"> posts </a>
|
|
19
|
-
<div>|</div>
|
|
20
|
-
<a href="https://git.sr.ht/~pyrossh/"> code </a>
|
|
21
|
-
</div>
|
|
7
|
+
<nav class="wrapper">
|
|
8
|
+
<a class="flex text-[#f1fa8c] mr-4 logo" href="/">
|
|
9
|
+
<span class="mr-1">木</span> pyrossh
|
|
10
|
+
</a>
|
|
11
|
+
<div class="links">
|
|
12
|
+
<a href="/cv" class:underline={isActive('/cv')} rel="prefetch"> cv </a>
|
|
13
|
+
<div>|</div>
|
|
14
|
+
<a href="/posts" class:underline={isActive('/posts')} rel="prefetch"> posts </a>
|
|
15
|
+
<div class="hidden sm:block">|</div>
|
|
16
|
+
<a class="hidden sm:block" href="https://git.sr.ht/~pyrossh/"> code </a>
|
|
22
17
|
</div>
|
|
23
18
|
</nav>
|
|
24
19
|
</header>
|
|
20
|
+
|
|
21
|
+
<style>
|
|
22
|
+
header {
|
|
23
|
+
background-color: black;
|
|
24
|
+
border-top: 5px solid #444;
|
|
25
|
+
border-bottom: 1px solid #444;
|
|
26
|
+
min-height: 56px;
|
|
27
|
+
position: relative;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.wrapper {
|
|
31
|
+
max-width: calc(95ex - (1em * 2));
|
|
32
|
+
margin-right: auto;
|
|
33
|
+
margin-left: auto;
|
|
34
|
+
padding-left: 1em;
|
|
35
|
+
padding-right: 1em;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.logo {
|
|
39
|
+
font-size: 22px;
|
|
40
|
+
line-height: 56px;
|
|
41
|
+
font-weight: 500;
|
|
42
|
+
margin-bottom: 0;
|
|
43
|
+
float: left;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.links {
|
|
47
|
+
display: flex;
|
|
48
|
+
flex-direction: row;
|
|
49
|
+
float: right;
|
|
50
|
+
font-size: 22px;
|
|
51
|
+
line-height: 56px;
|
|
52
|
+
color: white;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.links a {
|
|
56
|
+
font-weight: 500;
|
|
57
|
+
padding-left: 12px;
|
|
58
|
+
padding-right: 12px;
|
|
59
|
+
}
|
|
60
|
+
</style>
|
src/lib/components/Slide.svelte
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
<script>
|
|
2
|
-
import Icon from '@iconify/svelte';
|
|
3
|
-
|
|
4
2
|
/**
|
|
5
3
|
* @typedef {Object} Props
|
|
6
4
|
* @property {any} title - let { title, link, children } = $props();
|
|
@@ -14,21 +12,36 @@
|
|
|
14
12
|
let { title, link, isExternal = true, icon, children } = $props();
|
|
15
13
|
</script>
|
|
16
14
|
|
|
17
|
-
<article class="overflow-hidden rounded bg-[#f0ede2]">
|
|
18
|
-
|
|
15
|
+
<div class="card bg-[#f0ede2] rounded-xs">
|
|
19
|
-
|
|
16
|
+
<div class="card-body p-4">
|
|
17
|
+
<div class="card-title">
|
|
18
|
+
{@render icon?.()}
|
|
20
19
|
<a
|
|
20
|
+
class="link"
|
|
21
21
|
href={link}
|
|
22
|
-
class="flex items-center text-lg font-semibold mb-2 text-black underline child-svg:mr-2"
|
|
23
22
|
target={isExternal ? '_blank' : ''}
|
|
24
23
|
rel={isExternal ? 'noopener noreferrer' : ''}
|
|
25
24
|
>
|
|
26
|
-
{#if icon}{@render icon()}{:else}
|
|
27
|
-
<Icon icon="mdi-github" class="mr-2" width="36" />
|
|
28
|
-
{
|
|
25
|
+
{title}
|
|
29
|
-
<h2>{title}</h2>
|
|
30
26
|
</a>
|
|
31
|
-
{@render children?.()}
|
|
32
27
|
</div>
|
|
28
|
+
{@render children?.()}
|
|
33
29
|
</div>
|
|
30
|
+
</div>
|
|
31
|
+
|
|
32
|
+
<style>
|
|
33
|
+
.card {
|
|
34
|
+
display: flex;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.card-title {
|
|
38
|
+
display: flex;
|
|
39
|
+
flex-direction: row;
|
|
40
|
+
align-items: center;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.link {
|
|
44
|
+
font-weight: 500;
|
|
45
|
+
text-decoration: underline;
|
|
46
|
+
}
|
|
34
|
-
</
|
|
47
|
+
</style>
|
src/routes/+layout.svelte
CHANGED
|
@@ -26,11 +26,11 @@
|
|
|
26
26
|
<meta property="og:url" content={url} />
|
|
27
27
|
</svelte:head>
|
|
28
28
|
{#if !isAppPage}
|
|
29
|
-
<div class="
|
|
29
|
+
<div class="flex flex-1 flex-col">
|
|
30
30
|
<Header />
|
|
31
|
-
<main class="
|
|
31
|
+
<main class="wrapper bg-white">
|
|
32
|
+
<div class="flex flex-1 flex-row">
|
|
32
|
-
|
|
33
|
+
<div class="flex flex-1 flex-row my-4">
|
|
33
|
-
<div class="flex flex-1 flex-row max-w-5xl my-4 p-4">
|
|
34
34
|
<!-- {@render children()} -->
|
|
35
35
|
{@render children?.()}
|
|
36
36
|
</div>
|
|
@@ -44,6 +44,35 @@
|
|
|
44
44
|
|
|
45
45
|
<style lang="postcss">
|
|
46
46
|
:global(html) {
|
|
47
|
-
background-color:
|
|
47
|
+
background-color: white;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
:global(body) {
|
|
51
|
+
text-rendering: optimizeLegibility;
|
|
52
|
+
font-family: 'Roboto', sans-serif;
|
|
53
|
+
font-variant-ligatures: common-ligatures;
|
|
54
|
+
font-kerning: normal;
|
|
55
|
+
font-size: 14pt;
|
|
56
|
+
line-height: 1.6;
|
|
57
|
+
color: #222;
|
|
58
|
+
background-color: #fefefe;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
:global(html) {
|
|
62
|
+
.roboto-font-400 {
|
|
63
|
+
font-family: 'Roboto', sans-serif;
|
|
64
|
+
font-optical-sizing: auto;
|
|
65
|
+
font-weight: 400;
|
|
66
|
+
font-style: normal;
|
|
67
|
+
font-variation-settings: 'wdth' 100;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.wrapper {
|
|
72
|
+
max-width: calc(95ex - (1em * 2));
|
|
73
|
+
margin-right: auto;
|
|
74
|
+
margin-left: auto;
|
|
75
|
+
padding-left: 1em;
|
|
76
|
+
padding-right: 1em;
|
|
48
77
|
}
|
|
49
78
|
</style>
|
src/routes/+page.svelte
CHANGED
|
@@ -44,7 +44,6 @@
|
|
|
44
44
|
<div>
|
|
45
45
|
<section>
|
|
46
46
|
<div class="flex items-center mb-4">
|
|
47
|
-
<Icon class="text-pink-800 mr-2" icon="ant-design:project-outlined" width="36" />
|
|
48
47
|
<h2>Projects</h2>
|
|
49
48
|
</div>
|
|
50
49
|
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-8">
|
|
@@ -83,15 +82,14 @@
|
|
|
83
82
|
</span>
|
|
84
83
|
</p>
|
|
85
84
|
</Slide>
|
|
86
|
-
<Slide title="
|
|
85
|
+
<Slide title="pacman" link="https://git.sr.ht/~pyrossh/plum">
|
|
86
|
+
{#snippet icon()}
|
|
87
|
+
<span class="text-4xl mr-2">👾</span>
|
|
88
|
+
{/snippet}
|
|
87
89
|
<p>
|
|
88
90
|
A statically typed, imperative programming language with ADT's inspired by rust,
|
|
89
91
|
haskell.
|
|
90
92
|
</p>
|
|
91
|
-
<p>
|
|
92
|
-
Plans to be compiled to amd64, arm64, and riscv64 using QBE maintaining C-ABI
|
|
93
|
-
compatibility.
|
|
94
|
-
</p>
|
|
95
93
|
</Slide>
|
|
96
94
|
<Slide title="Only Bible App" link="/only-bible-app" isExternal={false}>
|
|
97
95
|
{#snippet icon()}
|
|
@@ -111,27 +109,28 @@
|
|
|
111
109
|
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-8">
|
|
112
110
|
<section>
|
|
113
111
|
<div class="flex items-center">
|
|
114
|
-
<Icon class="text-amber-900 mr-2" icon="mdi:file-tree-outline" width="36" />
|
|
115
112
|
<h2>Interests</h2>
|
|
116
113
|
</div>
|
|
117
114
|
<ul class="grid gap-2 grid-cols-3 text-center mt-4 *:bg-slate-100 *:p-1">
|
|
118
115
|
<li>HTML</li>
|
|
119
116
|
<li>CSS</li>
|
|
120
|
-
<li>Tailwind</li>
|
|
121
117
|
<li>Javascript</li>
|
|
122
|
-
<li>
|
|
118
|
+
<li>SQL</li>
|
|
123
|
-
<li>Compose</li>
|
|
124
119
|
<li>Go</li>
|
|
125
|
-
<li>
|
|
120
|
+
<li>Zig</li>
|
|
126
121
|
<li>Kotlin</li>
|
|
127
|
-
<li>Firestore</li>
|
|
128
|
-
<li>
|
|
122
|
+
<li>React</li>
|
|
129
|
-
<li>
|
|
123
|
+
<li>Expo</li>
|
|
124
|
+
<li>Bun</li>
|
|
125
|
+
<li>MicroZig</li>
|
|
126
|
+
<li>Kaluma</li>
|
|
127
|
+
<li>K8s</li>
|
|
128
|
+
<li>Knative</li>
|
|
129
|
+
<li>Iceberg</li>
|
|
130
130
|
</ul>
|
|
131
131
|
</section>
|
|
132
132
|
<section>
|
|
133
133
|
<div class="flex items-center">
|
|
134
|
-
<Icon class="text-cyan-950 mr-2" icon="mdi-contact-outline" width="36" />
|
|
135
134
|
<h2>Contact</h2>
|
|
136
135
|
</div>
|
|
137
136
|
<ul
|
|
@@ -158,7 +157,6 @@
|
|
|
158
157
|
</div>
|
|
159
158
|
<section>
|
|
160
159
|
<div class="flex items-center">
|
|
161
|
-
<Icon class="text-blue-800 mr-2" icon="eos-icons:software-outlined" width="36" />
|
|
162
160
|
<h2>Tools</h2>
|
|
163
161
|
</div>
|
|
164
162
|
<ul class="grid gap-2 grid-cols-3 md:grid-cols-7 text-center mt-4 *:bg-slate-100 *:p-1">
|
|
@@ -267,7 +265,6 @@
|
|
|
267
265
|
|
|
268
266
|
& > div {
|
|
269
267
|
flex: 1;
|
|
270
|
-
margin-left: 0.5rem;
|
|
271
268
|
}
|
|
272
269
|
}
|
|
273
270
|
|
src/routes/posts/[slug]/+page.svelte
CHANGED
|
@@ -13,23 +13,12 @@
|
|
|
13
13
|
|
|
14
14
|
<article class="flex flex-col w-full">
|
|
15
15
|
<hgroup class="flex flex-1 flex-col mb-6">
|
|
16
|
-
<h1
|
|
16
|
+
<h1>
|
|
17
17
|
{data.meta.title}
|
|
18
18
|
</h1>
|
|
19
|
-
<h2 class="mt-1 font-normal text-base text-slate-700">{data.meta.description}</h2>
|
|
20
|
-
<div class="mt-4">
|
|
19
|
+
<div class="mt-4 text-gray-600">
|
|
21
|
-
<span class="text-slate-700 font-semibold mr-1">Published on: </span>
|
|
22
20
|
{formatDateLong(data.meta.date)}
|
|
23
21
|
</div>
|
|
24
|
-
<div class="flex mt-1">
|
|
25
|
-
<span class="text-slate-700 font-semibold mr-1">Tags:</span>
|
|
26
|
-
{#each data.meta.tags as tag}
|
|
27
|
-
<span
|
|
28
|
-
class="inline-flex items-center rounded-sm bg-slate-100 px-1 text-base font-medium text-gray-700 ring-1 ring-inset ring-gray-500/10 mr-3"
|
|
29
|
-
>{tag}</span
|
|
30
|
-
>
|
|
31
|
-
{/each}
|
|
32
|
-
</div>
|
|
33
22
|
</hgroup>
|
|
34
23
|
<div class="content">
|
|
35
24
|
<data.content />
|
|
@@ -37,15 +26,15 @@
|
|
|
37
26
|
</article>
|
|
38
27
|
|
|
39
28
|
<style>
|
|
29
|
+
h1 {
|
|
30
|
+
font-size: 27pt;
|
|
40
|
-
|
|
31
|
+
font-weight: bold;
|
|
32
|
+
text-align: left;
|
|
33
|
+
line-height: 1;
|
|
41
|
-
|
|
34
|
+
margin-top: 1rem;
|
|
42
35
|
}
|
|
43
36
|
|
|
44
37
|
.content :global {
|
|
45
|
-
h1 {
|
|
46
|
-
font-weight: 500;
|
|
47
|
-
margin-top: 1rem;
|
|
48
|
-
}
|
|
49
38
|
h2 {
|
|
50
39
|
font-weight: 700;
|
|
51
40
|
}
|
src/vite-env.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
/// <reference types="vite/client" />
|
vite.config.js
CHANGED
|
@@ -5,8 +5,8 @@ import svg from '@poppanator/sveltekit-svg';
|
|
|
5
5
|
import { defineConfig } from 'vitest/config';
|
|
6
6
|
|
|
7
7
|
export default defineConfig({
|
|
8
|
-
|
|
8
|
+
plugins: [tailwindcss(), enhancedImages(), sveltekit(), svg()],
|
|
9
|
-
|
|
9
|
+
test: {
|
|
10
|
-
|
|
10
|
+
include: ['src/**/*.{test,spec}.{js,ts}'],
|
|
11
|
-
|
|
11
|
+
},
|
|
12
12
|
});
|