root/Fuwari-Custom
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

refactor: upgrade to Svelte v5 (#212)

Browse Source 
* upgrade astro dependencies

* migration to Svelte 5

* Resolution of module version

* fix migrate script error

* fix migrate error comment

* fix Stylus format

* add intellisense for typescript

* Upgrading astrojs/svelte and svelte, and organizing dependencies

* Delete the incorrect settings.

* upgrade astro

* Fixed an error that occurred due to svelte.config.ts using unsupported features.
This commit is contained in:
Katsuyuki Karasawa
2024-11-30 15:59:51 +09:00
committed by GitHub
parent 87547fca86
commit ff9e82091a
7 changed files with 485 additions and 484 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
astro.config.mjs
View File

@@ -1,47 +1,47 @@
import sitemap from '@astrojs/sitemap' import sitemap from "@astrojs/sitemap";
import svelte from '@astrojs/svelte' import svelte from "@astrojs/svelte";
import tailwind from '@astrojs/tailwind' import tailwind from "@astrojs/tailwind";
import swup from '@swup/astro' import swup from "@swup/astro";
import Compress from 'astro-compress' import Compress from "astro-compress";
import icon from 'astro-icon' import icon from "astro-icon";
import { defineConfig } from 'astro/config' import { defineConfig } from "astro/config";
import Color from 'colorjs.io' import Color from "colorjs.io";
import rehypeAutolinkHeadings from 'rehype-autolink-headings' import rehypeAutolinkHeadings from "rehype-autolink-headings";
import rehypeComponents from 'rehype-components' /* Render the custom directive content */ import rehypeComponents from "rehype-components"; /* Render the custom directive content */
import rehypeKatex from 'rehype-katex' import rehypeKatex from "rehype-katex";
import rehypeSlug from 'rehype-slug' import rehypeSlug from "rehype-slug";
import remarkDirective from 'remark-directive' /* Handle directives */ import remarkDirective from "remark-directive"; /* Handle directives */
import remarkGithubAdmonitionsToDirectives from 'remark-github-admonitions-to-directives' import remarkGithubAdmonitionsToDirectives from "remark-github-admonitions-to-directives";
import remarkMath from 'remark-math' import remarkMath from "remark-math";
import { AdmonitionComponent } from './src/plugins/rehype-component-admonition.mjs' import { AdmonitionComponent } from "./src/plugins/rehype-component-admonition.mjs";
import { GithubCardComponent } from './src/plugins/rehype-component-github-card.mjs' import { GithubCardComponent } from "./src/plugins/rehype-component-github-card.mjs";
import { parseDirectiveNode } from './src/plugins/remark-directive-rehype.js' import { parseDirectiveNode } from "./src/plugins/remark-directive-rehype.js";
import { remarkExcerpt } from './src/plugins/remark-excerpt.js' import { remarkExcerpt } from "./src/plugins/remark-excerpt.js";
import { remarkReadingTime } from './src/plugins/remark-reading-time.mjs' import { remarkReadingTime } from "./src/plugins/remark-reading-time.mjs";
const oklchToHex = str => { const oklchToHex = (str) => {
const DEFAULT_HUE = 250 const DEFAULT_HUE = 250;
const regex = /-?\d+(\.\d+)?/g const regex = /-?\d+(\.\d+)?/g;
const matches = str.string.match(regex) const matches = str.string.match(regex);
const lch = [matches[0], matches[1], DEFAULT_HUE] const lch = [matches[0], matches[1], DEFAULT_HUE];
return new Color('oklch', lch).to('srgb').toString({ return new Color("oklch", lch).to("srgb").toString({
format: 'hex', format: "hex",
}) });
} };
// https://astro.build/config // https://astro.build/config
export default defineConfig({ export default defineConfig({
site: 'https://fuwari.vercel.app/', site: "https://fuwari.vercel.app/",
base: '/', base: "/",
trailingSlash: 'always', trailingSlash: "always",
integrations: [ integrations: [
tailwind(), tailwind(),
swup({ swup({
theme: false, theme: false,
animationClass: 'transition-swup-', // see https://swup.js.org/options/#animationselector animationClass: "transition-swup-", // see https://swup.js.org/options/#animationselector
// the default value `transition-` cause transition delay // the default value `transition-` cause transition delay
// when the Tailwind class `transition-all` is used // when the Tailwind class `transition-all` is used
containers: ['main', '#toc'], containers: ["main", "#toc"],
smoothScrolling: true, smoothScrolling: true,
cache: true, cache: true,
preload: true, preload: true,
@@ -52,10 +52,10 @@ export default defineConfig({
}), }),
icon({ icon({
include: { include: {
'material-symbols': ['*'], "preprocess: vitePreprocess(),": ["*"],
'fa6-brands': ['*'], "fa6-brands": ["*"],
'fa6-regular': ['*'], "fa6-regular": ["*"],
'fa6-solid': ['*'], "fa6-solid": ["*"],
}, },
}), }),
svelte(), svelte(),
@@ -85,32 +85,32 @@ export default defineConfig({
{ {
components: { components: {
github: GithubCardComponent, github: GithubCardComponent,
note: (x, y) => AdmonitionComponent(x, y, 'note'), note: (x, y) => AdmonitionComponent(x, y, "note"),
tip: (x, y) => AdmonitionComponent(x, y, 'tip'), tip: (x, y) => AdmonitionComponent(x, y, "tip"),
important: (x, y) => AdmonitionComponent(x, y, 'important'), important: (x, y) => AdmonitionComponent(x, y, "important"),
caution: (x, y) => AdmonitionComponent(x, y, 'caution'), caution: (x, y) => AdmonitionComponent(x, y, "caution"),
warning: (x, y) => AdmonitionComponent(x, y, 'warning'), warning: (x, y) => AdmonitionComponent(x, y, "warning"),
}, },
}, },
], ],
[ [
rehypeAutolinkHeadings, rehypeAutolinkHeadings,
{ {
behavior: 'append', behavior: "append",
properties: { properties: {
className: ['anchor'], className: ["anchor"],
}, },
content: { content: {
type: 'element', type: "element",
tagName: 'span', tagName: "span",
properties: { properties: {
className: ['anchor-icon'], className: ["anchor-icon"],
'data-pagefind-ignore': true, "data-pagefind-ignore": true,
}, },
children: [ children: [
{ {
type: 'text', type: "text",
value: '#', value: "#",
}, },
], ],
}, },
@@ -124,12 +124,12 @@ export default defineConfig({
onwarn(warning, warn) { onwarn(warning, warn) {
// temporarily suppress this warning // temporarily suppress this warning
if ( if (
warning.message.includes('is dynamically imported by') && warning.message.includes("is dynamically imported by") &&
warning.message.includes('but also statically imported by') warning.message.includes("but also statically imported by")
) { ) {
return return;
} }
warn(warning) warn(warning);
}, },
}, },
}, },
@@ -143,4 +143,4 @@ export default defineConfig({
}, },
}, },
}, },
}) });

59
package.json
View File

@@ -14,23 +14,31 @@
"lint": "biome check --apply ./src" "lint": "biome check --apply ./src"
}, },
"dependencies": { "dependencies": {
"@astrojs/check": "^0.9.3", "@astrojs/check": "^0.9.4",
"@astrojs/rss": "^4.0.7", "@astrojs/rss": "^4.0.9",
"@astrojs/sitemap": "^3.1.6", "@astrojs/sitemap": "^3.2.1",
"@astrojs/svelte": "^5.7.1", "@astrojs/svelte": "^6.0.1",
"@astrojs/tailwind": "^5.1.1", "@astrojs/tailwind": "^5.1.2",
"@fontsource-variable/jetbrains-mono": "^5.0.22", "@fontsource-variable/jetbrains-mono": "^5.1.1",
"@fontsource/roboto": "^5.0.14", "@fontsource/roboto": "^5.1.0",
"@iconify-json/fa6-brands": "^1.2.1",
"@iconify-json/fa6-regular": "^1.2.1",
"@iconify-json/fa6-solid": "^1.2.1",
"@iconify-json/material-symbols": "^1.2.5",
"@iconify/svelte": "^4.0.2",
"@sveltejs/vite-plugin-svelte": "^4.0.0",
"@swup/astro": "^1.4.1", "@swup/astro": "^1.4.1",
"astro": "^4.15.9", "@tailwindcss/typography": "^0.5.15",
"astro-compress": "^2.3.1", "astro": "^4.16.13",
"astro-compress": "^2.3.5",
"astro-icon": "^1.1.1", "astro-icon": "^1.1.1",
"colorjs.io": "^0.5.2", "colorjs.io": "^0.5.2",
"hastscript": "^9.0.0", "hastscript": "^9.0.0",
"markdown-it": "^14.1.0", "markdown-it": "^14.1.0",
"mdast-util-to-string": "^4.0.0", "mdast-util-to-string": "^4.0.0",
"overlayscrollbars": "^2.10.0", "overlayscrollbars": "^2.10.0",
"pagefind": "^1.1.0", "pagefind": "^1.1.1",
"photoswipe": "^5.4.4",
"reading-time": "^1.5.0", "reading-time": "^1.5.0",
"rehype-autolink-headings": "^7.1.0", "rehype-autolink-headings": "^7.1.0",
"rehype-components": "^0.3.0", "rehype-components": "^0.3.0",
@@ -38,37 +46,24 @@
"rehype-slug": "^6.0.0", "rehype-slug": "^6.0.0",
"remark-directive": "^3.0.0", "remark-directive": "^3.0.0",
"remark-directive-rehype": "^0.4.2", "remark-directive-rehype": "^0.4.2",
"remark-github-admonitions-to-directives": "^1.0.5",
"remark-math": "^6.0.0", "remark-math": "^6.0.0",
"sanitize-html": "^2.13.0", "sanitize-html": "^2.13.1",
"sass": "^1.80.4",
"sharp": "^0.33.5", "sharp": "^0.33.5",
"svelte": "^4.2.19", "stylus": "^0.63.0",
"tailwindcss": "^3.4.10", "svelte": "^5.2.2",
"typescript": "^5.5.4", "tailwindcss": "^3.4.14",
"typescript": "^5.6.3",
"unist-util-visit": "^5.0.0" "unist-util-visit": "^5.0.0"
}, },
"devDependencies": { "devDependencies": {
"@astrojs/ts-plugin": "^1.10.2", "@astrojs/ts-plugin": "^1.10.4",
"@biomejs/biome": "1.8.3", "@biomejs/biome": "1.8.3",
"@iconify-json/fa6-brands": "^1.1.22",
"@iconify-json/fa6-regular": "^1.1.22",
"@iconify-json/fa6-solid": "^1.1.24",
"@iconify-json/material-symbols": "^1.1.89",
"@iconify/svelte": "^4.0.2",
"@rollup/plugin-yaml": "^4.1.2", "@rollup/plugin-yaml": "^4.1.2",
"@tailwindcss/typography": "^0.5.15",
"@types/markdown-it": "^14.1.2", "@types/markdown-it": "^14.1.2",
"@types/mdast": "^4.0.4", "@types/mdast": "^4.0.4",
"@types/sanitize-html": "^2.13.0", "@types/sanitize-html": "^2.13.0"
"photoswipe": "^5.4.4",
"remark-github-admonitions-to-directives": "^1.0.5",
"sass": "^1.77.8",
"stylus": "^0.63.0"
},
"pnpm": {
"overrides": {
"vite-imagetools": "^6.2.7",
"sharp": "^0.33.0"
}
}, },
"packageManager": "pnpm@9.6.0+sha512.38dc6fba8dba35b39340b9700112c2fe1e12f10b17134715a4aa98ccf7bb035e76fd981cf0bb384dfa98f8d6af5481c2bef2f4266a24bfa20c34eb7147ce0b5e" "packageManager": "pnpm@9.6.0+sha512.38dc6fba8dba35b39340b9700112c2fe1e12f10b17134715a4aa98ccf7bb035e76fd981cf0bb384dfa98f8d6af5481c2bef2f4266a24bfa20c34eb7147ce0b5e"
} }

