@swimlane/docspa-stackblitz
v8.0.3
Published
<small>(optional, external)</small>
Downloads
25
Maintainers
Readme
DocspaStackblitzModule
(optional, external)
This module allows embedding StackBlitz projects within markdown using a embed-stackblitz
custom element and the [[stackblitz]] shortcode.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { DocspaCoreModule } from '@swimlane/docspa-core';
import { DocspaStackblitzModule } from '@swimlane/docspa-stackblitz';
import { AppComponent } from './app.component';
import { config } from '../docspa.config';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
DocspaCoreModule.forRoot(config),
DocspaStackblitzModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
The embed-stackblitz
custom element accepts a StackBlitz project payload as the project
input.
<embed-stackblitz
title='Embeded StackBlitz Project<br />DocSPA'
project='{"template": "javascript", "files": {"index.js": "console.log(123)", "index.html": "Hello World"} }'>
</embed-stackblitz>
or a path to a project payload (JSON
file) in the documentation local files (relative to the document root folder):
[[stackblitz title="Local StackBlitz Project<br />DocSPA" project-path="examples/folder/stackblitz" ]]
i> When providing a payload path, if the files
property of the payload contains an array, this is treated as an array of relative paths from which the file content will be loaded.
You may also supply a project-id
to to load an existing StackBlitz project:
<embed-stackblitz
title='Existing StackBlitz Project<br />DocSPA'
project-id="sdk-create-project">
</embed-stackblitz>
If a both project-id
and either a project-path
or project
input are provided, the files listed in the local project's files are treated as a a patch to the existing StackBlitz project.
<embed-stackblitz
title='Existing StackBlitz Project with local changes<br />DocSPA'
project-id="sdk-create-project"
project-path="examples/folder/stackblitz">
</embed-stackblitz>