feat(desktop): embed BoosAPI Desktop client as a subproject
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.
This commit is contained in:
boos
@@ -0,0 +1,471 @@
|
||||
# Vue 2 Quick Start
|
||||
|
||||
Get started with markstream-vue2 in your Vue 2 project.
|
||||
|
||||
## Basic Setup
|
||||
|
||||
### 1. Installation
|
||||
|
||||
First, install the package:
|
||||
|
||||
```bash
|
||||
pnpm add markstream-vue2
|
||||
```
|
||||
|
||||
### 2. Import Styles
|
||||
|
||||
In your main entry file (e.g., `main.js` or `main.ts`):
|
||||
|
||||
```js
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import 'markstream-vue2/index.css'
|
||||
|
||||
// For Vue 2.6.x, also install and configure @vue/composition-api
|
||||
// import VueCompositionAPI from '@vue/composition-api'
|
||||
// Vue.use(VueCompositionAPI)
|
||||
|
||||
new Vue({
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
```
|
||||
|
||||
### 3. Use the Component
|
||||
|
||||
```vue
|
||||
<script>
|
||||
import MarkdownRender from 'markstream-vue2'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
MarkdownRender
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
markdown: `# Hello Vue 2!
|
||||
|
||||
This is **markstream-vue2** - a streaming-friendly Markdown renderer for Vue 2.
|
||||
|
||||
## Features
|
||||
|
||||
- Code syntax highlighting
|
||||
- Mermaid diagrams
|
||||
- Math formulas
|
||||
- And much more!
|
||||
|
||||
\`\`\`javascript
|
||||
console.log('Hello from Vue 2!')
|
||||
\`\`\`
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="app">
|
||||
<MarkdownRender :content="markdown" />
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Using with Vue 2.7+ (Composition API)
|
||||
|
||||
Vue 2.7 includes built-in Composition API support:
|
||||
|
||||
```vue
|
||||
<script>
|
||||
import MarkdownRender from 'markstream-vue2'
|
||||
import { defineComponent, ref } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'App',
|
||||
components: {
|
||||
MarkdownRender
|
||||
},
|
||||
setup() {
|
||||
const markdown = ref(`# Hello Vue 2.7!
|
||||
|
||||
This uses the Composition API.
|
||||
|
||||
\`\`\`javascript
|
||||
const message = 'Hello from Vue 2.7!'
|
||||
console.log(message)
|
||||
\`\`\`
|
||||
`)
|
||||
return { markdown }
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="app">
|
||||
<MarkdownRender :content="markdown" />
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Using with Vue 2.6.x (@vue/composition-api)
|
||||
|
||||
For Vue 2.6.x, install `@vue/composition-api`:
|
||||
|
||||
```bash
|
||||
pnpm add @vue/composition-api
|
||||
```
|
||||
|
||||
```js
|
||||
import VueCompositionAPI from '@vue/composition-api'
|
||||
// main.js
|
||||
import Vue from 'vue'
|
||||
import 'markstream-vue2/index.css'
|
||||
|
||||
Vue.use(VueCompositionAPI)
|
||||
```
|
||||
|
||||
Then use it the same way as Vue 2.7:
|
||||
|
||||
```vue
|
||||
<script>
|
||||
import { defineComponent, ref } from '@vue/composition-api'
|
||||
import MarkdownRender from 'markstream-vue2'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'App',
|
||||
components: {
|
||||
MarkdownRender
|
||||
},
|
||||
setup() {
|
||||
const markdown = ref(`# Hello Vue 2.6!
|
||||
|
||||
This uses @vue/composition-api.
|
||||
`)
|
||||
return { markdown }
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="app">
|
||||
<MarkdownRender :content="markdown" />
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Enabling Optional Features
|
||||
|
||||
### Code Syntax Highlighting
|
||||
|
||||
Install dependencies:
|
||||
|
||||
```bash
|
||||
pnpm add stream-markdown
|
||||
```
|
||||
|
||||
```vue
|
||||
<script>
|
||||
import MarkdownRender, { MarkdownCodeBlockNode, setCustomComponents } from 'markstream-vue2'
|
||||
|
||||
// Use Shiki-based code blocks inside MarkdownRender
|
||||
setCustomComponents({ code_block: MarkdownCodeBlockNode })
|
||||
|
||||
export default {
|
||||
components: { MarkdownRender },
|
||||
data() {
|
||||
return {
|
||||
markdown: `\`\`\`javascript
|
||||
const hello = 'world'
|
||||
console.log(hello)
|
||||
\`\`\``
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MarkdownRender :content="markdown" />
|
||||
</template>
|
||||
```
|
||||
|
||||
### Mermaid Diagrams
|
||||
|
||||
Install mermaid:
|
||||
|
||||
```bash
|
||||
pnpm add mermaid
|
||||
```
|
||||
|
||||
Import styles. The loader is enabled by default; call `enableMermaid()` only if you disabled it or need a custom loader:
|
||||
|
||||
```js
|
||||
import { enableMermaid } from 'markstream-vue2'
|
||||
// main.js
|
||||
import 'markstream-vue2/index.css'
|
||||
|
||||
// optional: re-enable or override loader
|
||||
enableMermaid()
|
||||
```
|
||||
|
||||
```vue
|
||||
<script>
|
||||
import MarkdownRender from 'markstream-vue2'
|
||||
|
||||
export default {
|
||||
components: { MarkdownRender },
|
||||
data() {
|
||||
return {
|
||||
markdown: `#### Mermaid Diagram
|
||||
|
||||
\`\`\`mermaid
|
||||
graph TD
|
||||
A[Start] --> B{Is it working?}
|
||||
B -->|Yes| C[Great!]
|
||||
B -->|No| D[Keep trying]
|
||||
\`\`\``
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MarkdownRender :content="markdown" />
|
||||
</template>
|
||||
```
|
||||
|
||||
### D2 Diagrams
|
||||
|
||||
Install D2:
|
||||
|
||||
```bash
|
||||
pnpm add @terrastruct/d2
|
||||
```
|
||||
|
||||
Import styles. The loader is enabled by default; call `enableD2()` only if you disabled it or need a custom loader:
|
||||
|
||||
```js
|
||||
import { enableD2 } from 'markstream-vue2'
|
||||
// main.js
|
||||
import 'markstream-vue2/index.css'
|
||||
|
||||
// optional: re-enable or override loader
|
||||
enableD2()
|
||||
```
|
||||
|
||||
```vue
|
||||
<script>
|
||||
import MarkdownRender from 'markstream-vue2'
|
||||
|
||||
export default {
|
||||
components: { MarkdownRender },
|
||||
data() {
|
||||
return {
|
||||
markdown: `#### D2 Diagram
|
||||
|
||||
\`\`\`d2
|
||||
direction: right
|
||||
Client -> API: request
|
||||
API -> DB: query
|
||||
DB -> API: rows
|
||||
API -> Client: response
|
||||
\`\`\``
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MarkdownRender :content="markdown" />
|
||||
</template>
|
||||
```
|
||||
|
||||
### Math Formulas (KaTeX)
|
||||
|
||||
Install katex:
|
||||
|
||||
```bash
|
||||
pnpm add katex
|
||||
```
|
||||
|
||||
Import styles. The loader is enabled by default; call `enableKatex()` only if you disabled it or need a custom loader:
|
||||
|
||||
```js
|
||||
import { enableKatex } from 'markstream-vue2'
|
||||
// main.js
|
||||
import 'markstream-vue2/index.css'
|
||||
|
||||
import 'katex/dist/katex.min.css'
|
||||
|
||||
// optional: re-enable or override loader
|
||||
enableKatex()
|
||||
```
|
||||
|
||||
```vue
|
||||
<script>
|
||||
import MarkdownRender from 'markstream-vue2'
|
||||
|
||||
export default {
|
||||
components: { MarkdownRender },
|
||||
data() {
|
||||
return {
|
||||
markdown: `#### Math Example
|
||||
|
||||
Inline math: $E = mc^2$
|
||||
|
||||
Block math:
|
||||
|
||||
$$
|
||||
\\int_0^\\infty e^{-x^2} dx = \\frac{\\sqrt{\\pi}}{2}
|
||||
$$`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MarkdownRender :content="markdown" />
|
||||
</template>
|
||||
```
|
||||
|
||||
## Custom Components
|
||||
|
||||
You can customize how specific nodes are rendered using `setCustomComponents`:
|
||||
|
||||
```vue
|
||||
<script>
|
||||
import MarkdownRender, { setCustomComponents } from 'markstream-vue2'
|
||||
|
||||
// Create a custom heading component
|
||||
const CustomHeading = {
|
||||
name: 'CustomHeading',
|
||||
props: ['node'],
|
||||
render(h) {
|
||||
const level = this.node.level || 1
|
||||
const Tag = `h${level}`
|
||||
return h(Tag, { class: 'custom-heading' }, this.node.children.map(c => c.content))
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
components: { MarkdownRender },
|
||||
data() {
|
||||
return {
|
||||
markdown: `# Custom Heading
|
||||
|
||||
This heading is rendered with a custom component.
|
||||
`
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// Register custom component
|
||||
setCustomComponents('my-app', {
|
||||
heading: CustomHeading
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<MarkdownRender
|
||||
custom-id="my-app"
|
||||
:content="markdown"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.custom-heading {
|
||||
color: #e11d48;
|
||||
border-bottom: 2px solid #e11d48;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## Streaming Content
|
||||
|
||||
markstream-vue2 supports streaming markdown content, which is useful for AI-generated content:
|
||||
|
||||
```vue
|
||||
<script>
|
||||
import MarkdownRender from 'markstream-vue2'
|
||||
|
||||
export default {
|
||||
components: { MarkdownRender },
|
||||
data() {
|
||||
return {
|
||||
markdown: '',
|
||||
fullText: `# Streaming Demo
|
||||
|
||||
This content is being streamed **in small chunks**.
|
||||
|
||||
## Features
|
||||
|
||||
1. Progressive rendering
|
||||
2. No layout shift
|
||||
3. Smooth animations
|
||||
|
||||
\`\`\`javascript
|
||||
const streaming = true
|
||||
console.log('Streaming enabled:', streaming)
|
||||
\`\`\`
|
||||
`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
startStreaming() {
|
||||
this.markdown = ''
|
||||
let i = 0
|
||||
const interval = setInterval(() => {
|
||||
if (i < this.fullText.length) {
|
||||
this.markdown += this.fullText[i]
|
||||
i++
|
||||
}
|
||||
else {
|
||||
clearInterval(interval)
|
||||
}
|
||||
}, 20)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<button @click="startStreaming">
|
||||
Start Streaming
|
||||
</button>
|
||||
<MarkdownRender :content="markdown" />
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
## VitePress Integration (Vue 2)
|
||||
|
||||
For VitePress with Vue 2, you can use markstream-vue2 in your custom theme:
|
||||
|
||||
```js
|
||||
import MarkdownRender, { setCustomComponents } from 'markstream-vue2'
|
||||
// docs/.vitepress/theme/index.js
|
||||
import DefaultTheme from 'vitepress/theme'
|
||||
import 'markstream-vue2/index.css'
|
||||
|
||||
export default {
|
||||
extends: DefaultTheme,
|
||||
enhanceApp({ app }) {
|
||||
// Register the component globally
|
||||
app.component('MarkdownRender', MarkdownRender)
|
||||
|
||||
// Set custom components if needed
|
||||
setCustomComponents('vitepress', {
|
||||
// Your custom components here
|
||||
})
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Next Steps
|
||||
|
||||
- Explore [Components documentation](/guide/vue2-components) for all available components
|
||||
- Check out [API Reference](/guide/api) for detailed API documentation
|
||||
- See [Examples](/guide/examples) for more usage examples
|
||||
Reference in New Issue
Block a user