├── .Rbuildignore ├── .gitignore ├── .quartoignore ├── DEVELOPER_README.md ├── LICENSE.md ├── NEWS.md ├── README.md ├── Scripts └── html_functions.R ├── _extensions ├── DHSC │ ├── DHSC-PPT-template.pptx │ ├── _extension.yml │ ├── assets │ │ └── DHSC_3268_AW.png │ └── stylesheets │ │ ├── DHSC_logo.html │ │ └── DHSC_style.scss ├── OHID │ ├── OHID-PPT-template.pptx │ ├── _extension.yml │ ├── assets │ │ └── OHID_3268_MASTER_AW.png │ └── stylesheets │ │ ├── OHID_logo.html │ │ └── OHID_style.scss └── govuk │ ├── GDS.css │ ├── _extension.yml │ ├── assets │ ├── images │ │ ├── favicon.ico │ │ ├── favicon.svg │ │ ├── govuk-crest.svg │ │ ├── govuk-icon-180.png │ │ ├── govuk-icon-192.png │ │ ├── govuk-icon-512.png │ │ ├── govuk-icon-mask.svg │ │ └── govuk-opengraph-image.png │ ├── manifest.json │ └── rebrand │ │ ├── images │ │ ├── favicon.ico │ │ ├── favicon.svg │ │ ├── govuk-crest.svg │ │ ├── govuk-icon-180.png │ │ ├── govuk-icon-192.png │ │ ├── govuk-icon-512.png │ │ ├── govuk-icon-mask.svg │ │ └── govuk-opengraph-image.png │ │ └── manifest.json │ ├── govuk.template │ └── styles.scss ├── example_image.png ├── template_DHSC_HTML.qmd ├── template_DHSC_powerpoint.qmd ├── template_GOVUK_HTML.qmd ├── template_OHID_HTML.qmd └── template_OHID_powerpoint.qmd /.Rbuildignore: -------------------------------------------------------------------------------- 1 | ^LICENSE\.md$ 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .Rproj.user 2 | *.Rproj 3 | .Rhistory 4 | .RData 5 | .Ruserdata 6 | /*.html 7 | /*.pptx -------------------------------------------------------------------------------- /.quartoignore: -------------------------------------------------------------------------------- 1 | LICENSE.md 2 | README.md 3 | NEWS.md 4 | DEVELOPER_README.md 5 | -------------------------------------------------------------------------------- /DEVELOPER_README.md: -------------------------------------------------------------------------------- 1 | # Instructions for all updates 2 | 1. create a new GIT branch from the development branch to work in. 3 | 4 | 2. Make changes to the relevant files within the `_extensions` folder. 5 | 6 | 3. Update the relevant `_extension.yml` files for the extensions you have modified with a new version number, e.g. `version: 1.0.4` to `version: 1.0.5`. For more major updates, change the middle version number, e.g. `version: 1.0.4` to `version: 1.1.0`. For the most major updates change the first digit of the version number. 7 | 8 | 4. Update the top of the News.md file in the project top level folder with the new version name and 9 | description of what has changed/added/removed. 10 | 11 | 5. Commit and push to GIT. Inform lead if it is ready to be QAd and merged. 12 | 13 | 14 | # Updating govuk HTML extension 15 | 16 | 1. To find out which version of the GOV.UK frontend is currently being used, 17 | open `_extensions/govuk/GDS.css` and search for `root{--govuk-frontend-version:` (should be near the 18 | beginning). Compare this 19 | against the latest release number on [GOV.UK frontend](https://github.com/alphagov/govuk-frontend/releases). 20 | 21 | 2. Download and unzip the latest 22 | release of [GOV.UK frontend](https://github.com/alphagov/govuk-frontend/releases) e.g. release-v5.7.1.zip 23 | 24 | 3. Delete the `_extensions/govuk/assets` folder from quarto template project and 25 | replace it with the `assets` folder of the GOV.UK frontend download. 26 | 27 | 4. Delete the /_extensions/govuk/GDS.css file. 28 | 29 | 5. Copy the css file from the GOV.UK frontend download (usually at the root of the folder, and 30 | called something like `govuk-frontend-5.7.1.min.css`) and place 31 | in the `_extensions/govuk` folder. Rename the file as GDS.css. 32 | 33 | 6. Open the new GDS.css file. Delete code loading the GDS Transport font, which we 34 | don't have permission to use e.g. 35 | 36 | `/*! Copyright (c) 2011 by Margaret Calvert & Henrik Kubel. All rights reserved. The font has been customised for exclusive use on gov.uk. This cut is not commercially available. */@font-face{font-family:GDS Transport;font-style:normal;font-weight:400;src:url(/assets/fonts/light-94a07e06a1-v2.woff2) format("woff2"),url(/assets/fonts/light-f591b13f7d-v2.woff) format("woff");font-display:fallback}@font-face{font-family:GDS Transport;font-style:normal;font-weight:700;src:url(/assets/fonts/bold-b542beb274-v2.woff2) format("woff2"),url(/assets/fonts/bold-affa96571d-v2.woff) format("woff");font-display:fallback}` 37 | 38 | 7. In GDS.css search for all instances of `font-family:GDS Transport,` and delete `GDS Transport,`, easy option is to 39 | control f/search for "font-family:GDS Transport," and replace with "font-family:" 40 | 41 | 8. Delete font folder and its contents, found in the Asset folder. 42 | 43 | 9. In GDS.css search for filepaths starting `/assets/images` and delete the initial `/`. This allows 44 | the filepath to be identified correctly. 45 | 46 | 10. Open `_extensions/govuk/govuk.template.` Replace code between the two `header` tags with 47 | the [latest HTML code for the header component](https://design-system.service.gov.uk/components/header/) from the 48 | design system website. This can be tricky as we have modified the header to use the DHSC logo. Therefore you may need to make a number of edits to get the new header to use the DHSC logo and department name. Do the same for the [footer](https://design-system.service.gov.uk/components/footer/). No edits should be required for the footer. 49 | 50 | 11. Check if there have been any changes to the styling of paragraphs, headings or links in the design system (see [styles tab page](https://design-system.service.gov.uk/styles/)). You may want to review the recent updates on the [design system homepage](https://design-system.service.gov.uk/) to see if any changes to typography are mentioned. If so, `_extensions/govuk/styles.scss` will need to be updated. The govUK design system styles text using classes (e.g. `govuk-heading-l`). We can't easily use these classes with quarto though. We therefore write our own CSS rules in `_extensions/govuk/styles.scss` to style the relevant text element (e.g. h1, h2, p) to match the corresponding design system class rules (e.g. `.govuk-heading-l`). You can find the styles applied to each class in `_extensions/govuk/GDS.css` (each one may appear multiple times e.g. for different screen sizes). Remember, we aren't using the GDS transport font, so text will not look identical. 51 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # MIT License 2 | 3 | Copyright (c) 2023 Crown Copyright (Department of Health and Social Care) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /NEWS.md: -------------------------------------------------------------------------------- 1 | # GOVUK (1.1.0) 2 | * Updated from GOV.UK Frontend v5.7.1 to v5.11.1. This includes a new style of header and footer. 3 | 4 | # GOVUK (1.0.5) 5 | * Header title in HTML template has been changed from GOVUK to DHSC. 6 | 7 | # DHSC v(1.0.4), OHID (1.0.4), GOVUK (1.0.4) 8 | * Styling of section numbering updated for OHID, DHSC and GOVUK HTML templates. When used, section numbering for headers within the body and within the table of contents now matches the colour of those sections. 9 | 10 | # DHSC v(1.0.3), OHID (1.0.3), GOVUK (1.0.3) 11 | * OHID, DHSC and GOVUK HTML templates updated to use the new crown logo. 12 | * GOVUK template updated to use latest GDS css file. 13 | * The HTML templates now use the "full" page-layout option by default. This makes the main body of text on the page wider. If updating an existing report to use the new version, check that charts and tables display correctly at the larger width. 14 | * Added back in the use of css text-decoration-thickness property to style link text in HTML outputs. 15 | * Fixed redundant options in HTML YAMLs. 16 | 17 | # DHSC v(1.0.2), OHID (1.0.2), GOVUK (1.0.2) 18 | * First release of DHSC, OHID and GOVUK HTML templates. 19 | * First release of DHSC and OHID PowerPoint templates. 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # DHSC quarto templates 2 | 3 | This repo provides custom quarto formats to produce DHSC, OHID or GOVUK themed documents. 4 | 5 | ## Installing 6 | 7 | To start a new project using the custom formats, enter the following in the terminal: 8 | 9 | ``` bash 10 | quarto use template DataS-DHSC/dhsc_quarto_template 11 | ``` 12 | This will create a new folder with example qmd files that you can use as the starting point of your document. 13 | 14 | If you are working in RStudio, it is advisable to run the above command first and then create an RStudio project in the new folder. 15 | 16 | Alternatively, to install the formats in an existing project, without the example qmd files, enter the following in the terminal: 17 | 18 | ``` bash 19 | quarto add DataS-DHSC/dhsc_quarto_template 20 | ``` 21 | 22 | ## Using 23 | 24 | If installed using the `quarto use template` command, the project includes the following example qmd files. Rename and edit the relevant template and click the RStudio render button to produce a document. 25 | 26 | `template_DHSC_HTML.qmd` A standalone HTML report document with DHSC branding. 27 | 28 | `template_OHID_HTML.qmd` A standalone HTML report document with OHID branding. 29 | 30 | `template_DHSC_powerpoint.qmd` A PowerPoint using the DHSC PowerPoint template. 31 | 32 | `template_OHID_powerpoint.qmd` A PowerPoint using the OHID PowerPoint template. 33 | 34 | `template_GOVUK_HTML.qmd` A HTML document with GovUK branding. 35 | 36 | If you have installed the formats in an existing project using the `quarto add` command, you can manually download and add the template qmd files from this repo. Alternatively, create a blank qmd file and set the yaml to the relevant custom format: 37 | `DHSC-html`, `DHSC-pptx`, `OHID-html`, `OHID-pptx`, `govuk-html` 38 | 39 | Do not edit any file in the \_extensions folder. 40 | 41 | 42 | ## Updating extensions 43 | 44 | To update to use the latest version of the templates, the following command can be used in the terminal: 45 | 46 | `quarto update DataS-DHSC/dhsc_quarto_template` 47 | 48 | Further information on managing extensions can be found on the [quarto website](https://quarto.org/docs/extensions/managing.html#updating). 49 | 50 | ## Accessibility 51 | 52 | For guidance of making reports, charts and tables accessible, please see the [analysis function website](https://analysisfunction.civilservice.gov.uk/support/communicating-analysis/). 53 | 54 | ## Developer Notes: Updating GOV.UK CSS 55 | You can find the most up-to-date GOV.UK style on the [GDS](https://design-system.service.gov.uk/). 56 | -------------------------------------------------------------------------------- /Scripts/html_functions.R: -------------------------------------------------------------------------------- 1 | #' HTML details component 2 | #' 3 | #' `expander` produces HTML code for a details summary expander, using HTML from 4 | #' the GOV.UK Design System under 'Details': https://design-system.service.gov.uk/components/details/ 5 | #' 6 | #' @param title character string, visible title text 7 | #' @param details character string, detailed text visible when component is expanded 8 | 9 | expander <- function(title, details) { 10 | 11 | html1 <- '
' 12 | 13 | html2 <- '
' 14 | 15 | html3 <- '
' 16 | 17 | cat(paste0(html1, title, html2, details, html3)) 18 | 19 | } 20 | -------------------------------------------------------------------------------- /_extensions/DHSC/DHSC-PPT-template.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DataS-DHSC/dhsc_quarto_template/b6a9253a0da3b85af3719a395bf5d5d58d584848/_extensions/DHSC/DHSC-PPT-template.pptx -------------------------------------------------------------------------------- /_extensions/DHSC/_extension.yml: -------------------------------------------------------------------------------- 1 | title: DHSC 2 | author: Olivia Box Power 3 | version: 1.0.4 4 | quarto-required: ">=1.2.0" 5 | contributes: 6 | formats: 7 | html: 8 | embed-resources: true 9 | toc: true 10 | toc-depth: 3 11 | toc-location: left 12 | page-layout: full 13 | include-before-body: "stylesheets/DHSC_logo.html" 14 | theme: 15 | - default 16 | - stylesheets/DHSC_style.scss 17 | pptx: 18 | reference-doc: DHSC-PPT-template.pptx 19 | date-format: "[Published ]DD/MM/YYYY" 20 | -------------------------------------------------------------------------------- /_extensions/DHSC/assets/DHSC_3268_AW.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DataS-DHSC/dhsc_quarto_template/b6a9253a0da3b85af3719a395bf5d5d58d584848/_extensions/DHSC/assets/DHSC_3268_AW.png -------------------------------------------------------------------------------- /_extensions/DHSC/stylesheets/DHSC_logo.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_extensions/DHSC/stylesheets/DHSC_style.scss: -------------------------------------------------------------------------------- 1 | /*-- scss:defaults --*/ 2 | $toc-active-border: #1d70b8; 3 | 4 | /*-- scss:rules --*/ 5 | 6 | body { 7 | font-size: 17px; 8 | line-height: 1.5em; 9 | font-family: Arial, sans-serif; 10 | } 11 | 12 | .DHSC_logo { 13 | padding:30px 0 30px 0; 14 | height:190px 15 | } 16 | 17 | 18 | /* Headings */ 19 | 20 | h1.title { 21 | color: white; 22 | background-color: #006652; 23 | text-align: left; 24 | line-height: 100%; 25 | font-size: 40px; 26 | font-weight: bold; 27 | border-bottom: 5px solid #00A88F; 28 | padding: 10px 30px 10px 10px; 29 | } 30 | 31 | h1 { 32 | text-align: left; 33 | line-height: 100%; 34 | font-size: 36px; 35 | font-weight: bold; 36 | padding: 15px 30px 15px 0; 37 | border-bottom: none; 38 | } 39 | 40 | h2 { 41 | line-height: 100%; 42 | text-align: left; 43 | font-size: 30px; 44 | font-weight: bold; 45 | padding: 15px 30px 15px 0; 46 | border-bottom: none; 47 | } 48 | 49 | h3 { 50 | line-height: 100%; 51 | text-align: left; 52 | font-size: 24px; 53 | font-weight: bold; 54 | padding: 15px 30px 15px 0; 55 | } 56 | 57 | h4 { 58 | font-weight: bold; 59 | font-size: 20px; 60 | border-bottom: none; 61 | } 62 | 63 | h5 { 64 | font-weight: bold; 65 | font-size: 18px; 66 | border-bottom: none; 67 | } 68 | 69 | 70 | /* TOC */ 71 | 72 | #toc-title { 73 | display: none; 74 | } 75 | 76 | #TOC a { 77 | font-size:16px; 78 | color: #1d70b8 !important; 79 | border: none !important; 80 | } 81 | 82 | #TOC a:hover{ 83 | text-decoration: underline; 84 | text-decoration-thickness: max(3px, .1875rem, .12em); 85 | text-underline-offset: .1578em; 86 | text-decoration-skip-ink: none; 87 | color: #003078 !important; 88 | border: none !important; 89 | } 90 | 91 | 92 | #TOC a.active{ 93 | border: initial !important; 94 | border-left-style: solid !important; 95 | } 96 | 97 | 98 | .nav-link { 99 | color: #1d70b8 100 | } 101 | 102 | 103 | /* Links */ 104 | 105 | a:link { 106 | color: #1d70b8; 107 | } 108 | 109 | a:visited { 110 | color: #4c2c92; 111 | } 112 | 113 | a:active { 114 | color: none; 115 | background-color: none; 116 | } 117 | 118 | a:hover { 119 | color: #003078; 120 | text-decoration-thickness: 3px; 121 | } 122 | 123 | p a:active { 124 | color: black; 125 | background-color: #ffdd00; 126 | text-decoration-thickness: 3px; 127 | } 128 | 129 | /* section numbering */ 130 | .header-section-number { 131 | color: inherit; 132 | } 133 | 134 | /* styling for panel tabset headings */ 135 | .panel-tabset .nav-item, 136 | .panel-tabset .nav-item a:visited { 137 | color: black; 138 | text-decoration: none; 139 | } 140 | 141 | .panel-tabset .nav-item a:hover { 142 | text-decoration: underline; 143 | text-decoration-thickness: 3px; 144 | } 145 | 146 | .panel-tabset .nav-item a:active, 147 | .panel-tabset .nav-item a:focus { 148 | font-weight:700; 149 | text-decoration: underline; 150 | text-decoration-thickness: 3px; 151 | } 152 | 153 | 154 | 155 | /* Printing */ 156 | 157 | 158 | @media print { 159 | .panel-tabset > .tab-content > .tab-pane { 160 | display: block !important; 161 | } 162 | 163 | .panel-tabset > .tab-content { 164 | border: none; 165 | padding: 0; 166 | } 167 | 168 | .panel-tabset > .nav-tabs { 169 | display: none; 170 | } 171 | 172 | .tabset-margin-container { 173 | display: none; 174 | } 175 | 176 | .tab-pane > p { 177 | padding-top: 0 !important; 178 | } 179 | 180 | } 181 | -------------------------------------------------------------------------------- /_extensions/OHID/OHID-PPT-template.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DataS-DHSC/dhsc_quarto_template/b6a9253a0da3b85af3719a395bf5d5d58d584848/_extensions/OHID/OHID-PPT-template.pptx -------------------------------------------------------------------------------- /_extensions/OHID/_extension.yml: -------------------------------------------------------------------------------- 1 | title: OHID 2 | author: Olivia Box Power 3 | version: 1.0.4 4 | quarto-required: ">=1.2.0" 5 | contributes: 6 | formats: 7 | html: 8 | embed-resources: true 9 | toc: true 10 | toc-depth: 3 11 | toc-location: left 12 | page-layout: full 13 | include-before-body: "stylesheets/OHID_logo.html" 14 | theme: 15 | - default 16 | - stylesheets/OHID_style.scss 17 | pptx: 18 | reference-doc: OHID-PPT-template.pptx 19 | date-format: "[Published ]DD/MM/YYYY" 20 | -------------------------------------------------------------------------------- /_extensions/OHID/assets/OHID_3268_MASTER_AW.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DataS-DHSC/dhsc_quarto_template/b6a9253a0da3b85af3719a395bf5d5d58d584848/_extensions/OHID/assets/OHID_3268_MASTER_AW.png -------------------------------------------------------------------------------- /_extensions/OHID/stylesheets/OHID_style.scss: -------------------------------------------------------------------------------- 1 | /*-- scss:defaults --*/ 2 | $toc-active-border: #1d70b8; 3 | 4 | /*-- scss:rules --*/ 5 | 6 | body { 7 | font-size: 17px; 8 | line-height: 1.5em; 9 | font-family: Arial, sans-serif; 10 | } 11 | 12 | .OHID_logo { 13 | padding:30px 0 30px 0; 14 | height:190px 15 | } 16 | 17 | 18 | /* Headings */ 19 | 20 | h1.title { 21 | color: white; 22 | background-color: #006652; 23 | text-align: left; 24 | line-height: 100%; 25 | font-size: 40px; 26 | font-weight: bold; 27 | border-bottom: 5px solid #00A88F; 28 | padding: 10px 30px 10px 10px; 29 | } 30 | 31 | h1 { 32 | text-align: left; 33 | line-height: 100%; 34 | font-size: 36px; 35 | font-weight: bold; 36 | padding: 15px 30px 15px 0; 37 | border-bottom: none; 38 | } 39 | 40 | h2 { 41 | line-height: 100%; 42 | text-align: left; 43 | font-size: 30px; 44 | font-weight: bold; 45 | padding: 15px 30px 15px 0; 46 | border-bottom: none; 47 | } 48 | 49 | h3 { 50 | line-height: 100%; 51 | text-align: left; 52 | font-size: 24px; 53 | font-weight: bold; 54 | padding: 15px 30px 15px 0; 55 | } 56 | 57 | h4 { 58 | font-weight: bold; 59 | font-size: 20px; 60 | border-bottom: none; 61 | } 62 | 63 | h5 { 64 | font-weight: bold; 65 | font-size: 18px; 66 | border-bottom: none; 67 | } 68 | 69 | 70 | /* TOC */ 71 | 72 | #toc-title { 73 | display: none; 74 | } 75 | 76 | #TOC a { 77 | font-size:16px; 78 | color: #1d70b8 !important; 79 | border: none !important; 80 | } 81 | 82 | #TOC a:hover{ 83 | text-decoration: underline; 84 | text-decoration-thickness: max(3px, .1875rem, .12em); 85 | text-underline-offset: .1578em; 86 | text-decoration-skip-ink: none; 87 | color: #003078 !important; 88 | border: none !important; 89 | } 90 | 91 | 92 | #TOC a.active{ 93 | border: initial !important; 94 | border-left-style: solid !important; 95 | } 96 | 97 | 98 | .nav-link { 99 | color: #1d70b8 100 | } 101 | 102 | 103 | /* Links */ 104 | 105 | a:link { 106 | color: #1d70b8; 107 | } 108 | 109 | a:visited { 110 | color: #4c2c92; 111 | } 112 | 113 | a:active { 114 | color: none; 115 | background-color: none; 116 | } 117 | 118 | a:hover { 119 | color: #003078; 120 | text-decoration-thickness: 3px; 121 | } 122 | 123 | p a:active { 124 | color: black; 125 | background-color: #ffdd00; 126 | text-decoration-thickness: 3px; 127 | } 128 | 129 | /* section numbering */ 130 | .header-section-number { 131 | color: inherit; 132 | } 133 | 134 | /* styling for panel tabset headings */ 135 | .panel-tabset .nav-item, 136 | .panel-tabset .nav-item a:visited { 137 | color: black; 138 | text-decoration: none; 139 | } 140 | 141 | .panel-tabset .nav-item a:hover { 142 | text-decoration: underline; 143 | text-decoration-thickness: 3px; 144 | } 145 | 146 | .panel-tabset .nav-item a:active, 147 | .panel-tabset .nav-item a:focus { 148 | font-weight:700; 149 | text-decoration: underline; 150 | text-decoration-thickness: 3px; 151 | } 152 | 153 | 154 | 155 | /* Printing */ 156 | 157 | 158 | @media print { 159 | .panel-tabset > .tab-content > .tab-pane { 160 | display: block !important; 161 | } 162 | 163 | .panel-tabset > .tab-content { 164 | border: none; 165 | padding: 0; 166 | } 167 | 168 | .panel-tabset > .nav-tabs { 169 | display: none; 170 | } 171 | 172 | .tabset-margin-container { 173 | display: none; 174 | } 175 | 176 | .tab-pane > p { 177 | padding-top: 0 !important; 178 | } 179 | 180 | } 181 | -------------------------------------------------------------------------------- /_extensions/govuk/_extension.yml: -------------------------------------------------------------------------------- 1 | title: govuk 2 | author: Annabel Westermann 3 | version: 1.1.0 4 | quarto-required: ">=1.2.0" 5 | contributes: 6 | formats: 7 | html: 8 | embed-resources: true 9 | template: govuk.template 10 | toc: true 11 | toc-title: Sections 12 | toc-depth: 3 13 | toc-location: left 14 | theme: styles.scss 15 | css: GDS.css 16 | page-layout: full 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /_extensions/govuk/assets/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DataS-DHSC/dhsc_quarto_template/b6a9253a0da3b85af3719a395bf5d5d58d584848/_extensions/govuk/assets/images/favicon.ico -------------------------------------------------------------------------------- /_extensions/govuk/assets/images/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /_extensions/govuk/assets/images/govuk-crest.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /_extensions/govuk/assets/images/govuk-icon-180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DataS-DHSC/dhsc_quarto_template/b6a9253a0da3b85af3719a395bf5d5d58d584848/_extensions/govuk/assets/images/govuk-icon-180.png -------------------------------------------------------------------------------- /_extensions/govuk/assets/images/govuk-icon-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DataS-DHSC/dhsc_quarto_template/b6a9253a0da3b85af3719a395bf5d5d58d584848/_extensions/govuk/assets/images/govuk-icon-192.png -------------------------------------------------------------------------------- /_extensions/govuk/assets/images/govuk-icon-512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DataS-DHSC/dhsc_quarto_template/b6a9253a0da3b85af3719a395bf5d5d58d584848/_extensions/govuk/assets/images/govuk-icon-512.png -------------------------------------------------------------------------------- /_extensions/govuk/assets/images/govuk-icon-mask.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_extensions/govuk/assets/images/govuk-opengraph-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DataS-DHSC/dhsc_quarto_template/b6a9253a0da3b85af3719a395bf5d5d58d584848/_extensions/govuk/assets/images/govuk-opengraph-image.png -------------------------------------------------------------------------------- /_extensions/govuk/assets/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "icons": [ 3 | { 4 | "src": "images/favicon.ico", 5 | "type": "image/x-icon", 6 | "sizes": "48x48" 7 | }, 8 | { 9 | "src": "images/favicon.svg", 10 | "type": "image/svg+xml", 11 | "sizes": "150x150", 12 | "purpose": "any" 13 | }, 14 | { 15 | "src": "images/govuk-icon-180.png", 16 | "type": "image/png", 17 | "sizes": "180x180", 18 | "purpose": "maskable" 19 | }, 20 | { 21 | "src": "images/govuk-icon-192.png", 22 | "type": "image/png", 23 | "sizes": "192x192", 24 | "purpose": "maskable" 25 | }, 26 | { 27 | "src": "images/govuk-icon-512.png", 28 | "type": "image/png", 29 | "sizes": "512x512", 30 | "purpose": "maskable" 31 | }, 32 | { 33 | "src": "images/govuk-icon-mask.svg", 34 | "type": "image/svg+xml", 35 | "sizes": "150x150", 36 | "purpose": "monochrome" 37 | } 38 | ] 39 | } 40 | -------------------------------------------------------------------------------- /_extensions/govuk/assets/rebrand/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DataS-DHSC/dhsc_quarto_template/b6a9253a0da3b85af3719a395bf5d5d58d584848/_extensions/govuk/assets/rebrand/images/favicon.ico -------------------------------------------------------------------------------- /_extensions/govuk/assets/rebrand/images/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /_extensions/govuk/assets/rebrand/images/govuk-crest.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /_extensions/govuk/assets/rebrand/images/govuk-icon-180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DataS-DHSC/dhsc_quarto_template/b6a9253a0da3b85af3719a395bf5d5d58d584848/_extensions/govuk/assets/rebrand/images/govuk-icon-180.png -------------------------------------------------------------------------------- /_extensions/govuk/assets/rebrand/images/govuk-icon-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DataS-DHSC/dhsc_quarto_template/b6a9253a0da3b85af3719a395bf5d5d58d584848/_extensions/govuk/assets/rebrand/images/govuk-icon-192.png -------------------------------------------------------------------------------- /_extensions/govuk/assets/rebrand/images/govuk-icon-512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DataS-DHSC/dhsc_quarto_template/b6a9253a0da3b85af3719a395bf5d5d58d584848/_extensions/govuk/assets/rebrand/images/govuk-icon-512.png -------------------------------------------------------------------------------- /_extensions/govuk/assets/rebrand/images/govuk-icon-mask.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_extensions/govuk/assets/rebrand/images/govuk-opengraph-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DataS-DHSC/dhsc_quarto_template/b6a9253a0da3b85af3719a395bf5d5d58d584848/_extensions/govuk/assets/rebrand/images/govuk-opengraph-image.png -------------------------------------------------------------------------------- /_extensions/govuk/assets/rebrand/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "icons": [ 3 | { 4 | "src": "images/favicon.ico", 5 | "type": "image/x-icon", 6 | "sizes": "48x48" 7 | }, 8 | { 9 | "src": "images/favicon.svg", 10 | "type": "image/svg+xml", 11 | "sizes": "150x150", 12 | "purpose": "any" 13 | }, 14 | { 15 | "src": "images/govuk-icon-180.png", 16 | "type": "image/png", 17 | "sizes": "180x180", 18 | "purpose": "maskable" 19 | }, 20 | { 21 | "src": "images/govuk-icon-192.png", 22 | "type": "image/png", 23 | "sizes": "192x192", 24 | "purpose": "maskable" 25 | }, 26 | { 27 | "src": "images/govuk-icon-512.png", 28 | "type": "image/png", 29 | "sizes": "512x512", 30 | "purpose": "maskable" 31 | }, 32 | { 33 | "src": "images/govuk-icon-mask.svg", 34 | "type": "image/svg+xml", 35 | "sizes": "150x150", 36 | "purpose": "monochrome" 37 | } 38 | ] 39 | } 40 | -------------------------------------------------------------------------------- /_extensions/govuk/govuk.template: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | $for(author-meta)$ 8 | 9 | $endfor$ 10 | $if(date-meta)$ 11 | 12 | $endif$ 13 | $if(keywords)$ 14 | 15 | $endif$ 16 | $if(description-meta)$ 17 | 18 | $endif$ 19 | $if(title-prefix)$$title-prefix$ – $endif$$pagetitle$ 20 | 21 | 24 | $for(css)$ 25 | 26 | $endfor$ 27 | $for(header-includes)$ 28 | $header-includes$ 29 | $endfor$ 30 | $if(math)$ 31 | $if(mathjax)$ 32 | 33 | $endif$ 34 | $math$ 35 | $endif$ 36 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 |
47 |
48 | 65 | 66 |
67 |
68 | 69 | 70 | 71 | 72 | $for(include-before)$ 73 | $include-before$ 74 | $endfor$ 75 | $if(title)$ 76 |
77 |

$title$

78 | $if(subtitle)$ 79 |

$subtitle$

80 | $endif$ 81 | $for(author)$ 82 |

$author$

83 | $endfor$ 84 | $if(date)$ 85 |

$date$

86 | $endif$ 87 | $if(abstract)$ 88 |
89 |
$abstract-title$
90 | $abstract$ 91 |
92 | $endif$ 93 |
94 | $endif$ 95 | $if(toc)$ 96 | 102 | $endif$ 103 | $body$ 104 | $for(include-after)$ 105 | $include-after$ 106 | $endfor$ 107 | 108 | 109 | 110 | 111 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | -------------------------------------------------------------------------------- /_extensions/govuk/styles.scss: -------------------------------------------------------------------------------- 1 | /*-- scss:defaults --*/ 2 | $toc-active-border: #1d70b8; 3 | 4 | /*-- scss:rules --*/ 5 | 6 | body { 7 | color:#0b0c0c; 8 | font-family: arial,sans-serif; 9 | -webkit-font-smoothing:antialiased; 10 | -moz-osx-font-smoothing:grayscale; 11 | } 12 | 13 | 14 | /* !!!---- STYLES TO UPDATE FROM DESIGN SYTEM CSS ----!!! */ 15 | 16 | /*.govuk-heading-xl*/ 17 | h1 { 18 | font-weight:700; 19 | font-size:32px; 20 | font-size:2rem; 21 | line-height:1.09375; 22 | display:block; 23 | margin-top:0; 24 | margin-bottom:30px 25 | } 26 | 27 | /*.govuk-heading-l*/ 28 | h2 { 29 | font-weight:700; 30 | font-size:24px; 31 | font-size:1.5rem; 32 | line-height:1.0416666667; 33 | display:block; 34 | margin-top:0; 35 | margin-bottom:20px 36 | } 37 | 38 | /*.govuk-heading-m*/ 39 | h3 { 40 | font-weight:700; 41 | font-size:18px; 42 | font-size:1.125rem; 43 | line-height:1.1111111111; 44 | display:block; 45 | margin-top:0; 46 | margin-bottom:15px 47 | } 48 | 49 | /*.govuk-heading-s*/ 50 | h4 { 51 | font-weight:400; 52 | font-size:14px; 53 | font-size:.875rem; 54 | line-height:1.1428571429; 55 | margin-top:0; 56 | margin-bottom:15px 57 | } 58 | 59 | /*.govuk-body,.govuk-body-m */ 60 | p { 61 | font-weight:400; 62 | font-size:16px; 63 | font-size:1rem; 64 | line-height:1.25; 65 | margin-top:0; 66 | margin-bottom:15px 67 | } 68 | 69 | /*govuk-body-l,.govuk-body-lead*/ 70 | p.lead { 71 | font-weight:400; 72 | font-size:18px; 73 | font-size:1.125rem; 74 | line-height:1.1111111111; 75 | margin-top:0; 76 | margin-bottom:20px 77 | } 78 | 79 | 80 | /* !!!---- END STYLES TO UPDATE FROM DESIGN SYTEM CSS ----!!! */ 81 | 82 | 83 | a:link { 84 | color: #1d70b8; 85 | } 86 | 87 | a:visited { 88 | color: #4c2c92; 89 | } 90 | 91 | a:active { 92 | color: none; 93 | background-color: none; 94 | } 95 | 96 | a:hover { 97 | color: #003078; 98 | text-decoration-thickness: 3px; 99 | } 100 | 101 | p a:active { 102 | color: black; 103 | background-color: #ffdd00; 104 | text-decoration-thickness: 3px; 105 | } 106 | 107 | 108 | /* styling for tile header links */ 109 | 110 | h3 a:link { 111 | color: black; 112 | text-decoration: none; 113 | } 114 | 115 | h3 a:hover { 116 | color: #003078; 117 | text-decoration: underline; 118 | text-decoration-thickness: 3px; 119 | } 120 | 121 | h3 a:active { 122 | color: black; 123 | text-decoration: underline; 124 | background-color: #ffdd00; 125 | text-decoration-thickness: 3px; 126 | } 127 | 128 | 129 | h3 a:visited { 130 | color: black; 131 | text-decoration: none; 132 | } 133 | 134 | 135 | table { 136 | width: 100%; 137 | overflow-x: auto; 138 | } 139 | 140 | td { 141 | width: 20%; 142 | } 143 | 144 | td, tr { 145 | background-color: white !important; 146 | } 147 | 148 | img:hover { 149 | -webkit-filter: saturate(4); 150 | filter: saturate(4); 151 | } 152 | 153 | /* styling for panel tabset headings */ 154 | .panel-tabset .nav-item, 155 | .panel-tabset .nav-item a:visited { 156 | color: black; 157 | text-decoration: none; 158 | } 159 | 160 | .panel-tabset .nav-item a:hover { 161 | text-decoration: underline; 162 | text-decoration-thickness: 3px; 163 | } 164 | 165 | .panel-tabset .nav-item a:active, 166 | .panel-tabset .nav-item a:focus { 167 | font-weight:700; 168 | text-decoration: underline; 169 | text-decoration-thickness: 3px; 170 | } 171 | 172 | 173 | .body-text { 174 | margin-left: 150px; 175 | font-size: 18px; 176 | } 177 | 178 | 179 | 180 | #toc-title { 181 | display: none; 182 | } 183 | 184 | #TOC a { 185 | font-size:16px; 186 | color: #1d70b8 !important; 187 | border: none !important; 188 | } 189 | 190 | #TOC a:hover{ 191 | text-decoration: underline; 192 | text-decoration-thickness: max(3px, .1875rem, .12em); 193 | text-underline-offset: .1578em; 194 | text-decoration-skip-ink: none; 195 | color: #003078 !important; 196 | border: none !important; 197 | } 198 | 199 | 200 | #TOC a.active{ 201 | border: initial !important; 202 | border-left-style: solid !important; 203 | } 204 | 205 | .nav-link { 206 | color: #1d70b8 207 | } 208 | 209 | /* section numbering */ 210 | .header-section-number { 211 | color: inherit; 212 | } 213 | 214 | .table>:not(caption)>*>* { 215 | box-shadow: None; 216 | } 217 | 218 | @media print { 219 | .panel-tabset > .tab-content > .tab-pane { 220 | display: block !important; 221 | } 222 | 223 | .panel-tabset > .tab-content { 224 | border: none; 225 | padding: 0; 226 | } 227 | 228 | .panel-tabset > .nav-tabs { 229 | display: none; 230 | } 231 | 232 | .tabset-margin-container { 233 | display: none; 234 | } 235 | 236 | .tab-pane > p { 237 | padding-top: 0 !important; 238 | } 239 | 240 | } 241 | 242 | /* resize for mobile */ 243 | 244 | @media only screen and (max-width: 800px) { 245 | th:nth-child(3) { 246 | display:none; 247 | } 248 | td:nth-child(3) { 249 | display:none; 250 | } 251 | th:nth-child(4) { 252 | display:none; 253 | } 254 | td:nth-child(4) { 255 | display:none; 256 | } 257 | 258 | } 259 | 260 | -------------------------------------------------------------------------------- /example_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DataS-DHSC/dhsc_quarto_template/b6a9253a0da3b85af3719a395bf5d5d58d584848/example_image.png -------------------------------------------------------------------------------- /template_DHSC_HTML.qmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: Untitled 3 | output-file: DHSC_HTML_example 4 | format: 5 | DHSC-html: default 6 | execute: 7 | echo: false 8 | warning: false 9 | --- 10 | 11 | This template is an example of how to write a report in the **DHSC** style. 12 | 13 | You can edit this file and press the `Render` button to produce a HTML document. 14 | 15 | When using the DHSC template, use one hash symbol for headings and two hash 16 | symbols for subheadings and so on. Up to five levels of heading can be used (five 17 | hash symbols). 18 | 19 | You can learn more about controlling the appearance of HTML output on the [quarto website](https://quarto.org/docs/output-formats/html-basics.html). 20 | 21 | # A heading 22 | 23 | Some text here.... 24 | 25 | ## A subheading 26 | 27 | Text under a subheading... 28 | 29 | # Further heading 30 | 31 | More text here... 32 | 33 | ## A Subheading 34 | 35 | Different text here... 36 | 37 | ### Third level subheading 38 | 39 | #### Fourth level subheading 40 | 41 | Some text here... 42 | 43 | ##### Fifth level subheading 44 | 45 | ## Another Subheading 46 | 47 | More text here... 48 | 49 | # Quarto HTML tips 50 | 51 | Example of adding a table using the htmlTable package. 52 | 53 | ```{r Data table} 54 | 55 | library(htmlTable) 56 | 57 | htmlTable(head(iris, 10), rnames = FALSE) 58 | 59 | ``` 60 | 61 | Example of producing an interactive chart using the plotly package. 62 | 63 | ```{r Chart} 64 | 65 | library(plotly) 66 | 67 | fig <- plot_ly( 68 | data = iris, 69 | x = ~Sepal.Length, 70 | y = ~Petal.Length 71 | ) |> 72 | config(displaylogo = FALSE, 73 | modeBarButtons = list(list("toImage")), 74 | toImageButtonOptions = list(format = "svg", 75 | filename = "Chart", 76 | width = 900, 77 | height = 640)) 78 | 79 | fig 80 | 81 | ``` 82 | 83 | Example of producing a tabset. 84 | 85 | ::: panel-tabset 86 | # Tab 1 87 | 88 | Text on tab 1. 89 | 90 | # Tab 2 91 | 92 | Text on tab 2. 93 | ::: 94 | -------------------------------------------------------------------------------- /template_DHSC_powerpoint.qmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Powerpoint template" 3 | subtitle: "Presentation subtitle" 4 | output-file: DHSC_powerpoint_example 5 | author: "Author name" 6 | date: today 7 | number-sections: true 8 | format: 9 | DHSC-pptx 10 | execute: 11 | echo: false 12 | warning: false 13 | --- 14 | 15 | # Section header slide 16 | 17 | ## Guidance 18 | 19 | **To do:** 20 | 21 | - Update the details at the top of the page for your presentation. 22 | 23 | - Create your powerpoint by choosing the types of slides you require and replacing the placeholder text with your contents. 24 | 25 | - To render the powerpoint, save this file and press render. 26 | 27 | **Tips:** 28 | 29 | - Slides are defined with a level 2 heading (##). 30 | 31 | - To add bullet points, use a hyphen followed by 2 spaces then the text, and a blank line between each bullet point. 32 | 33 | ## Guidance (2) 34 | 35 | - Quarto has seven styles of slide layouts which it can use, as shown in this example. However, additional DHSC slide layouts can be manually added in PowerPoint after it has been rendered. 36 | 37 | - [Information about slide types](https://quarto.org/docs/presentations/powerpoint.html#slide-layouts). 38 | 39 | - Once rendered and in PowerPoint, you can make further changes if required. 40 | 41 | ## Guidance (3) 42 | 43 | To add R code or an R output (see options on the [Quarto website](https://quarto.org/docs/reference/cells/cells-knitr.html#overview)). 44 | 45 | To combine text with code outputs, the code chunk options need to be `results: asis` and the text needs to be within the `cat()` function. 46 | 47 | ```{r} 48 | #| results: asis 49 | cat(paste0("For example, there are ", nrow(mtcars), " cars in the mtcars dataset.")) 50 | ``` 51 | 52 | ## Title and Content slide 53 | 54 | This is a Title and Content slide. 55 | 56 | - Bullet point 1 57 | 58 | - Bullet point 2 59 | 60 | ## 61 | 62 | ::: notes 63 | Speaker notes go here. This is a blank slide. 64 | ::: 65 | 66 | ## Two Content slide 67 | 68 | ::: columns 69 | ::: column 70 | contents column 1... 71 | ::: 72 | 73 | ::: column 74 | contents column 2... 75 | ::: 76 | ::: 77 | 78 | ## Comparison slide 79 | 80 | ::: columns 81 | ::: column 82 | contents column 1... 83 | 84 | ```{r} 85 | htmlTable::htmlTable(head(mtcars[1:2])) 86 | ``` 87 | ::: 88 | 89 | ::: column 90 | contents column 2... 91 | 92 | ```{r} 93 | plot(head(mtcars[1:2])) 94 | ``` 95 | ::: 96 | ::: 97 | 98 | ## Content with Caption 99 | 100 | ```{r} 101 | htmlTable::htmlTable(head(mtcars[1:2])) 102 | ``` 103 | 104 | ## Picture with Caption 105 | 106 | - The caption for the image goes in the square brackets - this can be left blank if no caption is needed. 107 | 108 | - The file path for the image goes in the round brackets. 109 | 110 | - More options can be found on the [Quarto website](https://quarto.org/docs/authoring/figures.html). 111 | 112 | - You need to manually add alt-text to figures by opening the presentation in PowerPoint. 113 | 114 | ![Logo](example_image.png) 115 | -------------------------------------------------------------------------------- /template_GOVUK_HTML.qmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'GOVUK Template' 3 | output-file: GOVUK_HTML_example 4 | format: 5 | govuk-html 6 | execute: 7 | echo: false 8 | warning: false 9 | --- 10 | 11 | This template is an example of how to write a report in the **GOV.UK** style. 12 | 13 | You can edit this file and press the `Render` button to produce a HTML document. 14 | 15 | When using the GOVUK template, use two hash symbols for headings and three hash 16 | symbols for subheadings. 17 | 18 | You can learn more about controlling the appearance of HTML output on the [quarto website](https://quarto.org/docs/output-formats/html-basics.html). 19 | 20 | ## A heading 21 | 22 | Some text here.... 23 | 24 | ### A subheading 25 | 26 | Text under a subheading... 27 | 28 | ## Further heading 29 | 30 | More text here... 31 | 32 | ### A Subheading 33 | 34 | Different text here... 35 | 36 | ### Another Subheading 37 | 38 | More text here... 39 | 40 | ## Quarto HTML tips 41 | 42 | Example of adding a table using the htmlTable package. 43 | 44 | ```{r Data table} 45 | 46 | library(htmlTable) 47 | 48 | htmlTable(head(iris, 10), rnames = FALSE) 49 | 50 | ``` 51 | 52 | Example of producing an interactive chart using the plotly package. 53 | 54 | ```{r Chart} 55 | 56 | library(plotly) 57 | 58 | fig <- plot_ly( 59 | data = iris, 60 | x = ~Sepal.Length, 61 | y = ~Petal.Length 62 | ) |> 63 | config(displaylogo = FALSE, 64 | modeBarButtons = list(list("toImage")), 65 | toImageButtonOptions = list(format = "svg", 66 | filename = "Chart", 67 | width = 900, 68 | height = 640)) 69 | 70 | fig 71 | 72 | ``` 73 | 74 | Example of producing a tabset. 75 | 76 | ::: panel-tabset 77 | ## Tab 1 78 | 79 | Text on tab 1. 80 | 81 | ## Tab 2 82 | 83 | Text on tab 2. 84 | ::: 85 | 86 | ## GOVUK specific template features 87 | 88 | Create a GOVUK styled button to download a dataset. This uses the downloadthis package and the "govuk-button govuk-button--secondary" class provided by GOVUK template. 89 | 90 | ```{r Download button} 91 | 92 | library(downloadthis) 93 | 94 | iris |> 95 | download_this( 96 | output_name = 'My data', 97 | output_extension = ".csv", 98 | button_label = "Download data", 99 | button_type = "default", 100 | has_icon = FALSE, 101 | icon = "arrow-down-to-line", 102 | self_contained = TRUE, 103 | class = "govuk-button govuk-button--secondary", 104 | csv2 = FALSE 105 | ) 106 | 107 | ``` 108 | 109 | An example of adding an "expander" to provide a drop down with further information 110 | 111 | ```{r expander} 112 | #| results: "asis" 113 | 114 | source('Scripts/html_functions.R') 115 | 116 | expander(title = 'Further information', 117 | details = 'Details of the section that you may not want to show as part of the main page but as extra information for anyone particularly interested.') 118 | 119 | ``` 120 | -------------------------------------------------------------------------------- /template_OHID_HTML.qmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: Untitled 3 | output-file: OHID_HTML_example 4 | format: 5 | OHID-html: default 6 | execute: 7 | echo: false 8 | warning: false 9 | --- 10 | 11 | This template is an example of how to write a report in the **OHID** style. 12 | 13 | You can edit this file and press the `Render` button to produce a HTML document. 14 | 15 | When using the OHID template, use one hash symbol for headings and two hash 16 | symbols for subheadings and so on. Up to five levels of heading can be used (five 17 | hash symbols). 18 | 19 | You can learn more about controlling the appearance of HTML output on the [quarto website](https://quarto.org/docs/output-formats/html-basics.html). 20 | 21 | # A heading 22 | 23 | Some text here.... 24 | 25 | ## A subheading 26 | 27 | Text under a subheading... 28 | 29 | # Further heading 30 | 31 | More text here... 32 | 33 | ## A Subheading 34 | 35 | Different text here... 36 | 37 | ### Third level subheading 38 | 39 | #### Fourth level subheading 40 | 41 | Some text here... 42 | 43 | ##### Fifth level subheading 44 | 45 | ## Another Subheading 46 | 47 | More text here... 48 | 49 | # Quarto HTML tips 50 | 51 | Example of adding a table using the htmlTable package. 52 | 53 | ```{r Data table} 54 | 55 | library(htmlTable) 56 | 57 | htmlTable(head(iris, 10), rnames = FALSE) 58 | 59 | ``` 60 | 61 | Example of producing an interactive chart using the plotly package. 62 | 63 | ```{r Chart} 64 | 65 | library(plotly) 66 | 67 | fig <- plot_ly( 68 | data = iris, 69 | x = ~Sepal.Length, 70 | y = ~Petal.Length 71 | ) |> 72 | config(displaylogo = FALSE, 73 | modeBarButtons = list(list("toImage")), 74 | toImageButtonOptions = list(format = "svg", 75 | filename = "Chart", 76 | width = 900, 77 | height = 640)) 78 | 79 | fig 80 | 81 | ``` 82 | 83 | Example of producing a tabset. 84 | 85 | ::: panel-tabset 86 | # Tab 1 87 | 88 | Text on tab 1. 89 | 90 | # Tab 2 91 | 92 | Text on tab 2. 93 | ::: 94 | -------------------------------------------------------------------------------- /template_OHID_powerpoint.qmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Powerpoint template" 3 | subtitle: "Presentation subtitle" 4 | output-file: OHID_powerpoint_example 5 | author: "Author name" 6 | date: today 7 | number-sections: true 8 | format: 9 | OHID-pptx 10 | execute: 11 | echo: false 12 | warning: false 13 | --- 14 | 15 | # Section header slide 16 | 17 | ## Guidance 18 | 19 | **To do:** 20 | 21 | - Update the details at the top of the page for your presentation. 22 | 23 | - Create your powerpoint by choosing the types of slides you require and replacing the placeholder text with your contents. 24 | 25 | - To render the powerpoint, save this file and press render. 26 | 27 | **Tips:** 28 | 29 | - Slides are defined with a level 2 heading (##). 30 | 31 | - To add bullet points, use a hyphen followed by 2 spaces then the text, and a blank line between each bullet point. 32 | 33 | ## Guidance (2) 34 | 35 | - Quarto has seven styles of slide layout which it can use, as shown in this example. However, additional OHID slide layouts can be manually added in PowerPoint after it has been rendered. 36 | 37 | - [Information about slide types](https://quarto.org/docs/presentations/powerpoint.html#slide-layouts). 38 | 39 | - Once rendered and in PowerPoint you can make further changes if required. 40 | 41 | ## Guidance (3) 42 | 43 | To add R code or an R output (see options on the [Quarto website](https://quarto.org/docs/reference/cells/cells-knitr.html#overview)). 44 | 45 | To combine text with code outputs outputs, the code chunk options need to be 'results: asis' and the text needs to be within the cat() function. 46 | 47 | ```{r} 48 | #| results: asis 49 | cat(paste0("For example, there are ", nrow(mtcars), " cars in the mtcars dataset.")) 50 | ``` 51 | 52 | ## Title and Content slide 53 | 54 | This is a Title and Content slide. 55 | 56 | - Bullet point 1 57 | 58 | - Bullet point 2 59 | 60 | ## 61 | 62 | ::: notes 63 | Speaker notes go here. This is a blank slide. 64 | ::: 65 | 66 | ## Two Content slide 67 | 68 | ::: columns 69 | ::: column 70 | contents column 1... 71 | ::: 72 | 73 | ::: column 74 | contents column 2... 75 | ::: 76 | ::: 77 | 78 | ## Comparison slide 79 | 80 | ::: columns 81 | ::: column 82 | contents column 1... 83 | 84 | ```{r} 85 | htmlTable::htmlTable(head(mtcars[1:2])) 86 | ``` 87 | ::: 88 | 89 | ::: column 90 | contents column 2... 91 | 92 | ```{r} 93 | plot(head(mtcars[1:2])) 94 | ``` 95 | ::: 96 | ::: 97 | 98 | ## Content with Caption 99 | 100 | ```{r} 101 | htmlTable::htmlTable(head(mtcars[1:2])) 102 | ``` 103 | 104 | ## Picture with Caption 105 | 106 | - The caption for the image goes in the square brackets, this can be left blank if no caption is needed. 107 | 108 | - The file path for the image goes in the round brackets. 109 | 110 | - More options can be found on the [Quarto website](https://quarto.org/docs/authoring/figures.html). 111 | 112 | - You need to manually add alt-text to figures by opening the presentation in PowerPoint. 113 | 114 | ![Logo](example_image.png) 115 | --------------------------------------------------------------------------------