# xdiagram website

The presentation page for [xdiagram](../xdiagram). It is a static site: plain HTML, CSS and a little JavaScript. There is no build step, and it makes no requests to other sites.

```
index.html              the page
assets/css/site.css     styles (light and dark, responsive)
assets/js/site.js       download links, theme toggle, screenshot lightbox, tabs, mobile menu
assets/img/             screenshots (WebP, 2× scale), og-image.jpg, favicon.svg
tools/                  how the screenshots are made (see below)
```

## Before publishing

1. **Download links.** Open `assets/js/site.js` and set `RELEASES_URL` to your repository's releases page, for example `https://github.com/<account>/xdiagram/releases/latest`. Every "Download" button and every "Source" link uses it. The repository URL is derived from it.
2. **Sharing preview.** Social networks want an absolute URL for the preview image. Once the site has a domain, change `og:image` in `index.html` to `https://<your-domain>/assets/img/og-image.jpg`.

## Preview locally

```sh
cd xdiagram-site
python -m http.server 8080      # or: npx serve .
```

Then open http://localhost:8080.

## Deploy

Upload the folder as it is to any static host:

- **GitHub Pages:** push it to a repository and enable Pages for the branch.
- **Netlify / Cloudflare Pages:** create a site from the folder, with no build command and the root as the publish directory.
- **Any web server:** copy the files.

## Updating the screenshots

The screenshots are taken from the real app, on a demo database of a fictional shop. They never use your own databases.

1. Load the demo database into the test PostgreSQL container. The server needs `shared_preload_libraries=pg_stat_statements`.
   ```sh
   docker exec xdiagram-pg psql -U postgres -c "CREATE DATABASE xdiagram_demo"
   docker exec -i xdiagram-pg psql -U postgres -d xdiagram_demo < tools/demo-schema.sql
   for i in $(seq 20); do docker exec -i xdiagram-pg psql -U postgres -d xdiagram_demo -q < tools/demo-workload.sql; done
   ```
2. Start the app with remote debugging, from the xdiagram repository:
   ```sh
   WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS=--remote-debugging-port=9222 npm run tauri dev
   ```
3. Run every scene, or only some of them:
   ```sh
   node tools/capture.mjs
   node tools/capture.mjs setup xray lint
   ```
   - The script adds a temporary "Shop demo" connection and removes it again at the end (`teardown`).
   - The `docs` scene drives the Windows Save dialog (`tools/save-dialog.ps1`) and renders the exported documentation in headless Microsoft Edge.
4. Drop the demo database when you are done:
   ```sh
   docker exec xdiagram-pg psql -U postgres -c "DROP DATABASE xdiagram_demo"
   ```