adobe / helix-sidekick Goto Github PK

Description
in the business-website repository, the config didn't have a host property,
and then the Live button is missing:

workaround

execute the following in your console:

hlx.sidekickConfig.host='www.adobe.com'; hlx.initSidekick(); delete hlx.sidekick; hlx.initSidekick()

The sidekick config is currently stored in the author's bookmarklet URL. When an update to the config is required, e.g. to make use of a new feature, authors are asked to update their bookmarklets (i.e. replace it with a new one). Even though the sidekick redirects them to the right URL to get the fresh bookmarklet, it is still a manual task.

The sidekick also makes a request to the project host to see if there are any custom plugins to load.

In order to avoid manual bookmarklet updates in the future, both the sidekick config and plugins could be loaded from a single config file located on the project host.

Helix 3 sites should always use an outer CDN URL with branch name, e.g.

ref--repo--owner.hlx.live

See also #28

Before redirecting from the editor to the preview page, the Sidekick should have the preview re-generated.

Clicking the bookmarklet multiple times should toggle the sidekick. Instead, it now throws

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "helix-sidekick" has already been used with this registry

Since outer CDN (live) URLs can come with and without branches/refs, the sidekick should be able to detect both.

When migrating the first projects to hlx3, we hardcoded known projects to always have hlx3=true in the sidekick config, so we didn't have to bother the authors to update their bookmarklets.

Since #14, this is no longer necessary, as hlx3 can now be defined centrally for projects. The hardcoded projects and corresponding logic should be removed from the sidekick again.

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps): update external fixes (eslint, puppeteer)

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

If a production hostname contains a dash, the sidekick will turn it into a double dash. The expectation would be to leave non-helix hostnames untouched.

Input: abc-123.com
Expected output: abc-123.com
Actual output: abc--123.com

As a result, the sidekick plugins will not be available.

Do the full setup of a site running with hlx3.
Go to page preview and hit the publish button, you are redirected to a 404 page.

Reason: the main branch name is missing in the URL.

cc @rofe

🚨 The automated release from the main branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

No npm token specified.

An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/.

Good luck with your project ✨

Your semantic-release bot 📦🚀

The check was introduced with adobe/helix-pages#885 to force-update bookmarklets that erroneously had the byocdn flag set due to a bug in the bookmarklet generator page.

Since #14 this check is obsolete.

For custom extensions, integrations and telemetry, it would be useful to be able to listen to Sidekick events, e.g.

• shown
• hidden
• pluginused
• contextloaded
• statusfetched
• envswitched
• updated
• published

Create the bookmarklet with https://www.hlx.live/tools/sidekick/.
Enable the sidekick on a project page.
Close it.
Try to re-open: it will not show up.

JS error: Cannot call toggle() on undefined.

In order to speed up environment button actions, instead of fetching the preview status every time a button is clicked to retrieve the editUrl or path, it should be fetched once as part of loadContext(), and then again at an interval to update lastModified and lastPublished. This information could later be used to modify button states . For example, to disable the reload button if lastModified is in the past, or enable the publish button only of lastModified is newer than lastPublished.

The sidekick needs to remember that it already pushed down the content, otherwise there is a risk of adding the top margin all over again, resulting in a gap in the UI:

In the context of https://github.com/adobe/express-website-issues/issues/158 we should add a "Personalize" button to the Sidekick, which will work like this:

Preview/Live/Production

Clicking the button will open a dropdown that allows the user to select or reset an audience. The list of audiences is pulled from /_audiences.json at the site root, which is populated by a table consisting of the columns:

• name: display name of the audience, e.g. "returning visitor"
• description: optional description of the audience, shown as tooltip, e.g. "visitors who have been to adobe.com before in the last two weeks"
• id: ID of the audience manager audience, e.g. 1738236

Upon selecting an audience, the button will:

• set the window.hlx.audience variable to the selected ID
• fire a window.dispatchEvent(new CustomEvent('helix-audiencechanged', { detail: audienceId })); event
• persist the selected audience in a cookie or session storage

An (upcoming) personalization component will be able to listen to these events or read the values and display the matching content.

Edit

The same dropdown will be shown, but without an option to clear or set the audience, instead clicking an audience name will copy the audience ID so that it can be used in the first column of the personalization block's table

Edit 2

Incorporated @rofe's suggestions from below: #64 (comment)

• enable on *.hlx3.page
• use hlx3 reload
• use hlx3 publish (example)

The update request gets sent, but is asynchronous, so the preview page gets loaded before it finishes, showing the previous version of the page instead of the latest one.

