Skip to content

Move the CARLA demo to /carla and match the site theme #216

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kixelated merged 3 commits into from
Nov 8, 2026
Merged

Move the CARLA demo to /carla and match the site theme #216

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1e2636d
Move the CARLA demo to /carla and match the site theme
kixelated Nov 3, 2026
67d7790
Bump moq to the merged CARLA player fixes
kixelated Nov 4, 2026
626ba6b
Merge remote-tracking branch 'origin/main' into claude/carla-demo-sty…
kixelated Nov 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
237 changes: 72 additions & 165 deletions bun.lock
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion moq
Open in desktop
Submodule moq updated 3144 files
4 changes: 2 additions & 2 deletions src/components/car.astro → src/components/carla.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
import Car from "@/components/car.tsx";
import Carla from "@/components/carla.tsx";
---

<div class="not-prose w-screen max-w-6xl px-4" style="margin-inline: calc(50% - min(36rem, 50vw));">
<Car client:only="solid-js" />
<Carla client:only="solid-js" />
</div>
2 changes: 1 addition & 1 deletion src/components/car.tsx → src/components/carla.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import "@moq/watch/support/element";

assets("/assets/");

export default function Car() {
export default function Carla() {
const url = new URL("/demo", import.meta.env.PUBLIC_RELAY_URL);

return (
Expand Down
14 changes: 14 additions & 0 deletions src/layouts/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,6 +221,20 @@ table td:first-child {
@apply inline-flex items-center gap-2 rounded-full border border-slate-700 bg-slate-800/60 py-1.5 pl-2 pr-4 text-sm text-slate-200 transition-colors hover:border-green-500 hover:text-white;
}

/* The CARLA player reads these through its shadow DOM. */
moq-carla {
--panel: var(--color-slate-800);
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Resolved
--line: var(--color-slate-700);
--text: var(--color-slate-200);
--muted: var(--color-slate-400);
--accent: var(--color-green-500);
--accent-hover: var(--color-green-400);
--ok: var(--color-green-500);
--on-accent: var(--color-slate-950);
--map-bg: var(--color-slate-950);
--scrim: rgb(15 23 42 / 80%);
}

/* The typography plugin's colors for a dark page. */
@utility prose-moq {
--tw-prose-body: var(--color-slate-200);
Expand Down
12 changes: 4 additions & 8 deletions src/pages/car.mdx → src/pages/carla.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,14 @@ title: CARLA
description: Steer simulated vehicles in CARLA over MoQ.
---

import Car from "@/components/car.astro";
import Carla from "@/components/carla.astro";

# CARLA

<Car />
<Carla />

Click a vehicle to watch its cameras and take control. Use **W/S** for throttle and brake,
**A/D** to steer, and **Space** to change gear. **E** stops the vehicle, **R** resets
the stop, and **Esc** releases control. A steering wheel works too.

The vehicles run in [CARLA](https://carla.org) on a workstation. When it is offline,
the player says so.
The vehicles run in [CARLA](https://carla.org) on my home desktop in San Francisco.
When it is offline, the player says so.

## How it works

Expand Down
2 changes: 1 addition & 1 deletion src/pages/demo.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ Click on any of them. That's what they're here for. Everything is open source!
<div class="text-sm leading-relaxed text-slate-300">Multiplayer (anarchy) Game Boy emulation on a remote server, using MoQ tracks for everything. Emulation and encoding only run when at least one viewer is watching.</div>
</a>

<a href="/car" class="card group flex flex-col gap-4 p-5 text-white">
<a href="/carla" class="card group flex flex-col gap-4 p-5 text-white">
<div class="flex h-28 items-center justify-center rounded-xl bg-slate-900">
<img src="/icons/use-case/robotics.svg" class="max-h-20 max-w-[70%] object-contain" alt="CARLA" />
</div>
Expand Down
Loading