Vidstack + change suspicious substance texture.

.vitepress/theme/components/VideoPlayer.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import 'vidstack/player/styles/default/theme.css';
+import 'vidstack/player/styles/default/layouts/video.css';
+import 'vidstack/player';
+import 'vidstack/player/layouts/default';
+import 'vidstack/player/ui';
+
+const props = defineProps<{
+  title: string
+  src: string
+}>();
+</script>
+
+<template>
+  <media-player load="visible" view-type="video" streamType="on-demand" :title="props.title" :src="props.src">
+    <media-provider>
+    </media-provider>
+    <media-video-layout />
+  </media-player>
+</template>

.vitepress/theme/index.ts

@@ -8,15 +8,20 @@ import PageAuthorComponent from './components/PageAuthorComponent.vue'
 import BannerComponent from './components/BannerComponent.vue'
 import DownloadEntry from './components/DownloadEntry.vue'
 import ColorSwatch from './components/ColorSwatch.vue'
+import VideoPlayer from './components/VideoPlayer.vue'
 
 // Import style fixes and customizations.
 import './style.css'
 
 export default {
   extends: DefaultTheme,
   enhanceApp({ app }) {
+    // Vidstack Videoplayer Component
+    app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('media-');
+
     app.component('DownloadEntry', DownloadEntry)
     app.component('ColorSwatch', ColorSwatch)
+    app.component('VideoPlayer', VideoPlayer)
   },
   Layout() {
     return h(DefaultTheme.Layout, null, {

develop/items/custom-item-groups.md

@@ -11,22 +11,12 @@ Item groups are the tabs in the creative inventory that store items. You can cre
 
 ## Creating the Item Group
 
-It's surprisingly easy to create an item group. Simply create a new static final field in your items class to store the item group.
-
-I'll be using the "Guidite Sword" from the previous [Custom Tools](./custom-tools.md) page as the icon for the group.
-
-@[code transcludeWith=:::2](@/reference/latest/src/main/java/com/example/docs/item/FabricDocsReferenceItems.java)
-
-You will need to register your item group to the `ITEM_GROUP` registry for it to show up in-game.
-
-@[code transcludeWith=:::3](@/reference/latest/src/main/java/com/example/docs/item/FabricDocsReferenceItems.java)
-
-## Adding Items
-
-To add items to the group, you can use the modify item group event similarly to how you added your items to the vanilla item groups:
+It's surprisingly easy to create an item group. Simply create a new static final field in your items class to store the item group and a registry key for it, you can then use the item group event similarly to how you added your items to the vanilla item groups:
 
 @[code transcludeWith=:::9](@/reference/latest/src/main/java/com/example/docs/item/ModItems.java)
 
+@[code transcludeWith=:::_12](@/reference/latest/src/main/java/com/example/docs/item/ModItems.java)
+
 <hr />
 
 You should see the item group is now in the creative inventory menu. However, it is untranslated - you must add a translation key to your translations file - similarly to how you translated your first item.

develop/items/custom-item-interactions.md

@@ -67,4 +67,4 @@ As usual, you should register your item, add a model and texture.
 
 As you can see, the lightning bolt should spawn 10 blocks infront of you - the player.
 
-![Lightning bolt striking the ground after player uses item.](/assets/develop/items/interactive_0.webp)
+<VideoPlayer src="/assets/develop/items/custom_items_0.webm" title="Using the Lightning Stick" />

develop/items/food.md

@@ -48,4 +48,4 @@ This makes the item:
 - A "snack".
 - Always give Poison II for 6 seconds when eaten.
 
-![Player eating the food and getting the aforementioned effects.](/assets/develop/items/food_0.webp)
+<VideoPlayer src="/assets/develop/items/food_0.webm" title="Eating the Suspicious Substance" />