jupyter-specta 0.1.7 → 0.1.8

package/README.md

@@ -43,7 +43,55 @@ Once installed, you can build your JupyterLite app, a `specta` app will be inclu
 jupyter lite build
 ```
 
-Then serve the contents of the output directory (by default `./_output`) using any static file server. You can access the `specta` app at the `/specta/` path.
+Then serve the contents of the output directory (by default `./_output`) using any static file server. You can access the `Specta` app at the `/specta/` path.
+
+## Specta Configuration
+
+### Top-level configuration
+
+Specta can be configured using the typicall JupyterLite configuration file: `jupyter-lite.json`. You can add a `spectaConfig` key to the `jupyter-config-data` section of this file to customize the Specta app.
+
+The following options are available:
+
+- `defaultLayout`: The default layout when opening a file.
+- `hideTopbar`: Boolean flag to show or hide the top bar.
+- `topBar`: Configuration for the top bar.
+
+```json
+      "topBar": {
+        "icon": "url to the icon file, it's shown on the left of the top bar",
+        "title": "Title on the left of the top bar",
+        "themeToggle": "Boolean flag to show/hide the theme selector",
+        "textColor": "Color of the text on the top bar",
+        "background": "Background color of the top bar"
+      },
+```
+
+- `perFileConfig`: an object with key is the file path and value is the above configuration, it's used to have different layout/top bar config for each files, for example:
+
+```json
+      "perFileConfig": {
+        "blog.ipynb": {
+          "hideTopbar": false,
+          "defaultLayout": "article",
+          "topBar": {
+            "title": "My blog",
+            "themeToggle": false
+          }
+        }
+      }
+```
+
+### Notebook specific configuration
+
+By default, when you open a notebook in Specta, all code cells are hidden, and placeholder skeletons are shown instead at the position of the cell. You can configure the visibility of each cell by using the Specta cell metadata toolbar.
+
+![Cell toolbar](./docs/images/specta-config.jpg)
+
+By opening the `Property Inspector` panel of JupyterLab and selecting the `Specta Cell Config` section, you can change the visibility of each cell as follows:
+
+- `Show cell source`: use this toggle to show or hide the cell source code. Default to `false`
+- `Show output placeholder`: use this toggle to show or hide the output skeleton. Default to `true`
 
 ## Try it online!
 

package/lib/document/factory.js

@@ -35,10 +35,6 @@ export class NotebookGridWidgetFactory extends ABCWidgetFactory {
                     // Specta app, add topbar to layout
                     topbar.id = 'specta-topbar-widget';
                     this._shell.add(topbar, 'top');
-                    if (topbar.parent) {
-                        topbar.parent.node.style.boxShadow =
-                            'rgba(0 0 0 / 20%) 0 2px 4px -1px, rgba(0 0 0 / 14%) 0 4px 5px 0, rgba(0 0 0 / 12%) 0 1px 10px 0';
-                    }
                 }
             }
             else if (isSpecta) {

package/lib/tool.js

@@ -96,10 +96,15 @@ export function readSpectaConfig({ nbMetadata, nbPath }) {
     if (!rawConfig || rawConfig.length === 0) {
         rawConfig = '{}';
     }
+    let pathWithoutDrive = nbPath;
+    const paths = nbPath === null || nbPath === void 0 ? void 0 : nbPath.split(':');
+    if (paths && paths.length > 1) {
+        pathWithoutDrive = paths[1];
+    }
     const _b = JSON.parse(rawConfig), { perFileConfig } = _b, globalConfig = __rest(_b, ["perFileConfig"]);
     let spectaConfig = Object.assign({}, (globalConfig !== null && globalConfig !== void 0 ? globalConfig : {}));
-    if (perFileConfig && nbPath && perFileConfig[nbPath]) {
-        spectaConfig = Object.assign(Object.assign({}, spectaConfig), perFileConfig[nbPath]);
+    if (perFileConfig && pathWithoutDrive && perFileConfig[pathWithoutDrive]) {
+        spectaConfig = Object.assign(Object.assign({}, spectaConfig), perFileConfig[pathWithoutDrive]);
     }
     const spectaMetadata = ((_a = nbMetadata === null || nbMetadata === void 0 ? void 0 : nbMetadata.specta) !== null && _a !== void 0 ? _a : {});
     return Object.assign(Object.assign({}, spectaConfig), spectaMetadata);

package/lib/topbar/index.js

@@ -30,9 +30,5 @@ export const topbarPlugin = {
         widget.id = 'specta-topbar-widget';
         widget.addClass('specta-topbar-element');
         app.shell.add(widget, 'top');
-        if (widget.parent) {
-            widget.parent.node.style.boxShadow =
-                'rgba(0 0 0 / 20%) 0 2px 4px -1px, rgba(0 0 0 / 14%) 0 4px 5px 0, rgba(0 0 0 / 12%) 0 1px 10px 0';
-        }
     }
 };

package/lib/topbar/widget.js

@@ -5,13 +5,14 @@ import { SettingContent } from './settingDialog';
 export function TopbarElement(props) {
     var _a, _b;
     const config = React.useMemo(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         return {
             background: (_b = (_a = props.config) === null || _a === void 0 ? void 0 : _a.background) !== null && _b !== void 0 ? _b : 'var(--jp-layout-color2)',
             title: (_d = (_c = props.config) === null || _c === void 0 ? void 0 : _c.title) !== null && _d !== void 0 ? _d : 'Specta',
             themeToggle: Boolean((_e = props.config) === null || _e === void 0 ? void 0 : _e.themeToggle),
             kernelActivity: Boolean((_f = props.config) === null || _f === void 0 ? void 0 : _f.kernelActivity),
-            textColor: (_h = (_g = props.config) === null || _g === void 0 ? void 0 : _g.textColor) !== null && _h !== void 0 ? _h : 'var(--jp-ui-font-color1)'
+            textColor: (_h = (_g = props.config) === null || _g === void 0 ? void 0 : _g.textColor) !== null && _h !== void 0 ? _h : 'var(--jp-ui-font-color1)',
+            icon: (_j = props.config) === null || _j === void 0 ? void 0 : _j.icon
         };
     }, [props.config]);
     const [open, setOpen] = useState(false);
@@ -34,7 +35,7 @@ export function TopbarElement(props) {
             React.createElement("div", null, config.icon && React.createElement("img", { style: { width: '50px' }, src: config.icon })),
             React.createElement("div", { className: "specta-topbar-title", style: { color: (_b = config.textColor) !== null && _b !== void 0 ? _b : 'var(--jp-ui-font-color1)' } }, config.title)),
         React.createElement("div", { className: "specta-topbar-right" },
-            React.createElement(IconButton, { ref: buttonRef, onClick: () => setOpen(!open), icon: React.createElement(GearIcon, { fill: "var(--jp-ui-font-color2)", height: 24, width: 24 }) }),
+            React.createElement(IconButton, { ref: buttonRef, onClick: () => setOpen(!open), icon: React.createElement(GearIcon, { fill: "var(--jp-ui-font-color2)", height: 23, width: 23 }) }),
             open && (React.createElement("div", { ref: dialogRef, className: "jp-Dialog-content specta-config-dialog" },
                 React.createElement("div", { className: "specta-config-arrow" }),
                 React.createElement(SettingContent, { themeManager: props.themeManager, layoutRegistry: props.layoutRegistry }))))));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jupyter-specta",
-    "version": "0.1.7",
+    "version": "0.1.8",
     "description": "",
     "keywords": [],
     "homepage": "https://github.com/trungleduc/specta",

package/style/base.css

@@ -59,7 +59,7 @@
 }
 
 #specta-top-panel {
-  min-height: 40px;
+  min-height: 36px;
   display: flex;
   box-shadow: unset !important;
   z-index: 100;
@@ -74,12 +74,9 @@
 .specta-topbar {
   display: flex;
   flex-direction: row;
-  height: 40px;
+  height: 36px;
   width: calc(100% + 20px);
-  box-shadow:
-    rgba(0 0 0 / 20%) 0 2px 4px -1px,
-    rgba(0 0 0 / 14%) 0 4px 5px 0,
-    rgba(0 0 0 / 12%) 0 1px 10px 0;
+  border-bottom: solid 0.5px var(--jp-border-color1);
   gap: 10px;
   align-items: center;
   justify-content: space-between;
@@ -98,8 +95,8 @@
 }
 
 .specta-topbar-title {
-  line-height: 40px;
-  font-size: 1.5rem;
+  line-height: 36px;
+  font-size: 1.25rem;
 }
 
 .specta-topbar-theme {

package/style/style.css

@@ -4,7 +4,7 @@
   background: var(--jp-layout-color1);
 }
 
-.specta-document-viewer #jp-main-content-panel jp-toolbar {
+.specta-document-viewer #jp-main-content-panel jp-toolbar:first-of-type {
   display: none;
 }
 
@@ -30,4 +30,4 @@
 .specta-main-content-panel {
   padding-left: 5px;
   padding-right: 5px;
-}
+}