fix/migration 3p11 (#5370)

2025-08-28 12:57:45 -04:00
1 parent df0593aac9
commit 6a1838bf0d
@@ -0,0 +1,70 @@
+---
+sidebar_position: 4
+sidebar_label: Video Tutorials
+title: OHIF Development Video Tutorials
+summary: Collection of instructional videos demonstrating key OHIF development workflows, including creating, linking, and publishing modes and extensions, with step-by-step demonstrations of the OHIF CLI and NPM publishing process.
+---
+
+# Video Tutorials
+
+## Creating, Linking and Publishing OHIF Modes and Extensions
+
+The [OHIF CLI](./ohif-cli.md) facilitates the creation, linkage and publication
+of OHIF modes and extensions. The videos below walk through how to use the CLI for
+- creating modes and extensions
+- linking local modes and extensions
+- publishing modes and extensions to NPM
+- adding published modes and extensions to OHIF
+- submitting a mode to OHIF
+
+The videos build on top of one another whereby the mode and extension created
+in each of the first two videos are published to NPM and then the published
+entities are added to OHIF.
+
+### Creating and Linking a Mode
+
+The first video demonstrates the creation and linkage of a mode.
+<div style={{padding:"56.25% 0 0 0", position:"relative"}}>
+    <iframe src="https://player.vimeo.com/video/884891676?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameBorder="0" allow="autoplay; fullscreen; picture-in-picture" allowFullScreen style= {{ position:"absolute",top:0,left:0,width:"100%",height:"100%"}} title="Create and link a mode"></iframe>
+</div>
+
+### Creating and Linking an Extension
+
+The second video creates and links an extension. The mode from the first
+video is modified to reference the extension.
+<div style={{padding:"56.25% 0 0 0", position:"relative"}}>
+    <iframe src="https://player.vimeo.com/video/884891718?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameBorder="0" allow="autoplay; fullscreen; picture-in-picture" allowFullScreen style= {{ position:"absolute",top:0,left:0,width:"100%",height:"100%"}} title="Create and link an extension"></iframe>
+</div>
+
+### Publishing an Extension to NPM
+
+The third video shows how the extension created in the second video can
+be published to NPM.
+<div style={{padding:"56.25% 0 0 0", position:"relative"}}>
+    <iframe src="https://player.vimeo.com/video/884891701?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameBorder="0" allow="autoplay; fullscreen; picture-in-picture" allowFullScreen style= {{ position:"absolute",top:0,left:0,width:"100%",height:"100%"}} title="Publish an extension to NPM"></iframe>
+</div>
+
+### Publishing a Mode to NPM
+
+The fourth video shows how the mode created in the first video can be
+published to NPM.
+<div style={{padding:"56.25% 0 0 0", position:"relative"}}>
+    <iframe src="https://player.vimeo.com/video/884893445?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameBorder="0" allow="autoplay; fullscreen; picture-in-picture" allowFullScreen style= {{ position:"absolute",top:0,left:0,width:"100%",height:"100%"}} title="Publish a mode to NPM"></iframe>
+</div>
+
+### Adding a Mode from NPM
+
+The fifth video adds the mode and extension published in NPM to OHIF. Note
+that since the mode references the extension both are added with one CLI
+command.
+<div style={{padding:"56.25% 0 0 0", position:"relative"}}>
+    <iframe src="https://player.vimeo.com/video/884893388?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameBorder="0" allow="autoplay; fullscreen; picture-in-picture" allowFullScreen style= {{ position:"absolute",top:0,left:0,width:"100%",height:"100%"}} title="Add a mode from NPM"></iframe>
+</div>
+
+### Submitting a Mode to OHIF
+
+The sixth video demonstrates how a mode can be submitted to OHIF to have it
+appear in OHIF's mode gallery.
+<div style={{padding:"56.25% 0 0 0", position:"relative"}}>
+    <iframe src="https://player.vimeo.com/video/884893372?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameBorder="0" allow="autoplay; fullscreen; picture-in-picture" allowFullScreen style= {{ position:"absolute",top:0,left:0,width:"100%",height:"100%"}} title="Submit a mode to OHIF"></iframe>
+</div>