static/index.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;
}

sl-input {
    margin-bottom: 10px;
}

sl-button {
    margin-top: 10px;
}

sl-alert {
    margin-top: 20px;
}

sl-tree {
    margin-top: 20px;
}

sl-icon[name="type"] {
    color: var(--sl-color-danger-500);
}

sl-icon[name="square"] {
    color: var(--sl-color-warning-500);
    cursor: pointer;
}

sl-icon[name="check-square"] {
    color: var(--sl-color-success-500);
}

sl-icon[name="check-square-fill"] {
    color: var(--sl-color-success-500);
}
		</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>
let title = '{{ .title }}';

function setInputIcon(val, icon) {
    if (val.length > 0) {
        icon.setAttribute('name', 'square');
    } else {
        icon.setAttribute('name', 'type');
    }
}

function setInputIcons() {
    setInputIcon(
        document.getElementById('short').value,
        document.getElementById('short-icon'),
    );

    setInputIcon(
        document.getElementById('long').value,
        document.getElementById('long-icon'),
    );
}

function clearAlerts() {
    document.getElementById('err').hide();
}

function error(err1, err2) {
	clearAlerts();

	document.getElementById('err1').innerText = err1;
	document.getElementById('err2').innerText = err2;
	document.getElementById('err').show();
}

async function setFromInputs() {
    const short = document.getElementById('short').value;
    const long = document.getElementById('long').value;

    if (long == '') {
        error('Unable to set', 'Long URL is required');
        return;
    }

    document.getElementById('short-icon').setAttribute('name', 'check-square-fill');
    document.getElementById('long-icon').setAttribute('name', 'check-square-fill');

    await set(short, long);
}

async function set(short, long) {
    if (short != '') {  
        setShortItem(short, null, 'check-square-fill');
    }

    const oldShort = document.getElementById('short').value;
    const oldLong = document.getElementById('long').value;

    let resp;

    try {
        console.log(short, long);
        
        resp = await fetch('./', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                short: short,
                long: long,
            }),
        });
    } catch (err) {
        console.log(err);
        setTimeout(async () => await set(short, long), 5000);
        return;
    }

    if (resp.status !== 200) {
        error('Failed to set', (await resp.json()).message);
        return;
    }

    const data = await resp.json();
    const newShort = data.short;
    const newURL = data.url;

    setShortItem(newShort, newURL, 'check-square');

    // Only set the icons if we were actually setting from these inputs
    if (document.getElementById('short').value == short && document.getElementById('long').value == long) {
        document.getElementById('short-icon').setAttribute('name', 'check-square');
        document.getElementById('long-icon').setAttribute('name', 'check-square');
    }

    // Only set the clipboard if the user didn't change the inputs
    if (document.getElementById('short').value == oldShort && document.getElementById('long').value == oldLong) {
        try {
            await navigator.clipboard.writeText(newURL);
        } catch (err) {
            console.log(err);
        }
    }

    const shorts = [];
    for (const elem of document.getElementById('tree').children) {
        const icon = elem.getElementsByTagName('sl-icon')[0];
        if (icon.getAttribute('name') == 'check-square-fill' ||
            icon.getAttribute('name') == 'check-square') {
            shorts.push(elem.textContent);
        }
    }

    suggest(shorts, title);
}

async function suggest(shorts, title) {
    try {
        resp = await fetch('./', {
            method: 'QUERY',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                shorts: shorts,
                title: title,
            }),
        });
    } catch (err) {
        console.log(err);
        return;
    }

    const data = await resp.json();

    for (const short of data.shorts) {
        appendShortItem(short, long);
    }
}

function setShortItem(short, url, icon) {
    const tree = document.getElementById('tree');

    for (const item of tree.children) {
        if (item.textContent == short) {
            tree.removeChild(item);
        }
    }

    const item = document.createElement('sl-tree-item');
    item.appendChild(document.createElement('sl-icon')).setAttribute('name', icon);
    item.appendChild(document.createTextNode(short));

    if (url != null) {
        item.addEventListener('click', () => {
            navigator.clipboard.writeText(url);
        });
    }

    tree.insertBefore(item, tree.firstChild);
}

function appendShortItem(short, long) {
    const tree = document.getElementById('tree');

    for (const item of tree.children) {
        if (item.textContent == short) {
            return;
        }
    }

    const item = document.createElement('sl-tree-item');
    item.appendChild(document.createElement('sl-icon')).setAttribute('name', 'square');
    item.appendChild(document.createTextNode(short));
    item.addEventListener('click', () => {
        set(short, long);
    });

    tree.appendChild(item);
}

document.addEventListener('DOMContentLoaded', async () => {
    await Promise.all([
        customElements.whenDefined('sl-input'),
        customElements.whenDefined('sl-icon'),
        customElements.whenDefined('sl-button'),
        customElements.whenDefined('sl-alert'),
        customElements.whenDefined('sl-tree'),
    ]);

    let shortPaste = false;

    document.getElementById('short').addEventListener('sl-input', async () => {
        clearAlerts();
        setInputIcons();

        if (shortPaste) {
            shortPaste = false;
            await setFromInputs();
        }
    });

    document.getElementById('short').addEventListener('keydown', async (e) => {
        if (e.key === 'Enter') {
            await setFromInputs();
        }
    });

    document.getElementById('short').addEventListener('paste', async () => {
        if (document.getElementById('long').value != '') {
            shortPaste = true;
        }
    });

    document.getElementById('short-icon').addEventListener('click', async () => {
        await setFromInputs();
    });

    let longPaste = false;

    document.getElementById('long').addEventListener('sl-input', async () => {
        clearAlerts();
        setInputIcons();
        document.getElementById('tree').replaceChildren();
        title = '';

        if (longPaste) {
            longPaste = false;
            await setFromInputs();
        }
    });

    document.getElementById('long').addEventListener('keydown', async (e) => {
        if (e.key === 'Enter') {
            await setFromInputs();
        }
    });

    document.getElementById('long').addEventListener('paste', () => {
        if (document.getElementById('short').value != '') {
            longPaste = true;
        }
    });

    document.getElementById('long-icon').addEventListener('click', async () => {
        await setFromInputs();
    });


    document.getElementById('set').addEventListener('click', async () => {
        await setFromInputs();
    });

    if (document.getElementById('long').value == '') {
        document.getElementById('long').focus();
    } else {
        document.getElementById('short').focus();
    }

    setInputIcons();

    const short = document.getElementById('short').value;   
    
    if (short != '') {
        suggest([short], title);
    } else if (title != '') {
        suggest([], title);
    }
});
        </script>
	</head>
	<body>
        <div id="container" style="width: min(500px, calc(100vw - 10px))">            
            <sl-input id="short" value="{{ .short }}" label="{{ .host }}/">
                <sl-icon id="short-icon" name="type" slot="suffix"></sl-icon>
            </sl-input>

            <sl-input id="long" value="{{ .long }}" label="⟶" type="url">
                <sl-icon id="long-icon" name="type" slot="suffix"></sl-icon>
            </sl-input>

            <div style="text-align: center; margin-top: 10px;">
                <sl-button variant="primary" id="set">Set</sl-button>
            </div>

            <sl-alert id="err" variant="danger">
                <sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
                <strong id="err1"></strong><br />
                <span id="err2"></span>
            </sl-alert>

            <sl-tree id="tree">
            </sl-tree>
        </div>
	</body>
</html>
Mostly working UI 2024-11-26 21:38:49 -06:00			`<!doctype html>`
			`<html>`
			`<head>`
			`<style>`
			`:not(:defined) {`
			`visibility: hidden;`
			`}`

			`body {`
			`font: 12px var(--sl-font-mono);`
			`display: flex;`
			`flex-direction: column;`
			`align-items: center;`
			`}`

Better vertical spacing 2024-11-28 07:44:04 -06:00			`sl-input {`
			`margin-bottom: 10px;`
			`}`

			`sl-button {`
			`margin-top: 10px;`
			`}`

			`sl-alert {`
			`margin-top: 20px;`
			`}`

			`sl-tree {`
			`margin-top: 20px;`
			`}`

Mostly working UI 2024-11-26 21:38:49 -06:00			`sl-icon[name="type"] {`
			`color: var(--sl-color-danger-500);`
			`}`

			`sl-icon[name="square"] {`
			`color: var(--sl-color-warning-500);`
