TeleCloud Frontend Assets

This repository contains the source code for the TeleCloud web interface.

📁 Repository Structure

• templates/: Go HTML templates.
• static/: Frontend assets (CSS, JS, Fonts).
• static/locales/: JSON translation files.
• tailwind.config.js: Tailwind CSS configuration.
• package.json: Dependencies and build scripts.
• build.js: Unified Node.js build engine (Tailwind, esbuild, sync/minify locales).

🌍 Contributing Translations (Localization)

English

If you would like to contribute a new language or improve an existing translation, please follow these steps:

1. Locate translation files: Language files are located in the static/locales/ directory in JSON format (e.g., en.json, vi.json).
2. Add a new language:
   • Create a new JSON file with the ISO language code (e.g., fr.json for French).
   • Copy the content from en.json and translate the values into your language.
   • Open static/js/common.js and add the new language to the availableLangs array:

     { code: 'fr', name: 'Français', flag: '🇫🇷' }

3. Submit a Pull Request: Once finished, submit a Pull Request (PR) to this repository.

Tiếng Việt

Nếu bạn muốn đóng góp bản dịch cho một ngôn ngữ mới hoặc cải thiện bản dịch hiện có, hãy làm theo các bước sau:

1. Tìm tệp bản dịch: Các tệp ngôn ngữ nằm trong thư mục static/locales/ dưới định dạng JSON (ví dụ: vi.json, en.json).
2. Thêm ngôn ngữ mới:
   • Tạo một tệp JSON mới với mã ngôn ngữ ISO (ví dụ: fr.json cho tiếng Pháp).
   • Sao chép nội dung từ en.json và dịch các giá trị sang ngôn ngữ của bạn.
   • Mở tệp static/js/common.js và thêm ngôn ngữ mới vào mảng availableLangs:

     { code: 'fr', name: 'Français', flag: '🇫🇷' }

3. Gửi Pull Request: Sau khi hoàn tất, hãy gửi một Pull Request (PR) vào repository này.

🛠️ Build Process

The main TeleCloud repository integrates this as a git submodule. During the build process (Docker or GitHub Actions), the following steps are performed:

1. Fetch this submodule into the web/ directory.
2. Run build-frontend.sh to generate minified assets (*.min.js, *.min.css, *.min.json).
3. Compile the Go binary with embedded assets.

What the build script does

1. Cleans up old minified files.
2. Optionally pulls latest changes from origin/main (controlled by argument).
3. Verifies npm is installed, then runs npm install.
4. Executes build.js which handles:
   • Building Tailwind CSS via @tailwindcss/cli.
   • Bundling and minifying JS and CSS files via esbuild.
   • Minifying theme CSS files.
   • Syncing and minifying JSON locale files.

Local Development

To manually build the frontend assets:

1. Ensure you have Node.js and npm installed.
2. Run the build command:

   cd web
   npm install
   npm run build

   Alternatively, you can use the wrapper scripts:

   # Linux/macOS
   ./build-frontend.sh
   # Windows
   build-frontend.bat

⚠️ Note

Minified files are ignored by git to keep the repository clean. They are generated only during the build process.

---

Developed by @dabeecao