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": {
"birds": {
"highlightedWords": [
{
"words": [
"birds",
"Pissing",
"Starwalker",
"word highlighting",
"highlight",
"Highlight",
"Javascript",
"JSON",
"JQuery",
".js"
],
"color": "yellow"
},
"Pissing": {
"color": "yellow"
},
"Starwalker": {
"color": "yellow"
},
"word highlighting": {
"color": "yellow"
},
"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)",
{
"words": [
"Teto Tuesday",
"Teto Territory",
"Teto",
"Kasane"
],
"color": "#d5738d",
"caseInsensitive": true
},
"Lunya": {
"color": "rgb(255, 175, 175)"
},
"Sylvie": {
"color": "#f768a4"
},
"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": {
{
"words": [
"YouTube",
"ULTRAKILL",
"Lethal Company"
],
"color": "red",
"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)",
"caseInsensitive": true
},
"Liberapay": {
{
"words": [
"Liberapay"
],
"color": "yellow"
},
"Roblox": {
{
"words": [
"Roblox"
],
"color": "rgb(225, 225, 225)"
},
"Teto Tuesday": {
"color": "#d5738d",
"caseInsensitive": true
},
"Teto Territory": {
"color": "#d5738d",
"caseInsensitive": true
},
"Teto": {
"color": "#d5738d",
"caseInsensitive": true
},
"Kasane": {
"color": "#d5738d",
"caseInsensitive": true
},
"Ryouiki Tenkai": {
{
"words": [
"Ryouiki Tenkai"
],
"bold": true,
"italicized": true,
"caseInsensitive": true
},
"Pokerogue": {
{
"words": [
"Pokerogue"
],
"caseInsensitive": true,
"color": "#366383",
"outline": "#d43131",
"bold": true
},
"page embed": {
{
"words": [
"page embed"
],
"link": "/faq#embeds"
},
"YIP": {
{
"words": [
"YIP"
],
"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)
}
} 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 term = highTable[index];
var termProps = highlightedWords[term]
var reg = term
if (termProps.caseInsensitive) {
reg = new RegExp(`(${term})`, "gi")
}
var reg = term
if (termProps.caseInsensitive) {
reg = new RegExp(`(${term})`, "gi")
element.content = element.content.replaceAll(`{${term}}`, "TEMPORARY_REPLACE")
element.content = element.content.replaceAll(reg, "{TERM" + index + "}")
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) {
for (let index = 0; index < highTable.length; index++) {
var termKey = "{TERM" + index + "}"
var termProps = highlightedWords[highTable[index]]
while (element.content.includes(termKey)) {
var termIndex = element.content.indexOf(termKey)
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 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) {
spanEnd = element.content.length
}
var spanStart = element.content.substring(0, termIndex).lastIndexOf(" ") + 1
// if (highTable[index] == "ULTRAKILL") {
// console.log(startContent, " ---- ", endContent)
// }
var startContent = element.content.substring(spanStart - 1, termIndex)
var endContent = element.content.substring(termIndex + termKey.length, spanEnd)
if (startContent.includes("(") && !endContent.includes(")")) {
spanEnd = element.content.indexOf(")", spanStart) + 1
endContent = element.content.substring(termIndex + termKey.length, spanEnd)
}
else if (endContent.includes(")") && !startContent.includes("(")) {
spanStart = element.content.substring(0, spanStart).lastIndexOf("(")
startContent = element.content.substring(spanStart - 1, termIndex)
}
var style = termProps.style || ""
var classes = termProps.classes || ""
var link = termProps.link || ""
if (termProps.color) {
style += `color: ${termProps.color};`
}
if (termProps.italicized) {
style += "font-style: italic;"
}
if (termProps.outline) {
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 += `-webkit-text-stroke: 1px ${termProps.outline};`
// ^ Not in use because it looks bad :30
}
if (termProps.bold) {
classes += "bold"
}
if (style.length > 2) {
style = `style="${style}"`
}
if (classes.length > 2) {
classes = `class="${classes}"`
}
var stuff = (startContent + highTable[index] + endContent).trim()
if (!stuff.includes("span")) {
var replacement = `<span ${style} ${classes} ${link}>${stuff}</span>`
if (link) {
replacement = `<a href="${link}">${replacement}</a>`
if (spanEnd == -1) {
spanEnd = element.content.length
}
var spanStart = element.content.substring(0, termIndex).lastIndexOf(" ") + 1
// if (highTable[index] == "ULTRAKILL") {
// console.log(startContent, " ---- ", endContent)
// }
var startContent = element.content.substring(spanStart - 1, termIndex)
var endContent = element.content.substring(termIndex + termKey.length, spanEnd)
if (startContent.includes("(") && !endContent.includes(")")) {
spanEnd = element.content.indexOf(")", spanStart) + 1
endContent = element.content.substring(termIndex + termKey.length, spanEnd)
}
else if (endContent.includes(")") && !startContent.includes("(")) {
spanStart = element.content.substring(0, spanStart).lastIndexOf("(")
startContent = element.content.substring(spanStart - 1, termIndex)
}
var style = termProps.style || ""
var classes = termProps.classes || ""
var link = termProps.link || ""
if (termProps.color) {
style += `color: ${termProps.color};`
}
if (termProps.italicized) {
style += "font-style: italic;"
}
if (termProps.outline) {
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 += `-webkit-text-stroke: 1px ${termProps.outline};`
// ^ Not in use because it looks bad :30
}
if (termProps.bold) {
classes += "bold"
}
if (style.length > 2) {
style = `style="${style}"`
}
if (classes.length > 2) {
classes = `class="${classes}"`
}
var stuff = (startContent + dict.words[x] + endContent).trim()
if (!stuff.includes("span")) {
var replacement = `<span ${style} ${classes} ${link}>${stuff}</span>`
if (link) {
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) {
var startTime = Date.now()
var config = JSON.parse(fs.readFileSync(path.join(__dirname, 'config/config.json')))
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": () => {
if (process.env.BRANCH == "dev") {
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>