Update routes

BattlefieldDuck · Apr 30, 2024 · 19e1805 · 19e1805
1 parent f301a0f
commit 19e1805
Show file tree

Hide file tree

Showing 12 changed files with 412 additions and 113 deletions.
diff --git a/README.md b/README.md
@@ -8,18 +8,18 @@
 
 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.
 
-Live Demo: https://xterm-svelte.pages.dev
+Check it out: https://xterm-svelte.pages.dev
 
 ## Features
 
 - **Full integration with SvelteKit**
-  
+
   Xterm-Svelte is designed to work seamlessly with SvelteKit, allowing you to easily incorporate terminal functionality into your SvelteKit projects.
-  
+
 - **Xterm addons management**
 
   Xterm addons are managed within Xterm-Svelte, providing a unified and consistent interface for working with Xterm and its addons.
-  
+
 - **Continuous package updates**
 
   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:
         const terminal = event.detail.terminal;
 
         // FitAddon Usage
-        const { FitAddon } = await XtermAddon.FitAddon();
-        const fitAddon = new FitAddon();
+        const fitAddon = new (await XtermAddon.FitAddon()).FitAddon();
         terminal.loadAddon(fitAddon);
         fitAddon.fit();
 

diff --git a/src/app.css b/src/app.css
@@ -0,0 +1,5 @@
+.xterm .xterm-viewport {
+    scrollbar-color: #999999 #000000;
+    /* dark thumb and track */
+    scrollbar-width: thin;
+}
diff --git a/src/app.html b/src/app.html
@@ -1,12 +1,52 @@
 <!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div>%sveltekit.body%</div>
-	</body>
-</html>
+
+<head>
+	<meta charset="utf-8" />
+	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	%sveltekit.head%
+	<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.css" rel="stylesheet" />
+</head>
+
+<body data-sveltekit-preload-data="hover">
+	<div>%sveltekit.body%</div>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script>
+	<script>
+		const clipboard = FlowbiteInstances.getInstance('CopyClipboard', 'npm-install-copy-button');
+		const tooltip = FlowbiteInstances.getInstance('Tooltip', 'tooltip-copy-npm-install-copy-button');
+
+		const $defaultIcon = document.getElementById('default-icon');
+		const $successIcon = document.getElementById('success-icon');
+
+		const $defaultTooltipMessage = document.getElementById('default-tooltip-message');
+		const $successTooltipMessage = document.getElementById('success-tooltip-message');
+
+		clipboard.updateOnCopyCallback((clipboard) => {
+			showSuccess();
+
+			// reset to default state
+			setTimeout(() => {
+				resetToDefault();
+			}, 2000);
+		})
+
+		const showSuccess = () => {
+			$defaultIcon.classList.add('hidden');
+			$successIcon.classList.remove('hidden');
+			$defaultTooltipMessage.classList.add('hidden');
+			$successTooltipMessage.classList.remove('hidden');
+			tooltip.show();
+		}
+
+		const resetToDefault = () => {
+			$defaultIcon.classList.remove('hidden');
+			$successIcon.classList.add('hidden');
+			$defaultTooltipMessage.classList.remove('hidden');
+			$successTooltipMessage.classList.add('hidden');
+			tooltip.hide();
+		}
+	</script>
+</body>
+
+</html>
diff --git a/src/lib/XtermAddonType.ts b/src/lib/XtermAddonType.ts
@@ -0,0 +1,12 @@
+export type * from '@xterm/addon-attach';
+export type * from '@xterm/addon-canvas';
+export type * from '@xterm/addon-clipboard';
+export type * from '@xterm/addon-fit';
+export type * from '@xterm/addon-image';
+export type * from '@xterm/addon-ligatures';
+export type * from '@xterm/addon-search';
+export type * from '@xterm/addon-serialize';
+// export type * from '@xterm/addon-unicode-graphemes';
+export type * from '@xterm/addon-unicode11';
+export type * from '@xterm/addon-web-links';
+export type * from '@xterm/addon-webgl';
diff --git a/src/lib/index.ts b/src/lib/index.ts
@@ -1,7 +1,10 @@
+// Imports
 import Xterm from '$lib/Xterm.svelte';
 import { XtermAddon } from './XtermAddon.js';
 import type { XtermEvent } from './XtermEvent.js';
 
