cache busting
for faster load times, and seamless updates. because for some reason ServeDir can't do it correctly, and it tells the client "yeah hey nothing changed" even if something changed
This commit is contained in:
parent
9b190165ff
commit
5e6b84bed5
24 changed files with 580 additions and 203 deletions
|
|
@ -4,12 +4,13 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>{{ title }} · rakugaki manual</title>
|
||||
<link rel="stylesheet" href="/static/base.css">
|
||||
<link rel="stylesheet" href="/static/docs.css">
|
||||
<link rel="stylesheet" href="{{ static 'base.css' }}">
|
||||
<link rel="stylesheet" href="{{ static 'fonts.css' }}">
|
||||
<link rel="stylesheet" href="{{ static 'docs.css' }}">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<script src="/static/live-reload.js" type="module"></script>
|
||||
<script src="{{ static 'live-reload.js' }}" type="module"></script>
|
||||
|
||||
<link rel="icon" sizes="16x16" href="/static/favicon/rkgk@1x.png">
|
||||
<link rel="icon" sizes="32x32" href="/static/favicon/rkgk@2x.png">
|
||||
|
|
|
|||
44
template/fonts.hbs.css
Normal file
44
template/fonts.hbs.css
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
@font-face {
|
||||
font-family: "Atkinson Hyperlegible";
|
||||
src:
|
||||
local("Atkinson Hyperlegible Regular"),
|
||||
url("{{ static 'font/AtkinsonHyperlegible-Regular.ttf' }}");
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Atkinson Hyperlegible";
|
||||
src:
|
||||
local("Atkinson Hyperlegible Italic"),
|
||||
url("{{ static 'font/AtkinsonHyperlegible-Italic.ttf' }}");
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Atkinson Hyperlegible";
|
||||
src:
|
||||
local("Atkinson Hyperlegible Bold"),
|
||||
url("{{ static 'font/AtkinsonHyperlegible-Bold.ttf' }}");
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Atkinson Hyperlegible";
|
||||
src:
|
||||
local("Atkinson Hyperlegible Bold Italic"),
|
||||
url("{{ static 'font/AtkinsonHyperlegible-BoldItalic.ttf' }}");
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
/* NOTE: This is my own variant of Iosevka that more or less follows the stylistic choices
|
||||
of Atkinson Hyperlegible. */
|
||||
font-family: "Iosevka Hyperlegible";
|
||||
src:
|
||||
local("Iosevka Hyperlegible"),
|
||||
url("{{ static 'font/IosevkaHyperlegible-Regular.woff2' }}");
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
145
template/index.hbs.html
Normal file
145
template/index.hbs.html
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>rakugaki</title>
|
||||
|
||||
<link rel="stylesheet" href="{{ static 'base.css' }}">
|
||||
<link rel="stylesheet" href="{{ static 'fonts.css' }}">
|
||||
<link rel="stylesheet" href="{{ static 'index.css' }}">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<script type="importmap">{{{ include_static 'import_map.json' }}}</script>
|
||||
|
||||
<script>
|
||||
const HAKU_WASM_PATH = "{{{ static 'wasm/haku.wasm' }}}";
|
||||
</script>
|
||||
|
||||
<script type="module">
|
||||
import "rkgk/live-reload.js";
|
||||
|
||||
import "rkgk/brush-editor.js";
|
||||
import "rkgk/canvas-renderer.js";
|
||||
import "rkgk/connection-status.js";
|
||||
import "rkgk/framework.js";
|
||||
import "rkgk/resize-handle.js";
|
||||
import "rkgk/reticle-renderer.js";
|
||||
import "rkgk/session.js";
|
||||
import "rkgk/throbber.js";
|
||||
import "rkgk/viewport.js";
|
||||
import "rkgk/welcome.js";
|
||||
|
||||
import "rkgk/index.js";
|
||||
</script>
|
||||
|
||||
<link rel="icon" sizes="16x16" href="{{ static 'favicon/rkgk@1x.png' }}">
|
||||
<link rel="icon" sizes="32x32" href="{{ static 'favicon/rkgk@2x.png' }}">
|
||||
<link rel="icon" sizes="64x64" href="{{ static 'favicon/rkgk@4x.png' }}">
|
||||
<link rel="icon" sizes="128x128" href="{{ static 'favicon/rkgk@8x.png' }}">
|
||||
<link rel="icon" sizes="256x256" href="{{ static 'favicon/rkgk@16x.png' }}">
|
||||
<link rel="icon" sizes="512x512" href="{{ static 'favicon/rkgk@32x.png' }}">
|
||||
<link rel="apple-touch-icon" sizes="16x16" href="{{ static 'favicon/rkgk@1x.png' }}">
|
||||
<link rel="apple-touch-icon" sizes="32x32" href="{{ static 'favicon/rkgk@2x.png' }}">
|
||||
<link rel="apple-touch-icon" sizes="64x64" href="{{ static 'favicon/rkgk@4x.png' }}">
|
||||
<link rel="apple-touch-icon" sizes="128x128" href="{{ static 'favicon/rkgk@8x.png' }}">
|
||||
<link rel="apple-touch-icon" sizes="256x256" href="{{ static 'favicon/rkgk@16x.png' }}">
|
||||
<link rel="apple-touch-icon" sizes="512x512" href="{{ static 'favicon/rkgk@32x.png' }}">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<rkgk-canvas-renderer class="fullscreen"></rkgk-canvas-renderer>
|
||||
<rkgk-reticle-renderer class="fullscreen"></rkgk-reticle-renderer>
|
||||
<div class="panels fullscreen" id="panels-overlay">
|
||||
<div class="rkgk-panel menu-bar">
|
||||
<a class="icon icon-rkgk-grayscale" title="I know this menu bar is really ugly. Sorry about that."></a>
|
||||
<hr>
|
||||
<a href="/docs/rkgk.html">Manual</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
<rkgk-resize-handle
|
||||
data-direction="vertical"
|
||||
data-target="panels-overlay"
|
||||
data-target-property="--right-width"
|
||||
data-init-size="384"
|
||||
data-min-size="128"></rkgk-resize-handle>
|
||||
<rkgk-brush-editor></rkgk-brush-editor>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<rkgk-welcome>
|
||||
<dialog name="welcome-dialog" class="rkgk-panel">
|
||||
<form method="dialog">
|
||||
<h3>
|
||||
My name is
|
||||
<input
|
||||
name="nickname"
|
||||
type="text"
|
||||
required minlength="1" maxlength="32"
|
||||
placeholder="... (type here!)"
|
||||
autocomplete="off"
|
||||
autofocus></input>
|
||||
</h3>
|
||||
<p>This name will be visible to any friends drawing along with you, so choose something recognizable!<br>
|
||||
Keep in mind you can always change it later.</p>
|
||||
|
||||
<div style="display: flex; flex-direction: row; align-items: center; justify-content: end; gap: 8px;">
|
||||
<rkgk-throbber name="register-progress"></rkgk-throbber>
|
||||
<button name="register">Register</button>
|
||||
</div>
|
||||
</form>
|
||||
</dialog>
|
||||
</rkgk-welcome>
|
||||
|
||||
<rkgk-connection-status>
|
||||
<dialog name="logging-in-dialog">
|
||||
<rkgk-throbber class="loading"></rkgk-throbber><p>Logging in…</p>
|
||||
</dialog>
|
||||
|
||||
<dialog name="error-dialog" class="rkgk-panel">
|
||||
<h1>owie! >_<</h1>
|
||||
<p><i>Uh oh. Seems like the pipe cracked again… There's water everywhere.<br>The basement's half full already. God dammit.</i></p>
|
||||
|
||||
<p>Super sorry about this! But rakugaki encountered an error and has to restart.</p>
|
||||
<p><b>Rest assured your drawings are safe and sound.</b></p>
|
||||
<p>Either way… try refreshing the page and see if it helps. If not, please report a bug with the following details.</p>
|
||||
|
||||
<details>
|
||||
<summary>Show error details</summary>
|
||||
<textarea name="error-text" rows="10" readonly></textarea>
|
||||
</details>
|
||||
|
||||
<p>Thank you from the mountain!</p>
|
||||
|
||||
<div style="display: flex; flex-direction: row; align-items: center; justify-content: end;">
|
||||
<button name="refresh">Refresh</button>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<dialog name="disconnected-dialog">
|
||||
<rkgk-throbber class="loading"></rkgk-throbber>
|
||||
<p>Connection lost. Attempting to reconnect in <span name="reconnect-duration"></span>…</p>
|
||||
</dialog>
|
||||
</rkgk-connection-status>
|
||||
|
||||
<div class="fullscreen" id="js-loading">
|
||||
<rkgk-throbber class="loading"></rkgk-throbber>
|
||||
|
||||
<noscript>
|
||||
<style>
|
||||
#js-loading>rkgk-throbber { display: none; }
|
||||
</style>
|
||||
<p>
|
||||
rakugaki is a web app and does not work without JavaScript :(<br>
|
||||
but I swear it's a very lightweight and delightful web app!
|
||||
You won't regret trying it out.
|
||||
</p>
|
||||
</noscript>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue