Merge branch 'thebelab' into 'master'

Add live code editing using thebelab

See merge request !47

execute.py

@@ -19,6 +19,7 @@ shutil.rmtree(target, ignore_errors=True)
 target.mkdir(exist_ok=True)
 shutil.copytree(src / 'figures', target / 'figures')
 shutil.copytree(src / 'scripts', target / 'scripts')
+shutil.copytree(src / 'styles', target / 'styles')
 shutil.copytree(src / 'x3d', target / 'x3d')
 
 output_extractor = ExtractOutputPreprocessor()
@@ -34,7 +35,7 @@ exporter = nbconvert.MarkdownExporter(
                 nbconvert.preprocessors.ExecutePreprocessor,
                 output_extractor,
             ],
-            exclude_input=True,
+            exclude_input=False,
             template_file='extra_markdown.tpl',
         ),
         NbConvertBase=dict(

extra_markdown.tpl

 {% extends 'markdown.tpl' %}
 
-{%- block data_other -%}
-{%- for type in output.data | filter_data_type -%}
-{%- if type == 'application/vnd.plotly.v1+json' -%}
-{%- set fname = output.metadata.filenames['application/vnd.plotly.v1+json'] -%}
-{%- set plotly_url = fname | path2url -%}
-{%- set div_id = fname.split('/') | last -%}
-<div id="{{div_id}}"><img ></img></div>
+{% block input %}
+{% if cell.metadata.attributes and cell.metadata.attributes.initialize %}
+<div class="thebelab-init-code">
+  <pre class="thebelab-code" data-executable="true" data-language="python">
+    {{cell.source}}
+  </pre>
+</div>
+{% endif %}
+{% endblock %}
 
-<script>
-window.addEventListener('load', function() {
-  Plotly.d3.json('../{{plotly_url}}', function(error, fig) {
-    Plotly.plot('{{div_id}}', fig.data, fig.layout).then(
-      function(value) {Plotly.relayout('{{div_id}}', {height: ' '})}
-    );
-  });
-});
-</script>
-{%- endif -%}
-{%- endfor -%}
-{%- endblock -%}
+{% block display_data %}
+{% if cell.metadata.attributes and cell.metadata.attributes.editable == 'false' and not cell.metadata.attributes.initialize %}
+{{ super() }}
+{% elif cell.metadata.attributes and cell.metadata.attributes.initialize %}
+{% if output.data['text/html'] %}
+<div>
+  {{ output.data['text/html'] }}
+</div>
+{% endif %}
+{% else %}
+<pre class="thebelab-code" data-executable="true" data-language="python">{{cell.source}}</pre>
+<div class="thebelab-output" data-output="true" markdown="1">
+{{ super() }}
+</div>
+{% endif %}
+{% endblock %}
 
 {% block error %}
 {% endblock error %}

mkdocs.yml

@@ -46,13 +46,19 @@ markdown_extensions:
       permalink: True
   - admonition
   - pymdownx.details
+  - pymdownx.extra
   - abbr
   - footnotes
   - meta
 
+extra_css:
+  - 'https://use.fontawesome.com/releases/v5.8.1/css/all.css'
+  - 'styles/thebelab.css'
+
 extra_javascript:
-  - 'https://cdn.plot.ly/plotly-latest.min.js'
   - 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.3/MathJax.js?config=TeX-AMS_HTML'
+  - 'scripts/thebelab-custom.js'
   - 'scripts/mathjaxhelper.js'
+  - 'scripts/thebelabhelper.js'
   - 'scripts/x3dom.js'
 copyright: "Copyright © 2017-2019 Delft University of Technology, CC-BY-SA 4.0."

src/11_nearly_free_electron_model.md

-```python
+```{python initialize=true}
 import numpy as np
 import plotly.offline as py
 import plotly.graph_objs as go

src/12_band_structures_in_higher_dimensions.md

-```python
+```{python initialize=true}
 import numpy as np
 import plotly.offline as py
 import plotly.graph_objs as go
 
 pi = np.pi
+
+py.init_notebook_mode(connected=True)
 ```
 
 # Tight binding and nearly free electrons

src/13_semiconductors.md

-```python
+```{python initialize=true}
  
 from matplotlib import pyplot
 

src/1_einstein_model.md

@@ -12,7 +12,7 @@ jupyter:
     name: python3
 ---
 
-```python
+```{python initialize=true}
 import pandas
 
 from matplotlib import pyplot
@@ -26,6 +26,8 @@ import plotly.graph_objs as go
 from common import draw_classic_axes, configure_plotting
 
 configure_plotting()
+
+py.init_notebook_mode(connected=True)
 ```
 
 _(based on chapter 2.1 of the book)_
@@ -44,6 +46,7 @@ _(based on chapter 2.1 of the book)_
 Let us look at the heat capacities of different chemical elements[^1]:
 
 ```python
+
 elements = pandas.read_json('elements.json')
 elements.full_name = elements.full_name.str.capitalize()
 hovertext = elements.T.apply(

src/2_debye_model.md

@@ -12,7 +12,7 @@ jupyter:
     name: python3
 ---
 
-```python
+```{python initialize=true}
 from matplotlib import pyplot
 
 import numpy as np

src/3_drude_model.md

-```python
+```{python initialize=true}
 from matplotlib import pyplot
 
 import numpy as np

src/4_sommerfeld_model.md

-```python
+```{python initialize=true}
 from matplotlib import pyplot
 
 import numpy as np

src/5_atoms_and_lcao.md

-```python
+```{python initialize=true}
 from matplotlib import pyplot
 
 import numpy as np

src/6_bonds_and_spectra.md

-```python
+```{python initialize=true}
 from matplotlib import pyplot
 
 import numpy as np

src/7_tight_binding.md

-```python
+```{python initialize=true}
 import matplotlib
 from matplotlib import pyplot
 

src/8_many_atoms.md

-```python
+```{python initialize=true}
 import matplotlib
 from matplotlib import pyplot
 

src/9_crystal_structure.md

@@ -12,7 +12,7 @@ jupyter:
     name: python3
 ---
 
-```python
+```{python initialize=true}
 import matplotlib.pyplot as plt
 
 import numpy as np
@@ -24,6 +24,8 @@ import plotly.offline as py
 import plotly.graph_objs as go
 
 configure_plotting()
+
+py.init_notebook_mode(connected=True)
 ```
 
 # Lecture 9 – Crystal structure

src/lecture_8.md

-```python
+```{python initialize=true}
 from matplotlib import pyplot
 
 import numpy as np

src/scripts/thebelabhelper.js

+function initThebelab() {
+    let activateButton = document.getElementById("thebelab-activate-button");
+    if (activateButton.classList.contains('thebelab-active')) {
+        return;
+    }
+    thebelab.bootstrap();
+    // Run all thebelab cells marked as initialization code
+    setTimeout(function() {
+        let initDivs = document.getElementsByClassName("thebelab-init-code");
+        for(var i = 0; i < initDivs.length; i++) {
+            // div.thebelab-init-code > div.thebelab-cell > button.thebelab-run-button
+            let runButton = initDivs[i].firstElementChild.childNodes[1]
+            runButton.click();
+        }
+    }, 500)
+    activateButton.classList.add('thebelab-active')
+}
\ No newline at end of file

src/styles/thebelab.css

+.thebelab-cell .thebelab-input pre {
+    z-index: 0;
+}
+
+.thebelab-code, .thebelab-init-code {
+    display: none;
+}
+
+.thebelab-button {
+    position: relative;
+    display: inline-block;
+    box-sizing: border-box;
+    border: none;
+    border-radius: .1rem;
+    padding: 0 2rem;
+    margin: .5rem .1rem;
+    min-width: 64px;
+    height: 1.6rem;
+    vertical-align: middle;
+    text-align: center;
+    font-size: 0.8rem;
+    color: rgba(0, 0, 0, 0.8);
+    background-color: rgba(0, 0, 0, 0.07);
+    overflow: hidden;
+    outline: none;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.thebelab-button:hover {
+    background-color: rgba(0, 0, 0, 0.12);
+}
+
+.thebelab-button:active {
+    background-color: rgba(0, 0, 0, 0.15);
+    color: rgba(0, 0, 0, 1)
+}
+
+#thebelab-activate-button {
+    font-size: 1rem;
+    margin-left: 0.4rem;
+}
+
+#thebelab-activate-button.thebelab-active {
+    color: rgb(83, 109, 254);
+}
+
+.thebelab-button.thebelab-restart-button {
+    display: none;
+}