690
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

12
src/components/LightDarkSwitch.svelte
View File

@@ -12,7 +12,7 @@ import {
import { onMount } from 'svelte' import { onMount } from 'svelte'
const seq: LIGHT_DARK_MODE[] = [LIGHT_MODE, DARK_MODE, AUTO_MODE] const seq: LIGHT_DARK_MODE[] = [LIGHT_MODE, DARK_MODE, AUTO_MODE]
let mode: LIGHT_DARK_MODE = AUTO_MODE let mode: LIGHT_DARK_MODE = $state(AUTO_MODE)
onMount(() => { onMount(() => {
mode = getStoredTheme() mode = getStoredTheme()
@@ -58,8 +58,8 @@ function hidePanel() {
</script> </script>
<!-- z-50 make the panel higher than other float panels --> <!-- z-50 make the panel higher than other float panels -->
<div class="relative z-50" role="menu" tabindex="-1" on:mouseleave={hidePanel}> <div class="relative z-50" role="menu" tabindex="-1" onmouseleave={hidePanel}>
<button aria-label="Light/Dark Mode" role="menuitem" class="relative btn-plain scale-animation rounded-lg h-11 w-11 active:scale-90" id="scheme-switch" on:click={toggleScheme} on:mouseenter={showPanel}> <button aria-label="Light/Dark Mode" role="menuitem" class="relative btn-plain scale-animation rounded-lg h-11 w-11 active:scale-90" id="scheme-switch" onclick={toggleScheme} onmouseenter={showPanel}>
<div class="absolute" class:opacity-0={mode !== LIGHT_MODE}> <div class="absolute" class:opacity-0={mode !== LIGHT_MODE}>
<Icon icon="material-symbols:wb-sunny-outline-rounded" class="text-[1.25rem]"></Icon> <Icon icon="material-symbols:wb-sunny-outline-rounded" class="text-[1.25rem]"></Icon>
</div> </div>
@@ -75,21 +75,21 @@ function hidePanel() {
<div class="card-base float-panel p-2"> <div class="card-base float-panel p-2">
<button class="flex transition whitespace-nowrap items-center justify-start w-full btn-plain scale-animation rounded-lg h-9 px-3 font-medium active:scale-95 mb-0.5" <button class="flex transition whitespace-nowrap items-center justify-start w-full btn-plain scale-animation rounded-lg h-9 px-3 font-medium active:scale-95 mb-0.5"
class:current-theme-btn={mode === LIGHT_MODE} class:current-theme-btn={mode === LIGHT_MODE}
on:click={() => switchScheme(LIGHT_MODE)} onclick={() => switchScheme(LIGHT_MODE)}
> >
<Icon icon="material-symbols:wb-sunny-outline-rounded" class="text-[1.25rem] mr-3"></Icon> <Icon icon="material-symbols:wb-sunny-outline-rounded" class="text-[1.25rem] mr-3"></Icon>
{i18n(I18nKey.lightMode)} {i18n(I18nKey.lightMode)}
</button> </button>
<button class="flex transition whitespace-nowrap items-center justify-start w-full btn-plain scale-animation rounded-lg h-9 px-3 font-medium active:scale-95 mb-0.5" <button class="flex transition whitespace-nowrap items-center justify-start w-full btn-plain scale-animation rounded-lg h-9 px-3 font-medium active:scale-95 mb-0.5"
class:current-theme-btn={mode === DARK_MODE} class:current-theme-btn={mode === DARK_MODE}
on:click={() => switchScheme(DARK_MODE)} onclick={() => switchScheme(DARK_MODE)}
> >
<Icon icon="material-symbols:dark-mode-outline-rounded" class="text-[1.25rem] mr-3"></Icon> <Icon icon="material-symbols:dark-mode-outline-rounded" class="text-[1.25rem] mr-3"></Icon>
{i18n(I18nKey.darkMode)} {i18n(I18nKey.darkMode)}
</button> </button>
<button class="flex transition whitespace-nowrap items-center justify-start w-full btn-plain scale-animation rounded-lg h-9 px-3 font-medium active:scale-95" <button class="flex transition whitespace-nowrap items-center justify-start w-full btn-plain scale-animation rounded-lg h-9 px-3 font-medium active:scale-95"
class:current-theme-btn={mode === AUTO_MODE} class:current-theme-btn={mode === AUTO_MODE}
on:click={() => switchScheme(AUTO_MODE)} onclick={() => switchScheme(AUTO_MODE)}
> >
<Icon icon="material-symbols:radio-button-partial-outline" class="text-[1.25rem] mr-3"></Icon> <Icon icon="material-symbols:radio-button-partial-outline" class="text-[1.25rem] mr-3"></Icon>
{i18n(I18nKey.systemMode)} {i18n(I18nKey.systemMode)}

2
src/components/Search.svelte
View File

@@ -122,4 +122,4 @@ top-20 left-4 md:left-[unset] right-4 shadow-2xl rounded-2xl p-2">
input:focus { input:focus {
outline: 0; outline: 0;
} }
</style> </style>

85
src/components/widget/DisplaySettings.svelte
View File

@@ -38,54 +38,55 @@ $: if (hue || hue === 0) {
</div> </div>
<div class="w-full h-6 px-1 bg-[oklch(0.80_0.10_0)] dark:bg-[oklch(0.70_0.10_0)] rounded select-none"> <div class="w-full h-6 px-1 bg-[oklch(0.80_0.10_0)] dark:bg-[oklch(0.70_0.10_0)] rounded select-none">
<input aria-label={i18n(I18nKey.themeColor)} type="range" min="0" max="360" bind:value={hue} <input aria-label={i18n(I18nKey.themeColor)} type="range" min="0" max="360" bind:value={hue}
class="slider" id="colorSlider" step="5" style="width: 100%;"> class="slider" id="colorSlider" step="5" style="width: 100%">
</div> </div>
</div> </div>
<style lang="stylus"> <style lang="stylus">
#display-setting #display-setting
input[type="range"] input[type="range"]
-webkit-appearance: none; -webkit-appearance none
height: 1.5rem; height 1.5rem
background-image: var(--color-selection-bar) background-image var(--color-selection-bar)
transition: background-image 0.15s ease-in-out transition background-image 0.15s ease-in-out
/* Input Thumb */ /* Input Thumb */
::-webkit-slider-thumb &::-webkit-slider-thumb
-webkit-appearance: none; -webkit-appearance none
height: 1rem; height 1rem
width: 0.5rem; width 0.5rem
border-radius: 0.125rem; border-radius 0.125rem
background: rgba(255, 255, 255, 0.7); background rgba(255, 255, 255, 0.7)
box-shadow: none; box-shadow none
&:hover &:hover
background: rgba(255, 255, 255, 0.8); background rgba(255, 255, 255, 0.8)
&:active &:active
background: rgba(255, 255, 255, 0.6); background rgba(255, 255, 255, 0.6)
::-moz-range-thumb &::-moz-range-thumb
-webkit-appearance: none; -webkit-appearance none
height: 1rem; height 1rem
width: 0.5rem; width 0.5rem
border-radius: 0.125rem; border-radius 0.125rem
border-width: 0 border-width 0
background: rgba(255, 255, 255, 0.7); background rgba(255, 255, 255, 0.7)
box-shadow: none; box-shadow none
&:hover &:hover
background: rgba(255, 255, 255, 0.8); background rgba(255, 255, 255, 0.8)
&:active &:active
background: rgba(255, 255, 255, 0.6); background rgba(255, 255, 255, 0.6)
&::-ms-thumb
-webkit-appearance none
height 1rem
width 0.5rem
border-radius 0.125rem
background rgba(255, 255, 255, 0.7)
box-shadow none
&:hover
background rgba(255, 255, 255, 0.8)
&:active
background rgba(255, 255, 255, 0.6)
&::-ms-thumb
-webkit-appearance: none;
height: 1rem;
width: 0.5rem;
border-radius: 0.125rem;
background: rgba(255, 255, 255, 0.7);
box-shadow: none;
&:hover
background: rgba(255, 255, 255, 0.8);
&:active
background: rgba(255, 255, 255, 0.6);
</style> </style>

5
svelte.config.js Normal file
View File

@@ -0,0 +1,5 @@
import { vitePreprocess } from "@astrojs/svelte";
export default {
preprocess: [vitePreprocess({ script: true })],
};