feat: welcome page with links to golem docs

DESCRIPTION

@@ -71,4 +71,4 @@ Config/testthat/edition: 3
 Encoding: UTF-8
 Language: en-US
 Roxygen: list(markdown = TRUE)
-RoxygenNote: 7.2.3
+RoxygenNote: 7.3.1

NAMESPACE

@@ -51,6 +51,7 @@ export(get_golem_options)
 export(get_golem_version)
 export(get_golem_wd)
 export(get_sysreqs)
+export(golem_welcome_page)
 export(install_dev_deps)
 export(invoke_js)
 export(is_golem)
@@ -93,6 +94,7 @@ export(use_utils_test_ui)
 export(use_utils_ui)
 export(warning_dev)
 export(with_golem_options)
+import(shiny)
 importFrom(attempt,attempt)
 importFrom(attempt,is_try_error)
 importFrom(attempt,stop_if)

R/golem_welcome_page.R

@@ -0,0 +1,213 @@
+#' Welcome Page
+#'
+#' @import shiny
+#'
+#' @export
+golem_welcome_page <- function() {
+  tagList(
+    tags$head(
+      tags$style("
+        body {
+          background-color: #7176b8;
+        }
+
+          h1 {
+            font-family: 'Rubik', sans-serif;
+            font-weight: 700;
+            font-size: 3rem;
+            color: #ffffff;
+          }
+
+          .main {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            height: 100vh;
+            gap: 2rem;
+            padding-top: 2rem;
+          }
+
+          .title {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+
+          .golem_section {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            border: 2.5px solid #4b5178;
+            border-radius: 15px;
+            padding: 1.4rem 7rem;
+            width: 50%;
+            margin-top: 40px;
+          }
+
+          .golem_section:hover, .doc_content:hover {
+            box-shadow: 0px 0px 18px -6px #38424f;
+          }
+
+          .golem_content {
+            display: grid;
+            grid-template-rows: 40px auto;
+            grid-row-gap:4rem;
+            row-gap: 1rem;
+          }
+
+          .golem_logo {
+            top: -54px;
+            position: relative;
+            display: flex;
+            justify-content: center;
+          }
+
+          .description {
+            font-family: 'Rubik', sans-serif;
+            font-size: 1.5rem;
+            color: #ffffff;
+            line-height: 1.8;
+          }
+
+          .description a, .description span {
+            color: #ffffff;
+            text-decoration: none;
+            background-color: #38424f61;
+            padding: .35rem .60rem;
+            border-radius: 5px;
+            line-height: 2;
+          }
+
+          .description a {
+            cursor: pointer;
+          }
+
+          .center-text {
+            text-align: center;
+          }
+
+          .doc_section {
+            display: grid;
+            grid-template-columns: 1.5fr 1fr;
+            gap: 2rem;
+            width: 50%;
+          }
+
+          @media ( max-width: 850px ) {
+            .doc_section {
+              grid-template-columns: 1fr;
+            }
+          }
+
+          .doc_content {
+            padding: 1rem 2rem;
+            border-radius: 10px;
+            background-color: #38424f61;
+            gap: 1rem;
+            border: 2.5px solid #4b5178
+          }
+
+          .doc_content:hover {
+            text-decoration: none;
+          }
+
+          .doc_modules {
+            display: grid;
+            gap: 2rem;
+          }
+        ")
+    ),
+    div(
+      class = "main",
+      div(
+        class = "title",
+        style = "",
+        h1("Welcome to Golem!")
+      ),
+      div(
+        class = "golem_section",
+        div(
+          class = "golem_content",
+          div(
+            class = "golem_logo",
+            img(
+              style = "height:80px;",
+              src = "https://raw.githubusercontent.com/ThinkR-open/golem/master/inst/rstudio/templates/project/golem.png",
+            )
+          ),
+          div(
+            p(
+              class = "description center-text",
+              "Remove this welcome message by removing ",
+              span(
+                class = "code",
+                "golem_welcome_page()"
+              ),
+              "in",
+              tags$a(
+                "app_ui.R",
+                href = "https://thinkr-open.github.io/golem/",
+                target = "_blank"
+              ),
+              "with your own code."
+            )
+          )
+        )
+      ),
+      div(
+        class = "doc_section",
+        div(
+          class = "doc_modules",
+          a(
+            class = "doc_content",
+            href = "https://golemverse.org/",
+            target = "_blank",
+            h4(
+              class = "description",
+              "Golemverse"
+            ),
+            p(
+              class = "description",
+              "Golem comes with a set of packages to help you build your Shiny App.",
+              br(),
+              span(class = "code", "{brochure}"),
+              span(class = "code", "{shinipsum}"),
+              span(class = "code", "{shinidraw}"),
+              span(class = "code", "{dockerfiler}"),
+              br(),
+              "Explore the Golemverse and discover tools to build beautiful app."
+            )
+          ),
+          a(
+            class = "doc_content",
+            href = "https://github.com/ThinkR-open/golem",
+            target = "_blank",
+            h4(
+              class = "description",
+              "Feedbacks are welcome"
+            ),
+            p(
+              class = "description",
+              "If you have any idea or suggestions, please open an issue on our repo.",
+            )
+          )
+        ),
+        a(
+          class = "doc_content",
+          href = "https://engineering-shiny.org/",
+          target = "_blank",
+          h4(
+            class = "description",
+            "Documentation"
+          ),
+          p(
+            class = "description",
+            "Discover and explore all the possibilities offered by Golem to level up.",
+            br(),
+            "Read our book and learn how to build a production-ready Shiny App."
+          )
+        )
+      )
+    )
+  )
+}

inst/shinyexample/R/app_ui.R

@@ -10,7 +10,7 @@ app_ui <- function(request) {
     golem_add_external_resources(),
     # Your application UI logic
     fluidPage(
-      h1("shinyexample")
+      golem::golem_welcome_page() # Remove this line to start building your UI
     )
   )
 }

tests/testthat/test-golem_welcome_page.R

@@ -0,0 +1,24 @@
+test_that("golem_welcome_page works", {
+
+  html <- golem_welcome_page()
+
+  expect_true(inherits(html, "shiny.tag.list"))
+
+  chr_html <- as.character(html)
+
+  links_to_detect <- c(
+    "https://golemverse.org/",
+    "https://raw.githubusercontent.com/ThinkR-open/golem/master/inst/rstudio/templates/project/golem.png",
+    "https://thinkr-open.github.io/golem/",
+    "https://engineering-shiny.org/"
+  )
+
+  sapply(
+    links_to_detect,
+    function(x) {
+      expect_true(
+        grepl(x, chr_html)
+      )
+    }
+  )
+})