96 lines
7.1 KiB
HTML
96 lines
7.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta content="width=device-width, initial-scale=1" charset="utf-8" />
|
||
|
|
<link rel="icon" href="/assets/askiiart.avif" type="image/icon">
|
||
|
|
<title>This page is portable</title>
|
||
|
|
<link href="/style.css" type="text/css" rel="stylesheet" />
|
||
|
|
<link href="/prism.css" rel="stylesheet" />
|
||
|
|
</head>
|
||
|
|
<body class="line-numbers">
|
||
|
|
<h1 id="this-page-is-portable">This page is portable</h1>
|
||
|
|
<p>This page, even with its images, fonts, and javascript, is
|
||
|
|
completely portable, and will work offline with no other
|
||
|
|
files.</p>
|
||
|
|
<hr />
|
||
|
|
<p>This is essentially a showcase and writeup about <a
|
||
|
|
href="https://git.askiiart.net/askiiart/one-webpage-under-god">One
|
||
|
|
Webpage, Under God</a>, a program I made to make a page
|
||
|
|
completely portable and independent of any other files. It
|
||
|
|
doesn't handle everything, but does perfectly on a simple static
|
||
|
|
site like my own, with images, fonts, and javascript, it works
|
||
|
|
perfectly.</p>
|
||
|
|
<div class="sourceCode" id="cb1"><pre
|
||
|
|
class="language-rs"><code class="language-rust"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="kw">let</span> hello <span class="op">=</span> <span class="st">"hiiiiiiiiii"</span><span class="op">;</span></span>
|
||
|
|
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a><span class="co">// Check out this fancy code block without using any other files</span></span></code></pre></div>
|
||
|
|
<figure>
|
||
|
|
<img src="/assets/askiiart.avif"
|
||
|
|
title="I can even have this picture of a turtle in here" alt="I can even have this picture of a turtle in here" />
|
||
|
|
<figcaption aria-hidden="true">I can even have this picture of a
|
||
|
|
turtle in here</figcaption>
|
||
|
|
</figure>
|
||
|
|
<h2 id="okay-but-how">Okay but how</h2>
|
||
|
|
<p>Really, this page should be titled "All hail the <a
|
||
|
|
href="https://en.wikipedia.org/wiki/Data_URI_scheme">Data URI
|
||
|
|
Scheme</a> and whoever came up with it, that's how this entire
|
||
|
|
program works. If you're unaware, a data URI looks like
|
||
|
|
this:</p>
|
||
|
|
<div class="sourceCode" id="cb2"><pre
|
||
|
|
class="language-txt"><code class="language-default"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA</span></code></pre></div>
|
||
|
|
<p>To break this down:</p>
|
||
|
|
<ul>
|
||
|
|
<li><code>data:</code> This is a data URI</li>
|
||
|
|
<li><code>image/png</code>: The <a
|
||
|
|
href="https://developer.mozilla.org/en-US/docs/Web/HTTP/MIME_types/Common_types">MIME
|
||
|
|
type</a> of the data</li>
|
||
|
|
<li><code>;base64</code> Indicates that this is encoded in
|
||
|
|
base64 (optional, see <a
|
||
|
|
href="https://developer.mozilla.org/en-US/docs/Web/URI/Schemes/data">MDN
|
||
|
|
docs</a>)</li>
|
||
|
|
<li><code>iVBORw0KGgoAAAANSUhEUgAAAA</code>: base64-encoded
|
||
|
|
data</li>
|
||
|
|
</ul>
|
||
|
|
<p>If it's text data, then it can use percent-encoding instead,
|
||
|
|
though I couldn't get this to work, so I just encoded everything
|
||
|
|
in base64 instead.</p>
|
||
|
|
<h2 id="fonts">Fonts</h2>
|
||
|
|
<p>The rest of all this is really simple - we just replace the
|
||
|
|
link to the asset with a data URI. Fonts, however, are more
|
||
|
|
complicated. They're linked in the CSS, not the HTML, which
|
||
|
|
leads to <em>this</em> mess - fonts encoded in base64, inside of
|
||
|
|
CSS which is then itself encoded in base64.</p>
|
||
|
|
<div class="sourceCode" id="cb3"><pre
|
||
|
|
class="language-css"><code class="language-css"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="im">@font-face</span> {</span>
|
||
|
|
<span id="cb3-2"><a href="#cb3-2" aria-hidden="true" tabindex="-1"></a> <span class="co">/* from https://github.com/ryanoasis/nerd-fonts/tree/master/patched-fonts/FiraCode */</span></span>
|
||
|
|
<span id="cb3-3"><a href="#cb3-3" aria-hidden="true" tabindex="-1"></a> <span class="kw">font-family</span><span class="ch">:</span> <span class="st">"FiraCode"</span><span class="op">;</span></span>
|
||
|
|
<span id="cb3-4"><a href="#cb3-4" aria-hidden="true" tabindex="-1"></a> <span class="kw">src</span><span class="ch">:</span> <span class="st">'FiraCode'</span><span class="op">,</span> <span class="fu">url(</span><span class="st">'data:font/woff2;base64,d09GMgABAA...76Ufr9TLXi4DgAA'</span><span class="fu">)</span><span class="op">;</span></span>
|
||
|
|
<span id="cb3-5"><a href="#cb3-5" aria-hidden="true" tabindex="-1"></a>}</span></code></pre></div>
|
||
|
|
<p>This also led to me being reminded how huge my fonts are;
|
||
|
|
because of them my site's homepage comes out to nearly 2 MiB
|
||
|
|
even without <code>prism.js</code>, which contains a duplicate
|
||
|
|
FiraCode Nerd Font, which is of course also hardcoded in.</p>
|
||
|
|
<hr />
|
||
|
|
<p>One last thing: Relative links are very <em>not</em> portable
|
||
|
|
of course, so I just tacked on this bit to the end to fix
|
||
|
|
that</p>
|
||
|
|
<div class="sourceCode" id="cb4"><pre
|
||
|
|
class="language-py"><code class="language-python"><span id="cb4-1"><a href="#cb4-1" aria-hidden="true" tabindex="-1"></a>links <span class="op">=</span> soup.find_all(<span class="st">'link'</span>)</span>
|
||
|
|
<span id="cb4-2"><a href="#cb4-2" aria-hidden="true" tabindex="-1"></a><span class="cf">for</span> item <span class="kw">in</span> links:</span>
|
||
|
|
<span id="cb4-3"><a href="#cb4-3" aria-hidden="true" tabindex="-1"></a> <span class="cf">if</span> <span class="st">'stylesheet'</span> <span class="kw">not</span> <span class="kw">in</span> item.attrs[<span class="st">'rel'</span>] <span class="kw">and</span> <span class="st">'icon'</span> <span class="kw">not</span> <span class="kw">in</span> item.attrs[<span class="st">'rel'</span>]:</span>
|
||
|
|
<span id="cb4-4"><a href="#cb4-4" aria-hidden="true" tabindex="-1"></a> item.attrs[<span class="st">'href'</span>] <span class="op">=</span> absolute_url(item.attrs[<span class="st">'href'</span>], domain_thing)</span></code></pre></div>
|
||
|
|
<p>Oh also, this page is actually <em>not</em> portable - aside
|
||
|
|
from the johnvertisement iframe at the bottom, I didn't make it
|
||
|
|
portable regardless because it's 3+ MiB, and I didn't want to
|
||
|
|
put that kind of load on my internet connection for no reason.
|
||
|
|
If it weren't for my upload speed suddenly sexdecupling (16x)
|
||
|
|
for some reason, it would take more than a second to load. The
|
||
|
|
<em>actually portable</em> version is <a
|
||
|
|
href="/blog/this-page-is-actually-portable.html">here</a></p>
|
||
|
|
<iframe src="https://john.citrons.xyz/embed?ref=askiiart.net" style="margin-left:auto;display:block;margin-right:auto;max-width:732px;width:100%;height:94px;border:none;"></iframe>
|
||
|
|
<script src="/prism.js"></script>
|
||
|
|
</body>
|
||
|
|
<footer>
|
||
|
|
<p><a href="https://git.askiiart.net/askiiart/askiiart-net">code</a> (<a href="https://github.com/askiiart/askiiart.github.io">mirror</a>) <a href="/feed.xml">rss</a> <a href="/pubkey.asc">pubkey</a></p>
|
||
|
|
</footer>
|
||
|
|
</html>
|