0.1.0

README.md

@@ -4,7 +4,7 @@
 
 ## Introduction
 
-JustPy is an object-oriented, component based, high-level Python Web Framework that requires no front-end programming. With a few lines of only Python code, you can create interactive websites without any JavaScript programming.  
+JustPy is an object-oriented, component based, high-level Python Web Framework that requires no front-end programming. With a few lines of only Python code, you can create interactive websites without any JavaScript programming. JustPy can also be used to create graphic user interfaces for Python programs. 
 
 Unlike other web frameworks, JustPy has no front-end/back-end distinction. All programming is done on the back-end allowing a simpler, more productive, and more Pythonic web development experience. JustPy removes the front-end/back-end distinction by intercepting the relevant events on the front-end and sending them to the back-end to be processed. 
 

docs/README.md

@@ -3,19 +3,20 @@
 
 ## Introduction
 
-JustPy is an object-oriented, component based, high-level Python Web Framework that requires no front-end programming. With a few lines of only Python code, you can create interactive websites without any JavaScript programming.  
+JustPy is an object-oriented, component based, high-level Python Web Framework that requires no front-end programming. With a few lines of only Python code, you can create interactive websites without any JavaScript programming. JustPy can also be used to create graphic user interfaces for Python programs.  
 
 Unlike other web frameworks, JustPy has no front-end/back-end distinction. All programming is done on the back-end allowing a simpler, more productive, and more Pythonic web development experience. JustPy removes the front-end/back-end distinction by intercepting the relevant events on the front-end and sending them to the back-end to be processed. 
 
-!> The best way to understand JustPy is to follow the [tutorial](tutorial/getting_started.md) in which there are many examples. 
+!!! note
+    The best way to understand JustPy is to follow the [tutorial](../tutorial/getting_started) in which there are many examples. 
 
 In JustPy, elements on the web page are instances of component classes. A component in JustPy is a Python class that allows you to instantiate reusable custom elements whose functionality and design is encapsulated away from the rest of your code. 
 
