Preview of the Panel component

[johnlindquist]

2021-03-29.15-49-54.mp4

This is releasing late tonight. Here's the code for the above video:

//Menu: Testing Arg Panel
//Description: Testing the sequence
//Author: johnlindquist
//Twitter: @johnlindquist

let showGif = await arg(
  "You can display anything",
  `<div class="flex justify-center">
  <img src="https://media3.giphy.com/media/efCPDKBWq8qfZuYR34/giphy-downsized-medium.gif?cid=0b9ef2f4xptdlgxr2p76xp8gi9hezyptzhbhgggo76e30zcl&rid=giphy-downsized-medium.gif" alt="">
  </div>`
)

let showLinks = await arg(
  "Including links",
  md(`
[Visit scriptkit.app](http://scriptkit.app)

[Join the discussion](http://github.com/johnlindquist/kit/discussions)
`)
)

let term = await arg(
  "This still returns the input",
  md(`## What kind of joke would you like to hear?`)
)

let joke = await arg(
  `Here's a ${term} joke to get your day started:`,
  async () => {
    let response = await get(
      `https://icanhazdadjoke.com/search?term=${term}`,
      {
        headers: {
          Accept: "text/plain",
        },
      }
    )

    return md(
      `${response.data
        .split("\n")
        .filter(string => string?.trim()?.length)
        .map(
          joke => `* ${joke}
`
        )
        .join("")}`
    )
  }
)

let autoUpdate = await arg(
  "Auto-update works too!",
  input => `Have a ${input} day!`
)

[elijahmanor]

YES! I have several scripts where I would love to start using this! I look forward to playing with the new API. Thanks!

[johnlindquist]

@elijahmanor ok, released! Please let me know how the update goes!

[jsjoeio]

Screen.Recording.2021-03-30.at.7.50.00.AM.mov

Works really nicely! No immediate feedback comes to mind, besides wanting to use the arrow keys to select those links.
I feel like with many of these scripts I'm writing, I only get ideas after I see what other people have made.

I do like the md helper though and the fact that you can use Markdown with this is huge!

[johnlindquist]

Sweet, thanks for testing this for me. It was a big internal refactor which included silently adding marked to .kit during the update process. I was confident it would go smoothly, but really happy to see it in action!

Re: Arrows and links.
Strings -> These are intentionally non-interactive and highly visual
Arrays -> can generate a list for those links.
Objects -> Later this year, objects will be able to generate forms where you can have tons of fun :)

[elijahmanor]

Looks like if you have previously used a list with arg that those options will show up as you type for the new string version...

// Menu: Preview Panel List Bug
// Description: Bug with Panel
// Author: Elijah Manor
// Twitter: @elijahmanor

let number = await arg('Pick a number', [ 'One', 'Two', 'Three', 'Four', 'Five', 'Six' ]);

let response = await arg(
    'Start typing "Two" to see the bug...',
    `<p>You picked <span class="text-blue-400">${ number }</p>`
)

[johnlindquist]

Good catch, thanks! I'll release a fix today