Skip to content

Commit 12751d1

Browse files
committed
feat(web): more popover features
1 parent 26e27eb commit 12751d1

File tree

3 files changed

+49
-20
lines changed

3 files changed

+49
-20
lines changed

web/.vitepress/theme/index.ts

Lines changed: 29 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,39 @@ import DefaultTheme from 'vitepress/theme'
22
import './minecraft-hover.css'
33
import type { Theme } from 'vitepress/client';
44
import tippy from 'tippy.js';
5-
import { onMounted } from 'vue'
5+
import { useData, useRoute } from 'vitepress/client';
6+
import { onMounted, nextTick, watch } from 'vue'
7+
68
const theme: Theme = {
79
extends: DefaultTheme,
810
setup() {
9-
onMounted(() => {
10-
document.querySelectorAll("code[fqfi]").forEach(entry => {
11-
const [ns, path] = parseIdent(entry.textContent)
12-
tippy(entry, {
13-
content: `This is a fully-qualified file identifier. You would edit the file <code>assets/${ns}/${path}</code>.`,
14-
allowHTML: true,
15-
theme: 'translucent'
16-
})
11+
onMounted(inject)
12+
const route = useRoute();
13+
const { page } = useData();
14+
const lazyInject = () => nextTick().then(inject)
15+
watch(() => route.path, lazyInject)
16+
watch(() => page.value, lazyInject)
17+
},
18+
}
19+
20+
const attrs: Array<[string, (ns: string, path: string, attr: string | null) => string,]> = [
21+
["fqfi", (ns, path) => `This is a fully-qualified file identifier. You would edit the file <code>assets/${ns}/${path}</code>.`],
22+
["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>.`],
23+
]
24+
const orEmpty = (str: string | null | undefined, seperator: string = " ") => str ? seperator + str : ""
25+
26+
function inject() {
27+
for (const [attr, appl] of attrs) {
28+
document.querySelectorAll(`code[${attr}]`).forEach(entry => {
29+
const [ns, path] = parseIdent(entry.textContent)
30+
const attrValue = entry.getAttribute(attr)
31+
tippy(entry, {
32+
content: appl(ns, path, attrValue),
33+
allowHTML: true,
34+
theme: 'translucent'
1735
})
1836
})
19-
},
37+
}
2038
}
2139
function parseIdent(str: string): [string, string] {
2240
const parts = str.split(":")
@@ -26,4 +44,4 @@ function parseIdent(str: string): [string, string] {
2644
return [parts[0], parts[1]]
2745
throw `${str} is not a valid identifier`
2846
}
29-
export default theme;
47+
export default theme;

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

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,29 @@
22
@import 'tippy.js/themes/translucent.css';
33

44
:root {
5-
--firm-ident-color: rgb(24, 121, 78);
5+
--firm-ident-color: rgb(24, 121, 78);
66
}
7-
.dark{
8-
--firm-ident-color: #b3f6c0;
7+
8+
.dark {
9+
--firm-ident-color: #b3f6c0;
910
}
10-
code[fqfi], code[ident] {
11-
--vp-code-color: var(--firm-ident-color);
11+
12+
code[fqfi],
13+
code[ident],
14+
code[model] {
15+
--vp-code-color: var(--firm-ident-color);
16+
17+
&::after {
18+
margin-left: 0.25em;
19+
font-size: 0.85em;
20+
opacity: 0.7;
21+
}
1222
}
23+
1324
code[fqfi]::after {
1425
content: "📄";
15-
margin-left: 0.25em;
16-
font-size: 0.85em;
17-
opacity: 0.7;
1826
}
1927

28+
code[model]::after {
29+
content: "📐";
30+
}

web/developers/texture-packs.md

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

0 commit comments

Comments
 (0)