|
| 1 | +# OPTIMAP - Claude Code Configuration |
| 2 | + |
| 3 | +This file contains project-specific guidance for Claude Code when working with the OPTIMAP codebase. |
| 4 | + |
| 5 | +## Project Overview |
| 6 | + |
| 7 | +OPTIMAP is a Django-based geospatial metadata portal for scientific publications. It provides interactive mapping, publication metadata management, and geocoding services. |
| 8 | + |
| 9 | +## Local Library Policy |
| 10 | + |
| 11 | +### Policy Statement |
| 12 | + |
| 13 | +**All external JavaScript and CSS libraries MUST be served locally from the `publications/static/` directory. CDN dependencies are NOT allowed in production.** |
| 14 | + |
| 15 | +### Rationale |
| 16 | + |
| 17 | +1. **Privacy & GDPR Compliance**: Serving libraries from CDNs may leak user IP addresses and browsing behavior to third parties |
| 18 | +2. **Reliability**: Eliminates dependency on external CDN availability and potential network issues |
| 19 | +3. **Performance**: Local libraries are served from the same origin, reducing DNS lookups and connection overhead |
| 20 | +4. **Security**: Prevents supply chain attacks from compromised CDN resources |
| 21 | +5. **Offline Development**: Enables development without internet connectivity |
| 22 | + |
| 23 | +### Implementation |
| 24 | + |
| 25 | +All external libraries are managed through the `publications/static/download_libraries.sh` script: |
| 26 | + |
| 27 | +```bash |
| 28 | +cd publications/static/ |
| 29 | +bash download_libraries.sh |
| 30 | +``` |
| 31 | + |
| 32 | +This script downloads all required libraries to the appropriate directories: |
| 33 | +- JavaScript files → `publications/static/js/` |
| 34 | +- CSS files → `publications/static/css/` |
| 35 | +- Images → `publications/static/css/images/` |
| 36 | +- Fonts → `publications/static/css/fonts/` |
| 37 | + |
| 38 | +### Currently Managed Libraries |
| 39 | + |
| 40 | +#### Core Libraries |
| 41 | +- jQuery 3.4.1 |
| 42 | +- Bootstrap 4.4.1 (JS and CSS) |
| 43 | +- Popper.js 2.x (for Bootstrap tooltips) |
| 44 | +- Font Awesome 4.7.0 (CSS and fonts) |
| 45 | + |
| 46 | +#### Mapping Libraries |
| 47 | +- Leaflet 1.9.4 (core mapping library) |
| 48 | +- Leaflet Draw 1.0.4 (geometry drawing) |
| 49 | +- Leaflet Fullscreen 3.0.2 (fullscreen control) |
| 50 | +- Leaflet Control Geocoder 2.4.0 (location search/gazetteer) |
| 51 | + |
| 52 | +#### UI Components |
| 53 | +- Bootstrap Datepicker 1.9.0 |
| 54 | + |
| 55 | +### Adding New External Libraries |
| 56 | + |
| 57 | +When adding a new external library to OPTIMAP: |
| 58 | + |
| 59 | +1. **Update `download_libraries.sh`**: |
| 60 | + - Add wget commands to download the library files |
| 61 | + - Include version numbers in echo statements |
| 62 | + - Download source maps if available |
| 63 | + - Download any required assets (images, fonts, etc.) |
| 64 | + |
| 65 | +2. **Download the library**: |
| 66 | + ```bash |
| 67 | + cd publications/static/ |
| 68 | + bash download_libraries.sh |
| 69 | + ``` |
| 70 | + |
| 71 | +3. **Update templates to reference local files**: |
| 72 | + ```django |
| 73 | + <!-- CORRECT: Use local static files --> |
| 74 | + <link rel="stylesheet" href="{% static 'css/library.css' %}" /> |
| 75 | + <script src="{% static 'js/library.js' %}"></script> |
| 76 | +
|
| 77 | + <!-- INCORRECT: Never use CDN URLs --> |
| 78 | + <link rel="stylesheet" href="https://cdn.example.com/library.css" /> |
| 79 | + <script src="https://cdn.example.com/library.js"></script> |
| 80 | + ``` |
| 81 | + |
| 82 | +4. **Test thoroughly**: |
| 83 | + - Verify the library loads correctly |
| 84 | + - Check browser console for 404 errors |
| 85 | + - Ensure all assets (images, fonts) load properly |
| 86 | + - Test in both development and production environments |
| 87 | + |
| 88 | +5. **Commit all files**: |
| 89 | + - Commit both the download script AND the downloaded library files |
| 90 | + - Library files should be checked into version control |
| 91 | + |
| 92 | +### Version Control |
| 93 | + |
| 94 | +- All library files are committed to the repository |
| 95 | +- This ensures reproducible builds and consistent deployments |
| 96 | +- Update libraries deliberately and test thoroughly before committing new versions |
| 97 | + |
| 98 | +### Exception Policy |
| 99 | + |
| 100 | +CDN usage is only acceptable in these limited cases: |
| 101 | +- Temporary development/testing (must be replaced before production) |
| 102 | +- Services that cannot be self-hosted (e.g., Google reCAPTCHA) |
| 103 | +- External APIs that require CDN delivery (must be documented) |
| 104 | + |
| 105 | +Any exceptions must be: |
| 106 | +1. Documented in this file with justification |
| 107 | +2. Reviewed by the project maintainer |
| 108 | +3. Include a plan for eventual local hosting if possible |
| 109 | + |
| 110 | +## Development Guidelines |
| 111 | + |
| 112 | +### File Organization |
| 113 | + |
| 114 | +- Custom JavaScript: `publications/static/js/map-*.js` |
| 115 | +- Custom CSS: `publications/static/css/*.css` |
| 116 | +- Templates: `publications/templates/` |
| 117 | +- Views: `publications/views*.py` |
| 118 | + |
| 119 | +### Map Architecture |
| 120 | + |
| 121 | +The interactive map consists of several modular components: |
| 122 | + |
| 123 | +- `map-popup.js` - Popup content generation |
| 124 | +- `map-interaction.js` - Click handling and overlapping features |
| 125 | +- `map-keyboard-navigation.js` - Keyboard accessibility |
| 126 | +- `map-search.js` - Publication search/filtering |
| 127 | +- `map-gazetteer.js` - Location search (geocoding) |
| 128 | +- `map-zoom-to-all.js` - Zoom to all features control |
| 129 | +- `main.js` - Map initialization and orchestration |
| 130 | + |
| 131 | +### Accessibility |
| 132 | + |
| 133 | +OPTIMAP follows WCAG 2.1 AA standards: |
| 134 | + |
| 135 | +- Focus indicators are only visible in high contrast mode (`body.high-contrast`) |
| 136 | +- All interactive elements must have ARIA labels |
| 137 | +- Screen reader announcements for dynamic content |
| 138 | +- Keyboard navigation support for all map features |
| 139 | + |
| 140 | +### Testing |
| 141 | + |
| 142 | +Before committing changes: |
| 143 | + |
| 144 | +1. Test with high contrast mode enabled |
| 145 | +2. Test keyboard navigation |
| 146 | +3. Test with screen reader (if possible) |
| 147 | +4. Verify no console errors |
| 148 | +5. Check all CDN links have been replaced with local files |
| 149 | + |
| 150 | +## Contact |
| 151 | + |
| 152 | +For questions about this configuration, contact the OPTIMAP development team at [email protected]. |
0 commit comments