add this page is portable
This commit is contained in:
askiiart
parent
bc1664b2d6
commit
59f3f7f635
GPG key ID:
6A32977DAF31746A
7 changed files with 253 additions and 3 deletions
|
|
@ -5,7 +5,7 @@
|
|||
<title>askiiart.net blog</title>
|
||||
<description>The feed for askiiart.net but just the blog, I guess</description>
|
||||
<link>https://askiiart.net/blog/</link>
|
||||
<lastBuildDate>Thu, 02 Jan 2025 03:17:03 +0000</lastBuildDate>
|
||||
<lastBuildDate>Tue, 07 Jan 2025 15:30:31 +0000</lastBuildDate>
|
||||
<item>
|
||||
<title>300</title>
|
||||
<link>https://askiiart.net/til/300.html</link>
|
||||
|
|
@ -26,6 +26,10 @@
|
|||
<title>Another new PGP key</title>
|
||||
<link>https://askiiart.net/til/another-new-pgp-key.html</link>
|
||||
</item>
|
||||
<item>
|
||||
<title>This page is portable</title>
|
||||
<link>https://askiiart.net/til/this-page-is-portable.html</link>
|
||||
</item>
|
||||
|
||||
</channel>
|
||||
</rss>
|
||||
85
blog/this-page-is-actually-portable.html
Normal file
85
blog/this-page-is-actually-portable.html
Normal file
File diff suppressed because one or more lines are too long
95
blog/this-page-is-portable.html
Normal file
95
blog/this-page-is-portable.html
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
<!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>
|
||||
58
blog/this-page-is-portable.md
Normal file
58
blog/this-page-is-portable.md
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
# This page is portable
|
||||
|
||||
This page, even with its images, fonts, and javascript, is completely portable, and will work offline with no other files.
|
||||
|
||||
---
|
||||
|
||||
This is essentially a showcase and writeup about [One Webpage, Under God](https://git.askiiart.net/askiiart/one-webpage-under-god), 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.
|
||||
|
||||
```rs
|
||||
let hello = "hiiiiiiiiii";
|
||||
// Check out this fancy code block without using any other files
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Okay but how
|
||||
|
||||
Really, this page should be titled "All hail the [Data URI Scheme](https://en.wikipedia.org/wiki/Data_URI_scheme) and whoever came up with it, that's how this entire program works. If you're unaware, a data URI looks like this:
|
||||
|
||||
```txt
|
||||
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA
|
||||
```
|
||||
|
||||
To break this down:
|
||||
|
||||
- `data:` This is a data URI
|
||||
- `image/png`: The [MIME type](https://developer.mozilla.org/en-US/docs/Web/HTTP/MIME_types/Common_types) of the data
|
||||
- `;base64` Indicates that this is encoded in base64 (optional, see [MDN docs](https://developer.mozilla.org/en-US/docs/Web/URI/Schemes/data))
|
||||
- `iVBORw0KGgoAAAANSUhEUgAAAA`: base64-encoded data
|
||||
|
||||
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.
|
||||
|
||||
## Fonts
|
||||
|
||||
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 *this* mess - fonts encoded in base64, inside of CSS which is then itself encoded in base64.
|
||||
|
||||
```css
|
||||
@font-face {
|
||||
/* from https://github.com/ryanoasis/nerd-fonts/tree/master/patched-fonts/FiraCode */
|
||||
font-family: "FiraCode";
|
||||
src: 'FiraCode', url('data:font/woff2;base64,d09GMgABAA...76Ufr9TLXi4DgAA');
|
||||
}
|
||||
```
|
||||
|
||||
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 `prism.js`, which contains a duplicate FiraCode Nerd Font, which is of course also hardcoded in.
|
||||
|
||||
---
|
||||
|
||||
One last thing: Relative links are very *not* portable of course, so I just tacked on this bit to the end to fix that
|
||||
|
||||
```py
|
||||
links = soup.find_all('link')
|
||||
for item in links:
|
||||
if 'stylesheet' not in item.attrs['rel'] and 'icon' not in item.attrs['rel']:
|
||||
item.attrs['href'] = absolute_url(item.attrs['href'], domain_thing)
|
||||
```
|
||||
|
||||
Oh also, this page is actually *not* 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 *actually portable* version is [here](/blog/this-page-is-actually-portable.html)
|
||||
6
feed.xml
6
feed.xml
|
|
@ -5,7 +5,7 @@
|
|||
<title>askiiart.net</title>
|
||||
<description>The feed for askiiart.net, I guess</description>
|
||||
<link>https://askiiart.net</link>
|
||||
<lastBuildDate>Thu, 02 Jan 2025 03:17:03 +0000</lastBuildDate>
|
||||
<lastBuildDate>Tue, 07 Jan 2025 15:30:31 +0000</lastBuildDate>
|
||||
<item>
|
||||
<title>300</title>
|
||||
<link>https://askiiart.net/blog/300.html</link>
|
||||
|
|
@ -26,6 +26,10 @@
|
|||
<title>Another new PGP key</title>
|
||||
<link>https://askiiart.net/blog/another-new-pgp-key.html</link>
|
||||
</item>
|
||||
<item>
|
||||
<title>This page is portable</title>
|
||||
<link>https://askiiart.net/blog/this-page-is-portable.html</link>
|
||||
</item>
|
||||
<item>
|
||||
<title>Akkoma in Docker</title>
|
||||
<link>https://askiiart.net/til/akkoma-in-docker.html</link>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
printf "<?xml version=\"1.0\" encoding=\"UTF-8\" ?>\n<rss version=\"2.0\">\n\n<channel>\n <title>askiiart.net</title>\n <description>The feed for askiiart.net, I guess</description>\n <link>https://askiiart.net</link>\n <lastBuildDate>$(TZ='UTC' date --rfc-2822)</lastBuildDate>" >feed.xml
|
||||
find . -path ./error -prune -o -name '*.html' -print | while read -r item; do
|
||||
# Skip template.html, wishlist.html, resume.html, and portfolio.html
|
||||
if [[ ${item} == "./index.html" || ${item} == "./template.html" || ${item} == "./wishlist.html" || ${item} == "./resume.html" || ${item} == "./portfolio.html" || ${item} == "./opx.html" ]]; then
|
||||
if [[ ${item} == "./index.html" || ${item} == "./template.html" || ${item} == "./wishlist.html" || ${item} == "./resume.html" || ${item} == "./portfolio.html" || ${item} == "./opx.html" || ${item} == "./blog/this-page-is-actually-portable.html" ]]; then
|
||||
continue
|
||||
fi
|
||||
item="${item%.*}"
|
||||
|
|
@ -32,6 +32,9 @@ cd ..
|
|||
cd ./blog
|
||||
printf "<?xml version=\"1.0\" encoding=\"UTF-8\" ?>\n<rss version=\"2.0\">\n\n<channel>\n <title>askiiart.net blog</title>\n <description>The feed for askiiart.net but just the blog, I guess</description>\n <link>https://askiiart.net/blog/</link>\n <lastBuildDate>$(TZ='UTC' date --rfc-2822)</lastBuildDate>" >feed.xml
|
||||
find . -name "*.html" | while read -r item; do
|
||||
if [[ ${item} == "./this-page-is-actually-portable.html" ]]; then
|
||||
continue
|
||||
fi
|
||||
item="${item%.*}"
|
||||
item="${item#./}"
|
||||
TITLE=$(grep -m 1 -oP '(?<=^# ).*' ${item}.md | cat)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
|
||||
<url><loc>https://askiiart.net/blog/</loc></url>
|
||||
<url><loc>https://askiiart.net/blog/300.html</loc></url>
|
||||
<url><loc>https://askiiart.net/blog/another-new-pgp-key.html</loc></url>
|
||||
<url><loc>https://askiiart.net/blog/foooooonts.html</loc></url>
|
||||
<url><loc>https://askiiart.net/blog/marlin-boot-animations.html</loc></url>
|
||||
<url><loc>https://askiiart.net/blog/new-pgp-key.html</loc></url>
|
||||
|
|
|
|||
Loading…
Reference in a new issue