Browse Source

Clean up leftover sv-create scaffold, add real README and homepage

Removes the default vitest/Playwright demo files and the /demo hub page
that only linked to the removed Playwright demo. Replaces the generic
sv-create README and "Welcome to SvelteKit" placeholder homepage with
content describing this project and linking to the real demos.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
main
Jonathan Hinkel 2 months ago
parent
commit
0733ea25ce
  1. 52
      README.md
  2. 8
      src/lib/vitest-examples/Welcome.svelte
  3. 15
      src/lib/vitest-examples/Welcome.svelte.spec.ts
  4. 8
      src/lib/vitest-examples/greet.spec.ts
  5. 3
      src/lib/vitest-examples/greet.ts
  6. 24
      src/routes/+page.svelte
  7. 5
      src/routes/demo/+page.svelte
  8. 1
      src/routes/demo/playwright/+page.svelte
  9. 6
      src/routes/demo/playwright/page.svelte.e2e.ts

52
README.md

@ -1,42 +1,34 @@
# sv # webavatar-core
Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli). A base SvelteKit project meant to be branched off for future webavatar client projects. It provides the reusable core infrastructure those projects would otherwise reimplement from scratch — session management, auth tokens, and the realtime model connection — as a foundation to branch from, not a finished product.
## Creating a project See [docs/ARCHITECTURE.md](docs/ARCHITECTURE.md) for the full architecture map, and [AGENTS.md](AGENTS.md) for project conventions and structure. `docs/` holds a deep-dive per subsystem.
If you're seeing this, you've probably already done this step. Congrats! ## Getting started
```sh
# create a new project
npx sv create my-app
```
To recreate this project with the same configuration:
```sh
# recreate this project
npx sv@0.17.0 create --template minimal --types ts --add prettier eslint vitest="usages:component,unit" playwright --install npm webavatar-base
```
## Developing
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
```sh ```sh
npm install
cp .env.example .env
# fill in OPENAI_API_KEY and REALTIME_TOKEN_SECRET in .env
npm run dev npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
``` ```
## Building Open [`/demo/realtime`](http://localhost:5173/demo/realtime) for the realtime session reference wiring, or [`/demo/humanoid`](http://localhost:5173/demo/humanoid) for the humanoid avatar-state demo (works offline via `REALTIME_PROVIDER=mock`, no API key needed).
To create a production version of your app: ## Scripts
```sh - `npm run dev` / `npm run build` / `npm run preview` — standard SvelteKit commands.
npm run build - `npm run check` — type-check. `npm run lint` / `npm run format` — prettier + eslint.
``` - `npm run test:unit` — vitest. `npm run test:e2e` — Playwright.
- `npm start` — run the production build via `server.js` (the persistent Node process the realtime WebSocket relay requires — see [docs/ARCHITECTURE.md](docs/ARCHITECTURE.md)).
You can preview the production build with `npm run preview`. ## Documentation
> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment. | Subsystem | Doc |
| ------------------------------------------------------------- | --------------------------------------------------- |
| Architecture overview and module layering | [docs/ARCHITECTURE.md](docs/ARCHITECTURE.md) |
| Realtime session management | [docs/REALTIME_SESSION.md](docs/REALTIME_SESSION.md) |
| Tool calling (server- and client-executed) | [docs/TOOLS.md](docs/TOOLS.md) |
| Analytics recording | [docs/ANALYTICS.md](docs/ANALYTICS.md) |
| Configuration (env vars, persona) | [docs/CONFIGURATION.md](docs/CONFIGURATION.md) |
| `humanoid` package (avatar-state, animation composition) | [docs/HUMANOID.md](docs/HUMANOID.md) |

8
src/lib/vitest-examples/Welcome.svelte

@ -1,8 +0,0 @@
<script>
import { greet } from './greet';
let { host = 'SvelteKit', guest = 'Vitest' } = $props();
</script>
<h1>{greet(host)}</h1>
<p>{greet(guest)}</p>

15
src/lib/vitest-examples/Welcome.svelte.spec.ts

@ -1,15 +0,0 @@
import { page } from 'vitest/browser';
import { describe, expect, it } from 'vitest';
import { render } from 'vitest-browser-svelte';
import Welcome from './Welcome.svelte';
describe('Welcome.svelte', () => {
it('renders greetings for host and guest', async () => {
render(Welcome, { host: 'SvelteKit', guest: 'Vitest' });
await expect
.element(page.getByRole('heading', { level: 1 }))
.toHaveTextContent('Hello, SvelteKit!');
await expect.element(page.getByText('Hello, Vitest!')).toBeInTheDocument();
});
});

8
src/lib/vitest-examples/greet.spec.ts

@ -1,8 +0,0 @@
import { describe, it, expect } from 'vitest';
import { greet } from './greet';
describe('greet', () => {
it('returns a greeting', () => {
expect(greet('Svelte')).toBe('Hello, Svelte!');
});
});

3
src/lib/vitest-examples/greet.ts

@ -1,3 +0,0 @@
export function greet(name: string): string {
return 'Hello, ' + name + '!';
}

24
src/routes/+page.svelte

@ -1,2 +1,22 @@
<h1>Welcome to SvelteKit</h1> <script lang="ts">
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p> import { resolve } from '$app/paths';
</script>
<h1>webavatar-core</h1>
<p>
A base SvelteKit project for webavatar client projects. It provides the reusable
infrastructure those projects would otherwise reimplement from scratch — session management,
auth tokens, and the realtime model connection — as a foundation to branch from, not a finished
product.
</p>
<h2>Demos</h2>
<ul>
<li><a href={resolve('/demo/realtime')}>/demo/realtime</a> — realtime session reference wiring</li>
<li>
<a href={resolve('/demo/humanoid')}>/demo/humanoid</a> — humanoid avatar-state derivation
</li>
</ul>
<h2>Docs</h2>
<p>See <code>docs/ARCHITECTURE.md</code> in the repo for the full architecture map, or the README for getting started.</p>

5
src/routes/demo/+page.svelte

@ -1,5 +0,0 @@
<script lang="ts">
import { resolve } from '$app/paths';
</script>
<a href={resolve('/demo/playwright')}>playwright</a>

1
src/routes/demo/playwright/+page.svelte

@ -1 +0,0 @@
<h1>Playwright e2e test demo</h1>

6
src/routes/demo/playwright/page.svelte.e2e.ts

@ -1,6 +0,0 @@
import { expect, test } from '@playwright/test';
test('has expected h1', async ({ page }) => {
await page.goto('/demo/playwright');
await expect(page.locator('h1')).toBeVisible();
});
Loading…
Cancel
Save