onboarding flow after setup

[samuelstroschein]

Problem

Users are overwhelmed on how to get started with paraglide JS after setting it up.

• the docs link to/mention things like "extract a message with Sherlock (cc @felix.haeberle)
• going from paraglide init to another app is overwhelming

Proposal

Create an example code file after paraglide init that shows the user how to use paraglide js.

• less text on docs and potential confusion
• populated with example messages
• show how to use Sherlock in-app "with concrete aha moments"

<script lang="ts">
  import * as m from "./paraglide/messages.js";

  // This is how you would use the messages in your code
  // (User will see sherlock inline annotations in action here providing an instant aha moment)
  m.happy_felix_elephant()

</script>

<!-- You can extract messages with Sherlock by highlighting the text  -->
<h1>About</h1>

cc @niklas.buchfink

[linear[bot]]

PARJS-22 onboarding flow after setup

[NilsJacobsen]

This could lead to a great wow moment when you get the example. 👍 Helps me understand how to replace hard-coded stuff.

For me when working with paraglide, the adapter setup was always the hardest bit. Could these examples help there, too?

[LorisSigrist]

What would you like to see from the Adaper setups? How could I make them clearer?

[NilsJacobsen]

I think the adapter pages/guides do an ok job (Lots of reading required). But the strategy of this issue is a show don't tell way, right? I was just wondering if the example can somehow help me with that too.

[LorisSigrist]

I'll see if I can do that for the adapters. I just implemented this suggestion on the Paraglide page & was also able to reduce the text significantly. The same can probably be done on the Adapter pages. Good Suggestion!