Updating Bootstrap and dependencies.

.gitattributes

@@ -0,0 +1,14 @@
+# Set the default behavior, in case people don't have core.autocrlf set.
+* text eol=lf
+
+*.gif binary
+*.jpg binary
+*.png binary
+*.webp binary
+
+# Ignore all test and documentation with "export-ignore".
+/.github export-ignore
+/.gitattributes export-ignore
+/.gitignore export-ignore
+/.editorconfig export-ignore
+/.package-lock.json export-ignore

.github/dependabot.yml

@@ -0,0 +1,11 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
+
+version: 2
+updates:
+ - package-ecosystem: "npm" # See documentation for possible values
+ directory: "/" # Location of package manifests
+ schedule:
+ interval: "weekly"

.github/workflows/build-dist.yml

@@ -0,0 +1,45 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Build Dist
+
+on:
+ workflow_dispatch:
+ schedule:
+ - cron: "15 9 */3 * *"
+ push:
+ branches: [ "master" ]
+ pull_request:
+ branches: [ "master" ]
+
+concurrency:
+ group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+ cancel-in-progress: true
+
+jobs:
+ build:
+ runs-on: ubuntu-latest
+ strategy:
+ matrix:
+ node-version: [20.x, 21.x, 22.x]
+ # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+ steps:
+ - uses: actions/checkout@v4
+ - name: Use Node.js ${{ matrix.node-version }}
+ uses: actions/setup-node@v4
+ with:
+ node-version: ${{ matrix.node-version }}
+ cache: 'npm'
+ cache-dependency-path: package-lock.json
+ - run: npm ci
+ - run: npm run build
+ - name: "Upload the dist artifact from Node ${{ matrix.node-version }}"
+ uses: actions/upload-artifact@v4
+ with:
+ name: startbootstrap-sb-admin-nodeV${{ matrix.node-version }}
+ path: dist/
+ compression-level: 1
+ if-no-files-found: error
+ - name: Commit and push changes
+ uses: EndBug/add-and-commit@v9

.gitignore

@@ -1,2 +1,3 @@
+.idea
 node_modules
 .DS_Store

CHANGELOG.md

@@ -0,0 +1,48 @@
+
+### 8.0.0
+
+Built/tested on:
+
+```bash
+npm --version
+10.4.0
+
+node --version
+v20.11.1
+```
+
+#### Changed
+
+ * Bumped version to 8.0.0 considering all of the changes.
+ * Updated dependencies:
+ * Updated Bootstrap to 5.3.3
+ * Updated dev-dependencies:
+ * Updated `autoprefixer` to 10.4.17
+ * Updated `browser-sync` to 3.0.2
+ * Updated `chokidar` to 3.6.0
+ * Updated `concurrently` to 8.2.2
+ * Consequently, had to update `scripts/start.js` and `scripts/start-debug.js` for this change.
+ * Updated `postcss` to 8.4.35
+ * Updated `prettier` to 3.2.5
+ * As a result, had to update `scripts/render-pug.js` to change the `renderPug` function to an async function.
+ * Also, has to modify the 'prettified' const to be await.
+ * Updated `sass` to 1.71.1
+ * Updated `scripts/render-scss.js` to replace legacy `sass.renderSync` with `sass.compileString`.
+ * Updated scripts and css for `simple-datatables` to 9.0.0
+ * Updated main css as well, as a result. The `.datatable-pagination` had to be updated throughout to include `button`, which was a change made in `simple-datatables` >8.0
+ * Updated `Charts.js` to 4.4.1
+ * Updated `assests/demo/chart-*-demo.js` files as a result.
+ * Updated `fontawesome` to 6.5.1
+ * Replaced `upath` with `@ewizardjs/upath` v3.0.0
+ * Updated copyright year to 2024.
+
+ ##### Addressing Bootstrap Deprecations
+
+ * This theme does not seem to be affected that much with the deprecations in Bootstrap 5.3
+ * `.text-muted` replaced with `.text-body-secondary`
+ * `.navbar-dark` left for now, with `data-bs-theme="dark"` added
+
+#### Added
+
+ * As a result of updating `Charts.js`, `luxon` ^3 and `chartjs-adapter-luxon` ^1 have been added.
+ * This was needed as Charts.js >v2 appears to require an adapter for `Time Cartesian Axis`

README.md

@@ -55,7 +55,7 @@ You can hire Start Bootstrap to create a custom build of any template, or create
 
 ## About
 
-Start Bootstrap is an open source library of free Bootstrap templates and themes. All of the free templates and themes on Start Bootstrap are released under the MIT license, which means you can use them for any purpose, even for commercial projects.
+Start Bootstrap is an open source library of free Bootstrap templates and themes. All the free templates and themes on Start Bootstrap are released under the MIT license, which means you can use them for any purpose, even for commercial projects.
 
 * <https://startbootstrap.com>
 * <https://twitter.com/SBootstrap>
@@ -70,4 +70,4 @@ Start Bootstrap is based on the [Bootstrap](https://getbootstrap.com/) framework
 
 ## Copyright and License
 
-Copyright 2013-2023 Start Bootstrap LLC. Code released under the [MIT](https://github.com/StartBootstrap/startbootstrap-sb-admin/blob/master/LICENSE) license.
+Copyright 2013-2024 Start Bootstrap LLC. Code released under the [MIT](https://github.com/StartBootstrap/startbootstrap-sb-admin/blob/master/LICENSE) license.

dist/401.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  <head>
  <meta charset="utf-8" />
@@ -7,8 +7,8 @@
  <meta name="description" content="" />
  <meta name="author" content="" />
  <title>404 Error - SB Admin</title>
- <link href="css/styles.css" rel="stylesheet" />
- <script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
+ <link href="css/styles.min.css" rel="stylesheet" />
+ <script src="https://use.fontawesome.com/releases/v6.5.1/js/all.js" crossorigin="anonymous"></script>
  </head>
  <body>
  <div id="layoutError">
@@ -35,7 +35,7 @@ <h1 class="display-1">401</h1>
  <footer class="py-4 bg-light mt-auto">
  <div class="container-fluid px-4">
  <div class="d-flex align-items-center justify-content-between small">
- <div class="text-muted">Copyright &copy; Your Website 2023</div>
+ <div class="text-body-secondary">Copyright &copy; Your Website 2024</div>
  <div>
  <a href="#">Privacy Policy</a>
  &middot;
@@ -46,7 +46,7 @@ <h1 class="display-1">401</h1>
  </footer>
  </div>
  </div>
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
  <script src="js/scripts.js"></script>
  </body>
 </html>

dist/404.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  <head>
  <meta charset="utf-8" />
@@ -7,8 +7,8 @@
  <meta name="description" content="" />
  <meta name="author" content="" />
  <title>404 Error - SB Admin</title>
- <link href="css/styles.css" rel="stylesheet" />
- <script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
+ <link href="css/styles.min.css" rel="stylesheet" />
+ <script src="https://use.fontawesome.com/releases/v6.5.1/js/all.js" crossorigin="anonymous"></script>
  </head>
  <body>
  <div id="layoutError">
@@ -34,7 +34,7 @@
  <footer class="py-4 bg-light mt-auto">
  <div class="container-fluid px-4">
  <div class="d-flex align-items-center justify-content-between small">
- <div class="text-muted">Copyright &copy; Your Website 2023</div>
+ <div class="text-body-secondary">Copyright &copy; Your Website 2024</div>
  <div>
  <a href="#">Privacy Policy</a>
  &middot;
@@ -45,7 +45,7 @@
  </footer>
  </div>
  </div>
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
  <script src="js/scripts.js"></script>
  </body>
 </html>

dist/500.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  <head>
  <meta charset="utf-8" />
@@ -7,8 +7,8 @@
  <meta name="description" content="" />
  <meta name="author" content="" />
  <title>404 Error - SB Admin</title>
- <link href="css/styles.css" rel="stylesheet" />
- <script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
+ <link href="css/styles.min.css" rel="stylesheet" />
+ <script src="https://use.fontawesome.com/releases/v6.5.1/js/all.js" crossorigin="anonymous"></script>
  </head>
  <body>
  <div id="layoutError">
@@ -34,7 +34,7 @@ <h1 class="display-1">500</h1>
  <footer class="py-4 bg-light mt-auto">
  <div class="container-fluid px-4">
  <div class="d-flex align-items-center justify-content-between small">
- <div class="text-muted">Copyright &copy; Your Website 2023</div>
+ <div class="text-body-secondary">Copyright &copy; Your Website 2024</div>
  <div>
  <a href="#">Privacy Policy</a>
  &middot;
@@ -45,7 +45,7 @@ <h1 class="display-1">500</h1>
  </footer>
  </div>
  </div>
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
  <script src="js/scripts.js"></script>
  </body>
 </html>

dist/assets/demo/chart-area-demo.js

@@ -1,54 +1,66 @@
 // Set new default font family and font color to mimic Bootstrap's default styling
-Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
-Chart.defaults.global.defaultFontColor = '#292b2c';
+Chart.defaults.font.family = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
+Chart.defaults.color = '#292b2c';
 
-// Area Chart Example
-var ctx = document.getElementById("myAreaChart");
-var myLineChart = new Chart(ctx, {
- type: 'line',
- data: {
- labels: ["Mar 1", "Mar 2", "Mar 3", "Mar 4", "Mar 5", "Mar 6", "Mar 7", "Mar 8", "Mar 9", "Mar 10", "Mar 11", "Mar 12", "Mar 13"],
+const areaDemoData = {
+ labels: [
+ "Mar 1",
+ "Mar 2",
+ "Mar 3",
+ "Mar 4",
+ "Mar 5",
+ "Mar 6",
+ "Mar 7",
+ "Mar 8",
+ "Mar 9",
+ "Mar 10",
+ "Mar 11",
+ "Mar 12",
+ "Mar 13",
+ ],
  datasets: [{
- label: "Sessions",
- lineTension: 0.3,
- backgroundColor: "rgba(2,117,216,0.2)",
- borderColor: "rgba(2,117,216,1)",
- pointRadius: 5,
- pointBackgroundColor: "rgba(2,117,216,1)",
- pointBorderColor: "rgba(255,255,255,0.8)",
- pointHoverRadius: 5,
- pointHoverBackgroundColor: "rgba(2,117,216,1)",
- pointHitRadius: 50,
- pointBorderWidth: 2,
- data: [10000, 30162, 26263, 18394, 18287, 28682, 31274, 33259, 25849, 24159, 32651, 31984, 38451],
- }],
- },
- options: {
- scales: {
- xAxes: [{
- time: {
- unit: 'date'
- },
- gridLines: {
- display: false
- },
- ticks: {
- maxTicksLimit: 7
- }
- }],
- yAxes: [{
- ticks: {
- min: 0,
- max: 40000,
- maxTicksLimit: 5
+ label: "Sessions",
+ lineTension: 0.3,
+ backgroundColor: "rgba(2,117,216,0.2)",
+ borderColor: "rgba(2,117,216,1)",
+ pointRadius: 5,
+ pointBackgroundColor: "rgba(2,117,216,1)",
+ pointBorderColor: "rgba(255,255,255,0.8)",
+ pointHoverRadius: 5,
+ pointHoverBackgroundColor: "rgba(2,117,216,1)",
+ pointHitRadius: 50,
+ pointBorderWidth: 2,
+ fill: 'origin',
+ data: [10000, 22310, 30162, 26263, 18394, 18287, 28682, 31274, 33259, 25849, 24159, 32651, 38451]
+ }]
+};
+
+const areaDemoConfig = {
+ type: 'line',
+ data: areaDemoData,
+ options: {
+ scales: {
+ x: {
+ ticks: {
+ maxTicksLimit: 7
+ }
+ },
+ y: {
+ beginAtZero: true,
+ ticks: {
+ min: 0,
+ max: 40000,
+ maxTicksLimit: 7,
+ }
+ }
  },
- gridLines: {
- color: "rgba(0, 0, 0, .125)",
+ plugins: {
+ legend: {
+ display: false
+ }
  }
- }],
- },
- legend: {
- display: false
  }
- }
-});
+};
+
+var ctx = document.getElementById("myAreaChart");
+var myLineChart = new Chart(ctx, areaDemoConfig);