Start component work

.vitepress/theme/style.css

@@ -43,6 +43,12 @@
  *   in custom container, badges, etc.
  * -------------------------------------------------------------------------- */
 
+@font-face {
+  font-family: Minecraft;
+  src: url("https://minecraft.wiki/images/Minecraft.woff2") format("woff2"),
+    url("https://minecraft.wiki/images/Minecraft.woff") format("woff");
+}
+
 :root {
   --vp-c-default-1: var(--vp-c-gray-1);
   --vp-c-default-2: var(--vp-c-gray-2);

src/components/Infobox.vue

@@ -0,0 +1,48 @@
+<template>
+  <article>
+    <h2>{{ name }}</h2>
+    <TabbedImages :images />
+    <Miniatures :images />
+    <InfoTable :info />
+  </article>
+</template>
+
+<script setup lang="ts">
+import TabbedImages from "./TabbedImages.vue";
+import Miniatures from "./Miniatures.vue";
+import InfoTable from "./info-table/InfoTable.vue";
+import { ItemData, Image } from "./types";
+
+interface Props {
+  name: string;
+  images: Image[];
+  info: ItemData;
+}
+
+defineProps<Props>();
+</script>
+
+<style scoped>
+article {
+  padding: 0.5rem;
+  width: 300px;
+  background-color: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-border);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 8px;
+}
+
+h2 {
+  margin: 0;
+  padding: 0;
+  border: none;
+
+  width: 100%;
+  text-align: center;
+  padding: 0.5rem;
+  border-radius: 4px;
+  background-color: var(--vp-c-default-soft);
+}
+</style>

src/components/InventorySlot.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="item">
+      <img
+        @mouseover="visibility = true"
+        @mouseleave="visibility = false"
+        :src="image.srcUrl"
+        :alt="image.displayName"
+        width="32"
+        height="32"
+      />
+      <span
+        :style="{
+          left: `calc(${x}px + 1rem)`,
+          top: `calc(${y}px - 1.5rem)`,
+          display: visibility ? 'block' : 'none',
+        }"
+      >
+        {{ image.displayName }}
+      </span>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { useMouse } from "../composables/useMouse";
+
+export interface Image {
+  displayName: string;
+  srcUrl: string;
+}
+
+defineProps<{ image: Image }>();
+const visibility = ref(false);
+const { x, y } = useMouse();
+</script>
+
+<style scoped>
+span {
+  margin: 0;
+  display: block;
+  position: fixed;
+}
+
+span {
+  opacity: 1;
+  color: #fbfbfb;
+  text-shadow: 0.125em 0.125em 0 #3e3e3e;
+  background-color: rgba(16, 0, 16, 0.94);
+  padding: 0.375em;
+  font-family: Minecraft, sans-serif;
+  font-size: 16px;
+  word-spacing: 4px;
+  white-space: nowrap;
+  line-height: 1.25em;
+}
+
+span::before {
+  content: "";
+  position: absolute;
+  top: 0.125em;
+  right: -0.125em;
+  bottom: 0.125em;
+  left: -0.125em;
+  border: 0.15em solid #100010;
+  border-style: none solid;
+  border-color: rgba(16, 0, 16, 0.94);
+}
+
+span::after {
+  content: "";
+  position: absolute;
+  top: 0.125em;
+  right: 0;
+  bottom: 0.125em;
+  left: 0;
+  border: 0.125em solid #2d0a63;
+  border-image: -webkit-linear-gradient(
+      rgba(80, 0, 255, 0.31),
+      rgba(40, 0, 127, 0.31)
+    )
+    1;
+  border-image: linear-gradient(rgba(80, 0, 255, 0.31), rgba(40, 0, 127, 0.31))
+    1;
+}
+
+img {
+  background-color: #8b8b8b;
+  border: 2px solid;
+  border-color: #373737 #fff #fff #373737;
+  image-rendering: pixelated;
+}
+</style>

src/components/Miniatures.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="miniatures">
+    <InventorySlot v-for="img in images" :image="img" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import InventorySlot from "./InventorySlot.vue";
+
+export interface Image {
+  displayName: string;
+  srcUrl: string;
+}
+
+defineProps<{ images: Image[] }>();
+</script>
+
+<style scoped>
+div.miniatures {
+  display: flex;
+}
+</style>

