web/debug: add a copy button, fix page padding, refactor (#782)

Co-authored-by: wukko <me@wukko.me>
This commit is contained in:
Alec Armbruster
2024-10-11 10:04:19 -07:00
committed by GitHub
parent 1e26788a1e
commit dc12d6acad
2 changed files with 47 additions and 29 deletions

View File

@ -8,6 +8,9 @@
export let title: string;
export let sectionId: string;
export let beta = false;
export let copyData = "";
const sectionURL = `${$page.url.origin}${$page.url.pathname}#${sectionId}`;
let copied = false;
@ -19,19 +22,27 @@
</script>
<div class="heading-container">
<h3 class="content-title">{title}</h3>
<h3 class="content-title">
{title}
</h3>
{#if beta}
<div class="beta-label">{$t("general.beta")}</div>
<div class="beta-label">
{$t("general.beta")}
</div>
{/if}
<button
class="link-copy"
aria-label={copied ? $t("button.copied") : $t("button.copy.section")}
aria-label={copied
? $t("button.copied")
: $t(`button.copy${copyData ? "" : ".section"}`)}
on:click={() => {
copied = true;
copyURL(`${$page.url.origin}${$page.url.pathname}#${sectionId}`);
copyURL(copyData || sectionURL);
}}
>
<CopyIcon check={copied} />
<CopyIcon check={copied} regularIcon={!!copyData} />
</button>
</div>