├── .gitignore ├── title-slide-quarto-illinois.png ├── _extensions └── illinois │ ├── logo-illinois-block-i.png │ ├── _extension.yml │ └── imtheme.scss ├── .devcontainer └── devcontainer.json ├── .github └── workflows │ └── publish-gh.yml ├── template.qmd └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | *_files 2 | *.html 3 | /logo-illinois-block-i.png 4 | -------------------------------------------------------------------------------- /title-slide-quarto-illinois.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coatless-quarto/illinois-revealjs/HEAD/title-slide-quarto-illinois.png -------------------------------------------------------------------------------- /_extensions/illinois/logo-illinois-block-i.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coatless-quarto/illinois-revealjs/HEAD/_extensions/illinois/logo-illinois-block-i.png -------------------------------------------------------------------------------- /_extensions/illinois/_extension.yml: -------------------------------------------------------------------------------- 1 | title: illinois 2 | author: James Joseph Balamuta 3 | version: 1.0.0 4 | quarto-required: ">=1.3.0" 5 | contributes: 6 | formats: 7 | revealjs: 8 | theme: [default, imtheme.scss] 9 | slide-number: true 10 | date-format: long 11 | logo: logo-illinois-block-i.png 12 | format-resources: ["logo-illinois-block-i.png"] -------------------------------------------------------------------------------- /.devcontainer/devcontainer.json: -------------------------------------------------------------------------------- 1 | // Config options: https://github.com/rocker-org/devcontainer-templates/tree/main/src/r-ver 2 | { 3 | "name": "R (rocker/r-ver base)", 4 | "image": "ghcr.io/rocker-org/devcontainer/r-ver:4.3", 5 | 6 | // Add software 7 | "features": { 8 | // R package config: https://github.com/rocker-org/devcontainer-features/blob/main/src/r-packages/README.md 9 | "ghcr.io/rocker-org/devcontainer-features/r-packages:1": { 10 | "packages": "cli,rlang", 11 | "installSystemRequirements": true 12 | }, 13 | // Quarto configuration : https://github.com/rocker-org/devcontainer-features/blob/main/src/quarto-cli/README.md 14 | "ghcr.io/rocker-org/devcontainer-features/quarto-cli:1": { 15 | "installTinyTex": true, 16 | "version": "prerelease" 17 | } 18 | }, 19 | "customizations": { 20 | "vscode": { 21 | "extensions": [ 22 | "quarto.quarto", 23 | "peakchen90.open-html-in-browser" 24 | ] 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /.github/workflows/publish-gh.yml: -------------------------------------------------------------------------------- 1 | on: 2 | push: 3 | branches: [main, master] 4 | release: 5 | types: [published] 6 | workflow_dispatch: 7 | 8 | name: demo-website 9 | 10 | jobs: 11 | demo-website: 12 | runs-on: ubuntu-latest 13 | # Only restrict concurrency for non-PR jobs 14 | concurrency: 15 | group: quarto-website-${{ github.event_name != 'pull_request' || github.run_id }} 16 | permissions: 17 | contents: write 18 | steps: 19 | - name: "Check out repository" 20 | uses: actions/checkout@v3 21 | 22 | # To render using knitr, we need a few more setup steps... 23 | # If we didn't want the examples to use `engine: knitr`, we could 24 | # skip a few of the setup steps. 25 | - name: "Setup R" 26 | uses: r-lib/actions/setup-r@v2 27 | 28 | - name: "Setup R dependencies for Quarto's knitr engine" 29 | uses: r-lib/actions/setup-r-dependencies@v2 30 | with: 31 | packages: 32 | any::knitr 33 | any::rmarkdown 34 | any::downlit 35 | any::xml2 36 | 37 | # Back to our regularly scheduled Quarto output 38 | - name: "Set up Quarto" 39 | uses: quarto-dev/quarto-actions/setup@v2 40 | 41 | - name: "Render and Publish" 42 | uses: quarto-dev/quarto-actions/publish@v2 43 | with: 44 | target: gh-pages 45 | -------------------------------------------------------------------------------- /template.qmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: Overview of the Illinois Revealjs Theme 3 | subtitle: "Your Course - Semester YYYY @ Illinois" 4 | author: First Last 5 | date: last-modified 6 | format: 7 | illinois-revealjs: default 8 | --- 9 | 10 | # Title-Only Slide 11 | 12 | You can also include text under the slide, but you should reserve the first header just for section changes. 13 | 14 | ## Sample Slide Title 15 | 16 | ### Example of a subtitle 17 | 18 | We can create unordered lists: 19 | 20 | - first item 21 | - A sub item 22 | 23 | Or ordered lists 24 | 25 | 1. Ordered list first item 26 | 1. Nested list item 27 | 28 | Or **bold**, *italic*, or [URL](https://illinois.edu) text. 29 | 30 | ## Mathematics 31 | 32 | Inline mode: $c^2 = a^2 + b^2$ 33 | 34 | Display mode: 35 | 36 | $$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$ 37 | 38 | ## Columns 39 | 40 | We could also split content between two columns: 41 | 42 | ::: {.columns} 43 | 44 | ::: {.column width="45%"} 45 | Left column 46 | ::: 47 | 48 | ::: {.column width="45%"} 49 | Right column 50 | ::: 51 | 52 | ::: 53 | 54 | 55 | 56 | ## Code Highlighting 57 | 58 | For continuous highlighting, use `from-to` (`6-8`). 59 | 60 | For discontinuous highlighting, use `line1, line2, ...` (`1, 4`). 61 | 62 | To highlight lines in a progressive manner, use `range1|range2` (`|6-8|1,4|`). 63 | 64 | ```{.python code-line-numbers="|6-8|1,4|"} 65 | import numpy as np 66 | import matplotlib.pyplot as plt 67 | 68 | r = np.arange(0, 2, 0.01) 69 | theta = 2 * np.pi * r 70 | fig, ax = plt.subplots(subplot_kw={'projection': 'polar'}) 71 | ax.plot(theta, r) 72 | ax.set_rticks([0.5, 1, 1.5, 2]) 73 | ax.grid(True) 74 | plt.show() 75 | ``` 76 | 77 | 78 | 79 | ## Enable more revealjs features 80 | 81 | The theme is built ontop of Quarto's `revealjs` implementation. So, any [features](https://quarto.org/docs/presentations/revealjs/) of available are also usable within the theme. For example, if we wanted to incorporate the [chalkboard](https://quarto.org/docs/presentations/revealjs/presenting.html#chalkboard) feature. We would use: 82 | 83 | ```yaml 84 | format: 85 | illinois-revealjs: 86 | chalkboard: true 87 | ``` 88 | 89 | ## Summary {#sec-summary} 90 | 91 | ### Illinois-themed presentation slide deck 92 | 93 | The Quarto Illinois Revealjs theme is an extension of Reveal.js and 94 | offers all of its [features](https://quarto.org/docs/presentations/revealjs/) in the context of being brand friendly at Illinois. 95 | 96 | Install the theme without this template: 97 | 98 | ```bash 99 | quarto install extension coatless/quarto-illinois 100 | ``` 101 | 102 | Install the theme with the template being present: 103 | 104 | ```bash 105 | quarto use template coatless/quarto-illinois 106 | ``` 107 | 108 | You can learn more about using RevealJS with Quarto at: 109 | 110 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Illinois-themed Revealjs Extension For Quarto 2 | 3 | A [quarto extension](https://quarto.org/docs/extensions/) featuring an [Illinois-inspired theme](https://marketing.illinois.edu/visual-identity/color) for the [reveal.js format](https://quarto.org/docs/presentations/revealjs/). 4 | 5 | [![](title-slide-quarto-illinois.png)](http://quarto.thecoatlessprofessor.com/illinois-revealjs/) 6 | 7 | See the included [template.qmd](template.qmd) file for an example of the theme and integration into Quarto or explore the rendered version [here](http://quarto.thecoatlessprofessor.com/illinois-revealjs/). 8 | 9 | ## Installing 10 | 11 | You can obtain a copy of the extension by using: 12 | 13 | ```bash 14 | quarto use template coatless-quarto/illinois-revealjs 15 | ``` 16 | 17 | This will install the extension and create an example qmd file that 18 | you can use as a starting place for your presentation slides. 19 | 20 | ## Using 21 | 22 | Once the extension is installed, you can use the extension by setting the `format` inside of the document header to `illinois-revealjs`. 23 | 24 | ```markdown 25 | --- 26 | title: A title 27 | subtitle: A subtitle 28 | format: 29 | illinois-revealjs: default 30 | author: 31 | - name: Your Name 32 | orcid: 0000-0000-0000-0000 33 | email: alias@email.com 34 | affiliations: Your Institution 35 | date: last-modified 36 | --- 37 | ``` 38 | 39 | If you wanted to use other [reveal.js features in quarto](https://quarto.org/docs/presentations/revealjs/), add the options under the `illinois-revealjs` format. For example, we can use the [`chalkboard`](https://quarto.org/docs/presentations/revealjs/presenting.html#chalkboard) feature by setting: 40 | 41 | ```yaml 42 | format: 43 | illinois-revealjs: 44 | chalkboard: true 45 | ``` 46 | 47 | ## Developer Notes 48 | 49 | We created the quarto extension for the revealjs format by using: 50 | 51 | ```sh 52 | quarto create extension format:revealjs 53 | ``` 54 | 55 | From there, we incorporated a modified version of the [Beamer Metropolis](https://github.com/matze/mtheme) that was ported into a [Quarto theme](https://codeberg.org/pat-s/quarto-metropolis) by [Patrick Schratz](https://pat-s.me/) ([Post](https://pat-s.me/quarto-metropolis-theme/)). 56 | 57 | ## Acknowledgements 58 | 59 | This theme is built ontop of the design and implementation work of [Matthias Vogelgesang](https://bloerg.net/) ([Beamer Metropolis](https://github.com/matze/mtheme)) and [Patrick Schratz](https://pat-s.me/) ([Quarto Metropolis theme](https://codeberg.org/pat-s/quarto-metropolis)). 60 | 61 | We also appreciate for [Shafayet Khan Shafee](https://github.com/shafayetShafee) for making available an alternative port known as [`metropolis-revealjs`](https://github.com/shafayetShafee/metropolis) based on the gist containing [`metropolis.css`](https://gist.github.com/vhodges/e37893eecde3f3333150) by [Vince Hodges](https://github.com/vhodges). 62 | 63 | Additionally, we relied upon the following documentation: 64 | 65 | - [Quarto Documentation: Custom Formats](https://quarto.org/docs/extensions/formats.html) 66 | - [Quarto Revealjs Clean Theme](https://github.com/grantmcdermott/quarto-revealjs-clean) by [Grant McDermott](https://github.com/grantmcdermott) 67 | -------------------------------------------------------------------------------- /_extensions/illinois/imtheme.scss: -------------------------------------------------------------------------------- 1 | /*-- scss:defaults --*/ 2 | 3 | /* Modified version of the metropolis theme ported into Quarto by Patrick Schwartz */ 4 | 5 | // fonts 6 | @import url("https://fonts.googleapis.com/css?family=Fira+Sans:300,300i,400,400i,500,500i,700,700i"); 7 | @import url("https://fonts.googleapis.com/css?family=Fira+Code:300,300i,400,400i,500,500i,700,700i"); 8 | @import url("https://fonts.googleapis.com/css?family=Roboto+Mono|JetBrains+Mono&display=swap"); 9 | @import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"); 10 | 11 | $font-family-sans-serif: "Fira Sans", "Roboto", "Droid Serif", serif !default; 12 | $font-family-monospace: "Fira Code", "JetBrains Mono", monospace; 13 | $presentation-font-size-root: 32px; 14 | $presentation-line-height: 1.5em; 15 | $presentation-heading-font-weight: 400; 16 | 17 | // colors 18 | $body-bg: #fafafa !default; 19 | $body-color: #000 !default; 20 | // $link-color: #EB811B !default; 21 | $selection-bg: #26351c; 22 | 23 | // headings 24 | // $presentation-heading-font: "Palatino Linotype", "Book Antiqua", Palatino, 25 | // FreeSerif, serif !default; 26 | // $presentation-heading-color: #383d3d !default; 27 | 28 | /*-- scss:rules --*/ 29 | 30 | .reveal a { 31 | line-height: 1.5em; 32 | color: #e84a27; 33 | font-weight: 300; 34 | } 35 | 36 | .reveal .footer a { 37 | color: #e84a27 !important; 38 | } 39 | 40 | .reveal p { 41 | font-weight: 300; 42 | } 43 | 44 | .reveal .slide ul li, 45 | .reveal .slide ol li { 46 | font-weight: 300; 47 | } 48 | 49 | // maximum height of code blocks before scrolling is used 50 | .reveal pre.sourceCode code { 51 | max-height: 700px; // default 500 52 | } 53 | 54 | // title slide 55 | .title-slide { 56 | background-color: #fafafa; 57 | //border-top: 80px solid #fafafa; // do not change this, it implements a bumper 58 | } 59 | 60 | h1.title { 61 | color: #1a292c; 62 | font-size: 45px; 63 | text-shadow: none; 64 | font-weight: 400; 65 | text-align: left; 66 | margin-left: 15px; 67 | // padding-top: 80px; // not a huge fan of the 80px drop 68 | } 69 | p.subtitle { 70 | // margin-top: -10px; 71 | // padding-bottom: -20px; 72 | color: #1a292c; 73 | text-shadow: none; 74 | font-weight: 300; 75 | font-size: 40px; 76 | text-align: left; 77 | margin-left: 15px; 78 | } 79 | p.author { 80 | color: #1a292c; 81 | text-shadow: none; 82 | font-weight: 300; 83 | font-size: 30px; 84 | text-align: left; 85 | margin-left: 15px; 86 | margin-bottom: -10px; 87 | margin-top: 0px; 88 | } 89 | 90 | p.date { 91 | color: #1a292c; 92 | text-shadow: none; 93 | font-weight: 300; 94 | font-size: 30px; 95 | text-align: left; 96 | margin-left: 15px; 97 | // margin-bottom: -30px; 98 | } 99 | 100 | p.subtitle:after { 101 | content: ""; 102 | display: block; 103 | border: none; 104 | background-color: #eb811b; 105 | color: #eb811b; 106 | height: 1px; 107 | margin: 25px 0 25px; 108 | } 109 | 110 | // Section break slide 111 | hr, 112 | h1::after { 113 | content: ""; 114 | display: block; 115 | border: none; 116 | background-color: #eb811b; 117 | color: #eb811b; 118 | height: 1px; 119 | margin: 1em 10px 0 10px; 120 | } 121 | 122 | // Override h1 style for title slide (remove section break slide style) 123 | hr, 124 | h1.title::after { 125 | content: ""; 126 | display: block; 127 | border: none; 128 | background-color: transparent !important; 129 | color: transparent !important; 130 | height: 0px; 131 | margin: 0px !important; 132 | } 133 | 134 | // Custom class to allow for blank slides 135 | .empty h1::after, .empty h2 { 136 | content: ""; 137 | display: none; 138 | border: none; 139 | // background-color: #eb811b; 140 | // color: #eb811b; 141 | height: 0px; 142 | margin: 0 auto; //reset 143 | } 144 | 145 | h2::after.title { 146 | margin: 10px 15px 35px 0; 147 | } 148 | 149 | .reveal .slide-number a { 150 | font-size: 120%; 151 | background-color: #fafafa; 152 | border-radius: 12px; 153 | padding: 5px; 154 | } 155 | 156 | // inline 157 | .reveal code { 158 | font-size: 70%; 159 | background-color: #afb8c133; 160 | color: #000; 161 | padding: 4px; 162 | border-radius: 6px; 163 | } 164 | 165 | // code blocks 166 | .reveal div.sourceCode pre code { 167 | font-size: 100%; 168 | } 169 | 170 | // code output 171 | .reveal pre code { 172 | font-size: 100%; 173 | padding-top: 15px; 174 | } 175 | 176 | .colored-column { 177 | border: 2px solid red; 178 | border-radius: 6px !important; 179 | padding: 10px; 180 | margin: 5px; 181 | } 182 | 183 | .column { 184 | // #column; 185 | // border: 2px solid red; 186 | border-radius: 10px !important; 187 | padding: 10px; 188 | margin: 5px; 189 | // background-color: #ededed; 190 | // background-color: #eeeeee; // not background color in columns 191 | } 192 | 193 | .reveal h2 { 194 | background-color: #13294b; //#23373b; 195 | padding: 5px 0px 5px 10px; 196 | color: #fafafa; 197 | //border-radius: 12px; // not a fan of rounded borders 198 | } 199 | 200 | .reveal h2:before { 201 | position: absolute; 202 | content: ""; 203 | height: 35px; 204 | width: 120px; 205 | top: 18px; 206 | right: -75px; 207 | background-image: url(../../../../../logo-illinois-block-i.png); /* Better than using an absolute path, though this can't be the best way to include an image! */ 208 | background-repeat: no-repeat; 209 | background-size: contain; 210 | } 211 | 212 | /* Add special removal classes */ 213 | h2.heading-output.removed:before{ 214 | position: absolute; 215 | content: ""; 216 | height: 0; 217 | width: 0; 218 | top: 0; 219 | right: 0; 220 | background-image: none; 221 | } 222 | 223 | h2.heading-output.removed{ 224 | background-color: transparent; 225 | padding: 0px; 226 | color: #000000; 227 | } 228 | 229 | h1.heading-output.removed::after { 230 | content: ""; 231 | display: block; 232 | border: none; 233 | background-color: transparent; 234 | color: #000000; 235 | height: 0px; 236 | margin: 0; 237 | } 238 | 239 | /* Custom size */ 240 | h5.heading-output { 241 | font-size: 0.7em; 242 | } 243 | 244 | h6.heading-output { 245 | font-size: 0.4em; 246 | } 247 | 248 | .small-font { 249 | font-size: 70%; 250 | } 251 | 252 | iframe { 253 | display: block; 254 | margin-right: auto; 255 | margin-left: auto; 256 | } 257 | 258 | .center { 259 | text-align: center; 260 | } 261 | 262 | // Custom hack to center contents of the table cell in the middle.background; 263 | .reveal table td { 264 | vertical-align: middle; 265 | } 266 | 267 | // 268 | .reveal .slide-menu-button .fa-bars::before { 269 | background-image: url('data:image/svg+xml,'); 270 | } 271 | 272 | .reveal .slide-chalkboard-buttons .fa-easel2::before { 273 | padding-bottom: 6px; 274 | background-image: url('data:image/svg+xml,'); 275 | } 276 | 277 | .reveal .slide-chalkboard-buttons .fa-brush::before { 278 | padding-bottom: 6px; 279 | background-image: url('data:image/svg+xml,'); 280 | } 281 | 282 | .reveal .progress { 283 | color: #23373b; 284 | } 285 | --------------------------------------------------------------------------------