Subpage 2.0!
This commit is contained in:
parent
c6d72516d5
commit
e1de101cc7
9 changed files with 81 additions and 66 deletions
|
|
@ -195,7 +195,12 @@ function converter(html, dynamic = true) {
|
|||
|
||||
return "";
|
||||
},
|
||||
"TOPBAR": `<div id="topbar"><h3><a href="/socials">Socials</a></h3></div>`,
|
||||
"TOPBAR": `<div id="topbar">
|
||||
<h3><a class="chip" href="/">Home</a>
|
||||
<a class="chip" href="/socials">Socials</a>
|
||||
<a class="chip" href="/stats">Stats</a>
|
||||
<a class="chip" href="/faq">Nerd FAQ</a></h3>
|
||||
</div>`,
|
||||
"CUSTOM_STATUS": () => {
|
||||
if (api.lanyard.activities[0] && api.lanyard.activities[0].type == 4) {
|
||||
var status = api.lanyard.activities[0]
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@
|
|||
|
||||
<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">
|
||||
|
|
|
|||
|
|
@ -24,9 +24,7 @@
|
|||
<body>
|
||||
{WEATHER_MODIFIER}
|
||||
|
||||
<a href="../" class="chip">Home</a>
|
||||
<a href="../socials" class="chip">Socials</a>
|
||||
<a href="../stats" class="chip">Stats</a>
|
||||
{TOPBAR}
|
||||
<h1>FAQ (and more!)</h1>
|
||||
<div class="mainDiv">
|
||||
<h2><br>1. Questions & Answers<hr></h2>
|
||||
|
|
@ -34,6 +32,7 @@
|
|||
<h3>Why are so many words colored?</h3>
|
||||
<p>I like the way it looks to have certain words be highlighted, makes it look fancier and easier to read (imo). So, when I remade this site, I went ahead and added an <em>Automatic Word Highlighting System!</em> This allows me have words automatically highlighted, on the server side, without having to do it in the code manually. Here's the current list of highlighted words:</p>
|
||||
<p class="textBlock">{ALL_HIGHLIGHTS}</p>
|
||||
<p>As time continues, more words are added to the highlighting list, and I'm slowly adding more features, like disabling case sensitivity, boldness, italics, outlines, and more.</p>
|
||||
<br>
|
||||
<h3>I thought the site doesn't use Javascript? So why is it there?</h3>
|
||||
<p>Originally, all my sites were completely Javascript free. As of late, though, I decided to add Javascript to this one. Javascript will <b><em>NEVER</em></b> be a requirement on this site. Javascript will ONLY be used where necessary, and I will do everything possible to make the experience indistinguishable.</p>
|
||||
|
|
@ -48,6 +47,10 @@
|
|||
</ol>
|
||||
<p>Slowly, though, they're slowly all merging into one CSS file, so I can't be sure it'll stay this way for long.</p>
|
||||
<p>As for the "unused" style.css, though, that exists for compatibility reasons- many of my older sites just grabbed CSS from the site for their css. This has been <b>mostly</b> fixed, but the FileShare still does, so it'll stay until I finally give the FileShare its own CSS.</p>
|
||||
<h3 id="embeds">Why/How are certain segments of pages "embedded" on others?</h3>
|
||||
<p>On the main page, you may notice certain other pages contained inside it, such as this page, the stats page, and socials page. And, most notably with this page, it's not the full page, either. <br>
|
||||
This is because of a feature I created called "page embeds", which allow me to embed a portion of content from another page, without the use of any sort of iframes. This was made so I could keep information on multiple pages up to date.<br>
|
||||
It's much more performant and scalable than an I-frame as well.</p>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
|
|
@ -55,10 +55,10 @@
|
|||
<p style="padding: 10px;">Hi! I'm Violet, a 15 year old web and game developer. I make server-sided dynamic websites, with no Javascript required! I'm currently making games in the Godot Engine, and my dynamic sites in NodeJS.</p>
|
||||
<div class="linkContainer">
|
||||
<a class="chip" href="./socials/">Socials</a>
|
||||
<a class="chip" href="https://blog.violets-purgatory.dev">Blog</a>
|
||||
<!-- <a class="chip" href="./stats">Stats</a> -->
|
||||
<a class="chip" href="./stats">Stats</a>
|
||||
<a class="chip" href="./faq">Nerd FAQ</a>
|
||||
<a class="chip" href="https://{BRANCH_SUB}violets-purgatory.dev">{BRANCH_NAME} 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 class="customStatus">
|
||||
|
|
|
|||
|
|
@ -108,8 +108,6 @@ window.onbeforeunload = function () {
|
|||
}
|
||||
|
||||
window.onload = function () {
|
||||
window.scrollTo(0, 0);
|
||||
|
||||
$("#jsEnabled").text("true")
|
||||
|
||||
pfp = $(".pfp")
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="../style.css">
|
||||
<link rel="stylesheet" type="text/css" href="../subpage.css">
|
||||
|
||||
|
||||
<script src="../jquery.js"></script>
|
||||
<script src="../main.js"></script>
|
||||
|
||||
|
|
@ -24,17 +24,18 @@
|
|||
<body>
|
||||
{WEATHER_MODIFIER}
|
||||
|
||||
<a href="../" class="chip">Home</a>
|
||||
{TOPBAR}
|
||||
<!-- <a href="../" class="chip">Home</a>
|
||||
<a href="../faq" class="chip">FAQ</a>
|
||||
<a href="../stats" class="chip">Stats</a>
|
||||
<a href="../stats" class="chip">Stats</a> -->
|
||||
<h1>Socials</h1>
|
||||
<div class="mainDiv">
|
||||
<hr>
|
||||
<main>
|
||||
<p>Here's most of the sites you can find me on-<br>if you needed that for some reason?</p>
|
||||
<div class="grid-container">
|
||||
{SOCIALS}
|
||||
<!-- <div class="grid-child">
|
||||
<main>
|
||||
<p>Here's most of the sites you can find me on-<br>if you needed that for some reason?</p>
|
||||
<div class="grid-container">
|
||||
{SOCIALS}
|
||||
<!-- <div class="grid-child">
|
||||
<div>
|
||||
<h3>Social Media</h3>
|
||||
<a class="chip" href="https://floofy.city/@bingus_violet" rel="me">Fedi: bingus_violet​@floofy.city</a>
|
||||
|
|
@ -67,15 +68,15 @@
|
|||
<a class="chip" href="https://www.roblox.com/users/28347789/profile">Roblox: @bingus_violet</a>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<br>
|
||||
</main>
|
||||
<div id="activityHtml">
|
||||
{ACTIVITIES}
|
||||
</div>
|
||||
<br>
|
||||
</main>
|
||||
<div id="activityHtml">
|
||||
{ACTIVITIES}
|
||||
</div>
|
||||
|
||||
{SELECTED_VIDEO}
|
||||
</div>
|
||||
{SELECTED_VIDEO}
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="../style.css">
|
||||
<link rel="stylesheet" type="text/css" href="../subpage.css">
|
||||
|
||||
|
||||
<script src="../jquery.js"></script>
|
||||
<script src="../main.js"></script>
|
||||
|
||||
|
|
@ -16,38 +16,55 @@
|
|||
<meta name="darkreader-lock">
|
||||
|
||||
<meta content="Stats - Violet's Purgatory" property="og:title" />
|
||||
<meta content="This page just does a semi-intensive speed test on the site, and displays related statistics." property="og:description" />
|
||||
<meta content="This page just does a semi-intensive speed test on the site, and displays related statistics."
|
||||
property="og:description" />
|
||||
<meta content="https://api.violets-purgatory.dev/v1/pfp" property="og:image" />
|
||||
<meta content="#a200ff" data-react-helmet="true" name="theme-color" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{WEATHER_MODIFIER}
|
||||
<a href="../" class="chip">Home</a>
|
||||
<a href="../socials" class="chip">Socials</a>
|
||||
<a href="../faq" class="chip">FAQ</a>
|
||||
<h1>Stats</h1>
|
||||
<p>This is the <em>full</em> stats page! This page exists for testing the speed of site generation, and contains every keyword on Violet's Purgatory in a hidden div.</p>
|
||||
|
||||
<div style="display: none">
|
||||
{ALL_KEYWORDS} {ALL_KEYWORDS} {ALL_KEYWORDS} {ALL_KEYWORDS} {ALL_KEYWORDS}
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<h1><hr>Stats</h1>
|
||||
<br>
|
||||
{TOPBAR}
|
||||
<h1>Stats</h1>
|
||||
<div class="mainDiv">
|
||||
<p>Welcome to the stats page! This page is now "deprecated"... sorta.<br>
|
||||
Feel free to read more about it at the bottom of the page.</p>
|
||||
<main>
|
||||
<h1>
|
||||
<hr>Stats
|
||||
</h1>
|
||||
<br>
|
||||
<ul>
|
||||
<li>Page generation time: {LOAD_TIME}</li>
|
||||
<li>Pregeneration time: {PREGEN_TIME}ms</li>
|
||||
<li>Uptime: {UPTIME}</li>
|
||||
<li>Last Lanyard update: {LAST_LANYARD}</li>
|
||||
<li>Last Pregeneration: {LAST_PREGEN}</li>
|
||||
<li>Server connected to API: {API_CONNECTED}</li>
|
||||
<li>Javascript Loaded/Enabled: <span id="jsEnabled">false</span></li>
|
||||
<li>Client connected to API: <span id="apiConnected">false</span></li>
|
||||
</ul>
|
||||
</main>
|
||||
<h2><hr>Why does this page exist?</h2>
|
||||
<p>Originally, the stats page served the purpose of putting heavy load on the server for testing page generation times. This had a number of problems, though:</p>
|
||||
<ol>
|
||||
<li>Anyone could freely use this page and put the server under heavy load, with no limits, including malicious actors.</li>
|
||||
<li>The page itself failed to serve its original function, as it was not an accurate display of what kind of loads or processing would be caused by a <em>real</em> page on the site, as it did not contain things such as <a href="/faq#embeds" target="_blank">page embeds</a>, and otherwise had a lack of content.</li>
|
||||
<li>It didn't provide any information the main page did not.</li>
|
||||
</ol>
|
||||
<p>The list could probably go on and on, but by now I suspect you begin to get the idea. So, overall, this page is pretty useless :3</p>
|
||||
<h2><hr>Why does it still exist then?</h2>
|
||||
<p>Mainly for the aforementioned <a>page embeds</a>. The main page, and others, can embed the stats page on themselves to easily collect statistics! Currently, this is only used on the main page but, the code is still more organized and much more modular than if I had smacked the code into the main page and called it a day.</p>
|
||||
<h2><hr>The future of the stats page</h2>
|
||||
<p>I have a few different ideas at the moment, one of them being an actual stats monitor. E.G, I could record stats such as:</p>
|
||||
<ul>
|
||||
<li>Page generation time: {LOAD_TIME}</li>
|
||||
<li>Pregeneration time: {PREGEN_TIME}ms</li>
|
||||
<li>Uptime: {UPTIME}</li>
|
||||
<li>Last Lanyard update: {LAST_LANYARD}</li>
|
||||
<li>Last Pregeneration: {LAST_PREGEN}</li>
|
||||
<li>Server connected to API: {API_CONNECTED}</li>
|
||||
<li>Javascript Loaded/Enabled: <span id="jsEnabled">false</span></li>
|
||||
<li>Client connected to API: <span id="apiConnected">false</span></li>
|
||||
<li>Programs connected to the api (This would includes sites AND users)</li>
|
||||
<li>Average CPU, RAM, etc loads</li>
|
||||
<li>Uptime monitor (Would probably pull from something like Uptime Kuma)</li>
|
||||
</ul>
|
||||
</main>
|
||||
</div>
|
||||
<p>But, only time can tell :)</p>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -35,14 +35,15 @@
|
|||
}
|
||||
|
||||
#topbar {
|
||||
background-color: rgb(75, 50, 125);
|
||||
background-color: rgb(75, 50, 125, 0.5);
|
||||
width: 100%;
|
||||
padding: 1vh 0px;
|
||||
position: sticky;
|
||||
margin-bottom: 1vh;
|
||||
/* position: sticky; */
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
z-index: 10;
|
||||
opacity: 0.5;
|
||||
/* opacity: 0.5; */
|
||||
transform: scale(1);
|
||||
transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
}
|
||||
|
|
@ -250,11 +251,13 @@ br {
|
|||
}
|
||||
|
||||
ul, ol {
|
||||
display: inline-block
|
||||
display: inline-block;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: 1.2rem;
|
||||
padding: 5px 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,23 +9,10 @@ h1:nth-of-type(1) {
|
|||
|
||||
}
|
||||
|
||||
body {
|
||||
/* body {
|
||||
padding: 5vh 0;
|
||||
}
|
||||
} */
|
||||
|
||||
.mainDiv {
|
||||
animation: fadeUp 1s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@keyframes fadeUp {
|
||||
0% {
|
||||
transform: translateY(50vw);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue