docs: comprehensive documentation updates and modernization

- Update BUILDING.md with current build system information
- Modernize various README files across the project
- Update CHANGELOG.md with recent changes
- Improve documentation consistency and formatting
- Update platform-specific documentation (iOS, Electron, Docker)
- Enhance test documentation and build guides
This commit is contained in:
Matthew Raymer
2025-08-20 13:02:01 +00:00
parent 963ff9234f
commit 2d17bfd3b4
43 changed files with 1022 additions and 267 deletions

View File

@@ -25,6 +25,7 @@
## Why This Happens
In development mode, we enable SharedArrayBuffer for fast SQLite operations, which requires:
- `Cross-Origin-Opener-Policy: same-origin`
- `Cross-Origin-Embedder-Policy: require-corp`
@@ -35,6 +36,7 @@ These headers create a **cross-origin isolated environment** that blocks resourc
### 1. Use Supported Image Hosting Services
**Recommended services that work well:**
- **Imgur**: Free, no registration required, direct links
- **GitHub**: If you have images in repositories
- **Unsplash**: For stock photos
@@ -45,6 +47,7 @@ These headers create a **cross-origin isolated environment** that blocks resourc
If you frequently use images from a specific domain, add a proxy:
#### Step 1: Add Proxy to `vite.config.common.mts`
```typescript
'/yourservice-proxy': {
target: 'https://yourservice.com',
@@ -63,6 +66,7 @@ If you frequently use images from a specific domain, add a proxy:
```
#### Step 2: Update Transform Function in `src/libs/util.ts`
```typescript
// Transform YourService URLs to use proxy
if (imageUrl.startsWith("https://yourservice.com/")) {
@@ -74,6 +78,7 @@ if (imageUrl.startsWith("https://yourservice.com/")) {
### 3. Use Alternative Image Sources
For frequently failing domains, consider:
- Upload images to Imgur or GitHub
- Use a CDN with proper CORS headers
- Host images on your own domain with CORS enabled
@@ -81,11 +86,13 @@ For frequently failing domains, consider:
## Development vs Production
### Development Mode
- Images from supported services work through proxies
- Unsupported images may fail to load
- Console warnings show which images have issues
### Production Mode
- All images load directly without proxies
- No CORS restrictions in production
- Better performance without proxy overhead
@@ -93,6 +100,7 @@ For frequently failing domains, consider:
## Testing Image Sources
### Check if an Image Source Works
```bash
# Test in browser console:
fetch('https://example.com/image.jpg', { mode: 'cors' })
@@ -101,6 +109,7 @@ fetch('https://example.com/image.jpg', { mode: 'cors' })
```
### Visual Testing
```typescript
import { createTestImageElements } from './libs/test-cors-images';
createTestImageElements(); // Creates visual test panel
@@ -109,30 +118,36 @@ createTestImageElements(); // Creates visual test panel
## Common Error Messages
### `ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep`
**Cause**: Image source doesn't send required CORS headers
**Solution**: Use a supported image hosting service or add a proxy
### `ERR_NETWORK` or `ERR_INTERNET_DISCONNECTED`
**Cause**: Proxy service is unavailable
**Solution**: Check internet connection or use alternative image source
### Images Load in Production but Not Development
**Cause**: Normal behavior - development has stricter CORS requirements
**Solution**: Use supported image sources for development testing
## Best Practices
### For New Projects
1. Use supported image hosting services from the start
2. Upload user images to Imgur or similar service
3. Host critical images on your own domain with CORS enabled
### For Existing Projects
1. Identify frequently used image domains in console warnings
2. Add proxies for the most common domains
3. Gradually migrate to supported image hosting services
### For User-Generated Content
1. Provide upload functionality to supported services
2. Validate image URLs against supported domains
3. Show helpful error messages for unsupported sources
@@ -140,17 +155,20 @@ createTestImageElements(); // Creates visual test panel
## Troubleshooting
### Image Not Loading?
1. Check browser console for error messages
2. Verify the domain is in the supported list
3. Test if the image loads in production mode
4. Consider adding a proxy for that domain
### Proxy Not Working?
1. Check if the target service allows proxying
2. Verify CORS headers are being set correctly
3. Test with a simpler image URL from the same domain
### Performance Issues?
1. Proxies add latency in development only
2. Production uses direct image loading
3. Consider using a local image cache for development
@@ -158,6 +176,7 @@ createTestImageElements(); // Creates visual test panel
## Quick Fixes
### For Immediate Issues
```typescript
// Temporary fallback: disable CORS headers for testing
// In vite.config.common.mts, comment out:
@@ -166,9 +185,11 @@ createTestImageElements(); // Creates visual test panel
// 'Cross-Origin-Embedder-Policy': 'require-corp'
// },
```
**Note**: This disables SharedArrayBuffer performance benefits.
### For Long-term Solution
- Use supported image hosting services
- Add proxies for frequently used domains
- Migrate critical images to your own CORS-enabled CDN
@@ -177,4 +198,4 @@ createTestImageElements(); // Creates visual test panel
The cross-origin isolated environment is necessary for SharedArrayBuffer performance but requires careful image source management. Use the supported services, add proxies for common domains, and accept that some external images may not work in development mode.
This is a development-only limitation - production deployments work with any image source.
This is a development-only limitation - production deployments work with any image source.