I followed the Show&Tell instructions and installed the extension. I just added my first project: open the sidekick via bookmarklet, click the share button, go to that page, click "ok" to add to extension and click "ok" to open extensions.

First observation: the project I just added is not there.
Second observation: I pasted the share url to add the project again and it says the project has already been added.

See

See https://opensource.adobe.com/helix-admin/index.html

The condition function determines whether a plugin can be added or not in the first place. For added plugins, it could also be useful to influence the button state based on certain criteria. Like the {boolean|Function} isPressed, the pluginButton object could thereby support a {boolean|Function} isEnabled property. By default, a plugin button would always be enabled. If isEnabled evaluated to false however, the button would be rendered disabled.

The share URL should contain the hlx3 flag.

Browser extension to

• replace bookmarklet(s)
• support multiple configs in parallel
• keep displayed or hidden to save user clicks

POC: https://github.com/rofe/helix-sidekick/tree/sandbox

Some projects are using dynamic imports in their sidekick plugins, which only works if the config.js is loaded from the same host, or if proper CORS headers are included in the response.

showModal() should accept an object to make it easier to use.

For convenience, the sidekick extension should work on any ref/branch in preview and live. The ref specified in the config should just be the default when switching to preview or live from the editor.

If there is no production host defined in the Sidekick config, publish won't work, even though there is a valid outerHost (outer CDN).

Expected behavior: publish should work with just an outerHost.

If a page no longer has a source document, it should be possible for authors to remove its renditions in preview and live (effectively unpublishing it).

If a missing source document is detected in..

• Preview: Reload and Publish plugins should be hidden, Delete plugin should be shown
• Live: Publish should be hidden, Delete plugin should be shown

When clicked and confirmed by the user, all renditions will be removed.

When launching the sidekick on a CI/branch deployment of helix-pages (e.g. *.hlx-1.page), it doesn't recognize the URL as a preview URL and loads the config.js from the fallback *.hlx.page, which works, but subsequent CORS-bound requests made from within the config.js, such as loading one of the project's JS modules, will fail.

The sidekick currently defaults to the preview and live admin APIs. When surfing code files (JS, CSS), it could be helpful to be able to use actions from the code API when clicking Reload or Publish.

The config.js can't be loaded from preview when launching the sidekick on a live or prod URL. In that case, the sidekick will fall back to loading the plugins.js.

Going to:

https://main--business-website--adobe.hlx3.page/blog/trends/3-marketing-predictions-for-a-cookieless-world

and opening sidekick, I get a Live button. When pressed, this leads to non-existing domain:

https://undefined/...

If a project has a custom outerHost, the sidekick extension won't recognize a URL with this host as belonging to the project.

Currently, the sidekick renders a minimal set of buttons when pulled up in an unassociated Google or Word doc. It should detect the empty edit.url in the status and act accordingly.

The sidekick overlays the top of the document, hiding navigation or editor controls underneath. It would be better if it pushed the body down by its own height.

E.g. https://www.adobe.com/tools/sidekick/config.js

Proposed flow:

• go to https://github.com/${owner}/${repo}
• click the sidekick extension button
• if the project is not a known project, offer to add it to the config

This could work also for branches, i.e. if you are on https://github.com/${owner}/${repo}/tree/${branch}.

This would be an easy way to add a new sidekick config.

• how to run a custom version of the sidekick?
• how to release?

The new repo behind www.hlx.live will be https://github.com/adobe/helix-website.

In some special cases, it is required to have a outerHost that's deviating from the regular naming scheme. For this purpose, it should be possible to configure it in config.js.

The purgeHost config property was introduced to enable sending the HLXPURGE request to a diferent host than the current one. It was never officially documented and is no longer used. Custom plugins using it should be refactored.

Plugins should not be loaded until the status is fetched, so their state and action can be status-dependent.

User Story

As a tutorial writer, I would like the ability to send my students to the Sidekick creator with the hlx3 query param so they can enter their own project and have hlx3 support.

Expected Behaviour

Sidekick homepage respects hlx3=true without any other query parameters and can successfully pass this parameter to the bookmark when a visitor enters a github repo url.

Actual Behaviour

Sidekick homepage throws an alert that there is no repository URL.

Reproduce Scenario (including but not limited to)

Visit: https://www.hlx.live/tools/sidekick/?hlx3=true

For easier consumption in a browser extension sandbox

@davidnuescheler suggested that intuitely, Edit isn't really an environment but more of an action, so should be separated from the other environment switching actions, also from a window management POV: Edit should always open in its own (recycled?) window, while the others continue to share a single window (unless Cmd/Ctrl is being held down).

it seems that if

fails... then the UX is stuck in an endless loop with a setTimout(, 1000)