ayo/ayco.io-astro
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: use import map for webcomponents; include to sw cache

Browse source
This commit is contained in:
ayo 2026-05-15 18:56:42 +02:00
parent 956c4b90e2
commit eaad49a9be
7 changed files with 114 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
astro.config.mjs
View file

@ -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',
},
],
}),
],
},
})

6
package.json
View file

@ -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"
}
}

64
pnpm-lock.yaml
View file

@ -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

23
src/components/ChatLink.astro
View file

@ -1,23 +0,0 @@
---
import '../layouts/variables.css'
---
<a href="https://chat.ayo.run/join/7IKG-h3nW-pD1H">
<status-indicator id="chat-link" pulse status="positive">
Chat
</status-indicator>
</a>
<style>
status-indicator#chat-link {
display: inline-block;
padding: 5px 7px;
border: 1px solid var(--pill-border-color);
border-radius: var(--pill-border-radius);
font-size: var(--font-size-sm);
a {
text-decoration: none;
}
}
</style>

13
src/components/Head.astro
View file

@ -56,5 +56,16 @@ const baseURL = Astro.site?.toString().slice(0, -1) // ?? 'https://ayo.ayco.io'
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<!-- Web Components -->
<script type="module" src="https://esm.sh/@ayo-run/status-indicator"></script>
<script type="importmap">
{
"imports": {
"web-component-base": "/wc/node_modules/web-component-base/dist/index.js",
"status-indicator": "/wc/node_modules/@ayo-run/status-indicator/dist/status-indicator.js"
}
}
</script>
<script type="module">
import StatusIndicator from 'status-indicator'
customElements.define('status-indicator', StatusIndicator)
</script>
</head>

4
src/layouts/Layout.astro
View file

@ -127,10 +127,10 @@ const ogFileType = 'image/png'
}
</style>
<!-- Anonymous RUM for web perf by Cloudflare Web Analytics -->
<script
<!-- <script
defer
src="https://static.cloudflareinsights.com/beacon.min.js"
data-cf-beacon='{"token": "a39ad600e67a4db8960c639d2552435c"}'></script>
data-cf-beacon='{"token": "a39ad600e67a4db8960c639d2552435c"}'></script> -->
<!-- End Cloudflare Web Analytics -->
</body>
</html>

21
src/pages/index.astro
View file

@ -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
<span class="status">{now.title}</span>
</a>
<ChatLink class="pill" />
<a
href="https://chat.ayo.run/join/7IKG-h3nW-pD1H"
class="chat-link pill"
>
<status-indicator id="chat-link" pulse status="positive">
Chat
</status-indicator>
</a>
</div>
</div>
</section>
@ -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);