chore: update project configuration and add font assets with caching headers
- commit
- 812ae7a683dd2f752c6d4c4e910ef06d01a39522
- author
- Kit · · 2025-07-03 19:56 UTC
- parent
- 03de79c
- signature
- SSH Unverified
SHA256:H91DFuEG4jpk5edzLA4aUKkpv4zv9Q339ipRmkph6TkThe key is unknown
25 files · +987 -4
M .gitignore +3 -1
| @@ -22,4 +22,6 @@ Thumbs.db | |||
| 22 | 22 | vite.config.js.timestamp-* | |
| 23 | 23 | vite.config.ts.timestamp-* | |
| 24 | 24 | ||
| 25 | - | docs/⏎̸ | |
| 25 | + | docs/ | |
| 26 | + | ||
| 27 | + | .serena/⏎̸ | |
| @@ -22,4 +22,6 @@ Thumbs.db | |||||
| 22 | vite.config.js.timestamp-* | 22 | vite.config.js.timestamp-* | ||
| 23 | vite.config.ts.timestamp-* | 23 | vite.config.ts.timestamp-* | ||
| 24 | 24 | ||||
| 25 | - | docs/⏎̸ | 25 | + | docs/ |
| 26 | + | ||||
| 27 | + | .serena/⏎̸ | |||
M package.json +10 -1
| @@ -19,6 +19,7 @@ | |||
| 19 | 19 | "test": "npm run test:unit -- --run", | |
| 20 | 20 | "db:generate": "npx drizzle-kit generate", | |
| 21 | 21 | "db:push": "npx drizzle-kit push", | |
| 22 | + | "db:push-prod": "TURSO_DATABASE_URL=\"$TURSO_DATABASE_URL_PROD\" TURSO_AUTH_TOKEN=\"$TURSO_AUTH_TOKEN_PROD\" npx drizzle-kit push", | |
| 22 | 23 | "db:flush": "tsx utils/db-flush.ts" | |
| 23 | 24 | }, | |
| 24 | 25 | "devDependencies": { | |
| @@ -37,6 +38,7 @@ | |||
| 37 | 38 | "eslint-config-prettier": "^10.0.1", | |
| 38 | 39 | "eslint-plugin-svelte": "^2.46.1", | |
| 39 | 40 | "globals": "^15.15.0", | |
| 41 | + | "jsdom": "^26.1.0", | |
| 40 | 42 | "prettier": "^3.5.1", | |
| 41 | 43 | "prettier-plugin-svelte": "^3.3.3", | |
| 42 | 44 | "prettier-plugin-tailwindcss": "^0.6.11", | |
| @@ -56,7 +58,14 @@ | |||
| 56 | 58 | "drizzle-orm": "^0.39.3", | |
| 57 | 59 | "pino": "^9.6.0", | |
| 58 | 60 | "pino-pretty": "^13.0.0", | |
| 61 | + | "rehype": "^13.0.2", | |
| 62 | + | "rehype-sanitize": "^6.0.0", | |
| 63 | + | "rehype-stringify": "^10.0.1", | |
| 64 | + | "remark-parse": "^11.0.0", | |
| 65 | + | "remark-rehype": "^11.1.2", | |
| 66 | + | "unified": "^11.0.5", | |
| 59 | 67 | "uuid": "^11.0.5", | |
| 60 | - | "xp.css": "^0.2.6" | |
| 68 | + | "xp.css": "^0.2.6", | |
| 69 | + | "zod": "^3.25.67" | |
| 61 | 70 | } | |
| 62 | 71 | } | |
| @@ -19,6 +19,7 @@ | |||||
| 19 | "test": "npm run test:unit -- --run", | 19 | "test": "npm run test:unit -- --run", | ||
| 20 | "db:generate": "npx drizzle-kit generate", | 20 | "db:generate": "npx drizzle-kit generate", | ||
| 21 | "db:push": "npx drizzle-kit push", | 21 | "db:push": "npx drizzle-kit push", | ||
| 22 | + | "db:push-prod": "TURSO_DATABASE_URL=\"$TURSO_DATABASE_URL_PROD\" TURSO_AUTH_TOKEN=\"$TURSO_AUTH_TOKEN_PROD\" npx drizzle-kit push", | |||
| 22 | "db:flush": "tsx utils/db-flush.ts" | 23 | "db:flush": "tsx utils/db-flush.ts" | ||
| 23 | }, | 24 | }, | ||
| 24 | "devDependencies": { | 25 | "devDependencies": { | ||
| @@ -37,6 +38,7 @@ | |||||
| 37 | "eslint-config-prettier": "^10.0.1", | 38 | "eslint-config-prettier": "^10.0.1", | ||
| 38 | "eslint-plugin-svelte": "^2.46.1", | 39 | "eslint-plugin-svelte": "^2.46.1", | ||
| 39 | "globals": "^15.15.0", | 40 | "globals": "^15.15.0", | ||
| 41 | + | "jsdom": "^26.1.0", | |||
| 40 | "prettier": "^3.5.1", | 42 | "prettier": "^3.5.1", | ||
| 41 | "prettier-plugin-svelte": "^3.3.3", | 43 | "prettier-plugin-svelte": "^3.3.3", | ||
| 42 | "prettier-plugin-tailwindcss": "^0.6.11", | 44 | "prettier-plugin-tailwindcss": "^0.6.11", | ||
| @@ -56,7 +58,14 @@ | |||||
| 56 | "drizzle-orm": "^0.39.3", | 58 | "drizzle-orm": "^0.39.3", | ||
| 57 | "pino": "^9.6.0", | 59 | "pino": "^9.6.0", | ||
| 58 | "pino-pretty": "^13.0.0", | 60 | "pino-pretty": "^13.0.0", | ||
| 61 | + | "rehype": "^13.0.2", | |||
| 62 | + | "rehype-sanitize": "^6.0.0", | |||
| 63 | + | "rehype-stringify": "^10.0.1", | |||
| 64 | + | "remark-parse": "^11.0.0", | |||
| 65 | + | "remark-rehype": "^11.1.2", | |||
| 66 | + | "unified": "^11.0.5", | |||
| 59 | "uuid": "^11.0.5", | 67 | "uuid": "^11.0.5", | ||
| 60 | - | "xp.css": "^0.2.6" | 68 | + | "xp.css": "^0.2.6", |
| 69 | + | "zod": "^3.25.67" | |||
| 61 | } | 70 | } | ||
| 62 | } | 71 | } | ||
M pnpm-lock.yaml +907 -2 generated file: collapsed
A static/_headers +18 -0
| @@ -0,0 +1,18 @@ | |||
| 1 | + | # Cache configuration for static assets | |
| 2 | + | ||
| 3 | + | # Font files - cache for 1 year (31536000 seconds) | |
| 4 | + | /fonts/* | |
| 5 | + | Cache-Control: public, max-age=31536000, immutable | |
| 6 | + | Access-Control-Allow-Origin: * | |
| 7 | + | Cross-Origin-Resource-Policy: cross-origin | |
| 8 | + | ||
| 9 | + | # General static assets - cache for 1 month (2592000 seconds) | |
| 10 | + | /favicon.png | |
| 11 | + | Cache-Control: public, max-age=2592000 | |
| 12 | + | ||
| 13 | + | # Icons and images - cache for 1 month | |
| 14 | + | /aim/* | |
| 15 | + | Cache-Control: public, max-age=2592000 | |
| 16 | + | ||
| 17 | + | /desktop/* | |
| 18 | + | Cache-Control: public, max-age=2592000⏎̸ | |
| @@ -0,0 +1,18 @@ | |||||
| 1 | + | # Cache configuration for static assets | |||
| 2 | + | ||||
| 3 | + | # Font files - cache for 1 year (31536000 seconds) | |||
| 4 | + | /fonts/* | |||
| 5 | + | Cache-Control: public, max-age=31536000, immutable | |||
| 6 | + | Access-Control-Allow-Origin: * | |||
| 7 | + | Cross-Origin-Resource-Policy: cross-origin | |||
| 8 | + | ||||
| 9 | + | # General static assets - cache for 1 month (2592000 seconds) | |||
| 10 | + | /favicon.png | |||
| 11 | + | Cache-Control: public, max-age=2592000 | |||
| 12 | + | ||||
| 13 | + | # Icons and images - cache for 1 month | |||
| 14 | + | /aim/* | |||
| 15 | + | Cache-Control: public, max-age=2592000 | |||
| 16 | + | ||||
| 17 | + | /desktop/* | |||
| 18 | + | Cache-Control: public, max-age=2592000⏎̸ | |||
A static/fonts/Arial.TTF +0 -0 binary file: no text diff
binary file: no text diff
A static/fonts/Arialbd.TTF +0 -0 binary file: no text diff
binary file: no text diff
A static/fonts/Arialbi.TTF +0 -0 binary file: no text diff
binary file: no text diff
A static/fonts/Ariali.TTF +0 -0 binary file: no text diff
binary file: no text diff
A static/fonts/Comic.TTF +0 -0 binary file: no text diff
binary file: no text diff
A static/fonts/Comicbd.TTF +0 -0 binary file: no text diff
binary file: no text diff
A static/fonts/LiberationMono-Bold.ttf +0 -0 binary file: no text diff
binary file: no text diff
A static/fonts/LiberationMono-BoldItalic.ttf +0 -0 binary file: no text diff
binary file: no text diff
A static/fonts/LiberationMono-Italic.ttf +0 -0 binary file: no text diff
binary file: no text diff
A static/fonts/LiberationMono-Regular.ttf +0 -0 binary file: no text diff
binary file: no text diff
A static/fonts/Times.TTF +0 -0 binary file: no text diff
binary file: no text diff
A static/fonts/Timesbd.TTF +0 -0 binary file: no text diff
binary file: no text diff
A static/fonts/Timesbi.TTF +0 -0 binary file: no text diff
binary file: no text diff
A static/fonts/Timesi.TTF +0 -0 binary file: no text diff
binary file: no text diff
A static/fonts/Verdana.TTF +0 -0 binary file: no text diff
binary file: no text diff
A static/fonts/Verdanab.TTF +0 -0 binary file: no text diff
binary file: no text diff
A static/fonts/Verdanai.TTF +0 -0 binary file: no text diff
binary file: no text diff
A static/fonts/Verdanaz.TTF +0 -0 binary file: no text diff
binary file: no text diff
A static/fonts/tahoma.ttf +0 -0 binary file: no text diff
binary file: no text diff
A static/fonts/tahomabd.ttf +0 -0 binary file: no text diff
binary file: no text diff
A test-gradient-fixes.md +49 -0
| @@ -0,0 +1,49 @@ | |||
| 1 | + | # Gradient and Text Formatting Fixes Summary | |
| 2 | + | ||
| 3 | + | ## Issues Fixed: | |
| 4 | + | ||
| 5 | + | ### 1. Color Picker Button Gradient Preview | |
| 6 | + | **Problem**: The color picker button wasn't showing gradient preview correctly. | |
| 7 | + | **Fix**: Updated `displayStyle` in `color-picker-256.svelte` to use consistent `background` property instead of `background-color`. | |
| 8 | + | ||
| 9 | + | ### 2. Text Input Gradient Display | |
| 10 | + | **Problem**: Text input only showed the first color of a gradient. | |
| 11 | + | **Fix**: This is by design to preserve the input background. Added a visual gradient indicator next to the input field in `chat-room.svelte` when gradient mode is active. | |
| 12 | + | ||
| 13 | + | ### 3. Chat Messages Formatting | |
| 14 | + | **Problem**: Messages weren't displaying with user-specific fonts, styles and colors. | |
| 15 | + | **Fixes**: | |
| 16 | + | - Updated `sendMessage` function to accept and pass `textStyle` parameter | |
| 17 | + | - Added `styleData` field to `SendMessageRequest` payload type | |
| 18 | + | - Updated server-side message handler to save `styleData` and `hasFormatting` fields | |
| 19 | + | - Fixed `formatted-message.svelte` to properly handle gradient styles | |
| 20 | + | - Updated text formatter to apply styles correctly to paragraph elements | |
| 21 | + | ||
| 22 | + | ## Files Modified: | |
| 23 | + | ||
| 24 | + | 1. `/src/lib/components/color-picker-256.svelte` - Fixed gradient preview display | |
| 25 | + | 2. `/src/lib/components/chat-room.svelte` - Added textStyle to sendMessage call and gradient indicator | |
| 26 | + | 3. `/src/lib/components/formatted-message.svelte` - Fixed style application for gradients | |
| 27 | + | 4. `/src/lib/utils/text-formatter.ts` - Fixed style application to all text elements | |
| 28 | + | 5. `/src/lib/states/chat.svelte.ts` - Added textStyle parameter to sendMessage | |
| 29 | + | 6. `/src/lib/types/payloads.ts` - Added styleData to SendMessageRequest | |
| 30 | + | 7. `/src/routes/api/chat/messages/+server.ts` - Added styleData handling in message creation | |
| 31 | + | ||
| 32 | + | ## How It Works Now: | |
| 33 | + | ||
| 34 | + | 1. When a user selects colors/gradients and formatting options in the toolbar, the `currentTextStyle` state is updated | |
| 35 | + | 2. When sending a message, the style data is serialized and sent along with the message content | |
| 36 | + | 3. The server saves the style data with the message in the database | |
| 37 | + | 4. When messages are displayed, the `FormattedMessage` component applies the saved styles | |
| 38 | + | 5. Gradients are rendered character-by-character for the classic AOL effect | |
| 39 | + | 6. The input field shows a gradient indicator bar when gradient mode is active | |
| 40 | + | ||
| 41 | + | ## Testing: | |
| 42 | + | ||
| 43 | + | To test the fixes: | |
| 44 | + | 1. Open the chat window | |
| 45 | + | 2. Select a gradient using the color picker (add 2-3 colors) | |
| 46 | + | 3. Choose a font and adjust size | |
| 47 | + | 4. Type a message - you should see the first gradient color in the input | |
| 48 | + | 5. Send the message - it should display with the full gradient effect | |
| 49 | + | 6. Other users should see your message with your chosen formatting⏎̸ | |
| @@ -0,0 +1,49 @@ | |||||
| 1 | + | # Gradient and Text Formatting Fixes Summary | |||
| 2 | + | ||||
| 3 | + | ## Issues Fixed: | |||
| 4 | + | ||||
| 5 | + | ### 1. Color Picker Button Gradient Preview | |||
| 6 | + | **Problem**: The color picker button wasn't showing gradient preview correctly. | |||
| 7 | + | **Fix**: Updated `displayStyle` in `color-picker-256.svelte` to use consistent `background` property instead of `background-color`. | |||
| 8 | + | ||||
| 9 | + | ### 2. Text Input Gradient Display | |||
| 10 | + | **Problem**: Text input only showed the first color of a gradient. | |||
| 11 | + | **Fix**: This is by design to preserve the input background. Added a visual gradient indicator next to the input field in `chat-room.svelte` when gradient mode is active. | |||
| 12 | + | ||||
| 13 | + | ### 3. Chat Messages Formatting | |||
| 14 | + | **Problem**: Messages weren't displaying with user-specific fonts, styles and colors. | |||
| 15 | + | **Fixes**: | |||
| 16 | + | - Updated `sendMessage` function to accept and pass `textStyle` parameter | |||
| 17 | + | - Added `styleData` field to `SendMessageRequest` payload type | |||
| 18 | + | - Updated server-side message handler to save `styleData` and `hasFormatting` fields | |||
| 19 | + | - Fixed `formatted-message.svelte` to properly handle gradient styles | |||
| 20 | + | - Updated text formatter to apply styles correctly to paragraph elements | |||
| 21 | + | ||||
| 22 | + | ## Files Modified: | |||
| 23 | + | ||||
| 24 | + | 1. `/src/lib/components/color-picker-256.svelte` - Fixed gradient preview display | |||
| 25 | + | 2. `/src/lib/components/chat-room.svelte` - Added textStyle to sendMessage call and gradient indicator | |||
| 26 | + | 3. `/src/lib/components/formatted-message.svelte` - Fixed style application for gradients | |||
| 27 | + | 4. `/src/lib/utils/text-formatter.ts` - Fixed style application to all text elements | |||
| 28 | + | 5. `/src/lib/states/chat.svelte.ts` - Added textStyle parameter to sendMessage | |||
| 29 | + | 6. `/src/lib/types/payloads.ts` - Added styleData to SendMessageRequest | |||
| 30 | + | 7. `/src/routes/api/chat/messages/+server.ts` - Added styleData handling in message creation | |||
| 31 | + | ||||
| 32 | + | ## How It Works Now: | |||
| 33 | + | ||||
| 34 | + | 1. When a user selects colors/gradients and formatting options in the toolbar, the `currentTextStyle` state is updated | |||
| 35 | + | 2. When sending a message, the style data is serialized and sent along with the message content | |||
| 36 | + | 3. The server saves the style data with the message in the database | |||
| 37 | + | 4. When messages are displayed, the `FormattedMessage` component applies the saved styles | |||
| 38 | + | 5. Gradients are rendered character-by-character for the classic AOL effect | |||
| 39 | + | 6. The input field shows a gradient indicator bar when gradient mode is active | |||
| 40 | + | ||||
| 41 | + | ## Testing: | |||
| 42 | + | ||||
| 43 | + | To test the fixes: | |||
| 44 | + | 1. Open the chat window | |||
| 45 | + | 2. Select a gradient using the color picker (add 2-3 colors) | |||
| 46 | + | 3. Choose a font and adjust size | |||
| 47 | + | 4. Type a message - you should see the first gradient color in the input | |||
| 48 | + | 5. Send the message - it should display with the full gradient effect | |||
| 49 | + | 6. Other users should see your message with your chosen formatting⏎̸ | |||