{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "b9ef2cd6-b100-4e32-856e-831034e5c829",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    },
    "tags": []
   },
   "source": [
    "# Welcome to `jupyterlab-deck`\n",
    "\n",
    "> `jupyterlab-deck` presents your _Notebooks_, _Files_, and other [activities](#Documents) as a two-dimensional grid of _slides_."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "10231e4c-f9b0-484b-b77c-28aff72c8408",
   "metadata": {},
   "source": [
    "```{note}\n",
    "Before we go any further, **PRETTY PLEASE**\n",
    "- <kbd>f11</kbd> to view full-screen\n",
    "- <kbd>ctrl+</kbd> up to something comfortable to you (maybe around 200%)\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e85daa56-ab3d-493c-88ee-49813d443a68",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    },
    "tags": []
   },
   "source": [
    "## Getting Around\n",
    "\n",
    "- View different _slides_, with the **on-screen remote**\n",
    "  - the directions you can go are **highlighted**\n",
    "  - click the _deck icon ![](./deck.svg)_ to start/stop deck mode\n",
    "- ... or your keyboard \n",
    "  - the arrow keys do what you think\n",
    "    - <kbd>→</kbd>, <kbd>↓</kbd>, <kbd>←</kbd>, <kbd>↑</kbd>\n",
    "  - the spacebar tries two directions\n",
    "    - <kbd>space</kbd> = <kbd>↓</kbd> or <kbd>→</kbd>\n",
    "    - <kbd>shift+space</kbd> = <kbd>↑</kbd> or <kbd>←</kbd>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "8c7c3ba2-6741-4be8-b0b5-677c7f50afd7",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    },
    "tags": []
   },
   "source": [
    "## What is a Cell?"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2f8b3ef7-3757-4647-9156-3c35e4c65d95",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "- Each _slide_ is made of one or more _cells_"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "657f0a26-57a7-4a63-8c9c-d79fecd25a78",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "- Each _cell_ can be of type `markdown` (like this one)..."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "fac58140-6d60-4ad9-afa9-f5a5ec2ab9ef",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "outputs": [],
   "source": [
    "print(\"`code`, like this one\") \n",
    "# - press `ctrl+enter` or `shift-enter` to run it, or...\n",
    "#   - reveal the notebook toolbar by hovering on the top of the screen\n",
    "#   - press the \"run\" button"
   ]
  },
  {
   "cell_type": "raw",
   "id": "db3e22f6-57ba-4fa1-a667-1d37083eee01",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "  - or `raw`, like this one\n",
    "    - whatever these are good for"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "cd1e94b4-f43a-4073-b34d-9e24eb07aaf8",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    },
    "tags": []
   },
   "source": [
    "## Slide Types\n",
    "\n",
    "> Changing the _Slide Type_ in the _Property Inspector_ controls how slides are displayed. \n",
    "\n",
    "This is a `slide` cell, which starts a new view."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "bd17aa70-cb1e-4754-a74a-d8cb5e927b89",
   "metadata": {},
   "source": [
    "- `null` cells (like this one) without any _Slide Type_ will show up immediately\n",
    "  - but can independently focused"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1ffa1762-5c6b-41ba-9ec1-b41d105b0052",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "- `fragment` cells (like this one) are gradually revealed"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a65735d7-e8cc-4f6c-a248-7f48ae8b04a0",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "- `notes` cells will only be shown in the off-screen viewer (there's one below this)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ad253ca4-fd66-419e-9571-81c6edc1be06",
   "metadata": {
    "slideshow": {
     "slide_type": "notes"
    },
    "tags": []
   },
   "source": [
    "> Here are some helpful notes!"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "297a31bf-2119-416f-82ed-b32aac939f55",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "- `skip` cells will not be shown at all (there's one below this)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "320e440a-25b7-4dcd-953e-7cbb1d987df6",
   "metadata": {
    "slideshow": {
     "slide_type": "skip"
    },
    "tags": []
   },
   "source": [
    "> Carry on, nothing to see here"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e8504627-39b9-4aec-ba1a-5cf5e869ad36",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "- `subslide` cells use an alternate axis, sort of like a \"backup\" slide\n",
    "  - use <kbd>↓</kbd> or <kbd>space</kbd> to go to the `subslide` below"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "8248a92b-a76f-4f9e-b3fa-84c6054a6573",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    },
    "tags": []
   },
   "source": [
    "### This is a Subslide\n",
    "\n",
    "```{hint}\n",
    "- go back to the `slide` above with <kbd>↑</kbd> or <kbd>shift space</kbd>\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "248ac230-c6f2-4a2e-b5e9-55aa29d0c9a1",
   "metadata": {
    "tags": []
   },
   "source": [
    "- a subslide can contain `null` cells ..."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "7f81f2f6-eca8-4184-9022-4300ac484b76",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "- `fragment` cells ..."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "066a2192-052e-4cee-b58f-2290abc668e6",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "- ... and even more `subslide`s\n",
    "  - <kbd>↓</kbd> or <kbd>space</kbd> to see another `subslid`e"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2d9c9c72-5a22-45de-9d5b-5eb5e090e175",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    },
    "tags": []
   },
   "source": [
    "### Sub-Subslide\n",
    "\n",
    "- use <kbd>→</kbd> or <kbd>space</kbd> to get back to the _main_ thread"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "0fa102a4-bb13-49a4-9681-0332123078b3",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    },
    "tags": []
   },
   "source": [
    "## Plugins\n",
    "\n",
    "> `jupyterlab-deck` is a _JupyterLab Plugin_"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f1eeea93-2b9c-4f86-b2ab-69e600e6b2d4",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "Some kinds of _JupyterLab Plugins_ are:\n",
    "\n",
    "| What...         | ...they do                                                                     |\n",
    "|----------------:|--------------------------------------------------------------------------------|\n",
    "| Core            | Provided by JupyterLab itself... JupyterLab is composed entirely of _Plugins_! |\n",
    "| Documents       | Work with whole files in the _Dock Panel_                                      |\n",
    "| Renderers       | Offer new ways to work with pieces of documents                                |\n",
    "| Themes          | Change how JupyterLab _looks_                                                  |\n",
    "| Jupyter Widgets | Combine compute and narrative                                                  |"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a7536cf8-69e9-482d-974d-f949138a6107",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    },
    "tags": []
   },
   "source": [
    "### Core\n",
    "\n",
    "When presenting, many of the core JupyterLab features are **hidden by default**:"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "799a4492-0f17-47cb-9dd2-572077990b27",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "- the _cell toolbar_ is available by hovering over the **top** of the screen\n",
    "  - use it to start the _Debugger_ (if supported by your kernel)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "cd1f997a-a64c-47cd-8790-8126de5d6952",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "- the right and left _sidebars_ can be shown by hovering over the **sides** of the screen\n",
    "  - the _Table of Contents_ works **great** for...\n",
    "    - adding Markdown header numbers\n",
    "    - jumping to a specific cell"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "361832f6-6bf0-42e6-a9bf-a0bddbcb2b13",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "- <kbd>ctrl f</kbd> shows the _document search_  to jump between results"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "26b91d4d-dfad-499d-be7f-aa20ab33b2e7",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "- <kbd>ctrl shift c</kbd> shows the powerful _command palette_"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e8c9c1ec-4c84-4da9-85d3-db017308d977",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "> The _Status Bar_, _Cell Toolbar_, and _Main Menu_... did not make the cut."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "376945a2-e4cf-4e15-9ef8-19d4311b8fb1",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    },
    "tags": []
   },
   "source": [
    "### Documents"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "96606680-5b2a-4e01-ab1f-bfbccebaf0ed",
   "metadata": {
    "tags": []
   },
   "source": [
    "> JupyterLab provides a number of built-in _Document_ types, and can have **more than one** open on the screen at a time.\n",
    "\n",
    "Decks with **hyperlinks** will open documents while keeping the current document open in the background. For example:"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "fab36471-dfbf-4cec-b4ff-845e2ed204e5",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "  - [other Notebooks](./History.ipynb) ..."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "6dec7642-8c0e-4ba6-ae15-76ac7d313e46",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "  - `#` anchors in [this](#Welcome-to-jupyterlab-deck) or [other Notebooks](./History.ipynb#Thanks!) ..."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3e06e85d-bf0a-459d-9e24-5ede73b16d45",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "  - [Markdown documents](./README.md) ..."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "760ba235-70f3-488c-9b8a-ebf1fae8c6ee",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "  - [images](./deck.svg) ..."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d139b228-9fbe-494d-b238-46c08b0709a0",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "  - [code](./hello_world.py) ..."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "bdf9582a-c16f-442e-bf43-47f30855d128",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "- ... basically **anything** that can appear in the JupyterLab _Dock Panel_"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "45b73c9b-36e3-4c37-9525-07763e3b49d8",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    },
    "tags": []
   },
   "source": [
    "### Themes\n",
    "\n",
    "`jupyterlab-deck` uses the JupyterLab theme system. Themes can even be changed _on the fly_."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "05e90e5d-bd3c-4896-ba4c-38dda5af467a",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "from IPython.display import HTML\n",
    "[display(HTML(f\"\"\"\n",
    "<button class=\"jp-mod-styled jp-mod-accept\"\n",
    "  data-commandlinker-command=\"apputils:change-theme\" \n",
    "  data-commandlinker-args='{{\"theme\": \"JupyterLab {t}\"}}'>\n",
    "  The {t} Side</button>\"\"\"))\n",
    "for t in [\"Light\", \"Dark\"]];"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "03f46758-48fa-45eb-bc57-358f36000f86",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "```{hint}\n",
    "For more themey goodness, try [jupyterlab-fonts](https://github.com/deathbeds/jupyterlab-fonts).\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "b8ef01e5-f644-4fc5-b778-8a1903c383e5",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    },
    "tags": []
   },
   "source": [
    "### Jupyter Widgets\n",
    "\n",
    "_Jupyter Widgets_ blur the line between **code** and **output**."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "1c65020c-f803-47a7-8ec8-9573a72b6fdc",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "outputs": [],
   "source": [
    "try: await(__import__(\"piplite\")).install(\"ipywidgets\")\n",
    "except ImportError: pass\n",
    "import ipywidgets as W\n",
    "W.HBox([\n",
    "    W.FloatSlider(description=i, orientation=\"vertical\") \n",
    "    for i in \"abcd\"\n",
    "])"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "adf224a0-c15c-42f5-8e2a-c9ceba4a6c96",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    },
    "tags": []
   },
   "source": [
    "## Thanks for trying `jupyterlab-deck`!"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "909f8d75-2bd9-488d-81cd-c6d2cfd10e78",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "Here are some documents to explore with `jupyterlab-deck`...\n",
    "- [A Brief History of Presenting with Jupyter](./History.ipynb)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3f5bdf51-553c-4ca9-ba02-08a09e4cef28",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    },
    "tags": []
   },
   "source": [
    "Some external links about `jupyterlab-deck`...\n",
    "- [GitHub](https://github.com/deathbeds/jupyterlab-deck)\n",
    "- [PyPI](https://pypi.org/project/jupyterlab-deck)\n",
    "- [npm](https://www.npmjs.com/package/@deathbeds/jupyterlab-deck)\n",
    "- [conda-forge](https://github.com/conda-forge/jupyterlab-deck-feedstock)"
   ]
  }
 ],
 "metadata": {
  "@deathbeds/jupyterlab-fonts": {
   "styles": {}
  },
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.10.6"
  },
  "toc-autonumbering": true,
  "toc-showcode": false,
  "toc-showmarkdowntxt": false,
  "toc-showtags": false
 },
 "nbformat": 4,
 "nbformat_minor": 5
}
