jupyter-specta 0.1.7 → 0.2.0

package/README.md

@@ -14,8 +14,9 @@ Specta is a custom JupyterLite app for rendering notebooks and Jupyter‑support
 
 Render notebooks in:
 
-- **Dashboard mode** – structured panels for interactive widgets and outputs
-- **Article mode** – a minimal, blog-like reading experience
+- **Dashboard mode** – structured panels for interactive widgets and outputs.
+- **Article mode** – a minimal, blog-like reading experience.
+- **Slides mode** – a fullscreen presentation mode.
 
 ### Clean Viewer for all Jupyter-supported file types
 
@@ -25,6 +26,12 @@ View any Jupyter-supported file using Specta's clean viewer with all Jupyter UI
 
 A `specta` preview can be launched directly from JupyterLab, letting users verify how their documents will look when published.
 
+## 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/)
+
 ## Installation and Usage
 
 You can install `specta` using `pip` or `conda`
@@ -43,10 +50,77 @@ 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.
 
-## Try it online!
+## Specta Configuration
 
-You can try it online by clicking on this badge:
+### Available layouts
 
-[![Try on lite](https://jupyterlite.rtfd.io/en/latest/_static/badge.svg)](https://trungleduc.github.io/specta/specta/)
+Specta comes with three built-in layouts:
+
+- `default`: The default layout, which renders the notebook as a dashboard.
+- `article`: A minimal, blog-like reading experience.
+- `slides`: A fullscreen presentation mode using [reveal.js](https://revealjs.com/).
+
+### 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.
+- `slidesTheme`: The theme for the slides layout. The list of available themes can be found [here](https://revealjs.com/themes/).
+
+```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
+          }
+        },
+        "slides.ipynb": {
+          "hideTopbar": true,
+          "slidesTheme": "sky"
+        }
+      }
+```
+
+### Notebook metadata configuration
+
+In addition to the global configuration, you can also configure the layout and top bar for each notebook by using the notebook metadata. You can use the `Specta App Config` of the `Property Inspector` panel of JupyterLab to edit the notebook metadata.
+
+![Metadata](./docs/images/specta-meta.jpg)
+
+### Notebook cell 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`
+
+### Slides layout configuration
+
+For the slides layout, you can set the cells as a sub-slide for [vertical slide](https://revealjs.com/vertical-slides/) or [a fragment](https://revealjs.com/fragments/) using the Slide Type field in the `Common Tools` section of the `Property Inspector` panel.
+
+![Slide tool](./docs/images/slide-tool.png)

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/layout/layout_registry.d.ts

@@ -10,10 +10,11 @@ export declare class SpectaLayoutRegistry implements ISpectaLayoutRegistry {
     get selectedLayoutChanged(): ISignal<SpectaLayoutRegistry, {
         name: string;
         layout: ISpectaLayout;
+        oldLayout?: ISpectaLayout;
     }>;
     get(name: string): ISpectaLayout | undefined;
     getDefaultLayout(): ISpectaLayout;
-    setSelectedLayout(name: string): void;
+    setSelectedLayout(name: string): Promise<void>;
     register(name: string, layout: ISpectaLayout): void;
     allLayouts(): string[];
     private _selectedLayout;

package/lib/layout/layout_registry.js

@@ -1,6 +1,7 @@
 import { Signal } from '@lumino/signaling';
 import { DefaultLayout } from './default';
 import { ArticleLayout } from './article';
+import { SlidesLayout } from './slides';
 export class SpectaLayoutRegistry {
     constructor() {
         this._registry = new Map();
@@ -10,6 +11,7 @@ export class SpectaLayoutRegistry {
         this._registry = new Map();
         this._registry.set('default', defaultLayout);
         this._registry.set('article', new ArticleLayout());
+        this._registry.set('slides', new SlidesLayout());
         this._selectedLayout = {
             name: 'default',
             layout: defaultLayout
@@ -30,12 +32,13 @@ export class SpectaLayoutRegistry {
     getDefaultLayout() {
         return this._registry.get('default');
     }
-    setSelectedLayout(name) {
+    async setSelectedLayout(name) {
         if (!this._registry.has(name)) {
             throw new Error(`Layout with name ${name} does not exist`);
         }
+        const oldLayout = this._selectedLayout.layout;
         this._selectedLayout = { name, layout: this._registry.get(name) };
-        this._selectedLayoutChanged.emit(this._selectedLayout);
+        this._selectedLayoutChanged.emit(Object.assign(Object.assign({}, this._selectedLayout), { oldLayout }));
     }
     register(name, layout) {
         if (this._registry.has(name)) {

package/lib/layout/slides.d.ts

@@ -0,0 +1,14 @@
+import { Panel } from '@lumino/widgets';
+import { SpectaCellOutput } from '../specta_cell_output';
+import * as nbformat from '@jupyterlab/nbformat';
+import { ISpectaAppConfig, ISpectaLayout } from '../token';
+export declare class SlidesLayout implements ISpectaLayout {
+    render(options: {
+        host: Panel;
+        items: SpectaCellOutput[];
+        notebook: nbformat.INotebookContent;
+        readyCallback: () => Promise<void>;
+        spectaConfig: ISpectaAppConfig;
+    }): Promise<void>;
+    private _deckMap;
+}

package/lib/layout/slides.js

@@ -0,0 +1,123 @@
+import { Panel, Widget } from '@lumino/widgets';
+import Reveal from 'reveal.js';
+import { emitResizeEvent, setRevealTheme } from '../tool';
+class HostPanel extends Panel {
+    constructor() {
+        super();
+        this.addClass('specta-slides-host-widget');
+        this.addClass('reveal');
+        this._outputs = new Panel();
+        this._outputs.addClass('slides');
+        this.addWidget(this._outputs);
+    }
+    addOutput(slideEl) {
+        const { type, widget } = slideEl;
+        const sectionWidget = new Widget({
+            node: document.createElement('section')
+        });
+        switch (type) {
+            case 'slide': {
+                const outputWidget = widget[0];
+                sectionWidget.node.appendChild(outputWidget.node);
+                outputWidget.parent = sectionWidget;
+                sectionWidget.processMessage = msg => {
+                    outputWidget.processMessage(msg);
+                };
+                break;
+            }
+            case 'subslide': {
+                for (const outputWidget of widget) {
+                    const subSection = document.createElement('section');
+                    subSection.appendChild(outputWidget.node);
+                    outputWidget.parent = sectionWidget;
+                    sectionWidget.node.appendChild(subSection);
+                }
+                sectionWidget.processMessage = msg => {
+                    widget.forEach(w => w.processMessage(msg));
+                };
+                break;
+            }
+            case 'fragment': {
+                for (const [idx, outputWidget] of widget.entries()) {
+                    if (idx !== 0) {
+                        outputWidget.addClass('fragment');
+                        outputWidget.addClass('fade-in');
+                    }
+                    sectionWidget.node.appendChild(outputWidget.node);
+                    outputWidget.parent = sectionWidget;
+                }
+                sectionWidget.processMessage = msg => {
+                    widget.forEach(w => w.processMessage(msg));
+                };
+                break;
+            }
+            default:
+                break;
+        }
+        this._outputs.addWidget(sectionWidget);
+    }
+}
+export class SlidesLayout {
+    constructor() {
+        this._deckMap = new WeakMap();
+    }
+    async render(options) {
+        var _a, _b, _c;
+        const theme = options.spectaConfig.slidesTheme;
+        if (theme) {
+            setRevealTheme(theme);
+        }
+        const { host, items, readyCallback } = options;
+        const hostPanel = new HostPanel();
+        const elementList = [];
+        for (const el of items) {
+            const info = el.info;
+            const cellMeta = ((_b = (_a = info.cellModel) === null || _a === void 0 ? void 0 : _a.metadata) !== null && _b !== void 0 ? _b : {});
+            const slideType = (_c = cellMeta === null || cellMeta === void 0 ? void 0 : cellMeta.slideshow) === null || _c === void 0 ? void 0 : _c.slide_type;
+            if (!info.hidden) {
+                const lastEl = elementList[elementList.length - 1];
+                switch (slideType) {
+                    case 'subslide': {
+                        if ((lastEl === null || lastEl === void 0 ? void 0 : lastEl.type) === 'subslide') {
+                            lastEl.widget.push(el);
+                        }
+                        else {
+                            elementList.push({ type: 'subslide', widget: [el] });
+                        }
+                        break;
+                    }
+                    case 'fragment': {
+                        if ((lastEl === null || lastEl === void 0 ? void 0 : lastEl.type) === 'fragment') {
+                            lastEl.widget.push(el);
+                        }
+                        else {
+                            elementList.push({ type: 'fragment', widget: [el] });
+                        }
+                        break;
+                    }
+                    case 'slide': {
+                        elementList.push({ type: 'slide', widget: [el] });
+                        break;
+                    }
+                    default: {
+                        elementList.push({ type: 'slide', widget: [el] });
+                        break;
+                    }
+                }
+            }
+        }
+        for (const element of elementList) {
+            hostPanel.addOutput(element);
+        }
+        host.addWidget(hostPanel);
+        await readyCallback();
+        const deck = new Reveal(hostPanel.node, {
+            embedded: true
+        });
+        deck.initialize();
+        deck.on('slidetransitionend', event => {
+            emitResizeEvent();
+        });
+        this._deckMap.set(host.node, deck);
+    }
+}

package/lib/specta_model.d.ts

@@ -6,7 +6,6 @@ import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { ServiceManager } from '@jupyterlab/services';
 import { IExecuteReplyMsg } from '@jupyterlab/services/lib/kernel/messages';
 import { SpectaCellOutput } from './specta_cell_output';
-export declare const VIEW = "grid_default";
 export declare class AppModel {
     private options;
     constructor(options: AppModel.IOptions);

package/lib/specta_model.js

@@ -2,8 +2,7 @@ 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 { readCellConfig } from './tool';
-export const VIEW = 'grid_default';
+import { emitResizeEvent, readCellConfig } from './tool';
 export class AppModel {
     constructor(options) {
         this.options = options;
@@ -148,6 +147,7 @@ export class AppModel {
         const source = cell.sharedModel.source;
         const rep = await SimplifiedOutputArea.execute(source, output, this._context.sessionContext);
         output.future.done.then(() => {
+            emitResizeEvent();
             outputWrapper.removePlaceholder();
         });
         return rep;

package/lib/specta_widget.js

@@ -1,6 +1,6 @@
 import { PromiseDelegate } from '@lumino/coreutils';
 import { Panel, Widget } from '@lumino/widgets';
-import { hideAppLoadingIndicator, isSpectaApp } from './tool';
+import { emitResizeEvent, hideAppLoadingIndicator, isSpectaApp } from './tool';
 export class AppWidget extends Panel {
     constructor(options) {
         super();
@@ -14,16 +14,14 @@ export class AppWidget extends Panel {
         this._layoutRegistry = options.layoutRegistry;
         this._host = new Panel();
         this._host.addClass('specta-output-host');
+        this.addClass('specta-app-widget');
         this.addWidget(this._host);
-        this.node.style.overflow = 'auto';
         if (!isSpectaApp()) {
             // Not a specta app, add spinner
             this.addSpinner();
         }
         this._model.initialize().then(() => {
-            this.render()
-                .catch(console.error)
-                .then(() => window.dispatchEvent(new Event('resize')));
+            this.render().catch(console.error).then(emitResizeEvent);
         });
         this._layoutRegistry.selectedLayoutChanged.connect(this._onSelectedLayoutChanged, this);
     }
@@ -85,7 +83,8 @@ export class AppWidget extends Panel {
             host: this._host,
             items: this._outputs,
             notebook: (_e = this._model.context) === null || _e === void 0 ? void 0 : _e.model.toJSON(),
-            readyCallback
+            readyCallback,
+            spectaConfig: this._spectaAppConfig
         });
     }
     onCloseRequest(msg) {
@@ -94,16 +93,18 @@ export class AppWidget extends Panel {
     }
     _onSelectedLayoutChanged(sender, args) {
         var _a;
+        const { layout } = args;
         const currentEls = [...this._host.widgets];
         currentEls.forEach(el => {
             var _a;
             (_a = this._host.layout) === null || _a === void 0 ? void 0 : _a.removeWidget(el);
         });
-        args.layout.render({
+        layout.render({
             host: this._host,
             items: this._outputs,
             notebook: (_a = this._model.context) === null || _a === void 0 ? void 0 : _a.model.toJSON(),
-            readyCallback: async () => { }
+            readyCallback: async () => { },
+            spectaConfig: this._spectaAppConfig
         });
     }
 }

package/lib/specta_widget_factory.js

@@ -8,11 +8,17 @@ export class SpectaWidgetFactory {
         this._options = options;
     }
     async createNew(options) {
-        var _a;
+        var _a, _b;
         const { context } = options;
         const rendermime = this._options.rendermime.clone({
             resolver: context.urlResolver
         });
+        const spectaConfig = readSpectaConfig({
+            nbMetadata: context.model.metadata,
+            nbPath: (_a = context.contentsModel) === null || _a === void 0 ? void 0 : _a.path
+        });
+        const defaultLayout = (_b = spectaConfig.defaultLayout) !== null && _b !== void 0 ? _b : 'default';
+        this._options.spectaLayoutRegistry.setSelectedLayout(defaultLayout);
         const model = new AppModel({
             context,
             manager: this._options.manager,
@@ -24,10 +30,7 @@ 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
-        });
+        // Create the specta pane
         const panel = new AppWidget({
             id: UUID.uuid4(),
             label: '',

package/lib/token.d.ts

@@ -14,6 +14,7 @@ export interface ISpectaLayout {
         items: SpectaCellOutput[];
         notebook: nbformat.INotebookContent;
         readyCallback: () => Promise<void>;
+        spectaConfig: ISpectaAppConfig;
     }): Promise<void>;
 }
 export interface ISpectaLayoutRegistry {
@@ -30,6 +31,7 @@ export interface ISpectaLayoutRegistry {
     selectedLayoutChanged: ISignal<ISpectaLayoutRegistry, {
         name: string;
         layout: ISpectaLayout;
+        oldLayout?: ISpectaLayout;
     }>;
 }
 export interface ITopbarConfig {
@@ -38,12 +40,15 @@ export interface ITopbarConfig {
     title?: string;
     icon?: string;
     kernelActivity?: boolean;
+    settingsButton?: boolean;
     themeToggle?: boolean;
+    layoutToggle?: boolean;
 }
 export interface ISpectaAppConfig {
     topBar?: ITopbarConfig;
     defaultLayout?: string;
     hideTopbar?: boolean;
+    slidesTheme?: string;
 }
 export interface ISpectaCellConfig {
     showSource?: boolean;

package/lib/tool.d.ts

@@ -21,9 +21,14 @@ export declare function createFileBrowser(options: {
     defaultBrowser: IDefaultFileBrowser;
 }): any;
 export declare function hideAppLoadingIndicator(): void;
+export declare function mergeObjects(...objects: Record<string, any>[]): Record<string, any>;
+export declare function getSpectaAssetUrl(path: string): string;
 export declare function isSpectaApp(): boolean;
 export declare function readSpectaConfig({ nbMetadata, nbPath }: {
     nbMetadata?: INotebookMetadata;
     nbPath?: string | null;
 }): ISpectaAppConfig;
 export declare function readCellConfig(cell?: ICell): Required<ISpectaCellConfig>;
+export declare function debounce<T extends (...args: any[]) => void>(fn: T, delay?: number): (...args: Parameters<T>) => void;
+export declare const emitResizeEvent: () => void;
+export declare function setRevealTheme(themeName: string): void;

package/lib/tool.js

@@ -87,6 +87,22 @@ export function hideAppLoadingIndicator() {
         }, 1000);
     }
 }
+export function mergeObjects(...objects) {
+    const result = {};
+    for (const obj of objects) {
+        for (const [key, value] of Object.entries(obj)) {
+            if (value !== null && value !== undefined) {
+                result[key] = value;
+            }
+        }
+    }
+    return result;
+}
+export function getSpectaAssetUrl(path) {
+    const labExtension = PageConfig.getOption('fullLabextensionsUrl');
+    const url = URLExt.join(labExtension, 'jupyter-specta', 'static', path);
+    return url;
+}
 export function isSpectaApp() {
     return !!document.querySelector('meta[name="specta-config"]');
 }
@@ -96,13 +112,24 @@ 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);
+    if (spectaMetadata.hideTopbar === 'Yes') {
+        spectaMetadata.hideTopbar = true;
+    }
+    else if (spectaMetadata.hideTopbar === 'No') {
+        spectaMetadata.hideTopbar = false;
+    }
+    return mergeObjects(spectaConfig, spectaMetadata);
 }
 export function readCellConfig(cell) {
     var _a, _b;
@@ -119,3 +146,27 @@ export function readCellConfig(cell) {
     }
     return spectaCellConfig;
 }
+export function debounce(fn, delay = 100) {
+    let timeoutId;
+    return (...args) => {
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => {
+            fn(...args);
+        }, delay);
+    };
+}
+export const emitResizeEvent = debounce(() => {
+    window.dispatchEvent(new Event('resize'));
+});
+export function setRevealTheme(themeName) {
+    let themeLink = document.getElementById('reveal-theme');
+    if (!themeLink) {
+        // Create <link> tag if it doesn't exist
+        themeLink = document.createElement('link');
+        themeLink.rel = 'stylesheet';
+        themeLink.id = 'reveal-theme';
+        document.head.appendChild(themeLink);
+    }
+    // Set or update href to new theme
+    themeLink.href = getSpectaAssetUrl(`reveal.js/${themeName}.css`);
+}

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/settingDialog.d.ts

@@ -1,7 +1,8 @@
 import { IThemeManager } from '@jupyterlab/apputils';
 import React from 'react';
-import { ISpectaLayoutRegistry } from '../token';
+import { ISpectaLayoutRegistry, ITopbarConfig } from '../token';
 export declare const SettingContent: (props: {
+    config?: ITopbarConfig;
     themeManager?: IThemeManager;
     layoutRegistry?: ISpectaLayoutRegistry;
 }) => React.JSX.Element;

package/lib/topbar/settingDialog.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { Divider } from '../components/divider';
 export const SettingContent = (props) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g;
     const { themeManager, layoutRegistry } = props;
     const [themeOptions, setThemeOptions] = useState([
         ...((_a = themeManager === null || themeManager === void 0 ? void 0 : themeManager.themes) !== null && _a !== void 0 ? _a : [])
@@ -54,7 +54,10 @@ export const SettingContent = (props) => {
     return (React.createElement("div", { style: { padding: '0 10px' } },
         React.createElement("p", { style: { marginTop: 0, marginBottom: '5px', fontSize: '1rem' } }, "SETTINGS"),
         React.createElement(Divider, null),
-        layoutRegistry && (React.createElement("div", null,
+        (((_f = props.config) === null || _f === void 0 ? void 0 : _f.layoutToggle) !== undefined
+            ? props.config.layoutToggle
+            : true) &&
+            layoutRegistry && (React.createElement("div", null,
             React.createElement("label", { htmlFor: "" }, "Select layout"),
             React.createElement("div", { className: "jp-select-wrapper" },
                 React.createElement("select", { className: " jp-mod-styled specta-topbar-theme", onChange: onLayoutChange, value: selectedLayout }, layoutOptions.map(el => {
@@ -62,7 +65,10 @@ export const SettingContent = (props) => {
                             background: 'var(--jp-layout-color2)'
                         } }, el.charAt(0).toUpperCase() + el.slice(1)));
                 }))))),
-        themeManager && (React.createElement("div", null,
+        (((_g = props.config) === null || _g === void 0 ? void 0 : _g.themeToggle) !== undefined
+            ? props.config.themeToggle
+            : true) &&
+            themeManager && (React.createElement("div", null,
             React.createElement("label", { htmlFor: "" }, "Select theme"),
             React.createElement("div", { className: "jp-select-wrapper" },
                 React.createElement("select", { className: " jp-mod-styled specta-topbar-theme", onChange: onThemeChange, value: selectedTheme }, themeOptions.map(el => {

package/lib/topbar/widget.js

@@ -3,15 +3,16 @@ import { GearIcon } from '../components/icon/gear';
 import { IconButton } from '../components/iconButton';
 import { SettingContent } from './settingDialog';
 export function TopbarElement(props) {
-    var _a, _b;
+    var _a, _b, _c;
     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);
@@ -31,11 +32,13 @@ export function TopbarElement(props) {
     }, []);
     return (React.createElement("div", { className: "specta-topbar", style: { background: (_a = config.background) !== null && _a !== void 0 ? _a : 'var(--jp-layout-color2)' } },
         React.createElement("div", { className: "specta-topbar-left" },
-            React.createElement("div", null, config.icon && React.createElement("img", { style: { width: '50px' }, src: config.icon })),
+            React.createElement("div", { className: "specta-topbar-icon-container" }, config.icon && React.createElement("img", { style: { height: '100%' }, 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 }) }),
+        (((_c = props.config) === null || _c === void 0 ? void 0 : _c.settingsButton) !== undefined
+            ? props.config.settingsButton
+            : true) && (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: 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 }))))));
+                React.createElement(SettingContent, { config: props.config, themeManager: props.themeManager })))))));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jupyter-specta",
-    "version": "0.1.7",
+    "version": "0.2.0",
     "description": "",
     "keywords": [],
     "homepage": "https://github.com/trungleduc/specta",
@@ -28,8 +28,8 @@
     "scripts": {
         "clean": "rimraf specta/labextension && rimraf app/specta/build && rimraf specta/app_static",
         "build:lib": "tsc",
-        "build:labextension": "jupyter labextension build .",
-        "build:labextension:dev": "jupyter labextension build --development True .",
+        "build:labextension": "jupyter labextension build . && npm run copy:reveal",
+        "build:labextension:dev": "jupyter labextension build --development True . && npm run copy:reveal",
         "build:lab": "npm run clean && npm run build:lib && npm run build:labextension",
         "build:app": "npm run clean && npm run build:lib && cd app && NODE_OPTIONS=--max-old-space-size=4096 NODE_ENV=production webpack --mode production",
         "build:app:dev": "npm run clean && npm run build:lib && cd app && webpack",
@@ -37,9 +37,13 @@
         "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",
+        "copy:reveal": "node script/copy-reveal.mjs",
         "lint": "npm run lint:prettier && npm run lint:eslint",
+        "lint:check": "npm run lint:prettier:check && npm run lint:eslint:check",
         "lint:prettier": "prettier --no-error-on-unmatched-pattern --write \"**/*{.ts,.tsx,.jsx,.css,.json,.md,.yml}\"",
-        "lint:eslint": "eslint --ext .ts,.tsx .",
+        "lint:prettier:check": "prettier --no-error-on-unmatched-pattern --check \"**/*{.ts,.tsx,.jsx,.css,.json,.md,.yml}\"",
+        "lint:eslint": "eslint --ext .ts,.tsx . --fix",
+        "lint:eslint:check": "eslint --ext .ts,.tsx .",
         "install:extension": "npm run build:lib && npm run build:labextension:dev"
     },
     "overrides": {
@@ -106,9 +110,11 @@
         "@lumino/signaling": "^2.0.0",
         "@lumino/virtualdom": "^2.0.0",
         "@lumino/widgets": "^2.0.0",
+        "@types/reveal.js": "^5.2.0",
         "@voila-dashboards/voila": "^0.5.5",
         "react": "^18.3.0",
-        "react-dom": "^18.3.0"
+        "react-dom": "^18.3.0",
+        "reveal.js": "^5.2.1"
     },
     "devDependencies": {
         "@jupyterlab/builder": "~4.4.2",

package/schema/app-meta.json

@@ -12,8 +12,34 @@
           "/specta/defaultLayout": {
             "title": "Page layout",
             "type": "string",
-            "enum": ["default", "article"],
+            "enum": ["default", "article", "slides"],
             "default": "default"
+          },
+          "/specta/hideTopbar": {
+            "title": "Hide topbar",
+            "type": "string",
+            "enum": ["Yes", "No", null],
+            "default": null
+          },
+          "/specta/slidesTheme": {
+            "title": "Slides layout theme",
+            "type": "string",
+            "enum": [
+              null,
+              "beige",
+              "black",
+              "blood",
+              "dracula",
+              "league",
+              "moon",
+              "night",
+              "serif",
+              "simple",
+              "sky",
+              "solarized",
+              "white"
+            ],
+            "default": null
           }
         }
       },
@@ -25,6 +51,10 @@
         "/specta/defaultLayout": {
           "metadataLevel": "notebook",
           "writeDefault": false
+        },
+        "/specta/slidesTheme": {
+          "metadataLevel": "notebook",
+          "writeDefault": false
         }
       }
     }

package/style/base.css

@@ -52,14 +52,24 @@
   left: calc(50% - 52px);
   color: var(--jp-ui-font-color1) !important;
 }
-
+.specta-app-widget {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+}
 .jp-specta-notebook-panel {
   overflow: auto;
   padding: 0 5px 5px 5px;
+  display: flex;
+  flex-direction: column;
+}
+
+.specta-output-host {
+  flex-grow: 1;
 }
 
 #specta-top-panel {
-  min-height: 40px;
+  min-height: 36px;
   display: flex;
   box-shadow: unset !important;
   z-index: 100;
@@ -74,12 +84,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;
@@ -91,15 +98,26 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  height: 80%;
+}
+
+.specta-topbar-icon-container {
+  height: 100%;
 }
 
 .specta-topbar-right {
   position: relative;
 }
 
+.specta-topbar-right .jp-Dialog-content {
+  min-height: unset !important;
+}
+
 .specta-topbar-title {
-  line-height: 40px;
-  font-size: 1.5rem;
+  line-height: 36px;
+  font-size: 1.25rem;
+  font-family: 'Quicksand', sans-serif;
+  font-weight: 500;
 }
 
 .specta-topbar-theme {

package/style/index.css

@@ -1,3 +1,6 @@
 @import url('base.css');
 @import url('article.css');
+@import url('slides.css');
 @import url('skeleton.css');
+@import url('reveal.js/dist/reveal.css');
+@import url('reveal.js/dist/theme/white.css');

package/style/index.js

@@ -1,3 +1,6 @@
 import './base.css';
 import './article.css';
-import './skeleton.css';
+import './slides.css';
+import './skeleton.css';
+import 'reveal.js/dist/reveal.css';
+import 'reveal.js/dist/theme/white.css';

package/style/slides.css

@@ -0,0 +1,30 @@
+.specta-slides-host-widget {
+  --jp-content-font-family: 'Source Serif 4', Georgia, serif;
+  --jp-code-font-family:
+    'Source Code Pro', Menlo, Monaco, 'Courier New', Courier, monospace;
+  --jp-code-font-size: 14px;
+}
+
+.specta-slides-host-widget.reveal {
+  .jp-Collapser-child,
+  .jp-collapseHeadingButton,
+  .jp-InputPrompt,
+  .jp-InputCollapser,
+  .jp-InternalAnchorLink {
+    display: none;
+  }
+
+  .jp-CodeMirrorEditor {
+    text-align: start !important;
+  }
+  h1:last-child,
+  h2:last-child,
+  h3:last-child,
+  h4:last-child,
+  h5:last-child,
+  h6:last-child {
+    margin-bottom: calc(
+      0.5 * var(--jp-content-heading-margin-bottom)
+    ) !important;
+  }
+}

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;
-}
+}