Getting Started Guide Improvements

[heff]

Notes from conversation with @decepulis on improvements we're going to make to the getting started guide.

Intro

• Reword page description -> “by building your initial embed code”
• Change TP banner to Beta banner.
  • Reframe “evolving” language
  • Link to Provide feedback in Issues
  • Link to where they can discover changes
    • Always on github, need a root Change log, to be discussed
• Rewrite the intro paragraph to lean into the new benefits o the player that also support why we’re asking a lot of questions on this page. Flexible, fits your needs, minimum bundle size. Idiomatic.
• "what does the copy page button do?" is a question we can preempt with slightly better design. Maybe "Copy as Markdown" docs(site): Make copy button more clear about what it's there for #483

Framework

• Choosing a framework jumps to the top. Scroll restoration when we switch between html / react. fix(docs): jump to top of window when toggling between frameworks #484
• “more to come”

Use cases

• Remove presets language, maybe use “defaults”
• Website -> Default (general)
• Add default audio use case
• Use case selection filters the media provider list

Media

• media renderer -> Media
• Consider “HTML5 Video” naming — Need more guidance or a learn link
• Add auto media selection from source URL; build a url detector; tbh it's not that hard docs(getting-started): Auto-select Media based on source URL #485
  • Narrow the visual list
  • Revisit Media list sorting
• Align with Wes on Background Video plans, and other Media for Beta

Install/create your player

• Rewrite “Install Player” + “Create Player” headings; don’t make sense together
• Update example to match new API (part done)
• Code is too dark
• Split up HTML and JS code tabs, wich currently look like OR options, not AND
• Use file names in code example tabs, specifically in React examples that just say “React”
• Fix “CDN”-path which is landing incorrectly with an import example
  • Default to CDN option for HTML since it’s the least understood option name; npm users can find npm easily

End

• Add a “Something went wrong?” line pointing users to Github issues, discord.

Visual

• More visually obvsious active state for selected items. Brighter border, bold text. docs(getting-started): Add a more visually obvious selected state #486

[heff]

Most of these have been addressed in #473 . The rest have been moved to specific issues.