Merge pull request meltylabs#36 from meltylabs/configure-welcome-page

New welcome page
zavaluc · Sep 8, 2024 · 85098ce · 85098ce
2 parents 4050ba2 + 696dbf0
commit 85098ce
Show file tree

Hide file tree

Showing 5 changed files with 356 additions and 47 deletions.
diff --git a/extensions/spectacular/package.json b/extensions/spectacular/package.json
@@ -6,7 +6,7 @@
   "publisher": "meltylabs",
   "repository": {
     "type": "git",
-    "url": "https://github.com/YourUsername/melty.git"
+    "url": "https://github.com/meltylabs/melty.git"
   },
   "license": "MIT",
   "private": true,
@@ -32,7 +32,16 @@
     "onStartupFinished"
   ],
   "contributes": {
-    "commands": [],
+    "commands": [
+      {
+        "command": "melty.copySettings",
+        "title": "Melty: Copy VS Code Settings"
+      },
+      {
+        "command": "melty.copyExtensions",
+        "title": "Melty: Copy VS Code extensions"
+      }
+    ],
     "keybindings": [],
     "configuration": {
       "title": "Melty Settings",

diff --git a/extensions/spectacular/src/extension.ts b/extensions/spectacular/src/extension.ts
@@ -5,6 +5,11 @@ import { GitManager } from "./services/GitManager";
 
 import posthog from "posthog-js";
 import { TaskManager } from './services/TaskManager';
+import { exec } from 'child_process';
+import * as path from 'path';
+
+const COPY_MELTY_SETTINGS_SCRIPT_URL = 'https://raw.githubusercontent.com/meltylabs/melty/main/scripts/copy_settings.sh'
+const COPY_MELTY_EXTENSIONS_SCRIPT_URL = 'https://raw.githubusercontent.com/meltylabs/melty/main/scripts/copy_extensions.sh'
 
 export class MeltyExtension {
 	private outputChannel: vscode.OutputChannel;
@@ -83,6 +88,50 @@ export class MeltyExtension {
 	public async setOnboardingComplete(): Promise<void> {
 		await this.context.globalState.update('onboardingComplete', true);
 	}
+
+	private async copySettings(): Promise<void> {
+		// progress bar
+		const progress = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Left, 100);
+		progress.text = 'Copying VS Code settings...';
+		progress.show();
+
+		// copy settings
+		exec(`curl ${COPY_MELTY_SETTINGS_SCRIPT_URL} -L | bash`, (error, stdout, _stderr) => {
+			if (error) {
+				vscode.window.showErrorMessage(`Error copying settings: ${error.message}`);
+				return;
+			}
+
+			// hide progress bar
+			progress.hide();
+
+			// show success message
+			vscode.window.showInformationMessage('VS Code settings copied successfully!');
+			this.outputChannel.appendLine(stdout);
+		});
+	}
+
+	private async copyExtensions(): Promise<void> {
+		// progress bar
+		const progress = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Left, 100);
+		progress.text = 'Copying VS Code extensions...';
+		progress.show();
+
+		// copy extensions
+		exec(`curl ${COPY_MELTY_EXTENSIONS_SCRIPT_URL} -L | bash`, (error, stdout, _stderr) => {
+			if (error) {
+				vscode.window.showErrorMessage(`Error copying extensions: ${error.message}`);
+				return;
+			}
+
+			// hide progress bar
+			progress.hide();
+
+			// show success message
+			vscode.window.showInformationMessage('VS Code extensions copied successfully!');
+			this.outputChannel.appendLine(stdout);
+		});
+	}
 }
 
 let outputChannel: vscode.OutputChannel;
@@ -103,6 +152,14 @@ export function activate(context: vscode.ExtensionContext) {
 		)
 	);
 
+	context.subscriptions.push(
+		vscode.commands.registerCommand('melty.copySettings', () => extension.copySettings())
+	);
+
+	context.subscriptions.push(
+		vscode.commands.registerCommand('melty.copyExtensions', () => extension.copyExtensions())
+	);
+
 	// posthog init for backend
 	posthog.init("phc_tvdsIv2ZDXVeJfYm0GTEBFwaPtdmWRa2cNVGCg18Qt6", {
 		api_host: "https://us.i.posthog.com",

diff --git a/extensions/spectacular/webview-ui/src/components/DiffViewer.tsx b/extensions/spectacular/webview-ui/src/components/DiffViewer.tsx
@@ -67,7 +67,7 @@ const Diff2HtmlComponent: React.FC<Diff2HtmlProps> = ({ diff }) => {
 				synchronisedScroll: true,
 				highlight: true,
 				renderNothingWhenEmpty: false,
-				colorScheme: "dark"
+				colorScheme: "auto"
 
 			};
 

diff --git a/src/vs/workbench/contrib/welcomeGettingStarted/common/gettingStartedContent.ts b/src/vs/workbench/contrib/welcomeGettingStarted/common/gettingStartedContent.ts
@@ -208,8 +208,8 @@ const Button = (title: string, href: string) => `[${title}](${href})`;
 export const walkthroughs: GettingStartedWalkthroughContent = [
 	{
 		id: 'Setup',
-		title: localize('gettingStarted.setup.title', "Get Started with Melty"),
-		description: localize('gettingStarted.setup.description', "Customize your editor, learn the basics, and start coding"),
+		title: 'Get Started With Melty',
+		description: localize('gettingStarted.setup.description', "Customize your editor, learn the basics, and start melting."),
 		isFeatured: true,
 		icon: setupIcon,
 		when: '!isWeb',
@@ -218,14 +218,12 @@ export const walkthroughs: GettingStartedWalkthroughContent = [
 			type: 'steps',
 			steps: [
 				{
-					id: 'pickColorTheme',
-					title: localize('gettingStarted.pickColor.title', "Choose your theme"),
-					description: localize('gettingStarted.pickColor.description.interpolated', "The right theme helps you focus on your code, is easy on your eyes, and is simply more fun to use.\n{0}", Button(localize('titleID', "Browse Color Themes"), 'command:workbench.action.selectTheme')),
-					completionEvents: [
-						'onSettingChanged:workbench.colorTheme',
-						'onCommand:workbench.action.selectTheme'
-					],
-					media: { type: 'markdown', path: 'theme_picker', }
+					id: 'openMeltyOverlay',
+					title: 'Say hello to Melty',
+					description: localize('gettingStarted.openMeltyOverlay.description.interpolated', "Open the Melty popup! \n{0}", Button(localize('openMelty', "Open Melty"), 'command:workbench.action.toggleMelty')),
+					media: {
+						type: 'svg', altText: 'Language extensions', path: 'melty.svg'
+					},
 				},
 				{
 					id: 'extensionsWeb',
@@ -236,38 +234,27 @@ export const walkthroughs: GettingStartedWalkthroughContent = [
 						type: 'svg', altText: 'VS Code extension marketplace with featured language extensions', path: 'extensions-web.svg'
 					},
 				},
-				{
-					id: 'findLanguageExtensions',
-					title: localize('gettingStarted.findLanguageExts.title', "Rich support for all your languages"),
-					description: localize('gettingStarted.findLanguageExts.description.interpolated', "Code smarter with syntax highlighting, code completion, linting and debugging. While many languages are built-in, many more can be added as extensions.\n{0}", Button(localize('browseLangExts', "Browse Language Extensions"), 'command:workbench.extensions.action.showLanguageExtensions')),
-					when: 'workspacePlatform != \'webworker\'',
-					media: {
-						type: 'svg', altText: 'Language extensions', path: 'languages.svg'
-					},
-				},
 				{
 					id: 'settings',
-					title: localize('gettingStarted.settings.title', "Tune your settings"),
-					description: localize('gettingStarted.settings.description.interpolated', "Customize every aspect of VS Code and your extensions to your liking. Commonly used settings are listed first to get you started.\n{0}", Button(localize('tweakSettings', "Open Settings"), 'command:toSide:workbench.action.openSettings')),
+					title: 'Import your VS Code settings and keybindings into Melty',
+					description: localize('gettingStarted.settings.description.interpolated', "Melty supports VS Code's settings and keyboard shortcuts. \n{0}", Button(localize('copySettings', "Copy Settings"), 'command:melty.copySettings')),
 					media: {
 						type: 'svg', altText: 'VS Code Settings', path: 'settings.svg'
 					},
 				},
 				{
 					id: 'settingsSync',
-					title: localize('gettingStarted.settingsSync.title', "Sync settings across devices"),
-					description: localize('gettingStarted.settingsSync.description.interpolated', "Keep your essential customizations backed up and updated across all your devices.\n{0}", Button(localize('enableSync', "Backup and Sync Settings"), 'command:workbench.userDataSync.actions.turnOn')),
-					when: 'syncStatus != uninitialized',
-					completionEvents: ['onEvent:sync-enabled'],
+					title: 'Import your VS Code extensions to Melty',
+					description: localize('gettingStarted.settingsSync.description.interpolated', "Import all your VS Code extensions to Melty.\n{0}", Button(localize('copyExtensions', "Copy Extensions"), 'command:melty.copyExtensions')),
 					media: {
 						type: 'svg', altText: 'The "Turn on Sync" entry in the settings gear menu.', path: 'settingsSync.svg'
 					},
 				},
 				{
-					id: 'commandPaletteTask',
-					title: localize('gettingStarted.commandPalette.title', "Unlock productivity with the Command Palette "),
-					description: localize('gettingStarted.commandPalette.description.interpolated', "Run commands without reaching for your mouse to accomplish any task in VS Code.\n{0}", Button(localize('commandPalette', "Open Command Palette"), 'command:workbench.action.showCommands')),
-					media: { type: 'svg', altText: 'Command Palette overlay for searching and executing commands.', path: 'commandPalette.svg' },
+					id: 'openTerminal',
+					title: 'Open the integrated terminal',
+					description: localize('gettingStarted.terminal.description.interpolated', "Quickly run shell commands and monitor build output, right next to your code.\n{0}", Button(localize('openTerminal', "Open Terminal"), 'command:workbench.action.terminal.toggleTerminal')),
+					media: { type: 'svg', altText: 'Command Palette overlay for searching and executing commands.', path: 'terminal.svg' },
 				},
 				{
 					id: 'pickAFolderTask-Mac',
@@ -287,21 +274,12 @@ export const walkthroughs: GettingStartedWalkthroughContent = [
 						type: 'svg', altText: 'Explorer view showing buttons for opening folder and cloning repository.', path: 'openFolder.svg'
 					}
 				},
-				{
-					id: 'quickOpen',
-					title: localize('gettingStarted.quickOpen.title', "Quickly navigate between your files"),
-					description: localize('gettingStarted.quickOpen.description.interpolated', "Navigate between files in an instant with one keystroke. Tip: Open multiple files by pressing the right arrow key.\n{0}", Button(localize('quickOpen', "Quick Open a File"), 'command:toSide:workbench.action.quickOpen')),
-					when: 'workspaceFolderCount != 0',
-					media: {
-						type: 'svg', altText: 'Go to file in quick search.', path: 'search.svg'
-					}
-				},
-				{
-					id: 'videoTutorial',
-					title: localize('gettingStarted.videoTutorial.title', "Watch video tutorials"),
-					description: localize('gettingStarted.videoTutorial.description.interpolated', "Watch the first in a series of short & practical video tutorials for VS Code's key features.\n{0}", Button(localize('watch', "Watch Tutorial"), 'https://aka.ms/vscode-getting-started-video')),
-					media: { type: 'svg', altText: 'VS Code Settings', path: 'learn.svg' },
-				}
+				// {
+				// 	id: 'videoTutorial',
+				// 	title: localize('gettingStarted.videoTutorial.title', "Watch video tutorials"),
+				// 	description: localize('gettingStarted.videoTutorial.description.interpolated', "Watch the first in a series of short & practical video tutorials for VS Code's key features.\n{0}", Button(localize('watch', "Watch Tutorial"), 'https://aka.ms/vscode-getting-started-video')),
+				// 	media: { type: 'svg', altText: 'VS Code Settings', path: 'learn.svg' },
+				// }
 			]
 		}
 	},