Skip to content

Commit 483bce3

Browse files
tiangolotiangolo
authored
⬆️ Upgrade to MkDocs Material 5 and update docs scripts (fastapi#1225)
* ⬆️ Upgrade mkdocs.yml configs for MkDocs Material 5 * ✨ Update docs.py to always update mkdocs.yml * 🌐 Update mkdocs.yml for translations * 🔧 Update MkDocs config * ✨ Add tabs for alternative options * ⬆️ Update termynal setup with new CSS classes * 🔧 Sync / Update mkdocs.yml for languages
1 parent 7372f6b commit 483bce3

File tree

9 files changed

+184
-144
lines changed

9 files changed

+184
-144
lines changed

‎docs/en/docs/advanced/settings.md

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -15,35 +15,37 @@ An <a href="https://en.wikipedia.org/wiki/Environment_variable" class="external-
1515

1616
You can create and use environment variables in the shell, without needing Python:
1717

18-
<div class="termy">
18+
=== "Linux, macOS, Windows Bash"
1919

20-
```console
21-
// You could create an env var MY_NAME with
22-
$ export MY_NAME="Wade Wilson"
20+
<div class="termy">
2321

24-
// Then you could use it with other programs, like
25-
$ echo "Hello $MY_NAME"
22+
```console
23+
// You could create an env var MY_NAME with
24+
$ export MY_NAME="Wade Wilson"
2625

27-
Hello Wade Wilson
28-
```
26+
// Then you could use it with other programs, like
27+
$ echo "Hello $MY_NAME"
2928

30-
</div>
29+
Hello Wade Wilson
30+
```
3131

32-
Or in PowerShell in Windows:
32+
</div>
3333

34-
<div class="termy">
34+
=== "Windows PowerShell"
3535

36-
```console
37-
// Create an env var MY_NAME
38-
$ $Env:MY_NAME = "Wade Wilson"
36+
<div class="termy">
3937

40-
// Use it with other programs, like
41-
$ echo "Hello $Env:MY_NAME"
38+
```console
39+
// Create an env var MY_NAME
40+
$ $Env:MY_NAME = "Wade Wilson"
4241

43-
Hello Wade Wilson
44-
```
42+
// Use it with other programs, like
43+
$ echo "Hello $Env:MY_NAME"
4544

46-
</div>
45+
Hello Wade Wilson
46+
```
47+
48+
</div>
4749

4850
### Read env vars in Python
4951

‎docs/en/docs/contributing.md

Lines changed: 56 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -24,59 +24,67 @@ That will create a directory `./env/` with the Python binaries and then you will
2424

2525
Activate the new environment with:
2626

27-
<div class="termy">
27+
=== "Linux, macOS"
2828

29-
```console
30-
$ source ./env/bin/activate
31-
```
29+
<div class="termy">
3230

33-
</div>
31+
```console
32+
$ source ./env/bin/activate
33+
```
3434

35-
Or in Windows' PowerShell:
35+
</div>
3636

37-
<div class="termy">
37+
=== "Windows PowerShell"
3838

39-
```console
40-
$ .\env\Scripts\Activate.ps1
41-
```
39+
<div class="termy">
4240

43-
</div>
41+
```console
42+
$ .\env\Scripts\Activate.ps1
43+
```
4444

45-
Or if you use Bash for Windows (e.g. <a href="https://gitforwindows.org/" class="external-link" target="_blank">Git Bash</a>):
45+
</div>
4646

47-
<div class="termy">
47+
=== "Windows Bash"
4848

49-
```console
50-
$ source ./env/Scripts/activate
51-
```
49+
Or if you use Bash for Windows (e.g. <a href="https://gitforwindows.org/" class="external-link" target="_blank">Git Bash</a>):
5250

53-
</div>
51+
<div class="termy">
52+
53+
```console
54+
$ source ./env/Scripts/activate
55+
```
56+
57+
</div>
5458

5559
To check it worked, use:
5660

57-
<div class="termy">
61+
=== "Linux, macOS, Windows Bash"
5862

59-
```console
60-
$ which pip
63+
<div class="termy">
6164

62-
some/directory/fastapi/env/bin/pip
63-
```
65+
```console
66+
$ which pip
6467

65-
</div>
68+
some/directory/fastapi/env/bin/pip
69+
```
6670

67-
If it shows the `pip` binary at `env/bin/pip` then it worked. 🎉
71+
</div>
6872

69-
Or in Windows PowerShell:
73+
=== "Windows PowerShell"
7074

71-
<div class="termy">
75+
<div class="termy">
7276

73-
```console
74-
$ Get-Command pip
77+
```console
78+
$ Get-Command pip
79+
80+
some/directory/fastapi/env/bin/pip
81+
```
82+
83+
</div>
84+
85+
If it shows the `pip` binary at `env/bin/pip` then it worked. 🎉
7586

76-
some/directory/fastapi/env/bin/pip
77-
```
7887

79-
</div>
8088

8189
!!! tip
8290
Every time you install a new package with `pip` under that environment, activate the environment again.
@@ -103,27 +111,31 @@ Now re-activate the environment to make sure you are using the `flit` you just i
103111

104112
And now use `flit` to install the development dependencies:
105113

106-
<div class="termy">
114+
=== "Linux, macOS"
107115

108-
```console
109-
$ flit install --deps develop --symlink
116+
<div class="termy">
110117

111-
---> 100%
112-
```
118+
```console
119+
$ flit install --deps develop --symlink
113120

114-
</div>
121+
---> 100%
122+
```
115123

116-
If you are on Windows, use `--pth-file` instead of `--symlink`:
124+
</div>
117125

118-
<div class="termy">
126+
=== "Windows"
119127

120-
```console
121-
$ flit install --deps develop --pth-file
128+
If you are on Windows, use `--pth-file` instead of `--symlink`:
122129

123-
---> 100%
124-
```
130+
<div class="termy">
125131

126-
</div>
132+
```console
133+
$ flit install --deps develop --pth-file
134+
135+
---> 100%
136+
```
137+
138+
</div>
127139

128140
It will install all the dependencies and your local FastAPI in your local environment.
129141

‎docs/en/docs/deployment.md

Lines changed: 34 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -329,55 +329,61 @@ You can deploy **FastAPI** directly without Docker too.
329329

330330
You just need to install an ASGI compatible server like:
331331

332-
* <a href="https://www.uvicorn.org/" class="external-link" target="_blank">Uvicorn</a>, a lightning-fast ASGI server, built on uvloop and httptools.
332+
=== "Uvicorn"
333333

334-
<div class="termy">
334+
* <a href="https://www.uvicorn.org/" class="external-link" target="_blank">Uvicorn</a>, a lightning-fast ASGI server, built on uvloop and httptools.
335335

336-
```console
337-
$ pip install uvicorn
336+
<div class="termy">
338337

339-
---> 100%
340-
```
338+
```console
339+
$ pip install uvicorn
341340

342-
</div>
341+
---> 100%
342+
```
343343

344-
* <a href="https://gitlab.com/pgjones/hypercorn" class="external-link" target="_blank">Hypercorn</a>, an ASGI server also compatible with HTTP/2.
344+
</div>
345345

346-
<div class="termy">
346+
=== "Hypercorn"
347347

348-
```console
349-
$ pip install hypercorn
348+
* <a href="https://gitlab.com/pgjones/hypercorn" class="external-link" target="_blank">Hypercorn</a>, an ASGI server also compatible with HTTP/2.
350349

351-
---> 100%
352-
```
350+
<div class="termy">
353351

354-
</div>
352+
```console
353+
$ pip install hypercorn
354+
355+
---> 100%
356+
```
355357

356-
...or any other ASGI server.
358+
</div>
359+
360+
...or any other ASGI server.
357361

358362
And run your application the same way you have done in the tutorials, but without the `--reload` option, e.g.:
359363

360-
<div class="termy">
364+
=== "Uvicorn"
361365

362-
```console
363-
$ uvicorn main:app --host 0.0.0.0 --port 80
366+
<div class="termy">
364367

365-
<span style="color: green;">INFO</span>: Uvicorn running on http://0.0.0.0:80 (Press CTRL+C to quit)
366-
```
368+
```console
369+
$ uvicorn main:app --host 0.0.0.0 --port 80
367370

368-
</div>
371+
<span style="color: green;">INFO</span>: Uvicorn running on http://0.0.0.0:80 (Press CTRL+C to quit)
372+
```
369373

370-
or with Hypercorn:
374+
</div>
371375

372-
<div class="termy">
376+
=== "Hypercorn"
373377

374-
```console
375-
$ hypercorn main:app --bind 0.0.0.0:80
378+
<div class="termy">
376379

377-
Running on 0.0.0.0:8080 over http (CTRL + C to quit)
378-
```
380+
```console
381+
$ hypercorn main:app --bind 0.0.0.0:80
379382

380-
</div>
383+
Running on 0.0.0.0:8080 over http (CTRL + C to quit)
384+
```
385+
386+
</div>
381387

382388
You might want to set up some tooling to make sure it is restarted automatically if it stops.
383389

‎docs/en/docs/js/custom.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ function setupTermynal() {
3535

3636
function createTermynals() {
3737
document
38-
.querySelectorAll(`.${termynalActivateClass} .codehilite`)
38+
.querySelectorAll(`.${termynalActivateClass} .highlight`)
3939
.forEach(node => {
4040
const text = node.textContent;
4141
const lines = text.split("\n");

‎docs/en/mkdocs.yml

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ theme:
66
palette:
77
primary: teal
88
accent: amber
9+
icon:
10+
repo: fontawesome/brands/github-alt
911
logo: img/icon-white.svg
1012
favicon: img/favicon.png
1113
language: en
@@ -129,19 +131,20 @@ markdown_extensions:
129131
- name: mermaid
130132
class: mermaid
131133
format: !!python/name:pymdownx.superfences.fence_div_format ''
134+
- pymdownx.tabbed
132135
extra:
133136
social:
134-
- type: github
137+
- icon: fontawesome/brands/github-alt
135138
link: https://github.com/tiangolo/typer
136-
- type: twitter
139+
- icon: fontawesome/brands/twitter
137140
link: https://twitter.com/tiangolo
138-
- type: linkedin
141+
- icon: fontawesome/brands/linkedin
139142
link: https://www.linkedin.com/in/tiangolo
140-
- type: rss
143+
- icon: fontawesome/brands/dev
141144
link: https://dev.to/tiangolo
142-
- type: medium
145+
- icon: fontawesome/brands/medium
143146
link: https://medium.com/@tiangolo
144-
- type: globe
147+
- icon: fontawesome/solid/globe
145148
link: https://tiangolo.com
146149
extra_css:
147150
- css/termynal.css

‎docs/es/mkdocs.yml

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ theme:
66
palette:
77
primary: teal
88
accent: amber
9+
icon:
10+
repo: fontawesome/brands/github-alt
911
logo: https://fastapi.tiangolo.com/img/icon-white.svg
1012
favicon: https://fastapi.tiangolo.com/img/favicon.png
1113
language: es
@@ -37,19 +39,20 @@ markdown_extensions:
3739
- name: mermaid
3840
class: mermaid
3941
format: !!python/name:pymdownx.superfences.fence_div_format ''
42+
- pymdownx.tabbed
4043
extra:
4144
social:
42-
- type: github
45+
- icon: fontawesome/brands/github-alt
4346
link: https://github.com/tiangolo/typer
44-
- type: twitter
47+
- icon: fontawesome/brands/twitter
4548
link: https://twitter.com/tiangolo
46-
- type: linkedin
49+
- icon: fontawesome/brands/linkedin
4750
link: https://www.linkedin.com/in/tiangolo
48-
- type: rss
51+
- icon: fontawesome/brands/dev
4952
link: https://dev.to/tiangolo
50-
- type: medium
53+
- icon: fontawesome/brands/medium
5154
link: https://medium.com/@tiangolo
52-
- type: globe
55+
- icon: fontawesome/solid/globe
5356
link: https://tiangolo.com
5457
extra_css:
5558
- https://fastapi.tiangolo.com/css/termynal.css
@@ -58,3 +61,5 @@ extra_javascript:
5861
- https://unpkg.com/mermaid@8.4.6/dist/mermaid.min.js
5962
- https://fastapi.tiangolo.com/js/termynal.js
6063
- https://fastapi.tiangolo.com/js/custom.js
64+
- https://fastapi.tiangolo.com/js/chat.js
65+
- https://sidecar.gitter.im/dist/sidecar.v1.js

0 commit comments

Comments
 (0)