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:
2026-01-13 20:36:53 +01:00
parent 65e5c55266
commit 7a7b612519
19 changed files with 482 additions and 60 deletions

View File

@@ -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
```

View File

@@ -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