Skip to content

Commit 19e1805

Browse files
BattlefieldDuckBattlefieldDuck
committed
Update routes
1 parent f301a0f commit 19e1805

12 files changed

+412
-113
lines changed

‎README.md

+5-6
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,18 @@
88

99
xterm-svelte is a wrapper for the [xterm.js](https://github.com/xtermjs/xterm.js) library, designed to work seamlessly with SvelteKit. This library allows you to embed a fully functional terminal in your SvelteKit application.
1010

11-
Live Demo: https://xterm-svelte.pages.dev
11+
Check it out: https://xterm-svelte.pages.dev
1212

1313
## Features
1414

1515
- **Full integration with SvelteKit**
16-
16+
1717
Xterm-Svelte is designed to work seamlessly with SvelteKit, allowing you to easily incorporate terminal functionality into your SvelteKit projects.
18-
18+
1919
- **Xterm addons management**
2020

2121
Xterm addons are managed within Xterm-Svelte, providing a unified and consistent interface for working with Xterm and its addons.
22-
22+
2323
- **Continuous package updates**
2424

2525
Xterm-Svelte is regularly updated to ensure compatibility with the latest versions of SvelteKit and Xterm.js. This means you can always use the latest features and improvements from these libraries in your projects.
@@ -48,8 +48,7 @@ Here's a basic example of how to use xterm-svelte in your SvelteKit application:
4848
const terminal = event.detail.terminal;
4949
5050
// FitAddon Usage
51-
const { FitAddon } = await XtermAddon.FitAddon();
52-
const fitAddon = new FitAddon();
51+
const fitAddon = new (await XtermAddon.FitAddon()).FitAddon();
5352
terminal.loadAddon(fitAddon);
5453
fitAddon.fit();
5554

‎src/app.css

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.xterm .xterm-viewport {
2+
scrollbar-color: #999999 #000000;
3+
/* dark thumb and track */
4+
scrollbar-width: thin;
5+
}

‎src/app.html

+50-10
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,52 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
%sveltekit.head%
8-
</head>
9-
<body data-sveltekit-preload-data="hover">
10-
<div>%sveltekit.body%</div>
11-
</body>
12-
</html>
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
%sveltekit.head%
9+
<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.css" rel="stylesheet" />
10+
</head>
11+
12+
<body data-sveltekit-preload-data="hover">
13+
<div>%sveltekit.body%</div>
14+
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script>
15+
<script>
16+
const clipboard = FlowbiteInstances.getInstance('CopyClipboard', 'npm-install-copy-button');
17+
const tooltip = FlowbiteInstances.getInstance('Tooltip', 'tooltip-copy-npm-install-copy-button');
18+
19+
const $defaultIcon = document.getElementById('default-icon');
20+
const $successIcon = document.getElementById('success-icon');
21+
22+
const $defaultTooltipMessage = document.getElementById('default-tooltip-message');
23+
const $successTooltipMessage = document.getElementById('success-tooltip-message');
24+
25+
clipboard.updateOnCopyCallback((clipboard) => {
26+
showSuccess();
27+
28+
// reset to default state
29+
setTimeout(() => {
30+
resetToDefault();
31+
}, 2000);
32+
})
33+
34+
const showSuccess = () => {
35+
$defaultIcon.classList.add('hidden');
36+
$successIcon.classList.remove('hidden');
37+
$defaultTooltipMessage.classList.add('hidden');
38+
$successTooltipMessage.classList.remove('hidden');
39+
tooltip.show();
40+
}
41+
42+
const resetToDefault = () => {
43+
$defaultIcon.classList.remove('hidden');
44+
$successIcon.classList.add('hidden');
45+
$defaultTooltipMessage.classList.remove('hidden');
46+
$successTooltipMessage.classList.add('hidden');
47+
tooltip.hide();
48+
}
49+
</script>
50+
</body>
51+
52+
</html>

‎src/lib/XtermAddonType.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export type * from '@xterm/addon-attach';
2+
export type * from '@xterm/addon-canvas';
3+
export type * from '@xterm/addon-clipboard';
4+
export type * from '@xterm/addon-fit';
5+
export type * from '@xterm/addon-image';
6+
export type * from '@xterm/addon-ligatures';
7+
export type * from '@xterm/addon-search';
8+
export type * from '@xterm/addon-serialize';
9+
// export type * from '@xterm/addon-unicode-graphemes';
10+
export type * from '@xterm/addon-unicode11';
11+
export type * from '@xterm/addon-web-links';
12+
export type * from '@xterm/addon-webgl';

‎src/lib/index.ts

+3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1+
// Imports
12
import Xterm from '$lib/Xterm.svelte';
23
import { XtermAddon } from './XtermAddon.js';
34
import type { XtermEvent } from './XtermEvent.js';
45

6+
// Exports
57
export { Xterm, XtermAddon };
68
export type * from '@xterm/xterm';
9+
export type * from './XtermAddonType.js';
710
export type { XtermEvent };

‎src/routes/+layout.svelte

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<script lang="ts">
2+
import '../app.css';
3+
import Footer from './Footer.svelte';
4+
import Navbar from './Navbar.svelte';
5+
</script>
6+
7+
<Navbar />
8+
<slot />
9+
<Footer />

‎src/routes/+page.svelte

+110-96
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,113 @@
11
<script lang="ts">
2-
import { Xterm, XtermAddon } from '$lib/index.js';
3-
import type { ITerminalOptions, ITerminalInitOnlyOptions, Terminal } from '$lib/index.js';
4-
5-
let options: ITerminalOptions & ITerminalInitOnlyOptions = {};
6-
7-
async function onLoad(event: CustomEvent<{ terminal: Terminal }>) {
8-
console.log('Child component has loaded');
9-
const terminal = event.detail.terminal;
10-
11-
// FitAddon Usage
12-
const { FitAddon } = await XtermAddon.FitAddon();
13-
const fitAddon = new FitAddon();
14-
terminal.loadAddon(fitAddon);
15-
fitAddon.fit();
16-
17-
terminal.onKey(({ key }) => {
18-
terminal.write(key);
19-
});
20-
21-
terminal.write('Hello World');
22-
}
23-
24-
function onBell() {
25-
console.log('onBell()');
26-
}
27-
28-
function onBinary(event: CustomEvent<string>) {
29-
const data = event.detail;
30-
console.log('onBinary()', data);
31-
}
32-
33-
function onCursorMove() {
34-
console.log('onCursorMove()');
35-
}
36-
37-
function onData(event: CustomEvent<string>) {
38-
const data = event.detail;
39-
console.log('onData()', data);
40-
}
41-
42-
function onKey(event: CustomEvent<{ key: string; domEvent: KeyboardEvent }>) {
43-
const data = event.detail;
44-
console.log('onKey()', data);
45-
}
46-
47-
function onLineFeed() {
48-
console.log('onLineFeed()');
49-
}
50-
51-
function onRender(event: CustomEvent<{ start: number; end: number }>) {
52-
const data = event.detail;
53-
console.log('onRender()', data);
54-
}
55-
56-
function onWriteParsed() {
57-
console.log('onWriteParsed()');
58-
}
59-
60-
function onResize(event: CustomEvent<{ cols: number; rows: number }>) {
61-
const data = event.detail;
62-
console.log('onResize()', data);
63-
}
64-
65-
function onScroll(event: CustomEvent<number>) {
66-
const data = event.detail;
67-
console.log('onScroll()', data);
68-
}
69-
70-
function onSelectionChange() {
71-
console.log('onSelectionChange()');
72-
}
73-
74-
function onTitleChange(event: CustomEvent<string>) {
75-
const data = event.detail;
76-
console.log('onTitleChange()', data);
77-
}
2+
import Terminal from './Terminal.svelte';
783
</script>
794

80-
<h1>Welcome to your library project</h1>
81-
<p>Create your package using @sveltejs/package and preview/showcase your work with SvelteKit</p>
82-
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
83-
84-
<Xterm
85-
{options}
86-
on:load={onLoad}
87-
on:bell={onBell}
88-
on:binary={onBinary}
89-
on:cursormove={onCursorMove}
90-
on:data={onData}
91-
on:key={onKey}
92-
on:linefeed={onLineFeed}
93-
on:render={onRender}
94-
on:writeparsed={onWriteParsed}
95-
on:resize={onResize}
96-
on:scroll={onScroll}
97-
on:selectionchange={onSelectionChange}
98-
on:titlechange={onTitleChange}
99-
/>
5+
<svelte:head>
6+
<title>Xterm.js with SvelteKit</title>
7+
</svelte:head>
8+
9+
<div class="container mx-auto px-2 py-12">
10+
<div class="text-center py-12">
11+
<h1
12+
class="mb-4 text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl dark:text-white"
13+
>
14+
Welcome to
15+
<span class="text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400">
16+
xterm-svelte
17+
</span>
18+
</h1>
19+
<p class="mb-6 text-lg font-normal text-gray-500 lg:text-xl dark:text-gray-400">
20+
A SvelteKit wrapper for
21+
<a
22+
href="https://xtermjs.org/"
23+
class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Xterm.js</a
24+
>
25+
, enabling terminal embedding in SvelteKit apps, managing Xterm addons, and providing seamless
26+
updates with the latest SvelteKit and Xterm.js versions.
27+
</p>
28+
29+
<div class="w-full max-w-[24rem] mx-auto">
30+
<div class="relative">
31+
<label for="npm-install-copy-button" class="sr-only">Label</label>
32+
<input
33+
id="npm-install-copy-button"
34+
type="text"
35+
class="col-span-6 bg-gray-50 border border-gray-300 text-gray-500 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500"
36+
value="npm install @battlefieldduck/xterm-svelte"
37+
disabled
38+
readonly
39+
/>
40+
<button
41+
data-copy-to-clipboard-target="npm-install-copy-button"
42+
data-tooltip-target="tooltip-copy-npm-install-copy-button"
43+
class="absolute end-2 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg p-2 inline-flex items-center justify-center"
44+
>
45+
<span id="default-icon">
46+
<svg
47+
class="w-3.5 h-3.5"
48+
aria-hidden="true"
49+
xmlns="http://www.w3.org/2000/svg"
50+
fill="currentColor"
51+
viewBox="0 0 18 20"
52+
>
53+
<path
54+
d="M16 1h-3.278A1.992 1.992 0 0 0 11 0H7a1.993 1.993 0 0 0-1.722 1H2a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2Zm-3 14H5a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0-4H5a1 1 0 0 1 0-2h8a1 1 0 1 1 0 2Zm0-5H5a1 1 0 0 1 0-2h2V2h4v2h2a1 1 0 1 1 0 2Z"
55+
/>
56+
</svg>
57+
</span>
58+
<span id="success-icon" class="hidden inline-flex items-center">
59+
<svg
60+
class="w-3.5 h-3.5 text-blue-700 dark:text-blue-500"
61+
aria-hidden="true"
62+
xmlns="http://www.w3.org/2000/svg"
63+
fill="none"
64+
viewBox="0 0 16 12"
65+
>
66+
<path
67+
stroke="currentColor"
68+
stroke-linecap="round"
69+
stroke-linejoin="round"
70+
stroke-width="2"
71+
d="M1 5.917 5.724 10.5 15 1.5"
72+
/>
73+
</svg>
74+
</span>
75+
</button>
76+
<div
77+
id="tooltip-copy-npm-install-copy-button"
78+
role="tooltip"
79+
class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
80+
>
81+
<span id="default-tooltip-message">Copy to clipboard</span>
82+
<span id="success-tooltip-message" class="hidden">Copied!</span>
83+
<div class="tooltip-arrow" data-popper-arrow></div>
84+
</div>
85+
</div>
86+
</div>
87+
</div>
88+
89+
<div
90+
class="flex items-center p-4 mb-4 text-sm text-blue-800 rounded-lg bg-blue-50 dark:bg-gray-800 dark:text-blue-400"
91+
role="alert"
92+
>
93+
<svg
94+
class="flex-shrink-0 inline w-4 h-4 me-3"
95+
aria-hidden="true"
96+
xmlns="http://www.w3.org/2000/svg"
97+
fill="currentColor"
98+
viewBox="0 0 20 20"
99+
>
100+
<path
101+
d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"
102+
/>
103+
</svg>
104+
<span class="sr-only">Info</span>
105+
<div>
106+
Below is a simulated demo of the Windows Command Prompt, powered by xterm.js and integrated
107+
with xterm-svelte. Feel free to interact with the terminal - try pressing ‘Enter’ to see it in
108+
action!
109+
</div>
110+
</div>
111+
112+
<Terminal />
113+
</div>

‎src/routes/Footer.svelte

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<footer class="bg-white dark:bg-gray-900">
2+
<div class="mx-auto container">
3+
<div class="px-4 py-6 md:flex md:items-center md:justify-between">
4+
<span class="text-sm text-gray-500 dark:text-gray-300 sm:text-center"
5+
>© 2024 <a href="/">xterm-svelte</a>. All Rights Reserved.
6+
</span>
7+
<div class="flex mt-4 sm:justify-center md:mt-0 space-x-5 rtl:space-x-reverse">
8+
<a
9+
href="https://github.com/BattlefieldDuck/xterm-svelte"
10+
target="_blank"
11+
class="text-gray-400 hover:text-gray-900 dark:hover:text-white"
12+
>
13+
<svg
14+
class="w-4 h-4"
15+
aria-hidden="true"
16+
xmlns="http://www.w3.org/2000/svg"
17+
fill="currentColor"
18+
viewBox="0 0 20 20"
19+
>
20+
<path
21+
fill-rule="evenodd"
22+
d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z"
23+
clip-rule="evenodd"
24+
/>
25+
</svg>
26+
<span class="sr-only">GitHub account</span>
27+
</a>
28+
</div>
29+
</div>
30+
</div>
31+
</footer>

0 commit comments

Comments
 (0)