mirror of
https://github.com/iritmaximus/wasab.git
synced 2026-10-12 20:03:31 +03:00
Initial commit
This commit is contained in:
Aaro Koivukangas
@@ -0,0 +1,6 @@
|
|||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
coverage
|
||||||
|
test-results
|
||||||
|
playwright-report
|
||||||
|
.git
|
||||||
@@ -0,0 +1,53 @@
|
|||||||
|
name: CI
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches: [main]
|
||||||
|
pull_request:
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
test:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v4
|
||||||
|
- uses: actions/setup-node@v4
|
||||||
|
with:
|
||||||
|
node-version: 24
|
||||||
|
cache: npm
|
||||||
|
- run: npm ci
|
||||||
|
- run: npm run lint
|
||||||
|
- run: npm run fmt:check
|
||||||
|
- run: npm run typecheck
|
||||||
|
- run: npm test -- --coverage
|
||||||
|
- run: npx playwright install --with-deps firefox
|
||||||
|
- run: npm run test:e2e
|
||||||
|
- uses: actions/upload-artifact@v4
|
||||||
|
if: failure()
|
||||||
|
with:
|
||||||
|
name: playwright-report
|
||||||
|
path: playwright-report
|
||||||
|
|
||||||
|
# Argo image-updater tracks the :latest digest, see k8s-pumppi/wasab
|
||||||
|
publish:
|
||||||
|
needs: test
|
||||||
|
if: github.event_name == 'push' && github.ref == 'refs/heads/main'
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
permissions:
|
||||||
|
contents: read
|
||||||
|
packages: write
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v4
|
||||||
|
- uses: docker/setup-buildx-action@v3
|
||||||
|
- uses: docker/login-action@v3
|
||||||
|
with:
|
||||||
|
registry: ghcr.io
|
||||||
|
username: ${{ github.actor }}
|
||||||
|
password: ${{ secrets.GITHUB_TOKEN }}
|
||||||
|
- uses: docker/build-push-action@v6
|
||||||
|
with:
|
||||||
|
push: true
|
||||||
|
tags: |
|
||||||
|
ghcr.io/${{ github.repository_owner }}/wasab:latest
|
||||||
|
ghcr.io/${{ github.repository_owner }}/wasab:${{ github.sha }}
|
||||||
|
cache-from: type=gha
|
||||||
|
cache-to: type=gha,mode=max
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
coverage
|
||||||
|
test-results
|
||||||
|
playwright-report
|
||||||
|
*.local
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"$schema": "./node_modules/oxfmt/configuration_schema.json",
|
||||||
|
"printWidth": 100,
|
||||||
|
"singleQuote": true,
|
||||||
|
"ignorePatterns": ["dist", "coverage", "playwright-report", "test-results", "package-lock.json"]
|
||||||
|
}
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"$schema": "./node_modules/oxlint/configuration_schema.json",
|
||||||
|
"plugins": ["typescript", "unicorn", "oxc", "react", "jsx-a11y", "vitest", "import"],
|
||||||
|
"categories": {
|
||||||
|
"correctness": "error",
|
||||||
|
"suspicious": "warn"
|
||||||
|
},
|
||||||
|
"rules": {
|
||||||
|
"react/react-in-jsx-scope": "off",
|
||||||
|
"react-hooks/rules-of-hooks": "error",
|
||||||
|
"react-hooks/exhaustive-deps": "warn",
|
||||||
|
"import/no-unassigned-import": [
|
||||||
|
"warn",
|
||||||
|
{
|
||||||
|
"allow": ["**/*.css", "@testing-library/jest-dom/vitest", "@fontsource-variable/*"]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"ignorePatterns": ["dist", "coverage", "playwright-report", "test-results"]
|
||||||
|
}
|
||||||
+12
@@ -0,0 +1,12 @@
|
|||||||
|
FROM node:24-alpine AS build
|
||||||
|
WORKDIR /app
|
||||||
|
COPY package.json package-lock.json ./
|
||||||
|
RUN npm ci
|
||||||
|
COPY . .
|
||||||
|
RUN npm run build
|
||||||
|
|
||||||
|
# runs as non-root (uid 101) and listens on 8080
|
||||||
|
FROM nginxinc/nginx-unprivileged:alpine
|
||||||
|
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||||
|
COPY --from=build /app/dist /usr/share/nginx/html
|
||||||
|
EXPOSE 8080
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
# wasab
|
||||||
|
|
||||||
|
Home page for [pumppi.dev](https://pumppi.dev): links to every app running on the
|
||||||
|
[k8s-pumppi](https://github.com/iritmaximus/k8s-pumppi) cluster.
|
||||||
|
|
||||||
|
Vite + React + TypeScript, static build served by nginx.
|
||||||
|
|
||||||
|
## Develop
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
| Script | |
|
||||||
|
| --------------------------- | --------------------------------------------------------------------------------- |
|
||||||
|
| `npm run lint` | oxlint |
|
||||||
|
| `npm run fmt` / `fmt:check` | oxfmt |
|
||||||
|
| `npm run typecheck` | `tsc --noEmit` |
|
||||||
|
| `npm test` | Vitest unit/component tests (`-- --coverage` enforces 90%) |
|
||||||
|
| `npm run test:e2e` | Playwright against a production build (run `npx playwright install firefox` once) |
|
||||||
|
|
||||||
|
## Adding an app
|
||||||
|
|
||||||
|
Add an entry to `src/apps.ts`. `access` lists how you get in: `sso` if the ingress uses the
|
||||||
|
Authelia middleware, `login` if the app has its own login (both is fine). Then update the host list
|
||||||
|
in `src/apps.test.ts`, which is there so a removed or mistyped app is noticed.
|
||||||
|
|
||||||
|
## Deploy
|
||||||
|
|
||||||
|
Pushing to `main` runs CI and publishes `ghcr.io/iritmaximus/wasab:latest`. Argo CD image-updater
|
||||||
|
picks up the new digest and rolls out `k8s-pumppi/wasab`. The container serves on port 8080 with a
|
||||||
|
`/health` endpoint for probes.
|
||||||
|
|
||||||
|
```sh
|
||||||
|
docker build -t wasab . && docker run --rm -p 8080:8080 wasab
|
||||||
|
```
|
||||||
@@ -0,0 +1,91 @@
|
|||||||
|
import { AxeBuilder } from '@axe-core/playwright';
|
||||||
|
import { test as base, expect } from '@playwright/test';
|
||||||
|
import { apps } from '../src/apps';
|
||||||
|
|
||||||
|
const test = base.extend<{ consoleErrors: string[] }>({
|
||||||
|
consoleErrors: [
|
||||||
|
async ({ page }, use) => {
|
||||||
|
const errors: string[] = [];
|
||||||
|
page.on('console', (msg) => {
|
||||||
|
if (msg.type() === 'error') errors.push(msg.text());
|
||||||
|
});
|
||||||
|
page.on('pageerror', (err) => errors.push(err.message));
|
||||||
|
await use(errors);
|
||||||
|
expect(errors).toEqual([]);
|
||||||
|
},
|
||||||
|
{ auto: true },
|
||||||
|
],
|
||||||
|
});
|
||||||
|
|
||||||
|
test.beforeEach(async ({ page }) => {
|
||||||
|
await page.goto('/');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('has the title and heading', async ({ page }) => {
|
||||||
|
await expect(page).toHaveTitle('pumppi.dev');
|
||||||
|
await expect(page.getByRole('heading', { level: 1 })).toHaveText('pumppi.dev');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('links to every app', async ({ page }) => {
|
||||||
|
await expect(page.getByRole('link')).toHaveCount(apps.length);
|
||||||
|
for (const app of apps) {
|
||||||
|
await expect(page.locator(`a[href="${app.url}"]`)).toBeVisible();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
test('clicking anywhere on a card follows its link', async ({ page }) => {
|
||||||
|
await page.route('https://meal.pumppi.dev/**', (route) =>
|
||||||
|
route.fulfill({ contentType: 'text/html', body: '<title>mealie stub</title>' }),
|
||||||
|
);
|
||||||
|
// the description sits under the link's ::after overlay, so click by coordinates
|
||||||
|
const box = await page.getByText('Recipes and meal plans').boundingBox();
|
||||||
|
if (!box) throw new Error('description not rendered');
|
||||||
|
await page.mouse.click(box.x + box.width / 2, box.y + box.height / 2);
|
||||||
|
await expect(page).toHaveURL('https://meal.pumppi.dev/');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('search filters and Escape resets', async ({ page }) => {
|
||||||
|
const search = page.getByRole('searchbox', { name: 'Search apps' });
|
||||||
|
// the shortcut is registered in an effect that can land after the load event
|
||||||
|
await expect(async () => {
|
||||||
|
await page.keyboard.press('/');
|
||||||
|
await expect(search).toBeFocused({ timeout: 100 });
|
||||||
|
}).toPass();
|
||||||
|
await expect(search).toHaveValue('');
|
||||||
|
|
||||||
|
await search.fill('grafana');
|
||||||
|
await expect(page.getByRole('link')).toHaveCount(1);
|
||||||
|
await expect(page.getByRole('link')).toHaveAttribute('href', 'https://grafana.pumppi.dev');
|
||||||
|
|
||||||
|
await search.fill('zzz');
|
||||||
|
await expect(page.getByRole('status')).toHaveText('No apps match “zzz”.');
|
||||||
|
|
||||||
|
await search.press('Escape');
|
||||||
|
await expect(page.getByRole('link')).toHaveCount(apps.length);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('fits every app on one screen without scrolling', async ({ page }) => {
|
||||||
|
const { scrollHeight, clientHeight } = await page.evaluate(() => ({
|
||||||
|
scrollHeight: document.documentElement.scrollHeight,
|
||||||
|
clientHeight: document.documentElement.clientHeight,
|
||||||
|
}));
|
||||||
|
expect(scrollHeight).toBeLessThanOrEqual(clientHeight);
|
||||||
|
for (const link of await page.getByRole('link').all()) {
|
||||||
|
await expect(link).toBeInViewport({ ratio: 1 });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
test('has no horizontal scroll', async ({ page }) => {
|
||||||
|
const overflow = await page.evaluate(
|
||||||
|
() => document.documentElement.scrollWidth - document.documentElement.clientWidth,
|
||||||
|
);
|
||||||
|
expect(overflow).toBe(0);
|
||||||
|
});
|
||||||
|
|
||||||
|
for (const colorScheme of ['light', 'dark'] as const) {
|
||||||
|
test(`has no accessibility violations in ${colorScheme} mode`, async ({ page }) => {
|
||||||
|
await page.emulateMedia({ colorScheme });
|
||||||
|
const results = await new AxeBuilder({ page }).analyze();
|
||||||
|
expect(results.violations).toEqual([]);
|
||||||
|
});
|
||||||
|
}
|
||||||
+15
@@ -0,0 +1,15 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta name="description" content="Apps running on pumppi.dev" />
|
||||||
|
<meta name="color-scheme" content="light dark" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<title>pumppi.dev</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+23
@@ -0,0 +1,23 @@
|
|||||||
|
server {
|
||||||
|
listen 8080;
|
||||||
|
server_name _;
|
||||||
|
root /usr/share/nginx/html;
|
||||||
|
|
||||||
|
# k8s readiness/liveness probe
|
||||||
|
location = /health {
|
||||||
|
access_log off;
|
||||||
|
default_type text/plain;
|
||||||
|
return 200 "ok\n";
|
||||||
|
}
|
||||||
|
|
||||||
|
# vite puts content hashes in asset names, so they never change
|
||||||
|
location /assets/ {
|
||||||
|
add_header Cache-Control "public, max-age=31536000, immutable";
|
||||||
|
try_files $uri =404;
|
||||||
|
}
|
||||||
|
|
||||||
|
location / {
|
||||||
|
add_header Cache-Control "no-cache";
|
||||||
|
try_files $uri $uri/ /index.html;
|
||||||
|
}
|
||||||
|
}
|
||||||
Generated
+3440
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,42 @@
|
|||||||
|
{
|
||||||
|
"name": "wasab",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"description": "Home page for pumppi.dev",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc --noEmit && vite build",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"typecheck": "tsc --noEmit",
|
||||||
|
"lint": "oxlint --deny-warnings",
|
||||||
|
"fmt": "oxfmt",
|
||||||
|
"fmt:check": "oxfmt --check",
|
||||||
|
"test": "vitest run",
|
||||||
|
"test:watch": "vitest",
|
||||||
|
"test:e2e": "playwright test"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@fontsource-variable/space-grotesk": "^5.3.0",
|
||||||
|
"react": "^19.3.0",
|
||||||
|
"react-dom": "^19.3.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@axe-core/playwright": "^4.13.0",
|
||||||
|
"@playwright/test": "^1.64.0",
|
||||||
|
"@testing-library/jest-dom": "^7.0.1",
|
||||||
|
"@testing-library/react": "^16.3.3",
|
||||||
|
"@testing-library/user-event": "^14.6.7",
|
||||||
|
"@types/node": "^26.6.5",
|
||||||
|
"@types/react": "^19.3.0",
|
||||||
|
"@types/react-dom": "^19.3.0",
|
||||||
|
"@vitejs/plugin-react": "^6.1.2",
|
||||||
|
"@vitest/coverage-v8": "^5.0.3",
|
||||||
|
"jsdom": "^30.1.2",
|
||||||
|
"oxfmt": "^0.72.0",
|
||||||
|
"oxlint": "^1.87.0",
|
||||||
|
"typescript": "^7.0.2",
|
||||||
|
"vite": "^8.3.4",
|
||||||
|
"vitest": "^5.0.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
import { defineConfig, devices } from '@playwright/test';
|
||||||
|
|
||||||
|
const port = 4173;
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
testDir: './e2e',
|
||||||
|
forbidOnly: !!process.env.CI,
|
||||||
|
retries: process.env.CI ? 1 : 0,
|
||||||
|
reporter: process.env.CI ? 'github' : 'list',
|
||||||
|
use: { baseURL: `http://localhost:${port}` },
|
||||||
|
// Firefox has no mobile emulation, so phones are covered by viewport size only
|
||||||
|
projects: [
|
||||||
|
{
|
||||||
|
name: 'firefox',
|
||||||
|
use: { ...devices['Desktop Firefox'], viewport: { width: 1280, height: 720 } },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'firefox-laptop',
|
||||||
|
use: { ...devices['Desktop Firefox'], viewport: { width: 1024, height: 640 } },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'firefox-phone',
|
||||||
|
use: { ...devices['Desktop Firefox'], viewport: { width: 390, height: 844 } },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
webServer: {
|
||||||
|
command: `npm run build && npx vite preview --port ${port} --strictPort`,
|
||||||
|
port,
|
||||||
|
reuseExistingServer: !process.env.CI,
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="7" fill="#2f6f5e"/><path d="M11 24V8h6.5a5 5 0 0 1 0 10H11" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||||
|
After Width: | Height: | Size: 251 B |
@@ -0,0 +1,84 @@
|
|||||||
|
import { render, screen, within } from '@testing-library/react';
|
||||||
|
import userEvent from '@testing-library/user-event';
|
||||||
|
import { describe, expect, it } from 'vitest';
|
||||||
|
import { App } from './App';
|
||||||
|
import { apps, groups } from './apps';
|
||||||
|
|
||||||
|
function setup() {
|
||||||
|
const user = userEvent.setup();
|
||||||
|
render(<App />);
|
||||||
|
return { user, search: screen.getByRole('searchbox', { name: 'Search apps' }) };
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('App', () => {
|
||||||
|
it('shows the site title', () => {
|
||||||
|
setup();
|
||||||
|
expect(screen.getByRole('heading', { level: 1, name: 'pumppi.dev' })).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('links to every app', () => {
|
||||||
|
setup();
|
||||||
|
for (const app of apps) {
|
||||||
|
expect(screen.getByRole('link', { name: new RegExp(`^${app.name}\\b`) })).toHaveAttribute(
|
||||||
|
'href',
|
||||||
|
app.url,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
expect(screen.getAllByRole('link')).toHaveLength(apps.length);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('puts each app under its group heading', () => {
|
||||||
|
setup();
|
||||||
|
for (const group of groups) {
|
||||||
|
const section = screen.getByRole('region', { name: group.title });
|
||||||
|
const hrefs = within(section)
|
||||||
|
.getAllByRole('link')
|
||||||
|
.map((link) => link.getAttribute('href'));
|
||||||
|
expect(hrefs).toEqual(apps.filter((app) => app.group === group.id).map((app) => app.url));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
it('filters as you type', async () => {
|
||||||
|
const { user, search } = setup();
|
||||||
|
await user.type(search, 'vault');
|
||||||
|
const links = screen.getAllByRole('link');
|
||||||
|
expect(links).toHaveLength(1);
|
||||||
|
expect(links[0]).toHaveAttribute('href', 'https://vault.pumppi.dev');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('hides groups with no matches', async () => {
|
||||||
|
const { user, search } = setup();
|
||||||
|
await user.type(search, 'grafana');
|
||||||
|
expect(screen.getByRole('region', { name: 'Admin & infra' })).toBeInTheDocument();
|
||||||
|
expect(screen.queryByRole('region', { name: 'Apps' })).not.toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('shows an empty state when nothing matches', async () => {
|
||||||
|
const { user, search } = setup();
|
||||||
|
await user.type(search, ' nothing-here ');
|
||||||
|
expect(screen.queryAllByRole('link')).toHaveLength(0);
|
||||||
|
expect(screen.getByRole('status')).toHaveTextContent('No apps match “nothing-here”.');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('restores everything on Escape', async () => {
|
||||||
|
const { user, search } = setup();
|
||||||
|
await user.type(search, 'nothing-here');
|
||||||
|
await user.keyboard('{Escape}');
|
||||||
|
expect(search).toHaveValue('');
|
||||||
|
expect(screen.getAllByRole('link')).toHaveLength(apps.length);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('focuses search with "/"', async () => {
|
||||||
|
const { user, search } = setup();
|
||||||
|
expect(search).not.toHaveFocus();
|
||||||
|
await user.keyboard('/');
|
||||||
|
expect(search).toHaveFocus();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('explains the badges in the footer', () => {
|
||||||
|
setup();
|
||||||
|
const footer = screen.getByRole('contentinfo');
|
||||||
|
expect(footer).toHaveTextContent('SSO behind Authelia');
|
||||||
|
expect(footer).toHaveTextContent('Login own login');
|
||||||
|
});
|
||||||
|
});
|
||||||
+36
@@ -0,0 +1,36 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { apps as allApps, groups } from './apps';
|
||||||
|
import { AppGroup } from './components/AppGroup';
|
||||||
|
import { SearchBox } from './components/SearchBox';
|
||||||
|
import { filterApps } from './filterApps';
|
||||||
|
|
||||||
|
export function App() {
|
||||||
|
const [query, setQuery] = useState('');
|
||||||
|
const visible = filterApps(allApps, query);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="page">
|
||||||
|
<header className="header">
|
||||||
|
<h1>pumppi.dev</h1>
|
||||||
|
<p className="tagline">Apps running on the homelab cluster.</p>
|
||||||
|
<SearchBox value={query} onChange={setQuery} />
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
{visible.length === 0 ? (
|
||||||
|
<output className="empty">No apps match “{query.trim()}”.</output>
|
||||||
|
) : (
|
||||||
|
groups.map((group) => {
|
||||||
|
const groupApps = visible.filter((app) => app.group === group.id);
|
||||||
|
return groupApps.length > 0 ? (
|
||||||
|
<AppGroup key={group.id} group={group} apps={groupApps} />
|
||||||
|
) : null;
|
||||||
|
})
|
||||||
|
)}
|
||||||
|
</main>
|
||||||
|
<footer className="footer">
|
||||||
|
<span className="badge badge-sso">SSO</span> behind Authelia ·{' '}
|
||||||
|
<span className="badge badge-login">Login</span> own login
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,67 @@
|
|||||||
|
import { describe, expect, it } from 'vitest';
|
||||||
|
import { apps, groups, hostOf } from './apps';
|
||||||
|
|
||||||
|
describe('app registry', () => {
|
||||||
|
it('has unique ids', () => {
|
||||||
|
const ids = apps.map((app) => app.id);
|
||||||
|
expect(new Set(ids).size).toBe(ids.length);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('has unique urls', () => {
|
||||||
|
const urls = apps.map((app) => app.url);
|
||||||
|
expect(new Set(urls).size).toBe(urls.length);
|
||||||
|
});
|
||||||
|
|
||||||
|
it.each(apps)('$id links to an https pumppi.dev subdomain', (app) => {
|
||||||
|
const url = new URL(app.url);
|
||||||
|
expect(url.protocol).toBe('https:');
|
||||||
|
expect(url.hostname).toMatch(/^[a-z0-9-]+\.pumppi\.dev$/);
|
||||||
|
expect(url.pathname).toBe('/');
|
||||||
|
});
|
||||||
|
|
||||||
|
it.each(apps)('$id has a name, description and known group', (app) => {
|
||||||
|
expect(app.name.trim()).not.toBe('');
|
||||||
|
expect(app.description.trim()).not.toBe('');
|
||||||
|
expect(groups.map((g) => g.id)).toContain(app.group);
|
||||||
|
});
|
||||||
|
|
||||||
|
it.each(apps)('$id lists at least one access kind, without duplicates', (app) => {
|
||||||
|
expect(app.access.length).toBeGreaterThan(0);
|
||||||
|
expect(new Set(app.access).size).toBe(app.access.length);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('has no empty groups', () => {
|
||||||
|
for (const group of groups) {
|
||||||
|
expect(apps.some((app) => app.group === group.id)).toBe(true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
it('includes every deployed app with a web UI', () => {
|
||||||
|
expect(apps.map((app) => hostOf(app.url)).toSorted()).toEqual(
|
||||||
|
[
|
||||||
|
'argo.pumppi.dev',
|
||||||
|
'auth.pumppi.dev',
|
||||||
|
'dashboard.pumppi.dev',
|
||||||
|
'git.pumppi.dev',
|
||||||
|
'grafana.pumppi.dev',
|
||||||
|
'meal.pumppi.dev',
|
||||||
|
'vault.pumppi.dev',
|
||||||
|
'whoami.pumppi.dev',
|
||||||
|
'workh.pumppi.dev',
|
||||||
|
].toSorted(),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('marks apps behind Authelia that also keep their own login', () => {
|
||||||
|
const byId = Object.fromEntries(apps.map((app) => [app.id, app.access]));
|
||||||
|
expect(byId.grafana).toEqual(['sso', 'login']);
|
||||||
|
expect(byId.argocd).toEqual(['sso', 'login']);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('hostOf', () => {
|
||||||
|
it('returns the host part of a url', () => {
|
||||||
|
expect(hostOf('https://git.pumppi.dev')).toBe('git.pumppi.dev');
|
||||||
|
expect(hostOf('https://git.pumppi.dev:2222/foo')).toBe('git.pumppi.dev:2222');
|
||||||
|
});
|
||||||
|
});
|
||||||
+103
@@ -0,0 +1,103 @@
|
|||||||
|
export type Access = 'sso' | 'login';
|
||||||
|
|
||||||
|
export type AppGroupId = 'apps' | 'admin';
|
||||||
|
|
||||||
|
export interface AppInfo {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
url: string;
|
||||||
|
description: string;
|
||||||
|
group: AppGroupId;
|
||||||
|
/** How you get in: Authelia SSO in front, the app's own login, or both. */
|
||||||
|
access: readonly Access[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface AppGroupInfo {
|
||||||
|
id: AppGroupId;
|
||||||
|
title: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const groups: readonly AppGroupInfo[] = [
|
||||||
|
{ id: 'apps', title: 'Apps' },
|
||||||
|
{ id: 'admin', title: 'Admin & infra' },
|
||||||
|
];
|
||||||
|
|
||||||
|
// Mirrors the deployed apps in k8s-pumppi (README "What runs here").
|
||||||
|
export const apps: readonly AppInfo[] = [
|
||||||
|
{
|
||||||
|
id: 'gitea',
|
||||||
|
name: 'Gitea',
|
||||||
|
url: 'https://git.pumppi.dev',
|
||||||
|
description: 'Git hosting, ssh on :2222',
|
||||||
|
group: 'apps',
|
||||||
|
access: ['login'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'vaultwarden',
|
||||||
|
name: 'Vaultwarden',
|
||||||
|
url: 'https://vault.pumppi.dev',
|
||||||
|
description: 'Password manager',
|
||||||
|
group: 'apps',
|
||||||
|
access: ['login'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'mealie',
|
||||||
|
name: 'Mealie',
|
||||||
|
url: 'https://meal.pumppi.dev',
|
||||||
|
description: 'Recipes and meal plans',
|
||||||
|
group: 'apps',
|
||||||
|
access: ['login'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'workh',
|
||||||
|
name: 'workh',
|
||||||
|
url: 'https://workh.pumppi.dev',
|
||||||
|
description: 'Work hour tracking',
|
||||||
|
group: 'apps',
|
||||||
|
access: ['login'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'argocd',
|
||||||
|
name: 'Argo CD',
|
||||||
|
url: 'https://argo.pumppi.dev',
|
||||||
|
description: 'GitOps deployments',
|
||||||
|
group: 'admin',
|
||||||
|
access: ['sso', 'login'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'grafana',
|
||||||
|
name: 'Grafana',
|
||||||
|
url: 'https://grafana.pumppi.dev',
|
||||||
|
description: 'Metrics and logs',
|
||||||
|
group: 'admin',
|
||||||
|
access: ['sso', 'login'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'traefik',
|
||||||
|
name: 'Traefik',
|
||||||
|
url: 'https://dashboard.pumppi.dev',
|
||||||
|
description: 'Ingress dashboard',
|
||||||
|
group: 'admin',
|
||||||
|
access: ['sso'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'authelia',
|
||||||
|
name: 'Authelia',
|
||||||
|
url: 'https://auth.pumppi.dev',
|
||||||
|
description: 'Single sign-on',
|
||||||
|
group: 'admin',
|
||||||
|
access: ['sso'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'whoami',
|
||||||
|
name: 'whoami',
|
||||||
|
url: 'https://whoami.pumppi.dev',
|
||||||
|
description: 'Request echo for testing',
|
||||||
|
group: 'admin',
|
||||||
|
access: ['sso'],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export function hostOf(url: string): string {
|
||||||
|
return new URL(url).host;
|
||||||
|
}
|
||||||
@@ -0,0 +1,56 @@
|
|||||||
|
import { render, screen, within } from '@testing-library/react';
|
||||||
|
import { describe, expect, it } from 'vitest';
|
||||||
|
import type { AppInfo } from '../apps';
|
||||||
|
import { AppCard } from './AppCard';
|
||||||
|
|
||||||
|
const base: AppInfo = {
|
||||||
|
id: 'grafana',
|
||||||
|
name: 'Grafana',
|
||||||
|
url: 'https://grafana.pumppi.dev',
|
||||||
|
description: 'Metrics and logs dashboards',
|
||||||
|
group: 'admin',
|
||||||
|
access: ['sso', 'login'],
|
||||||
|
};
|
||||||
|
|
||||||
|
function renderCard(app: AppInfo) {
|
||||||
|
render(
|
||||||
|
<ul>
|
||||||
|
<AppCard app={app} />
|
||||||
|
</ul>,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('AppCard', () => {
|
||||||
|
it('renders a link to the app named after it', () => {
|
||||||
|
renderCard(base);
|
||||||
|
const link = screen.getByRole('link', { name: /grafana/i });
|
||||||
|
expect(link).toHaveAttribute('href', 'https://grafana.pumppi.dev');
|
||||||
|
expect(link).toHaveAttribute('rel', 'noopener');
|
||||||
|
expect(link).toHaveAccessibleName('Grafana grafana.pumppi.dev');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('shows the description', () => {
|
||||||
|
renderCard(base);
|
||||||
|
expect(screen.getByText('Metrics and logs dashboards')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('shows both badges for SSO + own login', () => {
|
||||||
|
renderCard(base);
|
||||||
|
const badges = within(screen.getByRole('list', { name: 'Access' })).getAllByRole('listitem');
|
||||||
|
expect(badges.map((b) => b.textContent)).toEqual(['SSO', 'Login']);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('shows only the SSO badge for SSO-only apps', () => {
|
||||||
|
renderCard({ ...base, access: ['sso'] });
|
||||||
|
const badges = within(screen.getByRole('list', { name: 'Access' })).getAllByRole('listitem');
|
||||||
|
expect(badges.map((b) => b.textContent)).toEqual(['SSO']);
|
||||||
|
expect(badges[0]).toHaveAttribute('title', 'Behind Authelia single sign-on');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('shows only the login badge for apps with their own login', () => {
|
||||||
|
renderCard({ ...base, access: ['login'] });
|
||||||
|
const badges = within(screen.getByRole('list', { name: 'Access' })).getAllByRole('listitem');
|
||||||
|
expect(badges.map((b) => b.textContent)).toEqual(['Login']);
|
||||||
|
expect(badges[0]).toHaveAttribute('title', 'Has its own login');
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
import { hostOf, type Access, type AppInfo } from '../apps';
|
||||||
|
|
||||||
|
const accessLabels: Record<Access, { label: string; title: string }> = {
|
||||||
|
sso: { label: 'SSO', title: 'Behind Authelia single sign-on' },
|
||||||
|
login: { label: 'Login', title: 'Has its own login' },
|
||||||
|
};
|
||||||
|
|
||||||
|
export function AppCard({ app }: { app: AppInfo }) {
|
||||||
|
return (
|
||||||
|
<li className="card">
|
||||||
|
<a className="card-link" href={app.url} rel="noopener">
|
||||||
|
<span className="card-name">{app.name}</span>{' '}
|
||||||
|
<span className="card-host">{hostOf(app.url)}</span>
|
||||||
|
</a>
|
||||||
|
<p className="card-description">{app.description}</p>
|
||||||
|
<ul className="badges" aria-label="Access">
|
||||||
|
{app.access.map((kind) => (
|
||||||
|
<li key={kind} className={`badge badge-${kind}`} title={accessLabels[kind].title}>
|
||||||
|
{accessLabels[kind].label}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
import { render, screen, within } from '@testing-library/react';
|
||||||
|
import { describe, expect, it } from 'vitest';
|
||||||
|
import { apps, groups } from '../apps';
|
||||||
|
import { AppGroup } from './AppGroup';
|
||||||
|
|
||||||
|
describe('AppGroup', () => {
|
||||||
|
it('renders a labelled section with one card per app', () => {
|
||||||
|
const group = groups[0]!;
|
||||||
|
const groupApps = apps.filter((app) => app.group === group.id);
|
||||||
|
render(<AppGroup group={group} apps={groupApps} />);
|
||||||
|
|
||||||
|
const section = screen.getByRole('region', { name: group.title });
|
||||||
|
expect(within(section).getByRole('heading', { level: 2 })).toHaveTextContent(group.title);
|
||||||
|
expect(within(section).getAllByRole('link')).toHaveLength(groupApps.length);
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
import type { AppGroupInfo, AppInfo } from '../apps';
|
||||||
|
import { AppCard } from './AppCard';
|
||||||
|
|
||||||
|
export function AppGroup({ group, apps }: { group: AppGroupInfo; apps: readonly AppInfo[] }) {
|
||||||
|
const headingId = `group-${group.id}`;
|
||||||
|
return (
|
||||||
|
<section className="group" aria-labelledby={headingId}>
|
||||||
|
<h2 id={headingId}>{group.title}</h2>
|
||||||
|
<ul className="cards">
|
||||||
|
{apps.map((app) => (
|
||||||
|
<AppCard key={app.id} app={app} />
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,83 @@
|
|||||||
|
import { render, screen } from '@testing-library/react';
|
||||||
|
import userEvent from '@testing-library/user-event';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { describe, expect, it, vi } from 'vitest';
|
||||||
|
import { SearchBox } from './SearchBox';
|
||||||
|
|
||||||
|
function Controlled({ onChange }: { onChange?: (value: string) => void }) {
|
||||||
|
const [value, setValue] = useState('');
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<SearchBox
|
||||||
|
value={value}
|
||||||
|
onChange={(v) => {
|
||||||
|
setValue(v);
|
||||||
|
onChange?.(v);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<textarea aria-label="other field" />
|
||||||
|
<button type="button">elsewhere</button>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('SearchBox', () => {
|
||||||
|
it('is labelled for screen readers', () => {
|
||||||
|
render(<Controlled />);
|
||||||
|
expect(screen.getByRole('searchbox', { name: 'Search apps' })).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('reports typed text', async () => {
|
||||||
|
const onChange = vi.fn<(value: string) => void>();
|
||||||
|
render(<Controlled onChange={onChange} />);
|
||||||
|
await userEvent.type(screen.getByRole('searchbox'), 'git');
|
||||||
|
expect(onChange).toHaveBeenLastCalledWith('git');
|
||||||
|
expect(screen.getByRole('searchbox')).toHaveValue('git');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('focuses on "/" without typing the slash', async () => {
|
||||||
|
render(<Controlled />);
|
||||||
|
screen.getByRole('button', { name: 'elsewhere' }).focus();
|
||||||
|
await userEvent.keyboard('/');
|
||||||
|
const input = screen.getByRole('searchbox');
|
||||||
|
expect(input).toHaveFocus();
|
||||||
|
expect(input).toHaveValue('');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('ignores "/" with a modifier key', async () => {
|
||||||
|
render(<Controlled />);
|
||||||
|
screen.getByRole('button', { name: 'elsewhere' }).focus();
|
||||||
|
await userEvent.keyboard('{Control>}/{/Control}');
|
||||||
|
expect(screen.getByRole('searchbox')).not.toHaveFocus();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('lets "/" be typed into other fields', async () => {
|
||||||
|
render(<Controlled />);
|
||||||
|
const other = screen.getByRole('textbox', { name: 'other field' });
|
||||||
|
await userEvent.type(other, 'a/b');
|
||||||
|
expect(other).toHaveValue('a/b');
|
||||||
|
expect(other).toHaveFocus();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('lets "/" be typed into the search box itself', async () => {
|
||||||
|
render(<Controlled />);
|
||||||
|
await userEvent.type(screen.getByRole('searchbox'), 'a/b');
|
||||||
|
expect(screen.getByRole('searchbox')).toHaveValue('a/b');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('clears on Escape', async () => {
|
||||||
|
render(<Controlled />);
|
||||||
|
const input = screen.getByRole('searchbox');
|
||||||
|
await userEvent.type(input, 'vault');
|
||||||
|
await userEvent.keyboard('{Escape}');
|
||||||
|
expect(input).toHaveValue('');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('removes its key listener on unmount', async () => {
|
||||||
|
const remove = vi.spyOn(window, 'removeEventListener');
|
||||||
|
const { unmount } = render(<Controlled />);
|
||||||
|
unmount();
|
||||||
|
expect(remove).toHaveBeenCalledWith('keydown', expect.any(Function));
|
||||||
|
remove.mockRestore();
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,51 @@
|
|||||||
|
import { useEffect, useRef } from 'react';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
value: string;
|
||||||
|
onChange: (value: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function isTypingTarget(target: EventTarget | null): boolean {
|
||||||
|
return (
|
||||||
|
target instanceof HTMLElement &&
|
||||||
|
(target.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SearchBox({ value, onChange }: Props) {
|
||||||
|
const inputRef = useRef<HTMLInputElement>(null);
|
||||||
|
|
||||||
|
// "/" jumps to the search box from anywhere on the page
|
||||||
|
useEffect(() => {
|
||||||
|
const onKeyDown = (event: KeyboardEvent) => {
|
||||||
|
if (event.key !== '/' || event.ctrlKey || event.metaKey || event.altKey) return;
|
||||||
|
if (isTypingTarget(event.target)) return;
|
||||||
|
event.preventDefault();
|
||||||
|
inputRef.current?.focus();
|
||||||
|
};
|
||||||
|
window.addEventListener('keydown', onKeyDown);
|
||||||
|
return () => window.removeEventListener('keydown', onKeyDown);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="search">
|
||||||
|
<label htmlFor="search" className="visually-hidden">
|
||||||
|
Search apps
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
ref={inputRef}
|
||||||
|
id="search"
|
||||||
|
type="search"
|
||||||
|
placeholder="Search apps…"
|
||||||
|
autoComplete="off"
|
||||||
|
spellCheck={false}
|
||||||
|
value={value}
|
||||||
|
onChange={(event) => onChange(event.target.value)}
|
||||||
|
onKeyDown={(event) => {
|
||||||
|
if (event.key === 'Escape') onChange('');
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<kbd aria-hidden="true">/</kbd>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,67 @@
|
|||||||
|
import { describe, expect, it } from 'vitest';
|
||||||
|
import type { AppInfo } from './apps';
|
||||||
|
import { filterApps } from './filterApps';
|
||||||
|
|
||||||
|
const sample: AppInfo[] = [
|
||||||
|
{
|
||||||
|
id: 'gitea',
|
||||||
|
name: 'Gitea',
|
||||||
|
url: 'https://git.pumppi.dev',
|
||||||
|
description: 'Git hosting',
|
||||||
|
group: 'apps',
|
||||||
|
access: ['login'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'grafana',
|
||||||
|
name: 'Grafana',
|
||||||
|
url: 'https://grafana.pumppi.dev',
|
||||||
|
description: 'Metrics and logs',
|
||||||
|
group: 'admin',
|
||||||
|
access: ['sso', 'login'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'mealie',
|
||||||
|
name: 'Mealie',
|
||||||
|
url: 'https://meal.pumppi.dev',
|
||||||
|
description: 'Recipes',
|
||||||
|
group: 'apps',
|
||||||
|
access: ['login'],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const ids = (list: AppInfo[]) => list.map((app) => app.id);
|
||||||
|
|
||||||
|
describe('filterApps', () => {
|
||||||
|
it('returns everything for an empty or blank query', () => {
|
||||||
|
expect(ids(filterApps(sample, ''))).toEqual(['gitea', 'grafana', 'mealie']);
|
||||||
|
expect(ids(filterApps(sample, ' '))).toEqual(['gitea', 'grafana', 'mealie']);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns a copy, not the input array', () => {
|
||||||
|
expect(filterApps(sample, '')).not.toBe(sample);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('matches names case-insensitively', () => {
|
||||||
|
expect(ids(filterApps(sample, 'GRAF'))).toEqual(['grafana']);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('matches descriptions', () => {
|
||||||
|
expect(ids(filterApps(sample, 'recipes'))).toEqual(['mealie']);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('matches hosts', () => {
|
||||||
|
expect(ids(filterApps(sample, 'meal.pumppi'))).toEqual(['mealie']);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('trims surrounding whitespace', () => {
|
||||||
|
expect(ids(filterApps(sample, ' logs '))).toEqual(['grafana']);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('keeps the original order when several match', () => {
|
||||||
|
expect(ids(filterApps(sample, 'g'))).toEqual(['gitea', 'grafana']);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns nothing when no app matches', () => {
|
||||||
|
expect(filterApps(sample, 'kubernetes')).toEqual([]);
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
import { hostOf, type AppInfo } from './apps';
|
||||||
|
|
||||||
|
export function filterApps(list: readonly AppInfo[], query: string): AppInfo[] {
|
||||||
|
const q = query.trim().toLowerCase();
|
||||||
|
if (!q) return [...list];
|
||||||
|
return list.filter((app) =>
|
||||||
|
[app.name, app.description, hostOf(app.url)].some((field) => field.toLowerCase().includes(q)),
|
||||||
|
);
|
||||||
|
}
|
||||||
+359
@@ -0,0 +1,359 @@
|
|||||||
|
:root {
|
||||||
|
--bg: #f3f5fb;
|
||||||
|
--glow-1: rgb(99 102 241 / 16%);
|
||||||
|
--glow-2: rgb(6 182 212 / 14%);
|
||||||
|
--surface: rgb(255 255 255 / 80%);
|
||||||
|
--surface-solid: #ffffff;
|
||||||
|
--border: #dfe3ef;
|
||||||
|
--text: #111827;
|
||||||
|
--muted: #545d75;
|
||||||
|
--accent: #4f46e5;
|
||||||
|
--accent-2: #0891b2;
|
||||||
|
--host: #0e7490;
|
||||||
|
--gradient: linear-gradient(120deg, #4f46e5, #7c3aed 45%, #0891b2);
|
||||||
|
--sso: #5b21b6;
|
||||||
|
--sso-soft: #ede9fe;
|
||||||
|
--login: #115e59;
|
||||||
|
--login-soft: #ccfbf1;
|
||||||
|
--focus: #4f46e5;
|
||||||
|
--shadow: 0 1px 2px rgb(17 24 39 / 5%), 0 4px 16px -8px rgb(17 24 39 / 10%);
|
||||||
|
--shadow-hover: 0 10px 26px -13px rgb(79 70 229 / 28%);
|
||||||
|
|
||||||
|
color-scheme: light dark;
|
||||||
|
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: var(--text);
|
||||||
|
background: var(--bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--bg: #090c16;
|
||||||
|
--glow-1: rgb(99 102 241 / 22%);
|
||||||
|
--glow-2: rgb(34 211 238 / 12%);
|
||||||
|
--surface: rgb(255 255 255 / 4%);
|
||||||
|
--surface-solid: #121729;
|
||||||
|
--border: rgb(255 255 255 / 9%);
|
||||||
|
--text: #e7eaf3;
|
||||||
|
--muted: #9aa3b9;
|
||||||
|
--accent: #a5b4fc;
|
||||||
|
--accent-2: #67e8f9;
|
||||||
|
--host: #67e8f9;
|
||||||
|
--gradient: linear-gradient(120deg, #a5b4fc, #c4b5fd 45%, #67e8f9);
|
||||||
|
--sso: #ddd6fe;
|
||||||
|
--sso-soft: rgb(139 92 246 / 22%);
|
||||||
|
--login: #99f6e4;
|
||||||
|
--login-soft: rgb(20 184 166 / 18%);
|
||||||
|
--focus: #a5b4fc;
|
||||||
|
--shadow: none;
|
||||||
|
--shadow-hover: 0 10px 30px -13px rgb(99 102 241 / 42%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
min-height: 100vh;
|
||||||
|
margin: 0;
|
||||||
|
background:
|
||||||
|
radial-gradient(60rem 30rem at 10% -10%, var(--glow-1), transparent 70%),
|
||||||
|
radial-gradient(50rem 28rem at 95% 0%, var(--glow-2), transparent 70%), var(--bg);
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
max-width: 1240px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 32px 16px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header h1 {
|
||||||
|
width: fit-content;
|
||||||
|
margin: 0;
|
||||||
|
font-family: 'Space Grotesk Variable', system-ui, sans-serif;
|
||||||
|
font-size: clamp(1.9rem, 5vw, 2.5rem);
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: -0.03em;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: var(--accent);
|
||||||
|
background: var(--gradient);
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tagline {
|
||||||
|
margin: 2px 0 16px;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
position: relative;
|
||||||
|
max-width: 420px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 8px 40px 8px 12px;
|
||||||
|
font: inherit;
|
||||||
|
color: var(--text);
|
||||||
|
background: var(--surface-solid);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 10px;
|
||||||
|
transition:
|
||||||
|
border-color 150ms,
|
||||||
|
box-shadow 150ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search input:focus-visible {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--focus);
|
||||||
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search kbd {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 12px;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
padding: 0 6px;
|
||||||
|
font:
|
||||||
|
0.8rem ui-monospace,
|
||||||
|
monospace;
|
||||||
|
color: var(--muted);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 4px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group {
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group h2 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
margin: 0 0 8px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.group h2::after {
|
||||||
|
content: '';
|
||||||
|
flex: 1;
|
||||||
|
height: 1px;
|
||||||
|
background: linear-gradient(90deg, var(--border), transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cards {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
|
||||||
|
gap: 10px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2px;
|
||||||
|
padding: 12px 14px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
transition:
|
||||||
|
transform 220ms ease-out,
|
||||||
|
border-color 220ms ease-out,
|
||||||
|
box-shadow 220ms ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* gradient accent bar along the top edge, shown on hover */
|
||||||
|
.card::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0 0 auto;
|
||||||
|
height: 2px;
|
||||||
|
background: var(--gradient);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 220ms ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:hover,
|
||||||
|
.card:focus-within {
|
||||||
|
border-color: color-mix(in srgb, var(--accent) 33%, var(--border));
|
||||||
|
box-shadow: var(--shadow-hover);
|
||||||
|
transform: translateY(-3px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:hover::before,
|
||||||
|
.card:focus-within::before {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-link {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* whole card is clickable, the link stays the only interactive element */
|
||||||
|
.card-link::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
border-radius: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-link:focus-visible {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:has(.card-link:focus-visible) {
|
||||||
|
outline: 2px solid var(--focus);
|
||||||
|
outline-offset: 2px;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-name {
|
||||||
|
/* leave room for the badges in the top right corner */
|
||||||
|
padding-right: 96px;
|
||||||
|
font-family: 'Space Grotesk Variable', system-ui, sans-serif;
|
||||||
|
font-size: 1.05rem;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-host {
|
||||||
|
font:
|
||||||
|
0.8rem ui-monospace,
|
||||||
|
monospace;
|
||||||
|
color: var(--host);
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-description {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badges {
|
||||||
|
position: absolute;
|
||||||
|
top: 13px;
|
||||||
|
right: 14px;
|
||||||
|
display: flex;
|
||||||
|
gap: 4px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 8px;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
border-radius: 999px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-sso {
|
||||||
|
color: var(--sso);
|
||||||
|
background: var(--sso-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-login {
|
||||||
|
color: var(--login);
|
||||||
|
background: var(--login-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty {
|
||||||
|
display: block;
|
||||||
|
margin-top: 24px;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
margin-top: 28px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.page {
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tagline {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group {
|
||||||
|
margin-top: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* two narrow columns so everything fits on a phone screen */
|
||||||
|
.cards {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-name {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-host {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-description {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
line-height: 1.35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badges {
|
||||||
|
position: static;
|
||||||
|
order: 1;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.card,
|
||||||
|
.card::before,
|
||||||
|
.search input {
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:hover,
|
||||||
|
.card:focus-within {
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.visually-hidden {
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
overflow: hidden;
|
||||||
|
clip-path: inset(50%);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
import { StrictMode } from 'react';
|
||||||
|
import { createRoot } from 'react-dom/client';
|
||||||
|
import { App } from './App';
|
||||||
|
import '@fontsource-variable/space-grotesk';
|
||||||
|
import './index.css';
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')!).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>,
|
||||||
|
);
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
import '@testing-library/jest-dom/vitest';
|
||||||
|
import { cleanup } from '@testing-library/react';
|
||||||
|
import { afterEach } from 'vitest';
|
||||||
|
|
||||||
|
afterEach(() => cleanup());
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2022",
|
||||||
|
"lib": ["ES2023", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedIndexedAccess": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"types": ["vite/client", "node", "@testing-library/jest-dom/vitest"]
|
||||||
|
},
|
||||||
|
"include": ["src", "e2e", "vite.config.ts", "playwright.config.ts"]
|
||||||
|
}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
/// <reference types="vitest/config" />
|
||||||
|
import { defineConfig } from 'vite';
|
||||||
|
import react from '@vitejs/plugin-react';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
test: {
|
||||||
|
environment: 'jsdom',
|
||||||
|
setupFiles: ['./src/setupTests.ts'],
|
||||||
|
include: ['src/**/*.test.{ts,tsx}'],
|
||||||
|
coverage: {
|
||||||
|
provider: 'v8',
|
||||||
|
include: ['src/**/*.{ts,tsx}'],
|
||||||
|
exclude: ['src/main.tsx', 'src/setupTests.ts', 'src/**/*.test.{ts,tsx}'],
|
||||||
|
thresholds: { lines: 90, functions: 90, branches: 90, statements: 90 },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user