Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Slight modification of main, styles, and script to automate notebook to HTML #1

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Slight modification of main, styles, and script to automate notebook to HTML #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6a9fe25
Automating HTML rendering, added some styles
Jul 2, 2020
ffa8c88
Sample file
Jul 2, 2020
c04d9d9
Some other scripts
Jul 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,3 +41,12 @@ And open the resulting `index.html` in your browser to see the results.
Here is what I get in my django website:

![](blog_screenshot.png)

## Automating notebook execution and rendering

Inside a docker container of the jupyter/datascience-notebook image, run the container and run bash.

* Mount the root directory of the repository onto /home/jovian/work before launching (docker run -v `pwd`:/home/jovyan/work/ -d -p 8888:8888 jupyter/datascience-notebook)
* Execute bash inside the container (docker exec -it [containerId] bash)
* Run launchAndRender.sh [notebookName]. The notebook will be expected atthe "notebooks" folder, and should be [notebookName].ipynb
* A [notebookName].html file will be output
30 changes: 30 additions & 0 deletions css/notebook.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -559,3 +559,33 @@ div.output_javascript:empty {
.th {
text-center: left;
}


.dataframe tbody tr {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

interesting, I look forward to see the new style.

text-align: right;
vertical-align: middle;
padding: 0.5em 0.5em;
line-height: normal;
white-space: normal;
max-width: none;
border: none;
}

.dataframe tr:nth-child(odd) td {
background-color: #f5f5f5;
/* font-weight: bold; */
}

.dataframe th {
text-align: right;
vertical-align: middle;
padding: 0.5em 0.5em;
line-height: normal;
white-space: normal;
max-width: none;
border: none;
}

.dataframe table {
border: none;
}
33 changes: 33 additions & 0 deletions exportToBlogpost.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
#!/usr/bin/bash
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Isn't this specific to your workflow? if yes, could you remove this file?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops, you are right.


#run nbconvert on a notebook, copy to the templates folter, create a new template and render.

#First argument: File name of the notebook to work on: e.g., if the notebook is analysis.ipynb, argument is analysis.
#Second argument: Output directory.
#Third argument: title of the post
TITLE=$3
OUTPUT_DIR=$2
POST_DATE=`date +'%Y'-%m-%d`
cd notebooks/
echo "Converting"
jupyter nbconvert --to markdown $1.ipynb

cd ..
echo "Appending to base post"
cp ./base_post.md $OUTPUT_DIR/$POST_DATE-$1.md

echo "Copying images"
mkdir $OUTPUT_DIR/images/
cat ./notebooks/$1.md | tee -a $OUTPUT_DIR/$POST_DATE-$1.md
cp ./notebooks/$1_files/* $OUTPUT_DIR/images/
echo "Replacing $1"

sed -ri "s/__TITLE__/$TITLE/g" $OUTPUT_DIR/$POST_DATE-$1.md
sed -ri "s/__DATE__/$POST_DATE/g" $OUTPUT_DIR/$POST_DATE-$1.md
sed -ri "s/$1_files/\/assets\/images\//g" $OUTPUT_DIR/$POST_DATE-$1.md

#cd ..

#sed -r "s/FNAME/'$1.html'/g" ./templates/main.html > ./templates/main_$1.html

#python render.py main_$1.html output_$1.html
50 changes: 25 additions & 25 deletions index.html
View file
Open in desktop

Large diffs are not rendered by default.

14 changes: 14 additions & 0 deletions launchAndRender.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
#!/usr/bin/bash

#run nbconvert on a notebook, copy to the templates folter, create a new template and render.

#First argument: File name of the notebook to work on: e.g., if the notebook is analysis.ipynb, argument is analysis.

cd notebooks/
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a good idea, but I think that it would be better to write this code in python instead of in a shell script.

I think that a good interface could be:

python  render.py  base.html  my_nb_1.ipynb  my_nb_2.ipynb ...
  • The user could provide any number of notebooks to insert.
  • In my_output.html, we would use jinja2 tags to specify where each notebook should be inserted, based on the name the notebook
  • The script would run jupyter nbconvert (maybe there is a python API, or with os.system or something)
  • Finally, the ouput file would be rendered

One could also think about the options. For example, the name of the output file (index.html by default)

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll use this interface, then. I'd have to research jinja2 a bit to see what templating options are available.

jupyter nbconvert --template basic $1.ipynb
cp $1.html ../templates/
cd ..

sed -r "s/FNAME/'$1.html'/g" ./templates/main.html > ./templates/main_$1.html

python render.py main_$1.html output_$1.html
184 changes: 184 additions & 0 deletions notebooks/simple-chart.html
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 3 additions & 2 deletions render.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import os
import sys

from jinja2 import Environment, FileSystemLoader

Expand All @@ -15,8 +16,8 @@
loader = FileSystemLoader('templates'),
)

input_file = 'main.html'
output_file = 'index.html'
input_file = sys.argv[1]
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The current behaviour is not preserved. Could you please do the following?

  • update the README.md file to give the proper way to run render.py
  • document the new arguments in render.py
  • deal with incorrect numbers of arguments (exit and print help in this case)

output_file = sys.argv[2]

# reading the template
template = env.get_template(input_file)
Expand Down
22 changes: 1 addition & 21 deletions templates/main.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,27 +13,7 @@

<body>
<div class="container">
<h1>Integrating a Jupyter Notebook in a Web Page</h1>
<p>Some text.</p>

<h2>Maths</h2>

<p>Here is a simple inline equation: $E=mc^2$.</p>

<p>And for longer equations, use the standard math mode:</p>

$$
\mathcal{L}=\bar{\psi}\left(i\gamma^{\mu}\partial_ {\mu}-m\right)\psi
$$

<h2>A code section</h2>
<p>Here is some code:</p>
<pre>
import foo
print foo.bar()
</pre>

{% include 'overfitting.html' %}
{% include FNAME %}
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If used out of your scripts, FNAME is undefined. So the current behavior is not preserved. Could you use jinja2 in python instead of sed in a shell script to replace FNAME?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right: Here, I was using FNAME as a placeholder and replacing it in the bash Script: The "template/main.html" file was copied into "template/[name-of-the-notebook].html" file, and replaced FNAME with the name of the html created in the previous step.


</div>
<!-- mathjax -->
Expand Down