docs: output example

apps/docs/docs/examples/output.md

@@ -0,0 +1,10 @@
+---
+title: 输出示例
+order: 0
+nav:
+  path: /examples
+---
+
+# Libro 输出示例
+
+<code src="../../src/output" compact="true"></code>

apps/docs/docs/examples/workbench.md

@@ -1,6 +1,6 @@
 ---
 title: 工作台
-order: 0
+order: 1
 nav:
   path: /examples
 ---

apps/docs/package.json

@@ -22,6 +22,7 @@
     "@difizen/mana-app": "alpha",
     "@difizen/mana-react": "alpha",
     "@difizen/libro-jupyter": "^0.0.2-alpha.0",
+    "@difizen/libro-core": "^0.0.2-alpha.0",
     "@ant-design/icons": "^4.7.0",
     "react": "^18.2.0",
     "antd": "^5.8.6"

apps/docs/src/output/app.ts

@@ -0,0 +1,15 @@
+import { LibroService } from '@difizen/libro-core';
+import { RootSlotId } from '@difizen/mana-app';
+import { ApplicationContribution, SlotViewManager } from '@difizen/mana-app';
+import { inject, singleton } from '@difizen/mana-app';
+
+@singleton({ contrib: ApplicationContribution })
+export class LibroApp implements ApplicationContribution {
+  @inject(LibroService) libroService: LibroService;
+  @inject(SlotViewManager) slotViewManager: SlotViewManager;
+
+  async onStart() {
+    const view = await this.libroService.getOrCreateView({});
+    this.slotViewManager.addView(view, RootSlotId);
+  }
+}

apps/docs/src/output/content.ts

@@ -0,0 +1,15 @@
+import type { INotebookContent } from '@difizen/libro-jupyter';
+import { ContentContribution } from '@difizen/libro-jupyter';
+import { singleton } from '@difizen/mana-app';
+
+import content from './OutputExamples.ipynb.json';
+
+@singleton({ contrib: ContentContribution })
+export class ExampleContentContribution implements ContentContribution {
+  canHandle = () => {
+    return 10;
+  };
+  async loadContent() {
+    return content as INotebookContent;
+  }
+}

apps/docs/src/output/index.less

@@ -0,0 +1,4 @@
+.libro-example-output {
+  width: 100%;
+  height: calc(100vh - 190px);
+}

apps/docs/src/output/index.tsx

@@ -0,0 +1,22 @@
+import { LibroJupyterModule } from '@difizen/libro-jupyter';
+import { ManaAppPreset, ManaComponents, ManaModule } from '@difizen/mana-app';
+
+import { LibroApp } from './app.js';
+import { ExampleContentContribution } from './content.js';
+import './index.less';
+
+const BaseModule = ManaModule.create().register(LibroApp, ExampleContentContribution);
+
+const App = (): JSX.Element => {
+  return (
+    <div className="libro-example-output">
+      <ManaComponents.Application
+        key={'libro'}
+        asChild={true}
+        modules={[ManaAppPreset, LibroJupyterModule, BaseModule]}
+      />
+    </div>
+  );
+};
+
+export default App;