119 lines
4.2 KiB
HTML
119 lines
4.2 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
:not(:defined) {
|
|
visibility: hidden;
|
|
}
|
|
|
|
body {
|
|
font: 12px var(--sl-font-mono);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: var(--sl-color-primary-700);
|
|
text-wrap: nowrap;
|
|
}
|
|
|
|
sl-tree-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.short, .long {
|
|
margin-left: 7px;
|
|
}
|
|
</style>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="icon" type="image/png" href="_favicon.png" />
|
|
<link rel="apple-touch-icon" href="_favicon.png" />
|
|
<link
|
|
rel="stylesheet"
|
|
media="(prefers-color-scheme:light)"
|
|
href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/themes/light.css"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
media="(prefers-color-scheme:dark)"
|
|
href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/themes/dark.css"
|
|
onload="document.documentElement.classList.add('sl-theme-dark');"
|
|
/>
|
|
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/shoelace-autoloader.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
await Promise.allSettled([
|
|
customElements.whenDefined('sl-tree'),
|
|
customElements.whenDefined('sl-tree-item'),
|
|
customElements.whenDefined('sl-copy-button'),
|
|
customElements.whenDefined('sl-tooltip'),
|
|
customElements.whenDefined('sl-icon')
|
|
]);
|
|
|
|
document.getElementById('search').addEventListener('sl-input', () => {
|
|
const search = document.getElementById('search').value.toLowerCase();
|
|
const rows = document.getElementById('links').children;
|
|
|
|
for (const row of rows) {
|
|
const query = row.getAttribute('data-query');
|
|
|
|
if (search == undefined || search == '' || query.includes(search)) {
|
|
row.style.display = 'flex';
|
|
} else {
|
|
row.style.display = 'none';
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="container" style="width: min(500px, calc(100vw - 10px))">
|
|
<sl-input id="search"></sl-input>
|
|
<br />
|
|
<br />
|
|
|
|
<sl-tree id="links">
|
|
{{ range .links }}
|
|
<sl-tree-item data-query="{{ .Short | lower }}|{{ .Long | lower }}">
|
|
|
|
<sl-copy-button value="{{ .URL }}" style="color: var(--sl-color-neutral-400);"></sl-copy-button>
|
|
<sl-tooltip content="Edit">
|
|
<a href="./?short={{ .Short }}">
|
|
<sl-icon name="pencil" label="Edit" style="color: var(--sl-color-neutral-400);"></sl-icon>
|
|
</a>
|
|
</sl-tooltip>
|
|
<a href="{{ .URL }}" class="short">{{ .Short }}</a>
|
|
|
|
<sl-tree-item>
|
|
<sl-copy-button value="{{ .Long }}" style="color: var(--sl-color-neutral-400);"></sl-copy-button>
|
|
<sl-tooltip content="Add">
|
|
<a href="./?long={{ .Long }}">
|
|
<sl-icon name="plus-circle" label="Add" style="color: var(--sl-color-neutral-400);"></sl-icon>
|
|
</a>
|
|
</sl-tooltip>
|
|
<a href="{{ .Long }}" class="long">{{ .Long }}</a>
|
|
</sl-tree-item>
|
|
|
|
{{ range .History }}
|
|
<sl-tree-item>
|
|
<sl-copy-button value="{{ .Long }}" style="color: var(--sl-color-neutral-400);"></sl-copy-button>
|
|
<sl-tooltip content="Restore">
|
|
<a href="./?short={{ .Short }}&long={{ .Long }}">
|
|
<sl-icon name="arrow-counterclockwise" label="Restore" style="color: var(--sl-color-neutral-400);"></sl-icon>
|
|
</a>
|
|
</sl-tooltip>
|
|
<a href="{{ .Long }}" class="long">{{ .Long }}</a>
|
|
</sl-tree-item>
|
|
{{ end }}
|
|
|
|
</sl-tree-item>
|
|
{{ end }}
|
|
</sl-tree>
|
|
</div>
|
|
</body>
|
|
</html> |