src/components/TabbedImages.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <nav v-if="images.length > 1">
+      <button
+        v-for="variant in images"
+        :class="{ active: active.variantName === variant.variantName }"
+        type="button"
+        @click="active = variant"
+      >
+        {{ variant.variantName }}
+      </button>
+    </nav>
+    <img
+      :src="active.srcUrl"
+      :alt="active.variantName"
+      width="128"
+      height="128"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+export interface TabbedImage {
+  variantName: string;
+  srcUrl: string;
+}
+
+const props = defineProps<{ images: TabbedImage[] }>();
+const active = ref<TabbedImage>(props.images[0]);
+</script>
+
+<style scoped>
+div {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+nav {
+  width: 100%;
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
+  justify-content: center;
+}
+
+button {
+  padding: 0 0.5rem;
+  border-bottom: 3px solid var(--vp-c-border);
+}
+
+button.active {
+  font-weight: 900;
+  border-bottom-color: var(--vp-c-brand-1);
+}
+</style>

src/components/helpers.ts

@@ -0,0 +1,40 @@
+import { ItemData, Entry, TableData, ItemDataTableRowName } from "./types";
+
+const itemDataDisplayNames: Record<keyof ItemData, string> = {
+  renewable: "[Renewable](https://minecraft.wiki/w/Renewable_resource)",
+  stackable: "Stackable",
+  tools: "Tool",
+  blastResistance:
+    "[Blast Resistance](https://minecraft.wiki/w/Explosion#Blast_resistance)",
+  hardness: "[Hardness](https://minecraft.wiki/w/Breaking#Blocks_by_hardness)",
+  isSolid: "[Solid Block](https://minecraft.wiki/w/Solid_block)",
+  isFull: "Full Block",
+  isTransparent: "[Transparent](https://minecraft.wiki/w/Opacity)",
+  isLuminous: "[Luminous](https://minecraft.wiki/w/Light)",
+  isFlammable: "[Flammable](https://minecraft.wiki/w/Flammable)",
+  isLavaFlammable: "Catches fire from lava",
+};
+
+export const typedEntries = <T>(obj: T) => Object.entries(obj) as Entry<T>[];
+export const itemImage = (item: string) => `/assets/items/webp/${item}.webp`;
+
+// TODO this should be refactored to provide autocomplete, which inevitably involves a huge file somewhere.
+// As a tradeoff, it will be MUCH easier to refer to items in the future, anywhere in the wiki
+
+// TODO this should also return more than just an image. Probably be renamed to item() and return more info.
+
+export const getDataDisplayName = (k: keyof ItemData): ItemDataTableRowName => {
+  const LINK_RE = /\[(.+)\]\((.+)\)/;
+  const text = itemDataDisplayNames[k];
+  if (LINK_RE.test(text)) {
+    const matches = text.match(LINK_RE);
+    return { isLink: true, text: matches[1], href: matches[2] };
+  } else {
+    return { isLink: false, text };
+  }
+};
+
+export const formatTableData = (itemData: ItemData) =>
+  typedEntries(itemData).map(
+    ([k, v]) => [getDataDisplayName(k), [k, v]] as TableData
+  );

src/components/index.md

@@ -0,0 +1,38 @@
+# Component showcase
+
+## Infobox
+
+<Infobox name="Cogwheel" :images :info />
+
+<script setup lang="ts">
+import { itemImage } from "./helpers";
+import Infobox from "./Infobox.vue";
+import { ItemData } from "./types";
+
+const images = [
+  {
+    displayName: "Small Cogwheel",
+    variantName: "Small",
+    srcUrl: itemImage('cogwheel')
+  },
+  {
+    displayName: "Large Cogwheel",
+    variantName: "Large",
+    srcUrl: itemImage('large_cogwheel')
+  },
+]
+
+const info: ItemData = {
+  renewable: true,
+  stackable: [true, 64],
+  tools: [{type: 'pickaxe', quality: 'wooden'}, {type: 'axe', quality: 'wooden'}],
+  blastResistance: 6,
+  hardness: 1.5,
+  isSolid: false,
+  isFull: false,
+  isTransparent: true,
+  isLuminous: false,
+  isFlammable: false,
+  isLavaFlammable: false,
+}
+</script>

src/components/info-table/InfoTable.vue

@@ -0,0 +1,32 @@
+<template>
+  <table>
+    <tbody>
+      <tr v-for="[k, v] in tableData">
+        <TableRowName :name="k" />
+        <TableRowValue :value="v" />
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { ItemData } from "../types";
+import { formatTableData } from "../helpers";
+import TableRowName from "./TableRowName.vue";
+import TableRowValue from "./TableRowValue.vue";
+
+interface Props {
+  info: ItemData;
+}
+
+const props = defineProps<Props>();
+const tableData = computed(() => formatTableData(props.info));
+</script>
+
+<style scoped>
+table {
+  width: 100%;
+  display: table;
+}
+</style>

src/components/info-table/TableRowName.vue

@@ -0,0 +1,18 @@
+<template>
+  <td v-if="name.isLink">
+    <a :href="name.href" target="_blank">{{ name.text }}</a>
+  </td>
+  <td v-else>{{ name.text }}</td>
+</template>
+
+<script setup lang="ts">
+import { ItemDataTableRowName } from "../types";
+
+interface Props {
+  name: ItemDataTableRowName;
+}
+
+defineProps<Props>();
+</script>
+
+<style scoped></style>