docs: add real screenshots, full feature pages, i18n (en/es), gallery… by BrewertonSantos · Pull Request #5 · DistTopic/disttopic.github.io

BrewertonSantos · 2026-03-29T04:23:38Z

…, lightbox, menu navigation guides

Copilot

Pull request overview

This PR expands the MkDocs Material site with full project documentation pages (overview/features/formats/requirements/WIP), adds a screenshot gallery with a JS lightbox, and introduces multi-language builds via mkdocs-static-i18n (pt-BR default, plus en/es).

Changes:

Add mkdocs-static-i18n and configure MkDocs for pt-BR/en/es builds with translated nav labels.
Replace the single project page with a structured documentation tree (overview + feature subpages + formats/requirements/WIP + gallery) including translated variants.
Add a gallery layout + native <dialog> lightbox JS and new custom CSS.

Reviewed changes

Copilot reviewed 37 out of 48 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
requirements.txt	Add `mkdocs-static-i18n` dependency.
mkdocs.yml	Configure i18n/search langs, update theme language/palette, restructure nav, add custom CSS + lightbox JS.
docs/projects/index.md	Update project link to new docs structure.
docs/projects/assets-and-map-editor/wip.md	Add pt-BR “Work in Progress” page.
docs/projects/assets-and-map-editor/wip.es.md	Add ES “Work in Progress” page.
docs/projects/assets-and-map-editor/wip.en.md	Add EN “Work in Progress” page.
docs/projects/assets-and-map-editor/requirements.md	Add pt-BR system requirements page.
docs/projects/assets-and-map-editor/requirements.es.md	Add ES system requirements page.
docs/projects/assets-and-map-editor/requirements.en.md	Add EN system requirements page.
docs/projects/assets-and-map-editor/index.md	Add pt-BR project overview landing page.
docs/projects/assets-and-map-editor/index.es.md	Add ES project overview landing page.
docs/projects/assets-and-map-editor/index.en.md	Add EN project overview landing page.
docs/projects/assets-and-map-editor/gallery.md	Add pt-BR screenshot gallery page (HTML grid + lightbox hooks).
docs/projects/assets-and-map-editor/gallery.es.md	Add ES screenshot gallery page.
docs/projects/assets-and-map-editor/gallery.en.md	Add EN screenshot gallery page.
docs/projects/assets-and-map-editor/formats.md	Add pt-BR compatible versions/formats page.
docs/projects/assets-and-map-editor/formats.es.md	Add ES compatible versions/formats page.
docs/projects/assets-and-map-editor/formats.en.md	Add EN compatible versions/formats page.
docs/projects/assets-and-map-editor/features.md	Add pt-BR features hub page (cards).
docs/projects/assets-and-map-editor/features.es.md	Add ES features hub page.
docs/projects/assets-and-map-editor/features.en.md	Add EN features hub page.
docs/projects/assets-and-map-editor/features-sprites.md	Add pt-BR sprites feature detail page.
docs/projects/assets-and-map-editor/features-sprites.es.md	Add ES sprites feature detail page.
docs/projects/assets-and-map-editor/features-sprites.en.md	Add EN sprites feature detail page.
docs/projects/assets-and-map-editor/features-maps.md	Add pt-BR maps feature detail page.
docs/projects/assets-and-map-editor/features-maps.es.md	Add ES maps feature detail page.
docs/projects/assets-and-map-editor/features-maps.en.md	Add EN maps feature detail page.
docs/projects/assets-and-map-editor/features-items.md	Add pt-BR items/OTB feature detail page.
docs/projects/assets-and-map-editor/features-items.es.md	Add ES items/OTB feature detail page.
docs/projects/assets-and-map-editor/features-items.en.md	Add EN items/OTB feature detail page.
docs/projects/assets-and-map-editor/features-interface.md	Add pt-BR UI/menu navigation guide page.
docs/projects/assets-and-map-editor/features-interface.es.md	Add ES UI/menu navigation guide page.
docs/projects/assets-and-map-editor/features-interface.en.md	Add EN UI/menu navigation guide page.
docs/projects/assets-and-map-editor.md	Remove old single-page project doc (replaced by new tree).
docs/index.md	Update “Documentation” link to new overview page path.
docs/assets/js/lightbox.js	Add `<dialog>`-based lightbox for gallery items.
docs/assets/images/screenshots/editor-menu-file.png	Add screenshot asset.
docs/assets/images/screenshots/editor-menu-edit.png	Add screenshot asset.
docs/assets/css/github-dark.css	Add language selector styling (note: stylesheet appears no longer referenced).
docs/assets/css/custom.css	Add custom theme tweaks, gallery grid styling, lightbox styles, and table overrides.
.gitignore	Ignore MkDocs output (`site/`) and Python venv (`.venv/`).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-29T04:29:02Z

docs/projects/assets-and-map-editor/gallery.md

+</div>
+<figcaption>
+<strong>Visualizador de Mapa OTBM</strong>
+<span>Mapa top-down com terrenos e tiles. Painel lateral de navegação e propredidades.</span>


Typo: "propredidades" → "propriedades".

Copilot · 2026-03-29T04:29:03Z

docs/projects/assets-and-map-editor/requirements.es.md

+!!! tip "Sin instalación necesaria"
+    Solo descarga y ejecuta. No es necesario instalar ninguna versión de .NET en el sistema.
+
+Visita la [página de releases](https://github.com/DistTopic/assets-and-map-editor/releases) para todos los descargas disponibles.


Spanish grammar: "para todos los descargas disponibles" should be "para todas las descargas disponibles".

Copilot · 2026-03-29T04:29:03Z

mkdocs.yml

+          nav_translations:
+            Início: Home
+            Projetos: Projects
+            Documentação: Documentation
+            Visão Geral: Overview


nav_translations includes keys (e.g., "Documentação") that don't exist in the current nav:. Keeping this mapping in sync with the actual nav labels will make future maintenance easier (and avoids the impression that a nav section is missing).

Copilot · 2026-03-29T04:29:03Z

mkdocs.yml

+        - locale: pt-BR
+          name: Português (BR)
+          build: true
+          default: true
+        - locale: en


docs_structure: suffix + default: true for pt-BR means the non-suffixed docs (e.g., docs/index.md, docs/guides/*) are treated as pt-BR content. Those pages are currently English, so the language switcher/fallback behavior will be confusing (pt-BR UI + English content, and EN/ES may fall back to “pt-BR” pages that are actually English). Consider either making en the default locale (and set Material theme.language accordingly) or translating the non-suffixed docs into pt-BR and adding .en.md/.es.md variants as needed.

Copilot · 2026-03-29T04:29:03Z

docs/assets/js/lightbox.js

+    dlg.innerHTML =
+      '<div class="lb-wrap">' +
+        '<button type="button" class="lb-close" aria-label="Fechar">\u00D7</button>' +


The lightbox close button uses a hard-coded Portuguese aria-label ("Fechar"). Since this runs on EN/ES pages too, screen readers will announce the wrong language. Consider deriving the label from document.documentElement.lang (or using a language-neutral label) so it matches the selected locale.

Suggested change

dlg.innerHTML =

'<div class="lb-wrap">' +

'<button type="button" class="lb-close" aria-label="Fechar">\u00D7</button>' +

var docLang = (document.documentElement && document.documentElement.lang || '').toLowerCase();

var baseLang = docLang.split('-')[0];

var closeLabelMap = {

pt: 'Fechar',

es: 'Cerrar',

en: 'Close'

};

var closeLabel = closeLabelMap[docLang] || closeLabelMap[baseLang] || 'Close';

dlg.innerHTML =

'<div class="lb-wrap">' +

'<button type="button" class="lb-close" aria-label="' + closeLabel + '">\u00D7</button>' +

Copilot · 2026-03-29T04:29:04Z

docs/assets/css/custom.css

+/* ── Gallery grid ─────────────────────────────────────────────── */
+.gallery-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));


grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); can force horizontal overflow on narrow viewports (<340px). Consider lowering the minimum or using a responsive clamp (e.g., minmax(min(340px, 100%), 1fr)) so the gallery stays usable on small screens.

Suggested change

grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));

grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));

Copilot · 2026-03-29T04:29:04Z

docs/assets/css/github-dark.css

+/* Language picker dropdown */
+.md-select__inner {
+  background-color: var(--gh-canvas-subtle) !important;
+  border: 1px solid var(--gh-border) !important;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
+}
+
+.md-select__link {
+  color: var(--gh-fg-muted) !important;
+}
+
+.md-select__link:hover,
+.md-select__link--active {
+  color: var(--gh-blue) !important;
+  background-color: var(--gh-blue-muted) !important;
+}
+


The new “Language selector” styles in this file appear unused: mkdocs.yml no longer includes assets/css/github-dark.css under extra_css (it references assets/css/custom.css instead). If these styles are still needed, add this stylesheet back in mkdocs.yml; otherwise consider moving the relevant rules into custom.css or removing this block to avoid dead CSS.

Suggested change

/* Language picker dropdown */

.md-select__inner {

background-color: var(--gh-canvas-subtle) !important;

border: 1px solid var(--gh-border) !important;

box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;

}

.md-select__link {

color: var(--gh-fg-muted) !important;

}

.md-select__link:hover,

.md-select__link--active {

color: var(--gh-blue) !important;

background-color: var(--gh-blue-muted) !important;

}

docs: add real screenshots, full feature pages, i18n (en/es), gallery…

e7f3a24

…, lightbox, menu navigation guides

Copilot AI review requested due to automatic review settings March 29, 2026 04:23

BrewertonSantos self-assigned this Mar 29, 2026

BrewertonSantos added documentation Improvements or additions to documentation enhancement New feature or request labels Mar 29, 2026

Copilot started reviewing on behalf of BrewertonSantos March 29, 2026 04:24 View session

BrewertonSantos assigned BrewertonSantos and Copilot and unassigned BrewertonSantos Mar 29, 2026

BrewertonSantos merged commit 148ba97 into main Mar 29, 2026
3 checks passed

BrewertonSantos deleted the feature/real-screenshots-full-docs branch March 29, 2026 04:27

Copilot AI reviewed Mar 29, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs: add real screenshots, full feature pages, i18n (en/es), gallery…#5

docs: add real screenshots, full feature pages, i18n (en/es), gallery…#5
BrewertonSantos merged 1 commit intomainfrom
feature/real-screenshots-full-docs

BrewertonSantos commented Mar 29, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 29, 2026

Uh oh!

Copilot AI Mar 29, 2026

Uh oh!

Copilot AI Mar 29, 2026

Uh oh!

Copilot AI Mar 29, 2026

Uh oh!

Copilot AI Mar 29, 2026

Uh oh!

Copilot AI Mar 29, 2026

Uh oh!

Copilot AI Mar 29, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

-    dlg.innerHTML =
-      '<div class="lb-wrap">' +
-        '<button type="button" class="lb-close" aria-label="Fechar">\u00D7</button>' +
+    var docLang = (document.documentElement && document.documentElement.lang || '').toLowerCase();
+    var baseLang = docLang.split('-')[0];
+    var closeLabelMap = {
+      pt: 'Fechar',
+      es: 'Cerrar',
+      en: 'Close'
+    };
+    var closeLabel = closeLabelMap[docLang] || closeLabelMap[baseLang] || 'Close';
+    dlg.innerHTML =
+      '<div class="lb-wrap">' +
+        '<button type="button" class="lb-close" aria-label="' + closeLabel + '">\u00D7</button>' +

	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));

Conversation

BrewertonSantos commented Mar 29, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 29, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 29, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 29, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 29, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 29, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 29, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 29, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants