You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
54 lines
1.4 KiB
54 lines
1.4 KiB
2 years ago
|
<script>
|
||
|
|
import Code from "$/client/components/Code.svelte";
|
||
|
|
import Spinner from "$/client/components/Spinner.svelte";
|
||
|
|
import CodeFormatter from "$/client/components/CodeFormatter.svelte";
|
||
|
|
|
||
|
|
let code = "";
|
||
|
|
let test_code = "/test.js";
|
||
|
|
let message = "";
|
||
|
|
let timer;
|
||
|
|
|
||
|
|
const load_code = async () => {
|
||
|
|
let res = await fetch(test_code);
|
||
|
|
code = res.status == 200 ? await res.text() : `Error getting /test.js: ${res.status}`;
|
||
|
|
}
|
||
|
|
|
||
|
|
const code_copied = () => {
|
||
|
|
if(timer) clearTimeout(timer);
|
||
|
|
message = "You copied it!";
|
||
|
|
timer = setTimeout(() => message = "", 2000);
|
||
|
|
}
|
||
|
|
|
||
|
|
let code_promise = load_code();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
{#await code_promise}
|
||
|
|
<Spinner />
|
||
|
|
{:then}
|
||
|
|
<p>You can display code with color, line numbers, and clipboard copying with <code>Code</code>, and you can click on the code to copy it to your clipboard:</p>
|
||
|
|
<Code content={ code } on:copy={ code_copied } language="javascript" />
|
||
|
|
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<p>It's designed similar to the <code>Markdown</code> component in that you can put the code in <code>content=""</code>, the inner slot, or as a <code>src=""</code> url to load.</p>
|
||
|
|
|
||
|
|
<Code on:copy={ code_copied } language="javascript">
|
||
|
|
{ code }
|
||
|
|
</Code>
|
||
|
|
|
||
|
|
<hr/>
|
||
|
|
|
||
|
|
<p>Here is the same code in <code>test.js</code> being loaded via a <code>src=""</code>.<p>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<Code src={ test_code } on:copy={ code_copied } language="javascript"/>
|
||
|
|
|
||
|
|
{#if message}
|
||
|
|
<toast class="bottom-right">
|
||
|
|
{ message }
|
||
|
|
</toast>
|
||
|
|
{/if}
|
||
|
|
|
||
|
|
<CodeFormatter />
|
||
|
|
{/await}
|