Compare commits

..

No commits in common. "f50051f741cbbca89dc457c2544027cc6551aa41" and "dd1f6c796b9eb33fc756bca8757bf461b2dc556d" have entirely different histories.

5 changed files with 33 additions and 23 deletions

View file

@ -6,24 +6,37 @@ We also have an API, which can be located at https://api.violets-purgatory.dev,
# How it works
### The Constants file
### The config
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.
The config.json file, soon to be renamed for a local config, contains constants for Violet's Purgatory. In the file, there are lots of important notable features, such as fallback activity images 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.
These highlighted words ARE case senstive. 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 utoid is Teto)`. But, on the other hand, `(Don't you think Javascript sucks?)` will only have `Javascript` highlighted.
To add new highlighted words, find the highlighted words section in config.json. The key is the word to highlight, and the value is the color.
### 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.
Currently this system is extremely unsophisticated, adding new dynamic HTML isn't as streamlined as it should be. Basically, in the code, is a dictionary that specifies every keyword to look for. Then, it looks for those keywords, and replaces them with HTML.
A good example is the activity system. The keyword for the discord activities is `ACTIVITIES`. So, if you wanted to create another activity section, you would simply put `{ACTIVITIES}` in the HTML code.
There is also a `{PATH_[html file]}` keyword.
There is also a `{PATH_[html file]}` keyword. Currently, this is not used much, but may be more useful in the future.
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](https://violets-purgatory.dev). Afterwards, look at the [*socials page*](https://violets-purgatory.dev/socials). 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.
For an easy to digest example, look at the socials section on the main page of [Violet's Purgatory](https://violets-purgatory.dev). Afterwards, look at the [*socials page*](https://violets-purgatory.dev/socials). 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.
# To-do
## Highlighter:
- [ ] Desperately need to rework the highlighting system.
- [ ] Make it ignore classes, IDs, inline-CSS attributes, etc
- [ ] Only index visible elements for words
- [x] Ignore text ouside the body
## Socials:
- [ ] Make it more easily findable on the site
- [ ] Add more content
- [ ] Pull latest Youtube video & display it
- [x] Display current Discord Activities
## Activities
- [ ] Compress images to reduce space used and network usage (Probably using thumbor to prevent needing MORE packages TwT)

View file

@ -193,7 +193,7 @@
{
"words": [
"NodeJS",
"Spoti",
"Spotify",
"Wambu",
"Matrix",
"The Silent"

View file

@ -4,8 +4,7 @@
"description": "Violets Purgatory is a personal webapp for",
"main": "index.js",
"scripts": {
"start": "node index.js",
"test": "node index.js test"
"start": "node index.js"
},
"repository": {
"type": "git",

View file

@ -25,8 +25,6 @@ var pregenFiles = []
var javascriptCache = {}
var testing = process.argv[2] == "test"
var globResult = glob.globSync("**/static/**/*.html", { absolute: true })
for (var i = 0; i < globResult.length; i++) {
var result = globResult[i]

View file

@ -117,12 +117,12 @@ function code() {
return '<link rel="stylesheet" type="text/css" href="/themes/code/style.css">' // <script src="/themes/code/script.js"></script>'
}
var events = []
events = events.concat(Array(10).fill(""))
events.push(rain())
events = events.concat(Array(10).fill(""))
events.push(purpleMagic())
var events = [
code(),
purpleMagic(),
rain(),
"",
]
module.exports = {
returnTheme: function() {