From 292882f351c74164ef6ae7312986f80a624763d8 Mon Sep 17 00:00:00 2001
From: dgkf <18220321+dgkf@users.noreply.github.com>
Date: Thu, 6 Jun 2024 19:50:08 -0400
Subject: [PATCH] embedding background in custom theme scss to avoid quarto bug

---
 _extensions/pharmaR/rvalhub/_extension.yml | 27 +++++++++++++++-------
 _extensions/pharmaR/rvalhub/custom.scss    |  1 +
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/_extensions/pharmaR/rvalhub/_extension.yml b/_extensions/pharmaR/rvalhub/_extension.yml
index df258f4..f56d103 100644
--- a/_extensions/pharmaR/rvalhub/_extension.yml
+++ b/_extensions/pharmaR/rvalhub/_extension.yml
@@ -6,11 +6,10 @@ contributes:
   formats:
     revealjs:
       # general
-
-      self-contained: true
+      embed-resources: true
       theme: [default, custom.scss, custom-light.scss]
       template-partials:
-        - revealjs-assets/title-slide.html      
+        - revealjs-assets/title-slide.html
 
       # code
       highlight-style: arrow
@@ -19,11 +18,15 @@ contributes:
 
       # assets
       logo: assets/logo.svg
-      background-image: assets/swirling-margins.svg
+      ## NOTE:
+      ## background-image embedding currently ignored
+      ## encoded in custom.scss `.reveal .backgrounds { background-image: }` instead
+      ## https://github.com/quarto-dev/quarto-cli/issues/980
+      # background-image: assets/swirling-margins.svg
 
     revealjs+light:
       # general
-      self-contained: true
+      embed-resources: true
       theme: [default, custom.scss, custom-light.scss]
       template-partials:
         - revealjs-assets/title-slide.html      
@@ -35,11 +38,15 @@ contributes:
 
       # assets
       logo: assets/logo.svg
-      background-image: assets/swirling-margins.svg
+      ## NOTE:
+      ## background-image embedding currently ignored
+      ## encoded in custom.scss `.reveal .backgrounds { background-image: }` instead
+      ## https://github.com/quarto-dev/quarto-cli/issues/980
+      # background-image: assets/swirling-margins.svg
 
     revealjs+dark:
       # general
-      self-contained: true
+      embed-resources: true
       theme: [dark, custom.scss, custom-dark.scss]
       template-partials:
         - revealjs-assets/title-slide.html      
@@ -51,4 +58,8 @@ contributes:
 
       # assets
       logo: assets/logo.svg
-      background-image: assets/swirling-margins.svg
+      ## NOTE:
+      ## background-image embedding currently ignored
+      ## encoded in custom.scss `.reveal .backgrounds { background-image: }` instead
+      ## https://github.com/quarto-dev/quarto-cli/issues/980
+      # background-image: assets/swirling-margins.svg
diff --git a/_extensions/pharmaR/rvalhub/custom.scss b/_extensions/pharmaR/rvalhub/custom.scss
index 461e2c0..16170db 100644
--- a/_extensions/pharmaR/rvalhub/custom.scss
+++ b/_extensions/pharmaR/rvalhub/custom.scss
@@ -17,6 +17,7 @@ $code-block-border-color: transparent;
   .backgrounds {
     background-size: cover;
     background-position-y: center;
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><!-- rects --><path d="M 1000 -1000 L 1000 1000 80 1000 80 -1000 M -1000 -1000 L -1000 1000 -80 1000 -80 -1000" fill="%234D8DC930" ><animateTransform attributeName="transform" attributeType="XML" type="rotate" repeatCount="indefinite" from="0 0 50" to="360 0 50" dur="60s" ></animateTransform></path><path d="M 1000 -1000 L 1000 1000 85 1000 85 -1000 M -1000 -1000 L -1000 1000 -85 1000 -85 -1000" fill="%234D8DC940" ><animateTransform attributeName="transform" attributeType="XML" type="rotate" repeatCount="indefinite" from="60 0 50" to="420 0 50" dur="65s" ></animateTransform></path><path d="M 1000 -1000 L 1000 1000 90 1000 90 -1000 M -1000 -1000 L -1000 1000 -90 1000 -90 -1000" fill="%234D8DC950" ><animateTransform attributeName="transform" attributeType="XML" type="rotate" repeatCount="indefinite" from="120 0 50" to="480 0 50" dur="70s" ></animateTransform></path><path d="M 1000 -1000 L 1000 1000 80 1000 80 -1000 M -1000 -1000 L -1000 1000 -80 1000 -80 -1000" fill="%234D8DC960" ><animateTransform attributeName="transform" attributeType="XML" type="rotate" repeatCount="indefinite" from="180 0 50" to="540 0 50" dur="75s" ></animateTransform></path><path d="M 1000 -1000 L 1000 1000 85 1000 85 -1000 M -1000 -1000 L -1000 1000 -85 1000 -85 -1000" fill="%234D8DC970" ><animateTransform attributeName="transform" attributeType="XML" type="rotate" repeatCount="indefinite" from="240 0 50" to="600 0 50" dur="80s" ></animateTransform></path><path d="M 1000 -1000 L 1000 1000 90 1000 90 -1000 M -1000 -1000 L -1000 1000 -90 1000 -90 -1000" fill="%234D8DC980" ><animateTransform attributeName="transform" attributeType="XML" type="rotate" repeatCount="indefinite" from="300 0 50" to="660 0 50" dur="85s" ></animateTransform></path></svg>');
   }
 
   .slide-logo {