Merge pull request #118 from jason-fox/feature/footer

Add Bootstrap classes to Footer
infotexture · Sep 6, 2023 · dd333f3 · dd333f3
2 parents 04b618b + c917ce3
commit dd333f3
Show file tree

Hide file tree

Showing 8 changed files with 206 additions and 45 deletions.
diff --git a/.github/dita-ot/footer.xml b/.github/dita-ot/footer.xml
@@ -3,33 +3,39 @@
   <div class="row">
     <div class="col">
       <!-- Social media -->
-      <p class="text-center p-3">
+      <p class="pt-3">
         <!-- GitHub -->
         <a
-          class="btn btn-primary btn-floating m-1"
-          style="background-color: #333333"
+          class="btn m-1"
           href="https://github.com/infotexture/dita-bootstrap"
           role="button"
-        ><i class="bi bi-github"/></a>
+          style="background-color: #333333;"
+        >
+          <i class="bi bi-github text-white"/>
+        </a>
         <!-- Linkedin -->
         <a
-          class="btn btn-primary btn-floating m-1"
-          style="background-color: #0082ca"
+          class="btn m-1"
           href="https://www.linkedin.com/in/infotexture/"
           role="button"
-        ><i class="bi bi-linkedin"/></a>
-        <!-- Twitter -->
+          style="background-color: #0082ca;"
+        >
+          <i class="bi bi-linkedin text-white"/>
+        </a>
+        <!-- Mastodon -->
         <a
-          class="btn btn-primary btn-floating m-1"
-          style="background-color: #55acee"
-          href="https://twitter.com/infotexture"
+          class="btn m-1"
+          href="https://indieweb.social/@infotexture"
           role="button"
-        ><i class="bi bi-twitter"/></a>
+          style="background-color: #563acc;"
+        >
+          <i class="bi bi-mastodon text-white"/>
+        </a>
       </p>
-      <p class="p-3">
+      <p>
         <small>
           © 2017–2023
-          <a class="text-dark" href="https://infotexture.net/">infotexture</a>
+          <a href="https://infotexture.net/">infotexture</a>
         </small>
       </p>
     </div>

diff --git a/.github/dita-ot/theme.css b/.github/dita-ot/theme.css
@@ -7,12 +7,6 @@
 
 /* ↓  Additional custom overrides  ↓ */
 
