Offline Mode

Offer content creators the opportunity to generate and view draft HTML in the Bootstrap style when not connected to the Internet through creating a custom DITA-OT plugin.

This scenario walks through the process of creating a simple plug-in (com.example.bootstrap.offline) that bundles all the necessary Bootstrap JavaScript and CSS locally into the generated HTML output.

This could be used to allow writers to view an incomplete draft of the DITA content whilst maintaining Bootstrap interactivity and look-and-feel.

Note: This offline approach deliberately avoids the use of online CDNs and minimises the opportunity for browsers to cache files, and therefore is not recommended for production of documents placed online.

Procedure

In the plugins directory, create a directory named com.example.bootstrap-offine.

In the new com.example.bootstrap-offline directory, create a plug-in configuration file (plugin.xml) that uses the bootstrap.process.pre extension point.

<plugin id="com.example.bootstrap-offline" version="1.0.0">
  <require plugin="net.infotexture.dita-bootstrap" />
  <feature extension="ant.import" file="process_offline.xml" />
  <feature extension="bootstrap.process.pre" value="bootstrap.offline" />

  <transtype name="html5-bootstrap" extends="html5">
    <param name="offline.mode" type="enum">
      <val>yes</val>
      <val default="true">no</val>
    </param>
  </transtype>
</plugin>

Figure 1. Sample plugin.xml file

Note: This plug-in will extend the default HTML5 Bootstrap transformation, so the <require> element explicitly defines net.infotexture.dita-bootstrap as a dependency.

In the com.example.bootstrap-offline directory, create a subdirectory named include.
In the new include subdirectory, create a file named offline-bootstrap-js.xml containing the minified Bootstrap JavaScript code.
```
<div>
  <script>
//<![CDATA[
  ... Place the entirety of bootstrap.bundle.min.js JavaScript here
//]]>
  </script>
</div>
```
Figure 2. Sample offline-bootstrap-js.xml file
The division wrapper will be discarded when generating HTML files, and the contents will be inserted into the <header> element of each page.

In the new include subdirectory, create a file named offline-bootstrap.css containing the minified Bootstrap CSS.

@charset "UTF-8";
/*!
 * Bootstrap  v5.3.0 (https://getbootstrap.com/)
 * Copyright 2011-2023 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
... Place entirety of the bootstrap.min.css stylesheet here

Figure 3. Sample offline-bootstrap.css file

In the com.example.bootstrap-offline root directory, add an Ant script (process_offline.xml) to predefine various parameters prior to calling the html5-bootstrap transform

<?xml version="1.0" encoding="UTF-8" ?>
<project
  name="dita.plugin.com.example.bootstrap-offline"
  xmlns:if="ant:if"
  xmlns:unless="ant:unless">
  <target name="bootstrap.offline" if="offline.mode">
    <macrodef name="offline-theme">
      <sequential>
        <property name="args.copycss" value="yes" />
        <property name="args.csspath" value="css" />
        <property name="args.css" value="offline-bootstrap.css" />
        <property name="args.cssroot"
          value="${dita.plugin.com.example.bootstrap-offline.dir}/include" />
        <property name="args.hdf"
          value="${dita.plugin.com.example.bootstrap-offline.dir}/include/offline-bootstrap-js.xml" />
      </sequential>
    </macrodef>

    <condition property="offline.mode.no">
      <equals arg1="${offline.mode}" arg2="no" />
    </condition>

    <offline-theme unless:set="offline.mode.no" />
  </target>
</project>

Figure 4. Sample build file: process_offline.xml

Results

The plug-in directory has the following layout and files:

com.example.bootstrap-offline
├── include
│   ├── offline-bootstrap-js.xml
│   └── offline-bootstrap.css
├── plugin.xml
└── process_offline.xml

What to do next

Run dita --install to install the plug-in.
Build output with the html5-bootstrap type to verify that the output is available offline as intended.
```
dita --input=path/to/your.ditamap \
     --format=html5-bootstrap \
     --offline.mode=yes
```
Refine the styles in your offline-bootstrap.css file as necessary.