This is the template project that's checked out and configured when you run the bando-up command from ljsthw-bandolier. This is where the code really lives.
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.
bandolier-template/admin/bando/demos/Code.svelte

54 lines
1.4 KiB

<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}