jupyter-specta 0.1.5 → 0.1.6

package/README.md

@@ -1 +1,52 @@
-# specta
+<h1 align="center">specta 🌟</h1>
+
+[![Github Actions Status](https://github.com/trungleduc/specta/workflows/Build/badge.svg)](https://github.com/trungleduc/specta/actions/workflows/build.yml)
+[![Documentation Status](https://readthedocs.org/projects/specta/badge/?version=latest)](https://specta.readthedocs.io/en/latest/?badge=latest)
+[![Try on lite](https://jupyterlite.rtfd.io/en/latest/_static/badge.svg)](https://trungleduc.github.io/specta/specta/)
+
+<h2 align="center"> A JupyterLite app to present your Jupyter documents in different ways</h2>
+
+Specta is a custom JupyterLite app for rendering notebooks and Jupyter‑supported files in multiple modes: dashboards, blog‑style articles, fullscreen viewers, and more. It is built on top of [JupyterLite](https://github.com/jupyterlite/jupyterlite), which allows you to share your documents through alternative interfaces to the IDE-like JupyterLab.
+
+## Features
+
+### Multi-mode Notebook Rendering
+
+Render notebooks in:
+
+- **Dashboard mode** – structured panels for interactive widgets and outputs
+- **Article mode** – a minimal, blog-like reading experience
+
+### Clean Viewer for all Jupyter-supported file types
+
+View any Jupyter-supported file using Specta's clean viewer with all Jupyter UI elements removed.
+
+### Preview from JupyterLab
+
+A `specta` preview can be launched directly from JupyterLab, letting users verify how their documents will look when published.
+
+## Installation and Usage
+
+You can install `specta` using `pip` or `conda`
+
+```bash
+# Install using pip
+pip install specta
+
+# Install using conda
+conda install -c conda-forge specta
+```
+
+Once installed, you can build your JupyterLite app, a `specta` app will be included automatically in the output directory of `jupyterlite`:
+
+```
+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.
+
+## Try it online!
+
+You can try it online by clicking on this badge:
+
+[![Try on lite](https://jupyterlite.rtfd.io/en/latest/_static/badge.svg)](https://trungleduc.github.io/specta/specta/)

package/lib/create_notebook_panel.js

@@ -32,7 +32,6 @@ export async function createNotebookContext(options) {
         path,
         kernelPreference: kernelPreference
     });
-    await context.sessionContext.initialize();
     return context;
 }
 export function createNotebookPanel(options) {

package/lib/document/factory.d.ts

@@ -2,16 +2,21 @@ import { IThemeManager } from '@jupyterlab/apputils';
 import { ABCWidgetFactory, DocumentRegistry } from '@jupyterlab/docregistry';
 import { INotebookModel } from '@jupyterlab/notebook';
 import { SpectaWidgetFactory } from '../specta_widget_factory';
-import { ISpectaLayoutRegistry } from '../token';
+import { ISpectaLayoutRegistry, ISpectaShell } from '../token';
 import { NotebookSpectaDocWidget } from './widget';
 interface IOptions extends DocumentRegistry.IWidgetFactoryOptions {
     spectaWidgetFactory: SpectaWidgetFactory;
     layoutRegistry?: ISpectaLayoutRegistry;
     themeManager?: IThemeManager;
+    shell: ISpectaShell;
+    spectaLayoutRegistry: ISpectaLayoutRegistry;
 }
 export declare class NotebookGridWidgetFactory extends ABCWidgetFactory<NotebookSpectaDocWidget, INotebookModel> {
     constructor(options: IOptions);
     protected createNewWidget(context: DocumentRegistry.IContext<INotebookModel>): NotebookSpectaDocWidget;
     private _spectaWidgetFactory;
+    private _shell;
+    private _themeManager?;
+    private _layoutRegistry;
 }
 export {};

package/lib/document/factory.js

@@ -9,17 +9,41 @@ export class NotebookGridWidgetFactory extends ABCWidgetFactory {
     constructor(options) {
         super(options);
         this._spectaWidgetFactory = options.spectaWidgetFactory;
+        this._shell = options.shell;
+        this._themeManager = options.themeManager;
+        this._layoutRegistry = options.spectaLayoutRegistry;
     }
     createNewWidget(context) {
         const content = new Panel();
         content.addClass('jp-specta-notebook-panel');
-        const spectaConfig = readSpectaConfig(context.model.metadata);
-        if (!isSpectaApp() && !spectaConfig.hideTopbar) {
-            // Not a specta app, add topbar to document widget
-            const topbar = ReactWidget.create(React.createElement(TopbarElement, null));
-            content.addWidget(topbar);
-        }
         context.ready.then(async () => {
+            var _a;
+            const path = (_a = context.contentsModel) === null || _a === void 0 ? void 0 : _a.path;
+            const spectaConfig = readSpectaConfig({
+                nbMetadata: context.model.metadata,
+                nbPath: path
+            });
+            const isSpecta = isSpectaApp();
+            if (!spectaConfig.hideTopbar) {
+                const topbar = ReactWidget.create(React.createElement(TopbarElement, { config: spectaConfig.topBar, themeManager: this._themeManager, layoutRegistry: this._layoutRegistry }));
+                topbar.addClass('specta-topbar-element');
+                if (!isSpecta) {
+                    // Not a specta app, add topbar to document widget
+                    content.addWidget(topbar);
+                }
+                else {
+                    // 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) {
+                this._shell.hideTopBar();
+            }
             const spectaWidget = await this._spectaWidgetFactory.createNew({
                 context
             });

package/lib/document/plugin.d.ts

@@ -1,4 +1,5 @@
 import { JupyterFrontEndPlugin } from '@jupyterlab/application';
 import { IWidgetTracker } from '@jupyterlab/apputils';
-export declare const spectaDocument: JupyterFrontEndPlugin<IWidgetTracker>;
+import { ISpectaShell } from '../token';
+export declare const spectaDocument: JupyterFrontEndPlugin<IWidgetTracker, ISpectaShell>;
 export declare const spectaOpener: JupyterFrontEndPlugin<void>;

package/lib/document/plugin.js

@@ -1,4 +1,4 @@
-import { WidgetTracker } from '@jupyterlab/apputils';
+import { IThemeManager, WidgetTracker } from '@jupyterlab/apputils';
 import { IEditorServices } from '@jupyterlab/codeeditor';
 import { PathExt } from '@jupyterlab/coreutils';
 import { IDocumentManager } from '@jupyterlab/docmanager';
@@ -8,7 +8,7 @@ import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { IKernelSpecManager } from '@jupyterlab/services';
 import { ISpectaDocTracker, ISpectaLayoutRegistry } from '../token';
 import { createFileBrowser, hideAppLoadingIndicator, isSpectaApp, registerDocumentFactory } from '../tool';
-const activate = (app, rendermime, tracker, editorServices, contentFactory, spectaLayoutRegistry) => {
+const activate = (app, rendermime, tracker, editorServices, contentFactory, spectaLayoutRegistry, themeManager) => {
     const namespace = 'specta';
     const spectaTracker = new WidgetTracker({ namespace });
     registerDocumentFactory({
@@ -19,7 +19,8 @@ const activate = (app, rendermime, tracker, editorServices, contentFactory, spec
         editorServices,
         contentFactory,
         spectaTracker,
-        spectaLayoutRegistry
+        spectaLayoutRegistry,
+        themeManager
     });
     return spectaTracker;
 };
@@ -31,7 +32,8 @@ export const spectaDocument = {
         INotebookTracker,
         IEditorServices,
         NotebookPanel.IContentFactory,
-        ISpectaLayoutRegistry
+        ISpectaLayoutRegistry,
+        IThemeManager
     ],
     activate,
     provides: ISpectaDocTracker

package/lib/extension_plugins.d.ts

@@ -1,4 +1,4 @@
 export * from './tool';
 export * from './token';
-declare const _default: (import("@jupyterlab/application").JupyterFrontEndPlugin<import("@jupyterlab/apputils").IWidgetTracker<import("@lumino/widgets").Widget>> | import("@jupyterlab/application").JupyterFrontEndPlugin<void> | import("@jupyterlab/application").JupyterFrontEndPlugin<import("./token").ISpectaLayoutRegistry>)[];
+declare const _default: (import("@jupyterlab/application").JupyterFrontEndPlugin<import("@jupyterlab/apputils").IWidgetTracker<import("@lumino/widgets").Widget>, import("./token").ISpectaShell> | import("@jupyterlab/application").JupyterFrontEndPlugin<import("./token").ISpectaLayoutRegistry> | import("@jupyterlab/application").JupyterFrontEndPlugin<void, import("./token").ISpectaShell>)[];
 export default _default;

package/lib/layout/index.js

@@ -8,7 +8,7 @@ export const spectaLayoutRegistry = {
     activate: (app) => {
         var _a;
         const layoutRegistry = new SpectaLayoutRegistry();
-        const spectaConfig = readSpectaConfig();
+        const spectaConfig = readSpectaConfig({});
         const defaultLayout = (_a = spectaConfig.defaultLayout) !== null && _a !== void 0 ? _a : 'default';
         layoutRegistry.setSelectedLayout(defaultLayout);
         return layoutRegistry;

package/lib/shell.d.ts

@@ -1,6 +1,6 @@
-import { JupyterFrontEnd } from '@jupyterlab/application';
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 import { Widget } from '@lumino/widgets';
+import { ISpectaShell } from './token';
 /**
  * A namespace for Shell statics
  */
@@ -13,7 +13,7 @@ export declare namespace IShell {
 /**
  * The application shell.
  */
-export declare class SpectaShell extends Widget implements JupyterFrontEnd.IShell {
+export declare class SpectaShell extends Widget implements ISpectaShell {
     constructor();
     /**
      * The current widget in the shell's main area.
@@ -30,6 +30,7 @@ export declare class SpectaShell extends Widget implements JupyterFrontEnd.IShel
      *
      */
     add(widget: Widget, area?: IShell.Area, options?: DocumentRegistry.IOpenOptions): void;
+    hideTopBar(): void;
     widgets(area: IShell.Area): IterableIterator<Widget>;
     /**
      * Add a widget to the top content area.

package/lib/shell.js

@@ -78,6 +78,9 @@ export class SpectaShell extends Widget {
                 break;
         }
     }
+    hideTopBar() {
+        this._topHandler.panel.hide();
+    }
     widgets(area) {
         switch (area) {
             case 'top':

package/lib/specta_model.js

@@ -2,7 +2,6 @@ import { CodeCell, MarkdownCell, RawCell } from '@jupyterlab/cells';
 import { OutputAreaModel, SimplifiedOutputArea } from '@jupyterlab/outputarea';
 import { createNotebookContext, createNotebookPanel } from './create_notebook_panel';
 import { SpectaCellOutput } from './specta_cell_output';
-import { PromiseDelegate } from '@lumino/coreutils';
 import { readCellConfig } from './tool';
 export const VIEW = 'grid_default';
 export class AppModel {
@@ -49,41 +48,18 @@ export class AppModel {
         return this._notebookPanel;
     }
     async initialize() {
-        var _a;
-        const pd = new PromiseDelegate();
         this._context = await createNotebookContext({
             manager: this._manager,
             kernelPreference: this._kernelPreference
         });
         this._context.model.fromJSON(this._notebookModelJson);
-        const connectKernel = () => {
-            pd.resolve();
-            this._notebookPanel = createNotebookPanel({
-                context: this._context,
-                rendermime: this.options.rendermime,
-                editorServices: this.options.editorServices
-            });
-            this.options.tracker.widgetAdded.emit(this._notebookPanel);
-        };
-        const kernel = (_a = this._context.sessionContext.session) === null || _a === void 0 ? void 0 : _a.kernel;
-        if (kernel) {
-            const status = kernel.status;
-            if (status !== 'unknown') {
-                // Connected to an existing kernel.
-                connectKernel();
-                return;
-            }
-        }
-        this._context.sessionContext.connectionStatusChanged.connect((_, status) => {
-            var _a;
-            if (status === 'connected') {
-                const kernel = (_a = this._context.sessionContext.session) === null || _a === void 0 ? void 0 : _a.kernel;
-                if (kernel) {
-                    connectKernel();
-                }
-            }
-        }, this);
-        return pd.promise;
+        this._notebookPanel = createNotebookPanel({
+            context: this._context,
+            rendermime: this.options.rendermime,
+            editorServices: this.options.editorServices
+        });
+        this.options.tracker.add(this._notebookPanel);
+        await this._context.sessionContext.initialize();
     }
     createCell(cellModel) {
         let item;

package/lib/specta_widget_factory.js

@@ -8,6 +8,7 @@ export class SpectaWidgetFactory {
         this._options = options;
     }
     async createNew(options) {
+        var _a;
         const { context } = options;
         const rendermime = this._options.rendermime.clone({
             resolver: context.urlResolver
@@ -23,12 +24,16 @@ export class SpectaWidgetFactory {
             notebookConfig: StaticNotebook.defaultNotebookConfig,
             editorServices: this._options.editorServices
         });
+        const spectaConfig = readSpectaConfig({
+            nbMetadata: context.model.metadata,
+            nbPath: (_a = context.contentsModel) === null || _a === void 0 ? void 0 : _a.path
+        });
         const panel = new AppWidget({
             id: UUID.uuid4(),
             label: '',
             model,
             layoutRegistry: this._options.spectaLayoutRegistry,
-            spectaConfig: readSpectaConfig(context.model.metadata)
+            spectaConfig
         });
         return panel;
     }

package/lib/token.d.ts

@@ -4,6 +4,10 @@ import { SpectaCellOutput } from './specta_cell_output';
 import * as nbformat from '@jupyterlab/nbformat';
 import { ISignal } from '@lumino/signaling';
 import { IWidgetTracker } from '@jupyterlab/apputils';
+import { JupyterFrontEnd } from '@jupyterlab/application';
+export interface ISpectaShell extends JupyterFrontEnd.IShell {
+    hideTopBar: () => void;
+}
 export interface ISpectaLayout {
     render(options: {
         host: Panel;

package/lib/tool.d.ts

@@ -1,25 +1,29 @@
 import { JupyterFrontEnd } from '@jupyterlab/application';
-import { WidgetTracker } from '@jupyterlab/apputils';
+import { IThemeManager, WidgetTracker } from '@jupyterlab/apputils';
 import { IEditorServices } from '@jupyterlab/codeeditor';
 import { IDefaultFileBrowser } from '@jupyterlab/filebrowser';
 import { ICell, INotebookMetadata } from '@jupyterlab/nbformat';
 import { INotebookTracker, NotebookPanel } from '@jupyterlab/notebook';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
-import { ISpectaAppConfig, ISpectaCellConfig, ISpectaLayoutRegistry } from './token';
+import { ISpectaAppConfig, ISpectaCellConfig, ISpectaLayoutRegistry, ISpectaShell } from './token';
 export declare function registerDocumentFactory(options: {
     factoryName: string;
-    app: JupyterFrontEnd;
+    app: JupyterFrontEnd<ISpectaShell>;
     rendermime: IRenderMimeRegistry;
     tracker: INotebookTracker;
     editorServices: IEditorServices;
     contentFactory: NotebookPanel.IContentFactory;
     spectaTracker: WidgetTracker;
     spectaLayoutRegistry: ISpectaLayoutRegistry;
+    themeManager?: IThemeManager;
 }): void;
 export declare function createFileBrowser(options: {
     defaultBrowser: IDefaultFileBrowser;
 }): any;
 export declare function hideAppLoadingIndicator(): void;
 export declare function isSpectaApp(): boolean;
-export declare function readSpectaConfig(nbMetadata?: INotebookMetadata): ISpectaAppConfig;
+export declare function readSpectaConfig({ nbMetadata, nbPath }: {
+    nbMetadata?: INotebookMetadata;
+    nbPath?: string | null;
+}): ISpectaAppConfig;
 export declare function readCellConfig(cell?: ICell): Required<ISpectaCellConfig>;

package/lib/tool.js

@@ -1,9 +1,20 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { PageConfig, URLExt } from '@jupyterlab/coreutils';
 import { NotebookModelFactory } from '@jupyterlab/notebook';
 import { NotebookGridWidgetFactory } from './document/factory';
 import { SpectaWidgetFactory } from './specta_widget_factory';
 export function registerDocumentFactory(options) {
-    const { factoryName, app, rendermime, tracker, editorServices, contentFactory, spectaTracker, spectaLayoutRegistry } = options;
+    const { factoryName, app, rendermime, tracker, editorServices, contentFactory, spectaTracker, spectaLayoutRegistry, themeManager } = options;
     const spectaWidgetFactory = new SpectaWidgetFactory({
         manager: app.serviceManager,
         rendermime,
@@ -17,7 +28,10 @@ export function registerDocumentFactory(options) {
         name: factoryName,
         modelName: 'notebook',
         fileTypes: ['ipynb'],
-        spectaWidgetFactory
+        spectaWidgetFactory,
+        shell: app.shell,
+        themeManager,
+        spectaLayoutRegistry
     });
     // Registering the widget factory
     app.docRegistry.addWidgetFactory(widgetFactory);
@@ -89,13 +103,17 @@ export function hideAppLoadingIndicator() {
 export function isSpectaApp() {
     return !!document.querySelector('meta[name="specta-config"]');
 }
-export function readSpectaConfig(nbMetadata) {
+export function readSpectaConfig({ nbMetadata, nbPath }) {
     var _a;
     let rawConfig = PageConfig.getOption('spectaConfig');
     if (!rawConfig || rawConfig.length === 0) {
         rawConfig = '{}';
     }
-    const spectaConfig = JSON.parse(rawConfig);
+    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]);
+    }
     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.d.ts

@@ -1,5 +1,3 @@
 import { JupyterFrontEndPlugin } from '@jupyterlab/application';
-/**
- * Initialization data for the voila_topbar extension.
- */
-export declare const topbarPlugin: JupyterFrontEndPlugin<void>;
+import { ISpectaShell } from '../token';
+export declare const topbarPlugin: JupyterFrontEndPlugin<void, ISpectaShell>;

package/lib/topbar/index.js

@@ -4,11 +4,9 @@ import { TopbarElement } from './widget';
 import * as React from 'react';
 import { isSpectaApp, readSpectaConfig } from '../tool';
 import { ISpectaLayoutRegistry } from '../token';
-/**
- * Initialization data for the voila_topbar extension.
- */
+import { PathExt } from '@jupyterlab/coreutils';
 export const topbarPlugin = {
-    id: 'specta:topba',
+    id: 'specta:topbar',
     description: 'Specta topbar extension',
     autoStart: true,
     requires: [IThemeManager, ISpectaLayoutRegistry],
@@ -17,7 +15,17 @@ export const topbarPlugin = {
         if (!isSpecta) {
             return;
         }
-        const config = readSpectaConfig();
+        const urlParams = new URLSearchParams(window.location.search);
+        const path = urlParams.get('path');
+        if (path && PathExt.extname(path) === '.ipynb') {
+            // Specta document will handle the top bar.
+            return;
+        }
+        const config = readSpectaConfig({ nbPath: path });
+        if (config.hideTopbar) {
+            app.shell.hideTopBar();
+            return;
+        }
         const widget = ReactWidget.create(React.createElement(TopbarElement, { config: config.topBar, themeManager: themeManager, layoutRegistry: layoutRegistry }));
         widget.id = 'specta-topbar-widget';
         widget.addClass('specta-topbar-element');

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jupyter-specta",
-    "version": "0.1.5",
+    "version": "0.1.6",
     "description": "",
     "keywords": [],
     "homepage": "https://github.com/trungleduc/specta",
@@ -36,6 +36,7 @@
         "build:all": "npm run build:app && npm run build:labextension",
         "build:all:dev": "npm run build:app:dev && npm run build:labextension:dev",
         "build:demo": "cd  demo && rm -rf .jupyterlite.doit.db _output && jupyter lite build .",
+        "update:demo": "node script/build-dev.mjs",
         "lint": "npm run lint:prettier && npm run lint:eslint",
         "lint:prettier": "prettier --no-error-on-unmatched-pattern --write \"**/*{.ts,.tsx,.jsx,.css,.json,.md,.yml}\"",
         "lint:eslint": "eslint --ext .ts,.tsx .",
@@ -56,9 +57,9 @@
         "@jupyterlab/coreutils": "^6.4.2",
         "@jupyterlab/docmanager": "^4.4.2",
         "@jupyterlab/docmanager-extension": "^4.4.2",
+        "@jupyterlab/docregistry": "^4.4.2",
         "@jupyterlab/filebrowser": "^4.4.2",
         "@jupyterlab/filebrowser-extension": "^4.4.2",
-        "@jupyterlab/docregistry": "^4.4.2",
         "@jupyterlab/json-extension": "^4.4.2",
         "@jupyterlab/logconsole": "^4.4.2",
         "@jupyterlab/mainmenu": "^4.4.2",
@@ -109,14 +110,15 @@
     },
     "devDependencies": {
         "@jupyterlab/builder": "~4.4.2",
+        "@types/react": "^18.0.26",
         "@typescript-eslint/eslint-plugin": "^6.1.0",
         "@typescript-eslint/parser": "^6.1.0",
-        "@types/react": "^18.0.26",
         "css-loader": "^7.1.2",
         "eslint": "^8.36.0",
         "eslint-config-prettier": "^8.8.0",
         "eslint-plugin-prettier": "^5.0.0",
         "eslint-plugin-react-hooks": "^5.0.0",
+        "fs-extra": "^11.3.0",
         "handlebars": "^4.7.8",
         "html-webpack-plugin": "^5.5.3",
         "ignore-loader": "^0.1.2",

package/schema/app-meta.json

@@ -9,12 +9,6 @@
       "metadataSchema": {
         "type": "object",
         "properties": {
-          "/specta/hideTopbar": {
-            "title": "Hide top bar",
-            "type": "boolean",
-            "enum": [true, false],
-            "default": false
-          },
           "/specta/defaultLayout": {
             "title": "Page layout",
             "type": "string",

package/style/base.css

@@ -62,6 +62,7 @@
   display: flex;
   box-shadow: unset !important;
   z-index: 100;
+  contain: unset !important;
 }
 
 .specta-topbar-element {

package/style/style.css

@@ -8,12 +8,6 @@
   display: none;
 }
 
-#specta-top-panel {
-  contain: unset !important;
-  box-shadow: unset !important;
-  z-index: 100;
-}
-
 .specta-file-browser {
   max-width: 1200px;
   margin: 0 auto;