+// Exports
 export { Xterm, XtermAddon };
 export type * from '@xterm/xterm';
+export type * from './XtermAddonType.js';
 export type { XtermEvent };
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import '../app.css';
+	import Footer from './Footer.svelte';
+	import Navbar from './Navbar.svelte';
+</script>
+
+<Navbar />
+<slot />
+<Footer />
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,99 +1,113 @@
 <script lang="ts">
-	import { Xterm, XtermAddon } from '$lib/index.js';
-	import type { ITerminalOptions, ITerminalInitOnlyOptions, Terminal } from '$lib/index.js';
-
-	let options: ITerminalOptions & ITerminalInitOnlyOptions = {};
-
-	async function onLoad(event: CustomEvent<{ terminal: Terminal }>) {
-		console.log('Child component has loaded');
-		const terminal = event.detail.terminal;
-
-		// FitAddon Usage
-		const { FitAddon } = await XtermAddon.FitAddon();
-		const fitAddon = new FitAddon();
-		terminal.loadAddon(fitAddon);
-		fitAddon.fit();
-
-		terminal.onKey(({ key }) => {
-			terminal.write(key);
-		});
-
-		terminal.write('Hello World');
-	}
-
-	function onBell() {
-		console.log('onBell()');
-	}
-
-	function onBinary(event: CustomEvent<string>) {
-		const data = event.detail;
-		console.log('onBinary()', data);
-	}
-
-	function onCursorMove() {
-		console.log('onCursorMove()');
-	}
-
-	function onData(event: CustomEvent<string>) {
-		const data = event.detail;
-		console.log('onData()', data);
-	}
-
-	function onKey(event: CustomEvent<{ key: string; domEvent: KeyboardEvent }>) {
-		const data = event.detail;
-		console.log('onKey()', data);
-	}
-
-	function onLineFeed() {
-		console.log('onLineFeed()');
-	}
-
-	function onRender(event: CustomEvent<{ start: number; end: number }>) {
-		const data = event.detail;
-		console.log('onRender()', data);
-	}
-
-	function onWriteParsed() {
-		console.log('onWriteParsed()');
-	}
-
-	function onResize(event: CustomEvent<{ cols: number; rows: number }>) {
-		const data = event.detail;
-		console.log('onResize()', data);
-	}
-
-	function onScroll(event: CustomEvent<number>) {
-		const data = event.detail;
-		console.log('onScroll()', data);
-	}
-
-	function onSelectionChange() {
-		console.log('onSelectionChange()');
-	}
-
-	function onTitleChange(event: CustomEvent<string>) {
-		const data = event.detail;
-		console.log('onTitleChange()', data);
-	}
+	import Terminal from './Terminal.svelte';
 </script>
 