Serve redirects 2024-11-26 22:07:05 -06:00			`cursor: pointer;`
Mostly working UI 2024-11-26 21:38:49 -06:00			`}`

			`sl-icon[name="check-square"] {`
			`color: var(--sl-color-success-500);`
			`}`

			`sl-icon[name="check-square-fill"] {`
			`color: var(--sl-color-success-500);`
			`}`
			`</style>`
			`<meta name="viewport" content="width=device-width, initial-scale=1.0" />`
Fix favicon in safari really 2024-12-04 21:37:23 -08:00			`<link rel="icon" type="image/png" href="_favicon.png" />`
			`<link rel="apple-touch-icon" href="_favicon.png" />`
favicon 2024-11-28 08:15:31 -06:00			`<link`
Mostly working UI 2024-11-26 21:38:49 -06:00			`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>`
Suggest based on title from bookmarklet 2024-12-06 11:59:31 -08:00			`let title = '{{ .title }}';`

Mostly working UI 2024-11-26 21:38:49 -06:00			`function setInputIcon(val, icon) {`
			`if (val.length > 0) {`
			`icon.setAttribute('name', 'square');`
			`} else {`
			`icon.setAttribute('name', 'type');`
			`}`
			`}`

			`function setInputIcons() {`
			`setInputIcon(`
			`document.getElementById('short').value,`
			`document.getElementById('short-icon'),`
			`);`

			`setInputIcon(`
			`document.getElementById('long').value,`
			`document.getElementById('long-icon'),`
			`);`
			`}`

			`function clearAlerts() {`
			`document.getElementById('err').hide();`
			`}`

			`function error(err1, err2) {`
			`clearAlerts();`

			`document.getElementById('err1').innerText = err1;`
			`document.getElementById('err2').innerText = err2;`
			`document.getElementById('err').show();`
			`}`

Revert "Capture interactive context for copy to clipboard" This reverts commit 7dbddad1bc7ee818f64abfcdc138eda9783016cd. 2024-12-02 20:40:06 -08:00			`async function setFromInputs() {`
Mostly working UI 2024-11-26 21:38:49 -06:00			`const short = document.getElementById('short').value;`
			`const long = document.getElementById('long').value;`

			`if (long == '') {`
			`error('Unable to set', 'Long URL is required');`
			`return;`
			`}`

			`document.getElementById('short-icon').setAttribute('name', 'check-square-fill');`
			`document.getElementById('long-icon').setAttribute('name', 'check-square-fill');`
Auto generate short links if empty 2024-11-26 22:20:10 -06:00
Revert "Capture interactive context for copy to clipboard" This reverts commit 7dbddad1bc7ee818f64abfcdc138eda9783016cd. 2024-12-02 20:40:06 -08:00			`await set(short, long);`
OpenAI-based short link suggestions 2024-11-27 22:29:03 -06:00			`}`

Revert "Capture interactive context for copy to clipboard" This reverts commit 7dbddad1bc7ee818f64abfcdc138eda9783016cd. 2024-12-02 20:40:06 -08:00			`async function set(short, long) {`
Auto generate short links if empty 2024-11-26 22:20:10 -06:00			`if (short != '') {`
JSON request support (additionally), return domain 2024-12-03 13:54:46 -08:00			`setShortItem(short, null, 'check-square-fill');`
Auto generate short links if empty 2024-11-26 22:20:10 -06:00			`}`
Mostly working UI 2024-11-26 21:38:49 -06:00
Smarter clipboard copies 2024-11-27 22:36:00 -06:00			`const oldShort = document.getElementById('short').value;`
			`const oldLong = document.getElementById('long').value;`

Fix retry loop on clipboard permission denied 2024-12-02 20:22:00 -08:00			`let resp;`
Mostly working UI 2024-11-26 21:38:49 -06:00
Fix retry loop on clipboard permission denied 2024-12-02 20:22:00 -08:00			`try {`
Debug logging 2024-12-06 13:07:08 -08:00			`console.log(short, long);`

JSON request support (additionally), return domain 2024-12-03 13:54:46 -08:00			`resp = await fetch('./', {`
Fix retry loop on clipboard permission denied 2024-12-02 20:22:00 -08:00			`method: 'POST',`
JSON request support (additionally), return domain 2024-12-03 13:54:46 -08:00			`headers: {`
			`'Content-Type': 'application/json',`
			`},`
			`body: JSON.stringify({`
			`short: short,`
			`long: long,`
			`}),`
