feat(docs): Added various training videos to support the OHIF CLI tools (#3794)

2023-11-17 20:08:38 -05:00
1 parent 7867b29742
commit d83beb7c62
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 7
+sidebar_position: 8
 sidebar_label: Continuous Integration
 ---

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 4
+sidebar_position: 5
 sidebar_label: Contributing
 ---

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 8
+sidebar_position: 9
 sidebar_label: Local Linking
 ---

@@ -306,3 +306,7 @@ The ohif-cli will add the path to the external dependencies to the webpack confi
 so that you can install them in your project and use them in your custom
 extensions and modes. To achieve this ohif-cli will update the webpack.pwa.js
 file in the platform/app directory.
+
+## Video tutorials
+See the [Video Tutorials](./video-tutorials.md) for videos of some the above
+commands in action.
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 5
+sidebar_position: 6
 sidebar_label: Issue & PR Triage Process
 ---

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 6
+sidebar_position: 7
 sidebar_label: Testing
 ---

@@ -0,0 +1,68 @@
+---
+sidebar_position: 4
+sidebar_label: Video Tutorials
+---
+
+# 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>