From 49564431474054cfd8909193503f25b2b403ccb2 Mon Sep 17 00:00:00 2001 From: shafayetShafee Date: Wed, 19 Apr 2023 14:37:09 +0600 Subject: [PATCH 01/12] feat: added option for hiding header text and logo from title slide --- _extensions/reveal-header/reveal-header.lua | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/_extensions/reveal-header/reveal-header.lua b/_extensions/reveal-header/reveal-header.lua index fb25679..574f17b 100644 --- a/_extensions/reveal-header/reveal-header.lua +++ b/_extensions/reveal-header/reveal-header.lua @@ -72,6 +72,11 @@ if quarto.doc.is_format('revealjs') then local header_section = pandoc.Div(pandoc.Para(" "), {class = "sc-title"}) local header_sbsection = pandoc.Div(pandoc.Para(" "), {class = "sb-title"}) local header_para = pandoc.Div(pandoc.Para(header_text), header_para_class) + if meta['hide-from-titleSlide'] then + local hide = meta['hide-from-titleSlide'] + header_para.attributes['hide-from-titleslide'] = hide['header-text'] and str(hide['header-text']) or "false" + header_img.attributes['hide-from-titleslide'] = hide['header-logo'] and str(hide['header-logo']) or "false" + end local div = pandoc.Div( { header_img, From 6d2fe51aa30cb365c68f5064a9d6fc2937c66da8 Mon Sep 17 00:00:00 2001 From: shafayetShafee Date: Wed, 19 Apr 2023 14:38:27 +0600 Subject: [PATCH 02/12] feat: making the header text and image hidden on title slide --- .../reveal-header/resources/js/add_header.js | 38 +++++++++++++------ 1 file changed, 26 insertions(+), 12 deletions(-) diff --git a/_extensions/reveal-header/resources/js/add_header.js b/_extensions/reveal-header/resources/js/add_header.js index 2deaccf..b28afa6 100644 --- a/_extensions/reveal-header/resources/js/add_header.js +++ b/_extensions/reveal-header/resources/js/add_header.js @@ -87,25 +87,39 @@ function header() { change_header(dyn_header, header_text, header_inner_html); }); - /************** header text in title slide if title or ******/ - /************* subtitle is used as header text ******/ + /************** header text in title slide if title or ***********************/ + /************* subtitle is used as header text ***********************/ - - var title_text = document.querySelector('.reveal-header .title-text p'); - - if (title_text != null) { - - title_text.style.display = 'none'; - + function hide_from_title_slide(element) { Reveal.on( 'slidechanged' , event => { if (event.currentSlide.matches('#title-slide')) { - title_text.style.display = 'none'; + element.style.visibility = 'hidden'; } else { - title_text.style.display = 'block'; + element.style.visibility = 'visible'; } - }); + }); + }; + + + var title_text = document.querySelector('.reveal-header .title-text p'); + if (title_text != null) { + title_text.style.visibility = 'hidden'; + hide_from_title_slide(title_text); }; + var hide_header_text = document.querySelector('.header-text').getAttribute('data-hide-from-titleslide'); + var hide_header_logo = document.querySelector('.header-logo').getAttribute('data-hide-from-titleslide'); + + if (hide_header_text == 'true') { + header_text.style.visibility = 'hidden'; + hide_from_title_slide(header_text); + } + + if (hide_header_logo == 'true') { + logo_img.style.visibility = 'hidden'; + hide_from_title_slide(logo_img); + } + }; }; From aad29b8ade57621c50f3300da4a364264103fb01 Mon Sep 17 00:00:00 2001 From: shafayetShafee Date: Wed, 19 Apr 2023 14:40:57 +0600 Subject: [PATCH 03/12] feat: restructered code --- .../reveal-header/resources/js/add_header.js | 23 ++++++++++--------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/_extensions/reveal-header/resources/js/add_header.js b/_extensions/reveal-header/resources/js/add_header.js index b28afa6..51726a3 100644 --- a/_extensions/reveal-header/resources/js/add_header.js +++ b/_extensions/reveal-header/resources/js/add_header.js @@ -47,6 +47,16 @@ function header() { }; }; + function hide_from_title_slide(element) { + Reveal.on( 'slidechanged' , event => { + if (event.currentSlide.matches('#title-slide')) { + element.style.visibility = 'hidden'; + } else { + element.style.visibility = 'visible'; + } + }); + }; + if (Reveal.isReady()) { @@ -90,23 +100,14 @@ function header() { /************** header text in title slide if title or ***********************/ /************* subtitle is used as header text ***********************/ - function hide_from_title_slide(element) { - Reveal.on( 'slidechanged' , event => { - if (event.currentSlide.matches('#title-slide')) { - element.style.visibility = 'hidden'; - } else { - element.style.visibility = 'visible'; - } - }); - }; - - var title_text = document.querySelector('.reveal-header .title-text p'); if (title_text != null) { title_text.style.visibility = 'hidden'; hide_from_title_slide(title_text); }; + /*************** hide header text and logo on title slide ********************/ + var hide_header_text = document.querySelector('.header-text').getAttribute('data-hide-from-titleslide'); var hide_header_logo = document.querySelector('.header-logo').getAttribute('data-hide-from-titleslide'); From cbff5df3908ec443dde453365c56d7dc98c60d21 Mon Sep 17 00:00:00 2001 From: shafayetShafee Date: Wed, 19 Apr 2023 15:34:27 +0600 Subject: [PATCH 04/12] build: added a makefile and shell script to ease up the feature testing processing --- Makefile | 7 +++++++ test_examples.sh | 6 ++++++ 2 files changed, 13 insertions(+) create mode 100644 Makefile create mode 100644 test_examples.sh diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..2f2351e --- /dev/null +++ b/Makefile @@ -0,0 +1,7 @@ +clean: + rm -rf docs/* + +move: + mv *.html docs/ + +all: clean generate move diff --git a/test_examples.sh b/test_examples.sh new file mode 100644 index 0000000..f0aba21 --- /dev/null +++ b/test_examples.sh @@ -0,0 +1,6 @@ +#!/usr/bin/env bash + +quarto render example.qmd && +quarto render example_all.qmd && +quarto render example_section_title.qmd && +quarto render example_hide_header_text.qmd \ No newline at end of file From f99f8ba475ea304c4370081885a0c6a126821518 Mon Sep 17 00:00:00 2001 From: shafayetShafee Date: Wed, 19 Apr 2023 15:35:31 +0600 Subject: [PATCH 05/12] docs: added example for hiding header text from title slide --- docs/example_hide_header_text.html | 2648 ++++++++++++++++++++++++++++ example_hide_header_text.qmd | 109 ++ 2 files changed, 2757 insertions(+) create mode 100644 docs/example_hide_header_text.html create mode 100644 example_hide_header_text.qmd diff --git a/docs/example_hide_header_text.html b/docs/example_hide_header_text.html new file mode 100644 index 0000000..a607de0 --- /dev/null +++ b/docs/example_hide_header_text.html @@ -0,0 +1,2648 @@ + + + + + + + + + + + + + + + + Quarto Presentations + + + + + + + + + + + + + + + +
+
+ +
+

Quarto Presentations

+

Create beautiful interactive slide decks with Reveal.js

+ +
+
+
+Shafayet Khan Shafee +
+
+
+ +

19 Apr, 2023

+
+
+

Hello, There

+

This presentation shows a few slides made by Quarto and Reveal.js along with header logo and header text which are easily embedded by using the Quarto filter reveal-header

+
+
+

Slide Backgrounds

+

This slide is created using the background attribute ({background="#43464B"}) and as you can see that header text color is different (difference is trivial though) than before.

+

if you want you can change the color of the header text for slides with background attribute using css class .inverse-header. For example,

+
.inverse-header {
+  color: #c1c1c1 !important;
+}
+

Here using !important is important :p.

+
+

Learn more: Slide Backgrounds

+
+
+
+

Slide Backgrounds

+
+

Slide with bg color #43464B, used in .inverse-header

+
+

This slide contains a header div, therefore it has a header.

+
+

Learn more: Slide Backgrounds

+
+
+
+

Executable Code

+
+

Codes with syntax highlighting and line numbers.

+
+
+
library(ggplot2)
+ggplot(mtcars, aes(hp, mpg, color = am)) +
+  geom_point() +
+  geom_smooth(formula = y ~ x, method = "loess")
+
+
+

Learn more: Executable Code

+
+
+
+

Line Highlighting

+
+

Codes with specific line highlighted

+
+
import numpy as np
+import matplotlib.pyplot as plt
+
+r = np.arange(0, 2, 0.01)
+theta = 2 * np.pi * r
+fig, ax = plt.subplots(subplot_kw={'projection': 'polar'})
+ax.plot(theta, r)
+ax.set_rticks([0.5, 1, 1.5, 2])
+ax.grid(True)
+plt.show()
+
+

Learn more: Line Highlighting

+
+

+
+

https://quarto.org

+
+
+ +
+

+
+
+

Quarto Presentations with beautiful slide decks made by RevealJs

+
+
+

+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/example_hide_header_text.qmd b/example_hide_header_text.qmd new file mode 100644 index 0000000..5d91dcf --- /dev/null +++ b/example_hide_header_text.qmd @@ -0,0 +1,109 @@ +--- +title: "Quarto Presentations" +subtitle: "Create beautiful interactive slide decks with Reveal.js" +author: Shafayet Khan Shafee +date: last-modified +date-format: "DD MMM, YYYY" +format: + revealjs: + slide-number: true + logo: images/quarto.png + footer: + header: Quarto Presentations with beautiful slide decks made by RevealJs + header-logo: images/reveal_logo.svg + hide-from-titleSlide: + header-text: true +filters: + - reveal-header +execute: + eval: false + echo: true +embed-resources: true +--- + +## Hello, There + +This presentation shows a few slides made by Quarto and [Reveal.js](https://revealjs.com) along with header logo and header text which are easily embedded by using the Quarto filter `reveal-header` + + +## Slide Backgrounds {background="#43464B"} + +This slide is created using the `background` attribute (`{background="#43464B"}`) and as you can see that header text color is different (difference is trivial though) than before. + +if you want you can change the color of the header text for slides with `background` attribute using css class `.inverse-header`. For example, + +~~~ +.inverse-header { + color: #c1c1c1 !important; +} +~~~ + +Here using `!important` is important :p. + +::: footer +Learn more: [Slide Backgrounds](https://quarto.org/docs/presentations/revealjs/#color-backgrounds) +::: + +## Slide Backgrounds {background="#43464B"} + +::: header + +Slide with bg color #43464B, used in **.inverse-header** + +::: + +This slide contains a header div, therefore it has a header. + +::: footer +Learn more: [Slide Backgrounds](https://quarto.org/docs/presentations/revealjs/#color-backgrounds) +::: + + +## Executable Code + +::: header + +Codes with syntax highlighting and line numbers. + +::: + +```{r} +#| echo: true +#| fig-width: 10 +#| fig-height: 4.5 + +library(ggplot2) +ggplot(mtcars, aes(hp, mpg, color = am)) + + geom_point() + + geom_smooth(formula = y ~ x, method = "loess") +``` + +::: footer +Learn more: [Executable Code](https://quarto.org/docs/presentations/revealjs/#executable-code) +::: + + +## Line Highlighting + +::: header + +Codes with specific line highlighted + +::: + +``` {.python code-line-numbers="4-5|7|10"} +import numpy as np +import matplotlib.pyplot as plt + +r = np.arange(0, 2, 0.01) +theta = 2 * np.pi * r +fig, ax = plt.subplots(subplot_kw={'projection': 'polar'}) +ax.plot(theta, r) +ax.set_rticks([0.5, 1, 1.5, 2]) +ax.grid(True) +plt.show() +``` + +::: footer +Learn more: [Line Highlighting](https://quarto.org/docs/presentations/revealjs/#line-highlighting) +::: From 31860267fb3857eee8bb4061a0174d4c7efab8fd Mon Sep 17 00:00:00 2001 From: shafayetShafee Date: Wed, 19 Apr 2023 15:36:06 +0600 Subject: [PATCH 06/12] docs: updated docs example --- docs/example.html | 125 +++++++++++++++++++++----------- docs/example_all.html | 124 ++++++++++++++++++++----------- docs/example_section_title.html | 122 ++++++++++++++++++++----------- 3 files changed, 240 insertions(+), 131 deletions(-) diff --git a/docs/example.html b/docs/example.html index b47fdeb..c81287e 100644 --- a/docs/example.html +++ b/docs/example.html @@ -1,12 +1,12 @@ +!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ClipboardJS=e():t.ClipboardJS=e()}(this,function(){return n={686:function(t,e,n){"use strict";n.d(e,{default:function(){return b}});var e=n(279),i=n.n(e),e=n(370),u=n.n(e),e=n(817),r=n.n(e);function c(t){try{return document.execCommand(t)}catch(t){return}}var a=function(t){t=r()(t);return c("cut"),t};function o(t,e){var n,o,t=(n=t,o="rtl"===document.documentElement.getAttribute("dir"),(t=document.createElement("textarea")).style.fontSize="12pt",t.style.border="0",t.style.padding="0",t.style.margin="0",t.style.position="absolute",t.style[o?"right":"left"]="-9999px",o=window.pageYOffset||document.documentElement.scrollTop,t.style.top="".concat(o,"px"),t.setAttribute("readonly",""),t.value=n,t);return e.container.appendChild(t),e=r()(t),c("copy"),t.remove(),e}var f=function(t){var e=1 + - + - + Quarto Presentations @@ -601,9 +617,9 @@ ul.task-list{list-style: none;} ul.task-list li input[type="checkbox"] { width: 0.8em; -margin: 0 0.8em 0.2em -1.6em; -vertical-align: middle; +margin: 0 0.8em 0.2em -1em; vertical-align: middle; } + pre > code.sourceCode { white-space: pre; position: relative; } pre > code.sourceCode > span { display: inline-block; line-height: 1.25; } pre > code.sourceCode > span:empty { height: 1.2em; } @@ -669,7 +685,7 @@ code span.vs { color: #20794d; } code span.wa { color: #5e5e5e; font-style: italic; } - + @@ -1333,7 +1350,7 @@

Quarto Presentations

-

16 Feb, 2023

+

19 Apr, 2023

Hello, There

@@ -1883,6 +1900,9 @@

Line Highlighting

Reveal = _Reveal; install(); }; + Plugin.togglePdfExport = function () { + togglePdfExport(); + }; } return Plugin; @@ -1930,6 +1950,9 @@

Line Highlighting

downloadDrawings: revealMenuToolHandler(function () { RevealChalkboard.download(); }), + togglePdfExport: revealMenuToolHandler(function () { + PdfExport.togglePdfExport(); + }), }; +!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ClipboardJS=e():t.ClipboardJS=e()}(this,function(){return n={686:function(t,e,n){"use strict";n.d(e,{default:function(){return b}});var e=n(279),i=n.n(e),e=n(370),u=n.n(e),e=n(817),r=n.n(e);function c(t){try{return document.execCommand(t)}catch(t){return}}var a=function(t){t=r()(t);return c("cut"),t};function o(t,e){var n,o,t=(n=t,o="rtl"===document.documentElement.getAttribute("dir"),(t=document.createElement("textarea")).style.fontSize="12pt",t.style.border="0",t.style.padding="0",t.style.margin="0",t.style.position="absolute",t.style[o?"right":"left"]="-9999px",o=window.pageYOffset||document.documentElement.scrollTop,t.style.top="".concat(o,"px"),t.setAttribute("readonly",""),t.value=n,t);return e.container.appendChild(t),e=r()(t),c("copy"),t.remove(),e}var f=function(t){var e=1 + - + - + Quarto Presentations @@ -696,11 +712,10 @@ ul.task-list{list-style: none;} ul.task-list li input[type="checkbox"] { width: 0.8em; -margin: 0 0.8em 0.2em -1.6em; -vertical-align: middle; +margin: 0 0.8em 0.2em -1em; vertical-align: middle; } - + @@ -1364,7 +1380,7 @@

Quarto Presentations

-

18 Feb, 2023

+

19 Apr, 2023

@@ -1918,6 +1934,9 @@

2.2.1 TODO

Reveal = _Reveal; install(); }; + Plugin.togglePdfExport = function () { + togglePdfExport(); + }; } return Plugin; @@ -1965,6 +1984,9 @@

2.2.1 TODO

downloadDrawings: revealMenuToolHandler(function () { RevealChalkboard.download(); }), + togglePdfExport: revealMenuToolHandler(function () { + PdfExport.togglePdfExport(); + }), }; +!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ClipboardJS=e():t.ClipboardJS=e()}(this,function(){return n={686:function(t,e,n){"use strict";n.d(e,{default:function(){return b}});var e=n(279),i=n.n(e),e=n(370),u=n.n(e),e=n(817),r=n.n(e);function c(t){try{return document.execCommand(t)}catch(t){return}}var a=function(t){t=r()(t);return c("cut"),t};function o(t,e){var n,o,t=(n=t,o="rtl"===document.documentElement.getAttribute("dir"),(t=document.createElement("textarea")).style.fontSize="12pt",t.style.border="0",t.style.padding="0",t.style.margin="0",t.style.position="absolute",t.style[o?"right":"left"]="-9999px",o=window.pageYOffset||document.documentElement.scrollTop,t.style.top="".concat(o,"px"),t.setAttribute("readonly",""),t.value=n,t);return e.container.appendChild(t),e=r()(t),c("copy"),t.remove(),e}var f=function(t){var e=1 + - + - + Quarto Presentations @@ -696,11 +712,10 @@ ul.task-list{list-style: none;} ul.task-list li input[type="checkbox"] { width: 0.8em; -margin: 0 0.8em 0.2em -1.6em; -vertical-align: middle; +margin: 0 0.8em 0.2em -1em; vertical-align: middle; } - + @@ -1939,6 +1955,9 @@

2.2.2 TODO

Reveal = _Reveal; install(); }; + Plugin.togglePdfExport = function () { + togglePdfExport(); + }; } return Plugin; @@ -1986,6 +2005,9 @@

2.2.2 TODO

downloadDrawings: revealMenuToolHandler(function () { RevealChalkboard.download(); }), + togglePdfExport: revealMenuToolHandler(function () { + PdfExport.togglePdfExport(); + }), };