docs: vscode (#366)

* docs: vscode

* docs: vscode

* docs: vscode

* vscode: docs

Author: echarles

docs/docs/integrations/vscode/index.mdx

@@ -2,37 +2,37 @@ import ModalImage from "react-modal-image";
 
 # 🚧 VS Code
 
+The `datalayer-notebook` extension for VS Code allows you to edit Jupyer Notebooks files (`ipynb` extensions).
+
+The extensions is available in the [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=datalayer.datalayer-jupyter-vscode).
+
 <ModalImage
-  small="https://jupyter-examples.datalayer.tech/jupyter-react-vscode.png"
-  large="https://jupyter-examples.datalayer.tech/jupyter-react-vscode.png"
+  small="https://jupyter-examples.datalayer.tech/jupyter-react-vscode.gif"
+  large="https://jupyter-examples.datalayer.tech/jupyter-react-vscode.gif"
   alt="Jupyter UI VSCode"
 />
 
 ## Working Features
 
-- Loading a notebook
-- Display a notebook
-- Connect to a Jupyter Server by providing its URL with auth token; transfer http request and websocket messages
-- Running code
+- Load a Notebook.
+- Display a Notebook.
+- Connect to a Jupyter Server by providing its URL with auth token; transfer http request and websocket messages.
+- Run code.
+- IPyWidgets support.
 
 ## Not Implemented
 
-- Saving the document
-- Notifying of updates to have a UI feedback the document is in dirty state
-- ipywidgets support
+- Save the Notebook.
+- Notifying of updates to have a UI feedback the document is in dirty state.
 
 ## Known Limitations
 
-- Styling:
-  - No connection between dark/light vs code theme and notebook theme
+Styling
+- No connection between dark/light vs code theme and notebook theme
+- No resizing with the panel
+- Button to select the runtime is not displayed in a toolbar that stays visible  - No connection between dark/light vs code theme and notebook theme
   - No resizing with the panel
   - Button to select the runtime is not displayed in a toolbar that stays visible
-- Websocket binary support: for now we forbid the usage of the newer protocol v1.kernel.websocket.jupyter.org. When using it, the message data are failing to be serialized to be transferred from the webview to the extension. And when receiving it, the deserialization fails. The deserialization error may be related to an incorrect binaryType that is not handle in the current code; but in JupyterLab it is forced to 'arraybuffer' for kernel websocket.
-
-## Architecture
-
-The editor is displayed in a webview - aka a iframe. That iframe has Content Security Policies that have been fully relaxed for styling :disappointed: but not for scripts. Not allowing any script will likely induce issue especially with advanced output renderer like plotly or ipywidgets. That policy may be relaxed (but this is going against VS Code recommendation).
 
-The webview being in a separate world, connecting to the server is done through the extension. This requires to proxy http-request and websocket messages to and from the webviews. This is tricky as it requires serialization handled by vscode. And despite using a so called `postMessage` method, the behavior is not matching the Web API `postMessage` especially when transferring complex objects.
 
-The interface point is inspired by JupyterLite approach; aka we define a custom `fetch` method and `WebSocket` class in the server settings used by the service manager.
+Websocket binary support: for now we forbid the usage of the newer protocol v1.kernel.websocket.jupyter.org. When using it, the message data are failing to be serialized to be transferred from the webview to the extension. And when receiving it, the deserialization fails. The deserialization error may be related to an incorrect binaryType that is not handle in the current code; but in JupyterLab it is forced to 'arraybuffer' for kernel websocket.

packages/vscode/.npmrc

@@ -2,6 +2,33 @@
 
 [![Become a Sponsor](https://img.shields.io/static/v1?label=Become%20a%20Sponsor&message=%E2%9D%A4&logo=GitHub&style=flat&color=1ABC9C)](https://github.com/sponsors/datalayer)
 
-# Jupyter UI for Visual Studio Code
+# Jupyter Notebook for Visual Studio Code
 
-This is the README for the `datalayer-notebook` extension.
+This [Visual Studio Code](https://code.visualstudio.com) extension allows you to edit [Jupyter](https://jupyter.org) Notebooks files (`ipynb` extensions) and is publically available in the [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=datalayer.datalayer-jupyter-vscode).
+
+<img src="https://jupyter-examples.datalayer.tech/jupyter-react-vscode.gif" />
+
+## Working Features
+
+- Load a Notebook.
+- Display a Notebook.
+- Connect to a Jupyter Server by providing its URL with auth token; transfer http request and websocket messages.
+- Run code.
+- IPyWidgets support.
+
+## Not Implemented
+
+- Save the Notebook.
+- Notifying of updates to have a UI feedback the document is in dirty state.
+
+## Known Limitations
+
+Styling
+- No connection between dark/light vs code theme and notebook theme
+- No resizing with the panel
+- Button to select the runtime is not displayed in a toolbar that stays visible  - No connection between dark/light vs code theme and notebook theme
+  - No resizing with the panel
+  - Button to select the runtime is not displayed in a toolbar that stays visible
+
+
+Websocket binary support: for now we forbid the usage of the newer protocol v1.kernel.websocket.jupyter.org. When using it, the message data are failing to be serialized to be transferred from the webview to the extension. And when receiving it, the deserialization fails. The deserialization error may be related to an incorrect binaryType that is not handle in the current code; but in JupyterLab it is forced to 'arraybuffer' for kernel websocket.

packages/vscode/README.md

@@ -3,8 +3,15 @@
   "displayName": "Datalayer Notebook",
   "description": "A Jupyter Notebook Editor for VS Code",
   "publisher": "Datalayer",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "icon": "images/datalayer-logo.png",
+  "categories": [
+    "AI",
+    "Data Science",
+    "Machine Learning",
+    "Notebooks",
+    "Visualization"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/datalayer/jupyter-ui.git",
@@ -13,22 +20,19 @@
   "engines": {
     "vscode": "^1.98.0"
   },
-  "categories": [
-    "Data Science"
-  ],
-  "activationEvents": [],
   "main": "./dist/extension.js",
+  "activationEvents": [],
   "contributes": {
     "commands": [
       {
-        "command": "datalayer.notebook.new",
+        "command": "datalayer.jupyter-notebook-new",
         "title": "Create new Datalayer Notebook",
         "category": "Notebook"
       }
     ],
     "customEditors": [
       {
-        "viewType": "datalayer.notebook",
+        "viewType": "datalayer.jupyter-notebook",
         "displayName": "Datalayer Notebook",
         "selector": [
           {

packages/vscode/README_TEMPLATE.md

@@ -219,7 +219,7 @@ export class NotebookEditorProvider
   private static newNotebookFileId = 1;
 
   public static register(context: vscode.ExtensionContext): vscode.Disposable {
-    vscode.commands.registerCommand('datalayer.notebook.new', () => {
+    vscode.commands.registerCommand('datalayer.jupyter-notebook-new', () => {
       const workspaceFolders = vscode.workspace.workspaceFolders;
       if (!workspaceFolders) {
         vscode.window.showErrorMessage(
@@ -252,7 +252,7 @@ export class NotebookEditorProvider
     );
   }
 
-  private static readonly viewType = 'datalayer.notebook';
+  private static readonly viewType = 'datalayer.jupyter-notebook';
 
   /**
    * Tracks all known webviews

packages/vscode/package.json

@@ -5,10 +5,9 @@
  */
 
 import * as assert from 'assert';
-
 // You can import and use all API from the 'vscode' module as well as import your extension to test it
 import * as vscode from 'vscode';
-// import * as myExtension from '../../extension';
+// import * as jupyterNotebookExtension from '../../extension';
 
 suite('Extension Test Suite', () => {
 	vscode.window.showInformationMessage('Start all tests.');