-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 {

diff --git a/Customization/xsl/topic.xsl b/Customization/xsl/topic.xsl
@@ -14,6 +14,7 @@
 
   <xsl:param name="defaultLanguage" select="'en'" as="xs:string"/>
   <xsl:param name="BIDIRECTIONAL_DOCUMENT" select="'no'" as="xs:string"/>
+  <xsl:param name="BOOTSTRAP_CSS_FOOTER" select="'mt-3 border-top bg-primary-subtle'"/>
 
   <xsl:variable name="defaultDirection">
     <xsl:apply-templates select="." mode="get-render-direction">
@@ -77,8 +78,11 @@
         </xsl:if>
         <!-- ↑ End customization · Continue with DITA-OT defaults ↓ -->
         <xsl:attribute name="aria-labelledby">
-          <xsl:apply-templates select="*[contains(@class,' topic/title ')] |
-                                       self::dita/*[1]/*[contains(@class,' topic/title ')]" mode="return-aria-label-id"/>
+          <xsl:apply-templates
+            select="*[contains(@class,' topic/title ')] |
+                                       self::dita/*[1]/*[contains(@class,' topic/title ')]"
+            mode="return-aria-label-id"
+          />
         </xsl:attribute>
         <xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-startprop ')]" mode="out-of-line"/>
         <!-- ↓ Add Bootstrap breadcrumb ↓ -->
@@ -151,19 +155,23 @@
             </xsl:analyze-string>
           </xsl:for-each>
         </xsl:variable>
-        <xsl:for-each select="@props |
+        <xsl:for-each
+          select="@props |
                               @audience |
                               @platform |
                               @product |
                               @otherprops |
                               @deliveryTarget |
-                              @*[local-name() = $specializations]">
+                              @*[local-name() = $specializations]"
+        >
           <xsl:attribute name="data-{name()}" select="."/>
         </xsl:for-each>
       </xsl:when>
       <xsl:when test="exists($passthrough-attrs)">
         <xsl:for-each select="@*">
-          <xsl:if test="$passthrough-attrs[@att = name(current()) and (empty(@val) or (some $v in tokenize(current(), '\s+') satisfies $v = @val))]">
+          <xsl:if
+            test="$passthrough-attrs[@att = name(current()) and (empty(@val) or (some $v in tokenize(current(), '\s+') satisfies $v = @val))]"
+          >
             <xsl:attribute name="data-{name()}" select="."/>
           </xsl:if>
         </xsl:for-each>
@@ -207,7 +215,10 @@
         </xsl:call-template>
       </span>
       <xsl:text> </xsl:text>
-      <xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-startprop ')]/revprop" mode="ditaval-outputflag"/>
+      <xsl:apply-templates
+        select="*[contains(@class, ' ditaot-d/ditaval-startprop ')]/revprop"
+        mode="ditaval-outputflag"
+      />
       <xsl:apply-templates/>
       <!-- Normal end flags and revision end flags both go out after the content. -->
       <xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-endprop ')]" mode="out-of-line"/>
@@ -249,7 +260,10 @@
   <xsl:template name="place-fig-lbl">
     <xsl:param name="stringName"/>
     <!-- Number of fig/title's including this one -->
-    <xsl:variable name="fig-count-actual" select="count(preceding::*[contains(@class, ' topic/fig ')]/*[contains(@class, ' topic/title ')])+1"/>
+    <xsl:variable
+      name="fig-count-actual"
+      select="count(preceding::*[contains(@class, ' topic/fig ')]/*[contains(@class, ' topic/title ')])+1"
+    />
     <xsl:variable name="ancestorlang">
       <xsl:call-template name="getLowerCaseLang"/>
     </xsl:variable>
@@ -410,4 +424,24 @@
       <xsl:apply-templates/>
     </abbr>
   </xsl:template>
+
+  <xsl:template match="*" mode="addFooterToHtmlBodyElement">
+    <xsl:variable name="footer-content" as="node()*">
+      <xsl:call-template name="gen-user-footer"/> <!-- include user's XSL running footer here -->
+      <xsl:call-template name="processFTR"/>      <!-- Include XHTML footer, if specified -->
+    </xsl:variable>
+    <xsl:if test="exists($footer-content)">
+      <footer xsl:use-attribute-sets="footer">
+        <!-- ↓ Add Bootstrap CSS ↓ -->
+        <xsl:attribute name="class">
+          <xsl:value-of select="$BOOTSTRAP_CSS_FOOTER"/>
+          <xsl:if test="not($TOC_SPACER_PADDING = '0')">
+            <xsl:value-of select="concat(' py-', $TOC_SPACER_PADDING)"/>
+          </xsl:if>
+        </xsl:attribute>
+        <xsl:sequence select="$footer-content"/>
+         <!-- ↓ Add Bootstrap CSS ↓ -->
+      </footer>
+    </xsl:if>
+  </xsl:template>
 </xsl:stylesheet>
diff --git a/README.md b/README.md
@@ -94,7 +94,7 @@ For more extensive Sass customizations, you may want to install the [dita-bootst
 
 The plug-in includes a default static navigation menu with a project name and global link placeholders.
 
-The default header file `includes/bs-navbar-default.hdr.xml` uses the Bootstrap primary (blue) background color for the [navbar component][3].
+The default header file `includes/bs-navbar-default.hdr.xml` uses the Bootstrap primary (blue) background color for the [navbar component][3]. Bootstrap itself offers additional [header examples][20].
 
 To change the color to a dark (black) background, replace the primary background color class `bg-primary` on the first line with the dark variant `bg-dark`:
 
@@ -113,7 +113,7 @@ dita --input=path/to/your.ditamap \
 
 The plug-in includes a sample [header alternative with a light navbar][4].
 
-No footer is added by default, but the plug-in also includes a sample [footer file][5]. To add a footer to the generated output, pass a custom footer file to the `dita` command via the `--args.ftr` parameter:
+No footer is added by default, but the plug-in also includes a sample [footer file][5] and Bootstrap also offers additional [examples][19]. To add a footer to the generated output, pass a custom footer file to the `dita` command via the `--args.ftr` parameter:
 
 ```console
 dita --input=path/to/your.ditamap \
@@ -174,6 +174,7 @@ The HTML output for the following DITA elements can be annotated with common Boo
 - `bootstrap.css.figure` – common utility classes for DITA `<fig>` elements
 - `bootstrap.css.figure.caption` – common utility classes for DITA figure titles
 - `bootstrap.css.figure.image` – common utility classes for images within DITA`<fig>` elements
+- `bootstrap.css.footer` – common utility classes for the HTML `<footer>` element
 - `bootstrap.css.nav.parent` – common utility classes for ancestors of active nav-pill elements
 - `bootstrap.css.pagination` – common utility classes for Bootstrap pagination components
 - `bootstrap.css.section.title` – common Bootstrap utility classes for DITA `<section>` titles
@@ -211,7 +212,7 @@ Bootstrap icons, popovers, tooltips and the dark-mode toggler are enabled by def
 - `popovers.include` – enable Bootstrap popover components and tooltip components
 - `dark.mode.include` - whether to include support for a [dark mode][17] toggler
 
-Additionally, opt-in breadcrumbs and menu bars can be added using the following parameters
+Additionally, opt-in breadcrumbs and menu bars and other modifiers can be added using the following parameters
 
 - `args.breadcrumbs` – add Bootstrap breadcrumb components
 - `menubar-toc.include` – add a Bootstrap menubar
@@ -252,3 +253,5 @@ Within the sample documentation, where necessary, the texts describing the usage
 [16]: https://getbootstrap.com/docs/5.3/components/collapse/
 [17]: https://getbootstrap.com/docs/5.3/customize/color-modes/#dark-mode
 [18]: https://getbootstrap.com/docs/5.3/components/scrollspy/
+[19]: https://getbootstrap.com/docs/5.3/examples/footers/
+[20]: https://getbootstrap.com/docs/5.3/examples/headers/
diff --git a/includes/bs-footer-example.xml b/includes/bs-footer-example.xml
@@ -1,43 +1,142 @@
+<?xml version="1.0" encoding="UTF-8"?>
 <!-- Footer -->
 <div class="container text-center">
   <div class="row">
     <div class="col">
       <!-- Social media -->
-      <p class="text-center p-3">
+      <p class="pt-3">
         <!-- GitHub -->
         <a
-          class="btn btn-primary btn-floating m-1"
-          style="background-color: #333333"
+          class="btn m-1"
           href="#!"
           role="button"
+          style="background-color: #333333;"
         >
-          <i class="bi bi-github"/>
+          <i class="bi bi-github text-white"/>
         </a>
         <!-- Linkedin -->
         <a
-          class="btn btn-primary btn-floating m-1"
-          style="background-color: #0082ca"
+          class="btn m-1"
           href="#!"
           role="button"
+          style="background-color: #0082ca;"
         >
-          <i class="bi bi-linkedin"/>
+          <i class="bi bi-linkedin text-white"/>
+        </a>
+        <!-- Mastodon -->
+        <a
+          class="btn m-1"
+          href="#!"
+          role="button"
+          style="background-color: #563acc;"
+        >
+          <i class="bi bi-mastodon text-white"/>
         </a>
         <!-- Twitter -->
         <a
-          class="btn btn-primary btn-floating m-1"
-          style="background-color: #55acee"
+          class="btn m-1"
+          href="#!"
+          role="button"
+          style="background-color: #55acee;"
+        >
+          <i class="bi bi-twitter text-white"/>
+        </a>
+        <!-- Facebook -->
+        <a
+          class="btn m-1"
+          style="background-color: #3b5998;"
+          href="#!"
+          role="button"
+        >
+          <i class="bi bi-facebook text-white"/>
+        </a>
+        <!-- Google -->
+        <a
+          class="btn m-1"
+          style="background-color: #dd4b39;"
+          href="#!"
+          role="button"
+        >
+          <i class="bi bi-google text-white"/>
+        </a>
+        <!-- Instagram -->
+        <a
+          class="btn m-1"
+          style="background-color: #ac2bac;"
+          href="#!"
+          role="button"
+        >
+          <i class="bi bi-instagram text-white"/>
+        </a>
+        <!-- Pinterest -->
+        <a
+          class="btn m-1"
+          style="background-color: #c61118;"
+          href="#!"
+          role="button"
+        >
+          <i class="bi bi-pinterest text-white"/>
+        </a>
+        <!-- Stack overflow -->
+        <a
+          class="btn m-1"
+          style="background-color: #ffac44;"
+          href="#!"
+          role="button"
+        >
+          <i class="bi bi-stack-overflow text-white"/>
+        </a>
+        <!-- Youtube -->
+        <a
+          class="btn m-1"
+          style="background-color: #ed302f;"
+          href="#!"
+          role="button"
+        >
+          <i class="bi bi-youtube text-white"/>
+        </a>
+        <!-- Slack -->
+        <a
+          class="btn m-1"
+          style="background-color: #481449;"
+          href="#!"
+          role="button"
+        >
+          <i class="bi bi-slack text-white"/>
+        </a>
+        <!-- Dribbble -->
+        <a
+          class="btn m-1"
+          style="background-color: #ec4a89;"
+          href="#!"
+          role="button"
+        >
+          <i class="bi bi-dribbble text-white"/>
+        </a>
+        <!-- Reddit -->
+        <a
+          class="btn m-1"
+          style="background-color: #ff4500;"
           href="#!"
           role="button"
         >
-          <i class="bi bi-twitter"/>
+          <i class="bi bi-reddit text-white"/>
+        </a>
+        <!-- Whatsapp -->
+        <a
+          class="btn m-1"
+          style="background-color: #25d366;"
+          href="#!"
+          role="button"
+        >
+          <i class="bi bi-whatsapp text-white"/>
         </a>
       </p>
       <p class="p-3">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt
         distinctio earum repellat quaerat voluptatibus placeat nam,
         commodi optio pariatur est quia magnam eum harum corrupti dicta,
-        aliquam sequi voluptate quas.
-      </p>
+        aliquam sequi voluptate quas.</p>
       <p class="p-3">
         <small>© 2023</small>
       </p>

diff --git a/insertParameters.xml b/insertParameters.xml
@@ -74,6 +74,11 @@
     expression="${bootstrap.css.carousel.caption}"
     if:set="bootstrap.css.carousel.caption"
   />
+  <param
+    name="BOOTSTRAP_CSS_FOOTER"
+    expression="${bootstrap.css.footer}"
+    if:set="bootstrap.css.footer"
+  />
   <param
     name="BOOTSTRAP_CSS_TABS"
     expression="${bootstrap.css.tabs}"

diff --git a/plugin.xml b/plugin.xml
@@ -150,6 +150,11 @@
       type="string"
       desc="Bootstrap classes for carousel indicators"
     />
+    <param
+      name="bootstrap.css.footer"
+      type="string"
+      desc="Bootstrap classes for footers"
+    />
     <param
       name="bootstrap.css.tabs"
       type="string"