deploy and made it as static website

🗂️

.github/workflows/jekyll-gh-pages.yml

@@ -0,0 +1,58 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: 'main'
+
+jobs:
+  build_site:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      # If you're using pnpm, add this step then change the commands and cache key below to use `pnpm`
+      - name: Install pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 8
+
+
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: build
+        env:
+          BASE_PATH: '/${{ github.event.repository.name }}'
+        run: |
+          pnpm run build
+
+      - name: Upload Artifacts
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # this should match the `pages` option in your adapter-static options
+          path: 'build/'
+
+  deploy:
+    needs: build_site
+    runs-on: ubuntu-latest
+
+    permissions:
+      pages: write
+      id-token: write
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    steps:
+      - name: Deploy
+        id: deployment
+        uses: actions/deploy-pages@v4

package.json

@@ -14,6 +14,7 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/adapter-static": "^3.0.6",
 		"@sveltejs/kit": "^2.9.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
 		"autoprefixer": "^10.4.20",

src/lib/custom/Monaco.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onDestroy, onMount } from 'svelte';
+	import { onDestroy, onMount, createEventDispatcher } from 'svelte';
 	import * as monaco from 'monaco-editor';
 	import editorWorker from './../../../node_modules/monaco-editor/esm/vs/editor/editor.worker?worker';
 	import jsonWorker from './../../../node_modules/monaco-editor/esm/vs/language/json/json.worker?worker';
@@ -167,7 +167,9 @@
 		}
 	}
 
-	onMount(async () => {
+	const dispatch = createEventDispatcher();
+
+	onMount(() => {
 		// Register custom themes
 		monaco.editor.defineTheme('customLight', lightTheme);
 		monaco.editor.defineTheme('customDark', darkTheme);
@@ -216,23 +218,34 @@
 		// Add change listeners
 		if (originalModel) {
 			originalModel.onDidChangeContent(() => {
-				dispatchEvent(
-					new CustomEvent('originalChange', {
-						detail: getOriginalValue()
-					})
-				);
+				dispatch('originalChange', getOriginalValue());
 			});
 		}
 
 		if (modifiedModel) {
 			modifiedModel.onDidChangeContent(() => {
-				dispatchEvent(
-					new CustomEvent('modifiedChange', {
-						detail: getModifiedValue()
-					})
-				);
+				dispatch('modifiedChange', getModifiedValue());
 			});
 		}
+		// Dispatch load event when Monaco is ready
+		dispatch('load', 'Monaco is ready');
+
+		return () => {
+			if (diffEditor) {
+				diffEditor.setModel(null);
+			}
+
+			if (originalModel) {
+				originalModel.dispose();
+			}
+			if (modifiedModel) {
+				modifiedModel.dispose();
+			}
+
+			if (diffEditor) {
+				diffEditor.dispose();
+			}
+		};
 	});
 
 	onDestroy(() => {

src/routes/+layout.svelte

@@ -2,10 +2,6 @@
 	import { ModeWatcher } from 'mode-watcher';
 	import '../app.css';
 	import Header from '../lib/custom/header.svelte';
-	import * as Card from '../lib/components/ui/card/index';
-	import Input from '../lib/components/ui/input/input.svelte';
-	import Button from '../lib/components/ui/button/button.svelte';
-	import Checkbox from '../lib/components/ui/checkbox/checkbox.svelte';
 	let { children } = $props();
 </script>
 
@@ -21,10 +17,14 @@
 			data-x-chunk-container="chunk-container after:right-0"
 		>
 			<div class="mx-auto grid w-full gap-2">
-				<h1 class="text-xl font-semibold">Tabs</h1>
+				<h1 class="text-xl font-semibold">
+					Welcome to
+
+					<span class="font-extrabold text-black">TextCompare </span>
+				</h1>
 			</div>
 
-			<a href="##" class="font-semibold text-primary"> New </a>
+			<a href="##" class="font-semibold text-primary"> Exciting new features are coming soon! 🚀</a>
 			<!-- <a href="##">Security</a>
 			<a href="##">Integrations</a>
 			<a href="##">Support</a>

src/routes/+page.svelte

@@ -7,6 +7,7 @@
 	let monacoComponent: Monaco;
 	let originalCode = `Please Enter your text here`;
 	let modifiedCode = `Please Enter your text here`;
+	let isLoading = true;
 
 	function handleOriginalChange(event: CustomEvent) {
 		originalCode = event.detail;
@@ -16,20 +17,9 @@
 		modifiedCode = event.detail;
 	}
 
-	function handleAcceptLeft(lineNumber: number) {
-		monacoComponent.acceptLeftChange(lineNumber);
-	}
-
-	function handleAcceptRight(lineNumber: number) {
-		monacoComponent.acceptRightChange(lineNumber);
-	}
-
-	function handleAcceptAllLeft() {
-		monacoComponent.acceptAllLeft();
-	}
-
-	function handleAcceptAllRight() {
-		monacoComponent.acceptAllRight();
+	function handleMonacoLoad(event: CustomEvent) {
+		console.log('Monaco loaded:', event.detail);
+		isLoading = false;
 	}
 </script>
 
@@ -52,7 +42,10 @@
 				line or all at once.</Card.Description
 			>
 		</Card.Header>
-		<Card.CardContent class="h-[80vh] ">
+		<Card.CardContent class="relative h-[80vh]">
+			{#if isLoading}
+				<div>loading...</div>
+			{/if}
 			<Monaco
 				bind:this={monacoComponent}
 				originalText={originalCode}
@@ -61,6 +54,7 @@
 				isDark={$mode == 'dark'}
 				on:originalChange={handleOriginalChange}
 				on:modifiedChange={handleModifiedChange}
+				on:load={handleMonacoLoad}
 			/>
 		</Card.CardContent>
 	</Card.Root>

src/routes/+page.ts

@@ -1 +1,2 @@
 export const ssr = false;
+export const prerender = true;

static/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Disallow: /private/
+Disallow: /temp/
+Allow: /

svelte.config.js

@@ -1,4 +1,4 @@
-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-static';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */
@@ -11,9 +11,17 @@ const config = {
 		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
 		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
 		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
-		adapter: adapter(),
+		adapter: adapter({
+			// default options are shown. On some platforms
+			// these options are set automatically — see below
+			pages: 'build',
+			assets: 'build',
+			fallback: null,
+			precompress: false
+		}),
 		alias: {
-			'@/*': './path/to/lib/*'
+			'@/*': './path/to/lib/*',
+			'@/*': './src/*'
 		}
 	}
 };