@hkonda/loco-translate 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +68 -8
- package/dist/index.html +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -10,7 +10,74 @@ Two integration modes: **Server Mode** (live API-driven) and **File Mode** (stat
|
|
|
10
10
|
|
|
11
11
|
---
|
|
12
12
|
|
|
13
|
-
##
|
|
13
|
+
## Quick Start — NPM Package
|
|
14
|
+
|
|
15
|
+
The fastest way to run Loco. No cloning required.
|
|
16
|
+
|
|
17
|
+
### 1. Install and Start
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
npm install -g @hkonda/loco-translate
|
|
21
|
+
loco
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
Or without a global install:
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
npx @hkonda/loco-translate
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
On first run, the terminal prints your dashboard URL, CDN snippet, and API key:
|
|
31
|
+
|
|
32
|
+
```
|
|
33
|
+
🌐 Loco Translation Manager
|
|
34
|
+
|
|
35
|
+
Dashboard : http://<your-ip>:6101/dashboard/
|
|
36
|
+
CDN script: http://<your-ip>:6101/cdn/loco.js
|
|
37
|
+
API key : <auto-generated>
|
|
38
|
+
|
|
39
|
+
Paste into any page:
|
|
40
|
+
|
|
41
|
+
<script src="http://<your-ip>:6101/cdn/loco.js"></script>
|
|
42
|
+
<script>Loco.init({ apiUrl: 'http://<your-ip>:6101', apiKey: '<your-key>' });</script>
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
### 2. Open the Dashboard
|
|
46
|
+
|
|
47
|
+
Navigate to the **Dashboard** URL printed above (e.g. `http://localhost:6101/dashboard/`).
|
|
48
|
+
|
|
49
|
+
### 3. Add the Snippet to Your Page
|
|
50
|
+
|
|
51
|
+
Copy the `<script>` tags from the terminal output and paste them into any HTML page. When that page loads, Loco auto-discovers all text and sends it to the dashboard as **Pending** items.
|
|
52
|
+
|
|
53
|
+
### 4. Translate
|
|
54
|
+
|
|
55
|
+
1. In the dashboard, approve phrases in the **Pending** tab
|
|
56
|
+
2. Use **AI Translate** (requires a BlueHive API key) or edit translations manually
|
|
57
|
+
3. Call `Loco.apply('fr')` in the browser console to preview translations live
|
|
58
|
+
|
|
59
|
+
### Configuration
|
|
60
|
+
|
|
61
|
+
Set these environment variables to customise Loco's behaviour:
|
|
62
|
+
|
|
63
|
+
| Variable | Default | Description |
|
|
64
|
+
|---|---|---|
|
|
65
|
+
| `PORT` | `6101` | Server port |
|
|
66
|
+
| `LOCO_DATA_DIR` | `.loco/` in cwd | Directory where `loco.db` is stored |
|
|
67
|
+
| `BASE_PATH` | _(empty)_ | URL prefix for reverse-proxy deployments |
|
|
68
|
+
| `BLUEHIVE_API_KEY` | _(none)_ | BlueHive key for AI translations |
|
|
69
|
+
| `PUBLIC_URL` | _(auto)_ | Override the printed public URL |
|
|
70
|
+
|
|
71
|
+
Create a `.env` file in your working directory to set these:
|
|
72
|
+
|
|
73
|
+
```bash
|
|
74
|
+
PORT=6101
|
|
75
|
+
BLUEHIVE_API_KEY=BHSK-...
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
---
|
|
79
|
+
|
|
80
|
+
## Developer Setup (from source)
|
|
14
81
|
|
|
15
82
|
### 1. Install & Start the Dashboard
|
|
16
83
|
|
|
@@ -33,15 +100,8 @@ On startup the terminal prints your working URLs:
|
|
|
33
100
|
Dashboard : http://<your-ip>:6100/loco/dashboard/
|
|
34
101
|
CDN script: http://<your-ip>:6100/loco/cdn/loco.js
|
|
35
102
|
API key : <auto-generated>
|
|
36
|
-
|
|
37
|
-
Paste into any page:
|
|
38
|
-
|
|
39
|
-
<script src="http://<your-ip>:6100/loco/cdn/loco.js"></script>
|
|
40
|
-
<script>Loco.init({ apiUrl: 'http://<your-ip>:6100/loco', apiKey: '<your-key>' });</script>
|
|
41
103
|
```
|
|
42
104
|
|
|
43
|
-
Open the **Dashboard** URL in your browser. You should see the Translation Manager with Pending / Approved / Trash tabs.
|
|
44
|
-
|
|
45
105
|
### 2. Add the CDN Snippet to Your Page
|
|
46
106
|
|
|
47
107
|
Copy the snippet from the terminal output (or from **Dashboard → Settings → CDN Script Snippet**) and paste it into any HTML page you want to translate. When that page loads in a browser, Loco automatically discovers text nodes and sends them to the dashboard as "Pending" items.
|
package/dist/index.html
CHANGED
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
6
|
<title>Loco — Translation Manager</title>
|
|
7
|
-
<script type="module" crossorigin src="/
|
|
8
|
-
<link rel="stylesheet" crossorigin href="/
|
|
7
|
+
<script type="module" crossorigin src="/dashboard/assets/index-CGo6e-bA.js"></script>
|
|
8
|
+
<link rel="stylesheet" crossorigin href="/dashboard/assets/index-DBcQDZ75.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
|
11
11
|
<div id="app"></div>
|