jupyter-specta 0.1.8 → 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`
@@ -47,6 +54,14 @@ Then serve the contents of the output directory (by default `./_output`) using a
 
 ## Specta Configuration
 
+### Available layouts
+
+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.
@@ -56,6 +71,7 @@ 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": {
@@ -78,11 +94,21 @@ The following options are available:
             "title": "My blog",
             "themeToggle": false
           }
+        },
+        "slides.ipynb": {
+          "hideTopbar": true,
+          "slidesTheme": "sky"
         }
       }
 ```
 
-### Notebook specific configuration
+### 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.
 
@@ -93,8 +119,8 @@ By opening the `Property Inspector` panel of JupyterLab and selecting the `Spect
 - `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!
+### Slides layout configuration
 
-You can try it online by clicking on this badge:
+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.
 
-[![Try on lite](https://jupyterlite.rtfd.io/en/latest/_static/badge.svg)](https://trungleduc.github.io/specta/specta/)
+![Slide tool](./docs/images/slide-tool.png)

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"]');
 }
@@ -107,7 +123,13 @@ export function readSpectaConfig({ nbMetadata, nbPath }) {
         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;
@@ -124,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/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,7 +3,7 @@ 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, _j;
         return {
@@ -32,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" },
+        (((_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.8",
+    "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,10 +52,20 @@
   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 {
@@ -88,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: 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;
+  }
+}