Merge pull request #37 from AppleBlox/dev

Fix update popup and DiscordRPC on x64 versions of the app

frontend/src/windows/main/components/Updater.svelte

@@ -3,13 +3,12 @@
 	import { Button } from '$lib/components/ui/button/index.js';
 	import { os } from '@neutralinojs/lib';
 	import compare from 'semver-compare';
-	import SvelteMarkdown from 'svelte-markdown';
 	import { toast } from 'svelte-sonner';
 	import { version } from '../../../../../package.json';
 	import { shell } from '../ts/tools/shell';
 	import { curlGet } from '../ts/utils';
-	import Link from './Link.svelte';
 	import { loadSettings, saveSettings } from './settings';
+	import MarkdownViewer from './markdown-viewer.svelte';
 
 	let showUpdatePopup = false;
 	let updateVersion = version;
@@ -60,16 +59,12 @@
 	}
 </script>
 
-<AlertDialog.Root bind:open={showUpdatePopup}>
-	<AlertDialog.Content>
+<AlertDialog.Root bind:open={showUpdatePopup} closeOnOutsideClick={true} closeOnEscape={true}>
+	<AlertDialog.Content class="max-h-[90vh] max-w-[90vw] overflow-scroll">
 		<AlertDialog.Header>
-			<AlertDialog.Title>A new release is available (v{updateVersion})</AlertDialog.Title>
-			<AlertDialog.Description>
-				<SvelteMarkdown
-					source={body.replace(/(\n\s*\n)+/g, '<br><br>')}
-					options={{ gfm: true, breaks: true }}
-					renderers={{ link: Link }}
-				/>
+			<AlertDialog.Description class="text-foreground mt-0">
+				<p class="text-card-foreground mb-3">A new release is available (v{updateVersion})</p>
+				<MarkdownViewer content={body}/>
 			</AlertDialog.Description>
 		</AlertDialog.Header>
 		<AlertDialog.Footer>

frontend/src/windows/main/components/markdown-viewer.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { marked } from 'marked';
+	import DOMPurify from 'dompurify';
+	import { os } from '@neutralinojs/lib';
+	import { cn } from '$lib/utils';
+
+	export let content: string = '';
+	let className: string = '';
+	export { className as class };
+
+	function handleLinkClick(e: MouseEvent) {
+		const target = e.target as HTMLElement;
+		if (target.tagName === 'A') {
+			e.preventDefault();
+			e.stopImmediatePropagation()
+			const href = target.getAttribute('href');
+			if (href) {
+				os.open(href);
+			}
+		}
+	}
+
+	$: parsedContent = marked.parse(content, { async: false }) as string;
+	$: sanitizedHtml = DOMPurify.sanitize(parsedContent);
+</script>
+
+<article
+	class={cn('markdown-content prose dark:prose-invert max-w-none prose-headings:text-primary prose-a:text-secondary', className)}
+	on:click={handleLinkClick}
+	aria-hidden="true"
+>
+	{@html sanitizedHtml}
+</article>
+
+<style lang="postcss">
+	:global(.markdown-content blockquote) {
+		@apply border-l-4 border-primary pl-4;
+	}
+</style>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "appleblox",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "Lightweight and fast Roblox launcher for MacOS",
   "main": "frontend/src/windows/main/main.ts",
   "scripts": {
@@ -25,6 +25,7 @@
     "@neutralinojs/neu": "^10.1.0",
     "@sveltejs/vite-plugin-svelte": "^3.0.2",
     "@tsconfig/svelte": "^5.0.2",
+    "@types/dompurify": "^3.0.5",
     "@types/path-browserify": "^1.0.2",
     "@types/semver-compare": "^1.0.3",
     "@types/signale": "^1.4.7",
@@ -48,17 +49,19 @@
   },
   "dependencies": {
     "@neutralinojs/lib": "^5.1.0",
+    "@tailwindcss/typography": "^0.5.15",
     "@types/bun": "^1.1.9",
     "bits-ui": "^0.21.16",
     "clsx": "^2.1.1",
     "cmdk-sv": "^0.0.18",
+    "dompurify": "^3.1.7",
     "hotkeys-js": "^3.13.7",
     "json-beautify": "^1.1.1",
     "lucide-svelte": "^0.453.0",
+    "marked": "^14.1.3",
     "mode-watcher": "^0.3.1",
     "path-browserify": "^1.0.1",
     "semver-compare": "^1.0.0",
-    "svelte-markdown": "^0.4.1",
     "svelte-sonner": "^0.3.21",
     "tailwind-merge": "^2.5.2",
     "tailwind-variants": "^0.2.1"
@@ -68,7 +71,6 @@
     "core-js",
     "es5-ext",
     "esbuild",
-    "svelte-preprocess",
-    "utf-8-validate"
+    "svelte-preprocess"
   ]
 }

tailwind.config.js

@@ -5,6 +5,9 @@ const config = {
 	darkMode: ['class'],
 	content: ['./frontend/src/**/*.{html,js,svelte,ts}'],
 	safelist: ['dark'],
+	plugins: [
+		require('@tailwindcss/typography'),
+	],
 	theme: {
 		container: {
 			center: true,