Fix retry loop on clipboard permission denied 2024-12-02 20:22:00 -08:00			`});`
			`} catch (err) {`
			`console.log(err);`
Revert "Capture interactive context for copy to clipboard" This reverts commit 7dbddad1bc7ee818f64abfcdc138eda9783016cd. 2024-12-02 20:40:06 -08:00			`setTimeout(async () => await set(short, long), 5000);`
Fix retry loop on clipboard permission denied 2024-12-02 20:22:00 -08:00			`return;`
			`}`
Auto generate short links if empty 2024-11-26 22:20:10 -06:00
Fix retry loop on clipboard permission denied 2024-12-02 20:22:00 -08:00			`if (resp.status !== 200) {`
			`error('Failed to set', (await resp.json()).message);`
			`return;`
			`}`
OpenAI-based short link suggestions 2024-11-27 22:29:03 -06:00
Fix retry loop on clipboard permission denied 2024-12-02 20:22:00 -08:00			`const data = await resp.json();`
			`const newShort = data.short;`
Full url in response 2024-12-03 20:33:57 -08:00			`const newURL = data.url;`
Fix retry loop on clipboard permission denied 2024-12-02 20:22:00 -08:00
Full url in response 2024-12-03 20:33:57 -08:00			`setShortItem(newShort, newURL, 'check-square');`
Fix retry loop on clipboard permission denied 2024-12-02 20:22:00 -08:00
			`// Only set the icons if we were actually setting from these inputs`
			`if (document.getElementById('short').value == short && document.getElementById('long').value == long) {`
			`document.getElementById('short-icon').setAttribute('name', 'check-square');`
			`document.getElementById('long-icon').setAttribute('name', 'check-square');`
			`}`
Smarter clipboard copies 2024-11-27 22:36:00 -06:00
Fix retry loop on clipboard permission denied 2024-12-02 20:22:00 -08:00			`// Only set the clipboard if the user didn't change the inputs`
			`if (document.getElementById('short').value == oldShort && document.getElementById('long').value == oldLong) {`
			`try {`
Full url in response 2024-12-03 20:33:57 -08:00			`await navigator.clipboard.writeText(newURL);`
Fix retry loop on clipboard permission denied 2024-12-02 20:22:00 -08:00			`} catch (err) {`
			`console.log(err);`
OpenAI-based short link suggestions 2024-11-27 22:29:03 -06:00			`}`
Fix retry loop on clipboard permission denied 2024-12-02 20:22:00 -08:00			`}`
OpenAI-based short link suggestions 2024-11-27 22:29:03 -06:00
JSON request support (additionally), return domain 2024-12-03 13:54:46 -08:00			`const shorts = [];`
OpenAI-based short link suggestions 2024-11-27 22:29:03 -06:00			`for (const elem of document.getElementById('tree').children) {`
			`const icon = elem.getElementsByTagName('sl-icon')[0];`
			`if (icon.getAttribute('name') == 'check-square-fill' \|\|`
			`icon.getAttribute('name') == 'check-square') {`
JSON request support (additionally), return domain 2024-12-03 13:54:46 -08:00			`shorts.push(elem.textContent);`
OpenAI-based short link suggestions 2024-11-27 22:29:03 -06:00			`}`
Mostly working UI 2024-11-26 21:38:49 -06:00			`}`
OpenAI-based short link suggestions 2024-11-27 22:29:03 -06:00
Suggest based on title from bookmarklet 2024-12-06 11:59:31 -08:00			`suggest(shorts, title);`
			`}`

			`async function suggest(shorts, title) {`
JSON request support (additionally), return domain 2024-12-03 13:54:46 -08:00			`try {`
			`resp = await fetch('./', {`
			`method: 'QUERY',`
			`headers: {`
			`'Content-Type': 'application/json',`
			`},`
			`body: JSON.stringify({`
			`shorts: shorts,`
Suggest based on title from bookmarklet 2024-12-06 11:59:31 -08:00			`title: title,`
JSON request support (additionally), return domain 2024-12-03 13:54:46 -08:00			`}),`
			`});`
			`} catch (err) {`
			`console.log(err);`
			`return;`
			`}`

Suggest based on title from bookmarklet 2024-12-06 11:59:31 -08:00			`const data = await resp.json();`

			`for (const short of data.shorts) {`
JSON request support (additionally), return domain 2024-12-03 13:54:46 -08:00			`appendShortItem(short, long);`
			`}`
Mostly working UI 2024-11-26 21:38:49 -06:00			`}`

Full url in response 2024-12-03 20:33:57 -08:00			`function setShortItem(short, url, icon) {`
Mostly working UI 2024-11-26 21:38:49 -06:00			`const tree = document.getElementById('tree');`

			`for (const item of tree.children) {`
			`if (item.textContent == short) {`
			`tree.removeChild(item);`
			`}`
			`}`

			`const item = document.createElement('sl-tree-item');`
			`item.appendChild(document.createElement('sl-icon')).setAttribute('name', icon);`
			`item.appendChild(document.createTextNode(short));`
JSON request support (additionally), return domain 2024-12-03 13:54:46 -08:00
Full url in response 2024-12-03 20:33:57 -08:00			`if (url != null) {`
JSON request support (additionally), return domain 2024-12-03 13:54:46 -08:00			`item.addEventListener('click', () => {`
Full url in response 2024-12-03 20:33:57 -08:00			`navigator.clipboard.writeText(url);`
JSON request support (additionally), return domain 2024-12-03 13:54:46 -08:00			`});`
			`}`
Copy to clipboard 2024-11-27 16:46:18 -06:00
Mostly working UI 2024-11-26 21:38:49 -06:00			`tree.insertBefore(item, tree.firstChild);`
			`}`

OpenAI-based short link suggestions 2024-11-27 22:29:03 -06:00			`function appendShortItem(short, long) {`
			`const tree = document.getElementById('tree');`

			`for (const item of tree.children) {`
			`if (item.textContent == short) {`
			`return;`
			`}`
			`}`

			`const item = document.createElement('sl-tree-item');`
			`item.appendChild(document.createElement('sl-icon')).setAttribute('name', 'square');`
			`item.appendChild(document.createTextNode(short));`
			`item.addEventListener('click', () => {`
			`set(short, long);`
			`});`

			`tree.appendChild(item);`
			`}`

Serve redirects 2024-11-26 22:07:05 -06:00			`document.addEventListener('DOMContentLoaded', async () => {`
			`await Promise.all([`
			`customElements.whenDefined('sl-input'),`
			`customElements.whenDefined('sl-icon'),`
			`customElements.whenDefined('sl-button'),`
			`customElements.whenDefined('sl-alert'),`
			`customElements.whenDefined('sl-tree'),`
			`]);`

Try another paste hook option 2024-12-02 20:45:54 -08:00			`let shortPaste = false;`

			`document.getElementById('short').addEventListener('sl-input', async () => {`
Mostly working UI 2024-11-26 21:38:49 -06:00			`clearAlerts();`
			`setInputIcons();`
Try another paste hook option 2024-12-02 20:45:54 -08:00
			`if (shortPaste) {`
			`shortPaste = false;`
			`await setFromInputs();`
			`}`
Mostly working UI 2024-11-26 21:38:49 -06:00			`});`

Fix retry loop on clipboard permission denied 2024-12-02 20:22:00 -08:00			`document.getElementById('short').addEventListener('keydown', async (e) => {`
Mostly working UI 2024-11-26 21:38:49 -06:00			`if (e.key === 'Enter') {`
Fix retry loop on clipboard permission denied 2024-12-02 20:22:00 -08:00			`await setFromInputs();`
Mostly working UI 2024-11-26 21:38:49 -06:00			`}`
			`});`

Fix retry loop on clipboard permission denied 2024-12-02 20:22:00 -08:00			`document.getElementById('short').addEventListener('paste', async () => {`
Mostly working UI 2024-11-26 21:38:49 -06:00			`if (document.getElementById('long').value != '') {`
Try another paste hook option 2024-12-02 20:45:54 -08:00			`shortPaste = true;`
Mostly working UI 2024-11-26 21:38:49 -06:00			`}`
			`});`

Fix retry loop on clipboard permission denied 2024-12-02 20:22:00 -08:00			`document.getElementById('short-icon').addEventListener('click', async () => {`
			`await setFromInputs();`
Mostly working UI 2024-11-26 21:38:49 -06:00			`});`

