Merge pull request #5 from pharmaR/3-readme

Update install instructions; minor theme changes
pharmaR · Jun 7, 2024 · 67da1b9 · 67da1b9
2 parents e61832d + f8e4731
commit 67da1b9
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 23 deletions.
diff --git a/.github/workflows/quarto.yml b/.github/workflows/quarto.yml
@@ -0,0 +1,44 @@
+on:
+  push:
+    branches: main
+  pull_request:
+    branches:
+      - main
+
+name: Render and Publish
+
+jobs:
+  build-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v3
+
+      - name: Set up Quarto
+        uses: quarto-dev/quarto-actions/setup@v2
+        with:
+          # To install LaTeX to build PDF book 
+          tinytex: true 
+          # uncomment below and fill to pin a version
+          # version: SPECIFIC-QUARTO-VERSION-HERE
+
+      - uses: r-lib/actions/setup-r@v2
+        with:
+          r-version: '4.3.1'
+
+      - uses: r-lib/actions/setup-r-dependencies@v2
+        with:
+          packages:
+            any::here
+            any::knitr
+            any::rmarkdown
+            any::thematic
+            any::ggplot2
+
+      - name: Publish to GitHub Pages (and render)
+        uses: quarto-dev/quarto-actions/publish@v2
+        with:
+          target: gh-pages
+          path: example.qmd
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # this secret is always available for github actions
diff --git a/README.md b/README.md
@@ -1,5 +1,7 @@
 # R Validation Hub `quarto` Theme
 
+[_view an example slidedeck in your browser_](https://pharmar.github.io/rvalhub-quarto)
+
 [preview.webm](https://github.com/pharmaR/rvalhub-quarto/assets/18220321/cfc056b1-a0d2-411b-be87-aa81f4fdae30)
 
 `format: rvalhub-revealjs+light` (or default alias, `rvalhub-revealjs`)
@@ -13,17 +15,17 @@
 ### Installing
 
 After creating your new quarto presentation, you can add the R Validation Hub
-theme by following a simple, two-step installation process.
+theme by following a simple installation process:
 
 ```bash
-quarto add pharmaR/rvalhub-quarto
+quarto install extension pharmaR/rvalhub-quarto
 ```
 
 <details>
 <summary><i>alternatively install from an archive url</i></summary>
 
 ```bash
-quarto add https://github.com/pharmaR/rvalhub-quarto/archive/refs/heads/main.zip
+quarto install extension https://github.com/pharmaR/rvalhub-quarto/archive/refs/heads/main.zip
 ```
 
 </details>
@@ -74,7 +76,7 @@ quarto create  # follow prompts to start a default project
 2. Add `quarto` format extension
 
 ```
-quarto add pharmaR/rvalhub-quarto
+quarto install extension pharmaR/rvalhub-quarto
 ```
 
 3. Update your `_quarto.yml` file
@@ -87,4 +89,4 @@ or use the dark variant by using:
 
 ```diff
 + format: rvalhub-revealjs+dark
-```
+```
diff --git 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
@@ -9,16 +9,22 @@ $code-block-border-color: transparent;
 
 /*-- scss:rules --*/
 .reveal {
-  .slide-logo {
-    max-height: 12.5vh !important;
-    max-width: 20vw !important;
-  }  
+  .title-logo {
+    width: 35%;
+    max-height: 10%;
+  }
 
   .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 {
+    max-height: 12.5vh !important;
+    max-width: 20vw !important;
+  }  
+
   .slide-logo-title {
     visibility: hidden;
   }
@@ -34,16 +40,25 @@ $code-block-border-color: transparent;
         backdrop-filter: blur(10px);
       }
 
-      // line number gutters
-      span > a::before {
+      // add background color to line number gutter
+      code.sourceCode::after {
+        content: counter(source-line);
+        position: absolute;
+        display: inline;
+        z-index: -1;
+        color: transparent;
         background-color: rgba($primary, 0.1);
+        width: 2.1em; /* from quarto: .reveal pre.numberSource code > span */
+        height: 100%;
+        left: 0;
+        top: 0;
       }
     }
 
     // console code output
     .cell-output pre {
       background-color: rgba(0, 0, 0, 0.5);
-      backdrop-filter: blur(10px);
+      backdrop-filter: blur(8px);
 
       code {
         background-color: transparent;
@@ -52,12 +67,18 @@ $code-block-border-color: transparent;
 
     // filename line
     .code-with-filename-file {
-      background-color: rgba($primary, 0.2);
-      backdrop-filter: blur(10px);
+      background-color: rgba($primary, 0.4);
+      backdrop-filter: blur(8px);
+      margin: 0 1px;
 
       pre {
         background-color: transparent;
       }
+
+      + .sourceCode {
+        border-top: none;
+      }
+
     }
   }
-}
+}
diff --git a/example.qmd b/example.qmd
@@ -48,6 +48,20 @@ ggplot(mpg, aes(displ, hwy, colour = class)) +
   geom_point()
 ```
 
+## Other Code Cells
+
+##### Using `#| code-line-numbers: "2,3"`
+
+```{r}
+#| code-line-numbers: "2,3"
+#| echo: true
+fibonacci <- function(n) {
+  if (n <= 1) return(0)
+  if (n == 2) return(1)
+  fibonacci(n - 1) + fibonacci(n - 2)
+}
+```
+
 ## Console Output
 
 Example `base` analogs to common `dplyr` functions: