boos
e0a5f57793
Vendor the rebranded BoosAPI Desktop client (Tauri + Vue) into metapi as a monorepo subdirectory under desktop/. Source only — node_modules, dist, Cargo target and the upstream .git history are excluded. desktop/ keeps its own independent Cargo workspace (desktop/src-tauri with crates/*); it is not part of the backend boosapi crate, so a `cargo check` at the metapi root still compiles only the backend. Build the desktop app from desktop/src-tauri per desktop/README.md. Note: app icons are still placeholder assets pending the final BoosAPI logo. The updater signing keys live outside the repo and are not included.
111 lines
2.8 KiB
Markdown
111 lines
2.8 KiB
Markdown
# D2 quick start
|
|
|
|
D2 diagrams render progressively in markstream-vue: as soon as the syntax becomes valid, a preview appears and keeps refining as more tokens stream in. If rendering fails, the last successful preview stays visible and the source is preserved.
|
|
|
|
## 1. Install & import
|
|
|
|
```bash
|
|
pnpm add @terrastruct/d2
|
|
```
|
|
|
|
No extra CSS import is required. Keep `markstream-vue/index.css` after your reset and inside `@layer components` if you use Tailwind/UnoCSS.
|
|
|
|
```css
|
|
@import 'modern-css-reset';
|
|
|
|
@layer components {
|
|
@import 'markstream-vue/index.css';
|
|
}
|
|
```
|
|
|
|
## 2. Streaming example
|
|
|
|
```vue twoslash
|
|
<script setup lang="ts">
|
|
import MarkdownRender from 'markstream-vue'
|
|
import { ref } from 'vue'
|
|
|
|
const content = ref('')
|
|
const steps = [
|
|
'```d2\n',
|
|
'direction: right\n',
|
|
'Client -> API: request\n',
|
|
'API -> DB: query\n',
|
|
'DB -> API: rows\n',
|
|
'API -> Client: response\n',
|
|
'```\n',
|
|
]
|
|
|
|
let i = 0
|
|
const id = setInterval(() => {
|
|
content.value += steps[i] || ''
|
|
i++
|
|
if (i >= steps.length)
|
|
clearInterval(id)
|
|
}, 120)
|
|
</script>
|
|
|
|
<template>
|
|
<MarkdownRender :content="content" />
|
|
</template>
|
|
```
|
|
|
|
Quick try — paste this Markdown into a page or component:
|
|
|
|
```md
|
|
\`\`\`d2
|
|
direction: right
|
|
Client -> API: request
|
|
API -> DB: query
|
|
DB -> API: rows
|
|
API -> Client: response
|
|
\`\`\`
|
|
```
|
|
|
|
## 3. Advanced component: `D2BlockNode`
|
|
|
|
Use `D2BlockNode` if you want toolbar controls (copy/export/mode toggle) or to override themes and progressive timing.
|
|
|
|
```vue twoslash
|
|
<script setup lang="ts">
|
|
import type { D2BlockNodeProps } from 'markstream-vue'
|
|
import { D2BlockNode } from 'markstream-vue'
|
|
|
|
const node = {
|
|
type: 'code_block',
|
|
language: 'd2',
|
|
code: 'direction: right\nClient -> API: request\nAPI -> DB: query',
|
|
raw: 'direction: right\nClient -> API: request\nAPI -> DB: query',
|
|
} satisfies D2BlockNodeProps['node']
|
|
</script>
|
|
|
|
<template>
|
|
<D2BlockNode :node="node" :progressive-interval-ms="500" />
|
|
</template>
|
|
```
|
|
|
|
Props to know:
|
|
- `progressiveRender`, `progressiveIntervalMs` control incremental re-rendering while streaming.
|
|
- `themeId`, `darkThemeId` let you pin a D2 theme.
|
|
- `showHeader`, `showModeToggle`, `showCopyButton`, `showExportButton`, `showCollapseButton` control the toolbar.
|
|
|
|
## 4. Dark mode
|
|
|
|
Pass `:is-dark="true"` (or add a `.dark` ancestor via `MarkdownRender`) to render the diagram in dark mode. markstream-vue prefers the app theme over OS preference to keep previews stable.
|
|
|
|
## 5. Custom loaders (optional)
|
|
|
|
If you disabled the loader earlier, or want to load from a CDN/global build:
|
|
|
|
```ts twoslash
|
|
import { enableD2, setD2Loader } from 'markstream-vue'
|
|
|
|
// Re-enable the default loader
|
|
enableD2()
|
|
|
|
// Or supply your own loader
|
|
setD2Loader(() => (window as any).D2)
|
|
```
|
|
|
|
If `@terrastruct/d2` is missing, the renderer falls back to showing the source text until it becomes available.
|