Merge branch 'main' into notfound

.vitepress/sidebars/develop.ts

@@ -53,6 +53,30 @@ export default [
     text: "develop.items",
     collapsed: true,
     items: [
+      {
+        text: "develop.items.first-item",
+        link: "/develop/items/first-item"
+      },
+      {
+        text: "develop.items.food",
+        link: "/develop/items/food"
+      },
+      {
+        text: "develop.items.custom-tools",
+        link: "/develop/items/custom-tools"
+      },
+      {
+        text: "develop.items.custom-armor",
+        link: "/develop/items/custom-armor"
+      },
+      {
+        text: "develop.items.custom-item-groups",
+        link: "/develop/items/custom-item-groups"
+      },
+      {
+        text: "develop.items.custom-item-interactions",
+        link: "/develop/items/custom-item-interactions"
+      },
       {
         text: "develop.items.potions",
         link: "/develop/items/potions",
@@ -155,8 +179,12 @@ export default [
       },
       {
         text: "develop.misc.events",
-        link: "/develop/events",
+        link: "/develop/events"
       },
-    ],
-  },
-] as Fabric.SidebarItem[];
+      {
+        text: "develop.misc.text-and-translations",
+        link: "/develop/text-and-translations"
+      }
+    ]
+  }
+] as ExtendedSidebarItem[];

.vitepress/theme/components/ColorSwatch.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="color-swatch" :style="`background-color: ${color}`" />
+</template>
+
+<script setup>
+const { color } = defineProps({
+  color: String,
+});
+</script>
+
+<style scoped>
+.color-swatch {
+  width: 100%;
+  padding: 50%;
+  margin: auto;
+  border-radius: 0.25rem;
+  border-color: grey;
+  border-width: 1px;
+}
+</style>

.vitepress/theme/components/DownloadEntry.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="container">
+    <img v-if="!$props.noVisualURL" :src="$props.visualURL ?? $props.downloadURL" style="max-width: 100%; max-height: 300px;">
+    <VPButton 
+      tag="a" 
+      size="medium" 
+      theme="brand" 
+      :text="`Download ${$props.type}`" 
+      :href="$props.downloadURL"
+      download
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { VPButton } from "vitepress/theme"
+
+// downloadURL prop, visualURL prop (optional), if no visualURL, use downloadURL
+const props = defineProps<{
+  downloadURL: string;
+  visualURL?: string;
+  noVisualURL?: boolean;
+  type: string;
+}>();
+</script>
+
+<style scoped>
+div.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 8px;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:hover {
+  cursor: pointer;
+}
+
+img {
+  /* Disable interactions, prevent right click save. */
+  pointer-events: none;
+
+  z-index: 0;
+}
+</style>

.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

@@ -1,18 +1,33 @@
 import { useData } from "vitepress";
 import DefaultTheme from "vitepress/theme";
-import { h } from "vue";
+import { h, nextTick, onMounted, watch } from "vue";
+import { Theme, useRoute } from 'vitepress';
+
+import mediumZoom from 'medium-zoom';
 
 import BannerComponent from "./components/BannerComponent.vue";
 import NotFoundComponent from "./components/NotFoundComponent.vue";
 import AuthorsComponent from "./components/AuthorsComponent.vue";
+import PageAuthorComponent from './components/PageAuthorComponent.vue';
+import DownloadEntry from './components/DownloadEntry.vue';
+import ColorSwatch from './components/ColorSwatch.vue';
+import VideoPlayer from './components/VideoPlayer.vue';
 
 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() {
     const children = {
-      "aside-outline-after": () => h(AuthorsComponent),
+      "aside-outline-after": () => h(PageAuthorComponent),
       "layout-top": () => h(BannerComponent),
     };
 
@@ -22,4 +37,17 @@ export default {
 
     return h(DefaultTheme.Layout, null, children);
   },
-};
+  setup() {
+    const route = useRoute();
+    const initZoom = () => {
+      mediumZoom('.main img', { background: 'var(--vp-c-bg)' });
+    };
+    onMounted(() => {
+      initZoom();
+    });
+    watch(
+      () => route.path,
+      () => nextTick(() => initZoom())
+    );
+  },
+} satisfies Theme;

.vitepress/theme/style.css

@@ -81,6 +81,14 @@
   transform-origin: top center;
 }
 
+.medium-zoom-overlay {
+  z-index: 10000;
+}
+
+.medium-zoom-image {
+  z-index: 10001;
+}
+
 @keyframes show {
   100% {
     opacity: 1;

develop/entities/effects.md

@@ -44,16 +44,14 @@ The status effect icon is a 18x18 PNG which will appear in the player's inventor
 resources/assets/fabric-docs-reference/textures/mob_effect/tater.png
 ```
 
-![Effect in player inventory](/assets/develop/tater-effect.png)
+<DownloadEntry type="Example Texture" visualURL="/assets/develop/tater-effect.png" downloadURL="/assets/develop/tater-effect-icon.png" />
 
 ### Translations {#translations}
 
 Like any other translation, you can add an entry with ID format `"effect.<mod-id>.<effect-identifier>": "Value"` to the
 language file.
 
-::: code-group
-
-```json[assets/fabric-docs-reference/lang/en_us.json]
+```json
 {
   "effect.fabric-docs-reference.tater": "Tater"
 }