Pre-publish content check

Introduction

Siteimprove crawl published pages to be able to analyze them. This means that editors can't get a fast check of a page before publishing it. This is where the new (released in version 8.x-1.8 of the Siteimprove module) pre-publish feature come in handy. It allow editors to trigger a pre-publish check of unpublished page or a draft version of an existing published page and get the result in the Siteimprove plugin.

We will in the following sections cover how to configure and use it.

Notice

The Siteimprove pre-publish feature is sending the generated HTML to Siteimprove and Siteimprove are only storing the data temporarily while analyzing it. If you reload the page or navigate away from the page after a pre-publish check will the results therefore be gone. If you use core Quick Edit module or similar in-line editing solution should you be able to edit the issues found by the pre-publish check without leaving the page and loosing the result. Notice that core Quick Edit module only work on the node view route (/node/1234) and not on the latest revision route (/node/1234/latest).

Configuration

Pre-publish configuration

1. Navigate to the Siteimprove Plugin settings page; /admin/config/system/siteimprove
2. In the Prepublish Check fieldset check Enable prepublish check.
3. Fill in your Siteimprove API username and API key (configured and generated in Siteimprove) in the fields Siteimprove API username and Siteimprove API key.
4. Select one or more content types in the field Enabled content types where prepublish check should be available.
5. Select one or more taxonomies in the field Enabled taxonomies where prepublish check should be available.
6. Click on Save Configuration button.

When the page has been saved should the Siteimprove API response status change to green and show that prepublish has been enabled on your Siteimprove account.

Permissions

Using the pre-publish check feature require the following permission:

Use Siteimprove Pre-publish Check [machine name: use siteimprove prepublish]

Where is pre-publish supported?

Pre-publish check is available on the following routes:

• Node view [/node/123]
• Node view latest revision [/node/123/latest]
• Taxonomy term view [/taxonomy/term/123]

Trigger a pre-publish check

To trigger a new pre-publish check click the Prepublish check toolbar item. The toolbar item is available on the above routes to users with the above permision.

Pre-publish check toolbar item.

Short after clicking this toolbar item will the Siteimprove plugin open with a status that the pre-publish check is in progress. This process can take a few minutes before it is done.

The Siteimprove pre-publish check has been triggered and is in progress.

Pre-publish results and highlights

When the pre-publish check process has finished will the Siteimprove plugin show the Prepublish view tab with the results.

The results from the pre-publish check is now shown in the SIteimprove plugin.

Click one of the categories of issues. For example Accessibility to see details about the found accessibility issues.

The results from the pre-publish check is now shown in the SIteimprove plugin.

Some of the results e.g. accessibility and spelling issues support highlighting the text block / paragraph where the error was found. Clicking one of the eye-icons will activate the highlight for this issue.

A highlighted text block with a spelling issue found by the pre-publish check.

React when a text is highlighted

In some special cases can it be necessary to implement custom changes or manipulate the DOM when the Siteimprove plugin highlight a text. If the highlighted text for example is inside a collapsed or hidden element, would it be good for the editorial experience if we automatically expand or show the element and the highlighted text. This can now be solved from a custom theme or module.

When a text is highlighted is a JavaScript event dispatched. The name of the event is siteimproveContentcheckHighlight. The event object contains a custom property named highlightSelector which hold the DOM selector used for highlighting the text. This selector can be used to find for example a hidden parent element and display it. 

An example of how to listen for the siteimproveContentcheckHighlight event:

(function () {
  document.addEventListener("siteimproveContentcheckHighlight", function(e) {
    var hiddenElement = document.querySelector(e.highlightSelector).closest('.visually-hidden');
      if (hiddenElement != null) {
        hiddenElement.classList.remove('visually-hidden');    
    }
  });
})();