diff --git a/astro.config.mjs b/astro.config.mjs index 46d28c5..aeda622 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -2,6 +2,7 @@ import { defineConfig } from 'astro/config' import serviceWorker from '@ayco/astro-sw' import sitemap from '@astrojs/sitemap' +import { viteStaticCopy } from 'vite-plugin-static-copy' import * as data from './package.json' @@ -21,6 +22,10 @@ export default defineConfig({ assetCachePrefix: 'ayco-personal-site', assetCacheVersionID: data.version, logAssets: true, + include: [ + '/wc/node_modules/web-component-base/dist/index.js', + '/wc/node_modules/@ayo-run/status-indicator/dist/status-indicator.js', + ], esbuild: { minify: true, }, @@ -38,4 +43,20 @@ export default defineConfig({ }, }), ], + vite: { + plugins: [ + viteStaticCopy({ + targets: [ + { + src: './node_modules/web-component-base/dist/index.js', + dest: 'wc', + }, + { + src: './node_modules/@ayo-run/status-indicator/dist/status-indicator.js', + dest: 'wc', + }, + ], + }), + ], + }, }) diff --git a/package.json b/package.json index 1c494aa..6442b3c 100644 --- a/package.json +++ b/package.json @@ -51,7 +51,8 @@ "tslib": "^2.8.1", "typescript": "^6.0.3", "typescript-eslint": "^8.59.2", - "unified": "^11.0.5" + "unified": "^11.0.5", + "vite-plugin-static-copy": "^4.1.0" }, "lint-staged": { "*.{js,mjs,astro,ts}": [ @@ -64,6 +65,7 @@ }, "packageManager": "pnpm@10.33.2", "dependencies": { - "@ayo-run/status-indicator": "^2.1.2" + "@ayo-run/status-indicator": "^2.1.2", + "web-component-base": "^4.1.2" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index de4a3c2..3a6f779 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,9 @@ importers: '@ayo-run/status-indicator': specifier: ^2.1.2 version: 2.1.2(web-component-base@4.1.2) + web-component-base: + specifier: ^4.1.2 + version: 4.1.2 devDependencies: '@astrojs/sitemap': specifier: ^3.7.2 @@ -102,6 +105,9 @@ importers: unified: specifier: ^11.0.5 version: 11.0.5 + vite-plugin-static-copy: + specifier: ^4.1.0 + version: 4.1.0(vite@7.3.3(@types/node@25.6.2)(jiti@2.7.0)(yaml@2.8.4)) packages: @@ -997,6 +1003,10 @@ packages: resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==} engines: {node: 18 || 20 || >=22} + binary-extensions@2.3.0: + resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==} + engines: {node: '>=8'} + boolbase@1.0.0: resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==} @@ -1045,6 +1055,10 @@ packages: resolution: {integrity: sha512-WDrybc/gKFpTYQutKIK6UvfcuxijIZfMfXaYm8NMsPQxSYvf+13fXUJ4rztGGbJcBQ/GF55gvrZ0Bc0bj/mqvg==} engines: {node: '>=20.18.1'} + chokidar@3.6.0: + resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==} + engines: {node: '>= 8.10.0'} + chokidar@5.0.0: resolution: {integrity: sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==} engines: {node: '>= 20.19.0'} @@ -1636,6 +1650,10 @@ packages: resolution: {integrity: sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==} engines: {node: '>= 0.4'} + is-binary-path@2.1.0: + resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==} + engines: {node: '>=8'} + is-boolean-object@1.2.2: resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==} engines: {node: '>= 0.4'} @@ -2094,6 +2112,10 @@ packages: resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==} engines: {node: '>=10'} + p-map@7.0.4: + resolution: {integrity: sha512-tkAQEw8ysMzmkhgw8k+1U/iPhWNhykKnSk4Rd5zLoPJCuJaGRPo6YposrZgaxHKzDHdDWWZvE/Sk7hsL2X/CpQ==} + engines: {node: '>=18'} + p-queue@9.2.0: resolution: {integrity: sha512-dWgLE8AH0HjQ9fe74pUkKkvzzYT18Inp4zra3lKHnnwqGvcfcUBrvF2EAVX+envufDNBOzpPq/IBUONDbI7+3g==} engines: {node: '>=20'} @@ -2199,6 +2221,10 @@ packages: radix3@1.1.2: resolution: {integrity: sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==} + readdirp@3.6.0: + resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==} + engines: {node: '>=8.10.0'} + readdirp@5.0.0: resolution: {integrity: sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==} engines: {node: '>= 20.19.0'} @@ -2649,6 +2675,12 @@ packages: vfile@6.0.3: resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==} + vite-plugin-static-copy@4.1.0: + resolution: {integrity: sha512-9XOarNV7LgP0KBB7AApxdgFikLXx3daZdqjC3AevYsL6MrUH62zphonLUs2a6LZc1HN1GY+vQdheZ8VVJb6dQQ==} + engines: {node: ^22.0.0 || >=24.0.0} + peerDependencies: + vite: ^6.0.0 || ^7.0.0 || ^8.0.0 + vite@7.3.3: resolution: {integrity: sha512-/4XH147Ui7OGTjg3HbdWe5arnZQSbfuRzdr9Ec7TQi5I7R+ir0Rlc9GIvD4v0XZurELqA035KVXJXpR61xhiTA==} engines: {node: ^20.19.0 || >=22.12.0} @@ -3666,6 +3698,8 @@ snapshots: balanced-match@4.0.4: {} + binary-extensions@2.3.0: {} + boolbase@1.0.0: {} brace-expansion@1.1.14: @@ -3731,6 +3765,18 @@ snapshots: undici: 7.25.0 whatwg-mimetype: 4.0.0 + chokidar@3.6.0: + dependencies: + anymatch: 3.1.3 + braces: 3.0.3 + glob-parent: 5.1.2 + is-binary-path: 2.1.0 + is-glob: 4.0.3 + normalize-path: 3.0.0 + readdirp: 3.6.0 + optionalDependencies: + fsevents: 2.3.3 + chokidar@5.0.0: dependencies: readdirp: 5.0.0 @@ -4484,6 +4530,10 @@ snapshots: dependencies: has-bigints: 1.1.0 + is-binary-path@2.1.0: + dependencies: + binary-extensions: 2.3.0 + is-boolean-object@1.2.2: dependencies: call-bound: 1.0.4 @@ -5134,6 +5184,8 @@ snapshots: dependencies: p-limit: 3.1.0 + p-map@7.0.4: {} + p-queue@9.2.0: dependencies: eventemitter3: 5.0.4 @@ -5233,6 +5285,10 @@ snapshots: radix3@1.1.2: {} + readdirp@3.6.0: + dependencies: + picomatch: 2.3.2 + readdirp@5.0.0: {} reflect.getprototypeof@1.0.10: @@ -5838,6 +5894,14 @@ snapshots: '@types/unist': 3.0.3 vfile-message: 4.0.3 + vite-plugin-static-copy@4.1.0(vite@7.3.3(@types/node@25.6.2)(jiti@2.7.0)(yaml@2.8.4)): + dependencies: + chokidar: 3.6.0 + p-map: 7.0.4 + picocolors: 1.1.1 + tinyglobby: 0.2.16 + vite: 7.3.3(@types/node@25.6.2)(jiti@2.7.0)(yaml@2.8.4) + vite@7.3.3(@types/node@25.6.2)(jiti@2.7.0)(yaml@2.8.4): dependencies: esbuild: 0.27.7 diff --git a/src/components/ChatLink.astro b/src/components/ChatLink.astro deleted file mode 100644 index dde2436..0000000 --- a/src/components/ChatLink.astro +++ /dev/null @@ -1,23 +0,0 @@ ---- -import '../layouts/variables.css' ---- - - - - Chat - - - - diff --git a/src/components/Head.astro b/src/components/Head.astro index be9c5d6..f65b868 100644 --- a/src/components/Head.astro +++ b/src/components/Head.astro @@ -56,5 +56,16 @@ const baseURL = Astro.site?.toString().slice(0, -1) // ?? 'https://ayo.ayco.io' - + + diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index f65e6ed..fd83143 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -127,10 +127,10 @@ const ogFileType = 'image/png' } - + data-cf-beacon='{"token": "a39ad600e67a4db8960c639d2552435c"}'> --> diff --git a/src/pages/index.astro b/src/pages/index.astro index b0232ee..e615cc7 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -5,7 +5,6 @@ import Footer from '../components/Footer.astro' import now from '../constants/now.json' import { Picture } from 'astro:assets' -import ChatLink from '../components/ChatLink.astro' // fetch mastodon account const response = await fetch( @@ -44,7 +43,14 @@ const avatarSize = 150 {now.title} - + + + Chat + + @@ -92,16 +98,11 @@ const avatarSize = 150 .pill { margin-right: 0.5rem; - } - - .now-wrapper { - border: 1px solid rgba(255, 255, 255, 0.2); - border-radius: 40px; - padding: 8px 4px; - font-weight: normal; + padding: var(--pill-padding); color: white; font-size: var(--font-size-sm); text-decoration: none; + font-weight: normal; } .now-label { @@ -201,7 +202,7 @@ const avatarSize = 150 } @media only screen and (max-device-width: 360px) { - .now-wrapper { + .pill { border: 0px; border-radius: 0; font-size: var(--font-size-sm);