refactor: rename third-party JS libs folder from vendor to lib
Rename static/shared/js/vendor/ to static/shared/js/lib/ to avoid confusion with the app's "vendor" (seller) dashboard code in static/vendor/js/. - Rename directory: vendor/ → lib/ - Update all template references to use new path - Update CDN fallback documentation - Fix .gitignore to use /lib/ (root only) instead of lib/ (everywhere) Third-party libraries: - alpine.min.js - chart.umd.min.js - flatpickr.min.js - quill.js - tom-select.complete.min.js Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -505,13 +505,13 @@ All frontends use CDN with local fallback. Check that local copies exist:
|
||||
```bash
|
||||
# From project root
|
||||
ls -lh static/shared/css/tailwind.min.css
|
||||
ls -lh static/shared/js/vendor/alpine.min.js
|
||||
ls -lh static/shared/js/lib/alpine.min.js
|
||||
```
|
||||
|
||||
**Expected output:**
|
||||
```
|
||||
-rw-r--r-- 1 user user 2.9M static/shared/css/tailwind.min.css
|
||||
-rw-r--r-- 1 user user 44K static/shared/js/vendor/alpine.min.js
|
||||
-rw-r--r-- 1 user user 44K static/shared/js/lib/alpine.min.js
|
||||
```
|
||||
|
||||
**If files are missing:**
|
||||
@@ -569,7 +569,7 @@ app.mount("/static", StaticFiles(directory="static"), name="static")
|
||||
```bash
|
||||
# With app running, test directly:
|
||||
curl http://localhost:8000/static/shared/css/tailwind.min.css | head -n 5
|
||||
curl http://localhost:8000/static/shared/js/vendor/alpine.min.js | head -n 5
|
||||
curl http://localhost:8000/static/shared/js/lib/alpine.min.js | head -n 5
|
||||
```
|
||||
|
||||
### Solution 5: File Permissions
|
||||
@@ -579,7 +579,7 @@ If files exist but return 403 Forbidden:
|
||||
```bash
|
||||
# Fix permissions
|
||||
chmod 644 static/shared/css/tailwind.min.css
|
||||
chmod 644 static/shared/js/vendor/alpine.min.js
|
||||
chmod 644 static/shared/js/lib/alpine.min.js
|
||||
chmod 755 static/shared/css
|
||||
chmod 755 static/shared/js/vendor
|
||||
```
|
||||
|
||||
@@ -18,14 +18,14 @@ The following assets are loaded from CDN with automatic fallback to local copies
|
||||
| Asset | CDN Source | Local Fallback |
|
||||
|-------|-----------|----------------|
|
||||
| **Tailwind CSS** | `https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css` | `static/shared/css/tailwind.min.css` |
|
||||
| **Alpine.js** | `https://cdn.jsdelivr.net/npm/alpinejs@3.13.3/dist/cdn.min.js` | `static/shared/js/vendor/alpine.min.js` |
|
||||
| **Alpine.js** | `https://cdn.jsdelivr.net/npm/alpinejs@3.13.3/dist/cdn.min.js` | `static/shared/js/lib/alpine.min.js` |
|
||||
|
||||
### Optional Assets (Loaded On Demand)
|
||||
|
||||
| Asset | CDN Source | Local Fallback | Used For |
|
||||
|-------|-----------|----------------|----------|
|
||||
| **Chart.js** | `https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js` | `static/shared/js/vendor/chart.umd.min.js` | Charts macros |
|
||||
| **Flatpickr JS** | `https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.js` | `static/shared/js/vendor/flatpickr.min.js` | Datepicker macros |
|
||||
| **Chart.js** | `https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js` | `static/shared/js/lib/chart.umd.min.js` | Charts macros |
|
||||
| **Flatpickr JS** | `https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.js` | `static/shared/js/lib/flatpickr.min.js` | Datepicker macros |
|
||||
| **Flatpickr CSS** | `https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.css` | `static/shared/css/vendor/flatpickr.min.css` | Datepicker styling |
|
||||
|
||||
## Implementation
|
||||
@@ -63,7 +63,7 @@ Alpine.js uses dynamic script loading with error handling:
|
||||
console.warn('Alpine.js CDN failed, loading local copy...');
|
||||
var fallbackScript = document.createElement('script');
|
||||
fallbackScript.defer = true;
|
||||
fallbackScript.src = '{{ url_for("static", path="shared/js/vendor/alpine.min.js") }}';
|
||||
fallbackScript.src = '{{ url_for("static", path="shared/js/lib/alpine.min.js") }}';
|
||||
document.head.appendChild(fallbackScript);
|
||||
};
|
||||
|
||||
@@ -109,7 +109,7 @@ In your page template:
|
||||
script.onerror = function() {
|
||||
console.warn('Chart.js CDN failed, loading local copy...');
|
||||
var fallbackScript = document.createElement('script');
|
||||
fallbackScript.src = '/static/shared/js/vendor/chart.umd.min.js';
|
||||
fallbackScript.src = '/static/shared/js/lib/chart.umd.min.js';
|
||||
document.head.appendChild(fallbackScript);
|
||||
};
|
||||
|
||||
@@ -207,7 +207,7 @@ app/templates/shared/
|
||||
console.warn('Alpine.js CDN failed, loading local copy...');
|
||||
var fallbackScript = document.createElement('script');
|
||||
fallbackScript.defer = true;
|
||||
fallbackScript.src = '{{ url_for("static", path="shared/js/vendor/alpine.min.js") }}';
|
||||
fallbackScript.src = '{{ url_for("static", path="shared/js/lib/alpine.min.js") }}';
|
||||
document.head.appendChild(fallbackScript);
|
||||
};
|
||||
|
||||
@@ -261,13 +261,13 @@ Check that local fallback files exist:
|
||||
```bash
|
||||
# From project root
|
||||
ls -lh static/shared/css/tailwind.min.css
|
||||
ls -lh static/shared/js/vendor/alpine.min.js
|
||||
ls -lh static/shared/js/lib/alpine.min.js
|
||||
```
|
||||
|
||||
Expected output:
|
||||
```
|
||||
-rw-r--r-- 1 user user 2.9M static/shared/css/tailwind.min.css
|
||||
-rw-r--r-- 1 user user 44K static/shared/js/vendor/alpine.min.js
|
||||
-rw-r--r-- 1 user user 44K static/shared/js/lib/alpine.min.js
|
||||
```
|
||||
|
||||
### Testing Offline Mode
|
||||
@@ -291,7 +291,7 @@ To test the fallback behavior:
|
||||
|
||||
4. **Verify fallback loaded:**
|
||||
- Open DevTools Network tab
|
||||
- Check that `/static/shared/js/vendor/alpine.min.js` was loaded
|
||||
- Check that `/static/shared/js/lib/alpine.min.js` was loaded
|
||||
- Check that `/static/shared/css/tailwind.min.css` was loaded
|
||||
|
||||
### Updating Local Assets
|
||||
@@ -362,11 +362,11 @@ COPY static/ /app/static/
|
||||
|
||||
# Verify core files exist
|
||||
RUN test -f /app/static/shared/css/tailwind.min.css && \
|
||||
test -f /app/static/shared/js/vendor/alpine.min.js
|
||||
test -f /app/static/shared/js/lib/alpine.min.js
|
||||
|
||||
# Verify optional library files exist
|
||||
RUN test -f /app/static/shared/js/vendor/chart.umd.min.js && \
|
||||
test -f /app/static/shared/js/vendor/flatpickr.min.js && \
|
||||
RUN test -f /app/static/shared/js/lib/chart.umd.min.js && \
|
||||
test -f /app/static/shared/js/lib/flatpickr.min.js && \
|
||||
test -f /app/static/shared/css/vendor/flatpickr.min.css
|
||||
```
|
||||
|
||||
@@ -447,7 +447,7 @@ app.mount("/static", StaticFiles(directory="static"), name="static")
|
||||
```html
|
||||
<!-- Local-only mode (no CDN) -->
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='shared/css/tailwind.min.css') }}">
|
||||
<script defer src="{{ url_for('static', path='shared/js/vendor/alpine.min.js') }}"></script>
|
||||
<script defer src="{{ url_for('static', path='shared/js/lib/alpine.min.js') }}"></script>
|
||||
```
|
||||
|
||||
## Browser Compatibility
|
||||
|
||||
Reference in New Issue
Block a user