UxCodeBlock
components/ux/CodeBlock.vue
Code block with copy button, optional labeled header, collapse toggle, dark/light themes, a line-number gutter, and optional syntax highlighting (lang).
Vue
import { QMap } from '@qpoint-io/qmap'Scenarios
nuxt.config.ts
export default defineNuxtConfig({
extends: ['@qpoint-io/q-nuxt-layer'],
})npm install @qpoint-io/q-nuxt-layerconst aVeryLongSingleLineThatShouldScrollHorizontallyInsteadOfWrapping = useSomething({ retries: 3, timeoutMs: 30000, backoff: 'exponential' })export default defineNuxtConfig({
extends: ['@qpoint-io/q-nuxt-layer'],
})
// a long trailing comment that scrolls sideways under a fixed gutter a long trailing comment that scrolls sideways under a fixed gutter a long trailing comment that scrolls sideways under a fixed gutter dark + lineNumbers
export default defineNuxtConfig({
extends: ['@qpoint-io/q-nuxt-layer'],
})SKILL.md · lang=markdown
---
name: deploy
description: Ship a service through the Meridian release train
allowed-tools: Bash(git:*), Bash(scripts/*), Read
version: 2
---
# Deploy
Ship the current branch to a named environment. **Never** deploy from a _dirty_ tree.
## Steps
1. Run `scripts/preflight.sh <env>` — see the [runbook](https://wiki.meridian.dev/deploy).
2. Tag and push:
```bash
# tag the release
git tag "deploy/$ENV/$(date +%Y%m%d-%H%M)" && git push --tags
```
> Production asks for confirmation first.
```toml
[env] # unregistered → plain
name = "staging"
```
---
name: deploy
description: Ship a service through the Meridian release train
allowed-tools: Bash(git:*), Bash(scripts/*), Read
version: 2
---
# Deploy
Ship the current branch to a named environment. **Never** deploy from a _dirty_ tree.
## Steps
1. Run `scripts/preflight.sh <env>` — see the [runbook](https://wiki.meridian.dev/deploy).
2. Tag and push:
```bash
# tag the release
git tag "deploy/$ENV/$(date +%Y%m%d-%H%M)" && git push --tags
```
> Production asks for confirmation first.
```toml
[env] # unregistered → plain
name = "staging"
```
preflight.sh · lang=bash
#!/usr/bin/env bash
# preflight: clean tree, green CI, free lock
set -euo pipefail
ENV="${1:-staging}"
if [ -n "$(git status --porcelain)" ]; then
echo "dirty tree — refusing to deploy $ENV" >&2
exit 1
fi{
"skill": "deploy",
"installs": 24,
"canonical": true,
"drift": null,
"harnesses": ["claude-cli", "cursor"]
}[deploy]
env = "staging" # toml isn't registered — this stays plain
note = "<script>alert(1)</script> & friends"long lines · lang=yaml
name: deploy
description: Ship a service through the Meridian release train — preflight, tag, watch the pipeline until the smoke stage passes, then paste the run URL back
allowed-tools: Bash(git:*), Bash(scripts/*), Bash(kubectl rollout undo:*), Read, Write, Edit, Glob, Grep, WebFetch(domain:wiki.meridian.dev)
disable-model-invocation: false
retries: 3name: deploy
description: Ship a service through the Meridian release train — preflight, tag, watch the pipeline until the smoke stage passes, then paste the run URL back
allowed-tools: Bash(git:*), Bash(scripts/*), Bash(kubectl rollout undo:*), Read, Write, Edit, Glob, Grep, WebFetch(domain:wiki.meridian.dev)
disable-model-invocation: false
retries: 3components/ux/CodeBlock.vue
Usage
<UxCodeBlock
code = "—"
label = "—"
:collapsible = "false"
:defaultOpen = "false"
theme = "dark"
:lineNumbers = "false"
lang = "—"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| code | String | — | The code to display and copy (required) |
| label | String | '' | Header label; header renders only when set or collapsible |
| collapsible | Boolean | false | Header toggles the block open/closed |
| defaultOpen | Boolean | false | Initial open state when collapsible |
| theme | String | 'dark' | dark (grey-900) or light (grey-50) |
| lineNumbers | Boolean | false | A line-number gutter (not selectable, not copied) that stays put while long lines scroll — editor source views (design c92 todos plan 12) |
| lang | String | '' | Syntax highlighting (highlight.js core, token-mapped colours): markdown/md (a leading --- frontmatter as YAML; fenced blocks in their info-string language, plain when unregistered), yaml/yml, bash/sh/shell/zsh, json. Unset → the plain render, unchanged; unknown → escaped plain text. Copy still copies the raw code (design c92 todos plan 12 follow-up) |