hotlightorg / hotlight Goto Github PK

Wrap any part of a view in a hotlight-keyzone and it will assign keys to elements. There's only one event listener listening to keydown which is global and the assignment of keys to elements happens when keydown happens.

When a key is pressed keyzone finds all element with the [data-hotkey] and maps those with the values that attribute has.
Additionally if mode="auto" then it finds all inputs,buttons,anchors,content editable and assigns a key incrementally. One zone at a time.

Each action can provide an optional property named aliases, an array of strings, that is used for matching and sorting.

It the value should be displayed in parenthesis if the query matches any of the aliases. Perhaps just the first matching alias.

Boost actions to make them appear at the top of the result list.

This can be done using a "follow" property on the action, that is an array of strings referring to other actions ID. Hotlight needs to sort the results based on actions that are "followed" by other actions.

• Site search
• Analytics

• Queries: no result, hits (never on external sources, only those specified as actions)
• Boost suggestions based on usage

• Cloud Configuration, basically a UI for what's in config. Publishing a new version of your configuration and hotlight is connected to this account with some identifier it will automatically be updated in the client.
• Curation (pinned or recommended actions on certain queries)
• Choose regions (eu/us etc)

It does not make sense to host/index private data, such as contacts in a crm, however can we add something that can be self hosted or at least small examples on how to search?

Make sure to never render hotlight if window does not exist.

Solve this at the core package to ensure wrappers just "inherit" this behavior.

https://rollupjs.org/repl/?version=2.61.1&shareable=JTdCJTIybW9kdWxlcyUyMiUzQSU1QiU3QiUyMm5hbWUlMjIlM0ElMjJtYWluLmpzJTIyJTJDJTIyY29kZSUyMiUzQSUyMiUyRiolMjBEWU5BTUlDJTIwSU1QT1JUUyU1Q24lMjAlMjAlMjBSb2xsdXAlMjBzdXBwb3J0cyUyMGF1dG9tYXRpYyUyMGNodW5raW5nJTIwYW5kJTIwbGF6eS1sb2FkaW5nJTVDbiUyMCUyMCUyMHZpYSUyMGR5bmFtaWMlMjBpbXBvcnRzJTIwdXRpbGl6aW5nJTIwdGhlJTIwaW1wb3J0JTIwbWVjaGFuaXNtJTVDbiUyMCUyMCUyMG9mJTIwdGhlJTIwaG9zdCUyMHN5c3RlbS4lMjAqJTJGJTVDbmlmJTIwKGRpc3BsYXlNYXRoKSUyMCU3QiU1Q24lNUN0aW1wb3J0KCcuJTJGbWF0aHMuanMnKS50aGVuKGZ1bmN0aW9uJTIwKG1hdGhzKSUyMCU3QiU1Q24lNUN0JTVDdGNvbnNvbGUubG9nKG1hdGhzLnNxdWFyZSg1KSklM0IlNUNuJTVDdCU1Q3Rjb25zb2xlLmxvZyhtYXRocy5jdWJlKDUpKSUzQiU1Q24lNUN0JTdEKSUzQiU1Q24lN0QlMjIlMkMlMjJpc0VudHJ5JTIyJTNBdHJ1ZSU3RCUyQyU3QiUyMm5hbWUlMjIlM0ElMjJtYXRocy5qcyUyMiUyQyUyMmNvZGUlMjIlM0ElMjJpbXBvcnQlMjBzcXVhcmUlMjBmcm9tJTIwJy4lMkZzcXVhcmUuanMnJTNCJTVDbiU1Q25leHBvcnQlMjAlN0JkZWZhdWx0JTIwYXMlMjBzcXVhcmUlN0QlMjBmcm9tJTIwJy4lMkZzcXVhcmUuanMnJTNCJTVDbiU1Q25leHBvcnQlMjBmdW5jdGlvbiUyMGN1YmUlMjAoeCUyMCklMjAlN0IlNUNuJTVDdHJldHVybiUyMHNxdWFyZSh4KSUyMColMjB4JTNCJTVDbiU3RCUyMiUyQyUyMmlzRW50cnklMjIlM0FmYWxzZSU3RCUyQyU3QiUyMm5hbWUlMjIlM0ElMjJzcXVhcmUuanMlMjIlMkMlMjJjb2RlJTIyJTNBJTIyZXhwb3J0JTIwZGVmYXVsdCUyMGZ1bmN0aW9uJTIwc3F1YXJlJTIwKCUyMHglMjApJTIwJTdCJTVDbiU1Q3RyZXR1cm4lMjB4JTIwKiUyMHglM0IlNUNuJTdEJTIyJTJDJTIyaXNFbnRyeSUyMiUzQWZhbHNlJTdEJTVEJTJDJTIyb3B0aW9ucyUyMiUzQSU3QiUyMmZvcm1hdCUyMiUzQSUyMmFtZCUyMiUyQyUyMm5hbWUlMjIlM0ElMjJteUJ1bmRsZSUyMiUyQyUyMmFtZCUyMiUzQSU3QiUyMmlkJTIyJTNBJTIyJTIyJTdEJTJDJTIyZ2xvYmFscyUyMiUzQSU3QiU3RCU3RCUyQyUyMmV4YW1wbGUlMjIlM0ElMjIwMCUyMiU3RA==

