Add Resources and YouTubeEmbed.vue

Author: smashedr

.vitepress/config.mts

@@ -38,6 +38,7 @@ export default defineConfig({
     config(md) {
       md.use(groupIconMdPlugin)
     },
+    // toc: { level: [2] },
   },
 
   title: settings.title,
@@ -124,6 +125,7 @@ export default defineConfig({
           { text: 'Get Started', link: '/get-started' },
           { text: 'Features', link: '/features' },
           { text: 'Examples', link: '/examples' },
+          { text: 'Resources', link: '/resources' },
           //
         ],
       },

.vitepress/theme/components/YouTubeEmbed.vue

@@ -0,0 +1,49 @@
+<script setup>
+const props = defineProps({
+  title: { type: String, default: 'YouTube video player' },
+  style: { type: String, default: 'margin: 16px 0' },
+  src: { type: String, default: null }, // Source URL overrides all other parameters
+  videoId: { type: String, default: null }, // Video ID used with other parameters
+  autoplay: { type: String, default: '0' },
+  controls: { type: String, default: '1' },
+  loop: { type: String, default: '0' },
+  rel: { type: String, default: '0' },
+  start: { type: String, default: null },
+})
+
+let srcUrl
+if (props.src) {
+  srcUrl = props.src
+} else if (props.videoId) {
+  const params = new URLSearchParams({
+    autoplay: props.autoplay,
+    controls: props.controls,
+    loop: props.loop,
+    rel: props.rel,
+  })
+  if (props.start) params.set('start', props.start)
+  srcUrl = `https://www.youtube-nocookie.com/embed/${props.videoId}?${params.toString()}`
+} else {
+  console.warn('%c YouTubeEmbed', 'color: Red', 'Missing param: videoId or src')
+}
+// console.debug('%c YouTubeEmbed', 'color: Red', 'srcUrl:', srcUrl)
+</script>
+
+<template>
+  <iframe
+    width="100%"
+    :style="props.style"
+    :src="srcUrl"
+    :title="props.title"
+    frameborder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+    referrerpolicy="strict-origin-when-cross-origin"
+    allowfullscreen
+  ></iframe>
+</template>
+
+<style scoped>
+iframe {
+  aspect-ratio: 16 / 9;
+}
+</style>

.vitepress/theme/index.js

@@ -2,7 +2,13 @@ import DefaultTheme from 'vitepress/theme'
 import './custom.css'
 import 'virtual:group-icons.css'
 
+import YouTubeEmbed from './components/YouTubeEmbed.vue'
+
 // noinspection JSUnusedGlobalSymbols
 export default {
     ...DefaultTheme,
+
+    enhanceApp({ app }) {
+        app.component('YouTubeEmbed', YouTubeEmbed)
+    },
 }

docs/docs/inputs.md

@@ -12,7 +12,7 @@ The inputs are organized in a table for quick [reference](#reference) with addit
 | [file](#file)                                 | `docker-compose.yaml`               | Docker Stack/Compose File(s)                                  |
 | [mode](#mode) **¹**                           | `swarm`                             | Deploy Mode [`swarm`, `compose`]                              |
 | [args](#args) **¹**                           | `--remove-orphans --force-recreate` | Additional **Compose** Arguments                              |
-| [host](#host)                                 | -                                   | Remote Docker Hostname or IP                                  |
+| [host](#host) **\***                          | -                                   | Remote Docker Hostname or IP                                  |
 | port                                          | `22`                                | Remote Docker Port                                            |
 | user **\***                                   | -                                   | Remote Docker Username                                        |
 | [pass](#pass-ssh-key) **\***                  | -                                   | Remote Docker Password                                        |

docs/guides/get-started.md

@@ -90,6 +90,8 @@ For this you should use: [cssnr/portainer-stack-deploy-action](https://github.co
 For more details see the [README.md](https://github.com/cssnr/portainer-stack-deploy-action?tab=readme-ov-file#readme) on GitHub.
 [Support](https://github.com/cssnr/portainer-stack-deploy-action?tab=readme-ov-file#Support) is also available.
 
+ 
+
 ::: info FEATURE REQUEST
 If you need more options, please [open a feature request](https://github.com/cssnr/stack-deploy-action/discussions/categories/feature-requests)
 :::

docs/guides/resources.md

@@ -0,0 +1,17 @@
+# Resources
+
+A collection of resources and guides for getting started.
+
+[[toc]]
+
+## Video Guides
+
+### Docker Stack VPS Guide
+
+<YouTubeEmbed video-id="fuZoxuBiL9o" />
+
+&nbsp;
+
+::: tip
+Have a related resource? Let us know by creating a [PR](https://github.com/cssnr/stack-deploy-docs/edit/master/docs/guides/examples.md) or an [Issue](https://github.com/cssnr/stack-deploy-docs/issues).
+:::