-Custom components can be created using other components as building blocks. Out of the box, JustPy comes with support for [HTML](tutorial/html_components.md) and [SVG](tutorial/svg_components.md) components as well as more complex components such as [charts](charts_tutorial/introduction.md) and [grids](grids_tutorial/introduction.md).  It also supports most of the components and the functionality of the [Quasar](https://quasar.dev/) library of [Material Design 2.0](https://material.io/) components.
+Custom components can be created using other components as building blocks. Out of the box, JustPy comes with support for [HTML](../html_components) and [SVG](../svg_components) components as well as more complex components such as [charts](charts_tutorial/introduction.md) and [grids](grids_tutorial/introduction.md).  It also supports most of the components and the functionality of the [Quasar](https://quasar.dev/) library of [Material Design 2.0](https://material.io/) components.
 
 JustPy encourages creating your own components and reusing them in different projects (and, if applicable, sharing these components with others). 
 
-JustPy supports visualization using [matplotlib](tutorial/matplotlib.md) and [Highcharts](charts_tutorial/introduction.md).
+JustPy supports visualization using [matplotlib](tutorial/matplotlib) and [Highcharts](charts_tutorial/introduction.md).
 
 JustPy integrates nicely with [pandas](https://pandas.pydata.org/) and simplifies building web sites based on pandas analysis. JustPy comes with a [pandas extension](charts_tutorial/pandas?id=using-the-pandas-extension) that makes it simple to create interactive charts and grids from pandas data structures.
 
@@ -58,11 +59,13 @@ jp.justpy(hello_world)
 
 ## Under the Hood
 
-JustPy's backend is built using: 
+JustPy's backend is built using:
+
 * [starlette](https://www.starlette.io/) - "a lightweight [ASGI](https://asgi.readthedocs.io/en/latest/) framework/toolkit, which is ideal for building high performance asyncio services".
 * [uvicorn](https://www.uvicorn.org/) - "a lightning-fast [ASGI](https://asgi.readthedocs.io/en/latest/) server, built on [uvloop](https://github.com/MagicStack/uvloop) and [httptools](https://github.com/MagicStack/httptools)".
 
-JustPy's frontend (which is transparent to JustPy developers) is built using: 
+JustPy's frontend (which is transparent to JustPy developers) is built using:
+
 * [Vue.js](https://vuejs.org/) - "The Progressive JavaScript Framework"
 
 The way JustPy removes the frontend/backend distinction is by intercepting the relevant events on the frontend and sending them to the backend to be processed.

docs/blog/ag-grid_to_web_page.md

@@ -1,5 +1,6 @@
 # From a Pandas DataFrame to a Web Site with an ag-Grid in 10 Lines of Python
-https://dev.to/elimintz/from-a-pandas-dataframe-to-a-web-site-with-an-ag-grid-in-10-lines-of-python-2a9b
+
+[dev.to link](https://dev.to/elimintz/from-a-pandas-dataframe-to-a-web-site-with-an-ag-grid-in-10-lines-of-python-2a9b)
 
 ## Introduction
 

docs/charts_tutorial/chart_components.md

@@ -69,7 +69,8 @@ The chart instance that is created can be further modified by changing its optio
 
 A component that comes with JustPy is Histogram. It simplifies creating a histogram chart. In this example, we include the  definition.
 
-!> In order to run this example, you need to install [numpy](https://numpy.org/)
+!!! warning
+    In order to run this example, you need to install [numpy](https://numpy.org/)
 
 ```python
 import justpy as jp
@@ -138,7 +139,7 @@ def histogram_test(request):
 
 jp.justpy(histogram_test)
 
- ```
+```
 
 The Histogram class relies on a [chart definition](https://www.highcharts.com/docs/chart-and-series-types/histogram-series) from the Highcharts documentation.
 

docs/charts_tutorial/chart_events.md

@@ -9,7 +9,7 @@ The HighCharts component supports events that allow making charts more interacti
 - **series_hide** - fires when series is hidden
 - **series_show** - fires when series is shown
 - **series_click** - fires when series is clicked
-- **tooltip** - fires when chart requests a tooltip (covered in its own [chapter](charts_tutorial/tooltips.md) in the tutorial)
+- **tooltip** - fires when chart requests a tooltip (covered in its own [chapter](../tooltips) in the tutorial)
 
 
 For all chart events, JustPy adds the following fields to the second argument of the event handler (`msg` in this tutorial): 
@@ -41,27 +41,27 @@ Draw crosshairs for designated points.
         return True
 ```
 
-See example of usage in [Iris Flower Dataset Visualization](charts_tutorial/iris.md)
+See example of usage in [Iris Flower Dataset Visualization](../iris)
 
 
 ### `async def select_point(self, point_list, websocket)`
 
 Selects designated points.
 
 ```python
-    async def select_point(self, point_list, websocket):
-        # data is list of of dictionaries  whose keys are:
-        # 'id': the chart id 
-        # 'series': the series index
-        # 'point': the point index 
-        #  Values are  all integers
-        # Example:
-        # {'id': chart_id, 'series': msg.series_index, 'point': msg.point_index}
-        await websocket.send_json({'type': 'select_point', 'data': point_list})
-        # So the page itself does not update, only the tooltip, return True not None
-        return True
+async def select_point(self, point_list, websocket):
+    # data is list of of dictionaries  whose keys are:
+    # 'id': the chart id 
+    # 'series': the series index
+    # 'point': the point index 
+    #  Values are  all integers
+    # Example:
+    # {'id': chart_id, 'series': msg.series_index, 'point': msg.point_index}
+    await websocket.send_json({'type': 'select_point', 'data': point_list})
+    # So the page itself does not update, only the tooltip, return True not None
+    return True
 ```
 
- See example of usage in [Iris Flower Dataset Visualization](charts_tutorial/iris.md)
+ See example of usage in [Iris Flower Dataset Visualization](../iris)
 
 

docs/charts_tutorial/creating_charts.md

@@ -44,7 +44,7 @@ def chart_test():
 jp.justpy(chart_test)
 ```
 
-Run the program above as explained [here](tutorial/getting_started.md).
+Run the program above as explained [here](/tutorial/getting_started).
 
 We create a chart using the JustPy HighCharts class. Like other JustPy components, it recognizes keyword arguments like `classes`, `style` and `a`.
 
@@ -72,11 +72,13 @@ def chart_test():
 
 Four charts are created and put on the page, each one of a different type. We accomplish this by iterating over a list with four different chart types that Highcharts supports. When we create each chart, we load the same options (via a keyword argument) to all of them. 
 
-?> The reference for the Highcharts chart options can be found at https://api.highcharts.com/highcharts/
+!!! info
+    The reference for the Highcharts chart options can be found at https://api.highcharts.com/highcharts/
 
 However, we then proceed to change the options. Using the dot notation, we assign different values to [`options.chart.type`](https://api.highcharts.com/highcharts/chart.type), [`options.title.text`](https://api.highcharts.com/highcharts/title.text) and [`options.subtitle.text`](https://api.highcharts.com/highcharts/subtitle.text). 
 
-?> Notice that `options.subtitle` was not specified in `my_chart_def`. The [addict](https://github.com/mewwts/addict) library `Dict` structure creates sub dictionaries automatically when required. 
+!!! note
+    Notice that `options.subtitle` was not specified in `my_chart_def`. The [addict](https://github.com/mewwts/addict) library `Dict` structure creates sub dictionaries automatically when required. 
 
 
 ## Using Highcharts Online Examples
@@ -169,19 +171,23 @@ jp.justpy(chart_test)
 
 This time, there is no error. When you copy a JavaScript object, make sure that it does not include function definitions or uses JavaScript language functions to compute values. These will cause errors. 
 
-!> JustPy can only parse JavaScript objects that look like a Python dictionary except for the missing quotes around the dictionary keys. Also, mixing single and double quotes in the JavaScript object may cause problems. Use only single quotes as is the norm with most Highcharts examples.
+!!! warning
+    JustPy can only parse JavaScript objects that look like a Python dictionary except for the missing quotes around the dictionary keys. Also, mixing single and double quotes in the JavaScript object may cause problems. Use only single quotes as is the norm with most Highcharts examples.
 
-?> It is very likely someone has already created a chart like that one you need and put it online. Use that chart as a stepping stone to create yours. Eventually, you may need to make use of the excellent Highcharts [docs](https://www.highcharts.com/docs/index)
+!!! tip
+    It is very likely someone has already created a chart like that one you need and put it online. Use that chart as a stepping stone to create yours. Eventually, you may need to make use of the excellent Highcharts [docs](https://www.highcharts.com/docs/index)
 
 ## Chart Series
 
 Notice that we have added two lines to `chart_test` above.  The first of these lines gives the series a name and makes the legend more informative. 
 
-!> The Dicts that describe the series of a chart are held in a list so the first series is `options.series[0]`
+!!! note
+    The Dicts that describe the series of a chart are held in a list so the first series is `options.series[0]`
 
 Here is an example of how you create a chart with multiple series.
 
-!> numpy needs to be installed for this example to work
+!!! warning
+    numpy needs to be installed for this example to work
 
 ```python
 import justpy as jp

docs/charts_tutorial/introduction.md

@@ -1,16 +1,18 @@
 # Highcharts Introduction
 
-!> It is recommended to go through the general [tutorial](tutorial/getting_started.md) first. 
+!!! note
+    It is recommended to go through the general [tutorial](/tutorial/getting_started) first. 
 
 JustPy makes it simple to create charts using the [Highcharts](https://www.highcharts.com/) JavaScript charting library.
 
-?> JustPy also supports [matplotlib charts](tutorial/matplotlib.md)
+!!! info
+    JustPy also supports [matplotlib charts](/tutorial/matplotlib)
 
 There are several JavaScript charting libraries available, but my personal favorite is Highcharts. It is not too difficult to integrate other charting libraries with JustPy, so perhaps more charting libraries will be supported in the future.
 
 The Highcharts and JustPy combination is great for creating and sharing interactive charts, even if you don't plan to develop a web application. JustPy allows you to share your visualizations by providing access to the charts through any browser.
 
-Highcharts is [free](https://shop.highsoft.com/faq#Non-Commercial-0) for non-commercial use.
+Highcharts is [free](https://shop.highsoft.com/faq#Non-Commercial-0) for non-commercial use and this includes individuals using the software for personal use, testing and demonstration.
 
 A Highcharts chart in JustPy is a component. It is represented by a Python class, just like any other component. Because Highcharts is a JavaScript library it uses a JavaScript object to define the options or settings of a chart. 
 

docs/charts_tutorial/iris.md

@@ -13,7 +13,7 @@ The [Iris flower dataset](https://en.wikipedia.org/wiki/Iris_flower_data_set) is
 
  Please run the program below:
 
- ```python
+```python
 import justpy as jp
 import pandas as pd
 

docs/charts_tutorial/pandas.md

@@ -8,10 +8,11 @@ JustPy comes with a [pandas extension](https://pandas.pydata.org/pandas-docs/sta
 
 The program below loads a [csv](https://elimintz.github.io/women_majors.csv) file into a pandas frame and then creates a chart based on the data in the frame. 
 
-?> The examples in this section were inspired by [this](https://www.dataquest.io/blog/making-538-plots/) blog post.
- Many thanks to [Randal Olson](http://www.randalolson.com/2014/06/14/percentage-of-bachelors-degrees-conferred-to-women-by-major-1970-2012/) for creating and hosting the data set.
+!!! note
+    The examples in this section were inspired by [this](https://www.dataquest.io/blog/making-538-plots/) blog post. Many thanks to [Randal Olson](http://www.randalolson.com/2014/06/14/percentage-of-bachelors-degrees-conferred-to-women-by-major-1970-2012/) for creating and hosting the data set.
 
-!> To run the program below you will need to have pandas installed.
+!!! warning
+    To run the program below you will need to have pandas installed.
 
 ```python
 import justpy as jp
@@ -35,6 +36,7 @@ jp.justpy(women_majors)
 The JustPy pandas extension `jp` includes the function `plot` that creates and returns a chart instance. 
 
 It has two positional arguments:
+
 - The frame column to use as the x value, can either be the index of the column or its name
 - A list of the columns to plot as y values. Items on the list can either be column indexes or names
 
@@ -153,5 +155,6 @@ In our specific case, the data of each series is a list of lists of pairs, each
 
 In this example, we used the itertools library function `zip_longest` to make sure missing values are handled correctly. Since the zip family of functions returns tuples, we need to convert them to lists (this is not strictly true since the standard library `json.dumps` function converts python tuples to JavaScript arrays). All this is done in the function `make_pairs_list` above.
 
-!> JustPy comes with several Highcharts themes. The theme of all charts on a page must be the same and therefore `highcharts_theme` is a WebPage attribute. In this example we set the theme to 'grid'. 
+!!! info
+    JustPy comes with several Highcharts themes. The theme of all charts on a page must be the same and therefore `highcharts_theme` is a WebPage attribute. In this example we set the theme to 'grid'. 
 

docs/charts_tutorial/stock_charts.md

@@ -3,7 +3,8 @@ In addition to Highcharts, Highsoft offers a great stock charting product called
 
 The program below serves a chart of stock price data.
 
-!> You need to install pandas to run the program
+!!! warning
+    You need to install pandas to run the program
 
 ```python
 import justpy as jp

docs/charts_tutorial/tooltips.md

@@ -55,15 +55,16 @@ return await self.tooltip_update('<div>My tooltip!</div>', msg.websocket)
 
 This line returns the result of running the method `tooltip_update` of the HighCharts component. The method has two arguments (in addition to self). The first is an HTML string which determines the content of the tooltip and the second is the websocket over which this HTML needs to be transmitted. The websocket of the page on which the event occurred can be found in `msg.websocket` and this is the websocket we use (`msg` is the second argument of the event handler).
 
-!> Since the method `tooltip_update` is a coroutine, it needs be awaited and the tooltip event handler needs to be defined with the keyword async.
+!!! note
+    Since the method `tooltip_update` is a coroutine, it needs be awaited and the tooltip event handler needs to be defined with the keyword async.
 
 ## Tooltip Debouncing
 
 If you quickly mouseover several points on charts with user defined formatters, you will see the "Loading…" inscription instead of the information you expect. Only when no new tooltip event occurs for 100ms (0.1 second), JustPy notifies its backend that a tooltip event has happened. This prevents the server from being inundated with irrelevant tooltip requests as the user moves the mouse over the chart.
 
 The debouncing delay can be changed by setting the attribute `tooltip_debounce` which is by default 100ms. The following command changes the debounce period to 500ms:
 
- ```python
+```python
 chart2.tooltip_debounce = 500  # Assign value of debounce period in ms
 ```
 

docs/charts_tutorial/updating_charts.md

@@ -1,6 +1,6 @@
 # Updating Charts
 
-In some applications, we would like charts to update as the underlying data changes. The following program updates the two series on a chart every second and then updates all the browser tabs the page is open in. The program is similar to the [clock](tutorial/pushing_data?id=clock) example in the general tutorial.
+In some applications, we would like charts to update as the underlying data changes. The following program updates the two series on a chart every second and then updates all the browser tabs the page is open in. The program is similar to the [clock](/tutorial/pushing_data?/#clock) example in the general tutorial.
 
 ```python
 import justpy as jp

docs/grids_tutorial/creating_grids.md

@@ -35,7 +35,8 @@ jp.justpy(grid_test)
 ```
 In this case the grid options are defined using a string that represents a JavaScript object. It could also be a Python dictionary. The options object is described in the [ag_Grid documentation](https://www.ag-grid.com/documentation-main/documentation.php).
 
-?> We will see later, that when working with pandas, JustPy can automate the process and there is no need to go into the grid specification details.
+!!! note
+    We will see later, that when working with pandas, JustPy can automate the process and there is no need to go into the grid specification details.
 
 As mentioned above, AgGrid provides a default style to the grid when it is created. Let’s change that style. Replace the function `grid_test` in the example above with the following:
 ```python