beta.46 Design, ⚐ Flags, div, fixed notify

Design/theme

Put a lot of work into tightening up pixels and made progress towards custom themes:

Here's a silly demo of me playing with theme generation:

Flags ⚐

An astute observer would notice that the Edit and Share tabs are now gone. They've been consolidated into a "flag menu".

When you press the right key from the main menu of script, the flag menu now opens up. This shows the selected script and gives you some options. It also exposes the keyboard shortcuts associated with those options that you can use to :

I've found I use cmd+o and cmd+n all the time to tweak scripts of quickly create a new one to play around with.

Custom Flags

You can pass your own custom flags like so:

Install flags-demo

//Menu: Flags demo

let urls = [
  "https://scriptkit.com",
  "https://egghead.io",
  "https://johnlindquist.com",
]

let flags = {
  open: {
    name: "Open",
    shortcut: "cmd+o",
  },
  copy: {
    name: "Copy",
    shortcut: "cmd+c",
  },
}

let url = await arg(
  { placeholder: `Press 'right' to see menu`, flags },
  urls
)

if (flag?.open) {
  $`open ${url}`
} else if (flag?.copy) {
  copy(url)
} else {
  console.log(url)
}

Notice that flag is a global while flags is an object you pass to arg. This is to help keep it consistent with terminal usage:

From the terminal

flags-demo --open

Will set the global flag.open to true

You could also run this and pass in all the args:

flags-demo https://egghead.io --copy

In the app, you could create a second script to pass flags to the first with. This is required if you need to pass multiple flags since the arg helper can only "submit" one per arg.

await run(`flags-demo https://egghead.io --copy`)

I'll put together some more demos soon. There are plenty of existing CLI tools out there using flags heavily, so lots of inspiration to pull from.

await div()

There's a new div "component". You can pass in arbitrary HTML. This works well with the md() helper which generates html from markdown.

Install div-demo

// Menu: Div Demo

// Hit "enter" to continue, escape to exit
await div(`<img src="https://placekitten.com/320"/>`)

await div(
  md(
    `
    # Some header

    ## You guessed it, an h2

    * I
    * love
    * lists
    `
  )
)

Fixed notify

notify is now fixed so that it doesn't open a prompt

The most basic usage is:

notify("Hello world")

notify leverages https://www.npmjs.com/package/node-notifier

So the entire API should be available. Here's an example of using the "type inside a notification":

Install notify-demo

// Menu: Notify Demo
let notifier = notify({
  title: "Notifications",
  message: "Write a reply?",
  reply: true,
})

notifier.on("replied", async (obj, options, metadata) => {
  await arg(metadata.activationValue)
})

Discuss Post