Skip to content

Commit 61988b2

Browse files
author
Stella
committed
feat(Wiki): added a replacer for placeholders
Allow authors to use @wiki:: to replace an item For example: @wiki::slug -> example-page
1 parent a6fcd3c commit 61988b2

File tree

4 files changed

+183
-37
lines changed

4 files changed

+183
-37
lines changed

‎public/static/js/replacer.js

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
function getAllTextNodes(node) {
2+
var allTextNodes = [];
3+
4+
function getTextNodes(node) {
5+
if (node.nodeType == 3) {
6+
allTextNodes.push(node);
7+
} else if (node.nodeName !== "SCRIPT" && node.nodeName !== "STYLE") {
8+
for (var i = 0; i < node.childNodes.length; i++) {
9+
getTextNodes(node.childNodes[i]);
10+
}
11+
}
12+
}
13+
14+
getTextNodes(node);
15+
return allTextNodes;
16+
}
17+
18+
function Replace() {
19+
const infoElement = document.querySelector("#vt-info");
20+
const info = JSON.parse(infoElement.innerHTML);
21+
22+
const replacers = {
23+
"@wiki::slug": info.slug,
24+
"@wiki::author": info.author,
25+
};
26+
27+
var textNodes = getAllTextNodes(document.body);
28+
29+
textNodes.forEach(function (node) {
30+
Object.keys(replacers).forEach(function (key) {
31+
const regex = new RegExp("\\" + key, "g");
32+
if (regex.test(node.nodeValue)) {
33+
node.nodeValue = node.nodeValue.replace(regex, replacers[key]);
34+
}
35+
});
36+
});
37+
38+
const videos = document.querySelectorAll("video");
39+
videos.forEach(function (video) {
40+
const sources = video.querySelectorAll("source");
41+
sources.forEach(function (source) {
42+
Object.keys(replacers).forEach(function (key) {
43+
const attrValue = source.getAttribute("src");
44+
if (attrValue && attrValue.includes(key)) {
45+
const newSrc = attrValue.replace(
46+
new RegExp("\\" + key, "g"),
47+
replacers[key]
48+
);
49+
source.setAttribute("src", newSrc);
50+
video.load();
51+
}
52+
53+
});
54+
});
55+
});
56+
57+
const images = document.querySelectorAll("img");
58+
images.forEach(function (image) {
59+
Object.keys(replacers).forEach(function (key) {
60+
const attrValue = image.getAttribute("src");
61+
if (attrValue && attrValue.includes(key)) {
62+
const newSrc = attrValue.replace(
63+
new RegExp("\\" + key, "g"),
64+
replacers[key]
65+
);
66+
67+
image.onload = function () {
68+
this.onload = null;
69+
};
70+
image.setAttribute("src", newSrc);
71+
}
72+
});
73+
});
74+
}
75+
76+
window.addEventListener("DOMContentLoaded", async (e) => {
77+
await Replace();
78+
});

‎src/content/vtubers/aisika-wachanaroj.md

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,27 +23,29 @@ However, a group of researchers, being sent by the X.A.L.T.Z. agency, sent her a
2323

2424
## Videos
2525

26+
27+
2628
### Debut
2729

2830
<video controls width="560" height="315">
29-
<source src="/static/vtubers/aisha/media/videos/debut.mp4" type="video/mp4" />
31+
<source src="/static/vtubers/@wiki::slug/media/videos/debut.mp4" type="video/mp4" />
3032
</video>
3133

3234
### Self Introduction
3335

3436
<video controls width="560" height="315">
35-
<source src="/static/vtubers/aisha/media/videos/intro.mp4" type="video/mp4" />
37+
<source src="/static/vtubers/@wiki::slug/media/videos/intro.mp4" type="video/mp4" />
3638
</video>
3739

3840
## Images
3941

4042
### Live2D
4143

42-
<img src="/static/vtubers/aisha/media/images/live2d.webp" type="image/webp" />
44+
<img src="/static/vtubers/@wiki::slug/media/images/live2d.webp" type="image/webp" />
4345

4446
### 3D
4547

46-
<img src="/static/vtubers/aisha/media/images/3d.webp" type="image/webp" style="border-radius: 50px;" />
48+
<img src="/static/vtubers/@wiki::slug/media/images/3d.webp" type="image/webp" style="border-radius: 50px;" />
4749

