docs(ui): full copy-edit of title & description page

[agilgur5]

Partial fix for #10553 (review) -- this fixes the docs & example issues, while #12580 fixes the UI issues

Motivation

Significantly improve the "Title and Description" page (and related example) from #10553

• It was missing version specifiers (as was the example)
• It only showed the markdown variant, but the non-markdown variant actually existed earlier after feat: Workflow title/description in workflow list view. Fixes #6529 #9805 (released in v3.4.4)
• It only had one complex example, and not simple examples
• Complex example had verbal descriptions, but not the raw code
• The example image's alt title was not very accessible
• Had an outdated link to Couler
• Had a few k8s docs style guide issues
• Had a few typos
• Had a markdown issue
• etc

Modifications

• split the page into sections with and without markdown

  • add a non-markdown example and description
  • add a simple markdown example of just one row
  • use the same width images for both of these examples for visual consistency with the larger example

• add version specifiers to both of these sections

• link to markdown docs when referencing Markdown

• improve example descriptions

  • fix missing end parenthesis
  • be more specific, for instance, one of the examples is multi-line

• instead of having loose descriptions of rows in a list, actually write out the (partial) manifest that results in those renderings

  • I "reverse-engineered" what they would be based on the image
  • remove extra / duplicated example at the end (?)
  • use one code block instead of multiple to make it easier to read

accessibility improvements:

• better describe the example image(s), specify that they are examples
  • previously, it just said "Workflow Title and Description", which would not really explain the image for someone using a screen reader, as that's the same as the title of the page

prose style improvements:

• use present tense and active voice, per k8s style guide
• be more simple and direct, per k8s style guide
• avoid jargon / idioms, per k8s style guide
  • "auto turn" -> "convert"
• be specific, instead of "title and description annotations", specify what the annotations are

markdown style improvements:

• use ordered list when a list is ordered, instead of an unordered one

example improvements:

• fix typo in the file name
• add version specifier like other examples
• don't link to Couler, as it's been unmaintained for some time
  • instead link to these docs themselves -- a link this repo controls and a self reference
  • couldn't do that with the in-line example because I'd need to make a new image to correspond with that

Verification

1. make docs

2. open site/title-and-description/index.html

3. Took screenshots:

   
   

Future Work

Backport the non-markdown variant to the release-3.5 and release-3.4 branches

• I didn't even know this feature existed, docs would be great for previous versions

[jmeridth]

I like it. File was misspelled. Lol. Good catch.

[agilgur5]

Fixed codegen due to the filename typo fix

[agilgur5]

The missing version specifier popped up on Slack, so hoping this can get an Approver+ soon

[agilgur5]

Another user confused on Slack by lack of version specifier...