website

#astro#js#html#css

git clone https://git.pyrossh.dev/website

木 Personal website of pyrossh. Built with astrojs, shiki, vite.

f3c538b — pyrossh 2024-10-27T21:37:18+05:30 
upgrade to svelte 5

Generated files not shown: package-lock.json

Files changed (9) hide show
  1. package.json +21 -21
  2. src/lib/components/Header.svelte +1 -1
  3. src/lib/components/Slide.svelte +15 -7
  4. src/routes/+layout.svelte +10 -3
  5. src/routes/+page.svelte +10 -6
  6. src/routes/only-bible-app/+layout.svelte +8 -1
  7. src/routes/posts/+page.svelte +1 -1
  8. src/routes/posts/[slug]/+page.svelte +2 -2
  9. svelte.config.js +9 -9
package.json CHANGED
@@ -11,37 +11,37 @@
11
11
  "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
12
12
  "test": "npm run test:integration && npm run test:unit",
13
13
  "lint": "prettier --check . && eslint .",
14
- "format": "prettier --write .",
14
+ "fmt": "prettier --write .",
15
15
  "test:integration": "playwright test",
16
16
  "test:unit": "vitest"
17
17
  },
18
18
  "devDependencies": {
19
19
  "@iconify/svelte": "^4.0.2",
20
- "@playwright/test": "^1.28.1",
20
+ "@playwright/test": "^1.48.2",
21
- "@poppanator/sveltekit-svg": "^4.2.1",
21
+ "@poppanator/sveltekit-svg": "^5.0.0",
22
- "@sveltejs/adapter-static": "^3.0.1",
22
+ "@sveltejs/adapter-static": "^3.0.6",
23
- "@sveltejs/enhanced-img": "^0.2.0",
23
+ "@sveltejs/enhanced-img": "^0.3.10",
24
- "@sveltejs/kit": "2.5.1",
24
+ "@sveltejs/kit": "^2.7.3",
25
- "@sveltejs/vite-plugin-svelte": "^3.1.2",
25
+ "@sveltejs/vite-plugin-svelte": "^4.0.0",
26
- "@sveltejs/vite-plugin-svelte-inspector": "^2.1.0",
26
+ "@sveltejs/vite-plugin-svelte-inspector": "^3.0.1",
27
- "@tailwindcss/typography": "^0.5.13",
27
+ "@tailwindcss/typography": "^0.5.15",
28
28
  "@types/eslint": "8.56.0",
29
29
  "autoprefixer": "^10.4.19",
30
30
  "eslint": "^8.56.0",
31
31
  "eslint-config-prettier": "^9.1.0",
32
- "eslint-plugin-svelte": "^2.36.0-next.4",
32
+ "eslint-plugin-svelte": "^2.45.1",
33
- "mdsvex": "^0.11.0",
33
+ "mdsvex": "^0.12.3",
34
- "postcss": "^8.4.38",
34
+ "postcss": "^8.4.47",
35
- "prettier": "^3.1.1",
35
+ "prettier": "^3.3.3",
36
- "prettier-plugin-svelte": "^3.1.2",
36
+ "prettier-plugin-svelte": "^3.2.7",
37
37
  "remark-github": "^12.0.0",
38
- "shiki": "^1.1.7",
38
+ "shiki": "^1.22.1",
39
39
  "super-sitemap": "^0.14.14",
40
- "svelte": "4.2.11",
40
+ "svelte": "^5.1.3",
41
- "svelte-check": "^3.6.0",
41
+ "svelte-check": "^4.0.5",
42
- "tailwindcss": "^3.4.3",
42
+ "tailwindcss": "^3.4.14",
43
- "typescript": "^5.0.0",
43
+ "typescript": "^5.6.3",
44
- "vite": "^5.0.3",
44
+ "vite": "^5.4.10",
45
- "vitest": "^1.2.0"
45
+ "vitest": "^2.1.3"
46
46
  }
47
47
  }
src/lib/components/Header.svelte CHANGED
@@ -1,6 +1,6 @@
1
1
  <script>
2
2
  import { page } from '$app/stores';
3
- $: isActive = (href) => $page.url.pathname.includes(href);
3
+ let isActive = $derived((href) => $page.url.pathname.includes(href));
4
4
  </script>
5
5
 
6
6
  <header>
src/lib/components/Slide.svelte CHANGED
@@ -1,9 +1,17 @@
1
1
  <script>
2
2
  import Icon from '@iconify/svelte';
3
+
4
+ /**
5
+ * @typedef {Object} Props
6
+ * @property {any} title - let { title, link, children } = $props();
3
- // let { title, link, children } = $props();
7
+ * @property {any} link - let { title, link, children } = $props();
8
+ * @property {boolean} [isExternal] - let { title, link, children } = $props();
4
- export let title,
9
+ * @property {import('svelte').Snippet} [icon]
10
+ * @property {import('svelte').Snippet} [children]
5
- link,
11
+ */
12
+
6
- isExternal = true;
13
+ /** @type {Props} */
14
+ let { title, link, isExternal = true, icon, children } = $props();
7
15
  </script>
8
16
 
9
17
  <article class="overflow-hidden rounded bg-[#f0ede2]">
@@ -15,13 +23,13 @@
15
23
  target={isExternal ? '_blank' : ''}
16
24
  rel={isExternal ? 'noopener noreferrer' : ''}
17
25
  >
18
- <slot name="icon">
26
+ {#if icon}{@render icon()}{:else}
19
27
  <Icon icon="mdi-github" class="mr-2" width="36" />
20
- </slot>
28
+ {/if}
21
29
  <h2>{title}</h2>
22
30
  </a>
23
31
  <!-- {@render children()} -->
24
- <slot />
32
+ {@render children?.()}
25
33
  </div>
26
34
  </div>
27
35
  </article>
src/routes/+layout.svelte CHANGED
@@ -3,11 +3,18 @@
3
3
  import Footer from '$lib/components/Footer.svelte';
4
4
  import Header from '$lib/components/Header.svelte';
5
5
  import '../app.css';
6
+ /**
7
+ * @typedef {Object} Props
8
+ * @property {import('svelte').Snippet} [children]
9
+ */
10
+
11
+ /** @type {Props} */
12
+ let { children } = $props();
6
13
  // let { children } = $props();
7
14
 
8
15
  const { page } = getStores();
9
16
  let url = `https://pyrossh.dev${$page.url.pathname}`;
10
- $: isAppPage = $page.url.pathname.includes('only-bible-app');
17
+ let isAppPage = $derived($page.url.pathname.includes('only-bible-app'));
11
18
  </script>
12
19
 
13
20
  <svelte:head>
@@ -25,14 +32,14 @@
25
32
  <div class="flex flex-1 flex-row justify-center">
26
33
  <div class="flex flex-1 flex-row max-w-5xl my-4 p-4">
27
34
  <!-- {@render children()} -->
28
- <slot />
35
+ {@render children?.()}
29
36
  </div>
30
37
  </div>
31
38
  </main>
32
39
  <Footer />
33
40
  </div>
34
41
  {:else}
35
- <slot />
42
+ {@render children?.()}
36
43
  {/if}
37
44
 
38
45
  <style lang="postcss">
src/routes/+page.svelte CHANGED
@@ -59,9 +59,11 @@
59
59
  </p>
60
60
  </Slide>
61
61
  <Slide title="pyrossh.dev" link="https://github.com/pyrossh/pyrossh.dev">
62
+ {#snippet icon()}
62
- <div slot="icon">
63
+ <div>
63
- <enhanced:img class="mr-2 w-9 rounded-xl" src={pyrosshPng} alt="pyrossh website" />
64
+ <enhanced:img class="mr-2 w-9 rounded-xl" src={pyrosshPng} alt="pyrossh website" />
64
- </div>
65
+ </div>
66
+ {/snippet}
65
67
  <p>
66
68
  木 Personal website of pyrossh. Built with
67
69
  <span class="*:underline">
@@ -83,9 +85,11 @@
83
85
  <p>WIP to support compilation to WASM.</p>
84
86
  </Slide>
85
87
  <Slide title="Only Bible App" link="/only-bible-app" isExternal={false}>
88
+ {#snippet icon()}
86
- <div slot="icon">
89
+ <div>
87
- <enhanced:img class="mr-2 w-12 rounded-xl" src={onlyBiblePng} alt="Only Bible App" />
90
+ <enhanced:img class="mr-2 w-12 rounded-xl" src={onlyBiblePng} alt="Only Bible App" />
88
- </div>
91
+ </div>
92
+ {/snippet}
89
93
  <p>
90
94
  The only bible app you will ever need. No ads, No in-app purchases, No distractions.
91
95
  Works completely offline.
src/routes/only-bible-app/+layout.svelte CHANGED
@@ -1,5 +1,12 @@
1
1
  <script>
2
2
  import Copyright from '$lib/components/Copyright.svelte';
3
+ /**
4
+ * @typedef {Object} Props
5
+ * @property {import('svelte').Snippet} [children]
6
+ */
7
+
8
+ /** @type {Props} */
9
+ let { children } = $props();
3
10
  </script>
4
11
 
5
12
  <div class="prose h-full sm:w-6/12 mx-auto">
@@ -27,7 +34,7 @@
27
34
  </nav>
28
35
  </header>
29
36
  <main class="flex flex-col mx-4 mt-10 sm:mt-0">
30
- <slot />
37
+ {@render children?.()}
31
38
  </main>
32
39
  <footer class="not-prose text-center py-5 mt-20">
33
40
  <Copyright />
src/routes/posts/+page.svelte CHANGED
@@ -1,6 +1,6 @@
1
1
  <script>
2
2
  import { formatDate } from '$lib/dateUtils';
3
- export let data;
3
+ let { data } = $props();
4
4
  </script>
5
5
 
6
6
  <svelte:head>
src/routes/posts/[slug]/+page.svelte CHANGED
@@ -1,6 +1,6 @@
1
1
  <script>
2
2
  import { formatDateLong } from '$lib/dateUtils';
3
- export let data;
3
+ let { data } = $props();
4
4
  </script>
5
5
 
6
6
  <svelte:head>
@@ -32,6 +32,6 @@
32
32
  </div>
33
33
  </hgroup>
34
34
  <div class="prose">
35
- <svelte:component this={data.content} />
35
+ <data.content />
36
36
  </div>
37
37
  </article>
svelte.config.js CHANGED
@@ -2,7 +2,7 @@ import adapter from '@sveltejs/adapter-static';
2
2
  import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
3
3
  import { mdsvex, escapeSvelte } from 'mdsvex';
4
4
  import github from 'remark-github';
5
- import { getHighlighter } from 'shiki';
5
+ import { getSingletonHighlighter } from 'shiki';
6
6
 
7
7
  /** @type {import('mdsvex').MdsvexOptions} */
8
8
  const mdsvexOptions = {
@@ -17,7 +17,7 @@ const mdsvexOptions = {
17
17
  ],
18
18
  highlight: {
19
19
  highlighter: async (code, lang = 'text') => {
20
- const highlighter = await getHighlighter({
20
+ const highlighter = await getSingletonHighlighter({
21
21
  themes: ['dracula'],
22
22
  langs: ['javascript', 'typescript', 'go', 'shell', 'tsx'],
23
23
  });
@@ -38,13 +38,13 @@ const config = {
38
38
  fallback: '404.html',
39
39
  }),
40
40
  },
41
- vitePlugin: {
41
+ vitePlugin: {
42
- inspector: {
42
+ inspector: {
43
- toggleKeyCombo: 'meta-shift',
43
+ toggleKeyCombo: 'meta-shift',
44
- showToggleButton: 'always',
44
+ showToggleButton: 'always',
45
- toggleButtonPos: 'bottom-right'
45
+ toggleButtonPos: 'bottom-right',
46
- }
46
+ },
47
- }
47
+ },
48
48
  };
49
49
 
50
50
  export default config;