Try another paste hook option 2024-12-02 20:45:54 -08:00			`let longPaste = false;`
Mostly working UI 2024-11-26 21:38:49 -06:00
Try another paste hook option 2024-12-02 20:45:54 -08:00			`document.getElementById('long').addEventListener('sl-input', async () => {`
Mostly working UI 2024-11-26 21:38:49 -06:00			`clearAlerts();`
			`setInputIcons();`
Don't wipe history on long field tab 2024-12-03 13:26:20 -08:00			`document.getElementById('tree').replaceChildren();`
Suggest based on title from bookmarklet 2024-12-06 11:59:31 -08:00			`title = '';`
Try another paste hook option 2024-12-02 20:45:54 -08:00
			`if (longPaste) {`
			`longPaste = false;`
			`await setFromInputs();`
			`}`
Mostly working UI 2024-11-26 21:38:49 -06:00			`});`

Fix retry loop on clipboard permission denied 2024-12-02 20:22:00 -08:00			`document.getElementById('long').addEventListener('keydown', async (e) => {`
Mostly working UI 2024-11-26 21:38:49 -06:00			`if (e.key === 'Enter') {`
Fix retry loop on clipboard permission denied 2024-12-02 20:22:00 -08:00			`await setFromInputs();`
Mostly working UI 2024-11-26 21:38:49 -06:00			`}`
			`});`

			`document.getElementById('long').addEventListener('paste', () => {`
			`if (document.getElementById('short').value != '') {`
Try another paste hook option 2024-12-02 20:45:54 -08:00			`longPaste = true;`
Mostly working UI 2024-11-26 21:38:49 -06:00			`}`
			`});`

Fix retry loop on clipboard permission denied 2024-12-02 20:22:00 -08:00			`document.getElementById('long-icon').addEventListener('click', async () => {`
			`await setFromInputs();`
Mostly working UI 2024-11-26 21:38:49 -06:00			`});`


Fix retry loop on clipboard permission denied 2024-12-02 20:22:00 -08:00			`document.getElementById('set').addEventListener('click', async () => {`
			`await setFromInputs();`
Mostly working UI 2024-11-26 21:38:49 -06:00			`});`

Use tree for list 2024-12-05 17:26:00 -08:00			`if (document.getElementById('long').value == '') {`
			`document.getElementById('long').focus();`
			`} else {`
			`document.getElementById('short').focus();`
			`}`
Mostly working UI 2024-11-26 21:38:49 -06:00
Serve redirects 2024-11-26 22:07:05 -06:00			`setInputIcons();`
Suggest based on title from bookmarklet 2024-12-06 11:59:31 -08:00
			`const short = document.getElementById('short').value;`

			`if (short != '') {`
			`suggest([short], title);`
			`} else if (title != '') {`
			`suggest([], title);`
			`}`
Mostly working UI 2024-11-26 21:38:49 -06:00			`});`
			`</script>`
			`</head>`
			`<body>`
_list 2024-12-05 00:07:04 -08:00			`<div id="container" style="width: min(500px, calc(100vw - 10px))">`
			`<sl-input id="short" value="{{ .short }}" label="{{ .host }}/">`
Mostly working UI 2024-11-26 21:38:49 -06:00			`<sl-icon id="short-icon" name="type" slot="suffix"></sl-icon>`
			`</sl-input>`
Better vertical spacing 2024-11-28 07:44:04 -06:00
Support pre-filling long field 2024-12-02 22:29:01 -08:00			`<sl-input id="long" value="{{ .long }}" label="⟶" type="url">`
Mostly working UI 2024-11-26 21:38:49 -06:00			`<sl-icon id="long-icon" name="type" slot="suffix"></sl-icon>`
			`</sl-input>`

Better vertical spacing 2024-11-28 07:44:04 -06:00			`<div style="text-align: center; margin-top: 10px;">`
Mostly working UI 2024-11-26 21:38:49 -06:00			`<sl-button variant="primary" id="set">Set</sl-button>`
			`</div>`

			`<sl-alert id="err" variant="danger">`
			`<sl-icon slot="icon" name="exclamation-octagon"></sl-icon>`
			`<strong id="err1"></strong><br />`
			`<span id="err2"></span>`
			`</sl-alert>`

			`<sl-tree id="tree">`
			`</sl-tree>`
			`</div>`
			`</body>`
			`</html>`