Skip to content

Instantly share code, notes, and snippets.

@cablehead

cablehead/base.html

Created April 10, 2024 15:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cablehead/460d125c257039873bc692d43ffa94a5 to your computer and use it in GitHub Desktop.
Save cablehead/460d125c257039873bc692d43ffa94a5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/icon.ico" type="image/x-icon">
{% if tld == "stacks" %}
{% if request.path == "/releases/v0.13.1" %}
<title>Stacks::release: v0.13.1</title>
<meta property="og:title" content="Stacks::release: v0.13.1" />
<meta property="og:url" content=https://stacks.cross.stream/releases/v0.13.1" />
<meta property="og:description" content="This release includes: A handy new feature, and significantly enhanced performance, especially in navigating through large stacks" />
<meta property="og:site_name" content="Stacks:release: v0.13.1"/>
<meta property="og:image" content="https://stacks.cross.stream/stacks-0.13.1/og-card.png" />
{% elif request.path == "/releases/v0.14.1" %}
<title>Stacks::release: v0.14.1</title>
<meta property="og:title" content="Stacks::release: v0.14.1" />
<meta property="og:url" content=https://stacks.cross.stream/releases/v0.14.1" />
<meta property="og:description" content="Updated GitHub Markdown extensions, added keyboard shortcuts, improved clip editing." />
<meta property="og:site_name" content="Stacks:release: v0.14.1"/>
<meta property="og:image" content="https://stacks.cross.stream/stacks-0.14.1/og-card.png" />
{% elif request.path == "/releases/v0.15.6" %}
<title>Stacks::release: v0.15.6</title>
<meta property="og:title" content="Stacks::release: v0.15.6" />
<meta property="og:url" content=https://stacks.cross.stream/releases/v0.15.6" />
<meta property="og:description" content="Expose the clip store through an API accessible via a Unix domain socket." />
<meta property="og:site_name" content="Stacks:release: v0.15.6"/>
<meta property="og:image" content="https://stacks.cross.stream/stacks-0.15.6/og-card.png" />
{% else %}
<title>Stacks, a terrific clipboard manager</title>
<meta property="og:title" content="Stacks, a terrific clipboard manager" />
<meta property="og:url" content="https://stacks.cross.stream" />
<meta property="og:description" content="Stacks is a terrific, open-source clipboard manager built with the Rust based Tauri framework, which optimizes for secure, lightweight, multi-platform apps." />
<meta property="og:site_name" content="Stacks :: Cross Stream"/>
<meta property="og:image" content="https://stacks.cross.stream/stacks-og-card.png" />
{% endif %}
<meta property="og:type" content="website" />
<meta property="og:image:type" content="image/png"/>
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="630"/>
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:creator" content="@cablelounger"/>
{% elif tld == "www" %}
<title>... cross.stream ...</title>
<meta property="og:title" content="... cross.stream ..." />
<meta property="og:url" content=https://www.cross.stream" />
<meta property="og:description" content="Silently, you tread through the shadowed forest, drawn to the entrance of a forgotten cave, its secrets veiled in darkness." />
<meta property="og:site_name" content="Enter?"/>
<meta property="og:image" content="https://www.cross.stream/og-www.png" />
<meta property="og:type" content="website" />
<meta property="og:image:type" content="image/png"/>
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="630"/>
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:creator" content="@cablelounger"/>
{% else %}
<title>{{ tld }}.cross.stream</title>
{% endif %}
<link href="https://cdn.skypack.dev/sanitize.css" rel="stylesheet" />
<link href="https://unpkg.com/sanitize.css/forms.css" rel="stylesheet" />
<link href="https://unpkg.com/sanitize.css/assets.css" rel="stylesheet" />
<link href="https://unpkg.com/sanitize.css/typography.css" rel="stylesheet" />
<link href="https://unpkg.com/sanitize.css/reduce-motion.css" rel="stylesheet" />
<link href="https://unpkg.com/sanitize.css/system-ui.css" rel="stylesheet" />
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
<script src="https://unpkg.com/htmx.org@1.8.4/dist/ext/sse.js"></script>
<script>
const ONE_HOUR = 3600000;
const currentTime = Date.now();
const getSystemTheme = () =>
window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
let theme, expiry;
try {
({ theme, expiry } = JSON.parse(localStorage.getItem("theme") || "{}"));
} catch {
expiry = 0;
}
if (!expiry || currentTime - expiry >= ONE_HOUR) {
theme = getSystemTheme();
}
document.documentElement.setAttribute("data-theme", theme);
</script>
<style>
:root {
--paragraph-color: #172c66;
--accent-paragraph-color: #C24480;
--headline-color: #268bd2;
--background-color: #fef6e4;
--shadow-color: rgba(0, 0, 0, 0.7);
}
html[data-theme="dark"] {
--paragraph-color: #b8c1ec;
--accent-paragraph-color: #268bd2;
--headline-color: #fffffe;
--background-color: #232946;
--shadow-color: rgba(100, 255, 255, 0.7);
}
html[data-theme="dark"] .d-block-light {
display: none;
}
html[data-theme="light"] .d-block-dark {
display: none;
}
button {
cursor: pointer;
}
a {
color: var(--accent-paragraph-color);
text-decoration: none;
border-bottom: 1px dotted;
}
a:hover {
color: var(--headline-color);
}
blockquote {
border-left: 4px solid var(--shadow-color);
padding-left: 20px;
padding-right: 20px;
}
small {
font-size: 0.7rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--headline-color);
}
body {
max-width: 780px;
margin: 0 auto;
background-color: var(--background-color);
color: var(--paragraph-color);
}
</style>
</head>
<body>
<div style="padding: 1rem; display: flex; flex-direction: row; justify-content: space-between">
<h2>{% if tld == "www" %} cross.stream {% else %} {{ tld }} {% endif %}</h2>
<button
style="border: 0"
type="button"
onclick="
let curr = document.documentElement.getAttribute('data-theme');
let target = curr === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', target);
localStorage.setItem('theme', JSON.stringify({ theme: target, expiry: Date.now() }));
"
>
<span class="d-block-light"
><svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-moon"
>
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg
></span>
<span class="d-block-dark"
><svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-sun"
>
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg
></span>
</button>
</div>
<div style="padding: 1rem">{% block main %} {% endblock %}</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment