Add new NHS-R website in gallery

_freeze/docs/gallery/index/execute-results/html.json

@@ -2,7 +2,7 @@
   "hash": "ae771c86aa2b44ae71e8d150036ac29b",
   "result": {
     "engine": "knitr",
-    "markdown": "---\npagetitle: \"Gallery\"\nformat:\n  html:\n    toc: false\nimage: articles/advanced-layout-pdf.png\nsearch: false\nexecute:\n  echo: false\nlisting:\n  - id: gallery\n    template: gallery.ejs\n    contents: gallery.yml\ndescription: |\n  A gallery of example documents, websites, books, and presentations created with Quarto.\naliases:\n  - /docs/dashboards/examples/index.html\n  - /docs/dashboards/examples/\n---\n\n\n\n\n\n::: {#hero-banner .column-screen}\n::: {.grid .column-page}\n::: {.headline .g-col-lg-6 .g-col-12 .g-col-md-12}\n::: h1\nGallery\n:::\n\nQuarto can produce a wide variety of output formats. Here are some examples:\n\n-   [Articles & Reports](#articles-reports)\n-   [Presentations](#presentations)\n-   [Dashboards](#dashboards)\n-   [Websites](#websites)\n-   [Books](#books)\n-   [Interactive Docs](#interactive-docs)\n:::\n\n\n\n\n\n::: {.cell .g-col-lg-6 .g-col-12 .g-col-md-12}\n::: {.cell-output-display}\n\n```{=html}\n<div id=\"gallery-carousel\" class=\"carousel carousel-dark slide\" data-bs-ride=\"carousel\">\n<div class=\"carousel-indicators\">\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"0\" aria-label=\"Slide 1\" class=\"active\" aria-current=\"true\"></button>\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"1\" aria-label=\"Slide 2\"></button>\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"2\" aria-label=\"Slide 3\"></button>\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"3\" aria-label=\"Slide 4\"></button>\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"4\" aria-label=\"Slide 5\"></button>\n</div>\n<div class=\"carousel-inner\">\n<div class=\"carousel-item active\" data-bs-interval=\"5000\">\n<a href=\"#articles-reports\">\n<img src=\"articles/advanced-layout-pdf.png\" class=\"d-block  mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Articles and reports with Python and R</p>\n</div>\n</div>\n<div class=\"carousel-item\" data-bs-interval=\"5000\">\n<a href=\"#presentations\">\n<img src=\"presentations/presentations.png\" class=\"d-block  mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Create data-driven presentations</p>\n</div>\n</div>\n<div class=\"carousel-item\" data-bs-interval=\"5000\">\n<a href=\"#interactive-docs\">\n<img src=\"interactive/interactive-jupyter.png\" class=\"d-block  mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Engage readers with interactivity</p>\n</div>\n</div>\n<div class=\"carousel-item\" data-bs-interval=\"5000\">\n<a href=\"#websites\">\n<img src=\"websites/websites-quarto.png\" class=\"d-block  mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Publish collections of articles as a website</p>\n</div>\n</div>\n<div class=\"carousel-item\" data-bs-interval=\"5000\">\n<a href=\"#books\">\n<img src=\"websites/websites-jupyter.png\" class=\"d-block  mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Create multi-format books</p>\n</div>\n</div>\n</div>\n<button class=\"carousel-control-prev\" type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide=\"prev\">\n<span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n<span class=\"visually-hidden\">Prevoius</span>\n</button>\n<button class=\"carousel-control-next\" type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide=\"next\">\n<span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n<span class=\"visually-hidden\">Next</span>\n</button>\n</div>\n```\n\n:::\n:::\n\n\n\n\n:::\n:::\n\n::: {#gallery .column-page}\n:::\n\n\n\n\n\n```{=html}\n<style>\n\n#hero-banner {\n  padding-top: 35px;\n  background-color: rgb(237,243,249);\n}\n\n#quarto-content main { \n  margin-top: 0;\n  padding-top: 0;\n}\n\nhtml {\n  scroll-behavior: smooth;\n}\n\n.headline {\n  font-size: 1.25em;\n  font-weight: 300;\n  padding-bottom: 1em;\n}\n\n.headline p {\n  margin: 0;\n  padding-bottom: 0.2rem;\n}\n\n.headline a {\n  text-decoration: none;\n}\n\n.headline ul li {\n  margin-bottom: 0.3em;\n}\n\n.carousel.card {\n  padding-top: 2em;\n}\n\n.carousel img {\n  width: 70%;\n  margin-bottom: 110px;\n}\n\n.carousel-control-prev-icon, .carousel-control-next-icon {\n  margin-bottom: 110px;\n}\n\n.carousel-caption {\n  padding-top: 1em;\n}\n\n.touch {\n  \n}\n</style>\n```\n",
+    "markdown": "---\npagetitle: \"Gallery\"\nformat:\n  html:\n    toc: false\nimage: articles/advanced-layout-pdf.png\nsearch: false\nexecute:\n  echo: false\nlisting:\n  - id: gallery\n    template: gallery.ejs\n    contents: gallery.yml\ndescription: |\n  A gallery of example documents, websites, books, and presentations created with Quarto.\naliases:\n  - /docs/dashboards/examples/index.html\n  - /docs/dashboards/examples/\n---\n\n\n\n::: {#hero-banner .column-screen}\n::: {.grid .column-page}\n::: {.headline .g-col-lg-6 .g-col-12 .g-col-md-12}\n::: h1\nGallery\n:::\n\nQuarto can produce a wide variety of output formats. Here are some examples:\n\n-   [Articles & Reports](#articles-reports)\n-   [Presentations](#presentations)\n-   [Dashboards](#dashboards)\n-   [Websites](#websites)\n-   [Books](#books)\n-   [Interactive Docs](#interactive-docs)\n:::\n\n\n\n::: {.cell .g-col-lg-6 .g-col-12 .g-col-md-12}\n::: {.cell-output-display}\n\n```{=html}\n<div id=\"gallery-carousel\" class=\"carousel carousel-dark slide\" data-bs-ride=\"carousel\">\n<div class=\"carousel-indicators\">\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"0\" aria-label=\"Slide 1\" class=\"active\" aria-current=\"true\"></button>\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"1\" aria-label=\"Slide 2\"></button>\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"2\" aria-label=\"Slide 3\"></button>\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"3\" aria-label=\"Slide 4\"></button>\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"4\" aria-label=\"Slide 5\"></button>\n</div>\n<div class=\"carousel-inner\">\n<div class=\"carousel-item active\" data-bs-interval=\"5000\">\n<a href=\"#articles-reports\">\n<img src=\"articles/advanced-layout-pdf.png\" class=\"d-block  mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Articles and reports with Python and R</p>\n</div>\n</div>\n<div class=\"carousel-item\" data-bs-interval=\"5000\">\n<a href=\"#presentations\">\n<img src=\"presentations/presentations.png\" class=\"d-block  mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Create data-driven presentations</p>\n</div>\n</div>\n<div class=\"carousel-item\" data-bs-interval=\"5000\">\n<a href=\"#interactive-docs\">\n<img src=\"interactive/interactive-jupyter.png\" class=\"d-block  mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Engage readers with interactivity</p>\n</div>\n</div>\n<div class=\"carousel-item\" data-bs-interval=\"5000\">\n<a href=\"#websites\">\n<img src=\"websites/websites-quarto.png\" class=\"d-block  mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Publish collections of articles as a website</p>\n</div>\n</div>\n<div class=\"carousel-item\" data-bs-interval=\"5000\">\n<a href=\"#books\">\n<img src=\"websites/websites-jupyter.png\" class=\"d-block  mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Create multi-format books</p>\n</div>\n</div>\n</div>\n<button class=\"carousel-control-prev\" type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide=\"prev\">\n<span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n<span class=\"visually-hidden\">Prevoius</span>\n</button>\n<button class=\"carousel-control-next\" type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide=\"next\">\n<span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n<span class=\"visually-hidden\">Next</span>\n</button>\n</div>\n```\n\n:::\n:::\n\n\n:::\n:::\n\n::: {#gallery .column-page}\n:::\n\n\n\n```{=html}\n<style>\n\n#hero-banner {\n  padding-top: 35px;\n  background-color: rgb(237,243,249);\n}\n\n#quarto-content main { \n  margin-top: 0;\n  padding-top: 0;\n}\n\nhtml {\n  scroll-behavior: smooth;\n}\n\n.headline {\n  font-size: 1.25em;\n  font-weight: 300;\n  padding-bottom: 1em;\n}\n\n.headline p {\n  margin: 0;\n  padding-bottom: 0.2rem;\n}\n\n.headline a {\n  text-decoration: none;\n}\n\n.headline ul li {\n  margin-bottom: 0.3em;\n}\n\n.carousel.card {\n  padding-top: 2em;\n}\n\n.carousel img {\n  width: 70%;\n  margin-bottom: 110px;\n}\n\n.carousel-control-prev-icon, .carousel-control-next-icon {\n  margin-bottom: 110px;\n}\n\n.carousel-caption {\n  padding-top: 1em;\n}\n\n.touch {\n  \n}\n</style>\n```\n",
     "supporting": [],
     "filters": [
       "rmarkdown/pagebreak.lua"

docs/gallery/gallery.yml

@@ -339,6 +339,11 @@
       href: https://labs.ala.org.au/
       code: https://github.com/AtlasOfLivingAustralia/ala-labs
       thumbnail: websites/website-ala-labs.png
+    - title: NHS-R community
+      subtitle: Website for ecological dataviz, analysis & research
+      href: https://nhsrcommunity.com
+      code: https://github.com/nhs-r-community/nhs-r-community
+      thumbnail: websites/nhs-r-website.png
 
 
 - category: Books

tools/gallery-screenshot.R

@@ -19,5 +19,7 @@ if (xfun::file_ext(image_path) != "png") {
 url <- args[2]
 
 # taking the size from previous image
-infos <- magick::image_read("docs/gallery/dashboards/housing-market-dashboard.png")  |> magick::image_info()
+example <- "docs/gallery/dashboards/housing-market-dashboard.png"
+if (!is.na(args[3])) example <- args[3]
+infos <- magick::image_read(example)  |> magick::image_info()
 webshot2::webshot(url, image_path, vwidth = infos$width, vheight = infos$height)