Violets-Purgatory

Violet's Purgatory is a website filled to the brim with whatever I feel like adding! Currently, the stable version can be found at https://violets-purgatory.dev and the beta (based on the dev branch) can be found at https://beta.violets-purgatory.dev

We also have an API, which can be located at https://api.violets-purgatory.dev, which is currently under developed, but will continue to have updates for features I see fit.

How it works

The Constants file

Although the code for it isn't nessacarily pretty, theres a few important things to go over with how it works. constants.json contains constants for Violet's Purgatory. In the file, there are lots of important notable features, such as a fallback lanyard for the Discord Activity section, and words that are automatically highlighted.

Word highlighting

Word highlighting is a feature that automatically sets the color of certain keywords, including but not limited to Violet being purple, Javascript being yellow, NodeJS being green, and Godot Engine being blue. This is nothing more than a fancy feature to reduce the amount of code required on the site. These highlighted words ARE case senstive. You can make them not case sensitive by specifying caseInsensitive: true in the json file. You may notice certain things such as "Violet" at the top of the card are not highlighted despite being in the words list. To make a word in the highlight list not highlighted, simply add {} around it. E.G. for the title of the page, on the site it shows as Violet, but in the code is written as {Violet} to prevent highlighting.

Highlighted words will automatically highlight adjacent letters. So, for example, NodeJS-generated will all be highlighted green, as NodeJS is a keyword.

If a highlighted word finds adjacent paranthesis, then the entire parenthesis will be highlighted. For example (Godot Engine is super cool) will all be highlighted blue. So will (My favorite UTAUloid is Teto). But, on the other hand, (Don't you think Javascript sucks?) will only have Javascript highlighted.

Dynamic HTML

In pageUpdater.js, is a dictionary that specifies keywords to look for. Then, if it finds those keywords, and replaces them with HTML. This process is split into 2 steps, the static part and the dynamic part. The static part is ran whenever my lanyard updates (excluding activities), while the dynamic part is ran on page load. These 2 processes are known as "pregeneration" and "page generation" respectively.

There is also a {PATH_[html file]} keyword. On the main page, you can find {PATH_SOCIALS}. This effectively "embeds" the socials page on the site. The part of the page that is used is based upon the main HTML tag. For an easy to digest example, look at the socials section on the main page of Violet's Purgatory. Afterwards, look at the socials page. You will notice they're the same, because in the code for the main page, I put {PATH_SOCIALS} which got the page at /socials.