@contractspec/example.in-app-docs 1.3.1 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +35 -29
- package/.turbo/turbo-prebuild.log +1 -0
- package/CHANGELOG.md +30 -0
- package/dist/browser/docs/in-app-docs.docblock.js +50 -0
- package/dist/browser/docs/index.js +47 -0
- package/dist/browser/example.js +38 -0
- package/dist/browser/index.js +136 -0
- package/dist/browser/ui/InAppDocsViewer.js +100 -0
- package/dist/browser/ui/index.js +100 -0
- package/dist/docs/in-app-docs.docblock.d.ts +2 -7
- package/dist/docs/in-app-docs.docblock.d.ts.map +1 -1
- package/dist/docs/in-app-docs.docblock.js +33 -47
- package/dist/docs/index.d.ts +2 -1
- package/dist/docs/index.d.ts.map +1 -0
- package/dist/docs/index.js +48 -1
- package/dist/example.d.ts +2 -7
- package/dist/example.d.ts.map +1 -1
- package/dist/example.js +36 -50
- package/dist/index.d.ts +4 -5
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +136 -5
- package/dist/node/docs/in-app-docs.docblock.js +50 -0
- package/dist/node/docs/index.js +47 -0
- package/dist/node/example.js +38 -0
- package/dist/node/index.js +136 -0
- package/dist/node/ui/InAppDocsViewer.js +100 -0
- package/dist/node/ui/index.js +100 -0
- package/dist/ui/InAppDocsViewer.d.ts +2 -6
- package/dist/ui/InAppDocsViewer.d.ts.map +1 -1
- package/dist/ui/InAppDocsViewer.js +97 -63
- package/dist/ui/index.d.ts +2 -2
- package/dist/ui/index.d.ts.map +1 -0
- package/dist/ui/index.js +100 -2
- package/package.json +78 -26
- package/src/ui/InAppDocsViewer.tsx +1 -1
- package/tsdown.config.js +1 -2
- package/.turbo/turbo-build$colon$bundle.log +0 -28
- package/dist/docs/in-app-docs.docblock.js.map +0 -1
- package/dist/example.js.map +0 -1
- package/dist/ui/InAppDocsViewer.js.map +0 -1
- package/tsconfig.tsbuildinfo +0 -1
|
@@ -1,65 +1,51 @@
|
|
|
1
|
+
// @bun
|
|
2
|
+
// src/docs/in-app-docs.docblock.ts
|
|
1
3
|
import { registerDocBlocks } from "@contractspec/lib.contracts/docs";
|
|
4
|
+
var inAppDocs = [
|
|
5
|
+
{
|
|
6
|
+
id: "docs.examples.in-app-docs",
|
|
7
|
+
title: "In\u2011App Docs \u2014 Overview",
|
|
8
|
+
summary: "Overview of the in\u2011app documentation example demonstrating how DocBlock can serve end\u2011user guides.",
|
|
9
|
+
kind: "goal",
|
|
10
|
+
visibility: "public",
|
|
11
|
+
route: "/docs/examples/in-app-docs",
|
|
12
|
+
tags: ["documentation", "overview", "guide"],
|
|
13
|
+
body: `## Purpose
|
|
14
|
+
The in\u2011app documentation example shows how you can use ContractSpec's DocBlock system to build user\u2011facing guides directly inside an application's UI.
|
|
2
15
|
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* DocBlocks for the in-app documentation example.
|
|
6
|
-
*
|
|
7
|
-
* These blocks provide publicly visible guides aimed at non‑technical users.
|
|
8
|
-
* Each DocBlock is associated with a route under /docs/examples/in-app-docs
|
|
9
|
-
* and will be rendered in the ContractSpec sandbox or within your app if you
|
|
10
|
-
* integrate the documentation.
|
|
11
|
-
*/
|
|
12
|
-
const inAppDocs = [{
|
|
13
|
-
id: "docs.examples.in-app-docs",
|
|
14
|
-
title: "In‑App Docs — Overview",
|
|
15
|
-
summary: "Overview of the in‑app documentation example demonstrating how DocBlock can serve end‑user guides.",
|
|
16
|
-
kind: "goal",
|
|
17
|
-
visibility: "public",
|
|
18
|
-
route: "/docs/examples/in-app-docs",
|
|
19
|
-
tags: [
|
|
20
|
-
"documentation",
|
|
21
|
-
"overview",
|
|
22
|
-
"guide"
|
|
23
|
-
],
|
|
24
|
-
body: `## Purpose
|
|
25
|
-
The in‑app documentation example shows how you can use ContractSpec's DocBlock system to build user‑facing guides directly inside an application's UI.
|
|
26
|
-
|
|
27
|
-
Instead of relying solely on developer documentation, you can define **public** DocBlocks that describe your product's features in clear, non‑technical language. When embedded in your app, these blocks present a self‑contained help centre for users.
|
|
16
|
+
Instead of relying solely on developer documentation, you can define **public** DocBlocks that describe your product's features in clear, non\u2011technical language. When embedded in your app, these blocks present a self\u2011contained help centre for users.
|
|
28
17
|
|
|
29
18
|
## What you'll learn
|
|
30
|
-
* How to define DocBlock objects with public visibility and user
|
|
31
|
-
* How to structure an overview page for your in
|
|
19
|
+
* How to define DocBlock objects with public visibility and user\u2011friendly routes.
|
|
20
|
+
* How to structure an overview page for your in\u2011app guide using Markdown.
|
|
32
21
|
* How to register your DocBlocks so they show up in the sandbox and in your application.
|
|
33
22
|
|
|
34
23
|
Use this example as a template for documenting your own frontend workflows.`
|
|
35
|
-
},
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
"guide"
|
|
46
|
-
],
|
|
47
|
-
body: `## Getting Started
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
id: "docs.examples.in-app-docs.usage",
|
|
27
|
+
title: "In\u2011App Docs \u2014 Using the Application",
|
|
28
|
+
summary: "Step\u2011by\u2011step guide for end users to navigate and use the example application.",
|
|
29
|
+
kind: "usage",
|
|
30
|
+
visibility: "public",
|
|
31
|
+
route: "/docs/examples/in-app-docs/usage",
|
|
32
|
+
tags: ["documentation", "usage", "guide"],
|
|
33
|
+
body: `## Getting Started
|
|
48
34
|
1. **Sign in**. Launch the app and enter your credentials. New users can click **Create Account** to register.
|
|
49
35
|
2. **Explore the dashboard**. Use the sidebar or navigation bar to access sections like Dashboard, Profile, and Settings.
|
|
50
36
|
3. **Add items**. On the Dashboard, click **Add Item** or a plus icon to create a new record. Fill in the form fields and press **Save**.
|
|
51
37
|
|
|
52
38
|
## Tips
|
|
53
|
-
* Look for information icons (
|
|
54
|
-
* Use keyboard shortcuts
|
|
39
|
+
* Look for information icons (\u2139\uFE0F) throughout the UI. Hover or click these icons to display contextual help powered by DocBlock.
|
|
40
|
+
* Use keyboard shortcuts\u2014such as **Ctrl+S** to save or **Ctrl+K** to open the command palette\u2014for quicker navigation.
|
|
55
41
|
* Need to find something quickly? Use the search bar or filters at the top of lists.
|
|
56
42
|
|
|
57
43
|
## Next Steps
|
|
58
44
|
Continue exploring the different screens. Try editing or deleting items, adjusting your profile settings, or experimenting with filters.
|
|
59
45
|
This guide is available via the help menu inside the app, so you can reference it without leaving your workflow.`
|
|
60
|
-
}
|
|
46
|
+
}
|
|
47
|
+
];
|
|
61
48
|
registerDocBlocks(inAppDocs);
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
//# sourceMappingURL=in-app-docs.docblock.js.map
|
|
49
|
+
export {
|
|
50
|
+
inAppDocs
|
|
51
|
+
};
|
package/dist/docs/index.d.ts
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import './in-app-docs.docblock';
|
|
2
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/docs/index.ts"],"names":[],"mappings":"AACA,OAAO,wBAAwB,CAAC"}
|
package/dist/docs/index.js
CHANGED
|
@@ -1 +1,48 @@
|
|
|
1
|
-
|
|
1
|
+
// @bun
|
|
2
|
+
// src/docs/in-app-docs.docblock.ts
|
|
3
|
+
import { registerDocBlocks } from "@contractspec/lib.contracts/docs";
|
|
4
|
+
var inAppDocs = [
|
|
5
|
+
{
|
|
6
|
+
id: "docs.examples.in-app-docs",
|
|
7
|
+
title: "In\u2011App Docs \u2014 Overview",
|
|
8
|
+
summary: "Overview of the in\u2011app documentation example demonstrating how DocBlock can serve end\u2011user guides.",
|
|
9
|
+
kind: "goal",
|
|
10
|
+
visibility: "public",
|
|
11
|
+
route: "/docs/examples/in-app-docs",
|
|
12
|
+
tags: ["documentation", "overview", "guide"],
|
|
13
|
+
body: `## Purpose
|
|
14
|
+
The in\u2011app documentation example shows how you can use ContractSpec's DocBlock system to build user\u2011facing guides directly inside an application's UI.
|
|
15
|
+
|
|
16
|
+
Instead of relying solely on developer documentation, you can define **public** DocBlocks that describe your product's features in clear, non\u2011technical language. When embedded in your app, these blocks present a self\u2011contained help centre for users.
|
|
17
|
+
|
|
18
|
+
## What you'll learn
|
|
19
|
+
* How to define DocBlock objects with public visibility and user\u2011friendly routes.
|
|
20
|
+
* How to structure an overview page for your in\u2011app guide using Markdown.
|
|
21
|
+
* How to register your DocBlocks so they show up in the sandbox and in your application.
|
|
22
|
+
|
|
23
|
+
Use this example as a template for documenting your own frontend workflows.`
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
id: "docs.examples.in-app-docs.usage",
|
|
27
|
+
title: "In\u2011App Docs \u2014 Using the Application",
|
|
28
|
+
summary: "Step\u2011by\u2011step guide for end users to navigate and use the example application.",
|
|
29
|
+
kind: "usage",
|
|
30
|
+
visibility: "public",
|
|
31
|
+
route: "/docs/examples/in-app-docs/usage",
|
|
32
|
+
tags: ["documentation", "usage", "guide"],
|
|
33
|
+
body: `## Getting Started
|
|
34
|
+
1. **Sign in**. Launch the app and enter your credentials. New users can click **Create Account** to register.
|
|
35
|
+
2. **Explore the dashboard**. Use the sidebar or navigation bar to access sections like Dashboard, Profile, and Settings.
|
|
36
|
+
3. **Add items**. On the Dashboard, click **Add Item** or a plus icon to create a new record. Fill in the form fields and press **Save**.
|
|
37
|
+
|
|
38
|
+
## Tips
|
|
39
|
+
* Look for information icons (\u2139\uFE0F) throughout the UI. Hover or click these icons to display contextual help powered by DocBlock.
|
|
40
|
+
* Use keyboard shortcuts\u2014such as **Ctrl+S** to save or **Ctrl+K** to open the command palette\u2014for quicker navigation.
|
|
41
|
+
* Need to find something quickly? Use the search bar or filters at the top of lists.
|
|
42
|
+
|
|
43
|
+
## Next Steps
|
|
44
|
+
Continue exploring the different screens. Try editing or deleting items, adjusting your profile settings, or experimenting with filters.
|
|
45
|
+
This guide is available via the help menu inside the app, so you can reference it without leaving your workflow.`
|
|
46
|
+
}
|
|
47
|
+
];
|
|
48
|
+
registerDocBlocks(inAppDocs);
|
package/dist/example.d.ts
CHANGED
|
@@ -1,14 +1,9 @@
|
|
|
1
|
-
import * as _contractspec_lib_contracts0 from "@contractspec/lib.contracts";
|
|
2
|
-
|
|
3
|
-
//#region src/example.d.ts
|
|
4
|
-
|
|
5
1
|
/**
|
|
6
2
|
* Example specification for the in-app documentation example.
|
|
7
3
|
*
|
|
8
4
|
* This example demonstrates how to use DocBlock to build public documentation
|
|
9
5
|
* aimed at end users directly within the application UI.
|
|
10
6
|
*/
|
|
11
|
-
declare const example:
|
|
12
|
-
|
|
13
|
-
export { example as default };
|
|
7
|
+
declare const example: import("@contractspec/lib.contracts").ExampleSpec;
|
|
8
|
+
export default example;
|
|
14
9
|
//# sourceMappingURL=example.d.ts.map
|
package/dist/example.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"example.d.ts","
|
|
1
|
+
{"version":3,"file":"example.d.ts","sourceRoot":"","sources":["../src/example.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,QAAA,MAAM,OAAO,mDA0CX,CAAC;AAEH,eAAe,OAAO,CAAC"}
|
package/dist/example.js
CHANGED
|
@@ -1,53 +1,39 @@
|
|
|
1
|
+
// @bun
|
|
2
|
+
// src/example.ts
|
|
1
3
|
import { defineExample } from "@contractspec/lib.contracts";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
docs: "./docs",
|
|
34
|
-
ui: "./ui"
|
|
35
|
-
},
|
|
36
|
-
surfaces: {
|
|
37
|
-
templates: false,
|
|
38
|
-
sandbox: {
|
|
39
|
-
enabled: true,
|
|
40
|
-
modes: ["markdown"]
|
|
41
|
-
},
|
|
42
|
-
studio: {
|
|
43
|
-
enabled: false,
|
|
44
|
-
installable: false
|
|
45
|
-
},
|
|
46
|
-
mcp: { enabled: false }
|
|
47
|
-
}
|
|
4
|
+
var example = defineExample({
|
|
5
|
+
meta: {
|
|
6
|
+
key: "in-app-docs",
|
|
7
|
+
version: "1.0.0",
|
|
8
|
+
title: "In\u2011App Documentation Example",
|
|
9
|
+
description: "Demonstrates using DocBlock to create user\u2011facing guides that live inside your application's frontend. It shows how to structure a public, non\u2011technical user guide using ContractSpec.",
|
|
10
|
+
kind: "ui",
|
|
11
|
+
visibility: "public",
|
|
12
|
+
stability: "experimental",
|
|
13
|
+
owners: ["@docs-team"],
|
|
14
|
+
tags: ["documentation", "guide", "ui"]
|
|
15
|
+
},
|
|
16
|
+
docs: {
|
|
17
|
+
rootDocId: "docs.examples.in-app-docs",
|
|
18
|
+
usageDocId: "docs.examples.in-app-docs.usage",
|
|
19
|
+
goalDocId: "docs.examples.in-app-docs"
|
|
20
|
+
},
|
|
21
|
+
entrypoints: {
|
|
22
|
+
packageName: "@contractspec/example.in-app-docs",
|
|
23
|
+
docs: "./docs",
|
|
24
|
+
ui: "./ui"
|
|
25
|
+
},
|
|
26
|
+
surfaces: {
|
|
27
|
+
templates: false,
|
|
28
|
+
sandbox: {
|
|
29
|
+
enabled: true,
|
|
30
|
+
modes: ["markdown"]
|
|
31
|
+
},
|
|
32
|
+
studio: { enabled: false, installable: false },
|
|
33
|
+
mcp: { enabled: false }
|
|
34
|
+
}
|
|
48
35
|
});
|
|
49
36
|
var example_default = example;
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
//# sourceMappingURL=example.js.map
|
|
37
|
+
export {
|
|
38
|
+
example_default as default
|
|
39
|
+
};
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
export { InAppDocsViewer, example };
|
|
1
|
+
export { default as example } from './example';
|
|
2
|
+
export * from './ui';
|
|
3
|
+
import './docs';
|
|
4
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAG/C,cAAc,MAAM,CAAC;AAGrB,OAAO,QAAQ,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,137 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import "
|
|
4
|
-
|
|
1
|
+
// @bun
|
|
2
|
+
// src/docs/in-app-docs.docblock.ts
|
|
3
|
+
import { registerDocBlocks } from "@contractspec/lib.contracts/docs";
|
|
4
|
+
var inAppDocs = [
|
|
5
|
+
{
|
|
6
|
+
id: "docs.examples.in-app-docs",
|
|
7
|
+
title: "In\u2011App Docs \u2014 Overview",
|
|
8
|
+
summary: "Overview of the in\u2011app documentation example demonstrating how DocBlock can serve end\u2011user guides.",
|
|
9
|
+
kind: "goal",
|
|
10
|
+
visibility: "public",
|
|
11
|
+
route: "/docs/examples/in-app-docs",
|
|
12
|
+
tags: ["documentation", "overview", "guide"],
|
|
13
|
+
body: `## Purpose
|
|
14
|
+
The in\u2011app documentation example shows how you can use ContractSpec's DocBlock system to build user\u2011facing guides directly inside an application's UI.
|
|
5
15
|
|
|
6
|
-
|
|
16
|
+
Instead of relying solely on developer documentation, you can define **public** DocBlocks that describe your product's features in clear, non\u2011technical language. When embedded in your app, these blocks present a self\u2011contained help centre for users.
|
|
17
|
+
|
|
18
|
+
## What you'll learn
|
|
19
|
+
* How to define DocBlock objects with public visibility and user\u2011friendly routes.
|
|
20
|
+
* How to structure an overview page for your in\u2011app guide using Markdown.
|
|
21
|
+
* How to register your DocBlocks so they show up in the sandbox and in your application.
|
|
22
|
+
|
|
23
|
+
Use this example as a template for documenting your own frontend workflows.`
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
id: "docs.examples.in-app-docs.usage",
|
|
27
|
+
title: "In\u2011App Docs \u2014 Using the Application",
|
|
28
|
+
summary: "Step\u2011by\u2011step guide for end users to navigate and use the example application.",
|
|
29
|
+
kind: "usage",
|
|
30
|
+
visibility: "public",
|
|
31
|
+
route: "/docs/examples/in-app-docs/usage",
|
|
32
|
+
tags: ["documentation", "usage", "guide"],
|
|
33
|
+
body: `## Getting Started
|
|
34
|
+
1. **Sign in**. Launch the app and enter your credentials. New users can click **Create Account** to register.
|
|
35
|
+
2. **Explore the dashboard**. Use the sidebar or navigation bar to access sections like Dashboard, Profile, and Settings.
|
|
36
|
+
3. **Add items**. On the Dashboard, click **Add Item** or a plus icon to create a new record. Fill in the form fields and press **Save**.
|
|
37
|
+
|
|
38
|
+
## Tips
|
|
39
|
+
* Look for information icons (\u2139\uFE0F) throughout the UI. Hover or click these icons to display contextual help powered by DocBlock.
|
|
40
|
+
* Use keyboard shortcuts\u2014such as **Ctrl+S** to save or **Ctrl+K** to open the command palette\u2014for quicker navigation.
|
|
41
|
+
* Need to find something quickly? Use the search bar or filters at the top of lists.
|
|
42
|
+
|
|
43
|
+
## Next Steps
|
|
44
|
+
Continue exploring the different screens. Try editing or deleting items, adjusting your profile settings, or experimenting with filters.
|
|
45
|
+
This guide is available via the help menu inside the app, so you can reference it without leaving your workflow.`
|
|
46
|
+
}
|
|
47
|
+
];
|
|
48
|
+
registerDocBlocks(inAppDocs);
|
|
49
|
+
// src/example.ts
|
|
50
|
+
import { defineExample } from "@contractspec/lib.contracts";
|
|
51
|
+
var example = defineExample({
|
|
52
|
+
meta: {
|
|
53
|
+
key: "in-app-docs",
|
|
54
|
+
version: "1.0.0",
|
|
55
|
+
title: "In\u2011App Documentation Example",
|
|
56
|
+
description: "Demonstrates using DocBlock to create user\u2011facing guides that live inside your application's frontend. It shows how to structure a public, non\u2011technical user guide using ContractSpec.",
|
|
57
|
+
kind: "ui",
|
|
58
|
+
visibility: "public",
|
|
59
|
+
stability: "experimental",
|
|
60
|
+
owners: ["@docs-team"],
|
|
61
|
+
tags: ["documentation", "guide", "ui"]
|
|
62
|
+
},
|
|
63
|
+
docs: {
|
|
64
|
+
rootDocId: "docs.examples.in-app-docs",
|
|
65
|
+
usageDocId: "docs.examples.in-app-docs.usage",
|
|
66
|
+
goalDocId: "docs.examples.in-app-docs"
|
|
67
|
+
},
|
|
68
|
+
entrypoints: {
|
|
69
|
+
packageName: "@contractspec/example.in-app-docs",
|
|
70
|
+
docs: "./docs",
|
|
71
|
+
ui: "./ui"
|
|
72
|
+
},
|
|
73
|
+
surfaces: {
|
|
74
|
+
templates: false,
|
|
75
|
+
sandbox: {
|
|
76
|
+
enabled: true,
|
|
77
|
+
modes: ["markdown"]
|
|
78
|
+
},
|
|
79
|
+
studio: { enabled: false, installable: false },
|
|
80
|
+
mcp: { enabled: false }
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
var example_default = example;
|
|
84
|
+
|
|
85
|
+
// src/ui/InAppDocsViewer.tsx
|
|
86
|
+
import { useState } from "react";
|
|
87
|
+
import { MarkdownRenderer } from "@contractspec/lib.example-shared-ui";
|
|
88
|
+
import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
|
|
89
|
+
"use client";
|
|
90
|
+
var InAppDocsViewer = () => {
|
|
91
|
+
const [activeId, setActiveId] = useState(inAppDocs[0]?.id ?? "");
|
|
92
|
+
const activeDoc = inAppDocs.find((doc) => doc.id === activeId);
|
|
93
|
+
return /* @__PURE__ */ jsxDEV("div", {
|
|
94
|
+
style: { display: "flex", height: "100%", gap: "1rem" },
|
|
95
|
+
children: [
|
|
96
|
+
/* @__PURE__ */ jsxDEV("nav", {
|
|
97
|
+
style: { width: "220px", borderRight: "1px solid #eee" },
|
|
98
|
+
children: /* @__PURE__ */ jsxDEV("ul", {
|
|
99
|
+
style: { listStyle: "none", padding: 0, margin: 0 },
|
|
100
|
+
children: inAppDocs.map((doc) => /* @__PURE__ */ jsxDEV("li", {
|
|
101
|
+
style: { marginBottom: "0.5rem" },
|
|
102
|
+
children: /* @__PURE__ */ jsxDEV("button", {
|
|
103
|
+
onClick: () => setActiveId(doc.id),
|
|
104
|
+
style: {
|
|
105
|
+
background: doc.id === activeId ? "#f0f0f0" : "transparent",
|
|
106
|
+
border: "none",
|
|
107
|
+
padding: "0.5rem 0.75rem",
|
|
108
|
+
cursor: "pointer",
|
|
109
|
+
textAlign: "left",
|
|
110
|
+
width: "100%"
|
|
111
|
+
},
|
|
112
|
+
children: doc.title
|
|
113
|
+
}, undefined, false, undefined, this)
|
|
114
|
+
}, doc.id, false, undefined, this))
|
|
115
|
+
}, undefined, false, undefined, this)
|
|
116
|
+
}, undefined, false, undefined, this),
|
|
117
|
+
/* @__PURE__ */ jsxDEV("main", {
|
|
118
|
+
style: { flexGrow: 1, padding: "1rem", overflowY: "auto" },
|
|
119
|
+
children: activeDoc && /* @__PURE__ */ jsxDEV(Fragment, {
|
|
120
|
+
children: [
|
|
121
|
+
/* @__PURE__ */ jsxDEV("h1", {
|
|
122
|
+
children: activeDoc.title
|
|
123
|
+
}, undefined, false, undefined, this),
|
|
124
|
+
/* @__PURE__ */ jsxDEV(MarkdownRenderer, {
|
|
125
|
+
content: activeDoc.body
|
|
126
|
+
}, undefined, false, undefined, this)
|
|
127
|
+
]
|
|
128
|
+
}, undefined, true, undefined, this)
|
|
129
|
+
}, undefined, false, undefined, this)
|
|
130
|
+
]
|
|
131
|
+
}, undefined, true, undefined, this);
|
|
132
|
+
};
|
|
133
|
+
var InAppDocsViewer_default = InAppDocsViewer;
|
|
134
|
+
export {
|
|
135
|
+
example_default as example,
|
|
136
|
+
InAppDocsViewer_default as InAppDocsViewer
|
|
137
|
+
};
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
// src/docs/in-app-docs.docblock.ts
|
|
2
|
+
import { registerDocBlocks } from "@contractspec/lib.contracts/docs";
|
|
3
|
+
var inAppDocs = [
|
|
4
|
+
{
|
|
5
|
+
id: "docs.examples.in-app-docs",
|
|
6
|
+
title: "In‑App Docs — Overview",
|
|
7
|
+
summary: "Overview of the in‑app documentation example demonstrating how DocBlock can serve end‑user guides.",
|
|
8
|
+
kind: "goal",
|
|
9
|
+
visibility: "public",
|
|
10
|
+
route: "/docs/examples/in-app-docs",
|
|
11
|
+
tags: ["documentation", "overview", "guide"],
|
|
12
|
+
body: `## Purpose
|
|
13
|
+
The in‑app documentation example shows how you can use ContractSpec's DocBlock system to build user‑facing guides directly inside an application's UI.
|
|
14
|
+
|
|
15
|
+
Instead of relying solely on developer documentation, you can define **public** DocBlocks that describe your product's features in clear, non‑technical language. When embedded in your app, these blocks present a self‑contained help centre for users.
|
|
16
|
+
|
|
17
|
+
## What you'll learn
|
|
18
|
+
* How to define DocBlock objects with public visibility and user‑friendly routes.
|
|
19
|
+
* How to structure an overview page for your in‑app guide using Markdown.
|
|
20
|
+
* How to register your DocBlocks so they show up in the sandbox and in your application.
|
|
21
|
+
|
|
22
|
+
Use this example as a template for documenting your own frontend workflows.`
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
id: "docs.examples.in-app-docs.usage",
|
|
26
|
+
title: "In‑App Docs — Using the Application",
|
|
27
|
+
summary: "Step‑by‑step guide for end users to navigate and use the example application.",
|
|
28
|
+
kind: "usage",
|
|
29
|
+
visibility: "public",
|
|
30
|
+
route: "/docs/examples/in-app-docs/usage",
|
|
31
|
+
tags: ["documentation", "usage", "guide"],
|
|
32
|
+
body: `## Getting Started
|
|
33
|
+
1. **Sign in**. Launch the app and enter your credentials. New users can click **Create Account** to register.
|
|
34
|
+
2. **Explore the dashboard**. Use the sidebar or navigation bar to access sections like Dashboard, Profile, and Settings.
|
|
35
|
+
3. **Add items**. On the Dashboard, click **Add Item** or a plus icon to create a new record. Fill in the form fields and press **Save**.
|
|
36
|
+
|
|
37
|
+
## Tips
|
|
38
|
+
* Look for information icons (ℹ️) throughout the UI. Hover or click these icons to display contextual help powered by DocBlock.
|
|
39
|
+
* Use keyboard shortcuts—such as **Ctrl+S** to save or **Ctrl+K** to open the command palette—for quicker navigation.
|
|
40
|
+
* Need to find something quickly? Use the search bar or filters at the top of lists.
|
|
41
|
+
|
|
42
|
+
## Next Steps
|
|
43
|
+
Continue exploring the different screens. Try editing or deleting items, adjusting your profile settings, or experimenting with filters.
|
|
44
|
+
This guide is available via the help menu inside the app, so you can reference it without leaving your workflow.`
|
|
45
|
+
}
|
|
46
|
+
];
|
|
47
|
+
registerDocBlocks(inAppDocs);
|
|
48
|
+
export {
|
|
49
|
+
inAppDocs
|
|
50
|
+
};
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
// src/docs/in-app-docs.docblock.ts
|
|
2
|
+
import { registerDocBlocks } from "@contractspec/lib.contracts/docs";
|
|
3
|
+
var inAppDocs = [
|
|
4
|
+
{
|
|
5
|
+
id: "docs.examples.in-app-docs",
|
|
6
|
+
title: "In‑App Docs — Overview",
|
|
7
|
+
summary: "Overview of the in‑app documentation example demonstrating how DocBlock can serve end‑user guides.",
|
|
8
|
+
kind: "goal",
|
|
9
|
+
visibility: "public",
|
|
10
|
+
route: "/docs/examples/in-app-docs",
|
|
11
|
+
tags: ["documentation", "overview", "guide"],
|
|
12
|
+
body: `## Purpose
|
|
13
|
+
The in‑app documentation example shows how you can use ContractSpec's DocBlock system to build user‑facing guides directly inside an application's UI.
|
|
14
|
+
|
|
15
|
+
Instead of relying solely on developer documentation, you can define **public** DocBlocks that describe your product's features in clear, non‑technical language. When embedded in your app, these blocks present a self‑contained help centre for users.
|
|
16
|
+
|
|
17
|
+
## What you'll learn
|
|
18
|
+
* How to define DocBlock objects with public visibility and user‑friendly routes.
|
|
19
|
+
* How to structure an overview page for your in‑app guide using Markdown.
|
|
20
|
+
* How to register your DocBlocks so they show up in the sandbox and in your application.
|
|
21
|
+
|
|
22
|
+
Use this example as a template for documenting your own frontend workflows.`
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
id: "docs.examples.in-app-docs.usage",
|
|
26
|
+
title: "In‑App Docs — Using the Application",
|
|
27
|
+
summary: "Step‑by‑step guide for end users to navigate and use the example application.",
|
|
28
|
+
kind: "usage",
|
|
29
|
+
visibility: "public",
|
|
30
|
+
route: "/docs/examples/in-app-docs/usage",
|
|
31
|
+
tags: ["documentation", "usage", "guide"],
|
|
32
|
+
body: `## Getting Started
|
|
33
|
+
1. **Sign in**. Launch the app and enter your credentials. New users can click **Create Account** to register.
|
|
34
|
+
2. **Explore the dashboard**. Use the sidebar or navigation bar to access sections like Dashboard, Profile, and Settings.
|
|
35
|
+
3. **Add items**. On the Dashboard, click **Add Item** or a plus icon to create a new record. Fill in the form fields and press **Save**.
|
|
36
|
+
|
|
37
|
+
## Tips
|
|
38
|
+
* Look for information icons (ℹ️) throughout the UI. Hover or click these icons to display contextual help powered by DocBlock.
|
|
39
|
+
* Use keyboard shortcuts—such as **Ctrl+S** to save or **Ctrl+K** to open the command palette—for quicker navigation.
|
|
40
|
+
* Need to find something quickly? Use the search bar or filters at the top of lists.
|
|
41
|
+
|
|
42
|
+
## Next Steps
|
|
43
|
+
Continue exploring the different screens. Try editing or deleting items, adjusting your profile settings, or experimenting with filters.
|
|
44
|
+
This guide is available via the help menu inside the app, so you can reference it without leaving your workflow.`
|
|
45
|
+
}
|
|
46
|
+
];
|
|
47
|
+
registerDocBlocks(inAppDocs);
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
// src/example.ts
|
|
2
|
+
import { defineExample } from "@contractspec/lib.contracts";
|
|
3
|
+
var example = defineExample({
|
|
4
|
+
meta: {
|
|
5
|
+
key: "in-app-docs",
|
|
6
|
+
version: "1.0.0",
|
|
7
|
+
title: "In‑App Documentation Example",
|
|
8
|
+
description: "Demonstrates using DocBlock to create user‑facing guides that live inside your application's frontend. It shows how to structure a public, non‑technical user guide using ContractSpec.",
|
|
9
|
+
kind: "ui",
|
|
10
|
+
visibility: "public",
|
|
11
|
+
stability: "experimental",
|
|
12
|
+
owners: ["@docs-team"],
|
|
13
|
+
tags: ["documentation", "guide", "ui"]
|
|
14
|
+
},
|
|
15
|
+
docs: {
|
|
16
|
+
rootDocId: "docs.examples.in-app-docs",
|
|
17
|
+
usageDocId: "docs.examples.in-app-docs.usage",
|
|
18
|
+
goalDocId: "docs.examples.in-app-docs"
|
|
19
|
+
},
|
|
20
|
+
entrypoints: {
|
|
21
|
+
packageName: "@contractspec/example.in-app-docs",
|
|
22
|
+
docs: "./docs",
|
|
23
|
+
ui: "./ui"
|
|
24
|
+
},
|
|
25
|
+
surfaces: {
|
|
26
|
+
templates: false,
|
|
27
|
+
sandbox: {
|
|
28
|
+
enabled: true,
|
|
29
|
+
modes: ["markdown"]
|
|
30
|
+
},
|
|
31
|
+
studio: { enabled: false, installable: false },
|
|
32
|
+
mcp: { enabled: false }
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
var example_default = example;
|
|
36
|
+
export {
|
|
37
|
+
example_default as default
|
|
38
|
+
};
|