From 1598336ed280eae72b8720e5e6acdf27b3307b8b Mon Sep 17 00:00:00 2001 From: Ayo Date: Fri, 15 May 2026 16:07:25 +0200 Subject: [PATCH] feat: show chat pill --- package.json | 5 ++++- pnpm-lock.yaml | 18 ++++++++++++++++++ src/components/ChatLink.astro | 23 +++++++++++++++++++++++ src/components/Head.astro | 3 +++ src/layouts/variables.css | 4 ++++ src/pages/index.astro | 10 +++++++++- 6 files changed, 61 insertions(+), 2 deletions(-) create mode 100644 src/components/ChatLink.astro diff --git a/package.json b/package.json index 0b053c8..9310366 100644 --- a/package.json +++ b/package.json @@ -62,5 +62,8 @@ "prettier --write" ] }, - "packageManager": "pnpm@10.33.2" + "packageManager": "pnpm@10.33.2", + "dependencies": { + "@ayo-run/status-indicator": "^2.1.2" + } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fef2e77..de4a3c2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -7,6 +7,10 @@ settings: importers: .: + dependencies: + '@ayo-run/status-indicator': + specifier: ^2.1.2 + version: 2.1.2(web-component-base@4.1.2) devDependencies: '@astrojs/sitemap': specifier: ^3.7.2 @@ -139,6 +143,11 @@ packages: peerDependencies: astro: ^6 + '@ayo-run/status-indicator@2.1.2': + resolution: {integrity: sha512-eXWCXveQBq69Eotizvq5jHawO4gtuQK6ZALZTMysDPrcqUFURu8aIH1aJSxg/hIgxqlghsY/f/rxeCqSxp7hmA==} + peerDependencies: + web-component-base: ^4.1.2 + '@babel/helper-string-parser@7.27.1': resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==} engines: {node: '>=6.9.0'} @@ -2688,6 +2697,9 @@ packages: vite: optional: true + web-component-base@4.1.2: + resolution: {integrity: sha512-Jti4FHgCcwtsFWJ+PPwFNhTm5AJVIHrTXDew0rk2Y3b8EChRIE5xr6fmUni43tOhc6w8HatvR3k+qnxjXr/7Mw==} + web-namespaces@2.0.1: resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==} @@ -2841,6 +2853,10 @@ snapshots: astro: 6.3.1(@types/node@25.6.2)(jiti@2.7.0)(rollup@4.60.3)(yaml@2.8.4) esbuild: 0.27.7 + '@ayo-run/status-indicator@2.1.2(web-component-base@4.1.2)': + dependencies: + web-component-base: 4.1.2 + '@babel/helper-string-parser@7.27.1': {} '@babel/helper-validator-identifier@7.28.5': {} @@ -5840,6 +5856,8 @@ snapshots: optionalDependencies: vite: 7.3.3(@types/node@25.6.2)(jiti@2.7.0)(yaml@2.8.4) + web-component-base@4.1.2: {} + web-namespaces@2.0.1: {} whatwg-encoding@3.1.1: diff --git a/src/components/ChatLink.astro b/src/components/ChatLink.astro new file mode 100644 index 0000000..dde2436 --- /dev/null +++ b/src/components/ChatLink.astro @@ -0,0 +1,23 @@ +--- +import '../layouts/variables.css' +--- + + + + Chat + + + + diff --git a/src/components/Head.astro b/src/components/Head.astro index f00621c..be9c5d6 100644 --- a/src/components/Head.astro +++ b/src/components/Head.astro @@ -54,4 +54,7 @@ const baseURL = Astro.site?.toString().slice(0, -1) // ?? 'https://ayo.ayco.io' + + + diff --git a/src/layouts/variables.css b/src/layouts/variables.css index 2fdbb66..08ebfc1 100644 --- a/src/layouts/variables.css +++ b/src/layouts/variables.css @@ -26,4 +26,8 @@ --bg-dark: #343a40; --bg-darker: #212529; --bg-darkest: #000; + + --pill-border-color: rgba(255, 255, 255, 0.2); + --pill-border-radius: 40px; + --pill-padding: 8px 4px; } diff --git a/src/pages/index.astro b/src/pages/index.astro index fa632d1..b0232ee 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -5,6 +5,7 @@ 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( @@ -37,10 +38,13 @@ const avatarSize = 150 Hi, I'm Ayo! - + + now {now.title} + + @@ -86,6 +90,10 @@ const avatarSize = 150 color: white; } + .pill { + margin-right: 0.5rem; + } + .now-wrapper { border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 40px;