-
Notifications
You must be signed in to change notification settings - Fork 15
/
index.qmd
189 lines (155 loc) · 6.75 KB
/
index.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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
---
pagetitle: "Shiny for Python"
pagedescription: Shiny is package that makes it easy to build interactive web apps straight from R & Python.
image: /images/shiny-for-python.jpg
toc: false
page-layout: article
format:
html:
strip-comments: true
anchor-sections: false
smooth-scroll: true
css:
- index.css
repo-actions: false
---
::::{.column-screen .mx-auto .pt-0 .mt-0 .pt-xl-5 style="max-width: 1500px;"}
:::{.grid}
:::{.g-col-12 .g-col-xl-6 .hero-text .pt-5 .pt-md-4 .px-3 .px-md-5 .pe-xl-0}
<div class="gradient-text display-4 fw-bolder">Effortless Python web applications</div>
<p class="h4">with the power of reactive programming.</p>
::: {.pt-4 .pb-4 style="z-index:1;"}
[Install](#install){.btn .btn-dark .btn-lg .m-2 .px-5 role="button"}
[Learn Shiny](docs/overview.qmd){.btn .btn-dark .btn-lg .m-2 .px-5 role="button"}
:::
:::
:::{.g-col-12 .g-col-md-10 .g-start-md-2 .g-start-xl-0 .g-col-xl-6 .hero-carousel .mb-5}
```{=html}
<div id="carouselExampleCaptions" class="carousel carousel-dark carousel-fade slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item bg-white shadow p-3 active">
<a href="https://gallery.shinyapps.io/template-map-distance/">
<img src="/images/map-light.jpg" class="d-block" alt="A screenshot of an dashboard that includes an ipyleaflet map.">
</a>
<div class="carousel-caption">
<p>Run queries on an SQL database and <a href="https://gallery.shinyapps.io/template-map-distance/">view the results</a> in a data grid, <a href="/templates/map-distance/index.qmd">also available as a template</a>.</p>
</div>
</div>
<div class="carousel-item bg-white shadow p-3">
<a href="https://gallery.shinyapps.io/template-map-distance/">
<img src="/images/map-dark.jpg" class="d-block" alt="A screenshot of an dashboard that includes an ipyleaflet map.">
</a>
<div class="carousel-caption">
<p>Run queries on an SQL database and <a href="https://gallery.shinyapps.io/template-map-distance/">view the results</a> in a data grid, <a href="/templates/map-distance/index.qmd">also available as a template</a>.</p>
</div>
</div>
<div class="carousel-item bg-white shadow p-3">
<a href="https://shinylive.io/py/app/#orbit-simulation"> <img src="/images/screen24.png" class="d-block" alt="Shiny Orbit Simulation App"></a>
<div class="carousel-caption">
<p>Shiny is great for creating interactive visualizations, like this <a href="https://shinylive.io/py/app/#orbit-simulation">three-body problem simulator</a>.</p>
</div>
</div>
<div class="carousel-item bg-white shadow p-3">
<a href="https://shinylive.io/py/app/#regularization">
<img src="/images/screen22.png" class="d-block" alt="A screenshot of an article that starts with a headline, followed by a slider control, and then a large visualization.">
</a>
<div class="carousel-caption">
<p>Mix Markdown prose with inputs and outputs to create <a href="https://shinylive.io/py/app/#regularization">interactive explainers</a>.</p>
</div>
</div>
</div>
<!-- <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button> -->
</div>
<style type="text/css">
#quarto-document-content {
overflow: hidden;
}
</style>
```
:::
:::
::::
::::{.column-screen-inset .py-5 .mt-5 .mb-4 .mx-auto style="max-width:1200px;"}
:::{.grid}
:::{.g-col-12 .g-col-md-4 .feature-section .mx-3}
### Efficient
Shiny uses a reactive execution engine to minimize rerendering of your application.
Outputs are rendered on-demand and only when their upstream components change, which means that Shiny can support everything from the simplest dashboard to full-featured web apps.
:::
:::{.g-col-12 .g-col-md-4 .feature-section .mx-3}
### Reactive
Shiny eliminates the hassle of manual state management.
Rather than requiring callback functions and state variables, Shiny automatically determines the best execution path for your app at runtime.
This allows you to focus on delivering insights instead of troubleshooting execution issues.
:::
:::{.g-col-12 .g-col-md-4 .feature-section .mx-3}
### Robust
Shiny is built atop the modern Python web stack, leveraging [Starlette](https://www.starlette.io/) and [asyncio](https://docs.python.org/3/library/asyncio.html) for robust web applications.
It offers full support for [CSS](docs/ui-customize.html) and [JavaScript](docs/custom-component-one-off.qmd) customization, enabling rich, interactive user experiences.
:::
:::
::::
:::::: {.column-screen .py-5 .bg-dark-blue .mb-0 .px-3 .px-md-5 #install}
::::: {.column-body .d-flex .justify-content-center}
:::: { style="width: 100%; max-width: 585px;"}
## Getting started with Shiny is easy:
:::{.big-number-container .pt-3}
<p class="mb-0 big-number white">1</p>
:::{.code_container .homepage-code .w-100}
```{python}
#| eval: false
pip install shiny
```
:::
:::
:::{.big-number-container}
<p class="mb-0 big-number white">2</p>
:::{.code_container .homepage-code .w-100}
```{python}
#| eval: false
shiny create --template dashboard-tips
```
:::
:::
:::{.big-number-container}
<p class="mb-0 big-number white">3</p>
:::{.code_container .homepage-code .w-100 .ps-3}
<p class="mb-0">Use [your data](https://www.youtube.com/watch?v=ou-09NHcH5w){.white} and make the layout [your own](docs/user-interfaces.qmd){.white}.</p>
:::
:::
::::
:::::
::::: {.column-screen .hero-image .pt-4 .pb-5 style="margin-top:0px;max-width:1600px;"}
::: {.hello-output .g-col-12 .g-col-xl-12}
<iframe
src="https://gallery.shinyapps.io/template-dashboard-tips1/"
frameborder="0"
width="100%"
class="mb-0 card hello-output-iframe"
></iframe>
<style>
.hello-output-iframe {
height: 900px;
}
@media only screen and (max-width: 611px) {
.hello-output-iframe {
height: 2125px;
}
}
</style>
:::
:::
:::::