Much more organized word highlight config

This commit is contained in:
bingus_violet 2024-06-29 23:12:42 -05:00
parent 1a761166b7
commit b798f15387
3 changed files with 297 additions and 336 deletions

View file

@ -124,193 +124,231 @@
} }
} }
}, },
"highlightedWords": { "highlightedWords": [
"birds": { {
"words": [
"birds",
"Pissing",
"Starwalker",
"word highlighting",
"highlight",
"Highlight",
"Javascript",
"JSON",
"JQuery",
".js"
],
"color": "yellow" "color": "yellow"
}, },
"Pissing": { {
"color": "yellow" "words": [
}, "Teto Tuesday",
"Starwalker": { "Teto Territory",
"color": "yellow" "Teto",
}, "Kasane"
"word highlighting": { ],
"color": "yellow" "color": "#d5738d",
},
"Godot Engine": {
"color": "#64B5F6"
},
"Javascript": {
"color": "yellow"
},
"JSON": {
"color": "yellow"
},
"JQuery": {
"color": "yellow"
},
"NodeJS": {
"color": "limegreen"
},
"Violet": {
"color": "rgb(200, 150, 255)"
},
"Purgatory": {
"color": "rgb(200, 150, 255)"
},
"Limbo": {
"color": "rgb(200, 150, 255)"
},
"Asahi": {
"color": "rgb(255, 175, 175)",
"caseInsensitive": true "caseInsensitive": true
}, },
"Lunya": { {
"color": "rgb(255, 175, 175)" "words": [
}, "YouTube",
"Sylvie": { "ULTRAKILL",
"color": "#f768a4" "Lethal Company"
}, ],
"bisexual": {
"color": "rgb(214, 2, 112)"
},
"enby": {
"color": "rgb(252, 244, 52)"
},
"YouTube": {
"color": "rgb(255, 0, 0)",
"caseInsensitive": true
},
"Fedi": {
"color": "rgb(175, 125, 200)"
},
"Matrix": {
"color": "limegreen"
},
"Element": {
"color": "rgb(100, 255, 200)"
},
"Codeberg": {
"color": "rgb(0, 255, 255)"
},
"Code": {
"color": "rgb(150, 175, 255)"
},
"Codium": {
"color": "rgb(150, 175, 255)"
},
"Docker": {
"color": "blue"
},
"Github": {
"color": "gray"
},
"Steam": {
"color": "lightgray"
},
"Univerter": {
"link": "https://univerter.dev/",
"color": "rgb(200, 175, 255)"
},
"Ko-fi": {
"color": "rgb(255, 150, 150)"
},
"Revolt": {
"color": "rgb(255, 50, 50)"
},
"Discord": {
"color": "rgb(150, 150, 255)"
},
"SearXNG": {
"color": "rgb(100, 100, 255)"
},
"highlight": {
"color": "yellow",
"caseInsensitive": true
},
"Forgejo": {
"color": "orange"
},
"HTML": {
"color": "orange"
},
"CSS": {
"color": "rgb(50, 200, 255)"
},
"Thumbor": {
"color": "rgb(225, 225, 255)"
},
"Spotify": {
"color": "limegreen"
},
"ULTRAKILL": {
"color": "red", "color": "red",
"caseInsensitive": true "caseInsensitive": true
}, },
"Risk of Rain 2": { {
"words": [
"Spooky's Jump Scare Mansion"
],
"color": "rgb(150, 175, 255)"
},
{
"words": [
"Forgejo",
"HTML",
"Shortcat",
"Valve",
"Spooky"
],
"color": "orange"
},
{
"words": [
"NodeJS",
"Spotify",
"Wambu"
],
"color": "limegreen"
},
{
"words": [
"Godot Engine"
],
"color": "#64B5F6"
},
{
"words": [
"Violet",
"Purgatory",
"Limbo"
],
"color": "rgb(200, 150, 255)"
},
{
"words": [
"bisexual"
],
"color": "rgb(214, 2, 112)"
},
{
"words": [
"Fedi"
],
"color": "rgb(175, 125, 200)"
},
{
"words": [
"Matrix"
],
"color": "limegreen"
},
{
"words": [
"Element"
],
"color": "rgb(100, 255, 200)"
},
{
"words": [
"Codeberg"
],
"color": "rgb(0, 255, 255)"
},
{
"words": [
"Code"
],
"color": "rgb(150, 175, 255)"
},
{
"words": [
"Codium"
],
"color": "rgb(150, 175, 255)"
},
{
"words": [
"Docker"
],
"color": "blue"
},
{
"words": [
"Github"
],
"color": "gray"
},
{
"words": [
"Steam"
],
"color": "lightgray"
},
{
"words": [
"Univerter"
],
"link": "https://univerter.dev/",
"color": "rgb(200, 175, 255)"
},
{
"words": [
"Ko-fi"
],
"color": "rgb(255, 150, 150)"
},
{
"words": [
"Revolt"
],
"color": "rgb(255, 50, 50)"
},
{
"words": [
"Discord"
],
"color": "rgb(150, 150, 255)"
},
{
"words": [
"SearXNG"
],
"color": "rgb(100, 100, 255)"
},
{
"words": [
"CSS"
],
"color": "rgb(50, 200, 255)"
},
{
"words": [
"Thumbor"
],
"color": "rgb(225, 225, 255)"
},
{
"words": [
"Risk of Rain 2"
],
"color": "rgb(150, 220, 255)", "color": "rgb(150, 220, 255)",
"caseInsensitive": true "caseInsensitive": true
}, },
"Liberapay": { {
"words": [
"Liberapay"
],
"color": "yellow" "color": "yellow"
}, },
"Roblox": { {
"words": [
"Roblox"
],
"color": "rgb(225, 225, 225)" "color": "rgb(225, 225, 225)"
}, },
"Teto Tuesday": { {
"color": "#d5738d", "words": [
"caseInsensitive": true "Ryouiki Tenkai"
}, ],
"Teto Territory": {
"color": "#d5738d",
"caseInsensitive": true
},
"Teto": {
"color": "#d5738d",
"caseInsensitive": true
},
"Kasane": {
"color": "#d5738d",
"caseInsensitive": true
},
"Ryouiki Tenkai": {
"bold": true, "bold": true,
"italicized": true, "italicized": true,
"caseInsensitive": true "caseInsensitive": true
}, },
"Pokerogue": { {
"words": [
"Pokerogue"
],
"caseInsensitive": true, "caseInsensitive": true,
"color": "#366383", "color": "#366383",
"outline": "#d43131", "outline": "#d43131",
"bold": true "bold": true
}, },
"page embed": { {
"words": [
"page embed"
],
"link": "/faq#embeds" "link": "/faq#embeds"
}, },
"YIP": { {
"words": [
"YIP"
],
"italicized": true "italicized": true
},
"Lethal Company": {
"color": "red"
},
"Wambu": {
"color": "limegreen"
},
"Spooky's Jump Scare Mansion": {
"color": "rgb(150, 175, 255)"
},
"Spooky": {
"color": "orange"
},
".js": {
"color": "yellow"
},
"Shortcat": {
"color": "orange"
},
"Valve": {
"color": "orange",
"caseInsensitive": true
} }
} ]
} }

View file

@ -90,95 +90,103 @@ function highlighter(json, full = true) {
element.children = highlighter(element.children, full) element.children = highlighter(element.children, full)
} }
} else if (element.type == "text") { } else if (element.type == "text") {
var highTable = Object.keys(highlightedWords) var index = 0
for (let i = 0; i < highlightedWords.length; i++) {
var dict = highlightedWords[i]
for (let x = 0; x < dict.words.length; x++) {
index += 1
var term = dict.words[x];
var termProps = dict
for (let index = 0; index < highTable.length; index++) { var reg = term
var term = highTable[index]; if (termProps.caseInsensitive) {
var termProps = highlightedWords[term] reg = new RegExp(`(${term})`, "gi")
}
var reg = term element.content = element.content.replaceAll(`{${term}}`, "TEMPORARY_REPLACE")
if (termProps.caseInsensitive) { element.content = element.content.replaceAll(reg, "{TERM" + index + "}")
reg = new RegExp(`(${term})`, "gi") element.content = element.content.replaceAll("TEMPORARY_REPLACE", `${term}`)
} }
element.content = element.content.replaceAll(`{${term}}`, "TEMPORARY_REPLACE")
element.content = element.content.replaceAll(reg, "{TERM" + index + "}")
element.content = element.content.replaceAll("TEMPORARY_REPLACE", `${term}`)
} }
if (full) { if (full) {
for (let index = 0; index < highTable.length; index++) { var index = 0
var termKey = "{TERM" + index + "}" for (let i = 0; i < highlightedWords.length; i++) {
var termProps = highlightedWords[highTable[index]] var dict = highlightedWords[i]
while (element.content.includes(termKey)) { for (let x = 0; x < dict.words.length; x++) {
var termIndex = element.content.indexOf(termKey) index += 1
var termKey = "{TERM" + index + "}"
var termProps = dict
while (element.content.includes(termKey)) {
var termIndex = element.content.indexOf(termKey)
var spanEnd = element.content.indexOf(" ", termIndex) var spanEnd = element.content.indexOf(" ", termIndex)
if (spanEnd == -1) { if (spanEnd == -1) {
spanEnd = element.content.length spanEnd = element.content.length
} }
var spanStart = element.content.substring(0, termIndex).lastIndexOf(" ") + 1 var spanStart = element.content.substring(0, termIndex).lastIndexOf(" ") + 1
// if (highTable[index] == "ULTRAKILL") { // if (highTable[index] == "ULTRAKILL") {
// console.log(startContent, " ---- ", endContent) // console.log(startContent, " ---- ", endContent)
// } // }
var startContent = element.content.substring(spanStart - 1, termIndex) var startContent = element.content.substring(spanStart - 1, termIndex)
var endContent = element.content.substring(termIndex + termKey.length, spanEnd) var endContent = element.content.substring(termIndex + termKey.length, spanEnd)
if (startContent.includes("(") && !endContent.includes(")")) { if (startContent.includes("(") && !endContent.includes(")")) {
spanEnd = element.content.indexOf(")", spanStart) + 1 spanEnd = element.content.indexOf(")", spanStart) + 1
endContent = element.content.substring(termIndex + termKey.length, spanEnd) endContent = element.content.substring(termIndex + termKey.length, spanEnd)
} }
else if (endContent.includes(")") && !startContent.includes("(")) { else if (endContent.includes(")") && !startContent.includes("(")) {
spanStart = element.content.substring(0, spanStart).lastIndexOf("(") spanStart = element.content.substring(0, spanStart).lastIndexOf("(")
startContent = element.content.substring(spanStart - 1, termIndex) startContent = element.content.substring(spanStart - 1, termIndex)
} }
var style = termProps.style || "" var style = termProps.style || ""
var classes = termProps.classes || "" var classes = termProps.classes || ""
var link = termProps.link || "" var link = termProps.link || ""
if (termProps.color) { if (termProps.color) {
style += `color: ${termProps.color};` style += `color: ${termProps.color};`
} }
if (termProps.italicized) { if (termProps.italicized) {
style += "font-style: italic;" style += "font-style: italic;"
} }
if (termProps.outline) { if (termProps.outline) {
var width = 2 var width = 2
// style += `text-shadow: -1px -1px 0 ${termProps.outline}, 1px -1px 0 ${termProps.outline}, -1px 1px 0 ${termProps.outline}, 1px 1px 0 ${termProps.outline};` // style += `text-shadow: -1px -1px 0 ${termProps.outline}, 1px -1px 0 ${termProps.outline}, -1px 1px 0 ${termProps.outline}, 1px 1px 0 ${termProps.outline};`
style += `-webkit-text-stroke: 1px ${termProps.outline};` style += `-webkit-text-stroke: 1px ${termProps.outline};`
// ^ Not in use because it looks bad :30 // ^ Not in use because it looks bad :30
} }
if (termProps.bold) { if (termProps.bold) {
classes += "bold" classes += "bold"
} }
if (style.length > 2) { if (style.length > 2) {
style = `style="${style}"` style = `style="${style}"`
} }
if (classes.length > 2) { if (classes.length > 2) {
classes = `class="${classes}"` classes = `class="${classes}"`
} }
var stuff = (startContent + highTable[index] + endContent).trim() var stuff = (startContent + dict.words[x] + endContent).trim()
if (!stuff.includes("span")) { if (!stuff.includes("span")) {
var replacement = `<span ${style} ${classes} ${link}>${stuff}</span>` var replacement = `<span ${style} ${classes} ${link}>${stuff}</span>`
if (link) { if (link) {
replacement = `<a href="${link}">${replacement}</a>` replacement = `<a href="${link}">${replacement}</a>`
}
element.content = element.content.substring(0, spanStart) + replacement + element.content.substring(spanEnd)
} else {
element.content = element.content.replace(termKey, dict.words[x])
} }
element.content = element.content.substring(0, spanStart) + replacement + element.content.substring(spanEnd)
} else {
element.content = element.content.replace(termKey, highTable[index])
} }
} }
} }
@ -194,9 +202,16 @@ function highlighter(json, full = true) {
function converter(html, dynamic = true) { function converter(html, dynamic = true) {
var startTime = Date.now() var startTime = Date.now()
var config = JSON.parse(fs.readFileSync(path.join(__dirname, 'config/config.json'))) var config = JSON.parse(fs.readFileSync(path.join(__dirname, 'config/config.json')))
var staticReplacers = { var staticReplacers = {
"ALL_HIGHLIGHTS": Object.keys(highlightedWords).join(", "), "ALL_HIGHLIGHTS": () => {
var addedHTML = ""
for (var i = 0; i < highlightedWords.length; i++) {
addedHTML += highlightedWords[i].words.join(", ")
addedHTML += ", "
}
return addedHTML.substring(0, addedHTML.length - 2)
},
"BRANCH_NAME": () => { "BRANCH_NAME": () => {
if (process.env.BRANCH == "dev") { if (process.env.BRANCH == "dev") {
return "Stable" return "Stable"

View file

@ -1,92 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="/style.css">
<link rel="stylesheet" type="text/css" href="/root.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../jquery.js"></script>
<script src="../main.js"></script>
<title>Violet's Purgatory</title>
<meta name="darkreader-lock">
<meta content="Violet's Purgatory" property="og:title" />
<meta
content="Hello this is tje asahi a uhm uuhhh uhm ummmm uhmmm uhhh uhmmm ummm uhhh um!"
property="og:description" />
<meta content="./pfp.png" property="og:image" />
<meta content="#a200ff" data-react-helmet="true" name="theme-color" />
</head>
<body>
{WEATHER_MODIFIER}
{TOPBAR}
<h1 class="animatedTitle">Welcome to my<span class="mainTitle" style="color: rgb(200, 150, 255)">Humble Abode</span>
</h1>
<main class="animatedMain">
<p>nice seeing you here! while you're at it, why not check out my socials or about me?</p>
<hr>
<div id="card">
<h2>Asahi</h2>
<div style="display: flex; justify-content: center; align-items: center;">
<div style="width: 50%;">
<img src="/imgs/asahiPFP.png" class="pfp">
</div>
<div style="width: 50%;">
<div style="float: left;">
<p>They/Them</p>
<p>Marcy & Violet &lt;3</p>
</div>
<!-- <p>THIS TEXT IS THE EPIC EXTREME FILLER TO TEST THE SITE'S FORMATTING :fire:</p> -->
</div>
</div>
<hr>
<div>
<p style="padding: 10px;">
<br>hi! my name is Asahi Lunya :3 i'm a bisexual enby who's a very queer mess
<br>i have interests in tech, aerospace, trains, art, and music! i'm also a privacy/security
enthusiast
<br>i'm currently learning many new things in my life, expanding my knowledge
<br>i hope you got to know me a little ^^
</p>
<!-- <a class="chip" href="https://beta.violets-purgatory.dev">Beta site</a>
<a class="chip" href="https://blog.violets-purgatory.dev">Blog</a> -->
<!-- <a class="chip" href="https://fs.violets-purgatory.dev">FileShare</a> -->
</div>
</div>
<h2><hr>Disclaimer!</h2>
<p>
This is NOT Asahi's real site! Please find it <a href="https://asahixp.pages.gay">here</a> instead!
</p>
<h2><hr>Quotes:</h2>
<p>“literally anything from the 1995 movie 'Hackers' will absolutely fit here” -tyberry<br>
"ooooo you like boys, ur a boykisser" -Elodie<br>
"asahi is twink-esk in spirit. aspirational." -Juniper<br>
"cute huggable nice huggable cute cute" -marcy<br>
"Petting Asahi makes the world better” -yassie<br>
"meow meow meow mrrrp nya~" -gettie<br>
"cute and queer catenby that functions as fedi's algorithm on the side" -7331<br>
"sometimes this one still forgets how friendly some people are here… like Asahi, for instance!” -Ariadne<br>
"Asahi wa sugoi desu ne?" -Bard<br>
"this is a quote :3c" -Ukko<br>
"best Asahi I've ever met (awww!)" -Kristina<br>
"asahi is friend shaped and they have a good heart" -Drew<br>
"10/10 will give loving headpats and will protect them!" -Natsura</p>
</main>
</body>
</html>