till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-15 01:41:08 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4
managarten/apps/uload
History
Till JS 919fcca4b7 refactor(shared-tailwind): rewrite themes.css to single-layer shadcn convention 
Pre-launch theme system audit found multiple parallel layers in themes.css
(--theme-X full hsl strings, --X partial shadcn aliases, --color-X populated
by runtime store with raw channels) plus dead-code companion files. The
inconsistency caused light-mode regressions when scoped-CSS consumers
wrote `var(--color-X)` standalone — the variable holds raw HSL channels
which is invalid as a color value, browser fell back to inherited (white).

Rewrite to one consistent layer:

  - Source of truth: --color-X defined as raw HSL channels (e.g.
    `0 0% 17%`) in :root, .dark, and all variant [data-theme="..."]
    blocks. Matches the format the runtime store
    (@mana/shared-theme/src/utils.ts) writes, eliminating the
    static-fallback-vs-runtime mismatch and the corresponding flash
    of unstyled content on hydration.

  - @theme inline uses self-reference + Tailwind v4 <alpha-value>
    placeholder so utility classes generate correctly AND opacity
    modifiers work: `text-foreground/50` → `hsl(var(--color-foreground) / 0.5)`.

  - @layer components (.btn-primary, .card, .badge, etc.) wraps
    var(--color-X) refs with hsl() — they were broken in light mode
    too for the same reason.

Convention going forward (also documented in the file header):

  1. Markup: use Tailwind utility classes (text-foreground, bg-card, …)
  2. Scoped CSS: hsl(var(--color-X)) — always wrap with hsl()
  3. NEVER raw var(--color-X) in CSS — that's the bug pattern

Net file: 692 → 580 LOC. Single source layer, no indirection.

Also delete dead companion files (zero imports anywhere):
  - tailwind-v4.css (had broken self-reference, never imported)
  - theme-variables.css (legacy hex-based palette)
  - components.css (legacy component utilities)
  - index.js / preset.js / colors.js (Tailwind v3 preset format,
    irrelevant under Tailwind v4)

package.json exports map shrinks accordingly to just `./themes.css`.

Consumers using `hsl(var(--color-X))` (~379 files across mana-web,
manavoxel-web, arcade-web) keep working unchanged — the public API
name `--color-X` is preserved. Only the broken pattern `var(--color-X)`
(~61 files) needs a follow-up sweep, handled in a separate commit.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-09 01:13:06 +02:00
..
apps feat: rename ManaCore to Mana across entire codebase 2026-04-05 20:00:13 +02:00
packages/uload-database feat: rename ManaCore to Mana across entire codebase 2026-04-05 20:00:13 +02:00
CLAUDE.md chore: complete ManaCore → Mana rename (docs, go modules, plists, images) 2026-04-07 12:26:10 +02:00
package.json refactor(shared-tailwind): rewrite themes.css to single-layer shadcn convention 2026-04-09 01:13:06 +02:00
README.md feat(uload): rewrite to local-first + Hono architecture 2026-03-29 09:16:04 +02:00

README.md

uLoad - URL Shortener & Link Management

A modern URL shortener and link management platform built with SvelteKit and PocketBase.

🚀 Production

Live: https://ulo.ad
Admin: https://ulo.ad/_/

🛠 Tech Stack

  • Frontend: SvelteKit 2.0 + Svelte 5
  • Backend: PocketBase (embedded)
  • Styling: Tailwind CSS 4.0
  • Deployment: Docker + Coolify on Hetzner VPS
  • Database: SQLite (via PocketBase)

📦 Features

  • URL shortening with custom codes
  • QR code generation
  • Click analytics
  • User profiles (e.g., ulo.ad/p/username)
  • Link management dashboard
  • Real-time statistics

🏃 Development

# Install dependencies
npm install --legacy-peer-deps

# Start development server
npm run dev

# Start with PocketBase backend
npm run dev:all

# Run tests
npm run test

# Type checking
npm run check

🐳 Docker Deployment

# Build and run locally
docker-compose up --build

# Access at:
# Frontend: http://localhost:3000
# PocketBase: http://localhost:8090

📝 Documentation

🔧 Environment Variables

NODE_ENV=production
PORT=3000
ORIGIN=https://ulo.ad
PUBLIC_POCKETBASE_URL=https://ulo.ad/api
POCKETBASE_ADMIN_EMAIL=admin@example.com
POCKETBASE_ADMIN_PASSWORD=secure_password

See .env.example for all configuration options.

📂 Project Structure

uload/
├── src/               # SvelteKit application
│   ├── routes/       # Pages and API routes
│   ├── lib/          # Components and utilities
│   └── app.html      # HTML template
├── backend/           # PocketBase configuration
│   ├── pb_schema.json # Database schema
│   └── init-pocketbase.sh # Setup script
├── build/            # Production build output
├── static/           # Static assets
├── Dockerfile        # Multi-stage Docker build
├── docker-compose.yml # Local development
├── supervisord.conf  # Process management
└── CLAUDE.md         # AI assistant context

🚢 Deployment

The application is deployed on Hetzner VPS using Coolify with automatic deployments on push to main branch.

# Commit and push to deploy
git add .
git commit -m "Update"
git push origin main
# Coolify automatically deploys

Manual Deployment Steps:

  1. Set DNS A record to 91.99.221.179
  2. Add domain in Coolify
  3. Update environment variables
  4. Enable SSL certificate
  5. Deploy application

📊 Monitoring

🔐 Security

  • HTTPS enforced
  • Environment-based configuration
  • Secure admin authentication
  • Rate limiting on API endpoints
  • Regular security updates

🤝 Contributing

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

🐛 Troubleshooting

Common issues and solutions are documented in DEPLOYMENT_LESSONS_LEARNED.md

For support, check:

  • Application logs in Coolify
  • Health endpoint status
  • PocketBase admin panel

📄 License

Private - Memoro AI © 2024