components: add AMWVideo

.vitepress/theme/components/AMWVideo.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+
+import { computed } from 'vue'
+
+export interface Props {
+    id?: string,
+    rel?: number,
+    showinfo?: number,
+    controls?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  rel: 0,
+  showinfo: 0,
+  controls: 1
+})
+
+const url = computed(() => `https://www.youtube.com/embed/${props.id}?rel=${props.rel}&showinfo=${props.showinfo}&controls=${props.controls}`)
+
+</script>
+
+<template>
+    <div v-if="url" class="video-responsive">
+        <iframe width="100%" height="400" :src="url" frameborder="0"
+            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />
+    </div>
+</template>
+
+<style scoped>
+.video-responsive {
+    margin-top: 1em;
+    margin-bottom: 2em;
+    overflow: hidden;
+    padding-bottom: 56.25%;
+    position: relative;
+    height: 0;
+    iframe {
+        left: 0;
+        top: 0;
+        height: 100%;
+        width: 100%;
+        position: absolute;
+    }
+}
+
+@media (max-width: 767px) {
+    .video-responsive {
+        padding-left: 0;
+        padding-right: 0;
+        border-radius: 0;
+        width: auto;
+        margin: 0.85rem -1.5rem;
+        border-radius: 0;
+    }
+}
+</style>

.vitepress/theme/index.ts

@@ -4,6 +4,8 @@ import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 
 import AMWContribution from './components/AMWContribution.vue'
+import AMWDocsAsideMeta from './components/AMWDocsAsideMeta.vue'
+import AMWVideo from './components/AMWVideo.vue'
 
 import {
   NolebaseEnhancedReadabilitiesMenu,
@@ -14,8 +16,6 @@ import type { Options } from '@nolebase/vitepress-plugin-enhanced-readabilities'
 import { InjectionKey } from '@nolebase/vitepress-plugin-enhanced-readabilities'
 import { options as NolebaseEnhancedReadabilitiesOptions } from './plugins/enhanced-readabilities/index'
 
-import AMWDocsAsideMeta from './components/AMWDocsAsideMeta.vue'
-
 import './styles/style.css'
 import './styles/theme.css'
 import '@nolebase/vitepress-plugin-enhanced-readabilities/dist/style.css'
@@ -33,5 +33,6 @@ export default {
   enhanceApp({ app, router, siteData }) {
     app.provide(InjectionKey, NolebaseEnhancedReadabilitiesOptions as Options)
     app.component('contribution', AMWContribution);
+    app.component('Video', AMWVideo)
   }
 } satisfies Theme

docs/en/instalations/booting/index.md

@@ -39,6 +39,8 @@ dd if=spi.installer.img of=/dev/XXX bs=1M oflag=direct,sync status=progress
 
 **Note:** Erasing the storage before installation is not required. The erasing option can be used to remove Tow-Boot (or any other firmware installed in the SPI partition).
 
+<Video id="7piXOM8G2uQ" />
+
 # Additional
 
 ### Default Account Data

docs/instalations/booting/index.md

@@ -51,6 +51,7 @@ dd if=spi.installer.img of=/dev/XXX bs=1M oflag=direct,sync status=progress
 стирания может использоваться для удаления Tow-Boot (или любого другого
 прошивочного ПО, установленного в раздел SPI).
 
+<Video id="7piXOM8G2uQ" />
 
 # Дополнительно