Closed ocefpaf closed 7 years ago
@lukecampbell mentioned in https://github.com/ioos/notebooks_demos/issues/3#issuecomment-242090797:
I still need to apply the same CSS from ioos.us to here at some point. Some references:
- https://github.com/ioos/catalog-harvest-registry/blob/master/app/imports/ui/layouts/master-layout.less
- https://github.com/ioos/catalog-harvest-registry/blob/master/app/imports/ui/pages/banner.less That's the overall layout stylesheet and the banner stylesheet for the blue navbar featured on the modern ioos.us sites.
I checked both master-layout.less and banner.less but it is hard to make sense of the styling there in the light of the notebook conversion. The former is mostly fonts definition and the latter seems to be a navigation bar that I am not sure we should have in the GitHub pages.
So I start a new style.less from based on nbviewer
's style and modified it to look like an IOOS page. Here is what I have so far (left my template and to the right the original one):
Note that we cannot do the cell/margins configuration in the markdown and that is why the In [1]
prompt is on top of the code cell instead of to the left. There are more differences regarding to that limitation when the users changes the Window size but I would not worry about that for now. Also, we are going towards Jekyll+Markdown, so there is not much we can do unless we want to change that.
cc: @jbosch-noaa and @lukecampbell
The placement of the In [1] isn't that big of a deal. I think overall it looks pretty good.
Is this skeleton going to be a template for each separate notebook? Are you also designing a parent blog page where these notebook pages can be linked? ... or is this the blog and you are just showing what a sample blog post would look like? I ask this because I hope to have more than just notebook examples. Eventually Matlab, R, ArcGIS examples as well. I also want to be able to allow for folks to search for topics.
The placement of the In [1] isn't that big of a deal. I think overall it looks pretty good.
Still my OCD made me spend the whole day yesterday trying to get it right.
BTW I am still wondering if we should leave the numbered cells and if we should number the code lines. Adding both will make the notebook noisier but at the same time it would allow for easier communication. Someone can, for example, send the notebook to a collaborator with the message: "check cell [2] line 4 out
".
Is this skeleton going to be a template for each separate notebook?
It is a single template that can be applied to all the notebooks. It will become clearer as soon as I commit the code. (Should be ready later today.)
Are you also designing a parent blog page where these notebook pages can be linked? I ask this because I hope to have more than just notebook examples.
Not yet. That part is "easier" with jekyll
, so I am focusing on getting the notebook conversion right first.
Eventually Matlab, R, ArcGIS examples as well. I also want to be able to allow for folks to search for topics.
As long as they are notebooks the converter template I created should take care of that. The template gets the language, for the syntax highlight, from the notebook itself, nothing is hard-coded to Python
. We might need to tweak to add more features from different notebook styles though.
I also want to be able to allow for folks to search for topics.
I will take a look into search bars for Jekyll.
Being able to reference "cell [2] line 4 output" might be good. If it looks to messy we can always scrap it.
Pushed a "live" page to my branch for better view: https://ocefpaf.github.io/notebooks_demos/
Feedback is welcome.
This is done. The IOOS jekyll theme can render Jupyter notebooks and Markdown.
Ping @lukecampbell