feat(web): hover tooltips for identifiers

Author: lineargraph

web/.vitepress/config.mts

@@ -4,6 +4,12 @@ import { defineConfig } from 'vitepress'
 export default defineConfig({
   title: "Firmament",
   description: "Reaching for the sky on HyPixel SkyBlock",
+  cleanUrls: true,
+  markdown: {
+    config: (md) => {
+//      md.use(minecraftHoverPlugin)
+    }
+  },
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
     nav: [

web/.vitepress/theme/index.ts

@@ -0,0 +1,29 @@
+import DefaultTheme from 'vitepress/theme'
+import './minecraft-hover.css'
+import type { Theme } from 'vitepress/client';
+import tippy from 'tippy.js';
+import { onMounted } from 'vue'
+const theme: Theme = {
+	extends: DefaultTheme,
+	setup() {
+		onMounted(() => {
+			document.querySelectorAll("code[fqfi]").forEach(entry => {
+				const [ns, path] = parseIdent(entry.textContent)
+				tippy(entry, {
+					content: `This is a fully-qualified file identifier. You would edit the file <code>assets/${ns}/${path}</code>.`,
+					allowHTML: true,
+					theme: 'translucent'
+				})
+			})
+		})
+	},
+}
+function parseIdent(str: string): [string, string] {
+	const parts = str.split(":")
+	if (parts.length == 1)
+		return ["minecraft", parts[0]]
+	if (parts.length == 2)
+		return [parts[0], parts[1]]
+	throw `${str} is not a valid identifier`
+}
+export default theme;

web/.vitepress/theme/minecraft-hover.css

@@ -0,0 +1,19 @@
+@import 'tippy.js/dist/tippy.css';
+@import 'tippy.js/themes/translucent.css';
+
+:root {
+	--firm-ident-color: rgb(24, 121, 78);
+}
+.dark{
+	--firm-ident-color: #b3f6c0;
+}
+code[fqfi], code[ident] {
+	--vp-code-color: var(--firm-ident-color);
+}
+code[fqfi]::after {
+  content: "📄";
+  margin-left: 0.25em;
+  font-size: 0.85em;
+  opacity: 0.7;
+}
+

web/developers/texture-packs.md

@@ -1,6 +1,26 @@
 
 # Custom SkyBlock Items Texture Pack Format
 
+Firmament generally tries to emulate the vanilla structure of resourcepacks whenever possible. Because of that it is extremely helpful to know the general structure of vanilla resource packs. The [minecraft wiki](https://minecraft.wiki/w/Resource_pack) is a good starting place to learn, but some basic terms will be explained here as well.
+
+## Identifiers
+
+Identifiers (also sometimes called resource locations) are a special notation for referring to namespaced files. A basic identifier looks like so: `firmskyblock:models/item/aspect_of_the_end.json`{ident}. Here `firmskyblock` (everything before the colon) is called the namespace and `models/item/aspect_of_the_end.json` (everything after the colon) is called the path. What an identifier means depends on the context in which it is used.
+
+In this document identifiers are coloured green like so: `minecraft:carrot`{ident} (this would be namespace `minecraft`, path `carrot`).
+
+If an identifier does not specify a namespace it defaults to `minecraft`, so `carrot`{ident} would be equivalent to `minecraft:carrot`{ident}.
+
+### Fully-qualified file identifiers
+
+Sooner or later when referring to a resource, it will be resolved to a file. The last step (and the essentially canonical form) of an identifier is what i call the fully-qualified file identifier.
+
+It fully represents the filepath of where an identifier resolves to inside of a resource pack.
+
+To resolve an FQFI to a file location inside of your resource pack, simply turn an identifier like `<namespace>:<path>` into `assets/<namespace>/<path>`.
+
+Given an FQFI like `firmskyblock:models/item/aspect_of_the_end.json`{fqfi}, the corresponding file is simply `assets/firmskyblock/models/item/aspect_of_the_end.json`.
+
 ## Items by internal id (ExtraAttributes)
 
 Find the internal id of the item. This is usually stored in the ExtraAttributes tag (Check the Power User Config for 

web/developers/texture-packs/items.md

@@ -0,0 +1,9 @@
+# Editing item models
+
+Firmament allows you to replace the models of items in a couple of ways.
+
+## By SkyBlock ID
+
+Firmament allows you to remodel 
+
+

web/package.json

@@ -7,5 +7,9 @@
     "build": "vitepress build",
     "preview": "vitepress preview"
   },
-  "packageManager": "[email protected]+sha512.fce8a3dd29a4ed2ec566fb53efbb04d8c44a0f05bc6f24a73046910fb9c3ce7afa35a0980500668fa3573345bd644644fa98338fa168235c80f4aa17aa17fbef"
+  "packageManager": "[email protected]+sha512.fce8a3dd29a4ed2ec566fb53efbb04d8c44a0f05bc6f24a73046910fb9c3ce7afa35a0980500668fa3573345bd644644fa98338fa168235c80f4aa17aa17fbef",
+  "dependencies": {
+    "tippy.js": "^6.3.7",
+    "vue": "^3.5.25"
+  }
 }