Skip to content

Commit 315838c

Browse files
mmoelle1mmoelle1
committed
Updated CSS style
1 parent aca806b commit 315838c

File tree

7 files changed

+408
-16
lines changed

7 files changed

+408
-16
lines changed

‎.github/workflows/docs.yml‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -18,22 +18,17 @@ jobs:
1818
- name: install dependencies
1919
run: |
2020
pip install -r ./docs/requirements.txt
21-
sudo apt-get install -y wkhtmltopdf
2221
2322
- name: create slides
2423
run: |
25-
jupyter nbconvert --to slides --embed-images --template reveal --output-dir docs/source/_static "notebooks/*.ipynb"
26-
27-
- name: Convert notebooks to PDF
28-
run: |
29-
for html_file in docs/source/_static/*.html; do
30-
# Create the PDF file name from the HTML file name
31-
pdf_file="${html_file%.html}.pdf"
32-
33-
# Convert HTML to PDF using wkhtmltopdf (or replace with google-chrome for headless conversion)
34-
wkhtmltopdf --orientation landscape "$html_file" "$pdf_file"
35-
36-
done
24+
jupyter nbconvert --to slides --embed-images --template custom_reveal --TemplateExporter.extra_template_basedirs=./docs/ --output-dir docs/source/_static "notebooks/*.ipynb"
25+
26+
- name: convert slides to pdf
27+
uses: fifsky/html-to-pdf-action@master
28+
with:
29+
htmlFile: ./docs/source/_static/lecture1.slides.html
30+
outputFile: ./docs/source/_static/lecture1.slides.pdf
31+
pdfOptions: '{"format": "A4", "landscape": true, "printBackground": true, "margin": {"top": "10mm", "left": "10mm", "right": "10mm", "bottom": "10mm"}}'
3732

3833
- name: convert md to rst # md reference is not recognized with md_include
3934
uses: docker://pandoc/core:latest

‎docs/custom_reveal/base.html.j2‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{%- extends 'lab/base.html.j2' -%}
2+
{% from 'cellslidedata.j2' import cellslidedata %}
3+
4+
{%- block any_cell scoped -%}
5+
{%- if cell.metadata.get('slide_start', False) -%}
6+
<section {{ cellslidedata(cell) }}>
7+
{%- endif -%}
8+
{%- if cell.metadata.get('subslide_start', False) -%}
9+
<section {{ cellslidedata(cell) }}>
10+
{%- endif -%}
11+
{%- if cell.metadata.get('fragment_start', False) -%}
12+
<div class="fragment" {{ cellslidedata(cell) }}>
13+
{%- endif -%}
14+
15+
{%- if cell.metadata.slide_type == 'notes' -%}
16+
<aside class="notes">
17+
{{ super() }}
18+
</aside>
19+
{%- elif cell.metadata.slide_type == 'skip' -%}
20+
{%- else -%}
21+
{{ super() }}
22+
{%- endif -%}
23+
24+
{%- if cell.metadata.get('fragment_end', False) -%}
25+
</div>
26+
{%- endif -%}
27+
{%- if cell.metadata.get('subslide_end', False) -%}
28+
</section>
29+
{%- endif -%}
30+
{%- if cell.metadata.get('slide_end', False) -%}
31+
</section>
32+
{%- endif -%}
33+
{%- endblock any_cell -%}

‎docs/custom_reveal/cellslidedata.j2‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{%- macro cellslidedata(cell) -%}
2+
{% if cell.metadata.slideshow | length > 0 -%}
3+
{% if cell.metadata.slideshow.data | length > 0 -%}
4+
{% for key in (cell.metadata.slideshow.data) -%}
5+
{{- (' data_' ~ key)|replace("_", "-") -}}="{{- cell.metadata.slideshow.data[key]|escape_html -}}"
6+
{%- endfor -%}
7+
{%- endif %}
8+
{%- endif %}
9+
{%- endmacro %}

‎docs/custom_reveal/conf.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"base_template": "lab",
3+
"mimetypes": {
4+
"text/html": true
5+
},
6+
"preprocessors": {
7+
"100-pygments": {
8+
"type": "nbconvert.preprocessors.CSSHTMLHeaderPreprocessor",
9+
"enabled": true
10+
},
11+
"500-reveal": {
12+
"type": "nbconvert.exporters.slides._RevealMetadataPreprocessor",
13+
"enabled": true
14+
}
15+
}
16+
}

‎docs/custom_reveal/index.html.j2‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
{%- extends 'base.html.j2' -%}
2+
{% from 'mathjax.html.j2' import mathjax %}
3+
{% from 'jupyter_widgets.html.j2' import jupyter_widgets %}
4+
5+
{% set reveal_url_prefix = resources.reveal.url_prefix | default('https://unpkg.com/reveal.js@4.0.2', true) %}
6+
{% set reveal_theme = resources.reveal.theme | default('white', true) %}
7+
{% set reveal_transition = resources.reveal.transition | default('slide', true) %}
8+
{% set reveal_number = resources.reveal.number | default('', true) %}
9+
{% set reveal_width = resources.reveal.width | default('960', true) %}
10+
{% set reveal_height = resources.reveal.height | default('700', true) %}
11+
{% set reveal_scroll = resources.reveal.scroll | default(false, true) | json_dumps %}
12+
13+
{%- block header -%}
14+
<!DOCTYPE html>
15+
<html lang="{{ resources.language_code }}">
16+
<head>
17+
18+
{%- block html_head -%}
19+
<meta charset="utf-8" />
20+
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
21+
22+
<meta name="apple-mobile-web-app-capable" content="yes" />
23+
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
24+
25+
{% set nb_title = nb.metadata.get('title', resources['metadata']['name']) | escape_html_keep_quotes %}
26+
<title>{{nb_title}} slides</title>
27+
28+
{%- block html_head_js -%}
29+
{%- block html_head_js_jquery -%}
30+
<script src="{{ resources.jquery_url }}"></script>
31+
{%- endblock html_head_js_jquery -%}
32+
{%- block html_head_js_requirejs -%}
33+
<script src="{{ resources.require_js_url }}"></script>
34+
{%- endblock html_head_js_requirejs -%}
35+
{%- block html_head_js_mermaidjs -%}
36+
<script type="module">
37+
import mermaid from '{{ resources.mermaid_js_url }}';
38+
mermaid.initialize({ startOnLoad: true });
39+
</script>
40+
{%- endblock html_head_js_mermaidjs -%}
41+
{%- endblock html_head_js -%}
42+
43+
{% block jupyter_widgets %}
44+
{%- if "widgets" in nb.metadata -%}
45+
{{ jupyter_widgets(resources.jupyter_widgets_base_url, resources.html_manager_semver_range, resources.widget_renderer_url) }}
46+
{%- endif -%}
47+
{% endblock jupyter_widgets %}
48+
49+
<!-- General and theme style sheets -->
50+
<link rel="stylesheet" href="{{ reveal_url_prefix }}/dist/reveal.css">
51+
52+
<!-- If the query includes 'print-pdf', include the PDF print sheet -->
53+
<script>
54+
if( window.location.search.match( /print-pdf/gi ) ) {
55+
var link = document.createElement( 'link' );
56+
link.rel = 'stylesheet';
57+
link.type = 'text/css';
58+
document.getElementsByTagName( 'head' )[0].appendChild( link );
59+
}
60+
</script>
61+
62+
{% for css in resources.inlining.css -%}
63+
<style type="text/css">
64+
{{ css }}
65+
</style>
66+
{% endfor %}
67+
68+
{% block notebook_css %}
69+
{{ resources.include_css("static/index.css") }}
70+
{% if resources.theme == 'dark' %}
71+
{{ resources.include_css("static/theme-dark.css") }}
72+
{% else %}
73+
{{ resources.include_css("static/theme-light.css") }}
74+
{% endif %}
75+
<style type="text/css">
76+
a.anchor-link {
77+
display: none;
78+
}
79+
.highlight {
80+
margin: 0.4em;
81+
}
82+
.jp-Notebook {
83+
padding: 0;
84+
}
85+
:root {
86+
--jp-ui-font-size1: 20px; /* instead of 14px */
87+
--jp-content-font-size1: 20px; /* instead of 14px */
88+
--jp-code-font-size: 19px; /* instead of 13px */
89+
--jp-cell-prompt-width: 110px; /* instead of 64px */
90+
}
91+
@media print {
92+
body {
93+
margin: 0;
94+
}
95+
}
96+
</style>
97+
98+
{{ resources.include_css("static/custom_reveal.css") }}
99+
100+
{% endblock notebook_css %}
101+
102+
{%- block html_head_js_mathjax -%}
103+
{{ mathjax(resources.mathjax_url) }}
104+
{%- endblock html_head_js_mathjax -%}
105+
106+
{%- block html_head_css -%}
107+
{%- endblock html_head_css -%}
108+
109+
{%- endblock html_head -%}
110+
111+
<!-- Reveal Theme -->
112+
<link rel="stylesheet" href="{{ reveal_url_prefix }}/dist/theme/{{reveal_theme}}.css" id="theme">
113+
114+
</head>
115+
{% endblock header%}
116+
117+
{%- block body_header -%}
118+
{% if resources.theme == 'dark' %}
119+
<body class="jp-Notebook" data-jp-theme-light="false" data-jp-theme-name="JupyterLab Dark">
120+
{% else %}
121+
<body class="jp-Notebook" data-jp-theme-light="true" data-jp-theme-name="JupyterLab Light">
122+
{% endif %}
123+
<main>
124+
<div class="reveal">
125+
<div class="slides">
126+
{%- endblock body_header -%}
127+
128+
{% block body_footer %}
129+
</div>
130+
</div>
131+
</main>
132+
</body>
133+
{% endblock body_footer %}
134+
135+
{% block footer %}
136+
{{ super() }}
137+
138+
{% block footer_js %}
139+
<script>
140+
require(
141+
{
142+
// it makes sense to wait a little bit when you are loading
143+
// reveal from a cdn in a slow connection environment
144+
waitSeconds: 15
145+
},
146+
[
147+
"{{ reveal_url_prefix }}/dist/reveal.js",
148+
"{{ reveal_url_prefix }}/plugin/notes/notes.js"
149+
],
150+
151+
function(Reveal, RevealNotes){
152+
// Full list of configuration options available here: https://github.com/hakimel/reveal.js#configuration
153+
Reveal.initialize({
154+
controls: true,
155+
progress: true,
156+
history: true,
157+
transition: "{{reveal_transition}}",
158+
slideNumber: "{{reveal_number}}",
159+
plugins: [RevealNotes],
160+
width: {{reveal_width}},
161+
height: {{reveal_height}},
162+
163+
});
164+
165+
var update = function(event){
166+
if(MathJax.Hub.getAllJax(Reveal.getCurrentSlide())){
167+
MathJax.Hub.Rerender(Reveal.getCurrentSlide());
168+
}
169+
};
170+
171+
Reveal.addEventListener('slidechanged', update);
172+
173+
function setScrollingSlide() {
174+
var scroll = {{ reveal_scroll }}
175+
if (scroll === true) {
176+
var h = $('.reveal').height() * 0.95;
177+
$('section.present').find('section')
178+
.filter(function() {
179+
return $(this).height() > h;
180+
})
181+
.css('height', 'calc(95vh)')
182+
.css('overflow-y', 'scroll')
183+
.css('margin-top', '20px');
184+
}
185+
}
186+
187+
// check and set the scrolling slide every time the slide change
188+
Reveal.addEventListener('slidechanged', setScrollingSlide);
189+
}
190+
);
191+
</script>
192+
{% endblock footer_js %}
193+
</html>
194+
{% endblock footer %}

0 commit comments

Comments
 (0)