Merge branch 'release/5.3.3'

* release/5.3.3: (304 commits) Update default screenshot for 5.3.3 Add license info for upstream projects Bump plug-in version attribute to 5.3.3 Update to Bootswatch 5.3.2 (#132) Move docs origin note to end of topic Revise short description Add missing punctuation Enable additional nav titles Remove ineffective (unlocked) nav titles Remove redundant implied attributes from topicrefs Add new topic on DITA Bootstrap Sass Use container-xxl to align menu with content (#130) Move CSS (#129) Update nav ToC screenshots with Safari 16.6 Re-run Prettier locally to fix CI Update Lunr header link → `hdr.navbar.lunr.xml` Re-run Prettier Sync attribute order in header files Update nav ToC screenshots Clarify default unstyled ToC options ...
infotexture · Sep 29, 2023 · 2bffbef · 2bffbef
2 parents f7eccab + ba25353
commit 2bffbef
Show file tree

Hide file tree

Showing 108 changed files with 8,951 additions and 12,516 deletions.
diff --git a/.gitattributes b/.gitattributes
@@ -32,4 +32,4 @@
 css/** linguist-vendored
 sample/** linguist-documentation
 
-build_dita2html5-bootstrap.xml linguist-language=Ant-Build-System
+build_dita2html5-bootstrap_template.xml linguist-language=Ant-Build-System
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -0,0 +1,15 @@
+version: 2
+updates:
+  - package-ecosystem: npm
+    directory: '/'
+    schedule:
+      interval: monthly
+      time: '12:00'
+      timezone: 'Europe/Berlin'
+    open-pull-requests-limit: 10
+  - package-ecosystem: github-actions
+    directory: '/'
+    schedule:
+      interval: monthly
+      time: '12:00'
+      timezone: 'Europe/Berlin'
diff --git a/.github/dita-ot/favicon.svg b/.github/dita-ot/favicon.svg
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–2022
-          <a class="text-dark" href="https://infotexture.net/">infotexture</a>
+          © 2017–2023
+          <a href="https://infotexture.net/">infotexture</a>
         </small>
       </p>
     </div>

diff --git a/.github/dita-ot/header.xml b/.github/dita-ot/header.xml
@@ -1,6 +1,18 @@
 <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
-
-  <div class="container">
+  <div class="container-xxl">
+    <!-- This shows the menu on mobile -->
+    <div class="bd-navbar-toggle">
+      <button
+        class="navbar-toggler p-2"
+        type="button"
+        data-bs-toggle="offcanvas"
+        data-bs-target="#bdSidebar"
+        aria-controls="bdSidebar"
+        aria-label="Toggle docs navigation"
+      >
+        <i class="bi bi-list"/>
+      </button>
+    </div>
     <a class="navbar-brand" href="https://infotexture.github.io/dita-bootstrap">
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -10,25 +22,25 @@
         class="bi bi-bootstrap"
         viewBox="0 0 16 16"
       >
-        <path
+      <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
+      <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>
+    </svg>
       DITA Bootstrap
     </a>
     <button
-      class="navbar-toggler"
+      class="navbar-toggler p-2"
       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"/>
+      <i class="bi bi-three-dots"/>
     </button>
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
       <ul class="navbar-nav">
@@ -53,10 +65,92 @@
         <li class="nav-item">
           <a
             class="nav-link"
-            href="https://getbootstrap.com/docs/5.2"
+            href="https://getbootstrap.com/docs/5.3"
           >Bootstrap Docs</a>
         </li>
       </ul>
+      <ul class="navbar-nav ms-auto">
+        <!--
+          This is a lunr.js search box
+          It requires JavaScript to function.
+        -->
+        <li class="nav-item d-flex align-items-center">
+          <span class="nav-link pe-2">
+            <i class="bi bi-search"/>
+          </span>
+          <form class="position-relative me-auto search-box rounded">
+            <input
+              type="search"
+              class="form-control"
+              placeholder="Search…"
+              aria-label="Search for…"
+              dir="auto"
+            />
+          </form>
+        </li>
+        <!--
+          This is a dark/light color theme toggler
+          It requires JavaScript to function.
+        -->
+        <li class="nav-item dropdown">
+          <a
+            href="#"
+            class="nav-link px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
+            id="bd-theme"
+            data-bs-toggle="dropdown"
+            aria-expanded="false"
+            data-bs-display="static"
+          >
+            <span class="d-light">
+              <i class="bi bi-brightness-high-fill"/>
+            </span>
+            <span class="d-dark">
+              <i class="bi bi-moon-stars-fill"/>
+            </span>
+            <span class="d-auto">
+              <i class="bi bi-circle-half"/>
+            </span>
+            <span class="d-lg-none ms-2">Toggle theme</span>
+          </a>
+          <ul
+            class="dropdown-menu dropdown-menu-end"
+            aria-labelledby="bd-theme"
+            style="--bs-dropdown-min-width: 6rem;"
+            data-bs-popper="static"
+          >
+            <li>
+              <button
+                type="button"
+                class="dropdown-item d-flex align-items-center"
+                data-bs-theme-value="light"
+              >
+                <i class="bi bi-brightness-high-fill"/>
+                <span class="ms-2">Light</span>
+              </button>
+            </li>
+            <li>
+              <button
+                type="button"
+                class="dropdown-item d-flex align-items-center"
+                data-bs-theme-value="dark"
+              >
+                <i class="bi bi-moon-stars-fill"/>
+                <span class="ms-2">Dark</span>
+              </button>
+            </li>
+            <li>
+              <button
+                type="button"
+                class="dropdown-item d-flex align-items-center"
+                data-bs-theme-value="auto"
+              >
+                <i class="bi bi-circle-half"/>
+                <span class="ms-2">Auto</span>
+              </button>
+            </li>
+          </ul>
+        </li>
+      </ul>
     </div>
   </div>
 </nav>
diff --git a/.github/dita-ot/html.xml b/.github/dita-ot/html.xml
@@ -26,6 +26,16 @@
       <param name="processing-mode" value="strict"/>
       <param name="icons.include" value="yes"/>
       <param name="popovers.include" value="yes"/>
+      <param name="dark.mode.include" value="yes"/>
+      <param
+        name="open-graph.url"
+        value="https://infotexture.github.io/dita-bootstrap"
+      />
+      <param
+        name="lunr.search"
+        value="https://infotexture.github.io/dita-bootstrap"
+      />
+      <param name="twitter.site" value="@infotexture"/>
     </publication>
   </deliverable>
 </project>
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 {
@@ -34,3 +28,8 @@ footer {
 .custom-tooltip {
   --bs-tooltip-bg: var(--bs-primary);
 }
+
+/* override part of the Bootstrap color scheme */
+:root {
+  --bs-code-color: var(--bs-secondary-color);
+}
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -5,13 +5,27 @@ name: CI
       - master
       - develop
   workflow_dispatch:
+
 jobs:
   build-dita:
     name: Build DITA
     runs-on: ubuntu-latest
     steps:
       - name: Git checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
+
+      - name: Calculate short SHA
+        uses: benjlevesque/[email protected]
+        id: short-sha
+        with:
+          length: 7
+      - run: echo $SHA
+        env:
+          SHA: ${{ steps.short-sha.outputs.sha }}
+      - run: echo $SHA
+        env:
+          SHA: ${{ env.SHA }}
+
       - name: Build Bootstrap
         uses: dita-ot/dita-ot-action@master
         with:
@@ -23,12 +37,18 @@ jobs:
           plugins: |
             fox.jason.extend.css
             https://github.com/infotexture/dita-bootstrap/archive/develop.zip
-            fox.jason.prismjs
+            https://github.com/infotexture/dita-bootstrap.lunr/archive/develop.zip
+            https://github.com/jason-fox/fox.jason.prismjs/archive/master.zip
             fox.jason.favicon
+            https://github.com/jason-fox/fox.jason.open-graph/archive/master.zip
           project: .github/dita-ot/html.xml
+
       - name: Deploy HTML 🚀
-        uses: JamesIves/github-pages-deploy-action@3.7.1
+        uses: JamesIves/github-pages-deploy-action@v4.4.3
         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.
+          token: ${{ secrets.GITHUB_TOKEN }}
+          branch: gh-pages # The branch the action should deploy to.
+          folder: out/html # The folder the action should deploy.
+          commit-message: '🚀 Deploy infotexture/dita-bootstrap@${{ env.SHA }} to GitHub Pages'
+          git-config-name: 'GitHub Action'
+          git-config-email: '[email protected]'
diff --git a/.github/workflows/prettier.yml b/.github/workflows/prettier.yml
@@ -17,17 +17,21 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           # Make sure the actual branch is checked out when running on pull requests
           ref: ${{ github.ref }}
 
-      - name: Prettify code
-        uses: creyD/prettier_action@v3.3
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
         with:
-          # This part is also where you can pass other options, for example:
-          prettier_options: --write **/*.{css,dita*,json,md,xml,yml}
-          # Install Prettier XML plugin
-          prettier_plugins: '@prettier/plugin-xml'
-          # Runs the action in dry mode. Files wont get changed and the action fails if there are unprettified files.
-          dry: true
+          node-version: '18.x'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: |
+          npm ci
+
+      - name: Prettify code
+        run: |
+          npm run check
diff --git a/.gitignore b/.gitignore
@@ -65,3 +65,6 @@ $RECYCLE.BIN/
 *.lnk
 
 # End of https://www.gitignore.io/api/linux,macos,windows
+
+build_dita2html5-bootstrap.xml
+node_modules
diff --git a/.prettierignore b/.prettierignore
@@ -1,5 +1,7 @@
 # This file specifies files that Prettier should not format
 
 backups
+build_dita2html5-bootstrap.xml
 cfg/common/vars/strings.xml
+css/custom.css
 out
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -39,5 +39,6 @@
         "parser": "xml"
       }
     }
-  ]
+  ],
+  "plugins": ["@prettier/plugin-xml"]
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -39,5 +39,6 @@ @@
             "parser": "xml"
           }
         }
-      ]
+      ],
+      "plugins": ["@prettier/plugin-xml"]
     }