Skip to content

Commit b5b207a

Browse files
chendanielychendaniely
committed
reorg menus for getting started and concepts, add tutorials from #245 
1 parent 341d074 commit b5b207a

12 files changed

+2421
-11
lines changed

‎_quarto.yml

+46-11
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ project:
1919
- api/core
2020
- api/testing
2121
- templates
22+
- tutorials
2223
resources:
2324
- /pypi/**
2425
- /robots.txt
@@ -73,32 +74,40 @@ website:
7374
logo-alt: The logo for Shiny for Python
7475
search: true
7576
left:
76-
- text: "Learn Shiny"
77+
- text: "Getting Started"
7778
file: docs/overview.qmd
79+
- text: "Concepts"
80+
file: docs/ui-overview.qmd
7881
- text: "Components"
7982
menu:
80-
- text: "Components"
81-
file: components/index.qmd
83+
- text: "Inputs"
84+
href: components/index.qmd#inputs
8285
icon: sliders
83-
- text: "Layouts"
86+
- text: "Outputs"
87+
file: components/index.qmd#outputs
88+
icon: sliders
89+
- text: "UI Layouts"
8490
file: layouts/index.qmd
8591
icon: layout-text-window-reverse
86-
- text: "Templates"
87-
file: templates/index.qmd
88-
icon: code-square
8992
- text: "Deploy"
9093
menu:
9194
- text: "Overview"
9295
href: docs/deploy.qmd
9396
- docs/deploy-cloud.qmd
9497
- docs/deploy-on-prem.qmd
9598
- docs/shinylive.qmd
96-
- text: "Gallery"
97-
file: gallery/index.qmd
99+
- text: "Examples"
100+
menu:
101+
- text: "Templates"
102+
file: templates/index.qmd
103+
icon: code-square
104+
- text: "Gallery"
105+
file: gallery/index.qmd
106+
icon: code-square
98107
- text: "Playground"
99108
href: https://shinylive.io/py/examples/
100109
target: _blank
101-
- text: "Reference"
110+
- text: "API Reference"
102111
menu:
103112
- text: "Shiny Express"
104113
href: api/express/index.qmd
@@ -226,7 +235,7 @@ website:
226235
- text: "Controlling for Page Size"
227236
href: "/layouts/arrange/index.html#controlling-for-page-width-and-height"
228237

229-
- id: docs
238+
- id: getting_started
230239
style: "floating"
231240
collapse-level: 2
232241
align: left
@@ -239,6 +248,15 @@ website:
239248
contents:
240249
- docs/install-create-run.qmd
241250
- docs/debug.qmd
251+
- section: "Tutorials"
252+
contents:
253+
- tutorials/index.qmd
254+
255+
- id: concepts
256+
style: "floating"
257+
collapse-level: 2
258+
align: left
259+
contents:
242260
- section: "User interfaces"
243261
contents:
244262
- docs/ui-overview.qmd
@@ -277,6 +295,23 @@ website:
277295
contents:
278296
- docs/nonblocking.qmd
279297
- docs/routing.qmd
298+
299+
- id: tutorial-express-intro
300+
style: "floating"
301+
align: left
302+
contents:
303+
- section: "Learn Shiny Express"
304+
contents:
305+
- tutorials/intro-express/1-welcome.qmd
306+
- tutorials/intro-express/2-ui.qmd
307+
- tutorials/intro-express/3-inputs.qmd
308+
- tutorials/intro-express/4-external.qmd
309+
- tutorials/intro-express/5-outputs.qmd
310+
- tutorials/intro-express/6-reactivity.qmd
311+
- tutorials/intro-express/7-publish.qmd
312+
- tutorials/intro-express/8-next.qmd
313+
314+
280315
# TODO: if the sidebar only has 1 entry, then it displays for the entire site...
281316
# added entry below to prevent this.
282317
- id: deploy

‎tutorials/index.qmd

+124
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
---
2+
title: "Tutorials"
3+
---
4+
5+
```{=html}
6+
<style>
7+
body {
8+
font-family: Arial, sans-serif;
9+
padding: 20px;
10+
display: flex;
11+
justify-content: center;
12+
}
13+
.grid {
14+
display: grid;
15+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
16+
gap: 20px;
17+
max-width: 900px;
18+
width: 100%;
19+
}
20+
.card {
21+
padding: 20px;
22+
border-radius: 10px;
23+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
24+
background-color: white;
25+
text-align: center;
26+
cursor: pointer;
27+
text-decoration: none;
28+
color: inherit;
29+
display: flex;
30+
flex-direction: column;
31+
align-items: center;
32+
}
33+
.card h2 {
34+
font-size: 1.25rem;
35+
font-weight: bold;
36+
margin-bottom: 10px;
37+
}
38+
.card p {
39+
font-size: 0.875rem;
40+
color: #555;
41+
margin-bottom: 10px;
42+
}
43+
.card .last-updated {
44+
font-size: 0.75rem;
45+
color: #999;
46+
margin-bottom: 15px;
47+
}
48+
.button {
49+
display: inline-block;
50+
padding: 10px 15px;
51+
background-color: #007bff;
52+
color: white;
53+
text-decoration: none;
54+
border-radius: 5px;
55+
margin-top: auto;
56+
}
57+
</style>
58+
```
59+
60+
## Express-Only Tutorials
61+
62+
Shiny Express is the easiest and quickest way to start with Shiny.
63+
Create applications at the speed of thought.
64+
65+
```{=html}
66+
<div class="grid">
67+
<a href="intro-express/1-welcome.html" class="card">
68+
<h2>Getting Started with Shiny</h2>
69+
<p>Install and build your first Shiny Application.</p>
70+
<p class="last-updated">Updated: Feb 14, 2024</p>
71+
<span class="button">Start Tutorial</span>
72+
</a>
73+
</div>
74+
```
75+
76+
## Express and Core Tutorials
77+
78+
Here are the more general tutorials to get you started with all things Shiny.
79+
80+
```{=html}
81+
<div class="grid">
82+
<a href="intro-express/1-welcome.html" class="card">
83+
<h2>Shiny Express to Shiny Core</h2>
84+
<p>Learn how to transition from Shiny Express to Shiny Core.</p>
85+
<p class="last-updated">Updated: Feb 5, 2024</p>
86+
<span class="button">Start Tutorial</span>
87+
</a>
88+
<a href="intro-express/1-welcome.html" class="card">
89+
<h2>Shiny Modules</h2>
90+
<p>Create Shiny Modules to make more maintanable applications.</p>
91+
<p class="last-updated">Updated: Mar 15, 2024</p>
92+
<span class="button">Start Tutorial</span>
93+
</a>
94+
<a href="intro-express/1-welcome.html" class="card">
95+
<h2>Make your own component</h2>
96+
<p>Create your own custom javasscript components.</p>
97+
<p class="last-updated">Updated: Apr 20, 2024</p>
98+
<span class="button">Start Tutorial</span>
99+
</a>
100+
<a href="intro-express/1-welcome.html" class="card">
101+
<h2>Testing your application</h2>
102+
<p>Write unit tests and end-to-end tests with pytest and playwright.</p>
103+
<p class="last-updated">Updated: Apr 20, 2024</p>
104+
<span class="button">Start Tutorial</span>
105+
</a>
106+
</div>
107+
```
108+
109+
## Core-Only Tutorials
110+
111+
Shiny Core provides you all the flexibility and complexity you need.
112+
The syntax is a bit more verbose,
113+
but you can create more complex applications using the core syntax.
114+
115+
```{=html}
116+
<div class="grid">
117+
<a href="intro-express/1-welcome.html" class="card">
118+
<h2>Getting Started with Shiny</h2>
119+
<p>Install and build your first Shiny Application with the Core syntax.</p>
120+
<p class="last-updated">Updated: Feb 14, 2024</p>
121+
<span class="button">Start Tutorial</span>
122+
</a>
123+
</div>
124+
```

0 commit comments

Comments
 (0)