Skip to content

fix(seo): render translated content for language pages #256

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ThisIs-Developer merged 1 commit into from
Sep 20, 2026
Merged

fix(seo): render translated content for language pages #256

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 18 additions & 3 deletions assets/seo-metadata.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {
getSeoLocale,
hasSeoLocale
} from '../seo/locales.mjs';
import { localizedWelcomeMarkdown, renderWelcomeHtml } from '../seo/welcome-content.mjs';

function setAttribute(field, attribute, value) {
const element = document.querySelector(`[data-seo-field="${field}"]`);
Expand Down Expand Up @@ -43,6 +44,20 @@ function applyForLanguage(languageCode) {
updateApplicationSchema(locale, canonicalUrl);
}

const requestedLanguage = new URLSearchParams(window.location.search).get('lang');
window.MarkdownViewerSeo = Object.freeze({ applyForLanguage });
applyForLanguage(requestedLanguage && hasSeoLocale(requestedLanguage) ? requestedLanguage : 'en');
function languageFromUrl() {
const requestedLanguage = new URLSearchParams(window.location.search).get('lang');
return requestedLanguage && hasSeoLocale(requestedLanguage) ? requestedLanguage.toLowerCase() : 'en';
}

const initialLanguage = languageFromUrl();
window.MarkdownViewerSeo = Object.freeze({ applyForLanguage, languageFromUrl });
applyForLanguage(initialLanguage);

// Static hosts use the same starter as Pages. Do this only before app startup:
// switching the UI language must never replace an open or saved document.
const preview = document.getElementById('welcome-preview');
if (preview) preview.outerHTML = renderWelcomeHtml(initialLanguage);
const template = document.getElementById('default-markdown');
if (template && initialLanguage !== 'en') {
template.textContent = localizedWelcomeMarkdown(initialLanguage);
}
24 changes: 12 additions & 12 deletions desktop-app/resources/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1638,18 +1638,18 @@ <h3 id="no-open-document-start-title">Quick start</h3>
</div>
<div class="preview-pane" role="region" aria-label="Rendered Markdown live preview">
<div id="markdown-preview" class="markdown-body">
<!-- Initial dynamic article skeleton loader -->
<div class="skeleton-preview-container" id="markdown-preview-skeleton" aria-hidden="true">
<div class="skeleton-placeholder skeleton-title"></div>
<div class="skeleton-placeholder skeleton-line skeleton-w90"></div>
<div class="skeleton-placeholder skeleton-line skeleton-w85"></div>
<div class="skeleton-placeholder skeleton-line skeleton-w60"></div>

<div class="skeleton-placeholder skeleton-subtitle"></div>
<div class="skeleton-placeholder skeleton-line skeleton-w88"></div>
<div class="skeleton-placeholder skeleton-line skeleton-w92"></div>
<div class="skeleton-placeholder skeleton-line skeleton-w45"></div>
</div>
<!-- welcome-preview:start -->
<article id="welcome-preview">
<h2>Welcome to Markdown Viewer</h2>
<p>Write and preview Markdown in your browser without creating an account. Open a local .md or .markdown file, paste text, or import a document from GitHub. The editor and preview sit side by side so you can check formatting as you type.</p>
<h3>Start with a document</h3>
<p>Use New to create a file or open one from your device. Switch between Edit, Split, and Preview in the toolbar. Organize documents into workspaces and folders, and download a Markdown copy to keep a backup.</p>
<h3>Preview and export</h3>
<p>Use GitHub-Flavored Markdown for headings, links, tables, and task lists. Preview highlighted code, LaTeX math, and Mermaid diagrams. Export the result as Markdown, HTML, PDF, or PNG; Share Snapshot and Live Share provide optional sharing.</p>
<h3>Where your content goes</h3>
<p>Ordinary editing and autosave stay on this device. Sharing, GitHub import, external images, and remote diagram rendering use network services. Keep separate backups: clearing browser storage can remove your locally saved documents.</p>
</article>
<!-- welcome-preview:end -->
</div>
</div>
<div id="document-split-divider" class="document-split-divider" role="separator" aria-orientation="vertical" aria-label="Split document divider" hidden></div>
Expand Down
7 changes: 5 additions & 2 deletions desktop-app/resources/js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30726,12 +30726,15 @@ ${selector} .arrowheadPath {

isApplyingUiTranslations = false;
translateUiTree(document.body);
document.title = activeLang === 'en' ? initialDocumentTitle : translateUiString(initialDocumentTitle);
if (window.MarkdownViewerSeo) window.MarkdownViewerSeo.applyForLanguage(lang);
else document.title = activeLang === 'en' ? initialDocumentTitle : translateUiString(initialDocumentTitle);
}

async function detectAndInitLanguage() {
const urlParams = new URLSearchParams(window.location.search);
let lang = urlParams.get('lang');
// Public web URLs have a stable language, including the English root.
// The desktop build retains saved/browser language detection below.
let lang = window.MarkdownViewerSeo?.languageFromUrl() || urlParams.get('lang');

if (!lang) {
const hash = window.location.hash;
Expand Down
24 changes: 12 additions & 12 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1735,18 +1735,18 @@ <h3 id="no-open-document-start-title">Quick start</h3>
</div>
<div class="preview-pane" role="region" aria-label="Rendered Markdown live preview">
<div id="markdown-preview" class="markdown-body">
<!-- Initial dynamic article skeleton loader -->
<div class="skeleton-preview-container" id="markdown-preview-skeleton" aria-hidden="true">
<div class="skeleton-placeholder skeleton-title"></div>
<div class="skeleton-placeholder skeleton-line skeleton-w90"></div>
<div class="skeleton-placeholder skeleton-line skeleton-w85"></div>
<div class="skeleton-placeholder skeleton-line skeleton-w60"></div>

<div class="skeleton-placeholder skeleton-subtitle"></div>
<div class="skeleton-placeholder skeleton-line skeleton-w88"></div>
<div class="skeleton-placeholder skeleton-line skeleton-w92"></div>
<div class="skeleton-placeholder skeleton-line skeleton-w45"></div>
</div>
<!-- welcome-preview:start -->
<article id="welcome-preview">
<h2>Welcome to Markdown Viewer</h2>
<p>Write and preview Markdown in your browser without creating an account. Open a local .md or .markdown file, paste text, or import a document from GitHub. The editor and preview sit side by side so you can check formatting as you type.</p>
<h3>Start with a document</h3>
<p>Use New to create a file or open one from your device. Switch between Edit, Split, and Preview in the toolbar. Organize documents into workspaces and folders, and download a Markdown copy to keep a backup.</p>
<h3>Preview and export</h3>
<p>Use GitHub-Flavored Markdown for headings, links, tables, and task lists. Preview highlighted code, LaTeX math, and Mermaid diagrams. Export the result as Markdown, HTML, PDF, or PNG; Share Snapshot and Live Share provide optional sharing.</p>
<h3>Where your content goes</h3>
<p>Ordinary editing and autosave stay on this device. Sharing, GitHub import, external images, and remote diagram rendering use network services. Keep separate backups: clearing browser storage can remove your locally saved documents.</p>
</article>
<!-- welcome-preview:end -->
</div>
</div>
<div id="document-split-divider" class="document-split-divider" role="separator" aria-orientation="vertical" aria-label="Split document divider" hidden></div>
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
"build": "npm run check:static && npm run check:seo",
"check:static": "node tests/helpers/static-build-check.mjs",
"check:seo": "node seo/generate-sitemap.mjs --check",
"audit:seo": "node seo/audit-live.mjs",
"seo:sitemap": "node seo/generate-sitemap.mjs",
"test": "npm run build && npm run test:e2e",
"test:install": "playwright install chromium firefox webkit",
Expand Down
7 changes: 5 additions & 2 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30726,12 +30726,15 @@ ${selector} .arrowheadPath {

isApplyingUiTranslations = false;
translateUiTree(document.body);
document.title = activeLang === 'en' ? initialDocumentTitle : translateUiString(initialDocumentTitle);
if (window.MarkdownViewerSeo) window.MarkdownViewerSeo.applyForLanguage(lang);
else document.title = activeLang === 'en' ? initialDocumentTitle : translateUiString(initialDocumentTitle);
}

async function detectAndInitLanguage() {
const urlParams = new URLSearchParams(window.location.search);
let lang = urlParams.get('lang');
// Public web URLs have a stable language, including the English root.
// The desktop build retains saved/browser language detection below.
let lang = window.MarkdownViewerSeo?.languageFromUrl() || urlParams.get('lang');

if (!lang) {
const hash = window.location.hash;
Expand Down
Loading
Loading