Browse Source

docs: refresh integration versions and wire new docs into sidenav

integrations.mdx:
- Adds a callout at the top about version-pinning (the CDN URLs use
  specific versions for reproducibility, but third-party libraries
  publish independently of AdminLTE; check upstream before copying
  into production)
- Bumps drifted versions: tom-select 2.3.1->2.6.1, filepond 4.32.7->
  4.32.12, easymde 2.18.0->2.21.0, apexcharts 4.4.0->5.12.0 (major),
  chart.js 4.4.4->4.5.1, glightbox 3.3.0->3.3.1
- Other versions (flatpickr, nouislider, pickr, imask, dropzone,
  quill, toast-ui, tabulator, fullcalendar, sortablejs) were
  already current

_sidenav.astro:
- Adds Layout Blueprint after Layout (logical pairing -- "the lower-
  level CSS classes" then "the high-level region structure")
- Adds Recipes after Layout Blueprint
- Adds Deployment after Recommended Integrations (closing chapter of
  the "shipping a real app" arc)
- Adds Plugins Overview as the first item in the JavaScript submenu
  so readers see the index before diving into individual plugins
Aigars Silkalns 13 giờ trước cách đây
mục cha
commit
89f3023bdc

+ 36 - 0
src/html/components/dashboard/_sidenav.astro

@@ -654,6 +654,24 @@ const deploymentPath = depth === 0 ? './' : '../'.repeat(depth);
             <p>Layout</p>
           </a>
         </li>
+        <li class="nav-item">
+          <a
+            href={htmlPath + "/docs/layout-blueprint.html"}
+            class:list={["nav-link", page === "layout-blueprint" && "active"]}
+          >
+            <i class="nav-icon bi bi-diagram-3"></i>
+            <p>Layout Blueprint</p>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a
+            href={htmlPath + "/docs/recipes.html"}
+            class:list={["nav-link", page === "recipes" && "active"]}
+          >
+            <i class="nav-icon bi bi-clipboard-check"></i>
+            <p>Recipes</p>
+          </a>
+        </li>
         <li class="nav-item">
           <a
             href={htmlPath + "/docs/customization.html"}
@@ -699,6 +717,15 @@ const deploymentPath = depth === 0 ? './' : '../'.repeat(depth);
             <p>Recommended Integrations</p>
           </a>
         </li>
+        <li class="nav-item">
+          <a
+            href={htmlPath + "/docs/deployment.html"}
+            class:list={["nav-link", page === "deployment" && "active"]}
+          >
+            <i class="nav-icon bi bi-cloud-upload"></i>
+            <p>Deployment</p>
+          </a>
+        </li>
         <li class:list={["nav-item", mainPage === "components" && "menu-open"]}>
           <a
             href="#"
@@ -743,6 +770,15 @@ const deploymentPath = depth === 0 ? './' : '../'.repeat(depth);
             </p>
           </a>
           <ul class="nav nav-treeview">
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/docs/javascript/plugins-overview.html"}
+                class:list={["nav-link", page === "plugins-overview" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Overview</p>
+              </a>
+            </li>
             <li class="nav-item">
               <a
                 href={htmlPath + "/docs/javascript/layout.html"}

+ 12 - 10
src/html/components/docs/integrations.mdx

@@ -2,6 +2,8 @@ AdminLTE deliberately ships a lean dependency tree. Rather than bundling every f
 
 Each section has a CDN-based "install" snippet and the minimum JavaScript needed to wire it up. You can swap CDN URLs for npm installs if you're using a bundler.
 
+> **About the version numbers below:** every CDN URL pins a specific version (eg. `@4.6.13`) so the snippets stay reproducible. They were current as of the latest release, but third-party libraries publish new versions independently of AdminLTE. Before copying a snippet into production, check the library's homepage (linked in each section) for the latest version — and consider hosting a copy yourself rather than relying on the CDN long-term.
+
 ##### Form widgets
 
 ###### Date / time picker — Flatpickr
@@ -30,8 +32,8 @@ Supports date ranges, time-only mode, multiple dates, and i18n out of the box.
 [Tom Select](https://tom-select.js.org/) is a vanilla-JS rewrite of Selectize. Great fit for searchable selects, tag inputs, and remote-data autocomplete.
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.bootstrap5.min.css" />
-<script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tom-select@2.6.1/dist/css/tom-select.bootstrap5.min.css" />
+<script src="https://cdn.jsdelivr.net/npm/tom-select@2.6.1/dist/js/tom-select.complete.min.js"></script>
 
 <select id="tags" class="form-control" multiple placeholder="Pick some tags">
   <option value="design">Design</option>
@@ -122,8 +124,8 @@ Ships a `tom-select.bootstrap5.min.css` theme that matches Bootstrap form contro
 [FilePond](https://pqina.nl/filepond/) is a more modern alternative with a polished UX and a plugin system for image preview, validation, EXIF, etc.
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/filepond@4.32.7/dist/filepond.min.css" />
-<script src="https://cdn.jsdelivr.net/npm/filepond@4.32.7/dist/filepond.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/filepond@4.32.12/dist/filepond.min.css" />
+<script src="https://cdn.jsdelivr.net/npm/filepond@4.32.12/dist/filepond.min.js"></script>
 
 <input type="file" class="filepond" />
 
@@ -157,8 +159,8 @@ Ships a `tom-select.bootstrap5.min.css` theme that matches Bootstrap form contro
 [EasyMDE](https://github.com/Ionaru/easy-markdown-editor) is the actively-maintained fork of SimpleMDE. Same look, same API, but still gets updates.
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde@2.18.0/dist/easymde.min.css" />
-<script src="https://cdn.jsdelivr.net/npm/easymde@2.18.0/dist/easymde.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde@2.21.0/dist/easymde.min.css" />
+<script src="https://cdn.jsdelivr.net/npm/easymde@2.21.0/dist/easymde.min.js"></script>
 
 <textarea id="markdown"></textarea>
 
@@ -194,7 +196,7 @@ Ships a `tom-select.bootstrap5.min.css` theme that matches Bootstrap form contro
 [ApexCharts](https://apexcharts.com/) is the chart library used in the AdminLTE dashboards. Modern look, animated, MIT.
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/apexcharts@4.4.0/dist/apexcharts.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/apexcharts@5.12.0/dist/apexcharts.min.js"></script>
 
 <div id="chart"></div>
 
@@ -212,7 +214,7 @@ Ships a `tom-select.bootstrap5.min.css` theme that matches Bootstrap form contro
 [Chart.js](https://www.chartjs.org/) is the most-asked-for traditional chart library. Canvas-based, very wide chart-type support.
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4"></script>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1"></script>
 
 <canvas id="bar-chart" height="120"></canvas>
 
@@ -301,8 +303,8 @@ Ships a `tom-select.bootstrap5.min.css` theme that matches Bootstrap form contro
 [GLightbox](https://biati-digital.github.io/glightbox/) is a vanilla-JS lightbox for images, videos, and inline content.
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox@3.3.0/dist/css/glightbox.min.css" />
-<script src="https://cdn.jsdelivr.net/npm/glightbox@3.3.0/dist/js/glightbox.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox@3.3.1/dist/css/glightbox.min.css" />
+<script src="https://cdn.jsdelivr.net/npm/glightbox@3.3.1/dist/js/glightbox.min.js"></script>
 
 <a href="image-large.jpg" class="glightbox">
   <img src="image-thumb.jpg" alt="Click to enlarge" />