Init Manim Notebook walkthrough

package.json

@@ -62,6 +62,11 @@
         "title": "Record Log File",
         "category": "Manim Notebook"
       },
+      {
+        "command": "manim-notebook.openWalkthrough",
+        "title": "Open Walkthrough",
+        "category": "Manim Notebook"
+      },
       {
         "command": "manim-notebook.exportScene",
         "title": "Export current scene as CLI command",
@@ -149,6 +154,86 @@
           "highContrastLight": "#C3DDF7"
         }
       }
+    ],
+    "walkthroughs": [
+      {
+        "id": "manim-notebook-walkthrough",
+        "title": "Manim Notebook",
+        "description": "Welcome 👋 Get to know how to make the best out of Manim Notebook.",
+        "steps": [
+          {
+            "id": "checkManimInstallation",
+            "title": "Check Manim Installation",
+            "description": "Let's see if you have installed ManimGL.\n[Check Manim version](command:manim-notebook-walkthrough.checkManimVersion)\n[Open installation guide](https://3b1b.github.io/manim/getting_started/installation.html)",
+            "media": {
+              "markdown": "src/walkthrough/manim-installation.md"
+            },
+            "completionEvents": [
+              "onCommand:manim-notebook-walkthrough.checkManimVersion"
+            ]
+          },
+          {
+            "id": "startExample",
+            "title": "Start with an example",
+            "description": "Open an example file to see how Manim Notebook works.\n[Open Sample](command:manim-notebook-walkthrough.openSample)",
+            "media": {
+              "svg": "src/walkthrough/preview-cell.svg",
+              "altText": "Preview Manim Cell"
+            },
+            "completionEvents": [
+              "onCommand:manim-notebook-walkthrough.openSample"
+            ]
+          },
+          {
+            "id": "showAllAvailableCommands",
+            "title": "Show all available commands",
+            "description": "Get a list of all available commands in Manim Notebook.\n[Show Commands](command:manim-notebook-walkthrough.showCommands)",
+            "media": {
+              "svg": "src/walkthrough/commands.svg",
+              "altText": "Manim Notebook commands"
+            },
+            "completionEvents": [
+              "onCommand:manim-notebook-walkthrough.showCommands"
+            ]
+          },
+          {
+            "id": "showKeyboardShortcuts",
+            "title": "Show keyboard shortcuts",
+            "description": "See all available keyboard shortcuts in Manim Notebook and modify them to whatever you like.\n[Show Shortcuts](command:manim-notebook-walkthrough.showShortcuts)",
+            "media": {
+              "svg": "src/walkthrough/shortcuts.svg",
+              "altText": "Manim Notebook keyboard shortcuts"
+            },
+            "completionEvents": [
+              "onCommand:manim-notebook-walkthrough.showShortcuts"
+            ]
+          },
+          {
+            "id": "showSettings",
+            "title": "Show settings",
+            "description": "Customize your Manim Notebook experience by changing settings.\n[Show Settings](command:manim-notebook-walkthrough.showSettings)",
+            "media": {
+              "svg": "src/walkthrough/settings.svg",
+              "altText": "Manim Notebook settings"
+            },
+            "completionEvents": [
+              "onCommand:manim-notebook-walkthrough.showSettings"
+            ]
+          },
+          {
+            "id": "openWiki",
+            "title": "Open Wiki",
+            "description": "Learn more about Manim Notebook on the GitHub Wiki.\n[Open Wiki](command:manim-notebook-walkthrough.openWiki)",
+            "media": {
+              "svg": "src/walkthrough/wiki.svg",
+              "altText": "Manim Notebook Wiki"
+            },
+            "completionEvents": [
+              "onCommand:manim-notebook-walkthrough.openWiki"
+            ]
+          }
+        ]
+      }
     ]
   },
   "scripts": {

src/extension.ts

@@ -7,6 +7,7 @@ import { previewCode } from './previewCode';
 import { startScene, exitScene } from './startStopScene';
 import { exportScene } from './export';
 import { Logger, Window, LogRecorder } from './logger';
+import { registerWalkthroughCommands } from './walkthrough/commands';
 import { ExportSceneCodeLens } from './export';
 
 export function activate(context: vscode.ExtensionContext) {
@@ -53,7 +54,6 @@ export function activate(context: vscode.ExtensionContext) {
 			await LogRecorder.recordLogFile(context);
 		});
 
-	// Internal commands
 	const exportSceneCommand = vscode.commands.registerCommand(
 		'manim-notebook.exportScene', async (sceneName?: string) => {
 			Logger.info("💠 Command requested: Export Scene");
@@ -64,21 +64,32 @@ export function activate(context: vscode.ExtensionContext) {
 			{ language: 'python' }, new ExportSceneCodeLens())
 	);
 
+	const openWalkthroughCommand = vscode.commands.registerCommand(
+		'manim-notebook.openWalkthrough', async () => {
+			Logger.info("💠 Command requested: Open Walkthrough");
+			await vscode.commands.executeCommand('workbench.action.openWalkthrough',
+				`${context.extension.id}#manim-notebook-walkthrough`, false);
+		});
+
+	// internal command
 	const finishRecordingLogFileCommand = vscode.commands.registerCommand(
 		'manim-notebook.finishRecordingLogFile', async () => {
 			Logger.info("💠 Command requested: Finish Recording Log File");
 			await LogRecorder.finishRecordingLogFile(context);
 		});
 
+	registerWalkthroughCommands(context);
+
 	context.subscriptions.push(
 		previewManimCellCommand,
 		previewSelectionCommand,
 		startSceneCommand,
 		exitSceneCommand,
 		clearSceneCommand,
 		recordLogFileCommand,
+		openWalkthroughCommand,
 		exportSceneCommand,
-		finishRecordingLogFileCommand
+		finishRecordingLogFileCommand,
 	);
 	registerManimCellProviders(context);
 }

src/walkthrough/commands.ts

@@ -0,0 +1,113 @@
+import * as vscode from 'vscode';
+import { ExtensionContext, window, workspace, commands, extensions } from 'vscode';
+import { Logger, Window } from '../logger';
+import { ManimShell } from '../manimShell';
+import fs from 'fs';
+import path from 'path';
+
+export function registerWalkthroughCommands(context: ExtensionContext) {
+    const checkManimVersionCommand = commands.registerCommand(
+        'manim-notebook-walkthrough.checkManimVersion', async () => {
+            Logger.info("💠 Command Check Manim Version requested");
+            await checkManimVersion();
+        });
+
+    const openSampleFileCommand = commands.registerCommand(
+        'manim-notebook-walkthrough.openSample', async () => {
+            Logger.info("💠 Command Open Sample File requested");
+            await openSampleFile(context);
+        });
+
+    const showAllCommandsCommand = commands.registerCommand(
+        'manim-notebook-walkthrough.showCommands', async () => {
+            Logger.info("💠 Command Show All Commands requested");
+            await showAllCommands();
+        }
+    );
+
+    const showKeyboardShortcutsCommand = commands.registerCommand(
+        'manim-notebook-walkthrough.showShortcuts', async () => {
+            Logger.info("💠 Command Show Keyboard Shortcuts requested");
+            await showKeyboardShortcuts();
+        }
+    );
+
+    const showSettingsCommand = commands.registerCommand(
+        'manim-notebook-walkthrough.showSettings', async () => {
+            Logger.info("💠 Command Show Settings requested");
+            await showSettings();
+        }
+    );
+
+    const openWikiCommand = commands.registerCommand(
+        'manim-notebook-walkthrough.openWiki', async () => {
+            Logger.info("💠 Command Open Wiki requested");
+            await openWiki();
+        }
+    );
+
+    context.subscriptions.push(
+        checkManimVersionCommand,
+        openSampleFileCommand,
+        showAllCommandsCommand,
+        showKeyboardShortcutsCommand,
+        showSettingsCommand,
+        openWikiCommand
+    );
+}
+
+async function checkManimVersion() {
+    const terminal = window.createTerminal("Manim Version");
+    terminal.show()
+    await new Promise((resolve) => setTimeout(resolve, 1500));
+    terminal.sendText("manimgl --version");
+}
+
+/**
+ * Opens a sample Manim file in a new editor that the user can use to get started.
+ * 
+ * @param context The extension context.
+ */
+async function openSampleFile(context: ExtensionContext) {
+    const sampleFilePath = path.join(context.extensionPath,
+        'src', 'walkthrough', 'sample_scene.py');
+    const sampleFileContent = fs.readFileSync(sampleFilePath, 'utf-8');
+
+    const sampleFile = await workspace.openTextDocument({
+        language: 'python',
+        content: sampleFileContent
+    });
+
+    await window.showTextDocument(sampleFile);
+}
+
+/**
+ * Opens the command palette with all the "Manim Notebook" commands.
+ */
+async function showAllCommands() {
+    await commands.executeCommand('workbench.action.quickOpen', '>Manim Notebook:');
+}
+
+/**
+ * Opens the keyboard shortcuts page in the settings.
+ */
+async function showKeyboardShortcuts() {
+    await commands.executeCommand(
+        'workbench.action.openGlobalKeybindings', "Manim Notebook");
+}
+
+/**
+ * Opens the settings page for the extension.
+ */
+async function showSettings() {
+    await commands.executeCommand(
+        'workbench.action.openSettings', "Manim Notebook");
+}
+
+/**
+ * Opens the GitHub wiki page for the extension.
+ */
+async function openWiki() {
+    const wikiUrl = "https://github.com/Manim-Notebook/manim-notebook/wiki";
+    await vscode.env.openExternal(vscode.Uri.parse(wikiUrl));
+}

src/walkthrough/manim-installation.md

@@ -0,0 +1,17 @@
+# 🎈 Manim Installation
+
+> **Manim Notebook only works with ManimGL by 3Blue1Brown,<br>NOT with the community edition of Manim (Manim CE)**.
+
+If you haven't already installed ManimGL, follow the [**Manim installation guide**](https://3b1b.github.io/manim/getting_started/installation.html). This will be the most difficult part of all the steps here and there are quite a few dependencies to install. But don't despair; with a bit of patience and StackOverflow you will get there.
+
+We recommend to install Manim by cloning the GitHub repo and using
+
+```bash
+git clone https://github.com/3b1b/manim.git
+cd manim
+pip install -e .
+```
+
+This way, you can easily update Manim by pulling the latest commits from the repo (`git pull`) and don't have to wait for a new release.
+
+Check your Manim version by running `manimgl --version` or just click on the button on the left.