theme/main.html

@@ -17,3 +17,42 @@
 </script>
 <!-- End Piwik Code -->
 {% endblock %}
+
+{% block scripts %}
+<!-- ThebeLab config -->
+<!-- IMPORTANT: Everytime a python file is changed, ref needs to be updated to the latest commit! -->
+<script type="text/x-thebe-config">
+  {
+    predefinedOutput: true,
+    binderOptions: {
+      repoProvider: "git",
+      repo: "https://gitlab.kwant-project.org/solidstate/lectures",
+      ref: "e6c970126f4e819e4a3eb717a86ba9fb523d20bf",
+    },
+    requestKernel: true,
+    kernelOptions: {
+      name: "python3",
+      path: "src"
+    },
+  }
+</script>
+<!-- End ThebeLab config -->
+{{ super() }}
+{% endblock %}
+
+{% block libs %}
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js" type="text/javascript"></script>
+{{ super() }}
+{% endblock %}
+
+{% block content %}
+{% if 'thebelab-code' in super() %}
+<a title="Make live" id="thebelab-activate-button" class="md-icon md-content__icon" onclick="initThebelab()">
+  <i class="fas fa-magic"></i>
+</a>
+{{ super() }}
+{% else %}
+{{ super() }}
+{% endif %}
+{% endblock %}
\ No newline at end of file