Pelican-plotly with Ipython

[datavistics]

How can I use this with the pelican ipython notebook plugin?
https://github.com/danielfrg/pelican-ipynb

Thanks!

[ran404]

Hi, I’m not sure if the plotly plugin can be used in conjunction with the ipython notebook plugin. I wrote the plotly plugin purely for the purpose of embedding standalone plotly figures (json file) into an existing blog post. The ipython notebook plugin is meant to take over the entire rendering of a notebook I think. Have you reached out to the author of that plugin? Cheers Ran

…

On 5 Sep 2017, at 00:07, Derek ***@***.***> wrote: How can I use this with the pelican ipython notebook plugin? https://github.com/danielfrg/pelican-ipynb <https://github.com/danielfrg/pelican-ipynb> Thanks! — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#1>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACh60XJuYNJ-KFH-FzDHp5tY1CUDYVdeks5sfILHgaJpZM4PMSzW>.

[datavistics]

Thanks, will do! Btw, your work is amazing. #goalz

[datavistics]

@ran404 I know it isnt exactly your issue but Ive been looking pretty hard and cant find and answer.

Do you have any advice on getting plotly to work with jupyter and pelican?

Here is what I have tried:
Reddit /r/learnpython post
Messaging the pelican-ipynb author

Adding plotly-latest.min.js to the tags of the html output

I have a functional notebook, and verified that if I run the notebook I can get plotly out when I export to html.

Thanks so much,
Derek

[ran404]

hey @datavistics, it's interesting that you asked, because many months ago I've come across this exact problem, and i did actually come up with a solution! Far from perfect, it does seem to work: you can see an example on one of my blog pages:
http://www.arraystream.com/blog/fft-based-option-pricing.html

I really hope I could devote some time writing down my solution, but the basic idea was that since it was too difficult to render the jupyter notebook with all the correct css and javascript on the same html page, i've cheated by simply embedding the html inside an iframe. The rough steps were:

1. jupyter nbconvert <your-notebook>.ipynb. This create a standalone html with all the css and javascript in-place. Save this file in content/notebooks folder.

2. Add the following lines to your theme's templates/article.html, the exact file depend on the theme you use but most should follow a similar filename convention. I've added the extra code just after the {{ article.content }} macro. The code checks for existence of the "notebook" variable definition in the blog post. If it exists, it creates an iframe and embeds the notebook html, along with some javascript code that handles re-rendering when the browser window is resized.

            <!-- #####End post metadata-->
            <!-- #####Begin post contents-->
            <div class="post-body">
                {{ article.content }}
                {% if article.notebook %}
                <iframe id="jupyter-notebook-iframe" class="render-viewer" src="{{ SITEURL }}/{{ NOTEBOOKS_DIR }}/{{ article.notebook }}"></iframe>
                <script type="text/javascript">
                    var jupyterIframe = document.getElementById('jupyter-notebook-iframe');

                    var resizeId;
                    $(window).resize(function () {
                        clearTimeout(resizeId);
                        resizeId = setTimeout(function () {
                            doneResizing();
                        }, 500);
                    });

                    function doneResizing() {
                        jupyterIframe.style.height = jupyterIframe.contentDocument.body.scrollHeight + 'px';
                    }

                    window.onload = doneResizing;
                </script>
                {% endif %}
            </div>
            <!-- #####End post contents-->

3. You need to specify some extra config in pelican.conf, otherwise pelican will get very confused about the existence of html files inside the notebooks folder.

# Ignore html files in notebooks directory, or they'll get picked up by pelican
PAGE_EXCLUDES = ['notebooks']
ARTICLE_EXCLUDES = ['notebooks']

NOTEBOOKS_DIR = 'notebooks'
STATIC_PATHS = ['images', 'plots', NOTEBOOKS_DIR, 'extra/robots.txt', 'extra/favicon.ico']

4. Finally, you create a blog post markdown file like the following. The Notebook variable is a new concept we've added.

Title: FFTOptionLib
Slug: fft-based-option-pricing
Summary: FFT-based Option Pricing Methods in Python
Category: blog
Authors: Yu Zheng, Ran Fan
Date: 2017-05-08
Notebook: fftoptionlib-blog.html

I hope this makes some sense, it's been too long and I may have forgotten some details. All I can say is that there is definitely improvement that can be made in the jupyter side to make this sort of thing easier! I've wasted a lot of time on this very issue and to be honest I wish all of this could be achieved with a wordpress plugin, rather than messing around with static site generators and writing custom code!

[datavistics]

Thank you x1000. Seriously, you have helped me so much.

If anyone tries this:
I found that you have to view the code in localhost or the production url to work with the iFrame. Also replace the underscores with hyphens in your file names.

@ran404 I did have one last issue. The code to do the resizing isnt working here is what it looks like:

Im using this the flex theme.

I added the code you had underneath the {{ article.content }} and changed the div to "post-body"
You can see exactly what the code I added in this gist.

[datavistics]

I think it has to do with one of 2 things more than likely the first:

1. I get an error message: WARNING:root:Unable to find '/Notebooks/custom.css' or variations.
2. The div in the theme was originally just <div> and I changed it to <div class="post-body"> like in your example.

Any ideas @ran404 ?

Thanks again so much!

Update: I noticed your notebook/ipynb.html file had this

<style type="text/css">
--
  | /*
  | Placeholder for custom user CSS
  |  
  | mainly to be overridden in profile/static/custom/custom.css
  |  
  | This will always be an empty file in IPython
  | */
  | .container { width:95% !important; }
  |  
  | </style>

So I added it to mine and the custom.css error went away. I could change my theme to yours and give that a shot? The real issue seems different than the theme though. Its that the iframe is not resizing.

Im out of ideas :(

[datavistics]

Update 2:

I found out that the jquery module was missing so I imported it! We are almost there, now my issue is that the width is off, do you have any ideas why that is?

[datavistics]

Last update:
I got it working here... Thanks again for all your help!
danielfrg/pelican-jupyter#75 (comment)

[ran404]

That’s great to hear. I’m glad that you’ve made it work! Ran

…

On 12 Sep 2017, at 01:44, Derek ***@***.***> wrote: Last update: I got it working here... Thanks again for all your help! danielfrg/pelican-jupyter#75 (comment) <danielfrg/pelican-jupyter#75 (comment)> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACh60Qj5_wnz6MWe17XGR1mfOaMYJ6Wjks5shdPegaJpZM4PMSzW>.