gsadmin/KoalaSync
1
0
Fork 0
mirror of https://github.com/Shik3i/KoalaSync.git synced 2026-07-26 12:08:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(website): output minified files as .min.* for safety and clarity

Browse Source
This commit is contained in:
Koala
2026-06-01 02:14:31 +02:00
parent c95e72b713
commit 9eab699e2a
19 changed files with 70 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
AI_INIT.md
+1 -1
View File
@@ -22,7 +22,7 @@ KoalaSync is a specialized tool for **synchronized video playback** across multi
- `server/`: Node.js Relay Server using Socket.IO (WebSocket-only).
- `website/`: **Landing Page** & Invitation Bridge (Marketing, Tutorials, and Downloads).
- **`build.js`**: Zero-dependency static site compiler. Translates `template.html` + `locales/*.json` → `www/`. Also minifies CSS/JS automatically.
- **`www/` is auto-generated**: Never edit files in `www/` directly. Always edit source files (`template.html`, `style.css`, `app.js`, `lang-init.js`, `locales/*.json`) and run `node website/build.js` to regenerate.
- **`www/` is auto-generated**: Never edit files in `www/` directly. Always edit source files (`template.html`, `style.css`, `app.js`, `lang-init.js`, `locales/*.json`) and run `node website/build.js` to regenerate. CSS/JS are output as `.min.*` files — a built-in cleanup step removes stale artifacts on each build.
- `shared/`: **Single Source of Truth** for protocol constants and event names.
- `scripts/`: Development utilities (e.g., `build-extension.js`).
- `docker-compose.yml`: Root-level orchestration for the relay server.
website/README.md
+2 -2
View File
@@ -17,7 +17,7 @@ The website handles incoming invitation links. When a user clicks a link like `s
The website is 100% **Static HTML, CSS, and JS**.
- **Static i18n Compiler**: The site uses a lightweight, zero-dependency Node.js compiler (`build.js`) to parse dictionary files inside `/locales/` against a single source-of-truth template (`template.html`), outputting the fully deployable static folder to `/www/`.
- **Build-time Minification**: `build.js` automatically minifies CSS and JS during compilation using a built-in state-machine tokenizer (no npm dependencies). Source files are written unminified — always edit source files, never the generated files in `www/`.
- **Build-time Minification**: `build.js` automatically minifies CSS and JS during compilation using a built-in state-machine tokenizer (no npm dependencies). Source files are written unminified (`style.css`, `app.js`, `lang-init.js`) — always edit source files, never the generated `.min.*` files in `www/`.
- **Zero Backend**: No Node.js, PHP, or databases are required to host the compiled website.
- **Zero Tracking**: All assets (fonts, icons) are self-hosted to prevent third-party tracking.
- **Responsive**: Fully optimized for mobile with a native-feel hamburger menu.
@@ -71,4 +71,4 @@ sync.koalastuff.net {
3. To test the invitation flow locally, navigate to `http://localhost:5000/join.html#join:test-room:test-pass`.
> [!IMPORTANT]
> **Never edit files inside `website/www/` directly.** This directory is fully auto-generated by `build.js`. Always edit source files (`template.html`, `style.css`, `app.js`, `lang-init.js`, locale files in `locales/`) and re-run `node website/build.js` to apply changes. CSS and JS are minified during the build — editing minified files in `www/` will result in lost changes on the next build.
> **Never edit files inside `website/www/` directly.** This directory is fully auto-generated by `build.js`. Always edit source files (`template.html`, `style.css`, `app.js`, `lang-init.js`, locale files in `locales/`) and re-run `node website/build.js` to apply changes. CSS and JS are output as `style.min.css`, `app.min.js`, and `lang-init.min.js` — the `.min.*` naming makes it visually obvious these are build artifacts. Editing minified files in `www/` will result in lost changes on the next build.
website/build.js
+15 -4
View File
@@ -164,7 +164,14 @@ function compile() {
}
}
// 5. Copy static assets
// 5. Clean stale minified output from previous builds
const staleGlobs = ['style.css', 'style.min.css', 'app.js', 'app.min.js', 'lang-init.js', 'lang-init.min.js'];
for (let f of staleGlobs) {
const p = path.join(wwwDir, f);
if (fs.existsSync(p)) fs.unlinkSync(p);
}
// 6. Copy static assets
console.log('Copying assets and static website files...');
const staticFiles = [
'style.css',
@@ -180,20 +187,24 @@ function compile() {
for (let file of staticFiles) {
const srcPath = path.join(websiteDir, file);
const destPath = path.join(wwwDir, file);
// Rename .css → .min.css and .js → .min.js in output
const destName = file.endsWith('.css') ? file.replace(/\.css$/, '.min.css')
: file.endsWith('.js') ? file.replace(/\.js$/, '.min.js')
: file;
const destPath = path.join(wwwDir, destName);
if (fs.existsSync(srcPath)) {
if (file.endsWith('.css')) {
const raw = fs.readFileSync(srcPath, 'utf8');
const minified = minifyCSS(raw);
fs.writeFileSync(destPath, minified, 'utf8');
const saved = ((raw.length - minified.length) / raw.length * 100).toFixed(0);
console.log(`Minified: ${file} (-${saved}%)`);
console.log(`Minified: ${file} → ${destName} (-${saved}%)`);
} else if (file.endsWith('.js')) {
const raw = fs.readFileSync(srcPath, 'utf8');
const minified = minifyJS(raw);
fs.writeFileSync(destPath, minified, 'utf8');
const saved = ((raw.length - minified.length) / raw.length * 100).toFixed(0);
console.log(`Minified: ${file} (-${saved}%)`);
console.log(`Minified: ${file} → ${destName} (-${saved}%)`);
} else {
fs.copyFileSync(srcPath, destPath);
console.log(`Copied: ${file}`);
website/datenschutz.html
+4 -4
View File
@@ -4,8 +4,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Datenschutz / Privacy Policy | KoalaSync</title>
<link rel="preload" href="style.css" as="style">
<link rel="stylesheet" href="style.css">
<link rel="preload" href="style.min.css" as="style">
<link rel="stylesheet" href="style.min.css">
<link rel="icon" type="image/webp" href="assets/NewLogoIcon_64.webp">
<meta name="robots" content="noindex">
@@ -14,7 +14,7 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<script src="lang-init.js"></script>
<script src="lang-init.min.js"></script>
</head>
<body>
<div class="bg-blobs">
@@ -205,6 +205,6 @@
</div>
</footer>
<script src="app.js"></script>
<script src="app.min.js"></script>
</body>
</html>
website/impressum.html
+4 -4
View File
@@ -4,8 +4,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Impressum / Legal Notice | KoalaSync</title>
<link rel="preload" href="style.css" as="style">
<link rel="stylesheet" href="style.css">
<link rel="preload" href="style.min.css" as="style">
<link rel="stylesheet" href="style.min.css">
<link rel="icon" type="image/webp" href="assets/NewLogoIcon_64.webp">
<meta name="robots" content="noindex">
@@ -14,7 +14,7 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<script src="lang-init.js"></script>
<script src="lang-init.min.js"></script>
</head>
<body>
<div class="bg-blobs">
@@ -179,6 +179,6 @@
</div>
</footer>
<script src="app.js"></script>
<script src="app.min.js"></script>
</body>
</html>
website/join.html
+4 -4
View File
@@ -4,8 +4,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Join Room | KoalaSync</title>
<link rel="preload" href="style.css" as="style">
<link rel="stylesheet" href="style.css">
<link rel="preload" href="style.min.css" as="style">
<link rel="stylesheet" href="style.min.css">
<link rel="icon" type="image/webp" href="assets/NewLogoIcon_64.webp">
<meta name="robots" content="noindex">
@@ -27,7 +27,7 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<script src="lang-init.js"></script>
<script src="lang-init.min.js"></script>
</head>
<body>
<div class="bg-blobs">
@@ -117,6 +117,6 @@
</div>
</footer>
<script src="app.js"></script>
<script src="app.min.js"></script>
</body>
</html>
website/template.html
+4 -4
View File
@@ -6,9 +6,9 @@
<title>{{META_TITLE}}</title>
<meta name="description" content="{{META_DESCRIPTION}}">
<link rel="preload" href="{{ASSET_PATH}}style.css" as="style">
<link rel="preload" href="{{ASSET_PATH}}style.min.css" as="style">
<link rel="preload" as="image" href="{{ASSET_PATH}}assets/LookDownKoala.webp" imagesrcset="{{ASSET_PATH}}assets/LookDownKoala-1x.webp 90w, {{ASSET_PATH}}assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
<link rel="stylesheet" href="{{ASSET_PATH}}style.css">
<link rel="stylesheet" href="{{ASSET_PATH}}style.min.css">
<link rel="icon" type="image/webp" href="{{ASSET_PATH}}assets/NewLogoIcon_64.webp">
<link rel="canonical" href="https://sync.koalastuff.net/{{CANONICAL_PATH}}">
<link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/">
@@ -40,7 +40,7 @@
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<script src="{{ASSET_PATH}}lang-init.js"></script>
<script src="{{ASSET_PATH}}lang-init.min.js"></script>
<!-- Structured Data (Schema.org) for Rich Snippets -->
<script type="application/ld+json" id="schema-software">
@@ -1093,6 +1093,6 @@
</div>
</footer>
<script src="{{ASSET_PATH}}app.js"></script>
<script src="{{ASSET_PATH}}app.min.js"></script>
</body>
</html>
website/www/app.js → website/www/app.min.js
Vendored
View File
website/www/datenschutz.html
+4 -4
View File
@@ -4,8 +4,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Datenschutz / Privacy Policy | KoalaSync</title>
<link rel="preload" href="style.css" as="style">
<link rel="stylesheet" href="style.css">
<link rel="preload" href="style.min.css" as="style">
<link rel="stylesheet" href="style.min.css">
<link rel="icon" type="image/webp" href="assets/NewLogoIcon_64.webp">
<meta name="robots" content="noindex">
@@ -14,7 +14,7 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<script src="lang-init.js"></script>
<script src="lang-init.min.js"></script>
</head>
<body>
<div class="bg-blobs">
@@ -205,6 +205,6 @@
</div>
</footer>
<script src="app.js"></script>
<script src="app.min.js"></script>
</body>
</html>
website/www/de/index.html
+4 -4
View File
@@ -6,9 +6,9 @@
<title>KoalaSync | Netflix, YouTube & jedes Video mit Freunden synchronisieren</title>
<meta name="description" content="Schaue Netflix, YouTube, Twitch und jedes HTML5-Video synchron mit Freunden. Kostenlose, quelloffene Browser-Erweiterung. Keine Anmeldung erforderlich.">
<link rel="preload" href="../style.css" as="style">
<link rel="preload" href="../style.min.css" as="style">
<link rel="preload" as="image" href="../assets/LookDownKoala.webp" imagesrcset="../assets/LookDownKoala-1x.webp 90w, ../assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
<link rel="stylesheet" href="../style.css">
<link rel="stylesheet" href="../style.min.css">
<link rel="icon" type="image/webp" href="../assets/NewLogoIcon_64.webp">
<link rel="canonical" href="https://sync.koalastuff.net/de/">
<link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/">
@@ -40,7 +40,7 @@
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<script src="../lang-init.js"></script>
<script src="../lang-init.min.js"></script>
<!-- Structured Data (Schema.org) for Rich Snippets -->
<script type="application/ld+json" id="schema-software">
@@ -1093,6 +1093,6 @@
</div>
</footer>
<script src="../app.js"></script>
<script src="../app.min.js"></script>
</body>
</html>
website/www/es/index.html
+4 -4
View File
@@ -6,9 +6,9 @@
<title>KoalaSync | Sincroniza Netflix, YouTube y cualquier video con amigos</title>
<meta name="description" content="Mira Netflix, YouTube, Twitch y cualquier video HTML5 en perfecta sincronización con amigos. Extensión de navegador gratuita y de código abierto. Sin registro.">
<link rel="preload" href="../style.css" as="style">
<link rel="preload" href="../style.min.css" as="style">
<link rel="preload" as="image" href="../assets/LookDownKoala.webp" imagesrcset="../assets/LookDownKoala-1x.webp 90w, ../assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
<link rel="stylesheet" href="../style.css">
<link rel="stylesheet" href="../style.min.css">
<link rel="icon" type="image/webp" href="../assets/NewLogoIcon_64.webp">
<link rel="canonical" href="https://sync.koalastuff.net/es/">
<link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/">
@@ -40,7 +40,7 @@
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<script src="../lang-init.js"></script>
<script src="../lang-init.min.js"></script>
<!-- Structured Data (Schema.org) for Rich Snippets -->
<script type="application/ld+json" id="schema-software">
@@ -1093,6 +1093,6 @@
</div>
</footer>
<script src="../app.js"></script>
<script src="../app.min.js"></script>
</body>
</html>
website/www/fr/index.html
+4 -4
View File
@@ -6,9 +6,9 @@
<title>KoalaSync | Synchronisez Netflix, YouTube et n'importe quelle vidéo avec vos amis</title>
<meta name="description" content="Regardez Netflix, YouTube, Twitch et des vidéos HTML5 en synchro avec vos amis. Extension de navigateur gratuite et open-source. Aucune inscription requise.">
<link rel="preload" href="../style.css" as="style">
<link rel="preload" href="../style.min.css" as="style">
<link rel="preload" as="image" href="../assets/LookDownKoala.webp" imagesrcset="../assets/LookDownKoala-1x.webp 90w, ../assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
<link rel="stylesheet" href="../style.css">
<link rel="stylesheet" href="../style.min.css">
<link rel="icon" type="image/webp" href="../assets/NewLogoIcon_64.webp">
<link rel="canonical" href="https://sync.koalastuff.net/fr/">
<link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/">
@@ -40,7 +40,7 @@
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<script src="../lang-init.js"></script>
<script src="../lang-init.min.js"></script>
<!-- Structured Data (Schema.org) for Rich Snippets -->
<script type="application/ld+json" id="schema-software">
@@ -1093,6 +1093,6 @@
</div>
</footer>
<script src="../app.js"></script>
<script src="../app.min.js"></script>
</body>
</html>
website/www/impressum.html
+4 -4
View File
@@ -4,8 +4,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Impressum / Legal Notice | KoalaSync</title>
<link rel="preload" href="style.css" as="style">
<link rel="stylesheet" href="style.css">
<link rel="preload" href="style.min.css" as="style">
<link rel="stylesheet" href="style.min.css">
<link rel="icon" type="image/webp" href="assets/NewLogoIcon_64.webp">
<meta name="robots" content="noindex">
@@ -14,7 +14,7 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<script src="lang-init.js"></script>
<script src="lang-init.min.js"></script>
</head>
<body>
<div class="bg-blobs">
@@ -179,6 +179,6 @@
</div>
</footer>
<script src="app.js"></script>
<script src="app.min.js"></script>
</body>
</html>
website/www/index.html
+4 -4
View File
@@ -6,9 +6,9 @@
<title>KoalaSync | Sync Netflix, YouTube & Any Video with Friends</title>
<meta name="description" content="Watch Netflix, YouTube, Twitch & any HTML5 video in perfect sync with friends. Free, open-source browser extension for Chrome and Firefox. No sign-up needed.">
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="style.min.css" as="style">
<link rel="preload" as="image" href="assets/LookDownKoala.webp" imagesrcset="assets/LookDownKoala-1x.webp 90w, assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style.min.css">
<link rel="icon" type="image/webp" href="assets/NewLogoIcon_64.webp">
<link rel="canonical" href="https://sync.koalastuff.net/">
<link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/">
@@ -40,7 +40,7 @@
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<script src="lang-init.js"></script>
<script src="lang-init.min.js"></script>
<!-- Structured Data (Schema.org) for Rich Snippets -->
<script type="application/ld+json" id="schema-software">
@@ -1093,6 +1093,6 @@
</div>
</footer>
<script src="app.js"></script>
<script src="app.min.js"></script>
</body>
</html>
website/www/join.html
+4 -4
View File
@@ -4,8 +4,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Join Room | KoalaSync</title>
<link rel="preload" href="style.css" as="style">
<link rel="stylesheet" href="style.css">
<link rel="preload" href="style.min.css" as="style">
<link rel="stylesheet" href="style.min.css">
<link rel="icon" type="image/webp" href="assets/NewLogoIcon_64.webp">
<meta name="robots" content="noindex">
@@ -27,7 +27,7 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<script src="lang-init.js"></script>
<script src="lang-init.min.js"></script>
</head>
<body>
<div class="bg-blobs">
@@ -117,6 +117,6 @@
</div>
</footer>
<script src="app.js"></script>
<script src="app.min.js"></script>
</body>
</html>
website/www/lang-init.js → website/www/lang-init.min.js
Vendored
View File
website/www/pt-BR/index.html
+4 -4
View File
@@ -6,9 +6,9 @@
<title>KoalaSync | Sincronize Netflix, YouTube e qualquer vídeo com amigos</title>
<meta name="description" content="Assista Netflix, YouTube, Twitch e qualquer vídeo HTML5 em perfeita sincronia com amigos. Extensão de navegador gratuita e de código aberto. Sem registro.">
<link rel="preload" href="../style.css" as="style">
<link rel="preload" href="../style.min.css" as="style">
<link rel="preload" as="image" href="../assets/LookDownKoala.webp" imagesrcset="../assets/LookDownKoala-1x.webp 90w, ../assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
<link rel="stylesheet" href="../style.css">
<link rel="stylesheet" href="../style.min.css">
<link rel="icon" type="image/webp" href="../assets/NewLogoIcon_64.webp">
<link rel="canonical" href="https://sync.koalastuff.net/pt-BR/">
<link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/">
@@ -40,7 +40,7 @@
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<script src="../lang-init.js"></script>
<script src="../lang-init.min.js"></script>
<!-- Structured Data (Schema.org) for Rich Snippets -->
<script type="application/ld+json" id="schema-software">
@@ -1093,6 +1093,6 @@
</div>
</footer>
<script src="../app.js"></script>
<script src="../app.min.js"></script>
</body>
</html>
website/www/ru/index.html
+4 -4
View File
@@ -6,9 +6,9 @@
<title>KoalaSync | Синхронизация Netflix, YouTube и любого видео с друзьями</title>
<meta name="description" content="Смотрите Netflix, YouTube, Twitch и любые HTML5-видео в синхронизации с друзьями. Бесплатное расширение браузера с открытым кодом. Регистрация не требуется.">
<link rel="preload" href="../style.css" as="style">
<link rel="preload" href="../style.min.css" as="style">
<link rel="preload" as="image" href="../assets/LookDownKoala.webp" imagesrcset="../assets/LookDownKoala-1x.webp 90w, ../assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
<link rel="stylesheet" href="../style.css">
<link rel="stylesheet" href="../style.min.css">
<link rel="icon" type="image/webp" href="../assets/NewLogoIcon_64.webp">
<link rel="canonical" href="https://sync.koalastuff.net/ru/">
<link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/">
@@ -40,7 +40,7 @@
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<script src="../lang-init.js"></script>
<script src="../lang-init.min.js"></script>
<!-- Structured Data (Schema.org) for Rich Snippets -->
<script type="application/ld+json" id="schema-software">
@@ -1093,6 +1093,6 @@
</div>
</footer>
<script src="../app.js"></script>
<script src="../app.min.js"></script>
</body>
</html>
website/www/style.css → website/www/style.min.css
Vendored
View File