Edit online

Displaying prolog details (author, creation date, read time)

19 Sep 2022
Read time: 3 minute(s)

DITA topics can contain a <prolog> element with various details such as the author name, creation date, and other details that are not displayed in the published output by default.

<topic id="...">
    <title>...</title>
    <prolog>
        <author>...</author>
        <critdates>
            <created date="2022-01-13"/>
        </critdates>

At the time of publishing, we can show the author name, creation date, and the number of minutes it takes to read the article before the actual topic content by customizing the WebHelp Responsive output.

DITA WebHelp output can be customized using a publishing template mechanism. Inside a publishing template folder, there is an opt file that can contain links to various XSLT stylesheets that are useful for customizations. For example, we'll add a link to a stylesheet for processing the DITA <prolog>:
<publishing-template>
    <name>.....</name>
    ......
        <xslt>
            ....
            <extension file="xslt/prolog.xsl" id="com.oxygenxml.webhelp.xsl.dita2webhelp"/>
            .....
        </xslt>
    </webhelp>
</publishing-template>
The prolog.xsl stylesheet will display the author name, creation date, and an approximate number of minutes it takes to read the article:
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:xs="http://www.w3.org/2001/XMLSchema" exclude-result-prefixes="xs" version="2.0">
    <xsl:template match="*[contains(@class, ' topic/prolog ')]">
        <!-- Display the author name -->
        <xsl:variable name="avatar-author" select="replace(*[contains(@class, ' topic/author ')],' ','_')"/>
        <div class="author">
           <xsl:value-of select="*[contains(@class, ' topic/author ')]"/>
        </div>
        <!-- Display the creation date -->
        <xsl:if test="exists(.//*[contains(@class, ' topic/created ')]/@date)">  
            <div class="date">
                <xsl:variable name="cd" select=".//*[contains(@class, ' topic/created ')]/@date"/>
                <xsl:value-of select="format-date(xs:date($cd), 
                    '[D] [MNn,3-3] [Y0001]')"/>
            </div>
        </xsl:if>
        <!-- Display the number of minutes it takes to read the article -->
        <div>
            <xsl:variable name="fileContent" select="/"/>
            <xsl:variable name="text" select="normalize-space($fileContent)"/> 
            <xsl:variable name="textWithoutSpaces" select="translate($fileContent, ' ', '')" /> 
            <xsl:variable name="fileCountWords" select="string-length($text) - string-length($textWithoutSpaces) +1"/>
            <xsl:variable name="readMin" select="format-number($fileCountWords div 50, '0')"/>
            Read time: <xsl:value-of select="$readMin"/> minute(s)
        </div>
        <xsl:next-match/>
    </xsl:template>
</xsl:stylesheet>

The WebHelp publishing template used for publishing this blog already has a customization to display information from the prolog: https://github.com/oxygenxml/blog/tree/master/publishing/webhelpBlogTemplate.

Each published topic contains information about the author name, created date, and an estimate number of minutes it takes to read the article. The author name display can be enriched with an avatar photo: