Docs: minor UI bugs and issues

[phalberg]

First Check

• I added a very descriptive title here.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the documentation, with the integrated search.
• I already searched in Google "How to X" and didn't find any information.
• I already read and followed all the tutorials in the docs and didn't find an answer.

Example Code

Not relevant here.

Description

Hey typer community, while browsing trough some of the documentation I stumbled onto a small variety of minor bugs and issues, I wish to group them a bit here, since I would consider some of them too small to have a separate discussion about, here they are:

Problems

Descripton	Images showcasing what I mean
Problem-X1 Missing border box around Options, Arguments, Errors, like in https://typer.tiangolo.com/tutorial/commands/one-or-multiple/. In the first terminal one can see the output as:
but realistically it is more like (see image to the right), i.e boxes around. This is already present [the boxes, correctly placed] in some of the other documentation, so for now I am not fully sure why there is a deviation here.
Problem-X2 Next up is https://typer.tiangolo.com/tutorial/arguments/optional/#an-alternative-cli-argument-declaration, where if you hover over first steps and hover slightly down, one can see wierd internal font code, in the page itself this code is not present. See image to the right
Problem-X3 Last one for now 😆, some of the terminal outputs are slightly corrupted in their outputs, with text going a bit wierdly and the output boxes not being up-to-date (i guess it is older styles or something?), see some of the terminal widgets in: https://typer.tiangolo.com/tutorial/first-steps/#two-cli-arguments. Image, showcasing some of that:
This [Problem-X3] should be more like this: (NOTE: also the typo "{name}" is actually "NAME" in the output now, same with "LASTNAME", also the "str" vs "TEXT")

I haven't audited every single page yet, but I'd be more than happy to help fix and update these! As I could foresee that some of these issues persists in more pages than I am reporting here.
If a maintainer approves, then please let me know if you'd like me to open focused PRs for these fixes, or if there's a preferred way you'd like them handled, also if I should make seperate discussions or something like that!
Thanks for all the work on Typer!

Operating System

Windows

Operating System Details

No response

Project Version

0.27.0

Python Version

3.10

Additional Context

No response

[phalberg]

Small update: Some of these might be somewhat relevant to #1862.

[chrikrah]

@phalberg X1 is plain Click help that nobody regenerated after Rich. one-or-multiple.md still has four bare Options: blocks. 30 tutorial pages have them. At a5882de the same example prints the panels:

$ COLUMNS=80 python docs_src/commands/index/tutorial002_py310.py --help
 Usage: tutorial002_py310.py [OPTIONS] COMMAND [ARGS]...
╭─ Options ────────────────────────────────────────────────────────────────────╮
│ --install-completion          Install completion for the current shell.      │
...
╭─ Commands ───────────────────────────────────────────────────────────────────╮
│ create                                                                       │
$ git show a5882de:docs/tutorial/commands/one-or-multiple.md | grep -c '^Options:$'
4
$ grep -rl '^Options:$' docs/tutorial | wc -l
30
$ git show a5882de:docs/tutorial/first-steps.md | grep -c '^Options:$'
0

X3 is a different case. Two July commits regenerated first-steps.md, and it already shows Rich panels. The {name} and <str> there are not a typo. #1863 changed metavar printing in 0.27.0, and 0.27.3 at a5882de prints what the page shows:

$ COLUMNS=67 python docs_src/first_steps/tutorial003_py310.py --help
 Usage: tutorial003_py310.py [OPTIONS] {name} {lastname}
│ *    name          <str>  [required]                            │

X2 comes from link previews. mkdocs.yml enables them for every link through material.extensions.preview. docs/js/custom.js:32 builds the coloured terminal from the block's textContent at page load. A preview skips that script and shows the raw <font> tags. I got this from the source, without a site build.

If you open these, one PR per tutorial section keeps each diff reviewable. @svlandeg collects docs fixes in #1862. Your form says 0.27.0, which already prints {name}. Does python -c "import typer; print(typer.__version__)" say the same in the environment that printed NAME?

[phalberg]

Closing this in favor for #1862 where it can be appropriately handled whenever time persists!