# my pidgy practices always have me indenting cells.
    # this habit means code will be rendered as code in markdown.
    # https://nbviewer.org/github/deathbeds/deathbeds.github.io/blob/master/deathbeds/2018-08-03-A-case-for-indented-code.ipynb
    
    # this is a presentation about pidgy so we start by loading the extension.
    # there is a pidgy kernel for the hardcore. 
    # in that case we recommend the hybrid `.md.ipynb` extension.
    
    if LITE := (__import__("sys").platform == "emscripten"): # compatability for jupyterlite
        %pip install pandas pidgy matplotlib ipywidgets toolz
        
    # activate pidgy
    %reload_ext pidgy
    from toolz.curried import *

<figure>
<figcaption>

the REPL overlayed with a [literate computing] workflow of tangle and weave.

</figcaption>

{% set repl %}
    input[markdown]--tangle\nread-->IPython
    IPython--eval/template-->jinja
    jinja--weave\nprint-->output[markdown]
    output[markdown]-.loop-.->input
    html ---> input; css ---> input; javascript ---> input
    julia ---> magics; r---> magics; fortran ---> magics; magics ---> IPython
{% endset %}
```mermaid
flowchart LR
{% for i, line in enumerate(repl.splitlines()) %}
{% if i > extra.value %}%%{% endif %}{{line}}
{% endfor %}
```
<figcaption>mermaid graph syntax uses extended markdown syntax provided by <code>jupyterlab-markup</code></figcaption>
</figure>

        display(extra := IntSlider(6, min=1, max=6, description="show more languages")) # 6 lines in the graph

`pidgy` is interested in exploring the interfaces of languages in computational essays. each language provides extra syntax for telling your story. with markdown we can include html, css, and javascript; code blocks can include more languages like mermaid. [IPython is our polyglot glue language][polyglot notebook]. 

[literate computing]: #
[polyglot notebook]: https://gist.github.com/fperez/5b49246af4e340c37549265a90894ce6 "fperez's polyglot juypyter demo"

[fperez lc]: https://web.archive.org/web/20220510083647/http://blog.fperez.org/2013/04/literate-computing-and-computational.html

%%tangle
we use the `%%tangle` magic interactively translate the document into code.

some `pidgy` features are shown below like:
    
* markdown docstrings

        def my_function():
functions with markdown docstrings
        
            ...
        ...
        
* defining blocks of markdown as variables

        my_url =\
https://api.github.com

<figure>
<figcaption>

a mermaid homage to the dual usage of the WEB file format being translated to a document and programming language.

</figcaption> 
    
```mermaid
flowchart LR
    WEB--WEAVE-->TEX--TeX-->DVI
    WEB--TANGLE-->PAS--PASCAL-->REL
```
</figure>

<figure markdown>
<figcaption>knuth's rational for choosing Pascal; the same motivation applies to python.</figcaption>

> I chose PASCAL as the programming language because it has
received such widespread support from educational  in-
stitutions all over the world; it is not my favorite language for system programming, but it has become a
"second language" for so many programmers that it
provides an exceptionally effective medium of communication.
</figure>

## reactive `jinja2` templates

<label for="deck">open</label>
<button id="deck" data-commandlinker-command="deck:toggle"><code>jupyterlab-deck</code></button>

`pidgy` relies on a `midgy` to tangle markdown to code, it does not doing any work on displaying the input markdown. including the templating language is the innovation of `pidgy` that inlines live computation.


`pidgy` templates are asynchronous reactive display objects that place live computation directly into the narrative.

### worrydream's cookies demo[^inventing]

<!---![](https://media3.giphy.com/media/BsUORZkF3gBqg/giphy.gif "cookie monster happy as fuck eating cookies")--->

<blockquote cite="https://worrydream.com/Tangle/">

[Tangle] is a JavaScript library for creating reactive documents. Your readers can interactively explore possibilities, play with parameters, and see the document update immediately. Tangle is super-simple and easy to learn.

</blockquote>

<figure>
<figcaption>

the source code for the first [TangleJs][tangle] demo

</figcaption>

```html
When you eat <span data-var="cookies" class="TKAdjustableNumber"> cookies</span>,
you consume <span data-var="calories"> calories</span>. 
```

```javascript
var tangle = new Tangle(document, {
    initialize: function () { this.cookies = 3; },
    update:     function () { this.calories = this.cookies * 50; }
});

```
</figure>

[tangle]: http://worrydream.com/Tangle/
[inventing on principle]: https://www.youtube.com/watch?v=PUv66718DII
[^inventing]: many folks working on computational interfaces are inspired by Bret Victor's [inventing on principle]

{% set calories = 50 %}<!--- we can shield variables from the global scope -->
When you eat {{cookies.value}} cookies,
you consume {{cookies.value * calories}} calories. 

<div hidden><!--indented code is python-->

        display(cookies := IntSlider(3, description="🍪"))
</div>

{{"🍪" * cookies.value}}


<figure>
<figcaption>

`pidgy` source code using html, markdown, jinja, and ipywidgets to create interactions

</figcaption>

```markdown
{% raw %}
{% set calories = 50 %}<!--- we can shield variables from the global scope -->
When you eat {{cookies.value}} cookies,
you consume {{cookies.value * calories}} calories. 

<div hidden><!--indented code is python-->

        display(cookies := IntSlider(3, description="🍪"))
</div>

{{"🍪" * cookies.value}}
{% endraw %}
```

</figure>

### live data in your document

<details markdown>
<summary>imports for the pandas matplotlib demo</summary>

    import pandas
    from pidgy import get_cell_id
    %matplotlib agg
    
</details>

<details markdown open>
<summary>supporting methods for the interactive demo</summary>`

    @functools.lru_cache
    def get_gist(x, max=100):
[gather gist from the github api][gist].
        
        return pandas.read_json(F"https://api.github.com/users/{x}/gists?per_page={max}")
    
[gist]: https://docs.github.com/en/rest/gists?apiVersion=2022-11-28

    def tidy_gist(x):
explode the gist repsonse into a dataframe of gist files
        
        gists = get_gist(x).set_index("id")
        return gists.files.apply(compose_left(dict.values, list)).explode().apply(pandas.Series).join(gists)
    
</details>

#### an application in a cell.

{% set gists = tidy_gist(_github_user.value) %}
{% set lang = gists.language.dropna().value_counts() %}

we've found information on {{gists.index.unique().shape[0]}} github gists, and {{len(gists)}} files, for @{{_github_user.value}}.
in this collection, there are {{len(lang)}} different languages included. their most common language is {{lang.index[0]}}.

{{gists.sample(2)}}

    display(
        _github_user := Text("tonyfast"), button := Button(description="submit"))
    button.on_click(lambda x, id=get_cell_id(): print(id) or shell.weave.displays[id].update())
{{lang.to_frame("ct").T}}

### et `voila`

{% if LITE %}
> 😞 unforntunately, this part of the demo is not available on jupyter lite.
{% endif %}

<button data-commandlinker-command="notebook:render-with-voila" {% if  LITE %}disabled{% endif %}>et <code>voila</code></button>

## wrap up

* this presentation had a number of incidental demos.
    * jupyterlab-deck
    * jupyterlab-markup
    * voila
    * mermaid
    * midgy
    

* we have on and off cells now that all of the sources are markdown 
* the template syntax is a powerful way to include python variables inline. the traditional notebook format only allows for block level literate programs.
* since literate programs are pidgin languages we can't expect them to be formalized. there are a lot of inconsistencies with the languages combined.
jinja2 template implementations vary. markdown renderers implementation vary. python keeps adding language features. 

{% set sz = 3 %}
{% set h = 60 %}
<form style="font-size: {{sz}}rem; line-height: {{h}}%;">
<label for="rara">🎗🎗🎗🎗🎗🎗🎗🎗</label><br/><button id="rara" data-commandlinker-command="runmenu:restart-and-run-all" style="font-size: {{sz}}rem; line-height: {{h}}%;">restart and run all</button><br/><label for="rara">or it didn't happen</label>
</form>