➕ Upgrade Material-Mkdocs (#90)

* ➕ Upgrade Material-Mkdocs

* 🐛 Fix Mkdocs config bug

* ➕ Upgrade Mkdocs-material configs

.gitignore

@@ -3,6 +3,7 @@
 __pycache__
 env3.7
 env3.6
+env
 dist
 .mypy_cache
 .idea

docs/contributing.md

@@ -22,60 +22,66 @@ That will create a directory `./env/` with the Python binaries and then you will
 
 Activate the new environment with:
 
-<div class="termy">
+=== "Linux, macOS"
 
-```console
-$ source ./env/bin/activate
-```
+    <div class="termy">
 
-</div>
+    ```console
+    $ source ./env/bin/activate
+    ```
 
-Or in Windows' PowerShell:
+    </div>
 
-<div class="termy">
+=== "Windows PowerShell"
 
-```console
-$ .\env\Scripts\Activate.ps1
-```
+    <div class="termy">
 
-</div>
+    ```console
+    $ .\env\Scripts\Activate.ps1
+    ```
 
-Or if you use Bash for Windows (e.g. <a href="https://gitforwindows.org/" class="external-link" target="_blank">Git Bash</a>):
+    </div>
 
-<div class="termy">
+=== "Windows Bash"
 
-```console
-$ source ./env/Scripts/activate
-```
+    Or if you use Bash for Windows (e.g. <a href="https://gitforwindows.org/" class="external-link" target="_blank">Git Bash</a>):
 
-</div>
+    <div class="termy">
+
+    ```console
+    $ source ./env/Scripts/activate
+    ```
+
+    </div>
 
 To check it worked, use:
 
-<div class="termy">
+=== "Linux, macOS, Windows Bash"
 
-```console
-$ which pip
+    <div class="termy">
 
-some/directory/typer/env/bin/pip
-```
+    ```console
+    $ which pip
 
-</div>
+    some/directory/typer/env/bin/pip
+    ```
+
+    </div>
+
+=== "Windows PowerShell"
+
+    <div class="termy">
+
+    ```console
+    $ Get-Command pip
+
+    some/directory/typer/env/bin/pip
+    ```
+
+    </div>
 
 If it shows the `pip` binary at `env/bin/pip` then it worked. 🎉
 
-Or in Windows PowerShell:
-
-<div class="termy">
-
-```console
-$ Get-Command pip
-
-some/directory/typer/env/bin/pip
-```
-
-</div>
-
 !!! tip
     Every time you install a new package with `pip` under that environment, activate the environment again.
 
@@ -101,27 +107,31 @@ Now re-activate the environment to make sure you are using the `flit` you just i
 
 And now use `flit` to install the development dependencies:
 
-<div class="termy">
+=== "Linux, macOS"
 
-```console
-$ flit install --deps develop --symlink
+    <div class="termy">
 
----> 100%
-```
+    ```console
+    $ flit install --deps develop --symlink
 
-</div>
+    ---> 100%
+    ```
 
-If you are on Windows, use `--pth-file` instead of `--symlink`:
+    </div>
 
-<div class="termy">
+=== "Windows"
 
-```console
-$ flit install --deps develop --pth-file
+    If you are on Windows, use `--pth-file` instead of `--symlink`:
 
----> 100%
-```
+    <div class="termy">
 
-</div>
+    ```console
+    $ flit install --deps develop --pth-file
+
+    ---> 100%
+    ```
+
+    </div>
 
 It will install all the dependencies and your local Typer in your local environment.
 
@@ -129,7 +139,7 @@ It will install all the dependencies and your local Typer in your local environm
 
 If you create a Python file that imports and uses Typer, and run it with the Python from your local environment, it will use your local Typer source code.
 
-And if you update that local Typer source code, as it is installed with `--symlink`, when you run that Python file again, it will use the fresh version of Typer you just edited.
+And if you update that local Typer source code, as it is installed with `--symlink` (or `--pth-file` on Windows), when you run that Python file again, it will use the fresh version of Typer you just edited.
 
 That way, you don't have to "install" your local version to be able to test every change.
 

docs/js/custom.js

@@ -12,7 +12,7 @@ let termynals = [];
 
 function createTermynals() {
     document
-        .querySelectorAll(`.${termynalActivateClass} .codehilite`)
+        .querySelectorAll(`.${termynalActivateClass} .highlight`)
         .forEach(node => {
             const text = node.textContent;
             const lines = text.split("\n");

mkdocs.yml

@@ -7,6 +7,8 @@ theme:
     palette:
         primary: 'black'
         accent: 'teal'
+    icon:
+        repo: fontawesome/brands/github-alt
     logo: 'img/icon-white.svg'
     favicon: 'img/favicon.png'
 
@@ -94,20 +96,21 @@ markdown_extensions:
             - name: mermaid
               class: mermaid
               format: !!python/name:pymdownx.superfences.fence_div_format
+    - pymdownx.tabbed
 
 extra:
     social:
-        - type: 'github'
+        - icon: fontawesome/brands/github-alt
           link: 'https://github.com/tiangolo/typer'
-        - type: 'twitter'
+        - icon: fontawesome/brands/twitter
           link: 'https://twitter.com/tiangolo'
-        - type: 'linkedin'
+        - icon: fontawesome/brands/linkedin
           link: 'https://www.linkedin.com/in/tiangolo'
-        - type: 'rss'
+        - icon: fontawesome/brands/dev
           link: 'https://dev.to/tiangolo'
-        - type: 'medium'
+        - icon: fontawesome/brands/medium
           link: 'https://medium.com/@tiangolo'
-        - type: 'globe'
+        - icon: fontawesome/solid/globe
           link: 'https://tiangolo.com'
 
 extra_css: