From d1d8d839478a3519152eb75be9e28cd002d79fb0 Mon Sep 17 00:00:00 2001 From: Frederic COLLONVAL Date: Fri, 19 Feb 2021 08:09:58 +0100 Subject: [PATCH] Fix broken links Alphabetical ordering in main README --- README.md | 138 +++++++++++++++-------------------- custom-log-console/README.md | 2 +- hello-world/README.md | 4 +- kernel-messaging/README.md | 6 +- kernel-output/README.md | 2 +- server-extension/README.md | 2 +- signals/README.md | 2 +- widgets/README.md | 8 +- 8 files changed, 70 insertions(+), 94 deletions(-) diff --git a/README.md b/README.md index cfd6ef10..5c28a2a4 100644 --- a/README.md +++ b/README.md @@ -52,23 +52,23 @@ You may find it easier to learn how to create extensions _by examples_, instead Start with the [Hello World](hello-world) and then jump to the topic you are interested in. -- [Hello World](hello-world) -- [Signals](signals) -- [Datagrid](datagrid) -- [Command Palette](command-palette) - [Commands](commands) +- [Command Palette](command-palette) +- [Context Menu](context-menu) +- [Custom Log Console](custom-log-console) +- [Datagrid](datagrid) +- [Hello World](hello-world) +- [Kernel Messaging](kernel-messaging) +- [Kernel Output](kernel-output) - [Launcher](launcher) +- [Log Messages](log-messages) - [Main Menu](main-menu) +- [React Widget](react-widget) +- [Server Hello World](server-extension) - [Settings](settings) +- [Signals](signals) - [State](state) -- [React Widget](react-widget) - [Widgets](widgets) -- [Log Messages](log-messages) -- [Custom Log Console](custom-log-console) -- [Context Menu](context-menu) -- [Kernel Output](kernel-output) -- [Kernel Messaging](kernel-messaging) -- [Server Hello World](server-extension) You can expect from each example: @@ -81,19 +81,29 @@ We have structured the examples based on the [extension points](https://jupyterl You are welcome to open any [issue](https://github.com/jupyterlab/extension-examples/issues) or [pull request](https://github.com/jupyterlab/extension-examples/pulls). -## Basic +### [Commands](commands) -### [Hello World](hello-world) +Extend the main app with a Command. -Set up the development environment and print to the console. +[![Commmand example](commands/preview.png)](commands) -[![Hello World](hello-world/preview.png)](hello-world) +### [Command Palette](command-palette) -### [Signals](signals) +Register commands in the Command Palette. -Use Signals to allow Widgets communicate with each others. +[![Commmand Palette](command-palette/preview.png)](command-palette) -[![Button with Signal](signals/preview.png)](signals) +### [Context Menu](context-menu) + +Add a new button to an existent context menu. + +[![Context Menu](context-menu/preview.gif)](context-menu) + +### [Custom Log Console](custom-log-console) + +Create a new log console. + +[![Custom Log Console](custom-log-console/preview.gif)](custom-log-console) ### [Datagrid](datagrid) @@ -101,23 +111,23 @@ Display a Datagrid as a Lumino Widget. [![Datagrid](datagrid/preview.png)](datagrid) -## Command Palette +### [Hello World](hello-world) -### [Command Palette](command-palette) +Set up the development environment and print to the console. -Register commands in the Command Palette. +[![Hello World](hello-world/preview.png)](hello-world) -[![Commmand Palette](command-palette/preview.png)](command-palette) +### [Kernel Messaging](kernel-messaging) -## Commands +Interact with a kernel from an extension. -### [Commands](commands) +[![Kernel Messages](kernel-messaging/preview.gif)](kernel-messaging) -Extend the main app with a Command. +### [Kernel Output](kernel-output) -[![Commmand example](commands/preview.png)](commands) +Render kernel messages in an OuputArea. -## Launcher +[![OutputArea class](kernel-output/preview.gif)](kernel-output) ### [Launcher](launcher) @@ -125,7 +135,11 @@ Start your extension from the Launcher. [![Launcher](launcher/preview.gif)](launcher) -## Menus +### [Log Messages](log-messages) + +Send a log message to the log console. + +[![Log Messages](log-messages/preview.gif)](log-messages) ### [Main Menu](main-menu) @@ -133,79 +147,41 @@ Add a Menu to the main app. [![Main Menu](main-menu/preview.png)](main-menu) -## Settings - -### [Settings](settings) - -Create and use new Settings for your extension. - -[![Settings](settings/preview.gif)](settings) - -## State - -### [State](state) - -Use State persistence in an extension. - -[![State](state/preview.gif)](state) - -## React - ### [React Widget](react-widget) Create a React.js Widget in JupyterLab. [![react-widget](react-widget/preview.gif)](react-widget) -## Widget Tracker - -### [Widgets](widgets) - -Add a new Widget element to the main window. - -[![Custom Tab](widgets/preview.png)](widgets) - -## Log Console - -### [Log Messages](log-messages) - -Send a log message to the log console. - -[![Log Messages](log-messages/preview.gif)](log-messages) - -### [Custom Log Console](custom-log-console) - -Create a new log console. - -[![Custom Log Console](custom-log-console/custom-preview.gif)](custom-log-console) +### [Server Hello World](server-extension) -## Context Menu +Create a minimal extension with backend (i.e. server) and frontend parts. -### [Context Menu](context-menu) +[![Server Hello World](server-extension/preview.png)](server-extension) -Add a new button to an existent context menu. +### [Settings](settings) -[![Context Menu](context-menu/preview.gif)](context-menu) +Create and use new Settings for your extension. -## Advanced +[![Settings](settings/preview.gif)](settings) -### [Kernel Output](kernel-output) +### [Signals](signals) -Render kernel messages in an OuputArea. +Use Signals to allow Widgets communicate with each others. -[![OutputArea class](kernel-output/preview.gif)](kernel-output) +[![Button with Signal](signals/preview.png)](signals) -### [Kernel Messaging](kernel-messaging) +### [State](state) -Interact with a kernel from an extension. +Use State persistence in an extension. -[![Kernel Messages](kernel-messaging/preview.gif)](kernel-messaging) +[![State](state/preview.gif)](state) -### [Server Hello World](server-extension) +### [Widgets](widgets) -Create a minimal extension with backend (i.e. server) and frontend parts. +Add a new Widget element to the main window. -[![Server Hello World](server-extension/preview.png)](server-extension) +[![Custom Tab](widgets/preview.png)](widgets) ## Prerequisites diff --git a/custom-log-console/README.md b/custom-log-console/README.md index be618845..aaa26402 100644 --- a/custom-log-console/README.md +++ b/custom-log-console/README.md @@ -11,7 +11,7 @@ The default log console extension in JupyterLab obtains log outputs from the ker 1. Obtain the current active notebook and send message to his `Logger` instance (see the [log message](https://github.com/jupyterlab/extension-examples/tree/master/log-messages) example). 2. Create your custom log console (covered in this example). -> It is strongly recommended to read [commands](https://github.com/jupyterlab/extension-examples/tree/master/commands), [command-palette](https://github.com/jupyterlab/extension-examples/tree/master/command-palette), [main-menu](https://github.com/jupyterlab/extension-examples/tree/master/main-menu), [widget-tracker](https://github.com/jupyterlab/extension-examples/tree/master/widget-tracker) and [react-widget](https://github.com/jupyterlab/extension-examples/tree/master/react-widget) examples before diving into this one. +> It is strongly recommended to read [commands](https://github.com/jupyterlab/extension-examples/tree/master/commands), [command-palette](https://github.com/jupyterlab/extension-examples/tree/master/command-palette), [main-menu](https://github.com/jupyterlab/extension-examples/tree/master/main-menu), [widgets](https://github.com/jupyterlab/extension-examples/tree/master/widgets) and [react-widget](https://github.com/jupyterlab/extension-examples/tree/master/react-widget) examples before diving into this one. To implement this log console you need to install the following packages: diff --git a/hello-world/README.md b/hello-world/README.md index bd8eb016..10620f59 100644 --- a/hello-world/README.md +++ b/hello-world/README.md @@ -262,6 +262,6 @@ and here is the [JupyterFrontEnd class documentation](https://jupyterlab.github. JupyterLab is built on top of three major concepts. It is advised to look through the corresponding examples in the following order: -- _command_: Function to be executed from UI elements. See the [commands example](../../commands) -- _widget_: UI based brick. See the [widgets example](../../widgets) +- _command_: Function to be executed from UI elements. See the [commands example](../commands) +- _widget_: UI based brick. See the [widgets example](../widgets) - _signal_: Observer pattern between JupyterLab elements. See the [signals example](../signals) diff --git a/kernel-messaging/README.md b/kernel-messaging/README.md index 0e46d781..f65a56e6 100644 --- a/kernel-messaging/README.md +++ b/kernel-messaging/README.md @@ -73,7 +73,7 @@ provided directly by the JupyterLab application: const manager = app.serviceManager; ``` -With these lines, you can extend the panel widget from the [signal example](../../signals) to initialize a +With these lines, you can extend the panel widget from the [signal example](../signals) to initialize a kernel. In addition, you will create a `KernelModel` class in it and overwrite the `dispose` and `onCloseRequest` methods of the `StackedPanel` ([see the documentation](https://jupyterlab.github.io/lumino/widgets/classes/stackedpanel.html)) @@ -282,7 +282,7 @@ In the [Kernel Output](../kernel-output) example, you will explore how you can reuse some Jupyter components to have a nicer display for kernel messages. This example uses React to define UI elements. You can -learn more about React in JupyterLab in [that example](../../react-widget/README.md). +learn more about React in JupyterLab in [that example](../react-widget/README.md). The UI refresh is triggered by signal emitions. To know more about it, -you can have a look at the [signal example](../../signals/README.md). +you can have a look at the [signal example](../signals/README.md). diff --git a/kernel-output/README.md b/kernel-output/README.md index c87ed6c0..267bbd19 100644 --- a/kernel-output/README.md +++ b/kernel-output/README.md @@ -118,7 +118,7 @@ protected onCloseRequest(msg: Message): void { ## OutputArea and Model -The `SimplifiedOutputArea` class is a `Widget`, as described in the [widget example](../../widgets/README.md). +The `SimplifiedOutputArea` class is a `Widget`, as described in the [widget example](../widgets/README.md). It has the ability to display the results of a notebook cell execution. You can instantiate it with a new `OutputAreaModel`; this class is containing the data to show: diff --git a/server-extension/README.md b/server-extension/README.md index 2a1b9c26..bff59c37 100644 --- a/server-extension/README.md +++ b/server-extension/README.md @@ -4,7 +4,7 @@ ![server extension example](./preview.png) -It is strongly recommended to read the [basic hello-world](../../hello-world) +It is strongly recommended to read the [basic hello-world](../hello-world) example before diving into this one. - [The template folder structure](#the-template-folder-structure) diff --git a/signals/README.md b/signals/README.md index 06a24459..0b7f7f78 100644 --- a/signals/README.md +++ b/signals/README.md @@ -62,7 +62,7 @@ Let's look at the implementations details. Start with a file called `src/button.ts`. -NB: For a React widget, you can try the [React Widget example](./../../react-widget) for more details. +NB: For a React widget, you can try the [React Widget example](../react-widget) for more details. `button.ts` contains one class `ButtonWidget` that extends the `Widget` class provided by Lumino. diff --git a/widgets/README.md b/widgets/README.md index d7101155..7c7bc7ed 100644 --- a/widgets/README.md +++ b/widgets/README.md @@ -90,11 +90,11 @@ You can associate style properties to the custom CSS class in the file ## Where to Go Next This example uses a command to display the widget. Have a look a the -[commands example](../../commands/README.md) for more information about it. +[commands example](../commands/README.md) for more information about it. The widget created in this example is simple. You will find more advanced widgets in the following examples: -- Widget showing a [Datagrid](../../datagrid/README.md) -- Widget integrating [React components](../../react-widget/README.md) -- Widget interacting with a [Kernel](../../kernel-messaging/README.md) +- Widget showing a [Datagrid](../datagrid/README.md) +- Widget integrating [React components](../react-widget/README.md) +- Widget interacting with a [Kernel](../kernel-messaging/README.md)