nat/webbed-site
1
0
Fork 3
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

apply new style to all non-blog files barring site-info.html

Browse Source
This commit is contained in:
gnat 2024-07-27 12:31:33 -07:00
parent a59e0d8adb
commit 9bfa93d8c6
18 changed files with 686 additions and 525 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@ -4,5 +4,5 @@ test.sh
log
graph*
__pycache__/
/files/stats/song
/files/home_visit_counter
files/stats/song
files/home_visit_counter

4
changelog
View File

@ -16,6 +16,10 @@
2024-07-24: updated wording in site-info.html, add /stats/ routes, update home.html to make filetree hidden by default because it is big
2024-07-25: rewrite css because winter told me to. Now has dark mode based on a media query.
2024-07-25: add subdomain proxying with nginx.
<<<<<<< Updated upstream
2024-07-26: add <a href='git.natalieee.net'>git.natalieee.net</a>
=======
2024-07-26: add <a href='https://git.natalieee.net'>git.natalieee.net</a>
>>>>>>> Stashed changes
2024-07-26: update site-info.html
2024-07-26: I have a dns server now. oops. there go my sleeping plans. email me if you want to use it for some insane reason.

21
dir_index.html
View File

@ -2,6 +2,7 @@
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252"> <!-- lol -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Index of {path}</title>
<link href="data:text/css,%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ddg-runtime-checks%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20" rel="stylesheet" type="text/css">
<style>
@ -10,13 +11,17 @@
</head>
<body>
$[python3 -u -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/']
<h1>Index of {path}</h1>
<table>
<tbody><tr><th><p>Name</p></th><th><p>Last modified</p></th><th><p>Creation Date</p></th><th><p>Size</p></th></tr>
<tr><th colspan="4"><hr></th></tr>
$[for file in $(ls {path}); do echo "<tr><td><a href=\"/{path}/$file\">$file</a></td><td>$(stat -c %y "{path}/$file" | head -c 16)</td><td><p>$(stat -c %y "{path}/$file" | head -c 10)</p></td><td align=\"right\">$(numfmt --to=iec --suffix=B $(stat -c %s "{path}/$file"))</td></tr>"; done | sed 's/\/\//\//g']
<tr><th colspan="4"><hr></th></tr>
</tbody>
</table>
<main>
<section>
<h1>Index of {path}</h1>
<table>
<tbody><tr><th><p>Name</p></th><th><p>Last modified</p></th><th><p>Creation Date</p></th><th><p>Size</p></th></tr>
<tr><th colspan="4"><hr></th></tr>
$[for file in $(ls {path}); do echo "<tr><td><a href=\"/{path}/$file\">$file</a></td><td>$(stat -c %y "{path}/$file" | head -c 16)</td><td><p>$(stat -c %y "{path}/$file" | head -c 10)</p></td><td align=\"right\">$(numfmt --to=iec --suffix=B $(stat -c %s "{path}/$file"))</td></tr>"; done | sed 's/\/\//\//g']
<tr><th colspan="4"><hr></th></tr>
</tbody>
</table>
</section>
</main>
</body>
</html>

99
home.html
View File

@ -3,6 +3,7 @@ $[echo visit >> files/home_visit_counter]
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
$[cat style.css]
/* appended to maintain html spec compliance while maintaining the consequences of albert's hack */
@ -34,47 +35,61 @@ $[echo visit >> files/home_visit_counter]
</head>
<body>
$[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/']
<p>
I'm Natalie[ee].<br>
$[find files/homepage-statements/* | shuf -n1 | xargs -I % cat %]<br>
home.html was last modified on $[stat -c %y ./home.html | head -c 10].<br>
I am not sure what I am going to use this site for, it only exists because I was <del>procrastinating my calculus homework</del> bored one day.<br>
Website homepage visit counter: $[cat files/home_visit_counter | wc -l]
</p>
<a href="https://validator.w3.org/nu/?doc=https%3A%2F%2Fnatalieee.net%2F" class="nostyle" rel="nofollow">
<img alt="W3C HTML5" src="/files/html5.png" width="88" height="31">
</a>
<hr>
<h2>Particularly noteable pages</h2>
<a href='/html/site-info.html'>Information about this website</a><br>
<a href='/html/natalie-info.html'>Information about me</a><br>
<a href='/html/blog/index.html'>There is also a blog. I do not use it frequently.</a><br>
<a href='/html/random-thoughts.html'>There are also random natalie thoughts. sometimes they might be interesting</a>
<hr>
<h2>Directories</h2>
$[find -maxdepth 1 -type d | sed 1d | xargs -I% echo '<a href=%>%</a>' | sed 's/\.\///g' | grep -v pycache | grep -v .git]
<hr>
<h2>Changelog</h2>
<pre>$[cat changelog]</pre>
<hr>
<h2>Site file tree</h2>
<details>
<summary>File tree hidden for brevity</summary>
$[tree . | sed 's/^\./site/; s/─/-/g; s/├/|/g; s/└/\\/g; s/│/|/g' | sed '1i\<pre>' | sed '$a\</pre>']
</details>
<hr>
<h2>Autistic collection of 88x31s</h2>
$[for file in ./files/88x31/*; do (file -i "$file" | grep -qE 'image/') && echo "<img src=\"$file\" width=\"88\" height=\"31\"/>" || cat "$file"; done | shuf]
<hr>
<h2>Post arbitrary data to my website to be displayed here</h2>
Yes, I do sanitize this. <a href='/html/albert-hack-1.html' ><del>(No you don't --sanitization tester)</del></a> Yes, I do.
<form action="#" method="post">
<label for="postText">post text: </label>
<input type="text" id="postText" name="text" required>
<label for="postName">name to be displayed with post: </label>
<input type="text" id="postName" name="name" required>
<button type="submit">Submit</button>
</form>
$[ls -r ./files/posts-to-homepage/* | xargs cat]
<main>
<section>
<p>
I'm Natalie[ee].<br>
$[find files/homepage-statements/* | shuf -n1 | xargs -I % cat %]<br>
home.html was last modified on $[stat -c %y ./home.html | head -c 10].<br>
I am not sure what I am going to use this site for, it only exists because I was <del>procrastinating my calculus homework</del> bored one day.<br>
Website homepage visit counter: $[cat files/home_visit_counter | wc -l]
</p>
<a href="https://validator.w3.org/nu/?doc=https%3A%2F%2Fnatalieee.net%2F" class="88x31" rel="nofollow">
<img alt="W3C HTML5" src="/files/html5.png" width="88" height="31">
</a>
</section>
<section>
<h2>Particularly noteable pages</h2>
<a href='/html/site-info.html'>Information about this website</a>
<a href='/html/natalie-info.html'>Information about me</a>
<a href='/html/blog/index.html'>There is also a blog. I do not use it frequently.</a>
<a href='/html/random-thoughts.html'>There are also random natalie thoughts. sometimes they might be interesting</a>
</section>
<section>
<h2>Directories</h2>
<span>$[find -maxdepth 1 -type d | sed 1d | xargs -I% echo '<a href=%>%</a>' | sed 's/\.\///g' | grep -v pycache | grep -v .git]</span>
</section>
<section>
<h2>Changelog</h2>
<pre>$[cat changelog]</pre>
</section>
<section>
<h2>Site file tree</h2>
<details>
<summary>File tree hidden for brevity</summary>
$[tree . | sed 's/^\./site/; s/─/-/g; s/├/|/g; s/└/\\/g; s/│/|/g' | sed '1i\<pre>' | sed '$a\</pre>']
</details>
</section>
<section>
<h2>Autistic collection of 88x31s</h2>
<span>$[for file in ./files/88x31/*; do (file -i "$file" | grep -qE 'image/') && echo "<img src=\"$file\" width=\"88\" height=\"31\"/>" || cat "$file"; done | shuf]</span>
</section>
<section>
<h2>Post arbitrary data to my website to be displayed here</h2>
Yes, I do sanitize this. <a href='/html/albert-hack-1.html' ><del>(No you don't --sanitization tester)</del></a> Yes, I do.
</section>
<section class='ignore-section'>
<form action="#" method="post">
<label for="postText">post text: </label>
<input type="text" id="postText" name="text" required>
<label for="postName">username: </label>
<input type="text" id="postName" name="name" required>
<button type="submit">Submit</button>
</form>
<div>
$[ls -r ./files/posts-to-homepage/* | while read -r file; do echo "<div class=post>$(cat $file)</div>"; done ]
</div>
</section>
</main>
</body>
</html>

207
html/I-dont-like-IT.html
View File

@ -4,108 +4,115 @@
<style>
$[cat style.css]
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div>
$[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/']
<h1>My school district's IT is mean :(</h1>
My school district has a very silly IT department. I am reasonably annoyed by this and have thus decided to tell whoever looks at my website about it.<br>
I-dont-like-IT.html was last modified on $[stat -c %y ./html/I-dont-like-IT.html | head -c 10].<hr>
<h2>"""Cuban malware""" incident</h2>
<p>
It is really going to sound like I am exaggerating or making things up here. I am not, PPS IT is really like this.
Last year, the school district accused me of installing what they claimed was "Cuban malware" that had been "used in attacks against the FBI and the LA school district" on a school laptop that I fixed for a teacher.
While it was technically against IT policy to repair the laptop, I could do it in 10 minutes (the battery connector had just popped out of the connector for it on the mainboard), whereas IT would have taken like a week through the power of beaurocracy.
I of course, did not install any malware on this computer, that would be mean. The fact that I did not install malware on that computer did not stop IT from persecuting me, nor did the fact that there were not in fact any viruses on the computer I repaired.<br>
This occurrence is primarily funny due to how they went about investigating me for whatever it was they thought I did.
</p><br>
<p>
I will provide an approximate list of events because&mdash;as mentioned on the natalie info page&mdash;I am really bad at writing.
<body>
$[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/']
<main>
<section>
<h1>My school district's IT is mean :(</h1>
My school district has a very silly IT department. I am reasonably annoyed by this and have thus decided to tell whoever looks at my website about it.<br>
I-dont-like-IT.html was last modified on $[stat -c %y ./html/I-dont-like-IT.html | head -c 10].<hr>
</section>
<section>
<h2>"""Cuban malware""" incident</h2>
<p>
It is really going to sound like I am exaggerating or making things up here. I am not, PPS IT is really like this.
Last year, the school district accused me of installing what they claimed was "Cuban malware" that had been "used in attacks against the FBI and the LA school district" on a school laptop that I fixed for a teacher.
While it was technically against IT policy to repair the laptop, I could do it in 10 minutes (the battery connector had just popped out of the connector for it on the mainboard), whereas IT would have taken like a week through the power of beaurocracy.
I of course, did not install any malware on this computer, that would be mean. The fact that I did not install malware on that computer did not stop IT from persecuting me, nor did the fact that there were not in fact any viruses on the computer I repaired.<br>
This occurrence is primarily funny due to how they went about investigating me for whatever it was they thought I did.
</p><br>
<p>
I will provide an approximate list of events because&mdash;as mentioned on the natalie info page&mdash;I am really bad at writing.
<ul>
<li>Day one: I repaired the broken laptop. A friend of mine was present during this process</li>
<li><p>
Day two: I am pulled out of class by the IT employee local to my school.
She asks to see my laptop.
I schedule a shutdown for 30 seconds from the current time and hand it to her.
She just sort of blankly stares at it (???) for 30 seconds, observes it shut down, and just hands it back to me. (I have no idea why she wanted to see it, lmao. To be clear, she never touched any input device on it.)
I proceed to my next class, uninstall my ssd, and tape it to my thigh (I was somewhat worried they would later try to take my laptop).
I get called out of class by security and escorted to the dean's office.
She is on the phone with someone at the IT department who is vaguely in charge of cybersecurity.
Cybersecurity lady says the Cuban malware line, I am interviewed by her and the dean for some amount of time.
I am told to go back to class
</p>
</li>
<li>
<p>
Day three: I am called down to the office again, with a security escort (I am perhaps the least likely person to require a security escort).
Another interview occures, the IT security lady says lots of things that demonstrate a general misunderstanding of computers.
They also interview the friend that was present when I repaired the computer.
</p>
</li>
<li>
<p>
Day eighteen (after winter break):
I get called down to the deans office again.
The dean apologizes for the hassle and states that no evidence against me was found (shocking).
</p>
</li>
</ul>
Unfortunately, while Oregon is a two party consent state for recording conversations and I would never think to violate the law, this interaction occured before the dean failed to file the paperwork to keep the kid that sent me unwanted sexual messages and followed me home away from me.
While I would never think to record conversations with someone without their consent of course, failing to file paperwork that is arguably required for my safety and then denying the meeting in which one stated they would file paperwork is certainly the sort of thing that would prompt me to begin recording all conversations I had with someone, were I the type of person to break the law of course.<br>
I really wish I had a recording of the IT security lady saying the cuban malware line. alas.
</p>
</section>
<section>
<h2>Leaking the wifi creds</h2>
<p>
To be fair, this one is my fault.
For context, during the summer of 2022, the IT department set up a new secure network.
Previously, there was pps-wifi and pps-wifi-guest.
pps-wifi used boring old wpa2 and every student ever knew the password.
The new network, pps-wireless, used MSCHAPv2 PEAP certificate based authentication.
It should be noted that this took place before any negative interactions I had with IT.
I was aware that the IT department used to offer summer jobs/internships to students, and, given I am reasonably interested in enterprise networks, emailed some guy at the IT department inquiring about the way they were setting up their new network.
Rather rudely, in his response he stated he was disappointed in me (I am not sure why he said this).
This of course prompted the completely reasonable response of deciding I would gain unauthorized access to the new network out of spite.
I will not go in to detail about how this was achieved, but I will state that I genuinely actually seriously (this comes off as sarcastic maybe, I am actually being serious though.) did not commit any crimes in doing so.
I was successful in getting credentials to the network, of course.
</p>
<p>
Now, this year, I was following my standard practice of paying little attention in class and instead working on some random computer thing.
IT had, for whatever reason, blocked the documentation on zsh.
I thought this was stupid and dumb and out of sheer boredom posted the credentials for pps-wireless in a school discord server.
Should I have done this? No, it was fully stupid, but oh well.
Anyways, I got interviewed by the dean and cybersecurity lady from IT.
For whatever reason, the dean said the word "human" 9 times in the interview, 6 of these times were consecutively.
The dean also kept talking down to me, which is probably because I'm autistic or something so naturally I mustn't understand anything ever.
</p>
<p>
Now then, funny part: They decided to suspend me for one day, which like sure, whatever, I'm fine with that, I did break the rules and actions like that do generally have consequences.
They did not however revoke the network certificate I had used and posted. I have no idea why they did not do this and thus given my previous encounters with IT, I must assume incompetence.
If my understanding of their network is correct (which is reasonably likely), they would have very easily been able to revoke the leaked cert and issue a new one. No clue why they didn't.
Anyways, the important part is I received this email:
</p>
<img src='/files/dean-email-why-it-matters.png'/>
<p>
Problems with this email:<ul>
<li>The person the dean describes as the director of IT is not the director of IT.</li>
<li>"the password of PPS"</li>
<li>
<p>
Claiming that she is not trying to fearmonger whilst blatantly fearmongering.<br>
The IT department does not have a reasonable means of determining if someone is trying to find the personal information of transgender staff and students that I can conceive of, the dean is clearly making things up.<br>
The claim does not even make sense, the answer to does a school contain transgender students or staff is just "yes."<br>
She is almost certainly only mentioning anything to do with transgender people because I am transgender. This seems mildly inappropriate to me as she is either trying to guilt me with the fact that my actions could have harmed other transgender people or implying that I wish harm upon other transgender people.
</p>
</li>
</ul>
Ridiculous email, 10/10, made me laugh.<br><br>
</p>
</section>
<section>
<h2>Misc</h2>
<ul>
<li>Day one: I repaired the broken laptop. A friend of mine was present during this process</li>
<li><p>
Day two: I am pulled out of class by the IT employee local to my school.
She asks to see my laptop.
I schedule a shutdown for 30 seconds from the current time and hand it to her.
She just sort of blankly stares at it (???) for 30 seconds, observes it shut down, and just hands it back to me. (I have no idea why she wanted to see it, lmao. To be clear, she never touched any input device on it.)
I proceed to my next class, uninstall my ssd, and tape it to my thigh (I was somewhat worried they would later try to take my laptop).
I get called out of class by security and escorted to the dean's office.
She is on the phone with someone at the IT department who is vaguely in charge of cybersecurity.
Cybersecurity lady says the Cuban malware line, I am interviewed by her and the dean for some amount of time.
I am told to go back to class
</p>
</li>
<li>
<p>
Day three: I am called down to the office again, with a security escort (I am perhaps the least likely person to require a security escort).
Another interview occures, the IT security lady says lots of things that demonstrate a general misunderstanding of computers.
They also interview the friend that was present when I repaired the computer.
</p>
</li>
<li>
<p>
Day eighteen (after winter break):
I get called down to the deans office again.
The dean apologizes for the hassle and states that no evidence against me was found (shocking).
</p>
</li>
<li>Freshman year, I gained access to multiple staff member's credentials. Given that I am not a particularly malicious person and only did this out of boredom, I did not do anything bad with them and instead reported the means by which I got them to IT.
I will leave guessing whether or not they fixed the issue I exploited as an exercise for the reader.</li>
</ul>
Unfortunately, while Oregon is a two party consent state for recording conversations and I would never think to violate the law, this interaction occured before the dean failed to file the paperwork to keep the kid that sent me unwanted sexual messages and followed me home away from me.
While I would never think to record conversations with someone without their consent of course, failing to file paperwork that is arguably required for my safety and then denying the meeting in which one stated they would file paperwork is certainly the sort of thing that would prompt me to begin recording all conversations I had with someone, were I the type of person to break the law of course.<br>
I really wish I had a recording of the IT security lady saying the cuban malware line. alas.
</p>
<hr>
<h2>Leaking the wifi creds</h2>
<p>
To be fair, this one is my fault.
For context, during the summer of 2022, the IT department set up a new secure network.
Previously, there was pps-wifi and pps-wifi-guest.
pps-wifi used boring old wpa2 and every student ever knew the password.
The new network, pps-wireless, used MSCHAPv2 PEAP certificate based authentication.
It should be noted that this took place before any negative interactions I had with IT.
I was aware that the IT department used to offer summer jobs/internships to students, and, given I am reasonably interested in enterprise networks, emailed some guy at the IT department inquiring about the way they were setting up their new network.
Rather rudely, in his response he stated he was disappointed in me (I am not sure why he said this).
This of course prompted the completely reasonable response of deciding I would gain unauthorized access to the new network out of spite.
I will not go in to detail about how this was achieved, but I will state that I genuinely actually seriously (this comes off as sarcastic maybe, I am actually being serious though.) did not commit any crimes in doing so.
I was successful in getting credentials to the network, of course.
</p>
<p>
Now, this year, I was following my standard practice of paying little attention in class and instead working on some random computer thing.
IT had, for whatever reason, blocked the documentation on zsh.
I thought this was stupid and dumb and out of sheer boredom posted the credentials for pps-wireless in a school discord server.
Should I have done this? No, it was fully stupid, but oh well.
Anyways, I got interviewed by the dean and cybersecurity lady from IT.
For whatever reason, the dean said the word "human" 9 times in the interview, 6 of these times were consecutively.
The dean also kept talking down to me, which is probably because I'm autistic or something so naturally I mustn't understand anything ever.
</p>
<p>
Now then, funny part: They decided to suspend me for one day, which like sure, whatever, I'm fine with that, I did break the rules and actions like that do generally have consequences.
They did not however revoke the network certificate I had used and posted. I have no idea why they did not do this and thus given my previous encounters with IT, I must assume incompetence.
If my understanding of their network is correct (which is reasonably likely), they would have very easily been able to revoke the leaked cert and issue a new one. No clue why they didn't.
Anyways, the important part is I received this email:
</p>
<img src='/files/dean-email-why-it-matters.png'/>
<p>
Problems with this email:<ul>
<li>The person the dean describes as the director of IT is not the director of IT.</li>
<li>"the password of PPS"</li>
<li>
<p>
Claiming that she is not trying to fearmonger whilst blatantly fearmongering.<br>
The IT department does not have a reasonable means of determining if someone is trying to find the personal information of transgender staff and students that I can conceive of, the dean is clearly making things up.<br>
The claim does not even make sense, the answer to does a school contain transgender students or staff is just "yes."<br>
She is almost certainly only mentioning anything to do with transgender people because I am transgender. This seems mildly inappropriate to me as she is either trying to guilt me with the fact that my actions could have harmed other transgender people or implying that I wish harm upon other transgender people.
</p>
</li>
</ul>
Ridiculous email, 10/10, made me laugh.<br><br>
</p>
<hr>
<h2>Misc</h2>
<ul>
<li>Freshman year, I gained access to multiple staff member's credentials. Given that I am not a particularly malicious person and only did this out of boredom, I did not do anything bad with them and instead reported the means by which I got them to IT.
I will leave guessing whether or not they fixed the issue I exploited as an exercise for the reader.</li>
</ul>
</div>
</section>
</main>
</body>
</html>

38
html/albert-hack-1.html
View File

@ -1,27 +1,31 @@
<html>
<head>
<title>Not a fan of IT</title>
<title>Albert</title>
<style>
$[cat style.css]
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
$[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/']
<div>
<h1>Friend hacked my website lol</h1>
<p>But how?</p>
<hr>
<p>
Prior to me rewriting the backend of my website, there was a bug that would allow a bash command in a comment inside $[echo \$\[\]] and not containing &lt; or &rt; to be executed if you querried the url /html/%2e%2e/files/posts-to-homepage/{post file}.
This was due to any url beginning with '/html/' being unconditionally put through parse_file(), which generates static content from the embedded bash in the html (see <a href='/html/site-info.html'></a>).
In addition to this, the source code of the server could be attained via a similar method, requesting the path of the file, but with /files/ or /html/ in front of it, followed by %2e%2e.
</p>
<p>
Albert was able to exploit this by first getting the source code of the webserver via the second method discussed above, examining it, and deducing the first vulnerability mentioned above.
Upon discovering the RCE available via the comment untrusted command evaluation, they were able to add an ssh key to my server and thus gain a shell.
Amazingly, at the same time that they did this, my other friend's girlfriend (appearing in the comments as gexfan) was halfheartedly trying to mess with my site.
This ended with around 15 messages on discord telling me my site had been hacked, only around two of which were from albert.
</p>
</div>
<main>
<section>
<h1>Friend hacked my website lol</h1>
<p>But how?</p>
</section>
<section>
<p>
Prior to me rewriting the backend of my website, there was a bug that would allow a bash command in a comment inside $[echo \$\[\]] and not containing &lt; or &rt; to be executed if you querried the url /html/%2e%2e/files/posts-to-homepage/{post file}.
This was due to any url beginning with '/html/' being unconditionally put through parse_file(), which generates static content from the embedded bash in the html (see <a href='/html/site-info.html'></a>).
In addition to this, the source code of the server could be attained via a similar method, requesting the path of the file, but with /files/ or /html/ in front of it, followed by %2e%2e.
</p>
<p>
Albert was able to exploit this by first getting the source code of the webserver via the second method discussed above, examining it, and deducing the first vulnerability mentioned above.
Upon discovering the RCE available via the comment untrusted command evaluation, they were able to add an ssh key to my server and thus gain a shell.
Amazingly, at the same time that they did this, my other friend's girlfriend (appearing in the comments as gexfan) was halfheartedly trying to mess with my site.
This ended with around 15 messages on discord telling me my site had been hacked, only around two of which were from albert.
</p>
</section>
</main>
</body>
</html>

27
html/blog/index.html
View File

@ -4,16 +4,21 @@
</style>
<body>
$[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/']
<h1>Blog? Thing</h1>
<p>I don't know if I will use this, but I am bored and thus making a blog system.</p>
<hr>
<h2>Posts</h2>
<table>
<tbody><tr><th><p>Title</p></th><th><p>Editted</p></th><th><p>Posted</p></th><th><p>Size</p></th></tr>
<tr><th colspan="4"><hr></th></tr>
$[for file in $(ls html/blog/posts); do echo "<tr><td><a href=\"/html/blog/posts/$file\">$file</a></td><td>$(stat -c %y "html/blog/posts/$file" | head -c 16)</td><td><p>$(stat -c %y html/blog/posts/$file | head -c 10)</p></td><td align=\"right\">$(numfmt --to=iec --suffix=B $(stat -c %s "html/blog/posts/$file"))</td></tr>"; done | sed 's/\/\//\//g']
<tr><th colspan="4"><hr></th></tr>
</tbody>
</table>
<main>
<section>
<h1>Blog? Thing</h1>
<p>I don't know if I will use this, but I am bored and thus making a blog system.</p>
</section>
<section>
<h2>Posts</h2>
<table>
<tbody><tr><th><p>Title</p></th><th><p>Editted</p></th><th><p>Posted</p></th><th><p>Size</p></th></tr>
<tr><th colspan="4"><hr></th></tr>
$[for file in $(ls html/blog/posts); do echo "<tr><td><a href=\"/html/blog/posts/$file\">$file</a></td><td>$(stat -c %y "html/blog/posts/$file" | head -c 16)</td><td><p>$(stat -c %y html/blog/posts/$file | head -c 10)</p></td><td align=\"right\">$(numfmt --to=iec --suffix=B $(stat -c %s "html/blog/posts/$file"))</td></tr>"; done | sed 's/\/\//\//g']
<tr><th colspan="4"><hr></th></tr>
</tbody>
</table>
</section>
<main>
</body>
</html>

24
html/cool-sites.html
View File

@ -4,12 +4,13 @@
$[cat style.css]
</style>
<title>Neat/odd/cool/relatively unknown/other adjective websites</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
$[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/']
<h1>Websites that I think are interesting or just odd, with varying obscurity and in no particular order</h1>
<hr>
<div>
<main>
<section>
<h1>Websites that I think are interesting or just odd, with varying obscurity and in no particular order</h1>
<ul>
<li><a href='https://eightyeightthirty.one/'>eightyeightthirty.one</a> A graph of website badges.</li>
<li><a href='http://lena.kiev.ua/'>lena.kiev.ua</a> Cool transgender ukranian lady who makes bathtub estrogen.</li>
@ -28,12 +29,15 @@
<li><a href='https://eda.gay'>eday.gay</a> She owns less thinkpads than I do. Brainwormed.</li>
<li><a href='https://www.yourworldoftext.com/apionet'>https://www.yourworldoftext.com/apionet</a> buzzzzzzzzzzzzzzzzzzz</li>
</ul>
</div>
This web page compelled me to put it somewhere:
<a href="https://citrons.xyz/a/memetic-apioform-page.html"><img src="https://citrons.xyz/a/static/apiopage.png"/></a>
<h1>entities I sometimes interact with physically</h1>
winter: <a href='https://bunbun.dev'>bunbun.dev</a><br>
odette: <a href='https://puppygirl.systems'>puppygirl.systems</a> (nothing is there yet)<br>
albert: <a href='https://iso-9995-9.com'>iso-9995-9.com</a> (down? dns issue maybe)<br
This web page compelled me to put it somewhere:
<a href="https://citrons.xyz/a/memetic-apioform-page.html"><img src="https://citrons.xyz/a/static/apiopage.png"/></a>
</section>
<section>
<h1>entities I sometimes interact with physically</h1>
<span>winter: <a href='https://bunbun.dev'>bunbun.dev</a></span>
<span>odette: <a href='https://puppygirl.systems'>puppygirl.systems</a> (nothing is there yet)</span>
<span>albert: <a href='https://iso-9995-9.com'>iso-9995-9.com</a> (down? dns issue maybe)</span>
</section>
</main>
</body>
</html>

15
html/discord.html
View File

@ -1,15 +1,20 @@
<html>
<head>
<title>Natalie information</title>
<title>Discord</title>
<style>
$[cat style.css]
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
$[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/']
<h1>Discord</h1>
As one who is not particularly partial to internet centralization, and seeing as I have had discord accounts get banned for seemingly nothing in the past, I am not particularly fond of using discord.
Unfortunately, humans that I like speaking to use discord in large enough volumes that it is likely to be rather challenging to convince all of the ones I particularly care about to migrate to some other platform.
This is not a very nice state of things.
<main>
<section>
<h1>Discord</h1>
As one who is not particularly partial to internet centralization, and seeing as I have had discord accounts get banned for seemingly nothing in the past, I am not particularly fond of using discord.
Unfortunately, humans that I like speaking to use discord in large enough volumes that it is likely to be rather challenging to convince all of the ones I particularly care about to migrate to some other platform.
This is not a very nice state of things.
</section>
<main>
</body>
</html>

2
html/footer.html Normal file
View File

@ -0,0 +1,2 @@
<footer>
</footer>

17
html/header.html
View File

@ -1,8 +1,11 @@
<header class='container'>
<h1>$[(for i in {0..10}; do echo Natalieee.net; done; echo Catalieee.net) | shuf -n1]<h1>
<a href='/'>home</a>
<a href=$PREV_URL$>back</a>
<a href='/html/site-info.html'>site info</a>
<a href='/html/natalie-info.html'>natalie info</a>
<hr>
<header>
<nav>
<ul>
<li><h1>$[(for i in {0..10}; do echo Natalieee.net; done; echo Catalieee.net) | shuf -n1]<h1></li>
<li><a href='/'>home</a></li>
<li><a href=$PREV_URL$>back</a>
<li><a href='/html/site-info.html'>site info</a></li>
<li><a href='/html/natalie-info.html'>natalie info</a></li>
</ul>
</nav>
</header>

217
html/my-laptop.html
View File

@ -1,100 +1,80 @@
<html>
<head>
<title>laptop</title>
<style>
$[cat style.css]
.code-container {
display: flex;
flex-direction: column;
}
.io-container {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-right: 25px;
}
.arrow {
margin: 50px;
align-items: center;
font-size: 50px;
}
pre {
width: 100%;
border: 1px dashed #000;
padding: 10px;
overflow-x: auto;
}
</style>
</head>
<body>
$[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/']
<div>
<h1>DEPRECATED My laptop</h1>
<p>see <a href='/html/blog/posts/new-laptop.html'>blog post</a>
<p>
Currently, I am using a T530 that has been heavily modified.
I used to use a W530, but I fucked it up trying to get tianocore on it and haven't bothered fixing the bios on it yet.
I have preordered a Framework 16 because I am the definition of their target audience.
Since W530s and T530s are basically identical baring the mainboard, there is no external difference between my W530 and T530 because I just yoinked all the parts from the W530.<br>
my-laptop.html was last modified on $[stat -c %y ./html/my-laptop.html | head -c 10].<br>
</p><hr>
<image-column-container>
<image-container style='min-width: 33%'>
<flex-column style='max-width: 100%'>
<captioned-image>
<img src="/files/laptop-keyboard.png" alt="photograph of my laptops keyboard, which is blank because I sanded it.">
<p>photograph of my laptops keyboard, which is blank because I sanded it.</p>
</captioned-image>
<captioned-image>
<img src="/files/laptop-radio.jpg" alt="The software defined radio that goes in my laptop's disc drive.">
<p>The software defined radio that goes in my laptop's disc drive.</p>
</captioned-image>
<captioned-image>
<img src="/files/keybinds_graph.png" alt="Graph of my keybindings (good luck).">
<p>Graph of my keybinds (good luck).</p>
</captioned-image>
<captioned-image>
<img src="/files/laptop-charger-barrel.jpg" alt="charger bodge.">
<p>charger bodge.</p>
</captioned-image>
<flex-column>
</image-container>
<text-column>
<p>I have put an unreasonable amount of time in to messing with my laptop and as such am equally unreasonably proud of it.<br></p>
<h3>Hardware modifications I have made to my laptop:</h3>
<head>
<title>laptop</title>
<style>
$[cat style.css]
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
$[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/']
<main>
<section>
<h1>DEPRECATED My laptop</h1>
<p>see <a href='/html/blog/posts/new-laptop.html'>blog post</a>
<p>
<ul>
<li>Installed an older model's keyboard</li>
<li>Sanded the keyboard such that it is blank.</li>
<li>Upgraded most of its parts.</li>
<li>Put an SDR in its disc drive</li>
<li>Replaced the charging barrel with a worst bodge ever contest finalist because I left my charger at school for a weekend once and wanted to use my laptop.</li>
</ul>
Additionally, I have written a custom xkb file. Unfortunately the geometry file hasn't been updated since I modded in the new keyboard, but here it is anyways: <br>
Currently, I am using a T530 that has been heavily modified.
I used to use a W530, but I fucked it up trying to get tianocore on it and haven't bothered fixing the bios on it yet.
I have preordered a Framework 16 because I am the definition of their target audience.
Since W530s and T530s are basically identical baring the mainboard, there is no external difference between my W530 and T530 because I just yoinked all the parts from the W530.<br>
my-laptop.html was last modified on $[stat -c %y ./html/my-laptop.html | head -c 10].<br>
</p>
<captioned-image style='max-width: 100%'>
<img src='/files/laptop-xkb-geometry.png'/><br>
<p>my xkb geometry file compiled to a pdf</p>
</captioned-image>
<p>
Disregard the fucked up escape key, I was messing with it earlier. My keyboard isn't that notable beyond binding control to caps lock and binding the old control key to mode_switch.
Additionally, when mode_switch is pressed while an alphabetic key is pressed, it types a greek letter instead.
</p>
<p>
I run artix (for the anti systemd meme), though upon getting my framework I intend to switch to gentoo.
I use i3 as my window manager with a somewhat cursed script to programatically generate it's config from a yaml file.
This script is vaguely necessary because <ul>
<li> I wanted a (programatically generated) graph of all my keybinds as leaf nodes with different modes as trunk nodes and individual keys as edges </li>
<li> I wanted to easily nest an arbitrarily large number of modes without it being a hassle </li>
</ul><br>
an example of the function of this script is something like<br><br>
<div class="code-container">
<div class="io-container">
<h3>Input (yaml):</h3>
<pre><code>
</section>
<section>
<image-column-container>
<image-container style='min-width: 33%'>
<flex-column style='max-width: 100%'>
<div class=captioned-image>
<img src="/files/laptop-keyboard.png" alt="photograph of my laptops keyboard, which is blank because I sanded it.">
<p>photograph of my laptops keyboard, which is blank because I sanded it.</p>
</div>
<div class=captioned-image>
<img src="/files/laptop-radio.jpg" alt="The software defined radio that goes in my laptop's disc drive.">
<p>The software defined radio that goes in my laptop's disc drive.</p>
</div>
<div class=captioned-image>
<img src="/files/keybinds_graph.png" alt="Graph of my keybindings (good luck).">
<p>Graph of my keybinds (good luck).</p>
</div>
<div class=captioned-image>
<img src="/files/laptop-charger-barrel.jpg" alt="charger bodge.">
<p>charger bodge.</p>
</div>
<flex-column>
</image-container>
<text-column>
<p>I have put an unreasonable amount of time in to messing with my laptop and as such am equally unreasonably proud of it.<br></p>
<h3>Hardware modifications I have made to my laptop:</h3>
<p>
<ul>
<li>Installed an older model's keyboard</li>
<li>Sanded the keyboard such that it is blank.</li>
<li>Upgraded most of its parts.</li>
<li>Put an SDR in its disc drive</li>
<li>Replaced the charging barrel with a worst bodge ever contest finalist because I left my charger at school for a weekend once and wanted to use my laptop.</li>
</ul>
Additionally, I have written a custom xkb file. Unfortunately the geometry file hasn't been updated since I modded in the new keyboard, but here it is anyways: <br>
</p>
<div class=captioned-image style='max-width: 100%'>
<img src='/files/laptop-xkb-geometry.png'/><br>
<p>my xkb geometry file compiled to a pdf</p>
</div>
<p>
Disregard the fucked up escape key, I was messing with it earlier. My keyboard isn't that notable beyond binding control to caps lock and binding the old control key to mode_switch.
Additionally, when mode_switch is pressed while an alphabetic key is pressed, it types a greek letter instead.
</p>
<p>
I run artix (for the anti systemd meme), though upon getting my framework I intend to switch to gentoo.
I use i3 as my window manager with a somewhat cursed script to programatically generate it's config from a yaml file.
This script is vaguely necessary because <ul>
<li> I wanted a (programatically generated) graph of all my keybinds as leaf nodes with different modes as trunk nodes and individual keys as edges </li>
<li> I wanted to easily nest an arbitrarily large number of modes without it being a hassle </li>
</ul><br>
an example of the function of this script is something like<br><br>
<div class="code-container">
<div class="io-container">
<h3>Input (yaml):</h3>
<pre><code>
keybinds:
a: !Mode
name: a
@ -102,35 +82,36 @@ a: !Mode
b: !Mode
name: b
keybinds: ...
</code></pre>
</div>
<div class="io-container">
<h3>Output (i3config):</h3>
<pre><code>
</code></pre>
</div>
<div class="io-container">
<h3>Output (i3config):</h3>
<pre><code>
mode a {
bindsym b mode b
bindsym b mode b
}
mode b {
bindsym ... ...
bindsym ... ...
}
bindsym a mode a
</code></pre>
</div>
</div>
From the yaml config, my python script can parse it either in to a (really bad) graph of keybinds (using the graphviz library or something like that) or in to a valid i3 config file.
In my real config, I have a mode 'base' which is the default mode with no keybinds other than mod4+space, followed by a mode 'space' reached by pressing mod4+space.
From 'space' mode, other modes may be accessed, such as 'workspaces or windows' mode, bound under w.
This gets rather absurd (intentionally so) very quickly.
The combination to move to workspace 0 while in 'base' mode is to press mod4+space ('space' mode), w ('workspaces_or_windows' mode), s ('workspaces'), g ('workspaces_goto'), 0 (move to workspace 0).
</p>
<p>
This system results in horrible user experience (but I don't care), great security (close to least intuitive setup possible), and&mdash;most importantly&mdash;an incredibly stupid graph of keybinds.
I find this unreasonably amusing.
</p>
</text-column>
</image-column-container>
</div>
</body>
</code></pre>
</div>
</div>
From the yaml config, my python script can parse it either in to a (really bad) graph of keybinds (using the graphviz library or something like that) or in to a valid i3 config file.
In my real config, I have a mode 'base' which is the default mode with no keybinds other than mod4+space, followed by a mode 'space' reached by pressing mod4+space.
From 'space' mode, other modes may be accessed, such as 'workspaces or windows' mode, bound under w.
This gets rather absurd (intentionally so) very quickly.
The combination to move to workspace 0 while in 'base' mode is to press mod4+space ('space' mode), w ('workspaces_or_windows' mode), s ('workspaces'), g ('workspaces_goto'), 0 (move to workspace 0).
</p>
<p>
This system results in horrible user experience (but I don't care), great security (close to least intuitive setup possible), and&mdash;most importantly&mdash;an incredibly stupid graph of keybinds.
I find this unreasonably amusing.
</p>
</text-column>
</image-column-container>
</section>
</main>
</body>
</html>

125
html/natalie-info.html
View File

@ -4,65 +4,76 @@
<style>
$[cat style.css]
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
$[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/']
<div>
<h1>What is a "natalie?"</h1>
<a href='/html/natalie-sightings.html'>natalie</a> is an entity that has been observed to be called natalie.<br>
it is known to be referred to as a "she" or an "it."<br>
it is frequently told it is "cat brained" by humans it associates with.<br>
natalie-info.html was last modified on $[stat -c %y ./html/natalie-info.html | head -c 10].<hr>
<h2>Timezone (this is currently broken? I don't know why. The correct time is PDT or the other one)</h2>
its really quite odd, the commands run to generate this section are just date "+%Z (UTC%z)" and date +%T. When I run these in an ssh session, they give expected output, but when the server executes them, it thinks its in UTC. baffling.
Timezone I am in: $[date "+%Z (UTC%z)"]<br>
The local time as of this page being requested was: $[date +%T]<hr>
<h2>Other online presence</h2>
<a href='/html/discord.html'>Discord: _natalieeee_</a><br>
Email: natalie@natalieee.net<hr>
<h2>Other things</h2>
I will probably include information about myself that is vaguely identifiable.
This is a bad idea, but I don't think anyone actually cares about messing with me enough to do anything bad with whatever information is available here.
I am comically bad at writing about myself, so I will disguise my shortcomings by making a list.
<ul>
<li>I would be a senior if I was going to hichschool. I am not going to highschool because I decided it was bad and that I would be going to college instead.</li>
<li>I really like messing with anything technical, be it computers or locks (these interests are at times problematic for my highschool, but oh well).</li>
<li>In addition to standard hackery hobbies, I am interested in machining, urban planning, public transportation (especially rail vehicles (insert joke about autism)), and languistics (this one might be covered by "standard hackery hobbies"). I also seem to enjoy overusing parenthesis.</li>
<li>The number of people I know who can use my computer is 1 (me). I have <italic>really</italic> weird keybindings and use a nonstandard keyboard layout.</li>
<li>I own twelve lenovo thinkpads manufactured between 2010 and 2014.</li>
<li><del>My laptop which I use as my main computer is a modified lenovo thinkpad T530 <a href=/html/my-laptop.html>which is pretty neat.</a> </del><a href=/html/blog/posts/new-laptop.html>refer to this</a></li>
</ul>
<hr>
<h2>Vaguely funny things I have done (Don't read this if you are employed by Portland public schools)</h2>
<ul>
<li>Nearly gotten suspended for allegedly installing (The IT department genuinely said this) """Cuban malware""" on the school network. This was entirely not grounded in reality, IT is just insane. (<a href='/html/I-dont-like-IT.html'>Minor tangent</a>)</li>
<li>Gotten suspended for exactly one day for posting the school district's wifi password on discord (stupid, but I was bored. Also, IT was mean to me, see tangent linked above.)</li>
</ul>
<hr>
<h2>Music I listen to (you should too)</h2>
I am going to use this as a means by which I can impose music recommendations upon whoever reads this page.
According to a hacky script I wrote that tracks what songs I listen to with mpd, here are artists I like:<br>
place playcount artist<br>
1 1935 Black Dresses<br>
2 745 Ada Rook<br>
3 425 Angel Electronics<br>
4 419 rook&nomie<br>
5 360 Reliqa<br>
6 282 Destroy Boys<br>
7 238 Rachel Rose Mitchell<br>
8 221 Cellar Darling<br>
9 218 Florence + The Machine<br>
10 193 Spiritbox<br>
11 141 Inferiority Complex<br>
12 111 Ignea<br>
13 101 Ada Rook/ASH NERVE<br>
14 97 Ada Rook/Sunrise Transparence<br>
15 80 Penelope Scott<br>
16 71 Seas on the Moon/Lena Scissorhands<br>
17 61 Ada Rook/Ash Nerve/Sunrise Transparence/Stephen Spies<br>
18 60 Seas on the Moon<br>
19 52 girl in red<br>
20 50 Cassyette<br>
</div>
<main>
<section>
<h1>What is a "natalie?"</h1>
<span><a href='/html/natalie-sightings.html'>natalie</a> is an entity that has been observed to be called natalie.</span>
it is known to be referred to as a "she" or an "it."
it is frequently told it is "cat brained" by humans it associates with.
natalie-info.html was last modified on $[stat -c %y ./html/natalie-info.html | head -c 10].
</section>
<section>
<h2>Timezone (this is currently broken? I don't know why. The correct time is PDT or the other one)</h2>
its really quite odd, the commands run to generate this section are just date "+%Z (UTC%z)" and date +%T. When I run these in an ssh session, they give expected output, but when the server executes them, it thinks its in UTC. baffling.
Timezone I am in: $[date "+%Z (UTC%z)"]<br>
The local time as of this page being requested was: $[date +%T]
</section>
<section>
<h2>Other online presence</h2>
<a href='/html/discord.html'>Discord: _natalieeee_</a>
Email: natalie@natalieee.net
</section>
<section>
<h2>Other things</h2>
I will probably include information about myself that is vaguely identifiable.
This is a bad idea, but I don't think anyone actually cares about messing with me enough to do anything bad with whatever information is available here.
I am comically bad at writing about myself, so I will disguise my shortcomings by making a list.
<ul>
<li>I would be a senior if I was going to hichschool. I am not going to highschool because I decided it was bad and that I would be going to college instead.</li>
<li>I really like messing with anything technical, be it computers or locks (these interests are at times problematic for my highschool, but oh well).</li>
<li>In addition to standard hackery hobbies, I am interested in machining, urban planning, public transportation (especially rail vehicles (insert joke about autism)), and languistics (this one might be covered by "standard hackery hobbies"). I also seem to enjoy overusing parenthesis.</li>
<li>The number of people I know who can use my computer is 1 (me). I have <italic>really</italic> weird keybindings and use a nonstandard keyboard layout.</li>
<li>I own twelve lenovo thinkpads manufactured between 2010 and 2014.</li>
<li><del>My laptop which I use as my main computer is a modified lenovo thinkpad T530 <a href=/html/my-laptop.html>which is pretty neat.</a> </del><a href=/html/blog/posts/new-laptop.html>refer to this</a></li>
</ul>
</section>
<section>
<h2>Vaguely funny things I have done (Don't read this if you are employed by Portland public schools)</h2>
<ul>
<li>Nearly gotten suspended for allegedly installing (The IT department genuinely said this) """Cuban malware""" on the school network. This was entirely not grounded in reality, IT is just insane. (<a href='/html/I-dont-like-IT.html'>Minor tangent</a>)</li>
<li>Gotten suspended for exactly one day for posting the school district's wifi password on discord (stupid, but I was bored. Also, IT was mean to me, see tangent linked above.)</li>
</ul>
</section>
<section>
<h2>Music I listen to (you should too)</h2>
I am going to use this as a means by which I can impose music recommendations upon whoever reads this page.
According to a hacky script I wrote that tracks what songs I listen to with mpd, here are artists I like:<br>
place playcount artist<br>
1 1935 Black Dresses<br>
2 745 Ada Rook<br>
3 425 Angel Electronics<br>
4 419 rook&nomie<br>
5 360 Reliqa<br>
6 282 Destroy Boys<br>
7 238 Rachel Rose Mitchell<br>
8 221 Cellar Darling<br>
9 218 Florence + The Machine<br>
10 193 Spiritbox<br>
11 141 Inferiority Complex<br>
12 111 Ignea<br>
13 101 Ada Rook/ASH NERVE<br>
14 97 Ada Rook/Sunrise Transparence<br>
15 80 Penelope Scott<br>
16 71 Seas on the Moon/Lena Scissorhands<br>
17 61 Ada Rook/Ash Nerve/Sunrise Transparence/Stephen Spies<br>
18 60 Seas on the Moon<br>
19 52 girl in red<br>
20 50 Cassyette<br>
</section>
</main>
</body>
</html>

14
html/natalie-sightings.html
View File

@ -4,12 +4,18 @@
$[cat style.css]
</style>
<title>Natalie sightings</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
$[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/']
<h1>Natalie Sightings</h1>
<p>They are reasonably rare. <br>These photographs are uneditted, my various cameras are just fucked up. Ignore the annoying aspect ratio.</p>
<hr>
<flex-grid>$[for file in files/natalie-sightings/*; do echo "<flex-grid-item><img src=\"/$file\" width=\"250\"/></flex-grid-item>"; done]</flex-grid>
<main>
<section>
<h1>Natalie Sightings</h1>
<p>They are reasonably rare. <br>These photographs are uneditted, my various cameras are just fucked up. Ignore the annoying aspect ratio.</p>
</section>
<section>
<flex-grid>$[for file in files/natalie-sightings/*; do echo "<flex-grid-item><img src=\"/$file\" width=\"250\"/></flex-grid-item>"; done]</flex-grid>
</section>
</main>
</body>
</html>

41
html/random-thoughts.html
View File

@ -3,42 +3,17 @@
<title>Natalie information</title>
<style>
$[cat style.css]
details {
border: 2px dashed #ccc;
padding: 10px;
width: 90%;
margin-bottom: 10px;
}
summary {
cursor: pointer;
}
summary::-webkit-details-marker {
display: none;
}
div {
position: relative;
padding-top: 30px;
padding-bottom: 50%;
height: fit-content;
}
div iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
$[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/']
<h1>arbitrary thoughts generated by natalie</h1>
I am bad at thinking of things to make blog posts for. this webpage might contain things that I would put in a blog post if I was more proficient at writing filler. It might also contain other things.
<hr>
$[stat -c "%W %n" ./html/thoughts/* | sort -n --reverse | cut -d ' ' -f2- | while read -r file; do echo "<details><summary>$(stat -c'%w' $file | cut -d '.' -f1): $(grep '^<!-- TITLE:' $file | sed 's/^<!-- TITLE: //; s/-->$//')</summary><div><iframe src=.$file></iframe></div></details>"; done]
<main>
<section>
<h1>arbitrary thoughts generated by natalie</h1>
I am bad at thinking of things to make blog posts for. this webpage might contain things that I would put in a blog post if I was more proficient at writing filler. It might also contain other things.
</section>
$[stat -c "%W %n" ./html/thoughts/* | sort -n --reverse | cut -d ' ' -f2- | while read -r file; do echo "<section><details><summary>$(stat -c'%w' $file | cut -d '.' -f1): $(grep '^<!-- TITLE:' $file | sed 's/^<!-- TITLE: //; s/-->$//')</summary><div>$(python -c "import utils; print(utils.parse_file('$file'))")</details></section>"; done]
</main>
</body>
</html>

64
html/server-migration.html
View File

@ -4,36 +4,44 @@
<style>
$[cat style.css]
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
$[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\$PREV_URL\$/"{prev}"/']
<h1>This website runs on a big server now.</h1>
<p>It used to run on a dell optiplex 3040 I had laying around, but I got a server from the school basement (you can just take them, apparently).</p>
<hr>
<image-column-container>
<image-container>
<captioned-image>
<img src="/files/natalie-holding-server.png" alt="me holding a server">
<p>The server in question.</p>
</captioned-image>
<image-container>
<text-column>
<h2>Why do I have a server from my schools basement?</h2>
<p>
My school is currently at a temporary campus while our regular campus is being renovated.
I hope this means there will be less lead in the water when they are done, but given how the district is, who knows.
The current campus is notably smaller than the regular campus, thus a large amount of things are in storage.
The man who is in charge of the storage and moving stored items back to the new campus does not like moving items.
For this reason, when I ask him to let me in to the school's basement to just take random cool things, he says yes.
</p>
<h2>It's actually kind of horrible that I have this server.</h2>
<p>
This server used to be part of the district's network infrastructure.
When I got it, it had an unencrypted raid array on the disks that contained district information.
It should not have been stored like this, and I definitely should not have been allowed to take it.
I did of course wipe the drives and didn't even look at what was on them beyond identifying that it was from the district because I am not evil.
</p>
</text-column>
</image-column-container>
<main>
<section>
<h1>This website runs on a big server now.</h1>
<p>It used to run on a dell optiplex 3040 I had laying around, but I got a server from the school basement (you can just take them, apparently).</p>
</section>
<section>
<image-column-container>
<image-container>
<flex-column>
<div class=captioned-image>
<img src="/files/natalie-holding-server.png" alt="me holding a server">
<p>The server in question.</p>
</div>
</flex-column>
</image-container>
<text-column>
<h2>Why do I have a server from my schools basement?</h2>
<p>
My school is currently at a temporary campus while our regular campus is being renovated.
I hope this means there will be less lead in the water when they are done, but given how the district is, who knows.
The current campus is notably smaller than the regular campus, thus a large amount of things are in storage.
The man who is in charge of the storage and moving stored items back to the new campus does not like moving items.
For this reason, when I ask him to let me in to the school's basement to just take random cool things, he says yes.
</p>
<h2>It's actually kind of horrible that I have this server.</h2>
<p>
This server used to be part of the district's network infrastructure.
When I got it, it had an unencrypted raid array on the disks that contained district information.
It should not have been stored like this, and I definitely should not have been allowed to take it.
I did of course wipe the drives and didn't even look at what was on them beyond identifying that it was from the district because I am not evil.
</p>
</text-column>
</image-column-container>
</section>
</main>
</body>
</html>

17
html/stats.html
View File

@ -5,11 +5,16 @@
</head>
<body>
$[python3 -c 'import utils; print(utils.parse_file("html/header.html"))' | sed 's/\\$PREV_URL\\$/".."/']
<h1>Stats! Data! Wow!</h1>
Boring information about me and my computers, delivered right to your web browser (or terminal)!<br>
Why collect information about your users when your users could collect information about you?
<hr>
<h2>Currently available information:</h2>
$[for line in $(cat main.py | grep Route -A1 | grep '/stats/' | sed "s/'//g; s/,//g"); do echo "$(make-link $line)<br>"; done]
<main>
<section>
<h1>Stats! Data! Wow!</h1>
Boring information about me and my computers, delivered right to your web browser (or terminal)!<br>
Why collect information about your users when your users could collect information about you?
</section>
<section>
<h2>Currently available information:</h2>
$[for line in $(cat main.py | grep Route -A1 | grep '/stats/' | sed "s/'//g; s/,//g"); do echo "$(make-link $line)<br>"; done]
</section>
</main>
<body>
</html>

275
style.css
View File

@ -8,71 +8,86 @@
src: url('/font/MapleMonoItalic.ttf') format('truetype');
}
@media (max-width: 615px) {
body {
margin: 0;
}
/* @media (max-width: 615px) { */
/* body { */
/* margin: 0; */
/* } */
header {
display: block;
/* header { */
/* display: block; */
/* } */
/* } */
/* @media (max-width: 615px) { */
/* body { */
/* margin: 0; */
/* } */
/* header { */
/* display: none; */
/* } */
/* } */
/* @media (min-width: 730px) and (max-width: 799px) { */
/* body { */
/* margin: 0 0; */
/* min-width: 100% */
/* } */
/* header { */
/* display: flex; */
/* } */
/* } */
/* @media (min-width: 1000px) and (max-width: 1299px) { */
/* body { */
/* margin: 0 10%; */
/* min-width: 80% */
/* } */
/* li > p { */
/* width: 70%; */
/* } */
/* header { */
/* display: flex; */
/* } */
/* } */
/* @media (min-width: 1300px) { */
/* body { */
/* margin: 0 20%; */
/* min-width: 60%; */
/* } */
/* li > p { */
/* width: 60%; */
/* } */
/* header { */
/* display: flex; */
/* } */
/* } */
@media (max-width: 1400px) {
body {
margin: 0%;
width: 100%
}
}
@media (max-width: 615px) {
body {
margin: 0;
}
header {
display: none;
}
}
@media (min-width: 730px) and (max-width: 799px) {
body {
margin: 0 0;
min-width: 100%
}
header {
display: block;
}
}
@media (min-width: 1000px) and (max-width: 1299px) {
body {
margin: 0 10%;
min-width: 80%
}
li > p {
width: 70%;
}
header {
display: block;
}
}
@media (min-width: 1300px) {
body {
@media (min-width: 1400px) {
body {
margin: 0 20%;
min-width: 60%;
}
li > p {
width: 60%;
}
header {
display: block;
}
}
:root {
--bg: #F2F4F8;
--alt-bg: #dde1e6;
--fg: #161616;
--hl: #33b1ff;
--link: #0f62fe;
--visited-link: #673ab7;
--highlight: #0f62fe;
@ -90,10 +105,11 @@
--bg: #161616;
--alt-bg: #262626;
--fg: #f2f4f8;
--hl: #0f62fe;
--link: #33b1ff;
--visited-link: #be95ff;
--highlight: #33b1ff;
--gray: #393939;
--gray: #202020;
}
}
@ -106,26 +122,46 @@ body {
overflow: auto;
word-wrap: break-word;
overflow-wrap: break-word;
padding: 0 10px;
padding-bottom: 10px;
}
main {
display: flex;
flex-direction: column;
}
header {
padding-top: 10px;
position: -webkit-sticky;
position: sticky;
background-color: var(--bg);
top: 0;
transform: translateX(-10px);
display: absolute;
width: calc(100% + 20px);
width: 100%;
z-index: 100000;
display: flex;
align-items: flex-start;
overflow: clip;
h1 {
background: var(--bg);
padding-left: 10px;
display: inline;
font-size: 26px;
> nav {
border-bottom: 1px solid var(--fg);
width: 100%;
> ul {
margin: 0;
padding: 0;
display: flex;
align-items: baseline;
justify-content: flex-start;
list-style-type: none;
> li {
padding: 10px;
> h1 {
display: inline
}
}
}
}
}
@ -135,6 +171,66 @@ header {
text-wrap: wrap;
}
form {
background: var(--alt-bg);
display: flex;
flex-direction: column;
width: clamp(300px, 500px, 50%);
padding: 20px;
margin: 15px 0;
box-shadow: 10px 10px var(--gray);
> button {
margin: 10px;
padding: 10px;
border: none;
color: var(--fg);
background: var(--bg);
}
> button:hover {
background: var(--hl);
}
> input {
color: var(--fg);
margin: 10px;
border: none;
background: var(--bg)
}
> input:focus {
outline: none;
}
}
section {
display: flex;
flex-direction: column;
justify-content: center;
background: var(--alt-bg);
box-shadow: 10px 10px var(--gray);
margin: 15px 30px;
padding: 20px;
/* border-bottom: 1px solid var(--fg); */
> p {
margin: 5px 0;
}
> h1, h2, h3 {
margin: 10px 0;
}
}
.ignore-section {
background: var(--bg);
box-shadow: none;
margin: none;
padding: 5px 10px;
}
table {
width: auto;
border-collapse: collapse;
@ -187,6 +283,19 @@ img {
height: auto;
}
summary {
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.post {
background: var(--alt-bg);
box-shadow: 10px 10px var(--gray);
margin: 30px;
padding: 20px;
}
::-webkit-scrollbar {
width: 0px;
height: 0px;
@ -197,7 +306,14 @@ img {
}
code, pre {
background: var(--alt-bg)
background: var(--bg);
margin: 10px;
padding: 5px;
overflow: clip;
}
xmp {
margin: 20px;
}
a {
@ -212,28 +328,27 @@ a:visited {
background: var(--highlight)
}
captioned-image {
max-width: 33%;
.captioned-image {
display: flex;
flex-direction: column;
justify-content: flex-start;
max-width: 100%;
background: var(--bg);
margin-bottom: 15px;
margin-right: 10px;
> img {
height: auto;
}
> * {
width: 100%;
border: 5px solid var(--alt-bg);
background: var(--alt-bg);
padding: 10px;
}
> p {
display: flex;
justify-content: center;
text-align: center;
position: relative;
top: -20px;
padding: 5px;
margin: 0;
}
margin-right: 15px;
}
image-column-container {
@ -251,6 +366,7 @@ image-container {
}
flex-column {
width: 100%;
display: flex;
flex-direction: column;
@ -264,6 +380,10 @@ image-column img {
height: auto;
}
text-column {
max-width: 66%
}
flex-grid {
display: flex;
flex-wrap: wrap;
@ -284,7 +404,8 @@ flex-grid-item > img {
@media (max-width: 700px) {
image-container {display: inline-block; min-width: 100% !important}
captioned-image {min-width: 100%; margin-right: 0;}
text-column {display: inline-block}
div.captioned-image {min-width: 100%; margin-right: 0;}
text-column {display: inline-block; max-width: 100%;}
image-column-container {flex-direction: column;}
header > nav > ul > li > h1 { display: none};
}