Add LibreTranslator SEO webpage translator template

libretranslator-seo/BLOG_DRAFT.md

@@ -0,0 +1,63 @@
+# Building an SEO-Friendly Webpage Translator on Codesphere with LibreTranslate
+
+Language support is often treated as a large rewrite: clone the page, translate every string, rebuild navigation, and keep all versions updated forever. This template takes a lighter path. It keeps the original page as the source of truth, sends text segments through a self-hosted LibreTranslate-compatible service, and returns translated HTML plus metadata that can be used for SEO previews.
+
+The project is made of two pieces:
+
+- a small Node.js proxy that calls LibreTranslate, caches repeated text, and applies glossary rules
+- a browser widget that adds language buttons to an existing webpage
+
+The result is useful for prototypes, blogs, product documentation, and content sites where the team wants to test multilingual reach without adopting a hosted translation SaaS.
+
+## Why Self-Host Translation?
+
+Hosted translation platforms are convenient, but they can become expensive and may raise compliance concerns for private product copy. A self-hosted LibreTranslate service gives teams more control over where content goes. Codesphere is a good fit because the app, proxy, and translation service can live close together in one workspace.
+
+## How the Template Works
+
+The demo page marks translatable content with `data-i18n` attributes. When a user selects a target language, the browser sends those text segments to the local proxy:
+
+```http
+POST /api/translate
+```
+
+The proxy forwards text to LibreTranslate, stores repeated translations in an in-memory cache, and applies glossary overrides. Product names such as `Codesphere` can stay unchanged, while terms like `CI pipeline` can follow approved wording.
+
+For SEO-oriented workflows, the app also exposes:
+
+```http
+POST /api/translate-page
+```
+
+That endpoint accepts HTML, translates text nodes with a structured parser, preserves the page shape, and returns `hreflang` metadata that can be used when generating static translated pages.
+
+## Deploying on Codesphere
+
+1. Create a workspace from the template.
+2. Configure `LIBRETRANSLATE_URL`.
+3. Run the CI pipeline `Prepare` stage.
+4. Run the `Run` stage.
+5. Open the deployment URL.
+
+For local UI testing, enable mock mode:
+
+```bash
+ALLOW_MOCK_TRANSLATION=true npm start
+```
+
+Mock mode is intentionally labeled as a demo fallback and should not be used as real translation proof.
+
+## What This Template Is Good For
+
+This template is a starting point for:
+
+- translating blog pages without manually duplicating content
+- testing multilingual landing pages
+- adding terminology feedback through glossary overrides
+- generating translated HTML previews for editors
+
+It is not a full translation management system. Production sites should persist translated output, review translations with native speakers, and serve localized URLs with stable canonical and alternate links.
+
+## Next Steps
+
+The next improvements would be persistent translation storage, authenticated editor feedback, a build-time static export command, and automatic sitemap generation for translated routes.

libretranslator-seo/README.md

@@ -0,0 +1,109 @@
+# LibreTranslator SEO Webpage Translator
+
+This template shows how to add plug-in style translation controls to an existing webpage while keeping a self-hosted LibreTranslate-compatible endpoint in the loop.
+
+It includes:
+
+- a Node.js proxy that talks to `LIBRETRANSLATE_URL`
+- in-memory caching for repeated text segments
+- glossary overrides for company-specific terminology
+- a demo webpage with language buttons
+- an endpoint that returns translated HTML and `hreflang` metadata for SEO previews
+
+## Quick Start on Codesphere
+
+1. Open the CI pipeline.
+2. Run `Prepare` to install dependencies.
+3. Set `LIBRETRANSLATE_URL` to your LibreTranslate service URL.
+4. Run `Run`.
+5. Open the deployment URL and translate the demo page.
+
+For local demos without a translation service, set:
+
+```bash
+ALLOW_MOCK_TRANSLATION=true
+```
+
+The mock mode keeps the app usable for UI testing, but it is not a real translation engine.
+
+## Environment
+
+```bash
+LIBRETRANSLATE_URL=http://localhost:5000
+LIBRETRANSLATE_API_KEY=
+PORT=3000
+ALLOW_MOCK_TRANSLATION=false
+```
+
+## Running Locally
+
+```bash
+npm install
+npm test
+npm start
+```
+
+Then visit `http://localhost:3000`.
+
+## Optional LibreTranslate Service
+
+Run a LibreTranslate-compatible service in the same workspace or point the app at an existing private endpoint:
+
+```bash
+docker run -p 5000:5000 libretranslate/libretranslate
+```
+
+Then start this template with:
+
+```bash
+LIBRETRANSLATE_URL=http://localhost:5000 npm start
+```
+
+## API
+
+### `GET /api/health`
+
+Returns app and translator endpoint status.
+
+### `GET /api/languages`
+
+Returns languages from LibreTranslate. If the translator is unavailable, the app returns a small fallback list and marks it as fallback data.
+
+### `POST /api/translate`
+
+Translates one or more text segments.
+
+```json
+{
+  "q": ["Scale support without copying pages.", "Codesphere"],
+  "source": "en",
+  "target": "de",
+  "glossary": {
+    "Codesphere": "Codesphere"
+  }
+}
+```
+
+### `POST /api/translate-page`
+
+Accepts HTML, translates text nodes, preserves structure, and returns SEO metadata.
+
+```json
+{
+  "html": "<main><h1>Scale support</h1><p>Translate your page.</p></main>",
+  "source": "en",
+  "target": "fr",
+  "canonicalUrl": "https://example.com/blog/support",
+  "glossary": {
+    "Codesphere": "Codesphere"
+  }
+}
+```
+
+## Glossary Overrides
+
+Glossary replacements are applied after translation so product names and approved terminology stay consistent. The demo includes defaults for `Codesphere`, `LibreTranslate`, and `CI pipeline`.
+
+## Blog Draft
+
+The issue asks for a blog article. This PR includes a ready-to-publish draft at [`BLOG_DRAFT.md`](./BLOG_DRAFT.md). It is intentionally not presented as published externally.

libretranslator-seo/ci.yml

@@ -0,0 +1,14 @@
+prepare:
+  steps:
+    - name: Install dependencies
+      command: npm ci
+    - name: Run tests
+      command: npm test
+test:
+  steps:
+    - name: Test
+      command: npm test
+run:
+  steps:
+    - name: Run
+      command: npm start

libretranslator-seo/metadata.json

@@ -0,0 +1,10 @@
+{
+  "Workspace": "free",
+  "Links": {
+    "LibreTranslate": "https://libretranslate.com/",
+    "Codesphere CI pipelines": "https://docs.codesphere.com/getting-started/ci-pipelines"
+  },
+  "Categories": ["Application", "SEO", "Translation"],
+  "Contributors": ["OpenAI-Codex"],
+  "Title": "LibreTranslator SEO Webpage Translator"
+}