Feat: Add Theming with config.yml

README.md

@@ -19,6 +19,11 @@ The LogAnalyzer open-source app is a simple, plug and play application developed
 - I get `"Oops! Can't read apps from Posit Connect."` on the rightmost image?
     - This may mean that the Posit Connect API's response did not send proper data.
     - So far, one documented reason for this is that OAuth on Posit Connect instances may prevent the `/content` endpoint from sending app data.
+- How do I rebrand the application?
+    - You can edit the branding in the `config.yml` file. You'll find the `colors` key which will build the CSS.
+- How do I recolor the SVGs?
+    - This requires some creativity. We recommend replacing the primary color hex which you can find in the `.svg` file as `fill="#hexcde"` to `PRIMARY`.
+    - We use this as a default value in the function that replaces it but you are welcome to use another value and modify the function.
 
 # Credits
 

app/logic/empty_state_utils.R

@@ -1,9 +1,13 @@
 box::use(
+  base64enc[
+    base64encode
+  ],
   shiny[
     div,
     img,
     p,
-    renderUI
+    renderUI,
+    tagAppendAttributes
   ],
 )
 
@@ -13,18 +17,49 @@ box::use(
 #' @export
 generate_empty_state_ui <- function(
   text = "Select an application and a job to view logs",
-  image_path = "static/illustrations/empty_state.svg"
+  image_path = "static/illustrations/empty_state.svg",
+  color = NULL
 ) {
   div(
     class = "empty-state-container",
     p(
       class = "empty-state-text",
       text
     ),
-    img(
-      src = image_path,
-      class = "empty-state-image",
+    replace_svg_fill(
+      color = color,
+      svg_path = image_path,
       alt = text
     )
   )
 }
+
+#' Function to replace fill color in SVG
+#' @param color Character. The color to replace
+#' @param svg_path Character. The path to the SVG file
+#' @param placeholder Character. The placeholder. Default is "PRIMARY"
+#' @param alt Character. The alt text for the image
+#' @return an image tag with the SVG content
+replace_svg_fill <- function(
+  color,
+  svg_path = "",
+  placeholder = "PRIMARY",
+  alt = "",
+  class = "empty-state-image"
+) {
+  svg_content <- readLines(svg_path)
+  svg_content <- paste(svg_content, collapse = "\n")
+  svg_content <- gsub(
+    placeholder,
+    color,
+    svg_content
+  )
+  img(
+    class = class,
+    src = paste0(
+      "data:image/svg+xml;base64,",
+      base64encode(charToRaw(svg_content))
+    ),
+    alt = alt
+  )
+}

app/logic/general_utils.R

@@ -1,3 +1,12 @@
+box::use(
+  config[
+    get
+  ],
+  purrr[
+    map_chr
+  ],
+)
+
 #' Function to check if a string of log text has error keywords
 #'
 #' @param text Character. The log string
@@ -37,3 +46,24 @@ format_timestamp <- function(
     format = to
   )
 }
+
+#' Generate CSS variables from config.yml
+#' @param config the config file
+#' @return a string of CSS variables within :root {}
+#' @export
+generate_css_variables <- function(
+  config = get("branding")
+) {
+  css_lines <- map_chr(
+    names(config$colors),
+    function(name) {
+      color_value <- config$colors[[name]]
+      sprintf("  --%s: %s;", name, color_value)
+    }
+  )
+  paste0(
+    ":root {\n",
+    paste(css_lines, collapse = "\n"),
+    "\n}"
+  )
+}

app/main.R

@@ -1,31 +1,17 @@
 # nolint start: box_func_import_count_linter
 box::use(
+  config[get],
   dplyr[select],
   magrittr[`%>%`],
-  shiny[
-    div,
-    fluidPage,
-    img,
-    isTruthy,
-    moduleServer,
-    NS,
-    observeEvent,
-    p,
-    reactive,
-    reactiveValues,
-    removeUI,
-    renderUI,
-    tagList,
-    tags,
-    uiOutput
-  ],
+  shiny,
   shinycssloaders[withSpinner],
 )
 # nolint end
 
 box::use(
   app/logic/api_utils[get_app_list],
   app/logic/empty_state_utils[generate_empty_state_ui],
+  app/logic/general_utils[generate_css_variables],
   app/view/mod_app_table,
   app/view/mod_header,
   app/view/mod_job_list,
@@ -34,47 +20,57 @@ box::use(
 
 #' @export
 ui <- function(id) {
-  ns <- NS(id)
-  fluidPage(
+  ns <- shiny$NS(id)
+  shiny$fluidPage(
     class = "dashboard-body",
+    shiny$tags$head(
+      shiny$uiOutput(ns("dynamic_colors"))
+    ),
     mod_header$ui("header"),
-    div(
+    shiny$div(
       class = "dashboard-container",
-      div(
+      shiny$div(
         class = "app-table",
         mod_app_table$ui(ns("app_table"))
       ),
-      div(
+      shiny$div(
         class = "vertical-line"
       ),
-      div(
+      shiny$div(
         class = "job-list",
-        uiOutput(ns("job_list_pane"))
+        shiny$uiOutput(ns("job_list_pane"))
       ),
-      div(
+      shiny$div(
         class = "vertical-line"
       ),
-      div(
+      shiny$div(
         class = "logs",
-        uiOutput(ns("logs_pane"))
+        shiny$uiOutput(ns("logs_pane"))
       )
     )
   )
 }
 
 #' @export
 server <- function(id) {
-  moduleServer(id, function(input, output, session) {
+  shiny$moduleServer(id, function(input, output, session) {
 
     ns <- session$ns
 
+    branding <- get("branding")
+
+    output$dynamic_colors <- shiny$renderUI({
+      css_content <- generate_css_variables(branding)
+      shiny$tags$style(shiny$HTML(css_content))
+    })
+
     mod_header$server("header")
 
-    state <- reactiveValues()
-    state$selected_app <- reactive({})
-    state$selected_job <- reactive({})
+    state <- shiny$reactiveValues()
+    state$selected_app <- shiny$reactive({})
+    state$selected_job <- shiny$reactive({})
 
-    app_list <- reactive({
+    app_list <- shiny$reactive({
       get_app_list()
     })
 
@@ -84,11 +80,11 @@ server <- function(id) {
       state
     )
 
-    observeEvent(state$selected_app()$guid, {
+    shiny$observeEvent(state$selected_app()$guid, {
 
-      if (isTruthy(state$selected_app()$guid)) {
+      if (shiny$isTruthy(state$selected_app()$guid)) {
 
-        output$job_list_pane <- renderUI({
+        output$job_list_pane <- shiny$renderUI({
           mod_job_list$ui(ns("job_list"))
         })
 
@@ -99,16 +95,16 @@ server <- function(id) {
 
       } else {
 
-        removeUI(ns("job_list_pane"))
+        shiny$removeUI(ns("job_list_pane"))
 
       }
     }, ignoreNULL = FALSE)
 
-    observeEvent(state$selected_job()$key, {
+    shiny$observeEvent(state$selected_job()$key, {
 
-      if (isTruthy(state$selected_job()$key)) {
+      if (shiny$isTruthy(state$selected_job()$key)) {
 
-        output$logs_pane <- renderUI({
+        output$logs_pane <- shiny$renderUI({
           mod_logs$ui(ns("logs"))
         })
 
@@ -119,17 +115,19 @@ server <- function(id) {
       } else {
 
         if (!inherits(app_list(), "data.frame")) {
-          empty_state <- renderUI({
+          empty_state <- shiny$renderUI({
             generate_empty_state_ui(
               text = "Oops! Can't read apps from Posit Connect.",
-              image_path = "static/illustrations/missing_apps.svg"
+              image_path = "app/static/illustrations/missing_apps.svg",
+              color = branding$colors$primary
             )
           })
         } else {
-          empty_state <- renderUI({
+          empty_state <- shiny$renderUI({
             generate_empty_state_ui(
               text = "Select an application and a job to view logs.",
-              image_path = "static/illustrations/empty_state.svg"
+              image_path = "app/static/illustrations/empty_state.svg",
+              color = branding$colors$primary
             )
           })
         }