-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.qmd
160 lines (113 loc) · 5.26 KB
/
style.qmd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
# Style {.unnumbered}
```{r}
#| eval: true
#| echo: false
#| include: false
source("_common.R")
library(shinypak)
```
Expand the boxes below to review what was covered in previous three chapters:
::: {.callout-note collapse="true"}
## [Docker (Chapter 15)]{style="font-size: 1.35em;"}
The [Docker chapter](docker.qmd) covered the following topics:
- @sec-docker-what-is-docker
- @sec-docker-dockerfile
- @sec-docker-build-image
- @sec-docker-golem
- @sec-docker-app-packages
::: {.callout-tip collapse="true" appearance="default"}
### [Chapter 15 Applications]{style="font-weight: bold; font-size: 1.15em;"}
::: {style="font-size: 0.95em; color: #282b2d;"}
The applications in Chapter 15 (Docker) can be accessed with the `launch()` or `get()` functions from the [`shinypak` R package](https://mjfrigaard.github.io/shinypak/):
```{r}
#| code-fold: false
#| message: false
#| warning: false
#| eval: false
# install.packages('pak')
pak::pak('mjfrigaard/shinypak')
library(shinypak)
```
Chapter 15 applications:
```{r}
#| code-fold: false
#| message: false
#| warning: false
#| collapse: true
list_apps(regex = '^15')
```
:::
:::
:::
::: {.callout-note collapse="true"}
## [CI/CD (Chapter 16)]{style="font-size: 1.35em;"}
Continuous integration and continuous deployment is demonstrated using GitHub Actions to automate three workflows:
- @sec-gha-style
- @sec-gha-shiny
- @sec-gha-shiny-docker
::: {.callout-tip collapse="true" appearance="default"}
### [Chapter 16 Applications]{style="font-weight: bold; font-size: 1.15em;"}
::: {style="font-size: 0.95em; color: #282b2d;"}
The applications in Chapter 16 (CI/CD) can be accessed with the `launch()` or `get()` functions from the [`shinypak` R package](https://mjfrigaard.github.io/shinypak/):
```{r}
#| code-fold: false
#| message: false
#| warning: false
#| eval: false
# install.packages('pak')
pak::pak('mjfrigaard/shinypak')
library(shinypak)
```
Chapter 16 applications:
```{r}
#| code-fold: false
#| message: false
#| warning: false
#| collapse: true
list_apps(regex = '^16')
```
:::
:::
:::
::: {.callout-note collapse="true"}
## [pkgdown (Chapter 17)]{style="font-size: 1.35em;"}
The [pkgdown](pkgdown.qmd) chapter covers build a package website and deploying it with GitHub Actions.
- @sec-pkgdown-setup
- @sec-pkgdown-site-contents
- @sec-pkgdown-layouts
- @sec-pkgdown-workflow
::: {.callout-tip collapse="true" appearance="default"}
### [Chapter 17 Applications]{style="font-weight: bold; font-size: 1.15em;"}
::: {style="font-size: 0.95em; color: #282b2d;"}
The applications in Chapter 17 (`pkgdown`) can be accessed with the `launch()` or `get()` functions from the [`shinypak` R package](https://mjfrigaard.github.io/shinypak/):
```{r}
#| code-fold: false
#| message: false
#| warning: false
#| eval: false
# install.packages('pak')
pak::pak('mjfrigaard/shinypak')
library(shinypak)
```
Chapter 17 applications:
```{r}
#| code-fold: false
#| message: false
#| warning: false
#| collapse: true
list_apps(regex = '^17')
```
:::
:::
:::
------------------------------------------------------------------------
Shiny simplifies the creation of interactive web applications by allowing you to write R code that is automatically translated into HTML, CSS and JavaScript. However, sometimes it's necessary to include non-R code files as supplemental resources to improve your application. This section will cover how to include HTML, CSS, and JavaScript files in a Shiny app-package.
### Design
[Design](design.qmd) explores multiple `bslib` layout options. We'll also discover how to customize themes, fonts, colors, and interactive choices using the `plotly`, `thematic`, and `reactable` packages.
### HTML & CSS
In the [HTML & CSS chapter](html_css.qmd) chapter, we'll explore how to embed HTML within Shiny apps, use tags and functions to enhance UI layouts, and leverage HTML templates for more complex designs.
This section also delves into the art of styling your Shiny applications, ensuring they are both visually appealing and user-friendly. We discuss how to apply custom styles to your app using CSS, enabling you to customize the appearance of your elements beyond Shiny's default themes. You'll learn how to include external CSS files, write inline styles, and utilize CSS frameworks like Bootstrap for responsive design. Through practical examples, we demonstrate how to manage CSS specificity, create reusable styles, and enhance the overall user experience by controlling layout, typography, colors, and animations.
### JavaScript
In the [JavaScript chapter](js.qmd), we cover how to extend the functionality of your Shiny applications with custom JavaScript. JavaScript can be used to handle client-side interactivity, manipulate the DOM, and integrate third-party libraries and APIs. We'll show you how to include JavaScript files in your Shiny app-package, write custom JavaScript code that interacts with Shiny's reactive model, and use Shiny's JavaScript functions to create more dynamic and responsive applications. This chapter equips you with the skills to bridge the gap between Shiny's R-based framework and the extensive capabilities of JavaScript, enhancing your app's performance and user interaction.
### Style
[Style](style.qmd) covers formatting the code in your package so it's easier to debug (and read).