Browse Source

build fixes

master
Justin Duch 3 months ago
parent
commit
cb0ebb6eaa
  1. 52
      src/lib/components/spe_001/EntPage.svelte
  2. 17
      src/lib/components/spe_001/FakePost.svelte
  3. 100
      src/lib/components/spe_001/PostPage.svelte
  4. 40
      src/lib/components/spe_001/RallyeTable.svelte
  5. 9
      src/routes/post/_posts.js
  6. 8
      static/manifest.json

52
src/lib/components/spe_001/EntPage.svelte

@ -15,12 +15,12 @@
</div>
</div>
<div class="links">
<a href="javascript:void(0);">Home</a>
<a href="javascript:void(0);">About</a>
<a href="javascript:void(0);">Anomalies</a>
<a href="javascript:void(0);">Accountability</a>
<a href="javascript:void(0);">Careers</a>
<a href="javascript:void(0);">Contact</a>
<p class="not-link">Home</p>
<p class="not-link">About</p>
<p class="not-link">Anomalies</p>
<p class="not-link">Accountability</p>
<p class="not-link">Careers</p>
<p class="not-link">Contact</p>
</div>
</div>
<div class="header other">
@ -51,11 +51,15 @@
<p>No other blog post on ENT#344-A appears to have anomalous properties.</p>
<p>
The contents of ENT#344 describe the "greatest crisis of our time" to be the French
(stylised as "<img style="width: 20px;" src="/resources/spe_001/france_flag.png" /> The French")
"near-total" domination of the World Table Tennis Championships (WTTC) organised by the International
Table Tennis Federation. ENT#344 will propose methods to solve the "crisis" with varying levels
of viability. The most absurd of which is to "use a larger and heavier ping-pong ball (which
requires bigger rackets) and scale up the table so that it's big enough to stand on."
(stylised as "<img
alt="france flag"
style="width: 20px;"
src="/resources/spe_001/france_flag.png"
/> The French") "near-total" domination of the World Table Tennis Championships (WTTC) organised
by the International Table Tennis Federation. ENT#344 will propose methods to solve the "crisis"
with varying levels of viability. The most absurd of which is to "use a larger and heavier ping-pong
ball (which requires bigger rackets) and scale up the table so that it's big enough to stand
on."
</p>
<p>
At the end of the post, ENT#344 will attempt a call to action and have the reader submit
@ -143,11 +147,11 @@
</div>
<div class="side">
<h3 class="title">In this document</h3>
<a href="javascript:void(0);">Anomaly class</a>
<a href="javascript:void(0);">Anomaly description</a>
<a href="javascript:void(0);">Research procedures</a>
<a href="javascript:void(0);">Previous experiments</a>
<a href="javascript:void(0);">Miscellaneous info</a>
<p class="not-link">Anomaly class</p>
<p class="not-link">Anomaly description</p>
<p class="not-link">Research procedures</p>
<p class="not-link">Previous experiments</p>
<p class="not-link">Miscellaneous info</p>
</div>
</div>
@ -194,7 +198,8 @@
margin-bottom: 1em;
}
a {
a,
.not-link {
color: #007976;
transition: color 0.2s;
padding-bottom: 1px;
@ -202,7 +207,8 @@
cursor: pointer;
}
a:hover {
a:hover,
.not-link:hover {
color: #002135;
}
@ -213,16 +219,6 @@
padding-bottom: 1em;
}
.links > a {
color: #57c2b2;
padding-right: 1em;
text-decoration: none;
}
.links > a:hover {
color: #fff;
}
.header {
padding: 0 6em;
background-color: #002135;

17
src/lib/components/spe_001/FakePost.svelte

@ -38,7 +38,7 @@
don't need me to explain everything to you.
</p>
<p>First up, let's look at YouTube.</p>
<img src="https://cdn.halcyonnouveau.xyz/blog/img/bloat-youtube.png" />
<img alt="youtube" src="https://cdn.halcyonnouveau.xyz/blog/img/bloat-youtube.png" />
<p>
It might be a little hard to see and you may need to zoom in, but at the very bottom, it
says "11.4 MB" next to an icon that looks like a weight. That's what we're looking for. On
@ -48,7 +48,7 @@
to where the website is served from.
</p>
<p>11 MB is a little fucked IMO, but let's look at the others before we make up our mind.</p>
<img src="https://cdn.halcyonnouveau.xyz/blog/img/bloat-hn.png" />
<img alt="hn" src="https://cdn.halcyonnouveau.xyz/blog/img/bloat-hn.png" />
<p>This is news.ycombinator.com, better known as "Hacker News" (HN), and it's very ugly.</p>
<p>
But it's only 50.8 KB! If you need a reminder, 1 Megabyte (MB) is 1000 Kilobytes (KB).
@ -56,7 +56,7 @@
YouTube datacenters in Sydney, but HN is only served from San Fransisco. Really goes to show
how lantency plays a big part of speed.
</p>
<img src="https://cdn.halcyonnouveau.xyz/blog/img/bloat-reddit.png" />
<img alt="reddit" src="https://cdn.halcyonnouveau.xyz/blog/img/bloat-reddit.png" />
<p>Next is Reddit (specifically /r/redpandas). It's 5.95 MB.</p>
<p>
If you use Reddit, you may have noticed that I'm using the old site design which uses less
@ -67,14 +67,14 @@
old design, I'm quitting Reddit.
</p>
<p>Anyway, finally let's look at this site.</p>
<img src="https://cdn.halcyonnouveau.xyz/blog/img/bloat-me.png" />
<img alt="me" src="https://cdn.halcyonnouveau.xyz/blog/img/bloat-me.png" />
<p>
This is the longest post I've ever written and it clocks in at 553.5 KB. Could be a little
better, considering it's mostly just text, but still decent when compared to everything
else.
</p>
<p>Let's also look at this post for funsies.</p>
<img src="https://cdn.halcyonnouveau.xyz/blog/img/bloat-me2.png" />
<img alt="me2" src="https://cdn.halcyonnouveau.xyz/blog/img/bloat-me2.png" />
<p>It's... 2.35 MB?! WHAT? How the feck did that happen? This seems like a big problem.</p>
<p>
But it's still better than most websites and I'm <strong>very</strong> lazy, so let's just ignore
@ -150,12 +150,7 @@
margin-right: auto;
}
h1,
h2,
h3,
h4,
h5,
h6 {
h1 {
margin: 0 0 0.5em !important;
font-style: normal !important;
letter-spacing: 0.1em !important;

100
src/lib/components/spe_001/PostPage.svelte

@ -125,16 +125,25 @@
<p>You should get to your seat, this is going to be a sight.</p>
<p>Oh and here they are! The championship leaders! That was quick, so who do you see?</p>
<p>
Ah, it's <img style="width: 20px;" src="/resources/spe_001/finnish_flag.png" /> The Finn.
Looking strong. Rally is a Finnish sport after all, I'm not surprised.
Ah, it's <img
alt="finland flag"
style="width: 20px;"
src="/resources/spe_001/finnish_flag.png"
/> The Finn. Looking strong. Rally is a Finnish sport after all, I'm not surprised.
</p>
<p>
Now here's <img style="width: 20px;" src="/resources/spe_001/spanish_flag.png" /> The Spainard.
I really have no idea how they do this.
Now here's <img
alt="spain flag"
style="width: 20px;"
src="/resources/spe_001/spanish_flag.png"
/> The Spainard. I really have no idea how they do this.
</p>
<p>
And finally, <img style="width: 20px;" src="/resources/spe_001/scottish_flag.png" /> The
Scottsman. Perfect command of their car, yet somehow seemingly without any control.
And finally, <img
alt="scotland flag"
style="width: 20px;"
src="/resources/spe_001/scottish_flag.png"
/> The Scottsman. Perfect command of their car, yet somehow seemingly without any control.
</p>
<p>The championship is as close as it ever was, and everything is going to be fine.</p>
<small
@ -214,22 +223,32 @@
<p>
After some time, it's now the final stage of the rally, and it's been quite interesting.
Although, you did lost some of your excitement after <img
alt="finland flag"
style="width: 20px;"
src="/resources/spe_001/finnish_flag.png"
/> The Young Finn you've been rooting for crashed out in the first stage. But it's alright,
not the end of the world or anything, what do you see now?
</p>
<p>
Is it <img style="width: 20px;" src="/resources/spe_001/estonian_flag.png" /> The Estonian?
No, they've been too slow the entire rally.
Is it <img
alt="estonia flag"
style="width: 20px;"
src="/resources/spe_001/estonian_flag.png"
/> The Estonian? No, they've been too slow the entire rally.
</p>
<p>
Is it <img style="width: 20px;" src="/resources/spe_001/welsh_flag.png" /> The Welshman?
No, they've made one too many mistakes.
Is it <img
alt="wales flag"
style="width: 20px;"
src="/resources/spe_001/welsh_flag.png"
/> The Welshman? No, they've made one too many mistakes.
</p>
<p>
Is it <img style="width: 20px;" src="/resources/spe_001/belgian_flag.png" /> The Belgian?
No, a poor strategy early on has taken them out of victory contention.
Is it <img
alt="belgium flag"
style="width: 20px;"
src="/resources/spe_001/belgian_flag.png"
/> The Belgian? No, a poor strategy early on has taken them out of victory contention.
</p>
<p>Oh it's what I think it is, isn't it?</p>
<p>
@ -237,12 +256,17 @@
never even seen a different sight before. You('ve) see(n) something truly horrible.
</p>
<p>
You see <img style="width: 20px;" src="/resources/spe_001/france_flag.png" /> The French.
You see <img
alt="france flag"
style="width: 20px;"
src="/resources/spe_001/france_flag.png"
/> The French.
</p>
<p>
Humanity is facing a disaster like no other. A spectre is haunting the world, one that
if left unchecked will hamper the development of our species until the heat death of the
universe. To put it bluntly, <img
alt="france flag"
style="width: 20px;"
src="/resources/spe_001/france_flag.png"
/> The French are too dominant in the WRC.
@ -251,11 +275,16 @@
Please look at this table from Wikipedia which shows the previous years' WRC champions.
</p>
<div style="width: 100%; text-align: center">
<img style="width: 50%" src="/resources/spe_001/wrc_table.png" />
<img
alt="wrc points, france is 90% of them"
style="width: 50%"
src="/resources/spe_001/wrc_table.png"
/>
</div>
<p>This is a complete catastrophe.</p>
<p>
I didn't want to have to do this. I thought it would have ended with <img
alt="estonia flag"
style="width: 20px;"
src="/resources/spe_001/estonian_flag.png"
/> The Estonian, but it seems I haven't been left a choice.
@ -398,8 +427,11 @@
<p>
As you can see, there have been some pretty big changes in the "curve" of the points
given to each position. So what would happen if we used an older point system today?
Would <img style="width: 20px;" src="/resources/spe_001/france_flag.png" /> The French still
be winning?
Would <img
alt="france flag"
style="width: 20px;"
src="/resources/spe_001/france_flag.png"
/> The French still be winning?
</p>
<p>
@ -466,12 +498,13 @@
<p>
We're going to be looking at the 2020 season for this example, because that was the
closest championship by far in recent memory, where <img
alt="france flag"
style="width: 20px;"
src="/resources/spe_001/france_flag.png"
/>
Sébastien Ogier (122 points) led
<img style="width: 20px;" src="/resources/spe_001/welsh_flag.png" /> Elfyn Evans (115 points)
by 7 points.
<img alt="wales flag" style="width: 20px;" src="/resources/spe_001/welsh_flag.png" /> Elfyn
Evans (115 points) by 7 points.
</p>
<p>
@ -483,7 +516,7 @@
<p>For reference, here it is without any changes.</p>
<div style="width: 100%; text-align: center">
<img style="width: 70%" src="/resources/spe_001/2020_table.png" />
<img alt="table" style="width: 70%" src="/resources/spe_001/2020_table.png" />
</div>
<p>
@ -492,13 +525,13 @@
</p>
<p>
But <img style="width: 20px;" src="/resources/spe_001/france_flag.png" />
But <img alt="table" style="width: 20px;" src="/resources/spe_001/france_flag.png" />
Ogier has more Power Stage points (the numbers between the parentheses), so let's see what
happends if we change the system back to 2011 which had a smaller curve for winning.
</p>
<div style="width: 100%; text-align: center">
<img style="width: 70%" src="/resources/spe_001/2020_table_1.png" />
<img alt="table" style="width: 70%" src="/resources/spe_001/2020_table_1.png" />
</div>
<p>
@ -519,7 +552,7 @@
</p>
<div style="width: 100%; text-align: center">
<img style="width: 70%" src="/resources/spe_001/2020_table_2.png" />
<img alt="table" style="width: 70%" src="/resources/spe_001/2020_table_2.png" />
</div>
<p>
@ -536,11 +569,15 @@
<div class="display: none" id="scroll-target" />
<div style="width: 100%; text-align: center">
<img style="width: 70%" src="/resources/spe_001/2020_table_3.png" />
<img alt="table" style="width: 70%" src="/resources/spe_001/2020_table_3.png" />
</div>
<p>
AND WE'VE DONE IT! <img style="width: 20px;" src="/resources/spe_001/france_flag.png" />
AND WE'VE DONE IT! <img
alt="france flag"
style="width: 20px;"
src="/resources/spe_001/france_flag.png"
/>
THE FRENCH ARE NO MORE AND WORLD PEACE IS UPON US!
</p>
@ -568,6 +605,7 @@
</p>
<p>
Once you're happy with your new champion who isn't <img
alt="france flag"
style="width: 20px;"
src="/resources/spe_001/france_flag.png"
/> The French, press the submit button to send it to me and I might give you a special prize.
@ -868,13 +906,6 @@
);
}
.paragraph {
margin-left: -0.1em;
margin-bottom: 1em;
display: inline-block;
word-wrap: break-word;
}
.tr:last-child {
visibility: hidden;
opacity: 0;
@ -893,12 +924,7 @@
background-color: #191919;
}
h1,
h2,
h3,
h4,
h5,
h6 {
h1 {
margin-bottom: 0.3em;
}

40
src/lib/components/spe_001/RallyeTable.svelte

@ -318,7 +318,7 @@
<div class="label">Point System:</div>
<select
bind:value={rallyeTableSettings.scoring[rallyeTableSettings.season].pointSystem}
on:change={() => calcSeasonResults(rallyeTableSettings.season)}
on:blur={() => calcSeasonResults(rallyeTableSettings.season)}
>
{#each Object.keys(pointSystems) as year}
<option value={year}>{year}</option>
@ -330,7 +330,7 @@
<div class="label">Remove Rally:</div>
<select
bind:value={rallyeTableSettings.scoring[rallyeTableSettings.season].ignoreRallyes[0]}
on:change={() => calcSeasonResults(rallyeTableSettings.season)}
on:blur={() => calcSeasonResults(rallyeTableSettings.season)}
>
<option value={''}>None</option>
{#each currentRallyes as rallye}
@ -345,7 +345,7 @@
<div class="label">Power Stage System:</div>
<select
bind:value={rallyeTableSettings.scoring[rallyeTableSettings.season].powerStageSystem}
on:change={() => calcSeasonResults(rallyeTableSettings.season)}
on:blur={() => calcSeasonResults(rallyeTableSettings.season)}
>
{#each Object.keys(powerStageSystems) as year}
<option value={year}>{year}</option>
@ -357,7 +357,7 @@
<div class="label">Remove Rally:</div>
<select
bind:value={rallyeTableSettings.scoring[rallyeTableSettings.season].ignoreRallyes[1]}
on:change={() => calcSeasonResults(rallyeTableSettings.season)}
on:blur={() => calcSeasonResults(rallyeTableSettings.season)}
>
<option value={''}>None</option>
{#each currentRallyes as rallye}
@ -372,7 +372,7 @@
<div class="label">Premier Stage System:</div>
<select
bind:value={rallyeTableSettings.scoring[rallyeTableSettings.season].premierStageSystem}
on:change={() => calcSeasonResults(rallyeTableSettings.season)}
on:blur={() => calcSeasonResults(rallyeTableSettings.season)}
>
{#each Object.keys(powerStageSystems) as year}
<option value={year}>{year}</option>
@ -427,8 +427,8 @@
</div>
<div style="width: 100%; display: flex; justify-content: center; margin: 1em 0;">
<a
href="javascript:void(0);"
<p
class="not-link"
on:click={() => (rallyeTableSettings.showTable = !rallyeTableSettings.showTable)}
>
{!rallyeTableSettings.showTable ? 'Show Rally Timesheets' : 'Hide Rally Timesheets'}
@ -463,7 +463,7 @@
/>
</svg>
{/if}
</a>
</p>
</div>
{#if rallyeTableSettings.showTable}
@ -482,7 +482,7 @@
<div class="label">Rallye:</div>
<select
bind:value={rallyeTableSettings.rallyeIndex}
on:change={() => (rallyeTableSettings.stageIndex = 0)}
on:blur={() => (rallyeTableSettings.stageIndex = 0)}
>
{#each currentRallyesFiltered as rallye, i}
<option value={i}>{rallye.title}</option>
@ -566,10 +566,6 @@
{/if}
<style>
.center-all > tr > td {
text-align: center;
}
.label {
margin-right: 0.3em;
}
@ -605,6 +601,15 @@
justify-content: space-between;
}
.not-link {
color: #2f7de1;
cursor: pointer;
}
.not-link:hover {
color: #98b6db;
}
button {
background-color: rgb(55, 65, 81);
color: #ffffff;
@ -731,13 +736,4 @@
transform: rotate(360deg);
}
}
a {
color: #2f7de1;
text-decoration: underline;
}
a:hover {
color: #98b6db;
}
</style>

9
src/routes/post/_posts.js

@ -15,14 +15,6 @@ const converter = new showdown.Converter({
const postsDir = '_posts';
function replaceHtml(slug, html) {
// replace reference tags will full path because I don't know how to change
// the base url.
return html
.replace(/#reference/g, `post/${slug}/#reference`)
.replace(/#footnote/g, `post/${slug}/#footnote`);
}
function getPostData(data, getHtml) {
// Because there is no metadata extension, we need to read the lines
let lines = data.split('\n');
@ -61,7 +53,6 @@ function getPost(snail) {
if (snail === slug) {
let data = fs.readFileSync(filepath, { encoding: 'utf-8' });
post = { ...getPostData(data, true), slug, date };
post.html = replaceHtml(slug, post.html);
}
});

8
static/manifest.json

@ -1,8 +0,0 @@
{
"background_color": "#ffffff",
"theme_color": "#333333",
"name": "blog",
"short_name": "blog",
"display": "minimal-ui",
"start_url": "/"
}
Loading…
Cancel
Save