Merge pull request #72 from immense/onboarding-video-series

Onboarding video series

Author: hello-jason

.vitepress/components/WistiaEmbed.vue

@@ -0,0 +1,106 @@
+<script setup>
+import { computed, onMounted } from 'vue'
+
+const props = defineProps({
+  mediaId: {
+    type: String,
+    default: '',
+  },
+  channelId: {
+    type: String,
+    default: '',
+  },
+  aspect: {
+    type: [String, Number],
+    default: 16 / 9,
+  },
+  swatch: {
+    type: String,
+    default: '',
+  },
+})
+
+const mediaIdValue = computed(() => props.mediaId.trim())
+const channelIdValue = computed(() => props.channelId.trim())
+const hasMedia = computed(() => mediaIdValue.value.length > 0)
+const hasChannel = computed(() => channelIdValue.value.length > 0)
+
+const embedType = computed(() => {
+  if (hasChannel.value) return 'playlist'
+  if (hasMedia.value) return 'media'
+  return 'none'
+})
+
+const aspectValue = computed(() => {
+  const value = Number(props.aspect)
+  return Number.isFinite(value) && value > 0 ? value : 16 / 9
+})
+
+const paddingTop = computed(() => `${(1 / aspectValue.value) * 100}%`)
+const swatchUrl = computed(() => {
+  if (!hasMedia.value) return ''
+  return (
+    props.swatch ||
+    `https://fast.wistia.com/embed/medias/${mediaIdValue.value}/swatch`
+  )
+})
+const embedSrc = computed(() => {
+  if (!hasMedia.value) return ''
+  return `https://fast.wistia.com/embed/${mediaIdValue.value}.js`
+})
+
+const ensureScript = (src, options = {}) => {
+  if (document.querySelector(`script[data-wistia-src="${src}"]`)) return
+
+  const script = document.createElement('script')
+  script.src = src
+  script.async = true
+  if (options.type) script.type = options.type
+  script.setAttribute('data-wistia-src', src)
+  document.head.appendChild(script)
+}
+
+const ensureStyle = () => {
+  const styleId = `wistia-style-${mediaIdValue.value}`
+  if (document.getElementById(styleId)) return
+
+  const style = document.createElement('style')
+  style.id = styleId
+  style.textContent = `wistia-player[media-id="${mediaIdValue.value}"]:not(:defined) { background: center / contain no-repeat url('${swatchUrl.value}'); display: block; filter: blur(5px); padding-top: ${paddingTop.value}; }`
+  document.head.appendChild(style)
+}
+
+onMounted(() => {
+  if (!hasMedia.value && !hasChannel.value) {
+    console.warn('WistiaEmbed requires either media-id or channel-id.')
+    return
+  }
+
+  if (hasMedia.value && hasChannel.value) {
+    console.warn(
+      'WistiaEmbed received both media-id and channel-id; using channel-id.'
+    )
+  }
+
+  if (embedType.value === 'playlist') {
+    ensureScript('https://fast.wistia.com/playlist.js')
+    return
+  }
+
+  ensureScript('https://fast.wistia.com/player.js')
+  ensureScript(embedSrc.value, { type: 'module' })
+  ensureStyle()
+})
+</script>
+
+<template>
+  <wistia-playlist
+    v-if="embedType === 'playlist'"
+    :channel-id="channelIdValue"
+  ></wistia-playlist>
+  <wistia-player
+    v-else-if="embedType === 'media'"
+    :media-id="mediaIdValue"
+    :aspect="aspectValue"
+  ></wistia-player>
+</template>

.vitepress/config.mts

@@ -20,6 +20,14 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
         ]
     ],
     description: "A documentation suite for all things ImmyBot",
+    vue: {
+        template: {
+            compilerOptions: {
+                isCustomElement: (tag) =>
+                    tag === 'wistia-player' || tag === 'wistia-playlist',
+            },
+        },
+    },
     sitemap: {
         hostname: 'https://docs.immy.bot'
     },
@@ -239,4 +247,4 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     ignoreDeadLinks: true
 
 
-});
+});

.vitepress/theme/index.ts

@@ -1,6 +1,7 @@
 // https://vitepress.dev/guide/custom-theme
 import { h } from 'vue';
 import Theme from 'vitepress/theme';
+import WistiaEmbed from '../components/WistiaEmbed.vue';
 import './style.css';
 import './immy.css';
 
@@ -12,6 +13,6 @@ export default {
     });
   },
   enhanceApp({ app, router, siteData }) {
-    // ...
+    app.component('WistiaEmbed', WistiaEmbed);
   }
