Compare commits
49
Commits
428716e479
..
v0.3.9
@@ -1,133 +0,0 @@
|
||||
name: Deploy
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [main]
|
||||
|
||||
jobs:
|
||||
deploy:
|
||||
runs-on: bare
|
||||
env:
|
||||
# The bare runner's own systemd service intentionally has a minimal
|
||||
# PATH/HOME (no rustup default toolchain in reach) - point it at the
|
||||
# shared toolchain install directly rather than assuming an ambient
|
||||
# dev shell environment.
|
||||
CARGO_HOME: /var/local/cargo
|
||||
RUSTUP_HOME: /var/local/rustup
|
||||
PATH: /var/local/cargo/bin:/usr/local/sbin:/usr/local/bin:/usr/bin
|
||||
# Shared with interactive dev builds (see ~/.config/fish/config.fish)
|
||||
# so a crate compiled once, by either a manual build or CI, is
|
||||
# cached for the other - real cache hits, not just a warm toolchain.
|
||||
# SCCACHE_SERVER_PORT deliberately differs from the interactive
|
||||
# dev shell's (4227): sccache's server is discovered by a fixed
|
||||
# TCP port shared by every local user, so if both contexts used
|
||||
# the same port, whichever one's server happened to be running
|
||||
# would silently "win" and serve build requests it doesn't have
|
||||
# filesystem permission for. Separate ports keep each context's
|
||||
# own server answering its own requests; the cache directory
|
||||
# (not the server process) is what's actually shared.
|
||||
SCCACHE_DIR: /var/local/sccache
|
||||
SCCACHE_SERVER_PORT: "4228"
|
||||
CARGO_TARGET_DIR: /var/local/cargo-target
|
||||
# cargo-leptos's own downloaded tools (wasm-bindgen, wasm-opt) cache
|
||||
# under $XDG_CACHE_HOME - left at its default that resolves inside
|
||||
# this unit's systemd StateDirectory, files it creates there end up
|
||||
# owned by the kernel's overflow "nobody" uid instead of the
|
||||
# runner's own dynamic uid (a StateDirectory quirk, not something
|
||||
# in our control), so a later run can't execute what an earlier run
|
||||
# downloaded. Redirecting it to our own known-good shared dir avoids
|
||||
# that entirely.
|
||||
XDG_CACHE_HOME: /var/local/leptos-cache
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
# SITE_NAME is read via option_env! (src/app.rs) - compile-time,
|
||||
# not a runtime env var - so it has to be set here, not just in
|
||||
# the "Write service env" step below.
|
||||
- name: Build
|
||||
run: SITE_NAME=${{ vars.PORTAL_SITE_NAME }} cargo leptos build --release
|
||||
|
||||
# cargo-leptos only builds the leptos bin-target ("portal") - the
|
||||
# question-lint utility binary needs its own plain cargo build.
|
||||
- name: Build question-lint
|
||||
run: cargo build --release --bin question_lint --features ssr
|
||||
|
||||
- name: Ship release
|
||||
run: |
|
||||
set -euo pipefail
|
||||
rel="/srv/app/uhhm-portal/releases/${{ github.sha }}"
|
||||
mkdir -p "$rel"
|
||||
cp "$CARGO_TARGET_DIR/release/portal" "$rel/uhhm-portal"
|
||||
# questions' own CI execs this directly by path (same bare-metal
|
||||
# runner/host as this job, no artifact download needed) instead
|
||||
# of running its own hand-maintained yq/jq subset of these rules.
|
||||
cp "$CARGO_TARGET_DIR/release/question_lint" "$rel/question_lint"
|
||||
# site-root ("target/site" in Cargo.toml) is project-relative,
|
||||
# not affected by CARGO_TARGET_DIR - only the plain `cargo build`
|
||||
# outputs (release/, front/) move with that override.
|
||||
cp -r target/site "$rel/site"
|
||||
ln -sfn "$rel" /srv/app/uhhm-portal/current
|
||||
|
||||
# Sourced from this repo's own Settings -> Actions Variables/Secrets,
|
||||
# not typed onto the host by hand - see the infrastructure repo's
|
||||
# deploy-runner plan for the exact names/values to configure once.
|
||||
- name: Write service env
|
||||
run: |
|
||||
cat > /etc/app/uhhm-portal.env <<EOF
|
||||
NATS_URL=${{ secrets.PORTAL_NATS_URL }}
|
||||
KANIDM_URL=${{ vars.PORTAL_KANIDM_URL }}
|
||||
OAUTH2_CLIENT_ID=${{ vars.PORTAL_OAUTH2_CLIENT_ID }}
|
||||
OAUTH2_CLIENT_SECRET=${{ secrets.PORTAL_OAUTH2_CLIENT_SECRET }}
|
||||
PUBLIC_URL=${{ vars.PORTAL_PUBLIC_URL }}
|
||||
COOKIE_SECURE=true
|
||||
CONTENT_REPO=https://project.uhhm.no/uhhm/questions
|
||||
CONTENT_BRANCH=main
|
||||
SITE_NAME=${{ vars.PORTAL_SITE_NAME }}
|
||||
LEPTOS_SITE_ADDR=0.0.0.0:3010
|
||||
# Cargo.toml's site-root ("target/site") is a build-time path;
|
||||
# the deploy layout copies the bundle to releases/<sha>/site
|
||||
# (no target/ prefix) - override so the running binary looks
|
||||
# in the right place for /pkg/*.
|
||||
LEPTOS_SITE_ROOT=site
|
||||
AUTOMATION_READ_TOKEN=${{ secrets.PORTAL_AUTOMATION_READ_TOKEN }}
|
||||
# Read-only (read:user,read:repository,read:organization),
|
||||
# used only by the GiteaStarred/GiteaOrgRepos resource sources
|
||||
# (src/resource.rs) - the repo-contents/repo-info calls
|
||||
# content loading already makes stay anonymous.
|
||||
GITEA_API_TOKEN=${{ secrets.PORTAL_GITEA_API_TOKEN }}
|
||||
EOF
|
||||
|
||||
# No sudo: the runner's own unit sets NoNewPrivileges=yes, which
|
||||
# blocks setuid escalation outright (sudo can't work at all under
|
||||
# it, regardless of sudoers config) - systemctl talks to PID1 over
|
||||
# D-Bus instead, authorized by a polkit rule scoped to deploy-runner
|
||||
# + this unit pattern (see /etc/polkit-1/rules.d/10-deploy-runner.rules
|
||||
# on the host).
|
||||
- name: Restart service
|
||||
run: systemctl restart app@uhhm-portal.service
|
||||
|
||||
# No sudo here either - the runner is already in the `docker` group,
|
||||
# so it can talk to the Docker socket directly.
|
||||
# Apex and www are separate cookie scopes (no shared Domain
|
||||
# attribute on the session cookie), but Kanidm's redirect_uri is
|
||||
# fixed to PUBLIC_URL - a login started on the other host set its
|
||||
# session cookie there, then landed on PUBLIC_URL's callback with
|
||||
# an empty session ("no login in progress"). Redirecting www to
|
||||
# the naked domain keeps every visit on one canonical host
|
||||
# instead - PUBLIC_URL (repo variable) is set to https://{$DOMAIN}
|
||||
# to match.
|
||||
- name: Update Caddy routing
|
||||
run: |
|
||||
cat > /etc/caddy/services.d/uhhm-portal.caddy <<'EOF'
|
||||
www.{$DOMAIN} {
|
||||
redir https://{$DOMAIN}{uri} permanent
|
||||
}
|
||||
|
||||
{$DOMAIN} {
|
||||
reverse_proxy host.docker.internal:3010
|
||||
log {
|
||||
output file /var/log/caddy/www.log
|
||||
}
|
||||
}
|
||||
EOF
|
||||
docker exec caddy caddy reload --config /etc/caddy/Caddyfile --adapter caddyfile
|
||||
@@ -0,0 +1,104 @@
|
||||
name: Publish release
|
||||
|
||||
# Portal does not deploy itself. Cutting a version is deliberate:
|
||||
# `cargo release <level>` bumps Cargo.toml, commits, tags v<semver>,
|
||||
# and pushes; this workflow reacts to the tag and publishes the
|
||||
# artifact as a Gitea release. Each content repo (uhhm/questions,
|
||||
# redoal/questions) pins PORTAL_RELEASE to one of these tags in its
|
||||
# own deploy workflow - bumping the pin there is what rolls a version
|
||||
# out to a site. Plain main pushes only run test.yml.
|
||||
|
||||
on:
|
||||
push:
|
||||
tags: ["v*"]
|
||||
|
||||
jobs:
|
||||
publish:
|
||||
runs-on: bare
|
||||
env:
|
||||
# The bare runner's own systemd service intentionally has a minimal
|
||||
# PATH/HOME (no rustup default toolchain in reach) - point it at the
|
||||
# shared toolchain install directly rather than assuming an ambient
|
||||
# dev shell environment.
|
||||
CARGO_HOME: /var/local/cargo
|
||||
RUSTUP_HOME: /var/local/rustup
|
||||
PATH: /var/local/cargo/bin:/usr/local/sbin:/usr/local/bin:/usr/bin
|
||||
# Shared with interactive dev builds (see ~/.config/fish/config.fish)
|
||||
# so a crate compiled once, by either a manual build or CI, is
|
||||
# cached for the other - real cache hits, not just a warm toolchain.
|
||||
# SCCACHE_SERVER_PORT deliberately differs from the interactive
|
||||
# dev shell's (4227): sccache's server is discovered by a fixed
|
||||
# TCP port shared by every local user, so if both contexts used
|
||||
# the same port, whichever one's server happened to be running
|
||||
# would silently "win" and serve build requests it doesn't have
|
||||
# filesystem permission for. Separate ports keep each context's
|
||||
# own server answering its own requests; the cache directory
|
||||
# (not the server process) is what's actually shared.
|
||||
SCCACHE_DIR: /var/local/sccache
|
||||
SCCACHE_SERVER_PORT: "4228"
|
||||
CARGO_TARGET_DIR: /var/local/cargo-target
|
||||
# cargo-leptos's own downloaded tools (wasm-bindgen, wasm-opt) cache
|
||||
# under $XDG_CACHE_HOME - left at its default that resolves inside
|
||||
# this unit's systemd StateDirectory, files it creates there end up
|
||||
# owned by the kernel's overflow "nobody" uid instead of the
|
||||
# runner's own dynamic uid (a StateDirectory quirk, not something
|
||||
# in our control), so a later run can't execute what an earlier run
|
||||
# downloaded. Redirecting it to our own known-good shared dir avoids
|
||||
# that entirely.
|
||||
XDG_CACHE_HOME: /var/local/leptos-cache
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
# SITE_NAME is read via option_env! (src/app.rs) - compile-time,
|
||||
# not a runtime env var. It is only the last-resort fallback name:
|
||||
# each instance's site.yaml (content-driven branding) overrides it,
|
||||
# so one artifact serves every site.
|
||||
- name: Build
|
||||
run: SITE_NAME=${{ vars.PORTAL_SITE_NAME }} cargo leptos build --release
|
||||
|
||||
# cargo-leptos only builds the leptos bin-target ("portal") - the
|
||||
# question-lint utility binary needs its own plain cargo build.
|
||||
- name: Build question-lint
|
||||
run: cargo build --release --bin question_lint --features ssr
|
||||
|
||||
- name: Package
|
||||
run: |
|
||||
set -euo pipefail
|
||||
tag="${{ github.ref_name }}"
|
||||
stage=$(mktemp -d)
|
||||
cp "$CARGO_TARGET_DIR/release/portal" "$stage/portal"
|
||||
cp "$CARGO_TARGET_DIR/release/question_lint" "$stage/question_lint"
|
||||
# hash-files = true: leptos resolves hash.txt next to the running
|
||||
# binary, so it ships beside portal in the release dir.
|
||||
cp "$CARGO_TARGET_DIR/release/hash.txt" "$stage/hash.txt"
|
||||
# site-root ("target/site" in Cargo.toml) is project-relative,
|
||||
# not affected by CARGO_TARGET_DIR - only the plain `cargo build`
|
||||
# outputs (release/, front/) move with that override.
|
||||
cp -r target/site "$stage/site"
|
||||
tar -C "$stage" -czf "portal-$tag.tar.gz" portal question_lint hash.txt site
|
||||
rm -rf "$stage"
|
||||
|
||||
# The run's own ephemeral token has write access to this repo -
|
||||
# no long-lived PAT to manage. The tag already exists (cargo
|
||||
# release pushed it), so the release attaches to it; a re-run
|
||||
# finds the existing release instead of failing.
|
||||
- name: Publish release
|
||||
run: |
|
||||
set -euo pipefail
|
||||
tag="${{ github.ref_name }}"
|
||||
api="${{ github.server_url }}/api/v1/repos/${{ github.repository }}"
|
||||
auth="Authorization: token ${{ secrets.GITHUB_TOKEN }}"
|
||||
subject=$(git log -1 --format=%s)
|
||||
body=$(printf '{"tag_name":"%s","name":"%s"}' \
|
||||
"$tag" "$tag: $(echo "$subject" | sed 's/"/\\"/g')")
|
||||
id=$(curl -sf -X POST -H "$auth" -H 'Content-Type: application/json' \
|
||||
-d "$body" "$api/releases" | jq .id) \
|
||||
|| id=$(curl -sf -H "$auth" "$api/releases/tags/$tag" | jq .id)
|
||||
# Replace the asset if a re-run already uploaded one.
|
||||
for aid in $(curl -sf -H "$auth" "$api/releases/$id/assets" | jq '.[].id'); do
|
||||
curl -sf -X DELETE -H "$auth" "$api/releases/$id/assets/$aid"
|
||||
done
|
||||
curl -sf -X POST -H "$auth" \
|
||||
-F "attachment=@portal-$tag.tar.gz" \
|
||||
"$api/releases/$id/assets?name=portal-$tag.tar.gz" > /dev/null
|
||||
echo "published $tag"
|
||||
@@ -0,0 +1,26 @@
|
||||
name: Test
|
||||
|
||||
# Publishing only happens on v* tags (publish.yml), so this is what
|
||||
# keeps plain main pushes honest between releases.
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [main]
|
||||
pull_request:
|
||||
|
||||
jobs:
|
||||
test:
|
||||
runs-on: bare
|
||||
env:
|
||||
# Same shared-toolchain/cache story as publish.yml.
|
||||
CARGO_HOME: /var/local/cargo
|
||||
RUSTUP_HOME: /var/local/rustup
|
||||
PATH: /var/local/cargo/bin:/usr/local/sbin:/usr/local/bin:/usr/bin
|
||||
SCCACHE_DIR: /var/local/sccache
|
||||
SCCACHE_SERVER_PORT: "4228"
|
||||
CARGO_TARGET_DIR: /var/local/cargo-target
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
- name: Test
|
||||
run: cargo test --features ssr
|
||||
@@ -1 +1,2 @@
|
||||
/target
|
||||
.claude/
|
||||
|
||||
Generated
+20
-1
@@ -2948,7 +2948,7 @@ dependencies = [
|
||||
|
||||
[[package]]
|
||||
name = "portal"
|
||||
version = "0.1.0"
|
||||
version = "0.3.9"
|
||||
dependencies = [
|
||||
"anyhow",
|
||||
"arc-swap",
|
||||
@@ -2970,6 +2970,7 @@ dependencies = [
|
||||
"leptos_router",
|
||||
"openidconnect",
|
||||
"proptest",
|
||||
"pulldown-cmark",
|
||||
"serde",
|
||||
"serde_json",
|
||||
"serde_yaml",
|
||||
@@ -3104,6 +3105,24 @@ dependencies = [
|
||||
"unarray",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "pulldown-cmark"
|
||||
version = "0.13.4"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "e9f068eba8e7071c5f9511831b44f32c740d5adf574e990f946ddb53db2f314e"
|
||||
dependencies = [
|
||||
"bitflags 2.13.1",
|
||||
"memchr",
|
||||
"pulldown-cmark-escape",
|
||||
"unicase",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "pulldown-cmark-escape"
|
||||
version = "0.11.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "007d8adb5ddab6f8e3f491ac63566a7d5002cc7ed73901f72057943fa71ae1ae"
|
||||
|
||||
[[package]]
|
||||
name = "quick-error"
|
||||
version = "1.2.3"
|
||||
|
||||
+20
-2
@@ -1,6 +1,6 @@
|
||||
[package]
|
||||
name = "portal"
|
||||
version = "0.1.0"
|
||||
version = "0.3.9"
|
||||
edition = "2021"
|
||||
|
||||
[lib]
|
||||
@@ -12,6 +12,9 @@ leptos_meta = { version = "0.8" }
|
||||
leptos_router = { version = "0.8" }
|
||||
serde = { version = "1", features = ["derive"] }
|
||||
serde_json = "1"
|
||||
# Inline markdown for content descriptions (links, emphasis, code) -
|
||||
# runs on both server and client renders, so not feature-gated.
|
||||
pulldown-cmark = { version = "0.13", default-features = false, features = ["html"] }
|
||||
|
||||
# --- server only ---
|
||||
leptos_axum = { version = "0.8", optional = true }
|
||||
@@ -19,7 +22,7 @@ axum = { version = "0.8", features = ["multipart"], optional = true }
|
||||
aws-sdk-s3 = { version = "1", optional = true }
|
||||
tokio = { version = "1", features = ["rt-multi-thread", "macros", "signal"], optional = true }
|
||||
tower = { version = "0.5", optional = true }
|
||||
tower-http = { version = "0.6", features = ["fs"], optional = true }
|
||||
tower-http = { version = "0.6", features = ["fs", "set-header"], optional = true }
|
||||
tower-sessions = { version = "0.14", optional = true }
|
||||
async-nats = { version = "0.38", optional = true }
|
||||
arc-swap = { version = "1", optional = true }
|
||||
@@ -131,3 +134,18 @@ bin-default-features = false
|
||||
lib-features = ["hydrate"]
|
||||
lib-default-features = false
|
||||
lib-profile-release = "wasm-release"
|
||||
# Content-hashed pkg names (portal.<hash>.js/wasm/css) + hash.txt: a
|
||||
# freshly served page can never reference a stale cached bundle - an
|
||||
# iPhone kept a heuristically-cached portal.js across three releases
|
||||
# and paired it with new wasm, silently killing hydration. Runtime
|
||||
# needs LEPTOS_HASH_FILES=true (set in each content repo's deploy env).
|
||||
hash-files = true
|
||||
|
||||
# cargo release <level> is how a portal version is cut: bump, commit,
|
||||
# tag v{{version}}, push. CI (publish.yml) reacts to the tag and
|
||||
# publishes the release artifact; nothing on crates.io.
|
||||
[package.metadata.release]
|
||||
publish = false
|
||||
push = true
|
||||
tag-name = "v{{version}}"
|
||||
pre-release-commit-message = "Release {{version}}"
|
||||
|
||||
@@ -1,17 +1,51 @@
|
||||
# portal
|
||||
|
||||
The question runtime behind [uhhm.no](https://uhhm.no). Every page,
|
||||
form, review desk, and state machine it serves is declared in the
|
||||
[`questions`](https://project.uhhm.no/uhhm/questions) content repo —
|
||||
this codebase is the engine that renders, enforces, and records, and
|
||||
it special-cases none of it.
|
||||
A content-driven question engine: one Rust binary that turns a Git
|
||||
repo of YAML into a live site — pages, forms, review desks, and state
|
||||
machines, with a durable event-sourced record of every answer
|
||||
underneath. The engine special-cases nothing: everything a site
|
||||
serves is declared in its content repo, and the same build serves any
|
||||
number of sites.
|
||||
|
||||
Point an instance at a content repo and that repo *is* the site:
|
||||
pages, copy, state graphs, branding, and even the landing hero
|
||||
(`site.yaml`: title, wordmark, and `hero: {kind: module, module:
|
||||
hero.js}` — a JavaScript module the content repo ships, served
|
||||
same-origin at `/site/<path>`, that portal mounts at parse time and
|
||||
stops on navigation; the YES canvas and redoal's sine swings are both
|
||||
content, not engine). Content
|
||||
pushes hot-reload every running instance; instances differ only by
|
||||
env vars. [uhhm.no](https://uhhm.no)
|
||||
([uhhm/questions](https://project.uhhm.no/uhhm/questions)) and
|
||||
[redoal.com](https://redoal.com)
|
||||
([redoal/questions](https://project.uhhm.no/redoal/questions)) are
|
||||
two faces of the same binary, deployed from the same release
|
||||
artifact.
|
||||
|
||||
It composes with the surrounding stack rather than bundling it: Gitea
|
||||
hosts and serves the content, NATS JetStream stores events and
|
||||
projections, Kanidm provides identity, and anything downstream
|
||||
(automations, newsletters, onboarding) subscribes to the answer
|
||||
stream.
|
||||
|
||||
## What the engine provides
|
||||
|
||||
- **Content-driven pages** (`src/content.rs`, `src/app.rs`): YAML
|
||||
loaded from Gitea at boot and hot-swapped on a NATS reload signal;
|
||||
a bad push keeps the last-good content serving. A page's `id` is
|
||||
its URL; `qualifies` gates it to a Kanidm group.
|
||||
a bad push keeps the last-good content serving. The `questions/`
|
||||
tree IS the router — file paths become URLs, `_section.yaml`
|
||||
applies criteria to a whole directory, `[name].yaml` pages serve
|
||||
any `/dir/<value>` with the segment fed into resource keys, and
|
||||
`requires_chain` gates a page on verifiable answer provenance next
|
||||
to `qualifies`' Kanidm-group identity gate (see
|
||||
`docs/design/filesystem-routes.md`).
|
||||
- **Announced pages** (`src/announce.rs`): a question with an
|
||||
`event: {starts, duration, place}` window is announced in the
|
||||
header (not the footer nav) while the window is open, becomes a
|
||||
followup when it closes, and its record in the runtime-owned
|
||||
`portal_events` bucket moves to `awaiting_summary` - a "post what
|
||||
happened" task any review desk can read, published on NATS like a
|
||||
decision. A one-minute sweeper keeps it all idempotent.
|
||||
- **State machines as content** (`src/aggregates/`): `aggregates.yaml`
|
||||
declares each bucket's states and legal transitions; the engine
|
||||
replays a record's event history and refuses undeclared moves, with
|
||||
@@ -28,8 +62,13 @@ it special-cases none of it.
|
||||
lineage; `?chain=` links carry it, and self-service transitions
|
||||
(unsubscribe) authorize by holding one.
|
||||
- **Live resources** (`src/resource.rs`): content can pull a KV
|
||||
bucket, Gitea starred/org repos, or any public JSON URL (SSRF
|
||||
fail-closed), reshaped by a content-declared `jq` filter.
|
||||
bucket, Gitea starred/org repos/releases, or any public JSON URL
|
||||
(SSRF fail-closed), reshaped by a content-declared `jq` filter.
|
||||
- **Input kinds as content**: a requirement's `type:` picks the
|
||||
widget — plain fields, a rich-text editor, or a `gesture` drawing
|
||||
canvas that can connect to a redoal relay so similar strokes echo
|
||||
between visitors live. Submitted values are arbitrary JSON; the
|
||||
engine records what the widget produced.
|
||||
- **Review desks**: any Kv resource with `transitions` renders rows
|
||||
with per-state action buttons and one shared confirm per
|
||||
alternative — owners walk records through their graphs without
|
||||
@@ -38,9 +77,10 @@ it special-cases none of it.
|
||||
## Binaries
|
||||
|
||||
- `portal` — the server (Leptos SSR + hydrate, Axum underneath).
|
||||
- `question_lint` — headless content validation, run by the
|
||||
`questions` repo's CI against a prebuilt copy this repo's deploy
|
||||
publishes; also works offline: `question_lint --path <dir>`.
|
||||
- `question_lint` — headless content validation, shipped inside every
|
||||
release artifact so each content repo's CI lints with the exact
|
||||
portal version its instance runs; also works offline:
|
||||
`question_lint --path <dir>`.
|
||||
|
||||
## Development
|
||||
|
||||
@@ -50,17 +90,58 @@ cargo test --features ssr # engine tests
|
||||
cargo build --features ssr --bin question_lint
|
||||
```
|
||||
|
||||
Runtime configuration is env vars (see `src/main.rs` and
|
||||
`.gitea/workflows/deploy.yml`): `NATS_URL`, `CONTENT_REPO`/
|
||||
`CONTENT_BRANCH`, Kanidm OIDC (`KANIDM_URL`, `OAUTH2_CLIENT_*`),
|
||||
optional `GARAGE_*` for uploads, `GITEA_API_TOKEN` for authenticated
|
||||
resource pulls, `AUTOMATION_READ_TOKEN` for the automation KV read
|
||||
endpoint.
|
||||
Runtime configuration is env vars (see `src/main.rs`, and each
|
||||
content repo's `.gitea/workflows/deploy.yml` for the values in
|
||||
production): `NATS_URL`, `CONTENT_REPO`/`CONTENT_BRANCH`, Kanidm OIDC
|
||||
(`KANIDM_URL`, `OAUTH2_CLIENT_*`), optional `GARAGE_*` for uploads,
|
||||
`GITEA_API_TOKEN` for authenticated resource pulls,
|
||||
`AUTOMATION_READ_TOKEN` for the automation KV read endpoint.
|
||||
|
||||
## Deploy
|
||||
## Release and deploy
|
||||
|
||||
Pushing `main` triggers `.gitea/workflows/deploy.yml` on the
|
||||
bare-metal runner: release build, ship to
|
||||
`/srv/app/uhhm-portal/releases/<sha>`, flip the `current` symlink,
|
||||
restart `app@uhhm-portal`, reload Caddy. Content changes never come
|
||||
through here — they hot-reload live from the `questions` repo.
|
||||
Portal doesn't deploy itself — it publishes versions, and each site
|
||||
decides when to take one. The whole day-to-day surface is two
|
||||
commands:
|
||||
|
||||
**Cut a release** (here):
|
||||
|
||||
```sh
|
||||
cargo release patch # or minor / major
|
||||
```
|
||||
|
||||
That bumps `Cargo.toml`, tags `v<version>`, and pushes; CI
|
||||
(`.gitea/workflows/publish.yml`) reacts to the tag, builds once, and
|
||||
attaches `portal-v<version>.tar.gz` (`portal` + `question_lint` +
|
||||
`hash.txt` + `site/`) to the Gitea release. Pkg files are
|
||||
content-hashed (`hash-files = true`; instances run with
|
||||
`LEPTOS_HASH_FILES=true`), so a freshly served page can never pair a
|
||||
stale cached bundle with new wasm. Plain pushes to `main` only run the
|
||||
tests (`test.yml`) — nothing reaches production from this repo.
|
||||
|
||||
**Roll it out** (in a content repo): edit one line in that repo's
|
||||
`.gitea/workflows/deploy.yml` —
|
||||
|
||||
```yaml
|
||||
env:
|
||||
PORTAL_RELEASE: v0.1.1 # <- bump, commit, push
|
||||
```
|
||||
|
||||
Its CI downloads the pinned artifact, ships
|
||||
`/srv/app/<instance>/releases/<tag>`, flips `current`, rewrites the
|
||||
instance env from that repo's own Actions variables/secrets, restarts
|
||||
`app@<instance>`, and refreshes the Caddy route. Every rollout is a
|
||||
commit, so reverting a bad version is `git revert` + push. Sites
|
||||
upgrade independently: uhhm.no (uhhm/questions → `app@uhhm-portal`,
|
||||
:3010) and redoal.com (redoal/questions → `app@redoal-portal`,
|
||||
:3020) can pin different versions.
|
||||
|
||||
Content changes never come through any of this — they hot-reload
|
||||
live from the content repos over NATS.
|
||||
|
||||
**Add a site**: new content repo with a copy of an existing
|
||||
`deploy.yml` (change `INSTANCE`, port, domains), Actions variables
|
||||
(`KANIDM_URL`, `OAUTH2_CLIENT_ID`, `PUBLIC_URL`, `SITE_NAME`) and
|
||||
secrets (`NATS_URL`, `OAUTH2_CLIENT_SECRET`,
|
||||
`PORTAL_GITEA_API_TOKEN` — Gitea reserves the `GITEA_` prefix for
|
||||
secret names), a Kanidm OAuth2 client, and DNS. `site.yaml` in the
|
||||
content repo handles all branding; no portal changes needed.
|
||||
|
||||
@@ -0,0 +1,133 @@
|
||||
# Filesystem routes, sections, and where chains fit
|
||||
|
||||
Status: implemented in v0.2.0 (2026-08-24) — all three phases, with
|
||||
one deviation: dynamic-page params substitute into resource keys via
|
||||
server-side `resolve_question` at lookup time (get_question,
|
||||
find_feature, submit_answer all resolve concrete paths), so no param
|
||||
threading exists client-side. The user-facing routing contract is
|
||||
documented in uhhm/questions' README ("Routing: the tree is the
|
||||
router"); this file stays as the design rationale.
|
||||
|
||||
## What exists today, precisely
|
||||
|
||||
- A question's `id` doubles as its URL. Filenames are meaningless:
|
||||
`questions/` is loaded as a **flat** directory (both the Gitea
|
||||
loader and `question_lint --path`), every `*.yaml` becomes a
|
||||
`Question` keyed by its own declared `id`.
|
||||
- Hierarchy exists only as strings: `action: /proposed` edges, plus a
|
||||
manual `followup: true` flag that hides post-submission pages from
|
||||
the nav. The graph is invisible in a repo listing — you open every
|
||||
file to learn the flow. (uhhm's actual graph: `/` fans out to three
|
||||
followups; `/develop` → `/develop-proposal` → `/proposed` is a
|
||||
two-step flow flattened into three top-level files.)
|
||||
- Criteria are per-file: `qualifies: <kanidm-group>` on a question,
|
||||
`requires_group` on a resource. Gating a whole area means
|
||||
repeating the flag in every file of that area.
|
||||
- Chains are query-string lineage: submitting hashes
|
||||
`(question, parents, responses, ts)` into `chain_hash`, the next
|
||||
page is `action + ?chain=<hash>`, and holding a chain is itself a
|
||||
capability (`self_transition` + email second factor). `chain.rs`
|
||||
reserves DAG shape (multiple parents) but nothing produces it yet.
|
||||
- `Question.route` is a declared-but-never-read field — a fossil of
|
||||
this exact idea.
|
||||
|
||||
## The proposal, in three phases
|
||||
|
||||
### Phase 1 — the tree is the router
|
||||
|
||||
Directory structure becomes the URL structure, next-js style:
|
||||
|
||||
```
|
||||
questions/
|
||||
index.yaml → /
|
||||
applied.yaml → /applied
|
||||
develop/
|
||||
index.yaml → /develop
|
||||
proposal.yaml → /develop/proposal
|
||||
proposed.yaml → /develop/proposed
|
||||
review/
|
||||
index.yaml → /review
|
||||
```
|
||||
|
||||
- `id:` becomes optional and **derived from the path** (`index.yaml`
|
||||
names its directory). An explicit `id:` still wins so both content
|
||||
repos keep working unchanged; lint warns when it disagrees with the
|
||||
path, and the field can retire later along with `route`.
|
||||
- `action:` accepts **relative references**: `action: proposed`
|
||||
resolves against the file's directory, `action: /subscribed` stays
|
||||
absolute. Resolution happens at load time, so validation and the
|
||||
runtime see absolute ids exactly as today. A flow directory becomes
|
||||
self-contained: rename `develop/` and every internal edge moves
|
||||
with it.
|
||||
- **`followup:` is inferred**: `index.yaml` files are nav pages,
|
||||
non-index files are followups unless they say `nav: true`. This
|
||||
matches the real content exactly (uhhm's four `followup: true`
|
||||
files are precisely its non-index leaf pages) and deletes a flag
|
||||
people must remember.
|
||||
- Loader: switch from the per-directory contents API to Gitea's git
|
||||
trees API (`/git/trees/{branch}?recursive=true`) — one request for
|
||||
the whole tree instead of one per directory, which the flat loader
|
||||
should be using anyway.
|
||||
|
||||
### Phase 2 — sections: criteria scoped by URL prefix
|
||||
|
||||
A `_section.yaml` in any directory applies to everything beneath it
|
||||
(underscore = not a page, like next's private folders):
|
||||
|
||||
```
|
||||
questions/review/_section.yaml:
|
||||
qualifies: portal_owners
|
||||
responsible: { name: Bendik, contact: … }
|
||||
```
|
||||
|
||||
This is the URL/criteria interplay actually worth having: **a URL
|
||||
prefix becomes a trust boundary**. "Everything under /review is
|
||||
owner-only" is one line in one place, instead of a flag per file that
|
||||
drifts. Per-question `qualifies` still overrides (tighter or looser —
|
||||
lint should warn on looser). Sections are also the natural home for
|
||||
shared `responsible` contacts and, later, per-section branding
|
||||
accents.
|
||||
|
||||
### Phase 3 — dynamic segments, and chains stay out of the path
|
||||
|
||||
Two criteria axes exist: **who you are** (Kanidm group) and **what
|
||||
you've done** (holding a chain). Phase 2 scopes the first by prefix;
|
||||
phase 3 does the same for the second, plus gives records addresses:
|
||||
|
||||
- `[record].yaml` — a dynamic segment, one YAML file rendered per
|
||||
record: `questions/review/[record].yaml` serves `/review/<key>`,
|
||||
with the param available to the page's `ResourceSpec.key`. Today a
|
||||
single record is only reachable through a desk row or a
|
||||
`?chain=` link; this gives every record a real, gated URL —
|
||||
linkable from review desks, automations, and n8n notifications.
|
||||
- `requires_chain: <question-ref>` (page- or section-level): the page
|
||||
only renders for a visitor whose chain tip answers the referenced
|
||||
question. Today's followup pages are soft-hidden (out of nav) but
|
||||
fully reachable; this makes "you must have come from X" an actual
|
||||
criterion, declared with a relative ref like actions are.
|
||||
|
||||
**Deliberately not proposed: encoding the chain in the path.** The
|
||||
page tree is static structure; the chain is runtime lineage and a
|
||||
bearer capability. Putting it in the path makes it look canonical and
|
||||
shareable — exactly what a capability URL shouldn't invite — and a
|
||||
DAG (the reserved multi-parent shape) doesn't linearize into a path
|
||||
anyway. `?chain=` stays a query parameter: pages keep one canonical
|
||||
URL, lineage rides along only when it's actually held.
|
||||
|
||||
## Migration
|
||||
|
||||
Phase 1 is fully backward compatible (explicit `id` wins, flat repos
|
||||
are just trees of depth one). The content repos migrate by `git mv`:
|
||||
uhhm's develop flow nests under `develop/`, its followups either stay
|
||||
top-level (`/applied` keeps its URL) or move with their flows if URL
|
||||
churn is acceptable; redoal's three files are already the tree. Lint
|
||||
learns the same resolution rules in the same commit, so a bad
|
||||
reference stays a caught push, never a 404.
|
||||
|
||||
## Order of value
|
||||
|
||||
Phase 1 is cheap and pays immediately (the repo listing becomes the
|
||||
sitemap). Phase 2 is small and unlocks gated areas properly. Phase 3
|
||||
is the real feature work — `[record]` pages change what desks and
|
||||
automations can link to — and can wait until something concrete needs
|
||||
it.
|
||||
+378
@@ -0,0 +1,378 @@
|
||||
// The `type: gesture` requirement widget: draw one stroke on a canvas,
|
||||
// and the stroke becomes the field's value. Mirrors the two house
|
||||
// patterns at once:
|
||||
//
|
||||
// - prosekit-editor.js's hidden-input bridge: the widget writes JSON
|
||||
// into a paired hidden <input> and fires a real bubbling `input`
|
||||
// event, so the Rust side reuses the exact same RwSignal/on:input
|
||||
// wiring every other field kind uses - no bespoke value channel.
|
||||
// - yes.js's lifecycle: mountGesture returns a handle whose stop()
|
||||
// tears everything down (socket, listeners, rAF), because SPA
|
||||
// navigation never unloads the document.
|
||||
//
|
||||
// When a relay URL is given, the widget also speaks the redoal-relay
|
||||
// protocol (ADR-0013 in the redoal repo): announce the stroke, receive
|
||||
// an ack carrying the stroke's gesture key plus the key's own decoded
|
||||
// path - "what the network heard", drawn as a ghost under the stroke
|
||||
// when the key is v2 or later (ADR-0014's ordered turning chain; a v1
|
||||
// key's histogram decode is a blob and stays hidden) - and receive
|
||||
// echoes of similar strokes other visitors drew, shown as thumbnails.
|
||||
// Everything network is best-effort: no relay, refused connection, or
|
||||
// a dropped socket all degrade to a plain offline drawing input.
|
||||
//
|
||||
// Canvas colors can't come from CSS custom properties (same
|
||||
// constraint yes.js documents), so the widget carries its own copy of
|
||||
// the palette for both themes - any palette change must land here AND
|
||||
// in style/main.css.
|
||||
|
||||
const THEMES = {
|
||||
dark: {
|
||||
stroke: '#8ec2c0',
|
||||
echo: '#8ec2c0',
|
||||
ghost: 'rgba(255, 255, 255, 0.28)',
|
||||
},
|
||||
light: {
|
||||
stroke: '#47807e',
|
||||
echo: '#47807e',
|
||||
ghost: 'rgba(29, 29, 27, 0.30)',
|
||||
},
|
||||
};
|
||||
|
||||
const MIN_POINT_DISTANCE = 3; // css px between recorded points
|
||||
const MAX_ECHOES = 8;
|
||||
const RECONNECT_BASE_MS = 1000;
|
||||
const RECONNECT_MAX_MS = 30000;
|
||||
|
||||
class GestureWidget {
|
||||
constructor(container, hidden, relayUrl) {
|
||||
this.container = container;
|
||||
this.hidden = hidden || null;
|
||||
this.relayUrl = relayUrl || '';
|
||||
this.ghost = null;
|
||||
this.ownKey = null;
|
||||
this.selected = null; // {key, path, distance} - a place the visitor picked
|
||||
this.seenKeys = new Set();
|
||||
this.points = [];
|
||||
this.drawing = false;
|
||||
this.stopped = false;
|
||||
this.ws = null;
|
||||
this.reconnectDelay = RECONNECT_BASE_MS;
|
||||
this.reconnectTimer = null;
|
||||
this.pendingAnnounce = null;
|
||||
|
||||
this.canvas = document.createElement('canvas');
|
||||
this.canvas.className = 'gesture-canvas';
|
||||
container.appendChild(this.canvas);
|
||||
this.echoes = document.createElement('div');
|
||||
this.echoes.className = 'gesture-echoes';
|
||||
this.echoes.setAttribute('role', 'listbox');
|
||||
this.echoes.setAttribute('aria-label', 'places near your shape');
|
||||
container.appendChild(this.echoes);
|
||||
this.empty = document.createElement('p');
|
||||
this.empty.className = 'gesture-empty';
|
||||
container.appendChild(this.empty);
|
||||
if (this.relayUrl) {
|
||||
this.status = document.createElement('span');
|
||||
this.status.className = 'gesture-status offline';
|
||||
this.status.setAttribute('aria-label', 'relay connection');
|
||||
container.appendChild(this.status);
|
||||
}
|
||||
|
||||
this._themeQuery = window.matchMedia('(prefers-color-scheme: light)');
|
||||
this._onTheme = () => this.render();
|
||||
this._themeQuery.addEventListener('change', this._onTheme);
|
||||
|
||||
this._onResize = () => { this.sizeCanvas(); this.render(); };
|
||||
window.addEventListener('resize', this._onResize);
|
||||
this.sizeCanvas();
|
||||
|
||||
this._onDown = (e) => this.beginStroke(e);
|
||||
this._onMove = (e) => this.extendStroke(e);
|
||||
this._onUp = (e) => this.endStroke(e);
|
||||
this.canvas.addEventListener('pointerdown', this._onDown);
|
||||
this.canvas.addEventListener('pointermove', this._onMove);
|
||||
this.canvas.addEventListener('pointerup', this._onUp);
|
||||
this.canvas.addEventListener('pointercancel', this._onUp);
|
||||
|
||||
if (this.relayUrl) this.connect();
|
||||
}
|
||||
|
||||
theme() {
|
||||
return this._themeQuery.matches ? THEMES.light : THEMES.dark;
|
||||
}
|
||||
|
||||
sizeCanvas() {
|
||||
const rect = this.canvas.getBoundingClientRect();
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
this.canvas.width = Math.max(1, Math.round(rect.width * dpr));
|
||||
this.canvas.height = Math.max(1, Math.round(rect.height * dpr));
|
||||
this.ctx = this.canvas.getContext('2d');
|
||||
this.ctx.scale(dpr, dpr);
|
||||
this.cssWidth = rect.width;
|
||||
this.cssHeight = rect.height;
|
||||
}
|
||||
|
||||
pos(e) {
|
||||
const rect = this.canvas.getBoundingClientRect();
|
||||
return { x: e.clientX - rect.left, y: e.clientY - rect.top };
|
||||
}
|
||||
|
||||
beginStroke(e) {
|
||||
e.preventDefault();
|
||||
this.canvas.setPointerCapture(e.pointerId);
|
||||
// One stroke only - a new pointerdown replaces the old drawing
|
||||
// (and any ghost from the previous round).
|
||||
this.drawing = true;
|
||||
this.ghost = null;
|
||||
this.ownKey = null;
|
||||
this.selected = null;
|
||||
this.seenKeys.clear();
|
||||
this.echoes.replaceChildren();
|
||||
this.empty.textContent = '';
|
||||
this.points = [this.pos(e)];
|
||||
this.render();
|
||||
}
|
||||
|
||||
extendStroke(e) {
|
||||
if (!this.drawing) return;
|
||||
const p = this.pos(e);
|
||||
const last = this.points[this.points.length - 1];
|
||||
const dx = p.x - last.x, dy = p.y - last.y;
|
||||
if (Math.sqrt(dx * dx + dy * dy) < MIN_POINT_DISTANCE) return;
|
||||
this.points.push(p);
|
||||
this.render();
|
||||
}
|
||||
|
||||
endStroke() {
|
||||
if (!this.drawing) return;
|
||||
this.drawing = false;
|
||||
if (this.points.length < 2) return;
|
||||
const normalized = this.normalized();
|
||||
this.setValue({ points: normalized, key: null });
|
||||
this.announce(normalized);
|
||||
}
|
||||
|
||||
// Canvas-frame normalization into the -1..1 square (the relay
|
||||
// re-normalizes around the stroke itself before keying - this
|
||||
// just bounds the payload and keeps the stored value
|
||||
// resolution-independent).
|
||||
normalized() {
|
||||
const half = Math.max(this.cssWidth, this.cssHeight) / 2;
|
||||
const cx = this.cssWidth / 2, cy = this.cssHeight / 2;
|
||||
return this.points.map((p) => [
|
||||
Math.round(((p.x - cx) / half) * 10000) / 10000,
|
||||
Math.round(((p.y - cy) / half) * 10000) / 10000,
|
||||
]);
|
||||
}
|
||||
|
||||
setValue(value) {
|
||||
if (!this.hidden) return;
|
||||
this.hidden.value = JSON.stringify(value);
|
||||
this.hidden.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
}
|
||||
|
||||
// ── Relay ──────────────────────────────────────────────────────
|
||||
|
||||
connect() {
|
||||
if (this.stopped) return;
|
||||
let ws;
|
||||
try {
|
||||
ws = new WebSocket(this.relayUrl);
|
||||
} catch {
|
||||
this.scheduleReconnect();
|
||||
return;
|
||||
}
|
||||
this.ws = ws;
|
||||
ws.addEventListener('open', () => {
|
||||
if (this.stopped) return;
|
||||
this.reconnectDelay = RECONNECT_BASE_MS;
|
||||
this.status?.classList.replace('offline', 'live');
|
||||
if (this.pendingAnnounce) {
|
||||
ws.send(JSON.stringify({ type: 'announce', points: this.pendingAnnounce }));
|
||||
this.pendingAnnounce = null;
|
||||
}
|
||||
});
|
||||
ws.addEventListener('message', (e) => this.onMessage(e));
|
||||
ws.addEventListener('close', () => {
|
||||
this.status?.classList.replace('live', 'offline');
|
||||
this.ws = null;
|
||||
this.scheduleReconnect();
|
||||
});
|
||||
// 'error' is always followed by 'close'; nothing to do here.
|
||||
}
|
||||
|
||||
scheduleReconnect() {
|
||||
if (this.stopped || this.reconnectTimer) return;
|
||||
this.reconnectTimer = setTimeout(() => {
|
||||
this.reconnectTimer = null;
|
||||
this.connect();
|
||||
}, this.reconnectDelay);
|
||||
this.reconnectDelay = Math.min(this.reconnectDelay * 2, RECONNECT_MAX_MS);
|
||||
}
|
||||
|
||||
announce(points) {
|
||||
if (!this.relayUrl) return;
|
||||
if (this.ws && this.ws.readyState === WebSocket.OPEN) {
|
||||
this.ws.send(JSON.stringify({ type: 'announce', points }));
|
||||
} else {
|
||||
this.pendingAnnounce = points;
|
||||
}
|
||||
}
|
||||
|
||||
onMessage(e) {
|
||||
let msg;
|
||||
try {
|
||||
msg = JSON.parse(e.data);
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
if (msg.type === 'ack') {
|
||||
this.ownKey = msg.key;
|
||||
// Version nibble is the key's first hex digit.
|
||||
const version = parseInt((msg.key || '0')[0], 16);
|
||||
this.ownGhost = version >= 2 && Array.isArray(msg.path) ? msg.path : null;
|
||||
this.applySelection();
|
||||
// Places arrive right after the ack; say so if none do.
|
||||
clearTimeout(this.emptyTimer);
|
||||
this.emptyTimer = setTimeout(() => {
|
||||
if (!this.echoes.children.length) this.empty.textContent = msg.empty || 'Nothing kept at this shape yet.';
|
||||
}, 1500);
|
||||
} else if (msg.type === 'echo' || msg.type === 'place') {
|
||||
if (!msg.key || this.seenKeys.has(msg.key)) return;
|
||||
this.seenKeys.add(msg.key);
|
||||
this.empty.textContent = '';
|
||||
this.addEchoThumbnail(msg);
|
||||
}
|
||||
// 'error' frames are intentionally silent: the widget is a
|
||||
// form field first, and a rate-limited announce shouldn't
|
||||
// alarm anyone mid-form.
|
||||
}
|
||||
|
||||
// The key the input carries: the visitor's own, or the place they
|
||||
// picked (selection re-derives the key - the ghost under the
|
||||
// stroke becomes that place's decode, and the answer records both).
|
||||
applySelection() {
|
||||
if (this.points.length < 2) return;
|
||||
const points = this.normalized();
|
||||
if (this.selected) {
|
||||
this.ghost = this.selected.path;
|
||||
this.setValue({ points, key: this.selected.key, own_key: this.ownKey, selected_from: this.ownKey, selected_distance: this.selected.distance });
|
||||
} else {
|
||||
this.ghost = this.ownGhost || null;
|
||||
this.setValue({ points, key: this.ownKey });
|
||||
}
|
||||
for (const el of this.echoes.children) {
|
||||
el.classList.toggle('selected', !!this.selected && el.dataset.key === this.selected.key);
|
||||
el.setAttribute('aria-selected', String(!!this.selected && el.dataset.key === this.selected.key));
|
||||
}
|
||||
this.render();
|
||||
}
|
||||
|
||||
select(thumb) {
|
||||
const key = thumb.dataset.key;
|
||||
if (this.selected && this.selected.key === key) {
|
||||
this.selected = null;
|
||||
} else {
|
||||
this.selected = { key, path: JSON.parse(thumb.dataset.path), distance: Number(thumb.dataset.distance) };
|
||||
}
|
||||
this.applySelection();
|
||||
}
|
||||
|
||||
addEchoThumbnail(msg) {
|
||||
const thumb = document.createElement('canvas');
|
||||
thumb.className = 'gesture-echo' + (msg.type === 'place' ? ' place' : '');
|
||||
thumb.dataset.key = msg.key;
|
||||
thumb.dataset.path = JSON.stringify(msg.path || []);
|
||||
thumb.dataset.distance = String(msg.distance || 0);
|
||||
thumb.setAttribute('role', 'option');
|
||||
thumb.setAttribute('tabindex', '0');
|
||||
thumb.setAttribute('aria-selected', 'false');
|
||||
thumb.title = msg.type === 'place'
|
||||
? `A place with ${msg.recordings || 0} recording${msg.recordings === 1 ? '' : 's'} - tap to make it your address`
|
||||
: 'Someone at this shape right now';
|
||||
thumb.addEventListener('click', () => this.select(thumb));
|
||||
thumb.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this.select(thumb); } });
|
||||
// Closer strokes render stronger; 500 is comfortably past the
|
||||
// relay's default threshold, so everything stays visible.
|
||||
const strength = Math.max(0.35, Math.min(1, 1 - msg.distance / 500));
|
||||
thumb.style.setProperty('--echo-strength', String(strength));
|
||||
this.echoes.prepend(thumb);
|
||||
while (this.echoes.children.length > MAX_ECHOES) {
|
||||
this.echoes.lastChild.remove();
|
||||
}
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
const rect = thumb.getBoundingClientRect();
|
||||
thumb.width = Math.max(1, Math.round(rect.width * dpr));
|
||||
thumb.height = Math.max(1, Math.round(rect.height * dpr));
|
||||
const ctx = thumb.getContext('2d');
|
||||
ctx.scale(dpr, dpr);
|
||||
this.drawPath(ctx, msg.path, rect.width, rect.height, this.theme().echo, 1.5, 0.15);
|
||||
// A timeout, not requestAnimationFrame: the class must land on
|
||||
// a later tick for the opacity transition to run, and rAF
|
||||
// doesn't tick at all in headless engines.
|
||||
setTimeout(() => thumb.classList.add('shown'), 30);
|
||||
}
|
||||
|
||||
// ── Rendering ──────────────────────────────────────────────────
|
||||
|
||||
// Draw a normalized (-1..1) path fitted into w×h with padding.
|
||||
drawPath(ctx, path, w, h, color, width, pad) {
|
||||
if (!path || path.length < 2) return;
|
||||
const scale = (Math.min(w, h) / 2) * (1 - pad);
|
||||
const cx = w / 2, cy = h / 2;
|
||||
ctx.strokeStyle = color;
|
||||
ctx.lineWidth = width;
|
||||
ctx.lineCap = 'round';
|
||||
ctx.lineJoin = 'round';
|
||||
ctx.beginPath();
|
||||
path.forEach(([x, y], i) => {
|
||||
const px = cx + x * scale, py = cy + y * scale;
|
||||
if (i === 0) ctx.moveTo(px, py);
|
||||
else ctx.lineTo(px, py);
|
||||
});
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
render() {
|
||||
if (!this.ctx) return;
|
||||
const t = this.theme();
|
||||
this.ctx.clearRect(0, 0, this.cssWidth, this.cssHeight);
|
||||
if (this.ghost) {
|
||||
this.drawPath(this.ctx, this.ghost, this.cssWidth, this.cssHeight, t.ghost, 2, 0.2);
|
||||
}
|
||||
if (this.points.length >= 1) {
|
||||
this.ctx.strokeStyle = t.stroke;
|
||||
this.ctx.lineWidth = 2;
|
||||
this.ctx.lineCap = 'round';
|
||||
this.ctx.lineJoin = 'round';
|
||||
this.ctx.beginPath();
|
||||
this.points.forEach((p, i) => {
|
||||
if (i === 0) this.ctx.moveTo(p.x, p.y);
|
||||
else this.ctx.lineTo(p.x, p.y);
|
||||
});
|
||||
this.ctx.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
stop() {
|
||||
this.stopped = true;
|
||||
clearTimeout(this.emptyTimer);
|
||||
if (this.reconnectTimer) clearTimeout(this.reconnectTimer);
|
||||
if (this.ws) {
|
||||
// The close event still fires, but scheduleReconnect
|
||||
// no-ops once stopped is set.
|
||||
try { this.ws.close(); } catch { /* already dead */ }
|
||||
this.ws = null;
|
||||
}
|
||||
window.removeEventListener('resize', this._onResize);
|
||||
this._themeQuery.removeEventListener('change', this._onTheme);
|
||||
this.canvas.removeEventListener('pointerdown', this._onDown);
|
||||
this.canvas.removeEventListener('pointermove', this._onMove);
|
||||
this.canvas.removeEventListener('pointerup', this._onUp);
|
||||
this.canvas.removeEventListener('pointercancel', this._onUp);
|
||||
}
|
||||
}
|
||||
|
||||
export function mountGesture(container, hidden, relayUrl) {
|
||||
return new GestureWidget(container, hidden, relayUrl);
|
||||
}
|
||||
+9
-4
@@ -129,15 +129,17 @@ function defineGiteaRepoEmbed() {
|
||||
'data-description': description,
|
||||
'data-url': url,
|
||||
style:
|
||||
'display:block;border:1px solid #ddd;border-radius:8px;' +
|
||||
'padding:12px 16px;margin:8px 0;font-family:inherit;',
|
||||
'display:block;border:0.06em solid #ddd;border-radius:0.5em;' +
|
||||
'padding:0.75em 1em;margin:0.5em 0;font-family:inherit;',
|
||||
},
|
||||
[
|
||||
'a',
|
||||
{ href: url, style: 'font-weight:600;text-decoration:none;color:inherit;' },
|
||||
`${owner}/${repo}`,
|
||||
],
|
||||
['div', { style: 'opacity:0.7;font-size:0.9em;margin-top:4px;' }, description],
|
||||
// Solid mid-gray, not opacity - dim on both the newsletter's
|
||||
// light client background and this app's dark paper.
|
||||
['div', { style: 'color:#9a9a9a;font-size:0.9rem;margin-top:0.25em;' }, description],
|
||||
]
|
||||
},
|
||||
})
|
||||
@@ -283,8 +285,11 @@ function buildToolbar(editor) {
|
||||
}
|
||||
|
||||
export function mountEditor(container, hiddenInput, initial) {
|
||||
// Only the structural stylesheet (placeholder, lists, gap cursor).
|
||||
// Deliberately NOT prosekit/basic/typography.css: it sizes content in
|
||||
// fixed px, which fights the app's responsive root font-size. All
|
||||
// editor typography lives in our own stylesheet, in rem.
|
||||
ensureStylesheet('https://esm.sh/prosekit/basic/style.css')
|
||||
ensureStylesheet('https://esm.sh/prosekit/basic/typography.css')
|
||||
|
||||
const extension = union(
|
||||
defineBasicExtension(),
|
||||
|
||||
@@ -30,6 +30,12 @@ pub struct AggregateSchema {
|
||||
pub event_for_state: HashMap<String, String>,
|
||||
pub state_for_event: HashMap<String, String>,
|
||||
pub transitions: HashMap<String, Vec<String>>,
|
||||
/// Names what consumes this bucket's answers when no page in the
|
||||
/// content repo reads it (e.g. "n8n newsletter compose").
|
||||
/// Free-text - it exists so `validate_questions`' attended-bucket
|
||||
/// rule has an explicit, auditable opt-out instead of a silent
|
||||
/// one, and so the next reader knows where the answers go.
|
||||
pub attended_by: Option<String>,
|
||||
}
|
||||
|
||||
impl AggregateSchema {
|
||||
@@ -57,6 +63,8 @@ struct RawAggregateSchema {
|
||||
states: HashMap<String, RawState>,
|
||||
#[serde(default)]
|
||||
transitions: HashMap<String, Vec<String>>,
|
||||
#[serde(default)]
|
||||
attended_by: Option<String>,
|
||||
}
|
||||
|
||||
#[derive(Debug, serde::Deserialize)]
|
||||
@@ -123,6 +131,7 @@ pub fn parse_aggregates_yaml(raw: &str) -> anyhow::Result<HashMap<String, Aggreg
|
||||
event_for_state,
|
||||
state_for_event,
|
||||
transitions: raw_schema.transitions,
|
||||
attended_by: raw_schema.attended_by,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
+147
@@ -0,0 +1,147 @@
|
||||
//! Announced pages (`Question.event`): keeps one `portal_events` record
|
||||
//! per event question and, once a window closes, moves it to
|
||||
//! `awaiting_summary` - the "post what happened" task - publishing the
|
||||
//! transition on `portal.answers.submitted` like any desk decision, so
|
||||
//! the desktop notifier and n8n hear it. Runs on a one-minute tick;
|
||||
//! every step is idempotent, so a restart or a content reload in the
|
||||
//! middle changes nothing.
|
||||
|
||||
use crate::answers::{store_answer, Answer};
|
||||
use crate::content::EVENTS_BUCKET;
|
||||
use crate::events::{emit_answer_submitted, AnswerSubmitted};
|
||||
use crate::server::AppState;
|
||||
|
||||
/// Alternative name stamped on the auto-created record and on the
|
||||
/// transition event - what an n8n workflow gates on.
|
||||
pub const EVENT_ALTERNATIVE: &str = "Announced";
|
||||
pub const SUMMARY_DUE_LABEL: &str = "Summary due";
|
||||
|
||||
/// Record id for an event question: its id with `/` folded to `-`
|
||||
/// (`/events/opening` -> `events-opening`), so one page is one record
|
||||
/// however many times the sweeper runs.
|
||||
pub fn record_id(question_id: &str) -> String {
|
||||
question_id.trim_matches('/').replace('/', "-")
|
||||
}
|
||||
|
||||
pub async fn run(state: AppState) {
|
||||
let mut tick = tokio::time::interval(std::time::Duration::from_secs(60));
|
||||
loop {
|
||||
tick.tick().await;
|
||||
if let Err(e) = sweep(&state).await {
|
||||
tracing::warn!(error = %e, "event sweep failed");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// One pass: create missing records, close ended windows.
|
||||
pub async fn sweep(state: &AppState) -> anyhow::Result<()> {
|
||||
let now_ms = chrono::Utc::now().timestamp_millis();
|
||||
let questions = state.questions.load();
|
||||
let events: Vec<_> = questions.values().filter(|q| q.event.is_some()).cloned().collect();
|
||||
if events.is_empty() {
|
||||
return Ok(());
|
||||
}
|
||||
let aggregates = state.aggregates.load();
|
||||
let schema = aggregates
|
||||
.get(EVENTS_BUCKET)
|
||||
.ok_or_else(|| anyhow::anyhow!("no {EVENTS_BUCKET} schema"))?;
|
||||
let store = match state.jetstream.get_key_value(EVENTS_BUCKET).await {
|
||||
Ok(store) => Some(store),
|
||||
Err(_) => None,
|
||||
};
|
||||
|
||||
for q in events {
|
||||
let event = q.event.as_ref().expect("filtered");
|
||||
let (starts, ends) = match event.window_ms() {
|
||||
Ok(w) => w,
|
||||
Err(_) => continue, // validated on load; belt and braces
|
||||
};
|
||||
let id = record_id(&q.id);
|
||||
let existing: Option<Answer> = match &store {
|
||||
Some(store) => store
|
||||
.get(&id)
|
||||
.await?
|
||||
.and_then(|bytes| serde_json::from_slice(&bytes).ok()),
|
||||
None => None,
|
||||
};
|
||||
let responses = serde_json::json!({
|
||||
"name": q.name,
|
||||
"starts": event.starts,
|
||||
"starts_ms": starts,
|
||||
"ends_ms": ends,
|
||||
"place": event.place,
|
||||
"page": q.id,
|
||||
});
|
||||
|
||||
let answer = match existing {
|
||||
None => {
|
||||
store_answer(
|
||||
&state.jetstream,
|
||||
&aggregates,
|
||||
EVENTS_BUCKET,
|
||||
id.clone(),
|
||||
&q.id,
|
||||
EVENT_ALTERNATIVE,
|
||||
&responses,
|
||||
now_ms,
|
||||
)
|
||||
.await?;
|
||||
tracing::info!(question = %q.id, "event record created");
|
||||
continue;
|
||||
}
|
||||
Some(a) => a,
|
||||
};
|
||||
|
||||
if answer.state == schema.initial && now_ms >= ends {
|
||||
let target = "awaiting_summary";
|
||||
let payload = serde_json::json!({ "to": target, "item": id, "by": "portal" });
|
||||
match crate::aggregates::transition(&state.jetstream, schema, &id, target, payload.clone(), now_ms).await {
|
||||
Ok(_) => {}
|
||||
Err(crate::aggregates::TransitionError::UnknownAggregate) => {
|
||||
crate::aggregates::reseed(&state.jetstream, schema, &id, &answer.state, now_ms)
|
||||
.await
|
||||
.map_err(|e| anyhow::anyhow!("{e}"))?;
|
||||
crate::aggregates::transition(&state.jetstream, schema, &id, target, payload.clone(), now_ms)
|
||||
.await
|
||||
.map_err(|e| anyhow::anyhow!("{e}"))?;
|
||||
}
|
||||
Err(e) => return Err(anyhow::anyhow!("{e}")),
|
||||
}
|
||||
let mut answer = answer;
|
||||
answer.state = target.to_string();
|
||||
answer.decided_ms = Some(now_ms);
|
||||
answer.decided_by = Some("portal".to_string());
|
||||
let store = state.jetstream.get_key_value(EVENTS_BUCKET).await?;
|
||||
store.put(&id, serde_json::to_vec(&answer)?.into()).await?;
|
||||
|
||||
let parent_hashes = vec![id.clone()];
|
||||
let chain_hash = crate::chain::hash_node(&q.id, &parent_hashes, &payload, now_ms);
|
||||
emit_answer_submitted(
|
||||
&state.nats,
|
||||
&AnswerSubmitted {
|
||||
chain_hash,
|
||||
parent_hashes,
|
||||
question_id: q.id.clone(),
|
||||
alternative: SUMMARY_DUE_LABEL.to_string(),
|
||||
responses: payload,
|
||||
timestamp_ms: now_ms,
|
||||
},
|
||||
)
|
||||
.await?;
|
||||
tracing::info!(question = %q.id, "event ended - summary due");
|
||||
}
|
||||
}
|
||||
Ok(())
|
||||
}
|
||||
|
||||
#[cfg(test)]
|
||||
mod tests {
|
||||
use super::record_id;
|
||||
|
||||
#[test]
|
||||
fn record_id_is_stable_and_flat() {
|
||||
assert_eq!(record_id("/events/opening"), "events-opening");
|
||||
assert_eq!(record_id("/"), "");
|
||||
assert_eq!(record_id("/opening"), "opening");
|
||||
}
|
||||
}
|
||||
+2
-2
@@ -101,7 +101,7 @@ pub struct TransitionItem {
|
||||
/// (the shared per-alternative Confirm button). Items are independent
|
||||
/// - per-item CAS, no cross-item transaction - so one failure doesn't
|
||||
/// roll back the others; failures are collected and reported together.
|
||||
#[server]
|
||||
#[server(endpoint = "transition_answers")]
|
||||
pub async fn transition_answers(
|
||||
question_id: String,
|
||||
alternative: String,
|
||||
@@ -289,7 +289,7 @@ async fn apply_transition(
|
||||
/// itself. Deliberately returns the same generic error for "no such
|
||||
/// item" and "email doesn't match", so an unsubscribe link can't be
|
||||
/// used to probe which hashes or emails exist.
|
||||
#[server]
|
||||
#[server(endpoint = "self_transition_answer")]
|
||||
pub async fn self_transition_answer(
|
||||
question_id: String,
|
||||
alternative: String,
|
||||
|
||||
+546
-96
@@ -1,5 +1,5 @@
|
||||
use leptos::prelude::*;
|
||||
use leptos_meta::{provide_meta_context, MetaTags, Stylesheet, Title};
|
||||
use leptos_meta::{provide_meta_context, HashedStylesheet, MetaTags, Title};
|
||||
use leptos_router::{
|
||||
components::{Route, Router, Routes},
|
||||
hooks::{use_location, use_navigate, use_query_map},
|
||||
@@ -9,7 +9,7 @@ use serde::{Deserialize, Serialize};
|
||||
|
||||
use crate::answers::{Answer, SelfTransitionAnswer, TransitionAnswers, TransitionItem};
|
||||
use crate::auth::{current_user, User};
|
||||
use crate::content::{is_qualified, Alternative, Question, Responsible, Transition};
|
||||
use crate::content::{is_qualified, render_inline_markdown, Alternative, Question, Responsible, SiteConfig, Transition};
|
||||
use crate::resource::{get_requirement_binding, get_requirement_options, get_resource};
|
||||
|
||||
/// The visible site name/wordmark - "portal" is just this codebase's
|
||||
@@ -39,6 +39,9 @@ pub fn shell(options: LeptosOptions) -> impl IntoView {
|
||||
// once loaded via <link>/<img> on Safari/iOS.
|
||||
<link rel="icon" media="(prefers-color-scheme: light)" href="/favicon-light.svg" type="image/svg+xml"/>
|
||||
<link rel="icon" media="(prefers-color-scheme: dark)" href="/favicon-dark.svg" type="image/svg+xml"/>
|
||||
// Server-side, so it can read hash.txt and link the
|
||||
// content-hashed stylesheet (hash-files = true).
|
||||
<HashedStylesheet id="leptos" options=options.clone()/>
|
||||
<AutoReload options=options.clone()/>
|
||||
<HydrationScripts options/>
|
||||
<MetaTags/>
|
||||
@@ -54,20 +57,75 @@ pub fn shell(options: LeptosOptions) -> impl IntoView {
|
||||
pub fn App() -> impl IntoView {
|
||||
provide_meta_context();
|
||||
|
||||
// ONE site resource and ONE <Title> for the whole app, both living
|
||||
// outside the router. Two dueling Title components (a static
|
||||
// SITE_NAME fallback here + a per-page override) turned every SPA
|
||||
// navigation into a remount race that the compile-time fallback
|
||||
// kept winning - redoal.com's tab flipped to "uhhm" on the first
|
||||
// client-side nav. App never remounts, so this Title never
|
||||
// unmounts; the Suspense makes SSR await the resolved title so the
|
||||
// served <head> is right too. Pages read the same resource via
|
||||
// context instead of fetching their own copy.
|
||||
let site = Resource::new(|| (), |_| get_site());
|
||||
provide_context(site);
|
||||
|
||||
view! {
|
||||
<Stylesheet id="leptos" href="/pkg/portal.css"/>
|
||||
<Title text=SITE_NAME/>
|
||||
<Suspense fallback=|| ()>
|
||||
{move || {
|
||||
site.get()
|
||||
.map(|res| {
|
||||
let title = res
|
||||
.ok()
|
||||
.and_then(|s| s.title)
|
||||
.unwrap_or_else(|| SITE_NAME.to_string());
|
||||
view! { <Title text=title/> }
|
||||
})
|
||||
}}
|
||||
</Suspense>
|
||||
<Router>
|
||||
<Routes fallback=|| view! { <NotFound/> }>
|
||||
<Route path=path!("") view=QuestionPage/>
|
||||
<Route path=path!("/*any") view=QuestionPage/>
|
||||
</Routes>
|
||||
<PortalShell/>
|
||||
</Router>
|
||||
}
|
||||
}
|
||||
|
||||
/// Every server-fn resource the pages read, created exactly once for
|
||||
/// the app's lifetime and handed down via context. Wrapper structs
|
||||
/// because a bare `Resource<T>` context is claimed by whoever provides
|
||||
/// that T last.
|
||||
#[derive(Clone, Copy)]
|
||||
struct QuestionRes(Resource<Result<Option<Page>, ServerFnError>>);
|
||||
#[derive(Clone, Copy)]
|
||||
struct UserRes(Resource<Result<Option<User>, ServerFnError>>);
|
||||
#[derive(Clone, Copy)]
|
||||
struct NavRes(Resource<Result<Vec<(String, String)>, ServerFnError>>);
|
||||
#[derive(Clone, Copy)]
|
||||
struct AnnounceRes(Resource<Result<Vec<Announcement>, ServerFnError>>);
|
||||
|
||||
/// One live announced page (`Question.event`), pre-formatted on the
|
||||
/// server so both renders agree and no client clock is involved.
|
||||
#[derive(Clone, Debug, PartialEq, Serialize, Deserialize)]
|
||||
pub struct Announcement {
|
||||
pub id: String,
|
||||
pub name: String,
|
||||
/// "Sat 12 Sep, 18:00"
|
||||
pub when: String,
|
||||
/// "in 3 days" / "in 4 h" / "now"
|
||||
pub relative: String,
|
||||
pub place: Option<String>,
|
||||
}
|
||||
|
||||
/// Owns the app's data resources, above the routes and reactive on the
|
||||
/// location instead of recreated per page. Route components creating
|
||||
/// their own resources broke on the first client-side navigation: the
|
||||
/// remounted component's fresh Resource consumed a stale SSR hydration
|
||||
/// buffer instead of fetching - concretely, the nav list
|
||||
/// `[[id, name], ..]` deserialized as a `Page` (serde fills a struct
|
||||
/// from a sequence in field order), rendering the landing question
|
||||
/// gated behind its own nav entry. Stable resources + context makes
|
||||
/// that class of misalignment impossible: navigation only changes a
|
||||
/// key, and a key change always refetches.
|
||||
#[component]
|
||||
fn QuestionPage() -> impl IntoView {
|
||||
fn PortalShell() -> impl IntoView {
|
||||
let location = use_location();
|
||||
let query = use_query_map();
|
||||
let path = Memo::new(move |_| {
|
||||
@@ -78,11 +136,39 @@ fn QuestionPage() -> impl IntoView {
|
||||
p
|
||||
}
|
||||
});
|
||||
let chain = Memo::new(move |_| query.with(|q| q.get("chain")));
|
||||
|
||||
let question = Resource::new(
|
||||
move || (path.get(), chain.get()),
|
||||
|(path, chain)| get_question(path, chain),
|
||||
);
|
||||
let user = Resource::new(|| (), |_| current_user());
|
||||
let nav = Resource::new(move || chain.get().is_some(), list_qualifying_questions);
|
||||
let announcements = Resource::new(|| (), |_| list_announcements());
|
||||
provide_context(QuestionRes(question));
|
||||
provide_context(UserRes(user));
|
||||
provide_context(NavRes(nav));
|
||||
provide_context(AnnounceRes(announcements));
|
||||
|
||||
view! {
|
||||
<Routes fallback=|| view! { <NotFound/> }>
|
||||
<Route path=path!("") view=QuestionPage/>
|
||||
<Route path=path!("/*any") view=QuestionPage/>
|
||||
</Routes>
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
fn QuestionPage() -> impl IntoView {
|
||||
let query = use_query_map();
|
||||
let parent_hash = Memo::new(move |_| query.with(|q| q.get("chain")));
|
||||
let query_email = Memo::new(move |_| query.with(|q| q.get("email")));
|
||||
|
||||
let question = Resource::new(move || path.get(), get_question);
|
||||
let user = Resource::new(|| (), |_| current_user());
|
||||
// All shared, app-lifetime resources (see PortalShell / App) -
|
||||
// never created per navigation.
|
||||
let QuestionRes(question) = expect_context();
|
||||
let UserRes(user) = expect_context();
|
||||
let site = expect_context::<Resource<Result<SiteConfig, ServerFnError>>>();
|
||||
|
||||
view! {
|
||||
<Suspense fallback=|| {
|
||||
@@ -99,16 +185,19 @@ fn QuestionPage() -> impl IntoView {
|
||||
// has already resolved.
|
||||
let user_res = user.get();
|
||||
let question_res = question.get();
|
||||
let site_cfg = site.get().and_then(|r| r.ok()).unwrap_or_default();
|
||||
question_res
|
||||
.map(|res| match res {
|
||||
Ok(Some(q)) => {
|
||||
Ok(Some(page)) => {
|
||||
let current = user_res.and_then(|r| r.ok()).flatten();
|
||||
view! {
|
||||
<QuestionView
|
||||
question=q
|
||||
question=page.question
|
||||
chain_gate=page.chain_gate
|
||||
parent_hash=parent_hash.get()
|
||||
query_email=query_email.get()
|
||||
user=current
|
||||
site=site_cfg
|
||||
/>
|
||||
}
|
||||
.into_any()
|
||||
@@ -123,11 +212,46 @@ fn QuestionPage() -> impl IntoView {
|
||||
#[component]
|
||||
fn QuestionView(
|
||||
question: Question,
|
||||
chain_gate: Option<(String, String)>,
|
||||
parent_hash: Option<String>,
|
||||
query_email: Option<String>,
|
||||
user: Option<User>,
|
||||
site: SiteConfig,
|
||||
) -> impl IntoView {
|
||||
let question_id = question.id.clone();
|
||||
let has_chain = parent_hash.is_some();
|
||||
|
||||
// The provenance counterpart to the qualifies gate below: a
|
||||
// requires_chain page whose visitor holds no verifiable lineage to
|
||||
// the required question renders a pointer there instead of its
|
||||
// alternatives.
|
||||
if let Some((target, target_name)) = chain_gate {
|
||||
let label = if target_name.is_empty() {
|
||||
target.clone()
|
||||
} else {
|
||||
target_name
|
||||
};
|
||||
return view! {
|
||||
<Hero
|
||||
title=question.name.clone()
|
||||
description=question.description.clone()
|
||||
landing=question_id == "/"
|
||||
current_id=question_id.clone()
|
||||
site=site.clone()
|
||||
/>
|
||||
<div class="alternatives">
|
||||
<section class="alt-card gate-card">
|
||||
<p>"This page follows from an answer you don't seem to carry yet."</p>
|
||||
<a class="alt-submit" href=target>
|
||||
{label}
|
||||
</a>
|
||||
</section>
|
||||
</div>
|
||||
// A gate is never a dead end: the same nav as every page.
|
||||
<QuestionNav current_id=question_id has_chain=has_chain/>
|
||||
}
|
||||
.into_any();
|
||||
}
|
||||
|
||||
// Generic: any question with `qualifies` set renders this same gate
|
||||
// instead of its alternatives - "/review" isn't a special case, it's
|
||||
@@ -138,7 +262,9 @@ fn QuestionView(
|
||||
<Hero
|
||||
title=question.name.clone()
|
||||
description=question.description.clone()
|
||||
show_yes=question_id == "/"
|
||||
landing=question_id == "/"
|
||||
current_id=question_id.clone()
|
||||
site=site.clone()
|
||||
/>
|
||||
<div class="alternatives">
|
||||
<section class="alt-card gate-card">
|
||||
@@ -159,6 +285,7 @@ fn QuestionView(
|
||||
}}
|
||||
</section>
|
||||
</div>
|
||||
<QuestionNav current_id=question_id has_chain=has_chain/>
|
||||
}
|
||||
.into_any();
|
||||
}
|
||||
@@ -168,14 +295,15 @@ fn QuestionView(
|
||||
// on pages where some alternative actually declares a deck.
|
||||
let needs_swiper = question.alternatives.iter().any(|a| a.images.len() > 1);
|
||||
|
||||
let has_chain = parent_hash.is_some();
|
||||
|
||||
view! {
|
||||
{needs_swiper.then(|| view! { <leptos_meta::Script src="/swiper-element-bundle.min.js"/> })}
|
||||
<Hero
|
||||
title=question.name.clone()
|
||||
description=question.description.clone()
|
||||
show_yes=question_id == "/"
|
||||
landing=question_id == "/"
|
||||
site=site.clone()
|
||||
current_id=question_id.clone()
|
||||
/>
|
||||
<div class="alternatives">
|
||||
<For
|
||||
@@ -230,7 +358,8 @@ fn QuestionView(
|
||||
/// claiming front-page space (an owner also sees the gated desks here).
|
||||
#[component]
|
||||
fn QuestionNav(current_id: String, has_chain: bool) -> impl IntoView {
|
||||
let nav = Resource::new(move || has_chain, list_qualifying_questions);
|
||||
let _ = has_chain; // keyed into the shared resource by PortalShell
|
||||
let NavRes(nav) = expect_context();
|
||||
view! {
|
||||
<Suspense fallback=|| ()>
|
||||
{move || {
|
||||
@@ -258,6 +387,45 @@ fn QuestionNav(current_id: String, has_chain: bool) -> impl IntoView {
|
||||
}
|
||||
}
|
||||
|
||||
/// Live announced pages, as a strip at the top of the header - the one
|
||||
/// place a page gets to claim attention before the question. Empty
|
||||
/// (and unrendered) when nothing is announced.
|
||||
#[component]
|
||||
fn Announcements(current_id: String) -> impl IntoView {
|
||||
let AnnounceRes(announcements) = expect_context();
|
||||
view! {
|
||||
<Suspense fallback=|| ()>
|
||||
{move || {
|
||||
let current_id = current_id.clone();
|
||||
announcements.get().and_then(|res| res.ok()).map(|items| {
|
||||
(!items.is_empty()).then(|| view! {
|
||||
<nav class="announce" aria-label="Announcements">
|
||||
<For
|
||||
each=move || items.clone()
|
||||
key=|a| a.id.clone()
|
||||
children=move |a: Announcement| {
|
||||
let current = a.id == current_id;
|
||||
view! {
|
||||
<a href=a.id.clone() class="announce-item" aria-current=current.then_some("page")>
|
||||
<span class="announce-name">{a.name}</span>
|
||||
<span class="announce-when">
|
||||
{a.when}
|
||||
{a.place.map(|p| format!(" · {p}"))}
|
||||
</span>
|
||||
<span class="announce-relative">{a.relative}</span>
|
||||
</a>
|
||||
}
|
||||
.into_any()
|
||||
}
|
||||
/>
|
||||
</nav>
|
||||
})
|
||||
})
|
||||
}}
|
||||
</Suspense>
|
||||
}
|
||||
}
|
||||
|
||||
/// "Asked by X — contact them if you get stuck."
|
||||
/// The mailto address is assembled from `data-user`/`data-domain` on a
|
||||
/// real mouse event, never baked into the server-rendered `href` -
|
||||
@@ -300,27 +468,6 @@ fn ResponsibleNote(responsible: Responsible) -> impl IntoView {
|
||||
}
|
||||
}
|
||||
|
||||
// Binds the actual "YES - Rasterized Lines" piece live at uhhm.no
|
||||
// (ported to `public/yes.js`, an ES module now instead of a page-owning
|
||||
// script) as a typed JS class - the idiomatic wasm-bindgen way to drive
|
||||
// an existing JS module from Rust, rather than re-implementing canvas
|
||||
// animation logic here.
|
||||
#[cfg(feature = "hydrate")]
|
||||
mod yes {
|
||||
use wasm_bindgen::prelude::*;
|
||||
|
||||
#[wasm_bindgen(module = "/yes.js")]
|
||||
extern "C" {
|
||||
#[wasm_bindgen(js_name = RasterizedYES)]
|
||||
pub type RasterizedYes;
|
||||
|
||||
#[wasm_bindgen(constructor, js_class = "RasterizedYES")]
|
||||
pub fn new() -> RasterizedYes;
|
||||
|
||||
#[wasm_bindgen(method)]
|
||||
pub fn stop(this: &RasterizedYes);
|
||||
}
|
||||
}
|
||||
|
||||
// Same idiomatic-typed-module approach as `yes` above, for the
|
||||
// prosekit-backed rich-text requirement kind (`prosekit-editor.js`,
|
||||
@@ -347,64 +494,133 @@ mod prosekit {
|
||||
}
|
||||
}
|
||||
|
||||
// The `type: gesture` drawing widget (`gesture.js`, crate root):
|
||||
// prosekit's hidden-input bridge for the value, yes.js's typed-handle
|
||||
// lifecycle for cleanup - it may own a live WebSocket to a
|
||||
// redoal-relay, which SPA navigation must close (`stop()`).
|
||||
#[cfg(feature = "hydrate")]
|
||||
mod gesture {
|
||||
use wasm_bindgen::prelude::*;
|
||||
|
||||
#[wasm_bindgen(module = "/gesture.js")]
|
||||
extern "C" {
|
||||
pub type GestureWidget;
|
||||
|
||||
#[wasm_bindgen(js_name = mountGesture)]
|
||||
pub fn mount_gesture(
|
||||
container: &web_sys::HtmlDivElement,
|
||||
hidden: &web_sys::HtmlInputElement,
|
||||
relay_url: &str,
|
||||
) -> GestureWidget;
|
||||
|
||||
#[wasm_bindgen(method)]
|
||||
pub fn stop(this: &GestureWidget);
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
fn Hero(title: String, description: String, show_yes: bool) -> impl IntoView {
|
||||
// Only the landing page gets the full interactive piece - it's the
|
||||
// one page this is actually "the" hero for; other pages (thank-you
|
||||
// pages, /review) get the plain dark header below. Starts the
|
||||
// animation once the canvas elements exist, and explicitly stops
|
||||
// the requestAnimationFrame loop on unmount - the original
|
||||
// page-owning script never needed this since navigating away meant
|
||||
// a full document unload, which doesn't happen in an SPA.
|
||||
let raster_ref: NodeRef<leptos::html::Canvas> = NodeRef::new();
|
||||
fn Hero(title: String, description: String, landing: bool, site: SiteConfig, current_id: String) -> impl IntoView {
|
||||
// Only the landing page gets a piece - it's the one page a hero is
|
||||
// actually "the" hero for; every other page gets the plain header.
|
||||
// WHAT the piece is belongs to the content repo: site.yaml's
|
||||
// `hero: {kind: module, module: hero.js}` names a JavaScript module
|
||||
// (served same-origin at /site/<path>) exporting
|
||||
// `mount(container) -> handle` with `handle.stop()`. Portal knows
|
||||
// nothing about what it draws.
|
||||
let module = if landing && site.hero.kind == "module" {
|
||||
site.hero.module.clone()
|
||||
} else {
|
||||
None
|
||||
};
|
||||
let has_module = module.is_some();
|
||||
let wordmark = site.wordmark.clone().unwrap_or_else(|| "/wordmark.svg".to_string());
|
||||
let site_title = site.title.clone().unwrap_or_else(|| SITE_NAME.to_string());
|
||||
|
||||
let piece_ref: NodeRef<leptos::html::Div> = NodeRef::new();
|
||||
#[cfg(feature = "hydrate")]
|
||||
if show_yes {
|
||||
// `on_cleanup` requires Send + Sync (even single-threaded, wasm),
|
||||
// which a JS-backed value never is - `StoredValue`'s `LocalStorage`
|
||||
// variant is the established way around this (same pattern
|
||||
// cnats' WebRTC call state uses for its own non-Send peer map).
|
||||
let instance: StoredValue<Option<yes::RasterizedYes>, LocalStorage> =
|
||||
if has_module {
|
||||
use wasm_bindgen::JsCast;
|
||||
// Handle = whatever the module's mount() returned; kept as a
|
||||
// raw JsValue so the contract stays "has a stop()", nothing
|
||||
// typed on the Rust side.
|
||||
let handle: StoredValue<Option<wasm_bindgen::JsValue>, LocalStorage> =
|
||||
StoredValue::new_local(None);
|
||||
// Gated on the canvas NodeRef resolving, not just "the Effect
|
||||
// ran" - on a fresh page load the DOM is already there by the
|
||||
// time this fires, but navigating back to `/` client-side hit a
|
||||
// real race: the Effect ran before the new view's <canvas> was
|
||||
// actually inserted, RasterizedYES::new() (yes.js) did an
|
||||
// unchecked `document.getElementById(...).getContext(...)` on
|
||||
// null and threw mid-reactive-update - which then corrupted
|
||||
// wasm_bindgen_futures' single-threaded executor state badly
|
||||
// enough to panic ("RefCell already borrowed") on the next
|
||||
// tick. Waiting for the NodeRef itself guarantees DOM presence
|
||||
// the same way the prosekit editor's own mount Effect does.
|
||||
Effect::new(move |_| {
|
||||
if raster_ref.get().is_none() {
|
||||
let Some(container) = piece_ref.get() else {
|
||||
return;
|
||||
};
|
||||
if handle.with_value(|h| h.is_some()) {
|
||||
return;
|
||||
}
|
||||
instance.set_value(Some(yes::RasterizedYes::new()));
|
||||
// Adopt the inline early-mount's instance (started at HTML
|
||||
// parse time) if it's there; otherwise (client-side
|
||||
// navigation back to /) mount fresh through the helper the
|
||||
// inline script left on window. Either order is safe.
|
||||
let global = js_sys::global();
|
||||
let _ = js_sys::Reflect::set(&global, &"__heroAdopted".into(), &true.into());
|
||||
let early = js_sys::Reflect::get(&global, &"__heroEarly".into())
|
||||
.ok()
|
||||
.filter(|v| !v.is_undefined() && !v.is_null());
|
||||
match early {
|
||||
Some(v) => {
|
||||
let _ = js_sys::Reflect::delete_property(&global, &"__heroEarly".into());
|
||||
handle.set_value(Some(v));
|
||||
}
|
||||
None => {
|
||||
if let Ok(mounter) = js_sys::Reflect::get(&global, &"__mountHero".into()) {
|
||||
if let Some(f) = mounter.dyn_ref::<js_sys::Function>() {
|
||||
if let Ok(promise) = f.call1(&global, &container) {
|
||||
let promise: js_sys::Promise = promise.unchecked_into();
|
||||
leptos::task::spawn_local(async move {
|
||||
if let Ok(h) =
|
||||
wasm_bindgen_futures::JsFuture::from(promise).await
|
||||
{
|
||||
handle.set_value(Some(h));
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
on_cleanup(move || {
|
||||
instance.update_value(|opt| {
|
||||
if let Some(inst) = opt.take() {
|
||||
inst.stop();
|
||||
handle.update_value(|opt| {
|
||||
if let Some(h) = opt.take() {
|
||||
if let Ok(stop) = js_sys::Reflect::get(&h, &"stop".into()) {
|
||||
if let Some(f) = stop.dyn_ref::<js_sys::Function>() {
|
||||
let _ = f.call0(&h);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// The inline script starts the piece at HTML parse time instead of
|
||||
// waiting out the wasm bundle; it also leaves __mountHero for the
|
||||
// hydrate side's client-side-navigation case. Module path is
|
||||
// validated to plain segments by SiteConfig::validate, so it can't
|
||||
// break out of the string here.
|
||||
let early_script = module.as_ref().map(|m| {
|
||||
format!(
|
||||
"const url = '/site/{m}'; window.__mountHero = (el) => import(url).then((mod) => mod.mount(el)); if (!window.__heroAdopted && !window.__heroEarly) window.__mountHero(document.querySelector('.hero-piece')).then((h) => {{ if (!window.__heroAdopted) window.__heroEarly = h; else if (h && h.stop) h.stop(); }});"
|
||||
)
|
||||
});
|
||||
|
||||
view! {
|
||||
<header class="hero" class:hero-yes=show_yes>
|
||||
{show_yes
|
||||
<header class="hero" class:hero-module=has_module>
|
||||
<Announcements current_id=current_id/>
|
||||
{has_module
|
||||
.then(|| {
|
||||
view! {
|
||||
<div class="hero-canvas" aria-hidden="true">
|
||||
<canvas id="lineCanvas"></canvas>
|
||||
<canvas id="rasterCanvas" node_ref=raster_ref></canvas>
|
||||
</div>
|
||||
<div class="hero-piece" aria-hidden="true" node_ref=piece_ref></div>
|
||||
<script type="module" inner_html=early_script.unwrap_or_default()></script>
|
||||
}
|
||||
})}
|
||||
<div class="hero-copy">
|
||||
<a class="wordmark" href="/">
|
||||
<img src="/wordmark.svg" alt=SITE_NAME/>
|
||||
<img src=wordmark alt=site_title/>
|
||||
</a>
|
||||
<h1>{title}</h1>
|
||||
<p>{description}</p>
|
||||
@@ -464,7 +680,7 @@ fn AlternativeCard(
|
||||
return view! {
|
||||
<section class="alt-card">
|
||||
<h2>{alternative.name.clone()}</h2>
|
||||
<p class="alt-description">{alternative.description.clone()}</p>
|
||||
<p class="alt-description" inner_html=render_inline_markdown(&alternative.description)></p>
|
||||
{move || {
|
||||
let question_id_for_action = question_id_for_action.clone();
|
||||
let alt_name_for_action = alt_name_for_action.clone();
|
||||
@@ -536,6 +752,10 @@ fn AlternativeCard(
|
||||
let mut select_field_map: std::collections::HashMap<String, RwSignal<Vec<String>>> =
|
||||
std::collections::HashMap::new();
|
||||
let mut select_multi: std::collections::HashMap<String, bool> = std::collections::HashMap::new();
|
||||
// Gesture fields share field_map (their hidden input carries a
|
||||
// JSON string), but submit re-parses them so the stored answer
|
||||
// holds a real {points, key} object, not a double-encoded string.
|
||||
let mut gesture_fields: std::collections::HashSet<String> = std::collections::HashSet::new();
|
||||
for feature in &alternative.features {
|
||||
for req in &feature.requirements {
|
||||
if req.kind == "file" {
|
||||
@@ -546,6 +766,9 @@ fn AlternativeCard(
|
||||
.or_insert_with(|| RwSignal::new(Vec::new()));
|
||||
select_multi.insert(req.name.clone(), req.multiple);
|
||||
} else {
|
||||
if req.kind == "gesture" {
|
||||
gesture_fields.insert(req.name.clone());
|
||||
}
|
||||
field_map
|
||||
.entry(req.name.clone())
|
||||
.or_insert_with(|| RwSignal::new(String::new()));
|
||||
@@ -571,6 +794,7 @@ fn AlternativeCard(
|
||||
let file_refs_for_submit = file_refs.clone();
|
||||
let select_field_map_for_submit = select_field_map.clone();
|
||||
let select_multi_for_submit = select_multi.clone();
|
||||
let gesture_fields_for_submit = gesture_fields.clone();
|
||||
let question_id_for_transition = question_id.clone();
|
||||
let alt_name_for_transition = alternative.name.clone();
|
||||
let on_submit = move |ev: leptos::ev::SubmitEvent| {
|
||||
@@ -597,13 +821,22 @@ fn AlternativeCard(
|
||||
let file_refs_for_submit = file_refs_for_submit.clone();
|
||||
let select_field_map_for_submit = select_field_map_for_submit.clone();
|
||||
let select_multi_for_submit = select_multi_for_submit.clone();
|
||||
let gesture_fields_for_submit = gesture_fields_for_submit.clone();
|
||||
let question_id_for_submit = question_id_for_submit.clone();
|
||||
let alt_name_for_submit = alt_name_for_submit.clone();
|
||||
let parent_hash_for_submit = parent_hash_for_submit.clone();
|
||||
leptos::task::spawn_local(async move {
|
||||
let mut map = serde_json::Map::new();
|
||||
for (name, sig) in field_map_for_submit.iter() {
|
||||
map.insert(name.clone(), serde_json::Value::String(sig.get()));
|
||||
let value = if gesture_fields_for_submit.contains(name) {
|
||||
// The widget's hidden input holds {points, key} as
|
||||
// JSON; store the object itself (empty/never-drawn
|
||||
// becomes null, not "").
|
||||
serde_json::from_str(&sig.get()).unwrap_or(serde_json::Value::Null)
|
||||
} else {
|
||||
serde_json::Value::String(sig.get())
|
||||
};
|
||||
map.insert(name.clone(), value);
|
||||
}
|
||||
for (name, sig) in select_field_map_for_submit.iter() {
|
||||
let ids = sig.get();
|
||||
@@ -669,7 +902,7 @@ fn AlternativeCard(
|
||||
<section class="alt-card">
|
||||
<AltImages images=alternative.images.clone() />
|
||||
<h2>{alternative.name.clone()}</h2>
|
||||
<p class="alt-description">{alternative.description.clone()}</p>
|
||||
<p class="alt-description" inner_html=render_inline_markdown(&alternative.description)></p>
|
||||
<div class="features">
|
||||
<For
|
||||
each={
|
||||
@@ -718,7 +951,7 @@ fn AlternativeCard(
|
||||
let description = feature.description.clone();
|
||||
move || !description.is_empty()
|
||||
}>
|
||||
<p>{feature.description.clone()}</p>
|
||||
<p inner_html=render_inline_markdown(&feature.description)></p>
|
||||
</Show>
|
||||
{resource.map(|spec| {
|
||||
view! {
|
||||
@@ -727,6 +960,7 @@ fn AlternativeCard(
|
||||
alternative=alt_name.clone()
|
||||
feature_name=feature_name.clone()
|
||||
transitions=spec.transitions.clone()
|
||||
empty=spec.empty.clone()
|
||||
pending_transitions=pending_transitions
|
||||
transition_batch=transition_batch
|
||||
/>
|
||||
@@ -850,6 +1084,60 @@ fn AlternativeCard(
|
||||
.into_any();
|
||||
}
|
||||
|
||||
if req.kind == "gesture" {
|
||||
let container_ref: NodeRef<leptos::html::Div> = NodeRef::new();
|
||||
let hidden_ref: NodeRef<leptos::html::Input> = NodeRef::new();
|
||||
|
||||
// A div, not a label: a label would forward
|
||||
// every click to the hidden input, and this
|
||||
// field is drawn on, not clicked into.
|
||||
#[cfg(feature = "hydrate")]
|
||||
{
|
||||
let relay = req.relay.clone().unwrap_or_default();
|
||||
// Unlike prosekit's fire-and-forget mount,
|
||||
// the widget may own a live WebSocket -
|
||||
// yes.js's StoredValue + on_cleanup pattern
|
||||
// closes it on SPA navigation.
|
||||
let widget: StoredValue<Option<gesture::GestureWidget>, LocalStorage> =
|
||||
StoredValue::new_local(None);
|
||||
Effect::new(move |_| {
|
||||
let (Some(container), Some(hidden)) =
|
||||
(container_ref.get(), hidden_ref.get())
|
||||
else {
|
||||
return;
|
||||
};
|
||||
if widget.with_value(|w| w.is_some()) {
|
||||
return;
|
||||
}
|
||||
widget.set_value(Some(gesture::mount_gesture(
|
||||
&container, &hidden, &relay,
|
||||
)));
|
||||
});
|
||||
on_cleanup(move || {
|
||||
widget.update_value(|opt| {
|
||||
if let Some(w) = opt.take() {
|
||||
w.stop();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return view! {
|
||||
<div class="field">
|
||||
{label_text}
|
||||
<input
|
||||
id=field_id
|
||||
type="hidden"
|
||||
node_ref=hidden_ref
|
||||
prop:value=move || sig.get()
|
||||
on:input=move |ev| sig.set(event_target_value(&ev))
|
||||
/>
|
||||
<div class="gesture-wrap" node_ref=container_ref></div>
|
||||
</div>
|
||||
}
|
||||
.into_any();
|
||||
}
|
||||
|
||||
if req.kind == "prosekit" {
|
||||
let container_ref: NodeRef<leptos::html::Div> = NodeRef::new();
|
||||
let hidden_ref: NodeRef<leptos::html::Input> = NodeRef::new();
|
||||
@@ -949,7 +1237,17 @@ fn AlternativeCard(
|
||||
children=move |e| view! { <p class="alt-encouragement">{e}</p> }
|
||||
/>
|
||||
</div>
|
||||
{if is_gateway {
|
||||
{if alternative.disabled {
|
||||
// Advertised, not yet takeable: the label
|
||||
// stays (it says what will be possible),
|
||||
// the button doesn't act.
|
||||
view! {
|
||||
<button type="button" class="alt-submit soon" disabled=true title="Not yet">
|
||||
{button_label.clone()}
|
||||
</button>
|
||||
}
|
||||
.into_any()
|
||||
} else if is_gateway {
|
||||
let href = alternative.action.clone().unwrap_or_default();
|
||||
view! {
|
||||
<a class="alt-submit" href=href>{button_label.clone()}</a>
|
||||
@@ -992,6 +1290,7 @@ fn ResourceFeature(
|
||||
alternative: String,
|
||||
feature_name: String,
|
||||
transitions: Vec<Transition>,
|
||||
empty: Option<String>,
|
||||
pending_transitions: RwSignal<std::collections::HashMap<(String, String), String>>,
|
||||
transition_batch: ServerAction<TransitionAnswers>,
|
||||
) -> impl IntoView {
|
||||
@@ -1025,6 +1324,7 @@ fn ResourceFeature(
|
||||
{move || {
|
||||
let feature_name = feature_name.clone();
|
||||
let transitions = transitions.clone();
|
||||
let empty = empty.clone().unwrap_or_else(|| "Nothing here yet.".to_string());
|
||||
data.get()
|
||||
.map(|res| match res {
|
||||
Ok(value) => {
|
||||
@@ -1032,6 +1332,7 @@ fn ResourceFeature(
|
||||
<ResourceValue
|
||||
feature_name=feature_name
|
||||
transitions=transitions
|
||||
empty=empty
|
||||
value=value
|
||||
pending_transitions=pending_transitions
|
||||
transition_batch=transition_batch
|
||||
@@ -1058,11 +1359,23 @@ fn ResourceFeature(
|
||||
fn ResourceValue(
|
||||
feature_name: String,
|
||||
transitions: Vec<Transition>,
|
||||
empty: String,
|
||||
value: serde_json::Value,
|
||||
pending_transitions: RwSignal<std::collections::HashMap<(String, String), String>>,
|
||||
transition_batch: ServerAction<TransitionAnswers>,
|
||||
) -> impl IntoView {
|
||||
// A jq like `.[] | {...}` over an empty list yields no output at
|
||||
// all - that arrives as null, and it's the same silence as [].
|
||||
if value.is_null() {
|
||||
return view! { <p class="resource-empty">{empty}</p> }.into_any();
|
||||
}
|
||||
if let serde_json::Value::Array(items) = &value {
|
||||
// Before the Answer parse below: an empty list deserializes as
|
||||
// an (empty) Vec<Answer> too, and rendered as a blank
|
||||
// answer-list instead of saying anything.
|
||||
if items.is_empty() {
|
||||
return view! { <p class="resource-empty">{empty}</p> }.into_any();
|
||||
}
|
||||
if let Ok(answers) = serde_json::from_value::<Vec<Answer>>(value.clone()) {
|
||||
let mut answers = answers;
|
||||
answers.sort_by(|a, b| {
|
||||
@@ -1095,9 +1408,6 @@ fn ResourceValue(
|
||||
}
|
||||
.into_any();
|
||||
}
|
||||
if items.is_empty() {
|
||||
return view! { <p class="resource-empty">"Nothing here yet."</p> }.into_any();
|
||||
}
|
||||
// A list of plain objects (e.g. a jq-shaped GiteaStarred/Url
|
||||
// resource) - render as cards rather than dumping raw JSON.
|
||||
// Generic on purpose, no content-declared "kind": `name`/`title`
|
||||
@@ -1484,18 +1794,73 @@ fn NotFound() -> impl IntoView {
|
||||
}
|
||||
}
|
||||
|
||||
#[server]
|
||||
pub async fn get_question(path: String) -> Result<Option<Question>, ServerFnError> {
|
||||
/// What a URL resolves to: the question (dynamic pages arrive with
|
||||
/// their segment value already substituted, see
|
||||
/// `content::resolve_question`) plus whether a `requires_chain` gate
|
||||
/// blocked it - `(target id, target name)` so the gate can point the
|
||||
/// visitor at where the required answer comes from.
|
||||
#[derive(Clone, Debug, Serialize, Deserialize)]
|
||||
pub struct Page {
|
||||
pub question: Question,
|
||||
pub chain_gate: Option<(String, String)>,
|
||||
}
|
||||
|
||||
#[server(endpoint = "get_question")]
|
||||
pub async fn get_question(
|
||||
path: String,
|
||||
chain: Option<String>,
|
||||
) -> Result<Option<Page>, ServerFnError> {
|
||||
use crate::content::{path_matches, resolve_question};
|
||||
use crate::server::AppState;
|
||||
let state = expect_context::<AppState>();
|
||||
Ok(state.questions.load().get(&path).cloned())
|
||||
let questions = state.questions.load();
|
||||
let Some(question) = resolve_question(&questions, &path) else {
|
||||
return Ok(None);
|
||||
};
|
||||
let mut chain_gate = None;
|
||||
if let Some(target) = &question.requires_chain {
|
||||
// The claimed lineage must verifiably end at the required
|
||||
// question - an unindexed or absent hash reads as unverified,
|
||||
// and the gate stays shut. Dynamic targets match any concrete
|
||||
// answer of theirs.
|
||||
let verified = match &chain {
|
||||
Some(hash) => crate::chain::lookup_node(&state.jetstream, hash)
|
||||
.await
|
||||
.is_some_and(|node| {
|
||||
node.question_id == *target
|
||||
|| path_matches(target, &node.question_id).is_some()
|
||||
}),
|
||||
None => false,
|
||||
};
|
||||
if !verified {
|
||||
let name = questions
|
||||
.get(target)
|
||||
.map(|q| q.name.clone())
|
||||
.unwrap_or_default();
|
||||
chain_gate = Some((target.clone(), name));
|
||||
}
|
||||
}
|
||||
Ok(Some(Page {
|
||||
question,
|
||||
chain_gate,
|
||||
}))
|
||||
}
|
||||
|
||||
/// The content repo's branding (`site.yaml`) - title, wordmark, hero
|
||||
/// kind. Defaults (= the historical uhhm look) when the repo declares
|
||||
/// nothing.
|
||||
#[server(endpoint = "get_site")]
|
||||
pub async fn get_site() -> Result<SiteConfig, ServerFnError> {
|
||||
use crate::server::AppState;
|
||||
let state = expect_context::<AppState>();
|
||||
Ok(state.site.load().as_ref().clone())
|
||||
}
|
||||
|
||||
/// Every question the current visitor qualifies for, as (id, name) -
|
||||
/// the site nav's data. Context-dependent: an owner session sees the
|
||||
/// gated pages too, and `followup` pages only appear once the visitor
|
||||
/// carries an answer chain.
|
||||
#[server]
|
||||
#[server(endpoint = "list_qualifying_questions")]
|
||||
pub async fn list_qualifying_questions(
|
||||
has_chain: bool,
|
||||
) -> Result<Vec<(String, String)>, ServerFnError> {
|
||||
@@ -1510,25 +1875,93 @@ pub async fn list_qualifying_questions(
|
||||
.await
|
||||
.map_err(|e| ServerFnError::new(e.to_string()))?;
|
||||
|
||||
let now_ms = chrono::Utc::now().timestamp_millis();
|
||||
let mut out: Vec<(String, String)> = state
|
||||
.questions
|
||||
.load()
|
||||
.values()
|
||||
.filter(|q| is_qualified(user.as_ref(), q))
|
||||
.filter(|q| !q.followup || has_chain)
|
||||
// An ended event page is a followup from then on - only a
|
||||
// visitor carrying a chain (they answered it) still sees it.
|
||||
.filter(|q| !(q.is_followup() || q.event_ended_at(now_ms)) || has_chain)
|
||||
// A live event is announced in the header instead.
|
||||
.filter(|q| !q.event_live_at(now_ms))
|
||||
// A dynamic page has no URL of its own to link to.
|
||||
.filter(|q| !q.is_dynamic())
|
||||
.map(|q| (q.id.clone(), q.name.clone()))
|
||||
.collect();
|
||||
out.sort();
|
||||
Ok(out)
|
||||
}
|
||||
|
||||
/// Every announced page whose window is still open and that the
|
||||
/// visitor qualifies for, soonest first.
|
||||
#[server(endpoint = "list_announcements")]
|
||||
pub async fn list_announcements() -> Result<Vec<Announcement>, ServerFnError> {
|
||||
use crate::auth::{User, SESSION_USER_KEY};
|
||||
use crate::content::is_qualified;
|
||||
use crate::server::AppState;
|
||||
|
||||
let state = expect_context::<AppState>();
|
||||
let session: tower_sessions::Session = leptos_axum::extract().await?;
|
||||
let user = session
|
||||
.get::<User>(SESSION_USER_KEY)
|
||||
.await
|
||||
.map_err(|e| ServerFnError::new(e.to_string()))?;
|
||||
let now_ms = chrono::Utc::now().timestamp_millis();
|
||||
|
||||
let mut live: Vec<(i64, Announcement)> = state
|
||||
.questions
|
||||
.load()
|
||||
.values()
|
||||
.filter(|q| is_qualified(user.as_ref(), q) && q.event_live_at(now_ms))
|
||||
.filter_map(|q| {
|
||||
let event = q.event.as_ref()?;
|
||||
let starts = chrono::DateTime::parse_from_rfc3339(&event.starts).ok()?;
|
||||
let starts_ms = starts.timestamp_millis();
|
||||
let relative = relative_until(starts_ms - now_ms);
|
||||
Some((
|
||||
starts_ms,
|
||||
Announcement {
|
||||
id: q.id.clone(),
|
||||
name: q.name.clone(),
|
||||
when: starts.format("%a %-d %b, %H:%M").to_string(),
|
||||
relative,
|
||||
place: event.place.clone(),
|
||||
},
|
||||
))
|
||||
})
|
||||
.collect();
|
||||
live.sort_by_key(|(starts, _)| *starts);
|
||||
Ok(live.into_iter().map(|(_, a)| a).collect())
|
||||
}
|
||||
|
||||
/// "in 3 days" / "in 4 h" / "in 20 min" / "now" (already started).
|
||||
#[cfg(feature = "ssr")]
|
||||
fn relative_until(delta_ms: i64) -> String {
|
||||
const MIN: i64 = 60_000;
|
||||
const HOUR: i64 = 60 * MIN;
|
||||
const DAY: i64 = 24 * HOUR;
|
||||
if delta_ms <= 0 {
|
||||
"now".to_string()
|
||||
} else if delta_ms >= 2 * DAY {
|
||||
format!("in {} days", delta_ms / DAY)
|
||||
} else if delta_ms >= DAY {
|
||||
"tomorrow".to_string()
|
||||
} else if delta_ms >= HOUR {
|
||||
format!("in {} h", delta_ms / HOUR)
|
||||
} else {
|
||||
format!("in {} min", (delta_ms / MIN).max(1))
|
||||
}
|
||||
}
|
||||
|
||||
#[derive(Clone, Debug, Serialize, Deserialize)]
|
||||
pub struct SubmitResult {
|
||||
pub next: Option<String>,
|
||||
pub chain_hash: String,
|
||||
}
|
||||
|
||||
#[server]
|
||||
#[server(endpoint = "submit_answer")]
|
||||
pub async fn submit_answer(
|
||||
question_id: String,
|
||||
alternative: String,
|
||||
@@ -1543,11 +1976,10 @@ pub async fn submit_answer(
|
||||
use crate::server::AppState;
|
||||
|
||||
let state = expect_context::<AppState>();
|
||||
let question = state
|
||||
.questions
|
||||
.load()
|
||||
.get(&question_id)
|
||||
.cloned()
|
||||
// resolve_question, not a plain map get: a dynamic page's concrete
|
||||
// path (what the client holds as its question id) resolves to the
|
||||
// pattern page it came from.
|
||||
let question = crate::content::resolve_question(&state.questions.load(), &question_id)
|
||||
.ok_or_else(|| ServerFnError::new("unknown question"))?;
|
||||
|
||||
let session: tower_sessions::Session = leptos_axum::extract().await?;
|
||||
@@ -1564,11 +1996,21 @@ pub async fn submit_answer(
|
||||
.iter()
|
||||
.find(|a| a.name == alternative)
|
||||
.ok_or_else(|| ServerFnError::new("unknown alternative"))?;
|
||||
let next = alt.action.clone();
|
||||
if alt.disabled {
|
||||
return Err(ServerFnError::new("this alternative isn't open yet"));
|
||||
}
|
||||
let record_as = alt.record_as.clone();
|
||||
|
||||
let responses: serde_json::Value = serde_json::from_str(&responses_json)
|
||||
.map_err(|e| ServerFnError::new(format!("invalid responses: {e}")))?;
|
||||
// `/shape/{curve.key}`: the next page may be chosen by the answer.
|
||||
let next = match alt.action.as_deref() {
|
||||
Some(action) => Some(
|
||||
crate::content::template_action(action, &responses)
|
||||
.ok_or_else(|| ServerFnError::new("this answer is missing what the next page needs"))?,
|
||||
),
|
||||
None => None,
|
||||
};
|
||||
|
||||
let parent_hashes: Vec<String> = parent_hash.into_iter().collect();
|
||||
let timestamp_ms = chrono::Utc::now().timestamp_millis();
|
||||
@@ -1588,6 +2030,14 @@ pub async fn submit_answer(
|
||||
.await
|
||||
.map_err(|e| ServerFnError::new(format!("nats publish failed: {e}")))?;
|
||||
|
||||
// Index the node so requires_chain pages can verify lineage.
|
||||
// Best-effort: the NATS event above is the durable record.
|
||||
if let Err(e) =
|
||||
crate::chain::record_node(&state.jetstream, &chain_hash, &question_id, timestamp_ms).await
|
||||
{
|
||||
tracing::error!("failed to index chain node: {e}");
|
||||
}
|
||||
|
||||
// Best-effort: a bucket-write hiccup shouldn't fail a submission the
|
||||
// NATS event has already recorded.
|
||||
if let Some(bucket) = &record_as {
|
||||
|
||||
+1
-1
@@ -19,7 +19,7 @@ pub struct User {
|
||||
pub const SESSION_USER_KEY: &str = "user";
|
||||
|
||||
/// Returns the currently signed-in user, if any.
|
||||
#[server]
|
||||
#[server(endpoint = "current_user")]
|
||||
pub async fn current_user() -> Result<Option<User>, ServerFnError> {
|
||||
let session: tower_sessions::Session = leptos_axum::extract().await?;
|
||||
let user = session
|
||||
|
||||
+66
-15
@@ -32,12 +32,15 @@ async fn main() -> anyhow::Result<()> {
|
||||
}
|
||||
}
|
||||
|
||||
let (questions, aggregates_map) = if let Some(dir) = path {
|
||||
(load_from_dir(&dir)?, load_aggregates_from_dir(&dir)?)
|
||||
let (questions, aggregates_map, site) = if let Some(dir) = path {
|
||||
(load_from_dir(&dir)?, load_aggregates_from_dir(&dir)?, load_site_from_dir(&dir)?)
|
||||
} else if let Some(repo_url) = repo {
|
||||
let questions = content::load_questions_from_gitea(&repo_url, &branch, &subdir).await?;
|
||||
let aggregates_map = content::load_aggregates_from_gitea(&repo_url, &branch).await?;
|
||||
(questions, aggregates_map)
|
||||
// load_site_from_gitea already validates; a missing file is
|
||||
// the default config, same as at portal boot.
|
||||
let site = content::load_site_from_gitea(&repo_url, &branch).await?;
|
||||
(questions, aggregates_map, site)
|
||||
} else {
|
||||
eprintln!(
|
||||
"usage: question-lint --repo <gitea-url> [--branch main] [--subdir questions] | --path <local-dir>"
|
||||
@@ -45,8 +48,25 @@ async fn main() -> anyhow::Result<()> {
|
||||
std::process::exit(2);
|
||||
};
|
||||
|
||||
if let Err(e) = site.validate() {
|
||||
eprintln!("FAIL: {e}");
|
||||
std::process::exit(1);
|
||||
}
|
||||
let aggregates_map = content::with_builtin_aggregates(aggregates_map);
|
||||
match content::validate_questions(&questions, &aggregates_map) {
|
||||
Ok(()) => {
|
||||
// The runtime's own event desk: a repo announcing pages
|
||||
// (Question.event) should read portal_events somewhere, or
|
||||
// "post what happened" tasks pile up unseen. Warn, don't
|
||||
// fail - the runtime creates the records either way.
|
||||
if questions.values().any(|q| q.event.is_some())
|
||||
&& !content::bucket_is_read(&questions, content::EVENTS_BUCKET)
|
||||
{
|
||||
eprintln!(
|
||||
"WARN: pages carry `event:` but no kv resource reads bucket {:?} - add a desk so summaries get posted",
|
||||
content::EVENTS_BUCKET
|
||||
);
|
||||
}
|
||||
println!(
|
||||
"OK: {} question(s), {} aggregate(s) valid",
|
||||
questions.len(),
|
||||
@@ -61,6 +81,22 @@ async fn main() -> anyhow::Result<()> {
|
||||
}
|
||||
}
|
||||
|
||||
/// The offline counterpart to `content::load_site_from_gitea` -
|
||||
/// `site.yaml` lives at the repo root like `aggregates.yaml`, and is
|
||||
/// just as optional locally: missing means default branding.
|
||||
fn load_site_from_dir(dir: &str) -> anyhow::Result<content::SiteConfig> {
|
||||
let site_path = std::path::Path::new(dir)
|
||||
.parent()
|
||||
.unwrap_or_else(|| std::path::Path::new("."))
|
||||
.join("site.yaml");
|
||||
if !site_path.exists() {
|
||||
return Ok(content::SiteConfig::default());
|
||||
}
|
||||
let raw = std::fs::read_to_string(&site_path)
|
||||
.map_err(|e| anyhow::anyhow!("reading {}: {e}", site_path.display()))?;
|
||||
serde_yaml::from_str(&raw).map_err(|e| anyhow::anyhow!("parsing {}: {e}", site_path.display()))
|
||||
}
|
||||
|
||||
/// The offline counterpart to `content::load_aggregates_from_gitea` -
|
||||
/// `aggregates.yaml` lives at the repo root, one level up from the
|
||||
/// pages directory `--path` names, so `dir`'s parent is where it's
|
||||
@@ -85,23 +121,38 @@ fn load_aggregates_from_dir(
|
||||
}
|
||||
|
||||
/// The offline counterpart to `content::load_questions_from_gitea` -
|
||||
/// same "every `*.yaml` file becomes a `Question` keyed by its own
|
||||
/// `id`" shape, just reading a local checkout instead of Gitea's API,
|
||||
/// the same recursive tree walk and `content::build_questions`
|
||||
/// pipeline (derived ids, relative refs, sections, followup
|
||||
/// inference), just reading a local checkout instead of Gitea's API,
|
||||
/// for linting a branch that hasn't been pushed yet.
|
||||
fn load_from_dir(
|
||||
dir: &str,
|
||||
) -> anyhow::Result<std::collections::HashMap<String, content::Question>> {
|
||||
let mut out = std::collections::HashMap::new();
|
||||
let base = std::path::Path::new(dir);
|
||||
let mut files = Vec::new();
|
||||
collect_yaml(base, base, &mut files)?;
|
||||
content::build_questions(&files)
|
||||
}
|
||||
|
||||
fn collect_yaml(
|
||||
base: &std::path::Path,
|
||||
dir: &std::path::Path,
|
||||
out: &mut Vec<(String, String)>,
|
||||
) -> anyhow::Result<()> {
|
||||
for entry in std::fs::read_dir(dir)? {
|
||||
let entry = entry?;
|
||||
let path = entry.path();
|
||||
if path.extension().and_then(|e| e.to_str()) != Some("yaml") {
|
||||
continue;
|
||||
let path = entry?.path();
|
||||
if path.is_dir() {
|
||||
collect_yaml(base, &path, out)?;
|
||||
} else if path.extension().and_then(|e| e.to_str()) == Some("yaml") {
|
||||
let rel = path
|
||||
.strip_prefix(base)
|
||||
.expect("walked paths sit under their base")
|
||||
.to_string_lossy()
|
||||
.replace('\\', "/");
|
||||
let raw = std::fs::read_to_string(&path)
|
||||
.map_err(|e| anyhow::anyhow!("reading {}: {e}", path.display()))?;
|
||||
out.push((rel, raw));
|
||||
}
|
||||
let raw = std::fs::read_to_string(&path)?;
|
||||
let question: content::Question = serde_yaml::from_str(&raw)
|
||||
.map_err(|e| anyhow::anyhow!("parsing {}: {e}", path.display()))?;
|
||||
out.insert(question.id.clone(), question);
|
||||
}
|
||||
Ok(out)
|
||||
Ok(())
|
||||
}
|
||||
|
||||
@@ -9,6 +9,60 @@ use sha2::{Digest, Sha256};
|
||||
/// submitted responses, and a timestamp. Parents are sorted first so the
|
||||
/// hash doesn't depend on the order multiple parents happened to arrive
|
||||
/// in.
|
||||
/// Where submitted chain nodes are indexed - hash → which question was
|
||||
/// answered. Small on purpose (no responses), and shared by every
|
||||
/// portal instance on the JetStream (hashes are globally unique, so
|
||||
/// cross-site collisions can't happen). This is what lets
|
||||
/// `requires_chain` pages verify a visitor's `?chain=` actually ends
|
||||
/// at the question they claim to have answered.
|
||||
pub const CHAIN_BUCKET: &str = "portal_chains";
|
||||
|
||||
#[derive(serde::Serialize, serde::Deserialize)]
|
||||
pub struct ChainNode {
|
||||
pub question_id: String,
|
||||
pub timestamp_ms: i64,
|
||||
}
|
||||
|
||||
/// Indexes one submitted node. Best-effort by design (the caller logs
|
||||
/// and continues): the NATS event is the durable record, this is a
|
||||
/// lookup convenience.
|
||||
pub async fn record_node(
|
||||
js: &async_nats::jetstream::Context,
|
||||
chain_hash: &str,
|
||||
question_id: &str,
|
||||
timestamp_ms: i64,
|
||||
) -> anyhow::Result<()> {
|
||||
let store = match js.get_key_value(CHAIN_BUCKET).await {
|
||||
Ok(store) => store,
|
||||
Err(_) => {
|
||||
js.create_key_value(async_nats::jetstream::kv::Config {
|
||||
bucket: CHAIN_BUCKET.to_string(),
|
||||
..Default::default()
|
||||
})
|
||||
.await?
|
||||
}
|
||||
};
|
||||
let node = ChainNode {
|
||||
question_id: question_id.to_string(),
|
||||
timestamp_ms,
|
||||
};
|
||||
store.put(chain_hash, serde_json::to_vec(&node)?.into()).await?;
|
||||
Ok(())
|
||||
}
|
||||
|
||||
/// Looks a chain hash up - `None` covers both "no such node" and
|
||||
/// "bucket not created yet" (no submissions anywhere), which read the
|
||||
/// same to a `requires_chain` check: the claimed lineage can't be
|
||||
/// verified, so the gate stays shut.
|
||||
pub async fn lookup_node(
|
||||
js: &async_nats::jetstream::Context,
|
||||
chain_hash: &str,
|
||||
) -> Option<ChainNode> {
|
||||
let store = js.get_key_value(CHAIN_BUCKET).await.ok()?;
|
||||
let bytes = store.get(chain_hash).await.ok()??;
|
||||
serde_json::from_slice(&bytes).ok()
|
||||
}
|
||||
|
||||
pub fn hash_node(
|
||||
question_id: &str,
|
||||
parent_hashes: &[String],
|
||||
|
||||
+1210
-40
File diff suppressed because it is too large
Load Diff
@@ -9,6 +9,9 @@ pub mod resource;
|
||||
#[cfg(feature = "ssr")]
|
||||
pub mod aggregates;
|
||||
|
||||
#[cfg(feature = "ssr")]
|
||||
pub mod announce;
|
||||
|
||||
#[cfg(feature = "ssr")]
|
||||
pub mod server;
|
||||
|
||||
|
||||
+33
-3
@@ -29,12 +29,17 @@ async fn main() -> anyhow::Result<()> {
|
||||
.unwrap_or_else(|_| "https://project.uhhm.no/uhhm/questions".to_string());
|
||||
let content_branch = std::env::var("CONTENT_BRANCH").unwrap_or_else(|_| "main".to_string());
|
||||
let gitea_base = content::gitea_api_base(&content_repo)?;
|
||||
let aggregates = content::load_aggregates_from_gitea(&content_repo, &content_branch).await?;
|
||||
let content_raw_base = content::gitea_raw_base(&content_repo)?;
|
||||
let aggregates = content::with_builtin_aggregates(
|
||||
content::load_aggregates_from_gitea(&content_repo, &content_branch).await?,
|
||||
);
|
||||
let questions = content::load_questions_from_gitea(&content_repo, &content_branch, "questions").await?;
|
||||
content::validate_questions(&questions, &aggregates)?;
|
||||
let site = content::load_site_from_gitea(&content_repo, &content_branch).await?;
|
||||
tracing::info!(count = questions.len(), repo = %content_repo, branch = %content_branch, "loaded content");
|
||||
let questions = Arc::new(arc_swap::ArcSwap::from_pointee(questions));
|
||||
let aggregates = Arc::new(arc_swap::ArcSwap::from_pointee(aggregates));
|
||||
let site = Arc::new(arc_swap::ArcSwap::from_pointee(site));
|
||||
|
||||
let nats_url =
|
||||
std::env::var("NATS_URL").unwrap_or_else(|_| "nats://127.0.0.1:4222".to_string());
|
||||
@@ -65,10 +70,11 @@ async fn main() -> anyhow::Result<()> {
|
||||
tokio::spawn(content::watch_for_reload(
|
||||
nats.clone(),
|
||||
content_repo,
|
||||
content_branch,
|
||||
content_branch.clone(),
|
||||
"questions".to_string(),
|
||||
questions.clone(),
|
||||
aggregates.clone(),
|
||||
site.clone(),
|
||||
));
|
||||
|
||||
let state = AppState {
|
||||
@@ -77,11 +83,18 @@ async fn main() -> anyhow::Result<()> {
|
||||
jetstream,
|
||||
questions,
|
||||
aggregates,
|
||||
site,
|
||||
gitea_base,
|
||||
content_raw_base,
|
||||
content_branch: content_branch.clone(),
|
||||
oidc: oidc_state,
|
||||
garage,
|
||||
};
|
||||
|
||||
// Announced pages: keep their desk records current, close ended
|
||||
// windows (see announce.rs).
|
||||
tokio::spawn(portal::announce::run(state.clone()));
|
||||
|
||||
// Dev-friendly defaults: in-memory sessions, secure cookies only when
|
||||
// COOKIE_SECURE=true (set it behind TLS in production) - same
|
||||
// defaults cnats uses. SameSite=Lax (tower-sessions defaults to
|
||||
@@ -134,8 +147,25 @@ async fn main() -> anyhow::Result<()> {
|
||||
.route("/api/{*fn_name}", any(server_fn_handler))
|
||||
.route("/upload", post(upload::upload))
|
||||
.route("/gitea-repo", get(content::gitea_repo_handler))
|
||||
// Content-shipped assets (hero module etc.), same-origin.
|
||||
.route("/site/{*path}", get(content::site_asset_handler))
|
||||
.route("/automation/kv/{bucket}", get(content::automation_kv_handler))
|
||||
.nest_service("/pkg", ServeDir::new(pkg_dir))
|
||||
// no-cache = "revalidate before reuse", not "don't cache":
|
||||
// pkg files keep the same names across releases (portal.js,
|
||||
// portal.wasm), and without this browsers heuristically cache
|
||||
// them - a stale wasm from the previous release then talks to
|
||||
// a server whose server-fn wire format has moved on and every
|
||||
// page renders as its error branch. A 304 per load is the
|
||||
// price of never shipping that skew again.
|
||||
.nest_service(
|
||||
"/pkg",
|
||||
tower::ServiceBuilder::new()
|
||||
.layer(tower_http::set_header::SetResponseHeaderLayer::overriding(
|
||||
axum::http::header::CACHE_CONTROL,
|
||||
axum::http::HeaderValue::from_static("no-cache"),
|
||||
))
|
||||
.service(ServeDir::new(pkg_dir)),
|
||||
)
|
||||
.nest_service("/fonts", ServeDir::new(fonts_dir))
|
||||
.route_service("/favicon-light.svg", ServeFile::new(favicon_light_path))
|
||||
.route_service("/favicon-dark.svg", ServeFile::new(favicon_dark_path))
|
||||
|
||||
+90
-23
@@ -16,7 +16,7 @@ use leptos::prelude::*;
|
||||
/// fetch (`GiteaStarred`/`GiteaOrgRepos`/`Url`), the mechanism behind
|
||||
/// "a resource parameterized by other form fields"; a `Kv` resource
|
||||
/// ignores them entirely, same as today.
|
||||
#[server]
|
||||
#[server(endpoint = "get_resource")]
|
||||
pub async fn get_resource(
|
||||
question_id: String,
|
||||
alternative: String,
|
||||
@@ -49,7 +49,7 @@ pub async fn get_resource(
|
||||
/// of whether it's displayed read-only or offered as choices to pick
|
||||
/// from, so this deliberately doesn't duplicate the source-dispatch or
|
||||
/// jq-shaping logic - see `fetch_resource_value`.
|
||||
#[server]
|
||||
#[server(endpoint = "get_requirement_options")]
|
||||
pub async fn get_requirement_options(
|
||||
question_id: String,
|
||||
alternative: String,
|
||||
@@ -80,7 +80,7 @@ pub async fn get_requirement_options(
|
||||
/// `get_requirement_options`: fetches the resource a bound field
|
||||
/// loads its value from, parameterized by the watched sibling's value
|
||||
/// (already inside `params`, keyed by the bind's param name).
|
||||
#[server]
|
||||
#[server(endpoint = "get_requirement_binding")]
|
||||
pub async fn get_requirement_binding(
|
||||
question_id: String,
|
||||
alternative: String,
|
||||
@@ -122,11 +122,12 @@ fn find_feature(
|
||||
alternative: &str,
|
||||
feature_name: &str,
|
||||
) -> Result<crate::content::Feature, ServerFnError> {
|
||||
let question = state
|
||||
.questions
|
||||
.load()
|
||||
.get(question_id)
|
||||
.cloned()
|
||||
// resolve_question, not a plain map get: a dynamic page's client
|
||||
// holds its concrete path as the question id, and resolution is
|
||||
// also what substitutes the URL segment into the page's resource
|
||||
// keys - so this lookup is where a `/review/<record>` page's
|
||||
// feature acquires its record-specific key.
|
||||
let question = crate::content::resolve_question(&state.questions.load(), question_id)
|
||||
.ok_or_else(|| ServerFnError::new("unknown question"))?;
|
||||
question
|
||||
.alternatives
|
||||
@@ -220,6 +221,10 @@ async fn fetch_resource_value(
|
||||
ResourceSource::GiteaOrgRepos { org } => {
|
||||
fetch_gitea_json(state, &format!("/api/v1/orgs/{org}/repos"), params).await?
|
||||
}
|
||||
ResourceSource::GiteaReleases { owner, repo } => {
|
||||
fetch_gitea_json(state, &format!("/api/v1/repos/{owner}/{repo}/releases"), params)
|
||||
.await?
|
||||
}
|
||||
ResourceSource::Url { url } => fetch_url_json(url, params).await?,
|
||||
};
|
||||
|
||||
@@ -442,10 +447,14 @@ mod tests {
|
||||
use super::*;
|
||||
|
||||
/// A canned, Gitea-API-shaped fixture - the same fields the real
|
||||
/// `/users/{username}/starred` endpoint returns - run through the
|
||||
/// `/users/{username}/starred` endpoint returns (Gitea 1.27:
|
||||
/// `stars_count`, not GitHub's `stargazers_count`; `website` is ""
|
||||
/// when the repo's Website setting is empty) - run through the
|
||||
/// filter `index.yaml`'s "What we've built" resource actually
|
||||
/// declares, confirming the `jaq` integration produces the shape
|
||||
/// the frontend showcase card expects.
|
||||
/// the frontend showcase card expects: the Website setting wins
|
||||
/// over the repo url, and a private repo without one gets a null
|
||||
/// url (unlinked card) instead of a link that 404s for visitors.
|
||||
#[test]
|
||||
fn jq_shapes_gitea_repo_list_for_the_showcase() {
|
||||
let input = serde_json::json!([
|
||||
@@ -453,28 +462,86 @@ mod tests {
|
||||
"name": "cnats",
|
||||
"description": "A NATS-backed chat client",
|
||||
"html_url": "https://project.uhhm.no/bl/cnats",
|
||||
"stargazers_count": 3,
|
||||
"website": "",
|
||||
"stars_count": 3,
|
||||
"private": false
|
||||
},
|
||||
{
|
||||
"name": "portal",
|
||||
"description": "This app",
|
||||
"html_url": "https://project.uhhm.no/uhhm/portal",
|
||||
"stargazers_count": 1,
|
||||
"private": false
|
||||
"name": "secret-product",
|
||||
"description": "Private repo advertised via its homepage",
|
||||
"html_url": "https://project.uhhm.no/uhhm/secret-product",
|
||||
"website": "https://secret-product.example",
|
||||
"stars_count": 2,
|
||||
"private": true
|
||||
},
|
||||
{
|
||||
"name": "internal-tool",
|
||||
"description": "Private repo with no homepage",
|
||||
"html_url": "https://project.uhhm.no/uhhm/internal-tool",
|
||||
"website": "",
|
||||
"stars_count": 1,
|
||||
"private": true
|
||||
}
|
||||
]);
|
||||
let filter = ".[] | {name: .name, description: .description, url: .html_url, stars: .stargazers_count}";
|
||||
let filter = r#".[] | {name: .name, description: .description,
|
||||
stars: .stars_count,
|
||||
url: (if .website != null and .website != "" then .website
|
||||
elif .private then null
|
||||
else .html_url end)}"#;
|
||||
|
||||
let shaped = apply_jq(filter, &input).expect("filter runs");
|
||||
let items = shaped.as_array().expect("array output");
|
||||
assert_eq!(items.len(), 3);
|
||||
// Public without a website still links to the repo.
|
||||
assert_eq!(items[0]["name"], "cnats");
|
||||
assert_eq!(items[0]["url"], "https://project.uhhm.no/bl/cnats");
|
||||
assert_eq!(items[0]["stars"], 3);
|
||||
// Private with a website links there, never to the repo.
|
||||
assert_eq!(items[1]["url"], "https://secret-product.example");
|
||||
// Private without a website gets no link at all.
|
||||
assert_eq!(items[2]["url"], serde_json::Value::Null);
|
||||
// The filter never mentions `private` - confirms shaping
|
||||
// actually drops fields, not just passes the object through.
|
||||
assert!(items[0].get("private").is_none());
|
||||
}
|
||||
|
||||
/// Gitea-1.27-shaped release fixtures through the filter
|
||||
/// redoal/questions' "Our Composition" feature declares. While the
|
||||
/// repo is private the filter pins `url: null` - a private
|
||||
/// release's html_url 404s for anonymous visitors, so the card
|
||||
/// must render an unlinked heading instead.
|
||||
#[test]
|
||||
fn jq_shapes_gitea_release_list_for_redoal() {
|
||||
let input = serde_json::json!([
|
||||
{
|
||||
"name": "varde bring-up",
|
||||
"tag_name": "v0.3.0",
|
||||
"body": "Embedded varde-core on iOS.",
|
||||
"published_at": "2026-08-16T09:00:00Z",
|
||||
"html_url": "https://project.uhhm.no/redoal/redoal/releases/tag/v0.3.0",
|
||||
"draft": false,
|
||||
"prerelease": true
|
||||
},
|
||||
{
|
||||
"name": "first echo",
|
||||
"tag_name": "v0.1.0",
|
||||
"body": "Gesture keys round-trip.",
|
||||
"published_at": "2026-05-01T09:00:00Z",
|
||||
"html_url": "https://project.uhhm.no/redoal/redoal/releases/tag/v0.1.0",
|
||||
"draft": false,
|
||||
"prerelease": false
|
||||
}
|
||||
]);
|
||||
let filter = ".[] | {name: .name, description: .body, tag: .tag_name, published: .published_at, url: null}";
|
||||
|
||||
let shaped = apply_jq(filter, &input).expect("filter runs");
|
||||
let items = shaped.as_array().expect("array output");
|
||||
assert_eq!(items.len(), 2);
|
||||
assert_eq!(items[0]["name"], "cnats");
|
||||
assert_eq!(items[0]["url"], "https://project.uhhm.no/bl/cnats");
|
||||
assert_eq!(items[0]["stars"], 3);
|
||||
// The filter never mentions `private` - confirms shaping
|
||||
// actually drops fields, not just passes the object through.
|
||||
assert!(items[0].get("private").is_none());
|
||||
assert_eq!(items[0]["name"], "varde bring-up");
|
||||
assert_eq!(items[0]["tag"], "v0.3.0");
|
||||
assert_eq!(items[0]["description"], "Embedded varde-core on iOS.");
|
||||
assert_eq!(items[0]["url"], serde_json::Value::Null, "no public link while private");
|
||||
assert!(items[0].get("html_url").is_none());
|
||||
}
|
||||
|
||||
#[test]
|
||||
|
||||
@@ -28,11 +28,20 @@ pub struct AppState {
|
||||
/// with no entry here isn't event-sourced - plain KV mutate-in-place
|
||||
/// still works (see `answers.rs`).
|
||||
pub aggregates: Arc<ArcSwap<HashMap<String, crate::aggregates::AggregateSchema>>>,
|
||||
/// Site branding from the content repo's optional `site.yaml`
|
||||
/// (title, wordmark, hero kind) - hot-swapped with `questions`/
|
||||
/// `aggregates` on the same reload. Default = the historical uhhm
|
||||
/// look.
|
||||
pub site: Arc<ArcSwap<crate::content::SiteConfig>>,
|
||||
/// `scheme://host` of the Gitea instance content is loaded from
|
||||
/// (see `content::gitea_api_base`) - kept alongside `questions`
|
||||
/// rather than re-derived per call, since `resolve_gitea_repo` needs
|
||||
/// it too and has no other reason to see `CONTENT_REPO` itself.
|
||||
pub gitea_base: String,
|
||||
/// `{gitea}/api/v1/repos/{owner}/{repo}/raw` and the branch - what
|
||||
/// `content::site_asset_handler` proxies content-shipped assets from.
|
||||
pub content_raw_base: String,
|
||||
pub content_branch: String,
|
||||
pub oidc: Arc<oidc::Oidc>,
|
||||
/// `None` when `GARAGE_*` env vars aren't set - uploads are the one
|
||||
/// optional feature, everything else works without Garage.
|
||||
|
||||
+301
-97
@@ -47,20 +47,67 @@
|
||||
--accent-soft: rgba(142, 194, 192, 0.16);
|
||||
|
||||
--paper: #0a0a0a;
|
||||
--paper-raised: #161616;
|
||||
--ink: #ededed;
|
||||
--ink-dim: #9a9a9a;
|
||||
--line: #2a2a2a;
|
||||
|
||||
/* Cards float over a sticky hero piece - translucent so the piece
|
||||
reads faintly through them (paired with backdrop-filter on
|
||||
.alt-card), shadowed so their edge against the animated backdrop
|
||||
is a soft lift rather than a hard contrast line. */
|
||||
--card-bg: rgba(22, 22, 22, 0.35);
|
||||
--card-bg-opaque: rgba(22, 22, 22, 0.84);
|
||||
--card-shadow: rgba(0, 0, 0, 0.5);
|
||||
|
||||
--error: #ff6b6b;
|
||||
/* Behind .hero-copy: dark halo on dark stock, paper halo on light. */
|
||||
--hero-glow: rgba(0, 0, 0, 0.8);
|
||||
|
||||
--heading: "Quicksand", var(--sans);
|
||||
--sans: -apple-system, "SF Pro Text", ui-sans-serif, "Segoe UI", system-ui, sans-serif;
|
||||
|
||||
--radius: 1.1rem;
|
||||
|
||||
/* The single place absolute units are allowed: this IS the base every
|
||||
other length derives from (rem/em everywhere else - px is banned in
|
||||
stylesheets). First line is the fallback for engines without lvmin. */
|
||||
font-size: 17px;
|
||||
font-size: max(12px, calc(2.1lvmin + 3pt));
|
||||
}
|
||||
|
||||
/* Light theme: the same muted-press idea on white stock - warm paper,
|
||||
near-black ink, and the accent deepened from dusty cyan to a teal
|
||||
ink that actually carries as text on light paper (the dark theme's
|
||||
#8ec2c0 washes out there). Canvas-drawing modules (gesture.js, and
|
||||
content-shipped hero modules) mirror this palette on their own,
|
||||
since canvas paint can't read CSS vars. */
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--accent: #47807e;
|
||||
--accent-soft: rgba(71, 128, 126, 0.16);
|
||||
|
||||
--paper: #f6f5f1;
|
||||
--ink: #1d1d1b;
|
||||
--ink-dim: #6d6c66;
|
||||
--line: #d9d7cf;
|
||||
|
||||
--card-bg: rgba(252, 251, 248, 0.35);
|
||||
--card-bg-opaque: rgba(252, 251, 248, 0.84);
|
||||
--card-shadow: rgba(50, 48, 42, 0.18);
|
||||
|
||||
--error: #a83a32;
|
||||
--hero-glow: rgba(246, 245, 241, 0.85);
|
||||
}
|
||||
|
||||
/* The wordmark SVG is a hardcoded white stroke (also used raw in
|
||||
dark contexts elsewhere) - flip it to ink here rather than fork
|
||||
the asset. */
|
||||
.wordmark img {
|
||||
filter: invert(0.92);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -112,7 +159,7 @@ main.not-found {
|
||||
/* hero */
|
||||
|
||||
.hero {
|
||||
max-width: 780px;
|
||||
max-width: 46rem;
|
||||
margin: 0 auto;
|
||||
padding: 4rem 1.5rem 2.5rem;
|
||||
display: flex;
|
||||
@@ -148,80 +195,75 @@ main.not-found {
|
||||
max-width: 46ch;
|
||||
}
|
||||
|
||||
/* the actual "YES - Rasterized Lines" piece live at uhhm.no (see
|
||||
public/yes.js) - landing page only. Full-viewport so it's a real
|
||||
moment, not a thumbnail; hero-copy overlays near the bottom rather
|
||||
than interrupting the canvas. */
|
||||
|
||||
.hero-yes {
|
||||
/* A content-shipped hero module (site.yaml hero.kind: module) draws
|
||||
into .hero-piece; the module owns its look (it may restyle .hero
|
||||
itself). Portal only reserves the box so the copy doesn't jump when
|
||||
the module mounts - plain-vh fallback first, as everywhere. */
|
||||
.hero-module .hero-piece {
|
||||
position: relative;
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
/* svh here is only the pre-JS/no-JS fallback (and first paint before
|
||||
yes.js's constructor runs). Once yes.js mounts, it overwrites this
|
||||
with an inline `height: <px>` frozen from a single measurement -
|
||||
see setupCanvas()'s comment in yes.js for why: on real mobile
|
||||
Safari, content bottom-aligned inside this box kept sliding down
|
||||
as the address bar collapsed even with a spec'd-stable viewport
|
||||
unit here, so the box's actual height can't be trusted to stay
|
||||
put on that unit alone. An inline style set from JS always wins
|
||||
the cascade over this rule, so that frozen number is what
|
||||
actually governs once the page is interactive.
|
||||
Plain-vh fallback declared first - an engine without svh support
|
||||
ignores the invalid second line rather than falling through to
|
||||
auto height, which would collapse this to the height of its
|
||||
in-flow content and clip the canvas via overflow:hidden below. */
|
||||
height: 100vh;
|
||||
height: 100svh;
|
||||
padding: 0;
|
||||
justify-content: flex-end;
|
||||
overflow: hidden;
|
||||
min-height: 55vh;
|
||||
min-height: 55svh;
|
||||
}
|
||||
|
||||
.hero-canvas {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.hero-canvas canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hero-canvas #rasterCanvas {
|
||||
mix-blend-mode: overlay;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.hero-yes .hero-copy {
|
||||
/* announcements - live event pages, a strip above the hero copy.
|
||||
Header, not footer: the one place a page claims attention before
|
||||
the question is asked. */
|
||||
.announce {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 0.6rem 1.2rem;
|
||||
margin: -2rem 0 0.5rem;
|
||||
font-size: 0.88rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 0 1.5rem 3.5rem;
|
||||
gap: 0.6rem;
|
||||
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
/* Softens the otherwise hard cut where the full-bleed canvas meets the
|
||||
page background right below it - fades to the same --paper color
|
||||
over the last few ems instead of stopping dead. Non-interactive so
|
||||
it never steals clicks meant for the canvas underneath. */
|
||||
.hero-yes::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 8rem;
|
||||
background: linear-gradient(to bottom, transparent, var(--paper));
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
.announce-item {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
gap: 0.35rem 0.7rem;
|
||||
padding: 0.45rem 0.9rem;
|
||||
border: 0.06rem solid var(--line);
|
||||
border-left: 0.2rem solid var(--accent);
|
||||
border-radius: 0.3rem;
|
||||
color: var(--ink);
|
||||
text-decoration: none;
|
||||
background: var(--paper);
|
||||
transition: border-color 120ms;
|
||||
}
|
||||
|
||||
.announce-item:hover,
|
||||
.announce-item[aria-current="page"] {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.announce-name {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.announce-when {
|
||||
color: var(--ink-dim);
|
||||
}
|
||||
|
||||
.announce-relative {
|
||||
color: var(--accent);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
/* alternatives */
|
||||
|
||||
/* position + z-index on these three: everything that scrolls over the
|
||||
sticky canvas must be a positioned box above the hero's z-index 0,
|
||||
or the (positioned) hero would paint over it. */
|
||||
.alternatives {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 75ch;
|
||||
margin: 0 auto 5rem;
|
||||
padding: 0 1.5rem;
|
||||
@@ -229,7 +271,13 @@ main.not-found {
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.question-nav,
|
||||
.question-responsible {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 43.75rem) {
|
||||
.alternatives {
|
||||
padding: 0;
|
||||
gap: 3.5rem;
|
||||
@@ -263,7 +311,7 @@ main.not-found {
|
||||
.question-nav a {
|
||||
color: var(--ink-dim);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid var(--line);
|
||||
border-bottom: 0.06rem solid var(--line);
|
||||
}
|
||||
|
||||
.question-nav a:hover {
|
||||
@@ -292,10 +340,25 @@ main.not-found {
|
||||
}
|
||||
|
||||
.alt-card {
|
||||
background: var(--paper-raised);
|
||||
border: 1px solid var(--line);
|
||||
background: var(--card-bg);
|
||||
/* Frosted glass over the animated canvas behind: the blur is what
|
||||
keeps text on a translucent card readable while the piece still
|
||||
reads through it in color and motion. */
|
||||
-webkit-backdrop-filter: blur(0.8rem);
|
||||
backdrop-filter: blur(0.8rem);
|
||||
border: 0.06rem solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
padding: 1.75rem 1.9rem;
|
||||
box-shadow: 0 1.1rem 2.4rem var(--card-shadow);
|
||||
}
|
||||
|
||||
/* Without backdrop blur, 0.55-alpha cards put text straight over the
|
||||
moving canvas - illegible. Engines lacking the filter get a
|
||||
near-opaque card instead. */
|
||||
@supports not ((backdrop-filter: blur(1rem)) or (-webkit-backdrop-filter: blur(1rem))) {
|
||||
.alt-card {
|
||||
background: var(--card-bg-opaque);
|
||||
}
|
||||
}
|
||||
|
||||
.alt-image {
|
||||
@@ -363,7 +426,7 @@ main.not-found {
|
||||
}
|
||||
|
||||
.feature {
|
||||
border-left: 3px solid var(--feature-accent, transparent);
|
||||
border-left: 0.18rem solid var(--feature-accent, transparent);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
@@ -385,6 +448,24 @@ main.not-found {
|
||||
margin-bottom: 0.15em;
|
||||
}
|
||||
|
||||
/* links inside markdown descriptions */
|
||||
.alt-description a,
|
||||
.feature p a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
border-bottom: 0.06rem solid var(--accent);
|
||||
}
|
||||
|
||||
.alt-description a:hover,
|
||||
.feature p a:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.alt-description code,
|
||||
.feature p code {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.feature p {
|
||||
color: var(--ink-dim);
|
||||
font-size: 0.95rem;
|
||||
@@ -413,7 +494,7 @@ textarea {
|
||||
font: inherit;
|
||||
color: var(--ink);
|
||||
background: var(--paper);
|
||||
border: 1px solid var(--line);
|
||||
border: 0.06rem solid var(--line);
|
||||
border-radius: 0.6rem;
|
||||
padding: 0.65rem 0.8rem;
|
||||
width: 100%;
|
||||
@@ -438,21 +519,134 @@ input:focus,
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px var(--accent-soft);
|
||||
box-shadow: 0 0 0 0.18rem var(--accent-soft);
|
||||
}
|
||||
|
||||
/* One placeholder treatment for every input-like surface: solid
|
||||
ink-dim, no translucency. opacity: 1 also undoes the UA's own
|
||||
placeholder dimming (Firefox) and ProseKit's 0.3 on its
|
||||
placeholder pseudo-element, which read far dimmer than the
|
||||
native inputs next to it. */
|
||||
::placeholder,
|
||||
.prosekit-editor .prosekit-placeholder::before,
|
||||
.prosekit-editor.prosekit-placeholder::before {
|
||||
color: var(--ink-dim);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.prosekit-wrap {
|
||||
background: var(--paper);
|
||||
border: 1px solid var(--line);
|
||||
border: 0.06rem solid var(--line);
|
||||
border-radius: 0.6rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* The gesture drawing field (gesture.js). Stroke/ghost/echo colors
|
||||
live in the JS module's own palette table - canvas can't read these
|
||||
custom properties - so palette changes go there AND here. */
|
||||
.gesture-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* The canvas is created by JS only after wasm hydration - reserve its
|
||||
3/2 box until then so content below doesn't jump. Scoped to :empty
|
||||
on purpose: on the mounted wrap (a stretched item inside the flex
|
||||
.field) the same aspect-ratio turned the echo strip's extra height
|
||||
into extra WIDTH and the whole card ballooned past the viewport
|
||||
after the first stroke. */
|
||||
.gesture-wrap:empty {
|
||||
aspect-ratio: 3 / 2;
|
||||
}
|
||||
|
||||
.gesture-canvas {
|
||||
display: block;
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background: var(--paper);
|
||||
border: 0.06rem solid var(--line);
|
||||
border-radius: 0.6rem;
|
||||
cursor: crosshair;
|
||||
/* Load-bearing on touch: without it the browser pans instead of
|
||||
letting the stroke happen. */
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.gesture-echoes {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
min-height: 3rem;
|
||||
}
|
||||
|
||||
.gesture-echoes:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gesture-echo {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
background: var(--paper);
|
||||
border: 0.06rem solid var(--line);
|
||||
border-radius: 0.4rem;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.gesture-echo.shown {
|
||||
opacity: var(--echo-strength, 1);
|
||||
}
|
||||
|
||||
/* places are pickable: the pick re-derives the input's key */
|
||||
.gesture-echo {
|
||||
cursor: pointer;
|
||||
transition: opacity 0.5s ease, border-color 120ms, transform 120ms;
|
||||
}
|
||||
|
||||
.gesture-echo:hover,
|
||||
.gesture-echo:focus-visible {
|
||||
border-color: var(--accent);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.gesture-echo.selected {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 0.12rem var(--accent);
|
||||
transform: translateY(-0.1rem);
|
||||
}
|
||||
|
||||
.gesture-empty {
|
||||
margin: 0.5rem 0 0;
|
||||
font-size: 0.85rem;
|
||||
color: var(--ink-dim);
|
||||
}
|
||||
|
||||
.gesture-empty:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gesture-status {
|
||||
position: absolute;
|
||||
top: 0.55rem;
|
||||
right: 0.55rem;
|
||||
width: 0.45rem;
|
||||
height: 0.45rem;
|
||||
border-radius: 50%;
|
||||
background: var(--ink-dim);
|
||||
opacity: 0.35;
|
||||
transition: opacity 0.3s ease, background 0.3s ease;
|
||||
}
|
||||
|
||||
.gesture-status.live {
|
||||
background: var(--accent);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.prosekit-toolbar {
|
||||
display: flex;
|
||||
gap: 0.2rem;
|
||||
padding: 0.4rem;
|
||||
border-bottom: 1px solid var(--line);
|
||||
border-bottom: 0.06rem solid var(--line);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@@ -461,7 +655,7 @@ textarea:focus {
|
||||
font-size: 0.9rem;
|
||||
color: var(--ink-dim);
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border: 0.06rem solid transparent;
|
||||
border-radius: 0.4rem;
|
||||
padding: 0.3rem 0.55rem;
|
||||
cursor: pointer;
|
||||
@@ -491,60 +685,63 @@ textarea:focus {
|
||||
|
||||
.prosekit-wrap:focus-within {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px var(--accent-soft);
|
||||
box-shadow: 0 0 0 0.18rem var(--accent-soft);
|
||||
}
|
||||
|
||||
/* ProseKit's typography.css (loaded from esm.sh at mount time) sets
|
||||
fixed px font sizes on .ProseMirror, so they ignore the responsive
|
||||
root font-size. Re-state them in rem/em at the same proportions,
|
||||
with .prosekit-editor prefixed so these win on specificity. */
|
||||
.prosekit-editor .ProseMirror p {
|
||||
/* The editor's whole type scale, in rem. ProseKit's own typography.css
|
||||
is deliberately not loaded (it sizes content in fixed px - see
|
||||
mountEditor in prosekit-editor.js), so these rules are the only
|
||||
typography the editor gets, on top of UA defaults (em-based, they
|
||||
scale fine for lists/blockquote/code). NOTE: editor.mount() turns the
|
||||
.prosekit-editor div itself into the .ProseMirror root, so content
|
||||
elements are its direct children - no .ProseMirror in the selector. */
|
||||
.prosekit-editor p {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
margin: 0 0 0.6em;
|
||||
}
|
||||
|
||||
.prosekit-editor .ProseMirror p:last-child {
|
||||
.prosekit-editor p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.prosekit-editor .ProseMirror h1 {
|
||||
.prosekit-editor h1 {
|
||||
font-size: 2.5rem;
|
||||
line-height: 1.1;
|
||||
margin: 0.9em 0 0.1em;
|
||||
}
|
||||
|
||||
.prosekit-editor .ProseMirror h2 {
|
||||
.prosekit-editor h2 {
|
||||
font-size: 1.875rem;
|
||||
line-height: 1.3;
|
||||
margin: 1.05em 0 0.13em;
|
||||
}
|
||||
|
||||
.prosekit-editor .ProseMirror h3 {
|
||||
.prosekit-editor h3 {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.33;
|
||||
margin: 0.9em 0 0.04em;
|
||||
}
|
||||
|
||||
.prosekit-editor .ProseMirror h4 {
|
||||
.prosekit-editor h4 {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.3;
|
||||
margin: 0.8em 0 0.05em;
|
||||
}
|
||||
|
||||
.prosekit-editor .ProseMirror h5 {
|
||||
.prosekit-editor h5 {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.22;
|
||||
margin: 0.78em 0 0.06em;
|
||||
}
|
||||
|
||||
.prosekit-editor .ProseMirror h6 {
|
||||
.prosekit-editor h6 {
|
||||
font-size: 1rem;
|
||||
line-height: 1.25;
|
||||
margin: 0.75em 0 0.06em;
|
||||
}
|
||||
|
||||
.prosekit-editor .ProseMirror :is(h1, h2, h3, h4, h5, h6):first-child {
|
||||
.prosekit-editor :is(h1, h2, h3, h4, h5, h6):first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@@ -552,7 +749,7 @@ textarea:focus {
|
||||
font-family: var(--sans);
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
color: #0a0a0a;
|
||||
color: var(--paper);
|
||||
background: var(--accent);
|
||||
border: none;
|
||||
border-radius: 0.7rem;
|
||||
@@ -566,7 +763,7 @@ textarea:focus {
|
||||
}
|
||||
|
||||
.alt-submit:active {
|
||||
transform: translateY(1px);
|
||||
transform: translateY(0.06em);
|
||||
}
|
||||
|
||||
.alt-submit:disabled {
|
||||
@@ -574,6 +771,13 @@ textarea:focus {
|
||||
cursor: wait;
|
||||
}
|
||||
|
||||
/* A content-disabled alternative (`disabled: true`): announced, not
|
||||
yet takeable - reads as a promise, not as a stuck form. */
|
||||
.alt-submit.soon:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.gate-card {
|
||||
text-align: center;
|
||||
}
|
||||
@@ -591,13 +795,13 @@ textarea:focus {
|
||||
}
|
||||
|
||||
.resource-error {
|
||||
color: #ff6b6b;
|
||||
color: var(--error);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.resource-raw {
|
||||
background: var(--paper);
|
||||
border: 1px solid var(--line);
|
||||
border: 0.06rem solid var(--line);
|
||||
border-radius: 0.6rem;
|
||||
padding: 0.8rem;
|
||||
font-size: 0.82rem;
|
||||
@@ -611,7 +815,7 @@ textarea:focus {
|
||||
}
|
||||
|
||||
.answer-row {
|
||||
border: 1px solid var(--line);
|
||||
border: 0.06rem solid var(--line);
|
||||
border-radius: 0.8rem;
|
||||
padding: 1rem 1.1rem;
|
||||
display: grid;
|
||||
@@ -624,7 +828,7 @@ textarea:focus {
|
||||
|
||||
.answer-fields {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
|
||||
gap: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
@@ -674,7 +878,7 @@ textarea:focus {
|
||||
}
|
||||
|
||||
.item-card {
|
||||
border: 1px solid var(--line);
|
||||
border: 0.06rem solid var(--line);
|
||||
border-radius: 0.8rem;
|
||||
padding: 1rem 1.1rem;
|
||||
display: grid;
|
||||
@@ -736,8 +940,8 @@ textarea:focus {
|
||||
font-size: 0.85rem;
|
||||
color: var(--ink);
|
||||
background: var(--paper);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 999px;
|
||||
border: 0.06rem solid var(--line);
|
||||
border-radius: 999rem;
|
||||
padding: 0.4rem 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: border-color 120ms, color 120ms, background 120ms;
|
||||
@@ -759,7 +963,7 @@ textarea:focus {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
@media (max-width: 40rem) {
|
||||
.hero {
|
||||
padding: 3rem 1.25rem 2rem;
|
||||
}
|
||||
|
||||
@@ -1,490 +0,0 @@
|
||||
// Ported from ~/repos/webpage/content/visualize/ah.html ("YES - Rasterized
|
||||
// Lines"), the piece currently live at uhhm.no - kept as the actual asset,
|
||||
// not reinvented. Two changes from the original: exported as a class (no
|
||||
// auto-init on `window load`, since Leptos controls when this mounts) and
|
||||
// a `stop()` method that actually breaks the requestAnimationFrame loop -
|
||||
// the original ran forever once started, fine for a static page that's
|
||||
// the whole document, not fine in an SPA where this hero mounts/unmounts
|
||||
// as you navigate.
|
||||
|
||||
export class RasterizedYES {
|
||||
constructor() {
|
||||
this.rasterCanvas = document.getElementById('rasterCanvas');
|
||||
this.lineCanvas = document.getElementById('lineCanvas');
|
||||
|
||||
// The Rust side only constructs this once it's confirmed (via a
|
||||
// NodeRef) that the canvas is mounted, but that guard has shown
|
||||
// a real gap on fast client-side re-navigation back to `/` -
|
||||
// this is the actual failure point, so it gets its own defense
|
||||
// rather than depending on getting that timing exactly right
|
||||
// from the other side of the wasm boundary. Leaving the
|
||||
// instance otherwise-inert (no crash, no animation) rather than
|
||||
// throwing mid-render - `stop()` already tolerates a partially
|
||||
// (non-)initialized instance.
|
||||
if (!this.rasterCanvas || !this.lineCanvas) {
|
||||
console.warn('RasterizedYES: canvas not in DOM yet, skipping');
|
||||
this.destroyed = true;
|
||||
return;
|
||||
}
|
||||
|
||||
this.rasterCtx = this.rasterCanvas.getContext('2d');
|
||||
this.lineCtx = this.lineCanvas.getContext('2d');
|
||||
|
||||
this.lines = [];
|
||||
this.rasterData = null;
|
||||
this.isActive = true;
|
||||
this.destroyed = false;
|
||||
this.time = 0;
|
||||
|
||||
this.mouseX = 0.5;
|
||||
this.mouseY = 0.5;
|
||||
this.containmentStrength = 0.5;
|
||||
this.wiggleAmount = 0.5;
|
||||
|
||||
// .hero-canvas is inset:0 inside this - freezing an inline
|
||||
// height here (below) is what actually locks the box, not
|
||||
// just reading its rect.
|
||||
this.heroEl = this.rasterCanvas.closest('.hero');
|
||||
|
||||
this.setupCanvas();
|
||||
this.setupResizeHandler();
|
||||
this.setupMouseTracking();
|
||||
this.setupClickHandler();
|
||||
this.rasterizeText();
|
||||
this.initializeLines();
|
||||
this.animate();
|
||||
}
|
||||
|
||||
stop() {
|
||||
this.destroyed = true;
|
||||
if (this._resizeHandler) {
|
||||
window.removeEventListener('resize', this._resizeHandler);
|
||||
}
|
||||
}
|
||||
|
||||
// Reading .hero-canvas's rendered rect (a prior attempt at this)
|
||||
// only helps if that rect actually stays put - and on real mobile
|
||||
// Safari it didn't: .hero-copy (bottom-aligned via flexbox inside
|
||||
// .hero-yes) kept sliding down as the address bar collapsed, even
|
||||
// with a spec'd-stable viewport unit (svh, then lvh) driving the
|
||||
// box's height. Either the browser isn't holding up its end, or
|
||||
// something in the cascade is still landing on a live value - not
|
||||
// provable from here without the device. Rather than keep
|
||||
// guessing at which CSS viewport unit actually holds still, yes.js
|
||||
// becomes the source of truth instead: it freezes .hero-yes's
|
||||
// rendered height to a literal inline px value once, up front. An
|
||||
// inline style always wins the cascade over the stylesheet's
|
||||
// `height: 100svh`, so once this runs, nothing the browser does
|
||||
// with that unit afterward can move the box - the number is fixed
|
||||
// in the DOM, not recomputed from a unit at all.
|
||||
setupCanvas() {
|
||||
const pixelRatio = window.devicePixelRatio || 1;
|
||||
const width = window.innerWidth;
|
||||
const height = window.innerHeight;
|
||||
|
||||
if (this.heroEl) {
|
||||
this.heroEl.style.height = height + 'px';
|
||||
}
|
||||
|
||||
this.rasterCanvas.style.width = width + 'px';
|
||||
this.rasterCanvas.style.height = height + 'px';
|
||||
this.lineCanvas.style.width = width + 'px';
|
||||
this.lineCanvas.style.height = height + 'px';
|
||||
|
||||
this.rasterCanvas.width = width * pixelRatio;
|
||||
this.rasterCanvas.height = height * pixelRatio;
|
||||
this.lineCanvas.width = width * pixelRatio;
|
||||
this.lineCanvas.height = height * pixelRatio;
|
||||
|
||||
this.rasterCtx.scale(pixelRatio, pixelRatio);
|
||||
this.lineCtx.scale(pixelRatio, pixelRatio);
|
||||
|
||||
this.displayWidth = width;
|
||||
this.displayHeight = height;
|
||||
this.pixelRatio = pixelRatio;
|
||||
}
|
||||
|
||||
setupResizeHandler() {
|
||||
// Gate on width, not height: mobile Safari's address-bar
|
||||
// animation changes window.innerHeight continuously with no
|
||||
// real layout change to react to (that's the live value this
|
||||
// whole method exists to stop trusting). A genuine resize -
|
||||
// orientation change, desktop window drag - always changes
|
||||
// width too, so that's the real signal to re-freeze on.
|
||||
this._resizeHandler = () => {
|
||||
if (window.innerWidth === this.displayWidth) return;
|
||||
this.setupCanvas();
|
||||
this.rasterizeText();
|
||||
};
|
||||
window.addEventListener('resize', this._resizeHandler);
|
||||
}
|
||||
|
||||
setupMouseTracking() {
|
||||
const updatePosition = (clientX, clientY) => {
|
||||
this.mouseX = clientX / this.displayWidth;
|
||||
this.mouseY = clientY / this.displayHeight;
|
||||
this.containmentStrength = 0.1 + (this.mouseX * 0.9);
|
||||
this.wiggleAmount = 0.1 + (this.mouseY * 1.9);
|
||||
};
|
||||
|
||||
window.addEventListener('mousemove', (e) => {
|
||||
updatePosition(e.clientX, e.clientY);
|
||||
});
|
||||
|
||||
// Scoped to the canvas itself, not `window` (see below), and
|
||||
// no longer calling preventDefault(): the original standalone
|
||||
// page was the whole document, so blocking default touch
|
||||
// behavior was harmless (nothing else to scroll to). Embedded
|
||||
// as a hero above a longer page, .hero-yes covers the entire
|
||||
// first screen - preventDefault() here was fighting the
|
||||
// browser's own native scroll for any touch gesture starting
|
||||
// in that region, which is what actually caused scrolling to
|
||||
// jump/stutter (only once this component had mounted and
|
||||
// attached these listeners - a plain page scroll never needed
|
||||
// default prevented in the first place, just the position for
|
||||
// the cosmetic line-cluster tracking below).
|
||||
this.lineCanvas.addEventListener('touchmove', (e) => {
|
||||
if (e.touches.length > 0) {
|
||||
const touch = e.touches[0];
|
||||
updatePosition(touch.clientX, touch.clientY);
|
||||
}
|
||||
}, { passive: true });
|
||||
|
||||
this.lineCanvas.addEventListener('touchstart', (e) => {
|
||||
if (e.touches.length > 0) {
|
||||
const touch = e.touches[0];
|
||||
updatePosition(touch.clientX, touch.clientY);
|
||||
}
|
||||
}, { passive: true });
|
||||
|
||||
this.mouseX = 0.5;
|
||||
this.mouseY = 0.5;
|
||||
this.containmentStrength = 0.55;
|
||||
this.wiggleAmount = 1.05;
|
||||
}
|
||||
|
||||
setupClickHandler() {
|
||||
this.lineCanvas.addEventListener('click', () => {
|
||||
this.restartAnimation();
|
||||
});
|
||||
}
|
||||
|
||||
restartAnimation() {
|
||||
this.time = 0;
|
||||
this.lineCtx.fillStyle = '#0a0a0a';
|
||||
this.lineCtx.fillRect(0, 0, this.displayWidth, this.displayHeight);
|
||||
this.initializeLines();
|
||||
this.isActive = true;
|
||||
}
|
||||
|
||||
rasterizeText() {
|
||||
const width = this.displayWidth;
|
||||
const height = this.displayHeight;
|
||||
|
||||
const aspectRatio = width / height;
|
||||
let fontSize;
|
||||
if (aspectRatio < 1) {
|
||||
fontSize = width * 0.4;
|
||||
} else {
|
||||
fontSize = height * 0.5;
|
||||
}
|
||||
|
||||
this.fontSize = fontSize;
|
||||
|
||||
this.rasterCtx.font = `bold ${fontSize}px Arial, sans-serif`;
|
||||
this.rasterCtx.textAlign = 'left';
|
||||
this.rasterCtx.textBaseline = 'middle';
|
||||
|
||||
const fullTextMetrics = this.rasterCtx.measureText('YES');
|
||||
const textWidth = fullTextMetrics.width;
|
||||
const textStartX = (width - textWidth) / 2;
|
||||
const textY = height / 2;
|
||||
|
||||
const letters = ['Y', 'E', 'S'];
|
||||
this.letterPositions = [];
|
||||
let currentX = textStartX;
|
||||
|
||||
for (let i = 0; i < letters.length; i++) {
|
||||
const letterMetrics = this.rasterCtx.measureText(letters[i]);
|
||||
this.letterPositions[i] = {
|
||||
x: currentX,
|
||||
y: textY,
|
||||
width: letterMetrics.width,
|
||||
centerX: currentX + letterMetrics.width / 2
|
||||
};
|
||||
currentX += letterMetrics.width;
|
||||
}
|
||||
|
||||
this.letterRasters = [];
|
||||
|
||||
for (let i = 0; i < 3; i++) {
|
||||
this.rasterCtx.fillStyle = '#111';
|
||||
this.rasterCtx.fillRect(0, 0, width, height);
|
||||
|
||||
this.rasterCtx.fillStyle = '#ffffff';
|
||||
this.rasterCtx.fillText(letters[i], this.letterPositions[i].x, this.letterPositions[i].y);
|
||||
|
||||
this.letterRasters[i] = this.rasterCtx.getImageData(0, 0, this.rasterCanvas.width, this.rasterCanvas.height);
|
||||
}
|
||||
|
||||
this.rasterCtx.fillStyle = '#111';
|
||||
this.rasterCtx.fillRect(0, 0, width, height);
|
||||
this.rasterCtx.fillStyle = '#ffffff';
|
||||
this.rasterCtx.fillText('YES', textStartX, textY);
|
||||
|
||||
this.rasterData = this.rasterCtx.getImageData(0, 0, this.rasterCanvas.width, this.rasterCanvas.height);
|
||||
}
|
||||
|
||||
isInSpecificLetter(x, y, letterIndex) {
|
||||
const canvasX = x * this.pixelRatio;
|
||||
const canvasY = y * this.pixelRatio;
|
||||
|
||||
if (!this.letterRasters || !this.letterRasters[letterIndex] ||
|
||||
canvasX < 0 || canvasY < 0 ||
|
||||
canvasX >= this.rasterCanvas.width || canvasY >= this.rasterCanvas.height) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const index = (Math.floor(canvasY) * this.rasterCanvas.width + Math.floor(canvasX)) * 4;
|
||||
const red = this.letterRasters[letterIndex].data[index];
|
||||
return red > 128;
|
||||
}
|
||||
|
||||
initializeLines() {
|
||||
this.lines = [];
|
||||
const numLines = 60;
|
||||
|
||||
const letterCentroids = this.calculateLetterCentroids();
|
||||
|
||||
for (let i = 0; i < numLines; i++) {
|
||||
const letterIndex = Math.floor(i / (numLines / 3));
|
||||
let startX, startY, centerX, centerY;
|
||||
|
||||
if (letterCentroids[letterIndex]) {
|
||||
centerX = letterCentroids[letterIndex].x;
|
||||
centerY = letterCentroids[letterIndex].y;
|
||||
|
||||
const startVariation = this.fontSize * 0.1;
|
||||
startX = centerX + (Math.random() - 0.5) * startVariation;
|
||||
startY = centerY + (Math.random() - 0.5) * startVariation;
|
||||
|
||||
if (!this.isInSpecificLetter(startX, startY, letterIndex)) {
|
||||
const nearestPoint = this.findNearestSpecificLetterPixel(startX, startY, letterIndex);
|
||||
if (nearestPoint) {
|
||||
startX = nearestPoint.x;
|
||||
startY = nearestPoint.y;
|
||||
} else {
|
||||
startX = centerX;
|
||||
startY = centerY;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const letterPos = this.letterPositions[letterIndex];
|
||||
startX = letterPos.centerX;
|
||||
startY = letterPos.y;
|
||||
centerX = startX;
|
||||
centerY = startY;
|
||||
}
|
||||
|
||||
const colors = [
|
||||
'hsl(180, 90%, 70%)',
|
||||
'hsl(300, 90%, 70%)',
|
||||
'hsl(60, 90%, 70%)'
|
||||
];
|
||||
|
||||
this.lines.push({
|
||||
relativeX: (startX - centerX) / this.fontSize,
|
||||
relativeY: (startY - centerY) / this.fontSize,
|
||||
prevRelativeX: (startX - centerX) / this.fontSize,
|
||||
prevRelativeY: (startY - centerY) / this.fontSize,
|
||||
angle: Math.random() * Math.PI * 2,
|
||||
color: colors[letterIndex],
|
||||
letterIndex: letterIndex,
|
||||
lastSeenInside: { x: (startX - centerX) / this.fontSize, y: (startY - centerY) / this.fontSize },
|
||||
outsideDuration: 0
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
calculateLetterCentroids() {
|
||||
const centroids = [];
|
||||
|
||||
for (let letterIndex = 0; letterIndex < 3; letterIndex++) {
|
||||
let sumX = 0, sumY = 0, count = 0;
|
||||
|
||||
const letterPos = this.letterPositions[letterIndex];
|
||||
const searchStartX = Math.max(0, letterPos.x - this.fontSize * 0.1);
|
||||
const searchEndX = Math.min(this.displayWidth, letterPos.x + letterPos.width + this.fontSize * 0.1);
|
||||
const searchStartY = Math.max(0, letterPos.y - this.fontSize * 0.6);
|
||||
const searchEndY = Math.min(this.displayHeight, letterPos.y + this.fontSize * 0.6);
|
||||
|
||||
const step = Math.max(1, Math.floor(this.fontSize * 0.02));
|
||||
for (let y = searchStartY; y <= searchEndY; y += step) {
|
||||
for (let x = searchStartX; x <= searchEndX; x += step) {
|
||||
if (this.isInSpecificLetter(x, y, letterIndex)) {
|
||||
sumX += x;
|
||||
sumY += y;
|
||||
count++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (count > 0) {
|
||||
centroids[letterIndex] = {
|
||||
x: sumX / count,
|
||||
y: sumY / count
|
||||
};
|
||||
} else {
|
||||
centroids[letterIndex] = {
|
||||
x: letterPos.centerX,
|
||||
y: letterPos.y
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return centroids;
|
||||
}
|
||||
|
||||
updateLines() {
|
||||
this.time += 0.016;
|
||||
if (!this.isActive) return;
|
||||
|
||||
const letterCentroids = this.calculateLetterCentroids();
|
||||
|
||||
this.lines.forEach(line => {
|
||||
line.prevRelativeX = line.relativeX;
|
||||
line.prevRelativeY = line.relativeY;
|
||||
|
||||
const centroid = letterCentroids[line.letterIndex];
|
||||
if (!centroid) return;
|
||||
|
||||
const currentX = centroid.x + line.relativeX * this.fontSize;
|
||||
const currentY = centroid.y + line.relativeY * this.fontSize;
|
||||
|
||||
const currentlyInside = this.isInSpecificLetter(currentX, currentY, line.letterIndex);
|
||||
|
||||
if (currentlyInside) {
|
||||
line.outsideDuration = 0;
|
||||
line.lastSeenInside = { x: line.relativeX, y: line.relativeY };
|
||||
} else {
|
||||
line.outsideDuration++;
|
||||
}
|
||||
|
||||
const visionDistance = 0.08 * this.fontSize;
|
||||
const centerX = currentX + Math.cos(line.angle) * visionDistance;
|
||||
const centerY = currentY + Math.sin(line.angle) * visionDistance;
|
||||
const leftX = currentX + Math.cos(line.angle - 0.4) * visionDistance;
|
||||
const leftY = currentY + Math.sin(line.angle - 0.4) * visionDistance;
|
||||
const rightX = currentX + Math.cos(line.angle + 0.4) * visionDistance;
|
||||
const rightY = currentY + Math.sin(line.angle + 0.4) * visionDistance;
|
||||
|
||||
const centerSees = this.isInSpecificLetter(centerX, centerY, line.letterIndex);
|
||||
const leftSees = this.isInSpecificLetter(leftX, leftY, line.letterIndex);
|
||||
const rightSees = this.isInSpecificLetter(rightX, rightY, line.letterIndex);
|
||||
|
||||
let speed = 0.02;
|
||||
|
||||
const attractionThreshold = Math.floor(15 + (1 - this.containmentStrength) * 45);
|
||||
|
||||
if (line.outsideDuration > attractionThreshold) {
|
||||
const targetX = line.lastSeenInside.x;
|
||||
const targetY = line.lastSeenInside.y;
|
||||
const deltaX = targetX - line.relativeX;
|
||||
const deltaY = targetY - line.relativeY;
|
||||
const angleToTarget = Math.atan2(deltaY, deltaX);
|
||||
|
||||
let angleDiff = angleToTarget - line.angle;
|
||||
while (angleDiff > Math.PI) angleDiff -= 2 * Math.PI;
|
||||
while (angleDiff < -Math.PI) angleDiff += 2 * Math.PI;
|
||||
|
||||
const baseAttraction = Math.min(0.4, line.outsideDuration / 80);
|
||||
const attractionStrength = baseAttraction * this.containmentStrength;
|
||||
line.angle += angleDiff * attractionStrength;
|
||||
}
|
||||
|
||||
if (centerSees) {
|
||||
const baseWiggle = 0.15;
|
||||
line.angle += (Math.random() - 0.5) * baseWiggle * this.wiggleAmount;
|
||||
} else {
|
||||
speed *= (0.3 + this.containmentStrength * 0.4);
|
||||
|
||||
const baseTurnStrength = 0.3 + (this.containmentStrength * 0.4);
|
||||
const randomTurnAmount = 0.2 * this.wiggleAmount;
|
||||
|
||||
if (leftSees && !rightSees) {
|
||||
line.angle -= baseTurnStrength + Math.random() * randomTurnAmount;
|
||||
} else if (rightSees && !leftSees) {
|
||||
line.angle += baseTurnStrength + Math.random() * randomTurnAmount;
|
||||
} else {
|
||||
const randomTurn = (Math.random() - 0.5) * (0.8 + this.wiggleAmount * 0.7);
|
||||
line.angle += randomTurn;
|
||||
}
|
||||
}
|
||||
|
||||
line.relativeX += Math.cos(line.angle) * speed;
|
||||
line.relativeY += Math.sin(line.angle) * speed;
|
||||
|
||||
line.relativeX = Math.max(-1.7, Math.min(1.7, line.relativeX));
|
||||
line.relativeY = Math.max(-1.7, Math.min(1.7, line.relativeY));
|
||||
});
|
||||
}
|
||||
|
||||
findNearestSpecificLetterPixel(x, y, letterIndex) {
|
||||
const searchRadius = this.fontSize * 0.08;
|
||||
const step = Math.max(1, Math.floor(this.fontSize * 0.01));
|
||||
let nearestPoint = null;
|
||||
let nearestDistance = Infinity;
|
||||
|
||||
for (let dy = -searchRadius; dy <= searchRadius; dy += step) {
|
||||
for (let dx = -searchRadius; dx <= searchRadius; dx += step) {
|
||||
const testX = x + dx;
|
||||
const testY = y + dy;
|
||||
|
||||
if (this.isInSpecificLetter(testX, testY, letterIndex)) {
|
||||
const distance = Math.sqrt(dx * dx + dy * dy);
|
||||
if (distance < nearestDistance) {
|
||||
nearestDistance = distance;
|
||||
nearestPoint = { x: testX, y: testY };
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return nearestPoint;
|
||||
}
|
||||
|
||||
draw() {
|
||||
this.lineCtx.fillStyle = 'rgba(10, 10, 10, 0.03)';
|
||||
this.lineCtx.fillRect(0, 0, this.displayWidth, this.displayHeight);
|
||||
|
||||
const letterCentroids = this.calculateLetterCentroids();
|
||||
|
||||
this.lines.forEach(line => {
|
||||
const centroid = letterCentroids[line.letterIndex];
|
||||
if (!centroid) return;
|
||||
|
||||
const currentX = centroid.x + line.relativeX * this.fontSize;
|
||||
const currentY = centroid.y + line.relativeY * this.fontSize;
|
||||
const prevX = centroid.x + line.prevRelativeX * this.fontSize;
|
||||
const prevY = centroid.y + line.prevRelativeY * this.fontSize;
|
||||
|
||||
if (prevX === currentX && prevY === currentY) return;
|
||||
|
||||
this.lineCtx.strokeStyle = line.color.replace('70%)', '80%, 0.8)');
|
||||
this.lineCtx.lineWidth = this.fontSize * 0.003;
|
||||
this.lineCtx.lineCap = 'round';
|
||||
|
||||
this.lineCtx.beginPath();
|
||||
this.lineCtx.moveTo(prevX, prevY);
|
||||
this.lineCtx.lineTo(currentX, currentY);
|
||||
this.lineCtx.stroke();
|
||||
});
|
||||
}
|
||||
|
||||
animate() {
|
||||
if (this.destroyed) return;
|
||||
this.updateLines();
|
||||
this.draw();
|
||||
requestAnimationFrame(() => this.animate());
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user