feat(web): more popover features

Author: lineargraph

web/.vitepress/theme/index.ts

@@ -2,21 +2,39 @@ import DefaultTheme from 'vitepress/theme'
 import './minecraft-hover.css'
 import type { Theme } from 'vitepress/client';
 import tippy from 'tippy.js';
-import { onMounted } from 'vue'
+import { useData, useRoute } from 'vitepress/client';
+import { onMounted, nextTick, watch } 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'
-				})
+		onMounted(inject)
+		const route = useRoute();
+		const { page } = useData();
+		const lazyInject = () => nextTick().then(inject)
+		watch(() => route.path, lazyInject)
+		watch(() => page.value, lazyInject)
+	},
+}
+
+const attrs: Array<[string, (ns: string, path: string, attr: string | null) => string,]> = [
+	["fqfi", (ns, path) => `This is a fully-qualified file identifier. You would edit the file <code>assets/${ns}/${path}</code>.`],
+	["model", (ns, path, attr) => `This is a${orEmpty(attr)} model identifier. You would edit the file <code>assets/${ns}/models${orEmpty(attr, "/")}/${path}.json</code>.`],
+]
+const orEmpty = (str: string | null | undefined, seperator: string = " ") => str ? seperator + str : ""
+
+function inject() {
+	for (const [attr, appl] of attrs) {
+		document.querySelectorAll(`code[${attr}]`).forEach(entry => {
+			const [ns, path] = parseIdent(entry.textContent)
+			const attrValue = entry.getAttribute(attr)
+			tippy(entry, {
+				content: appl(ns, path, attrValue),
+				allowHTML: true,
+				theme: 'translucent'
 			})
 		})
-	},
+	}
 }
 function parseIdent(str: string): [string, string] {
 	const parts = str.split(":")
@@ -26,4 +44,4 @@ function parseIdent(str: string): [string, string] {
 		return [parts[0], parts[1]]
 	throw `${str} is not a valid identifier`
 }
-export default theme;
+export default theme;

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

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

web/developers/texture-packs.md

@@ -26,7 +26,7 @@ Given an FQFI like `firmskyblock:models/item/aspect_of_the_end.json`{fqfi}, the
 Find the internal id of the item. This is usually stored in the ExtraAttributes tag (Check the Power User Config for 
 keybinds). Once you found it, create an item model in a resource pack like you would for
 a vanilla item model, but at the coordinate `firmskyblock:<internalid>`. So for an aspect of the end, this would be 
-`firmskyblock:models/item/aspect_of_the_end.json` (or `assets/firmskyblock/models/item/aspect_of_the_end.json`). Then,
+`firmskyblock:aspect_of_the_end`{model=item}. Then,
 just use a normal minecraft item model. See https://github.com/nea89o/BadSkyblockTP/blob/master/assets/firmskyblock/models/item/magma_rod.json
 as an example. The id is first turned to lower case, then gets `:` replaced with `___`, `;` with `__` and all other 
 characters that cannot be used in a minecraft resource location with `__XXXX` where `XXXX` is the 4 digit hex code for