-};
+};

Documentation/GettingStarted/quick-start-guide.md

@@ -2,6 +2,8 @@
 
 This guide will help you get up and running with ImmyBot in under 30 minutes. Follow these steps to set up your account, connect your first computer, and create your first deployment.
 
+<WistiaEmbed channel-id="wq8r00965n" />
+
 ## Understanding the ImmyBot Approach
 
 **The goal of ImmyBot is to set up a computer knowing only the customer and the end user.**
@@ -15,6 +17,9 @@ Before you begin, make sure you have:
 - Administrator access to a test computer (physical or virtual)
 - A USB drive (for physical computers)
 
+<WistiaEmbed media-id="exwm9mtop7" />
+Getting Started With ImmyBot
+
 ## Step 1: Log in to ImmyBot
 
 1. Navigate to your ImmyBot instance URL (typically `https://yourdomain.immy.bot`)
@@ -27,6 +32,12 @@ You'll be greeted with the ImmyBot dashboard, which provides an overview of your
 
 When you first log in to ImmyBot, the Getting Started Wizard will prompt you to create an ImmyBot flash drive.
 
+<WistiaEmbed media-id="pzcxwj7coz" />
+
+:::details Click here for virtual machines
+<WistiaEmbed media-id="o0ax7wfnph" />
+:::
+
 ::: info
  **Important:** You only need to create this USB drive ONCE. The same drive can be used for all clients and computers. You'll select the specific client after the computer connects to ImmyBot.
 :::
@@ -54,6 +65,8 @@ We recommend leaving this default, then in one of your first deployments, deleti
 
 ## Step 3: Connect the Computer
 
+<WistiaEmbed media-id="gf9iwrtj3o" />
+
 ### For Physical Computers (Recommended)
 
 We recommend using a physical computer (Dell, HP, or Lenovo) for your first setup to experience the full capabilities of ImmyBot, including BIOS and driver updates.
@@ -80,6 +93,8 @@ Once the provisioning package is applied, the computer will connect to ImmyBot a
 
 ## Step 5: Assign Customer and User
 
+<WistiaEmbed media-id="phre3e9stm" />
+
 For ImmyBot to properly configure the computer, you need to specify:
 
 1. **Customer (Required)**: The organization that owns the computer
@@ -94,6 +109,8 @@ For ImmyBot to properly configure the computer, you need to specify:
 
 ## Step 6: Create Your First Deployment
 
+<WistiaEmbed media-id="zrgvbigvzo" />
+
 Now let's create a simple deployment to install a software package:
 
 1. Navigate to **Deployments** in the left sidebar
@@ -136,6 +153,8 @@ These conditions are defined using filter scripts, or metascripts that can check
 
 ## Step 7: Run a Maintenance Session
 
+<WistiaEmbed media-id="q3f1fib97g" />
+
 To apply your new deployment immediately:
 
 1. Navigate to **Computers** in the left sidebar
@@ -168,4 +187,3 @@ Congratulations! You've successfully set up ImmyBot, connected your first comput
 - [Core Concepts](/Documentation/GettingStarted/core-concepts.md) - Understand the fundamental concepts of ImmyBot
 - [Creating Deployments](/Documentation/HowToGuides/creating-managing-deployments.md) - Explore advanced deployment options
 - [Integration Overview](/Documentation/Integrations//integration-overview.md) - Connect ImmyBot to your existing tools
-

README.md

@@ -32,6 +32,31 @@ There will be a link to the localhost URL in your terminal, by default it is: ht
 
 Save pages as you edit them, they will be automatically updated in your browser. Any changes made to /.vitepress/config.mts will cause the instance to restart locally.
 
+## Wistia Embeds
+
+Use the `WistiaEmbed` component to add Wistia videos or channel playlists in Markdown without page-level scripts.
+
+Example (single video):
+
+```
+<WistiaEmbed media-id="j4jjmljlxw" />
+```
+
+Example (channel playlist):
+
+```
+<WistiaEmbed channel-id="wq8r00965n" />
+```
+
+Required props:
+- `media-id` for single videos or `channel-id` for channel playlists
+
+Optional props (video only):
+- `aspect` (number or string, default `16/9`)
+- `swatch` (string URL override for the preview image)
+
+You can place multiple embeds on the same page by repeating the component with different `media-id` or `channel-id` values.
+
 ## Project Structure
 
 ```
@@ -76,5 +101,3 @@ You can reference the information by using
   9.  Test your changes
   10. Commit and push your changes to the PR
   11. If everything is satisfactory the changes will be merged into the main branch
-
-