Merge branch 'release/5.3'

* release/5.3: (152 commits)
  Bump plug-in version to 5.3
  Auto-format via Prettier, Husky & lint-staged
  Update reference links
  Clarify use of custom CSS
  Clarify how to use list group ToC parameters
  Update code styles
  Use <cmdname> markup for `dita` command
  Sync details on utility classes
  Update README
  Fix `list-group-partial` value
  Update README screenshots
  Switch sample custom theme to Fresca
  Move customizations to CI theme
  Update sample ToC screenshots
  Sync navigation menu description changes
  Update @othertype attribute & fix punctuation
  Sync header and footer description changes
  Simplify footer examples
  Use accordion background for dark list group items
  Standardize codeblock indentation to 2 spaces (#15)
  ...

.gitattributes

@@ -28,3 +28,8 @@
 *.otf   binary
 *.ttf   binary
 *.woff  binary
+
+css/** linguist-vendored
+sample/** linguist-documentation
+
+build_dita2html5-bootstrap.xml linguist-language=Ant-Build-System

.github/dita-ot/footer.xml

@@ -0,0 +1,38 @@
+<!-- Footer -->
+<div class="container text-center">
+  <div class="row">
+    <div class="col">
+      <!-- Social media -->
+      <p class="text-center p-3">
+        <!-- GitHub -->
+        <a
+          class="btn btn-primary btn-floating m-1"
+          style="background-color: #333333"
+          href="https://github.com/infotexture/dita-bootstrap"
+          role="button"
+        ><i class="bi bi-github"/></a>
+        <!-- Linkedin -->
+        <a
+          class="btn btn-primary btn-floating m-1"
+          style="background-color: #0082ca"
+          href="https://www.linkedin.com/in/infotexture/"
+          role="button"
+        ><i class="bi bi-linkedin"/></a>
+        <!-- Twitter -->
+        <a
+          class="btn btn-primary btn-floating m-1"
+          style="background-color: #55acee"
+          href="https://twitter.com/infotexture"
+          role="button"
+        ><i class="bi bi-twitter"/></a>
+      </p>
+      <p class="p-3">
+        <small>
+          © 2021
+          <a class="text-dark" href="https://infotexture.net/">infotexture</a>
+        </small>
+      </p>
+    </div>
+  </div>
+</div>
+<!-- Footer -->

.github/dita-ot/header.xml

@@ -0,0 +1,62 @@
+<nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-4">
+
+  <div class="container">
+    <a class="navbar-brand" href="https://infotexture.github.io/dita-bootstrap">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        fill="currentColor"
+        class="bi bi-bootstrap"
+        viewBox="0 0 16 16"
+      >
+        <path
+          d="M5.062 12h3.475c1.804 0 2.888-.908 2.888-2.396 0-1.102-.761-1.916-1.904-2.034v-.1c.832-.14 1.482-.93 1.482-1.816 0-1.3-.955-2.11-2.542-2.11H5.062V12zm1.313-4.875V4.658h1.78c.973 0 1.542.457 1.542 1.237 0 .802-.604 1.23-1.764 1.23H6.375zm0 3.762V8.162h1.822c1.236 0 1.887.463 1.887 1.348 0 .896-.627 1.377-1.811 1.377H6.375z"
+        />
+        <path
+          d="M0 4a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4zm4-3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3H4z"
+        />
+      </svg>
+      DITA Bootstrap
+    </a>
+    <button
+      class="navbar-toggler"
+      type="button"
+      data-bs-toggle="collapse"
+      data-bs-target="#navbarSupportedContent"
+      aria-controls="navbarSupportedContent"
+      aria-expanded="false"
+      aria-label="Toggle navigation"
+    >
+      <span class="navbar-toggler-icon"/>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <ul class="navbar-nav">
+        <li class="nav-item">
+          <a
+            class="nav-link"
+            href="https://www.dita-ot.org/plugins#!net.infotexture.dita-bootstrap"
+          >Plugin</a>
+        </li>
+        <li class="nav-item">
+          <a
+            class="nav-link"
+            href="https://github.com/infotexture/dita-bootstrap/releases"
+          >Releases</a>
+        </li>
+        <li class="nav-item">
+          <a
+            class="nav-link"
+            href="https://github.com/infotexture/dita-bootstrap"
+          >Source</a>
+        </li>
+        <li class="nav-item">
+          <a
+            class="nav-link"
+            href="https://getbootstrap.com/docs/5.0"
+          >Bootstrap Docs</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</nav>

.github/dita-ot/html.ditaval

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<val>
+  <prop action="include" att="deliveryTarget" val="html"/>
+  <prop action="exclude" att="deliveryTarget" val="pdf"/>
+</val>

.github/dita-ot/html.xml

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<?xml-model href="https://www.dita-ot.org/rng/project.rnc" type="application/relax-ng-compact-syntax"?>
+<project xmlns="https://www.dita-ot.org/project">
+  <context id="html" name="HTML">
+    <input href="../../sample/document.ditamap"/>
+    <profile>
+      <ditaval href="html.ditaval"/>
+    </profile>
+  </context>
+  <deliverable name="HTML5" id="html">
+    <context idref="html"/>
+    <output href="html"/>
+    <publication transtype="html5-bootstrap">
+      <param name="args.copycss" value="yes"/>
+      <param name="args.css" value="theme.css"/>
+      <param name="args.csspath" value="css"/>
+      <param name="args.cssroot" path="."/>
+      <param name="args.hdr" href="header.xml"/>
+      <param name="args.ftr" href="footer.xml"/>
+      <param name="html5.toc.generate" value="no"/>
+      <param name="args.rellinks" value="none"/>
+      <param name="nav-toc" value="list-group-full"/>
+      <param name="processing-mode" value="strict"/>
+      <param name="icons.include" value="yes"/>
+    </publication>
+  </deliverable>
+</project>

.github/dita-ot/theme.css

@@ -0,0 +1,27 @@
+/*
+  This sample applies the default Bootstrap 5 theme and any additional CSS overrides
+   ↓ For a custom look-and-feel, a generated Bootstrap theme could be added below ↓
+*/
+
+/* ↑ End generated Bootstrap theme ↑ */
+
+/* ↓  Additional custom overrides  ↓ */
+
+.list-group-item-dark {
+  background-color: #e7f1ff;
+}
+
+footer {
+  background-color: #e7f1ff;
+  border-top: 1px solid rgba(0, 0, 0, 0.125);
+  margin-top: 3rem;
+}
+
+/* Add Bootstrap’s own documentation example highlight */
+
+.bd-example {
+  position: relative;
+  padding: 1rem;
+  margin: 1rem -0.75rem 0;
+  border: solid #dee2e6 1px;
+}

.github/workflows/ci.yml

@@ -0,0 +1,33 @@
+name: CI
+'on':
+  push:
+    branches:
+      - master
+      - develop
+  workflow_dispatch:
+jobs:
+  build-dita:
+    name: Build DITA
+    runs-on: ubuntu-latest
+    steps:
+      - name: Git checkout
+        uses: actions/checkout@v2
+      - name: Build Bootstrap
+        uses: dita-ot/dita-ot-action@master
+        with:
+          install: |
+            apt-get update -q
+            export DEBIAN_FRONTEND=noninteractive
+            apt-get install -qy --no-install-recommends nodejs
+            nodejs -v
+          plugins: |
+            https://github.com/jason-fox/fox.jason.extend.css/archive/master.zip
+            https://github.com/infotexture/dita-bootstrap/archive/develop.zip
+            https://github.com/jason-fox/fox.jason.prismjs/archive/master.zip
+          project: .github/dita-ot/html.xml
+      - name: Deploy HTML 🚀
+        uses: JamesIves/github-pages-deploy-action@3.7.1
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BRANCH: gh-pages # The branch the action should deploy to.
+          FOLDER: out/html # The folder the action should deploy.

.prettierignore

@@ -0,0 +1,4 @@
+# This file specifies files that Prettier should not format
+
+backups
+out

.prettierrc.json

@@ -0,0 +1,37 @@
+{
+  "arrowParens": "avoid",
+  "bracketSpacing": false,
+  "endOfLine": "lf",
+  "htmlWhitespaceSensitivity": "css",
+  "printWidth": 120,
+  "proseWrap": "preserve",
+  "requirePragma": false,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false,
+  "vueIndentScriptAndStyle": true,
+  "xmlSelfClosingSpace": false,
+  "xmlWhitespaceSensitivity": "strict",
+  "overrides": [
+    {
+      "files": "*.json",
+      "options": {
+        "printWidth": 200
+      }
+    },
+    {
+      "files": "*.xml",
+      "options": {
+        "printWidth": 80
+      }
+    },
+    {
+      "files": "*.xsl",
+      "options": {
+        "parser": "xml"
+      }
+    }
+  ]
+}

Customization/xsl/accordion.xsl

@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  This file is part of the DITA Bootstrap plug-in for DITA Open Toolkit.
+  See the accompanying LICENSE file for applicable licenses.
+-->
+<xsl:stylesheet
+  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+  xmlns:dita-ot="http://dita-ot.sourceforge.net/ns/201007/dita-ot"
+  xmlns:xhtml="http://www.w3.org/1999/xhtml"
+  xmlns:xs="http://www.w3.org/2001/XMLSchema"
+  version="2.0"
+  exclude-result-prefixes="xs xhtml dita-ot"
+>
+  <!-- Customization to add Bootstrap Accordion Component -->
+  <!-- https://getbootstrap.com/docs/5.0/components/accordion/ -->
+
+  <xsl:template match="*[contains(@class,' topic/bodydiv ') and contains(@outputclass, 'accordion')]">
+    <div>
+      <xsl:attribute name="id" select="dita-ot:generate-html-id(.)"/>
+      <xsl:call-template name="commonattributes"/>
+      <xsl:apply-templates mode="accordion"/>
+    </div>
+  </xsl:template>
+
+  <xsl:template match="*[contains(@class, ' topic/section ')]" mode="accordion">
+    <xsl:param name="headLevel">
+      <xsl:variable name="headCount" select="count(ancestor::*[contains(@class, ' topic/topic ')])+1"/>
+      <xsl:choose>
+        <xsl:when test="$headCount > 6">h6</xsl:when>
+        <xsl:otherwise>h<xsl:value-of select="$headCount"/></xsl:otherwise>
+      </xsl:choose>
+    </xsl:param>
+
+    <xsl:variable name="index" select="count(preceding-sibling::*[contains(@class, ' topic/section ')])"/>
+    <xsl:variable name="id" select="dita-ot:generate-html-id(.)"/>
+    <xsl:variable name="parent" select="dita-ot:generate-html-id(..)"/>
+
+    <div class="accordion-item">
+      <!--xsl:call-template name="commonattributes">
+           <xsl:with-param name="default-output-class" select="'accordion-item'"/>
+      </xsl:call-template-->
+
+      <xsl:element name="{$headLevel}">
+        <xsl:attribute name="type" select="'accordion-header'"/>
+        <xsl:attribute name="id" select="concat('heading_' ,$id)"/>
+        <button class="accordion-button" type="button" data-bs-toggle="collapse">
+          <xsl:attribute
+            name="aria-expanded"
+            select="(count(preceding-sibling::*[contains(@class, ' topic/section ')]) = 0)"
+          />
+          <xsl:attribute name="class">
+            <xsl:text>accordion-button</xsl:text>
+            <xsl:if test="count(preceding-sibling::*[contains(@class, ' topic/section ')]) > 0">
+              <xsl:text> collapsed</xsl:text>
+            </xsl:if>
+          </xsl:attribute>
+          <xsl:attribute name="data-bs-target" select="concat('#collapse_' ,$id)"/>
+          <xsl:attribute name="aria-controls" select="concat('collapse_' ,$id)"/>
+          <xsl:value-of select="*[contains(@class, ' topic/title ')]"/>
+        </button>
+      </xsl:element>
+      <div>
+        <xsl:attribute name="class">
+          <xsl:text>accordion-collapse collapse</xsl:text>
+          <xsl:if test="count(preceding-sibling::*[contains(@class, ' topic/section ')]) = 0">
+            <xsl:text> show</xsl:text>
+          </xsl:if>
+        </xsl:attribute>
+        <xsl:attribute name="id" select="concat('collapse_' ,$id)"/>
+        <xsl:attribute name="aria-labelledby" select="concat('heading_' ,$id)"/>
+        <xsl:attribute name="data-bs-parent" select="concat('#', $parent)"/>
+        <div class="accordion-body">
+          <!--xsl:call-template name="commonattributes">
+                <xsl:with-param name="default-output-class" select="'accordion-body'"/>
+             </xsl:call-template-->
+          <xsl:call-template name="gen-toc-id"/>
+          <xsl:call-template name="setidaname"/>
+          <xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-startprop ')]" mode="out-of-line"/>
+          <xsl:apply-templates
+            select="*[not(contains(@class, ' topic/title '))] | text() | comment() | processing-instruction()"
+          />
+          <xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-endprop ')]" mode="out-of-line"/>
+        </div>
+      </div>
+    </div>
+  </xsl:template>
+</xsl:stylesheet>