Currently, there are some outdated info residing in the package.json(s).

• bug / repo url
• description
• tags

Much like vim, while in Hotlight, you can press a special key that narrows down the search to a subset of all actions.

In a CRM, a mode can be @ to only search contacts, or # to search to search deals.

It would be good if the key was a natural prefix to the entities/actions it targets.

The modes can be configured as well as their keys.

Besides URL's and callback functions, a trigger can take a user from anywhere in an app to somewhere where the user will continue its journey, with support of focus().

A trigger would return something like { url: "/", focus: "new-comment" } which would focus an input field marked with 'data-hotlight-focus' at /.

Should focus points be centralized, into constants perhaps? Some kind of registry, but then again the actions themselves are centralized.

We can always send the us through cookies/local storage/query string or hash, but we don't want to interfere with frameworks.

This is mainly a placeholder for the scope of v0.0.3 of Hotlight.

• Simple fuzzy search from a source, that returns actions synchronously
• Well tested core package
• React, Vue and Svelte packages

https://github.com/yourtempo/tempo-quill-icons

Offer a way to optionally show a preview of an action to the right, similar to spotlight preview.

It should render html, perhaps through a template? Need to figure out how that would work through a react wrapper. Perhaps it could take a render function, that's specific for each wrapper?

Any action can have the hotkeys attribute. If present, the action indicates the hot keys right next to the title or at least in the result list. The end user can they press those hot keys to trigger that action.

Need I say more? 🌗

If an action has a trigger and a sub action (under the subActions property, or a separate action refering to the action through the parentAction property), you can choose to trigger with enter, or tab into to use the sub actions.

The UI should clearly state this, both by ... if there are sub actions and through text helpers below the input.

Each action can be tagged with a category, making the result list grouped by categories.

Example:
In a crm, there's contacts, organisations and deals. Actions returned from one or multiple sources are individually or per source tagged with a category.

Improves the UX in terms of easier logical differentiation of results.

Inspiration:

• https://linear.app/docs
• https://nextjs.org/docs/getting-started

Make the modal behave nicely in all screen sizes.
Try utilizing a11y linters?

A way to easily hook into a local router, lets take react router as an example.

When that is configured, hotlight looks at what the trigger is returning and passes it to this function that then determines if it should route or use something like location.href.

It takes a url as the first and only argument.

const onBeforeRoute ? = (url) => url.includes("hotlight.dev") ? Router.push(url) : location.href= url;

hotlight.configure({ onBeforeRoute });

Need better naming...

(Typing on a phone)

Enable an action to "request" arguments from the users.

const name = await arg("Your name");

// with options
const orgType = arg("Type of Organisation", { options: [{ label: "Large", value: "lg" }, { label: "small", value: "indie" }], strict: false, prefilled: "small" })

// disabling strict enables user to type anything

Since state and rendering is kind of messy, I'd like to see how fast you could port the core package to svelte.

https://www.thisdot.co/blog/web-components-with-svelte

Compare bundle size and make sure you're able to use the built web component like a normal one.

Public data should be included in the cloud offering, such as site search or documentation search.

However, for private data we can offer an easy to setup search engine that can take care of indexing and search to offload applications.

Add keyboard listener so that if "F" is pressed while not in an input element and this is configured, all elements with data-hl-shortcut="x" will be displayed like the vim browser extension.

Map those keys to commands in hotlight.

The user can type F - look at the screen and type the command that it displays "e" for edit for instance. On the contact view it's the same as "edit contact" action, except we already know what contact to edit, since that's in the context or provided through data attributes.

Currently, actions are depending on an argument list.

What if an action would "fetch" arguments in a sequence instead, enabling you to "stay" in an action and enter multiple arguments in a row. Maybe even specify a tiny argument api?

const name = await arg("Your Name", { type: "string" });

const email = await arg("Email");

const user = await createUser(name, email);

if(user) {
  route("/users/${user.id}");
}

For each feature, do a cypress test and try to automatically generate a gif from it. Voila self documented end to end tests.

Separate product?

Offer built-in custom elements for preview.

<hotlight-row>
  <hotlight-label>
    Name:
  </hotlight-label>
</hotlight-row>