Item pages (#116)

.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",
@@ -156,6 +180,10 @@ export default [
       {
         text: "develop.misc.events",
         link: "/develop/events"
+      },
+      {
+        text: "develop.misc.text-and-translations",
+        link: "/develop/text-and-translations"
       }
     ]
   }

.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,45 @@
 import DefaultTheme from 'vitepress/theme'
-import { h } from 'vue'
+import { Theme, useRoute } from 'vitepress';
+import { h, nextTick, onMounted, watch } from 'vue'
+
+import mediumZoom from 'medium-zoom';
 
 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, {
       'aside-outline-after': () => h(PageAuthorComponent),
       'layout-top': () => h(BannerComponent)
     })
-  }
-};
+  },
+  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

@@ -76,6 +76,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

@@ -47,16 +47,14 @@ The status effect icon is a 18x18 PNG. Place your custom icon in:
 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
 
 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"
 }

develop/items/custom-armor.md

@@ -0,0 +1,166 @@
+---
+title: Custom Armor
+description: Learn how to create your own armor sets.
+authors:
+  - IMB11
+---
+
+# Custom Armor
+
+Armor provides the player with increased defense against attacks from mobs and other players.
+
+## Creating an Armor Material
+
+::: info
+If you plan to make multiple armor materials, consider using an `Enum` to store them. Vanilla does this in the `ArmorMaterials` class, which stores all the armor materials that are used in the game.
+
+This class can also be used to determine your armor material's properties in relation to vanilla armor materials.
+:::
+
+All armor items - like tools - have an armor material.
+
+The armor material tells the game what protection and durability the armor item should have depending on the slot.
+
+You'll need to create a class that inherits `ArmorMaterial`, like so:
+
+@[code transcludeWith=:::1](@/reference/latest/src/main/java/com/example/docs/item/armor/GuiditeArmorMaterial.java)
+
+The following methods will have to be implemented as well - these methods tell the game vital information on your armor items:
+
+- ### Durability - `getDurability(ArmorItem.Type type)`
+
+  Returns the durability for a specific armor type - in hit points.
+
+  The hit points specify the amount of hits the armor item can take before breaking.
+
+  **Example**
+
+  @[code transcludeWith=:::2](@/reference/latest/src/main/java/com/example/docs/item/armor/GuiditeArmorMaterial.java)
+
+- #### Protection - `getProtection(ArmorItem.Type type)`
+
+  Returns the protection value for a specific armor type.
+
+  Usually this is always the same, regardless of your armor material.
+
+  **Example**
+
+  @[code transcludeWith=:::3](@/reference/latest/src/main/java/com/example/docs/item/armor/GuiditeArmorMaterial.java)
+
+- #### Enchantability - `getEnchantability()`
+
+  How easy is it to get better and higher level enchantments with this item?
+
+  **Example**
+
+  @[code transcludeWith=:::4](@/reference/latest/src/main/java/com/example/docs/item/armor/GuiditeArmorMaterial.java)
+
+- #### Equip Sound - `getEquipsound()`
+
+  What sound should be played when the armor is equipped?
+
+  **Example**
+
+  @[code transcludeWith=:::5](@/reference/latest/src/main/java/com/example/docs/item/armor/GuiditeArmorMaterial.java)
+
+- #### Repair Ingredient - `getRepairIngredient()`
+
+  What item or items can be used in an anvil to repair the armor items?
+
+  **Example**
+
+  @[code transcludeWith=:::6](@/reference/latest/src/main/java/com/example/docs/item/armor/GuiditeArmorMaterial.java)
+
+- #### Name - `getName()`
+
+  The name of the armor material - must be lowercase.
+
+  **Example**
+
+  @[code transcludeWith=:::7](@/reference/latest/src/main/java/com/example/docs/item/armor/GuiditeArmorMaterial.java)
+
+- #### Toughness - `getToughness()`
+
+  How much protection should be given for high-damage attacks?
+
+  For reference, everything except diamond (`2.0F`) and netherite (`4.0F`) have a toughness of zero.
+
+  **Example**
+
+  @[code transcludeWith=:::8](@/reference/latest/src/main/java/com/example/docs/item/armor/GuiditeArmorMaterial.java)
+
+- #### Knockback Resistance - `getKnockbackResistance()`
+
+  How much knockback resistance should the armor give the entity?
+
+  **Example**
+
+  @[code transcludeWith=:::9](@/reference/latest/src/main/java/com/example/docs/item/armor/GuiditeArmorMaterial.java)
+
+## Creating an Instance of the ArmorMaterial
+
+To use the armor material with the armor items, you'll need to create an instance of it - similar to a tool material:
+
+@[code transcludeWith=:::_10](@/reference/latest/src/main/java/com/example/docs/item/armor/GuiditeArmorMaterial.java)
+
+You can place this instance in the armor material class itself.
+
+## Creating the Armor Items
+
+Now that you've created an instance of the material, you can create the armor items in your `ModItems` class:
+
+Obviously, an armor set doesn't need every type to be satisfied, you can have a set with just boots, or leggings etc. - the vanilla turtle shell helmet is a good example of an armor set with missing slots.
+
+@[code transcludeWith=:::6](@/reference/latest/src/main/java/com/example/docs/item/ModItems.java)
+
+You will also need to **add the items to an item group** if you want them to be accessible from the creative inventory.
+
+As with all items, you should create translation keys for them as well.
+
+## Texturing and Modelling
+
+You will need to create two sets of textures:
+
+- Textures and models for the items themselves.
+- The actual armor texture that is visible when an entity wears the armor.
+
+### Item Textures and Model
+
+These textures are no different to other items - you must create the textures, and create a generic generated item model - which was covered in the [Creating Your First Item](./first-item.md#adding-a-texture-and-model) guide.
+
+For example purposes, you may use the following textures and model JSON as a reference.
+
+<DownloadEntry type="Item Textures" visualURL="/assets/develop/items/armor_0.png" downloadURL="/assets/develop/items/example_armor_item_textures.zip" />
+
+::: info
+You will need model JSON files for all the items, not just the helmet, it's the same principle as other item models.
+:::
+
+@[code](@/reference/latest/src/main/resources/assets/fabric-docs-reference/models/item/guidite_helmet.json)
+
+As you can see, in-game the armor items should have suitable models:
+
+![Armor item models](/assets/develop/items/armor_1.png)
+
+## Armor Textures and Model
+
+When an entity wears your armor, currently the missing texture will appear:
+
+![Broken armor model on player.](/assets/develop/items/armor_2.png)
+
+This is because all armor textures are hardcoded by vanilla, to create our own, we'll have to place the texture in the vanilla armor texture folder.
+
+There are two layers for the armor texture, both must be present.
+
+Since the armor material name in our case is `guidite`, the locations of the textures will be:
+
+- `assets/minecraft/textures/models/armor/guidite_layer_1.png`
+- `assets/minecraft/textures/models/armor/guidite_layer_2.png`
+
+<DownloadEntry type="Armor Model Textures" noVisualURL="true" downloadURL="/assets/develop/items/example_armor_layer_textures.zip" />
+
+The first layer contains textures for the helmet and chestplate, whilst the second layer contains textures for leggings and boots.
+
+When these textures are present, you should be able to see your armor on entities that wear it:
+
+![Working armor model on player.](/assets/develop/items/armor_3.png)