feature: Add support for max cell width setting

Closes PR #36

README.md

@@ -31,6 +31,16 @@ Tip: To display matplotlib charts in dark mode execute `plt.style.use('dark_back
 </br>
 </br>
 
+## Settings
+The following settings are available in (`Settings` -> `Advanced Settings Editor` -> `Theme - Tailwind`):
+- **maxCellWidth**: Maximum width of notebook cells (e.g. '1200px', '80%', ...)
+### Sample
+```json
+{
+    maxCellWidth: "80%"
+}
+```
+
 ## Prerequisites
 
 * JupyterLab

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jupyterlab-tailwind-theme",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "A JupyterLab theme extension inspired by Tailwind CSS.",
   "author": {
     "name": "simicd",
@@ -19,6 +19,7 @@
     "lib/*.d.ts",
     "lib/*.js.map",
     "lib/*.js",
+    "schema/*.json",
     "style/*",
     "style/index.js"
   ],
@@ -37,7 +38,8 @@
   },
   "dependencies": {
     "@jupyterlab/application": "^3.0.7",
-    "@jupyterlab/apputils": "^3.0.5"
+    "@jupyterlab/apputils": "^3.0.5",
+    "@jupyterlab/settingregistry": "^3.0.5"
   },
   "devDependencies": {
     "@jupyterlab/builder": "^3.0.0",
@@ -67,7 +69,8 @@
   "jupyterlab": {
     "extension": true,
     "themePath": "style/index.css",
-    "outputDir": "jupyterlab-tailwind-theme/labextension"
+    "outputDir": "jupyterlab-tailwind-theme/labextension",
+    "schemaDir": "schema"
   },
   "homepage": "https://github.com/simicd/jupyterlab-tailwind-theme",
   "bugs": {

schema/plugin.json

@@ -0,0 +1,16 @@
+{
+  "jupyter.lab.setting-icon": "ui-components:settings",
+  "jupyter.lab.setting-icon-label": "Tailwind Theme",
+  "title": "Theme - Tailwind",
+  "description": "JupyterLab Tailwind Theme settings",
+  "properties": {
+    "maxCellWidth": {
+      "type": "string",
+      "title": "Maximum Cell Width",
+      "description": "Width of notebook cells (e.g. '1200px', '80%', ...)",
+      "default": "1024px"
+    }
+  },
+  "additionalProperties": false,
+  "type": "object"
+}

src/index.ts

@@ -4,17 +4,30 @@ import {
 } from '@jupyterlab/application';
 
 import { IThemeManager } from '@jupyterlab/apputils';
+import { ISettingRegistry } from '@jupyterlab/settingregistry';
+
+const extensionId = 'jupyterlab-tailwind-theme:plugin';
 
 /**
  * A plugin for jupyterlab-tailwind-theme
  * Since the JupyterLab theme extension seem to only allow for one index.css file, there is a set of variables
  * defined in index.css which is overridden here depending of the choice of theme.
  */
 const plugin: JupyterFrontEndPlugin<void> = {
-  id: 'jupyterlab-tailwind-theme:plugin',
-  requires: [IThemeManager],
-  activate: function(app: JupyterFrontEnd, manager: IThemeManager) {
+  id: extensionId,
+  requires: [IThemeManager, ISettingRegistry],
+  activate: function(app: JupyterFrontEnd, manager: IThemeManager, settingRegistry: ISettingRegistry,) {
     const style = 'jupyterlab-tailwind-theme/index.css';
+    let width = "";
+
+    // Load settings
+    Promise.all([
+      settingRegistry.load(extensionId),
+      app.restored
+    ]).then(async ([settings]) => {
+      width = settings.get('maxCellWidth').composite.toString();
+      document.documentElement.style.setProperty('--max-cell-width', width);
+    });
 
     manager.register({
       name: 'Tailwind Light',
@@ -150,7 +163,6 @@ const plugin: JupyterFrontEndPlugin<void> = {
       unload: () => Promise.resolve(undefined)
     });
 
-
   },
   autoStart: true
 };

style/index.css

@@ -155,9 +155,9 @@ button.jp-Button.bp3-button.bp3-minimal:hover {
   z-index: -10;           /* Position highlighting behind text */
 }
 
-/* Max-widht for main content/cell blocks */
+/* Max-width for main content/cell blocks */
 .jp-Notebook .jp-Cell {
-  max-width: 1000px;
+  max-width: var(--max-cell-width);
   margin: auto;
 }
 

style/variables.css

@@ -135,6 +135,9 @@ all of MD as it is not optimized for dense, information rich UIs.
   --tailwind-scrollbar-track-color: var(--tailwind-layout-color0);
   --tailwind-scrollbar-thumb-color: var(--tailwind-grey-400);
 
+  /* Notebook */
+  --max-cell-width: "1024px";
+
   /* -- Pre-existing variables as defined by JupyterLab -- */
   /* Elevation
    *