-<h1>Welcome to your library project</h1>
-<p>Create your package using @sveltejs/package and preview/showcase your work with SvelteKit</p>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
-
-<Xterm
-	{options}
-	on:load={onLoad}
-	on:bell={onBell}
-	on:binary={onBinary}
-	on:cursormove={onCursorMove}
-	on:data={onData}
-	on:key={onKey}
-	on:linefeed={onLineFeed}
-	on:render={onRender}
-	on:writeparsed={onWriteParsed}
-	on:resize={onResize}
-	on:scroll={onScroll}
-	on:selectionchange={onSelectionChange}
-	on:titlechange={onTitleChange}
-/>
+<svelte:head>
+	<title>Xterm.js with SvelteKit</title>
+</svelte:head>
+
+<div class="container mx-auto px-2 py-12">
+	<div class="text-center py-12">
+		<h1
+			class="mb-4 text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl dark:text-white"
+		>
+			Welcome to
+			<span class="text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400">
+				xterm-svelte
+			</span>
+		</h1>
+		<p class="mb-6 text-lg font-normal text-gray-500 lg:text-xl dark:text-gray-400">
+			A SvelteKit wrapper for
+			<a
+				href="https://xtermjs.org/"
+				class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Xterm.js</a
+			>
+			, enabling terminal embedding in SvelteKit apps, managing Xterm addons, and providing seamless
+			updates with the latest SvelteKit and Xterm.js versions.
+		</p>
+
+		<div class="w-full max-w-[24rem] mx-auto">
+			<div class="relative">
+				<label for="npm-install-copy-button" class="sr-only">Label</label>
+				<input
+					id="npm-install-copy-button"
+					type="text"
+					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"
+					value="npm install @battlefieldduck/xterm-svelte"
+					disabled
+					readonly
+				/>
+				<button
+					data-copy-to-clipboard-target="npm-install-copy-button"
+					data-tooltip-target="tooltip-copy-npm-install-copy-button"
+					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"
+				>
+					<span id="default-icon">
+						<svg
+							class="w-3.5 h-3.5"
+							aria-hidden="true"
+							xmlns="http://www.w3.org/2000/svg"
+							fill="currentColor"
+							viewBox="0 0 18 20"
+						>
+							<path
+								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"
+							/>
+						</svg>
+					</span>
+					<span id="success-icon" class="hidden inline-flex items-center">
+						<svg
+							class="w-3.5 h-3.5 text-blue-700 dark:text-blue-500"
+							aria-hidden="true"
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 16 12"
+						>
+							<path
+								stroke="currentColor"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M1 5.917 5.724 10.5 15 1.5"
+							/>
+						</svg>
+					</span>
+				</button>
+				<div
+					id="tooltip-copy-npm-install-copy-button"
+					role="tooltip"
+					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"
+				>
+					<span id="default-tooltip-message">Copy to clipboard</span>
+					<span id="success-tooltip-message" class="hidden">Copied!</span>
+					<div class="tooltip-arrow" data-popper-arrow></div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div
+		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"
+		role="alert"
+	>
+		<svg
+			class="flex-shrink-0 inline w-4 h-4 me-3"
+			aria-hidden="true"
+			xmlns="http://www.w3.org/2000/svg"
+			fill="currentColor"
+			viewBox="0 0 20 20"
+		>
+			<path
+				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"
+			/>
+		</svg>
+		<span class="sr-only">Info</span>
+		<div>
+			Below is a simulated demo of the Windows Command Prompt, powered by xterm.js and integrated
+			with xterm-svelte. Feel free to interact with the terminal - try pressing ‘Enter’ to see it in
+			action!
+		</div>
+	</div>
+
+	<Terminal />
+</div>
diff --git a/src/routes/Footer.svelte b/src/routes/Footer.svelte
@@ -0,0 +1,31 @@
+<footer class="bg-white dark:bg-gray-900">
+	<div class="mx-auto container">
+		<div class="px-4 py-6 md:flex md:items-center md:justify-between">
+			<span class="text-sm text-gray-500 dark:text-gray-300 sm:text-center"
+				>© 2024 <a href="/">xterm-svelte</a>. All Rights Reserved.
+			</span>
+			<div class="flex mt-4 sm:justify-center md:mt-0 space-x-5 rtl:space-x-reverse">
+				<a
+					href="https://github.com/BattlefieldDuck/xterm-svelte"
+					target="_blank"
+					class="text-gray-400 hover:text-gray-900 dark:hover:text-white"
+				>
+					<svg
+						class="w-4 h-4"
+						aria-hidden="true"
+						xmlns="http://www.w3.org/2000/svg"
+						fill="currentColor"
+						viewBox="0 0 20 20"
+					>
+						<path
+							fill-rule="evenodd"
+							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"
+							clip-rule="evenodd"
+						/>
+					</svg>
+					<span class="sr-only">GitHub account</span>
+				</a>
+			</div>
+		</div>
+	</div>
+</footer>