4850
## Appearance
4951

‎src/pages/wiki/agencies/[...slug].astro

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,20 +17,27 @@ const { entry } = Astro.props;
1717
const { data } = entry;
1818
1919
const { Content } = await entry.render();
20+
21+
const htData = {
22+
...data,
23+
slug: entry.slug,
24+
};
2025
---
2126

2227
<Layout title={`Agency • ${data.name}`} description={data.description} favicon={`/agencies/${entry.slug}/logo.png`}>
2328
<div class="vw-section">
2429
<div class="vw-container">
2530
<div class="vw-grid-large" data-vw-grid>
26-
31+
<div id="vt-info" style="display: none;">
32+
{JSON.stringify(htData, null, 2)}
33+
</div>
2734
<div class="vw-width-1-1 vw-width-expand@m">
2835
<article class="vw-article">
2936
<h1 class="vw-article-title">Agency • {data.name}</h1>
3037
<p class="vw-text-lead vw-text-muted">{data.description}</p>
3138
<br />
3239
<div class="article-content link-primary">
33-
{data.is_draft ? <Alert type="warning" message="This page is a draft and is not ready for public viewing. So please note that some data is incomplete." includeCloseButton={false} /> : ""}
40+
{data.is_draft ? <Alert type="warning" message="This page is currently a draft and is not ready for public viewing. Please be aware that certain data may be incomplete at this stage." includeCloseButton={false} /> : ""}
3441
<p>
3542
<img
3643
src={`/static/agencies/${entry.slug}/banner.png`}
@@ -62,6 +69,7 @@ const { Content } = await entry.render();
6269
</div>
6370
</div>
6471
<script src="/static/js/docs.js" is:inline></script>
72+
<script src="/static/js/replacer.js" is:inline></script>
6573
<script is:inline>
6674
var disqus_config = function () {
6775
this.page.url = window.location.href;

‎src/pages/wiki/vtubers/[...slug].astro

Lines changed: 89 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -22,39 +22,95 @@ const { Content } = await entry.render();
2222
const socials = CreateSocials(data);
2323
2424
function MakeProperSeo() {
25-
return `${data.name}, ${data.name} Vtuber, ${data.name} Twitch, ${data.name} Face Reveal, ${data.name} Wiki, ${data.name} Twitter, ${data.name} Onlyfans, ${data.name} Discord, ${data.name}Vt, ${data.name} VT, ${data.name} X`
25+
return `${data.name}, ${data.name} Vtuber, ${data.name} Twitch, ${data.name} Face Reveal, ${data.name} Wiki, ${data.name} Twitter, ${data.name} Onlyfans, ${data.name} Discord, ${data.name}Vt, ${data.name} VT, ${data.name} X`;
2626
}
27+
28+
const htData = {
29+
...data,
30+
slug: entry.slug,
31+
};
2732
---
2833

29-
<Layout title={data.name} favicon={data.image} description={data.description} img={data.image}, CustomSeo={{ keywords: MakeProperSeo() }}>
34+
<Layout
35+
title={data.name}
36+
favicon={data.image}
37+
description={data.description}
38+
img={data.image}
39+
,
40+
CustomSeo={{ keywords: MakeProperSeo() }}
41+
>
3042
<div class="vw-section">
3143
<div class="vw-container">
3244
<div class="vw-grid-large" data-vw-grid>
33-
45+
<div id="vt-info" style="display: none;">
46+
{JSON.stringify(htData, null, 2)}
47+
</div>
48+
3449
<div class="vw-width-1-1 vw-width-expand@m">
3550
<article class="vw-article">
3651
<h1 class="vw-article-title">Vtuber • {data.name}</h1>
37-
<img loading="lazy" id="vtuber-image" src={data.image} alt={`${data.name} main image`} style="display: none;" />
38-
<p class="vw-text-lead vw-text-muted vtuber-desc" id="vtuber-desc">{data.description}
52+
<img
53+
loading="lazy"
54+
id="vtuber-image"
55+
src={data.image}
56+
alt={`${data.name} main image`}
57+
style="display: none;"
58+
/>
59+
<p class="vw-text-lead vw-text-muted vtuber-desc" id="vtuber-desc">
60+
{data.description}
3961
</p>
4062
<br />
41-
{data.graduated ? <span class="badge badge-danger">Graduated</span> <br /> : ""}
42-
<p class="vw-text-lead vw-text-muted" id="vtuber-socials" style="text-align: center;">
63+
{
64+
data.graduated ? (
65+
<>
66+
<span class="badge badge-danger">Graduated</span>
67+
<br />
68+
</>
69+
) : (
70+
""
71+
)
72+
}
73+
<p
74+
class="vw-text-lead vw-text-muted"
75+
id="vtuber-socials"
76+
style="text-align: center;"
77+
>
4378
{
4479
socials.map((social: any) => (
45-
<a href={social.url} target="_blank" rel="noopener" title={social.name}>
46-
<img loading="lazy" src={`/static/icons/${social.icon}.svg`} alt={social.icon} width="34" height="34" style="vertical-align: middle; margin-right: 6px;" title={social.iconUppercase} />
80+
<a
81+
href={social.url}
82+
target="_blank"
83+
rel="noopener"
84+
title={social.name}
85+
>
86+
<img
87+
loading="lazy"
88+
src={`/static/icons/${social.icon}.svg`}
89+
alt={social.icon}
90+
width="34"
91+
height="34"
92+
style="vertical-align: middle; margin-right: 6px;"
93+
title={social.iconUppercase}
94+
/>
4795
</a>
4896
))
4997
}
50-
5198
</p>
5299
<hr />
53100

54-
55101
<div class="article-content link-primary">
56-
{data.is_draft ? <Alert type="warning" message="This page is a draft and is not ready for public viewing. So please note that some data is incomplete." includeCloseButton={false} /> : ""}
57-
<Content />
102+
{
103+
data.is_draft ? (
104+
<Alert
105+
type="warning"
106+
message="This page is currently a draft and is not ready for public viewing. Please be aware that certain data may be incomplete at this stage."
107+
includeCloseButton={false}
108+
/>
109+
) : (
110+
""
111+
)
112+
}
113+
<Content />
58114
</div>
59115
<hr class="vw-margin-medium" />
60116
</article>
@@ -68,31 +124,33 @@ function MakeProperSeo() {
68124
</div>
69125
<br /> -->
70126
<div class="vw-container vw-container-small">
71-
<div data-vw-scrollspy="cls: vw-animation-slide-bottom-medium; repeat: true">
72-
<div id="disqus_thread"></div>
127+
<div
128+
data-vw-scrollspy="cls: vw-animation-slide-bottom-medium; repeat: true"
129+
>
130+
<div id="disqus_thread"></div>
73131
</div>
74132
</div>
75133
</div>
76-
77134
</div>
78135
</div>
79136
</div>
80137
</div>
81138
<script src="/static/js/docs.js" is:inline></script>
82139
<script src="/static/js/@include/@profile/classes.js" is:inline></script>
83-
<script src="/static/js/@include/CheckD.js" is:inline></script>
84-
<script is:inline>
85-
var disqus_config = function () {
86-
this.page.url = window.location.href;
87-
this.page.identifier = window.location.pathname;
88-
};
89-
(function () {
90-
// DON'T EDIT BELOW THIS LINE
91-
var d = document,
92-
s = d.createElement("script");
93-
s.src = "https://vtuberwiki.disqus.com/embed.js";
94-
s.setAttribute("data-timestamp", +new Date());
95-
(d.head || d.body).appendChild(s);
96-
})();
97-
</script>
140+
<script src="/static/js/@include/CheckD.js" is:inline></script>
141+
<script src="/static/js/replacer.js" is:inline></script>
142+
<script is:inline>
143+
var disqus_config = function () {
144+
this.page.url = window.location.href;
145+
this.page.identifier = window.location.pathname;
146+
};
147+
(function () {
148+
// DON'T EDIT BELOW THIS LINE
149+
var d = document,
150+
s = d.createElement("script");
151+
s.src = "https://vtuberwiki.disqus.com/embed.js";
152+
s.setAttribute("data-timestamp", +new Date());
153+
(d.head || d.body).appendChild(s);
154+
})();
155+
</script>
98156
</Layout>

0 commit comments

Comments
 (0)