pridaná generovaná navigácia z H1–H3 s unikátnymi ID,
pridaný responzívny panel a ukladanie stavu podľa URL, pridané verzovanie CSS a JS pomocou MD5 hashov, aktualizovaná dokumentácia
This commit is contained in:
@@ -3,25 +3,35 @@
|
||||
## Purpose
|
||||
This project is a small Markdown-to-HTML utility used behind NGINX.
|
||||
When a `.md` file is requested, `src/md2html.php` loads the Markdown, converts it with Parsedown, and renders HTML styled by `src/markdown.css`.
|
||||
`src/toc.js` builds an interactive table of contents from the rendered headings.
|
||||
|
||||
## Key Files
|
||||
- `src/md2html.php`: entrypoint for conversion and HTML output.
|
||||
- `src/markdown.css`: visual styling for rendered Markdown (`.markdown-body`).
|
||||
- `src/toc.js`: vanilla JavaScript for the table of contents and per-document panel state.
|
||||
- `composer.json`: PHP dependency config (`erusev/parsedown`).
|
||||
- `tests/fixtures/toc.md`: Markdown regression fixture.
|
||||
- `tests/render.php`: checks PHP output and exports heading data for JS tests.
|
||||
- `tests/toc.test.cjs`: Node.js tests using DOM doubles, without a browser.
|
||||
- `tests/run.ps1`: PowerShell runner for PHP and JS integration checks.
|
||||
|
||||
## Environment Assumptions
|
||||
- Project root: `D:\www\md2html`
|
||||
- Markdown files are resolved from `D:\www\...`
|
||||
- CSS is currently linked as `//localhost/md2html/src/markdown.css`
|
||||
- CSS and JS are linked under `//localhost/md2html/src/` with `?h=<MD5 of file contents>`.
|
||||
- NGINX forwards Markdown requests to `$document_root/md2html/src/md2html.php`; see README.md.
|
||||
|
||||
## Change Priorities
|
||||
1. Keep output readable on desktop and mobile.
|
||||
2. Preserve Markdown semantics generated by Parsedown.
|
||||
3. Avoid introducing JS unless explicitly required.
|
||||
3. Keep JavaScript in `src/toc.js`, use vanilla JavaScript, and avoid unnecessary dependencies.
|
||||
4. Keep the utility simple and fast.
|
||||
|
||||
## Styling Rules (`src/markdown.css`)
|
||||
- Style only inside `.markdown-body` unless there is a strong reason to change global page behavior.
|
||||
- Navigation is outside `.markdown-body`; scope its styles to `.md2html-toc*` and `.md2html-document` where possible.
|
||||
- At widths above 760px, the open panel must leave space for the document; at smaller widths, use a dismissible overlay.
|
||||
- Keep the toggle fixed and available, the panel independently scrollable, and reduced-motion preferences respected.
|
||||
- Must cover: headings, links, lists, blockquotes, inline code, code blocks, tables, images, hr.
|
||||
- Keep strong contrast and accessible font sizes.
|
||||
- Ensure long code lines and wide tables remain usable on small screens (`overflow-x`).
|
||||
@@ -29,20 +39,32 @@ When a `.md` file is requested, `src/md2html.php` loads the Markdown, converts i
|
||||
|
||||
## PHP Rules (`src/md2html.php`)
|
||||
- Keep dependency loading via the project root's `vendor/autoload.php`, resolved relative to the entrypoint directory.
|
||||
- Keep response minimal: `<!doctype html>`, UTF-8 meta, stylesheet link, wrapped content.
|
||||
- Keep response minimal: `<!doctype html>`, UTF-8 and viewport meta, stylesheet link, deferred script, navigation controls, and wrapped content.
|
||||
- Keep CSS and JS URLs versioned using `md5_file()` on paths relative to `__DIR__`.
|
||||
- Do not assign anonymous functions or closures to PHP variables; use named functions or class methods.
|
||||
- Output helpers should return rendered content for callers to consume.
|
||||
- Do not remove `.md` extension guard.
|
||||
- Any path-handling changes must remain compatible with Windows paths.
|
||||
|
||||
## Recommended Validation After Edits
|
||||
1. Open at least one Markdown file with:
|
||||
- headings (`#`, `##`, `###`)
|
||||
- lists
|
||||
- fenced code block
|
||||
- table
|
||||
- blockquote
|
||||
- image
|
||||
2. Verify layout on desktop and mobile width.
|
||||
3. Verify links and code blocks remain readable.
|
||||
## Table of Contents Rules (`src/toc.js`)
|
||||
- Build navigation from rendered H1–H3 in `.markdown-body`, preserving order and indicating levels with indentation. Do not add a Markdown parser.
|
||||
- Keep existing unique IDs, generate collision-free IDs for other headings, and retain native anchor navigation.
|
||||
- Use DOM creation and `textContent` for heading labels; do not insert untrusted content through `innerHTML`.
|
||||
- Default to closed. Store panel state under `md2html:toc:` + pathname + query string, excluding the fragment.
|
||||
- Handle unavailable localStorage without disabling navigation.
|
||||
- Maintain ARIA state, keyboard access, Escape dismissal, mobile close controls, and readable output without JavaScript.
|
||||
|
||||
## Validation After Edits
|
||||
- Never use a browser or browser automation. Leave visual browser verification to Igor; use non-browser checks instead.
|
||||
- Run relevant checks from the project root:
|
||||
- `php -l src/md2html.php`
|
||||
- `php -l tests/render.php` when changing the PHP test helper.
|
||||
- `node --check src/toc.js`
|
||||
- `./tests/run.ps1`
|
||||
- `git diff --check`
|
||||
- Tests require PHP with DOM, Composer dependencies, and Node.js supporting `node:test` and `--test-isolation=none`.
|
||||
- Keep regression coverage for heading levels, formatting, code fences, duplicate and existing anchors, Unicode, empty and long contents, URL-specific state, blocked storage, mobile dismissal, asset hashes, and the `.md` guard.
|
||||
- DOM doubles do not verify actual layout or scrolling. Igor manually checks desktop/mobile layout, long-panel scrolling, anchor navigation, and readability of Markdown elements.
|
||||
|
||||
## Non-Goals
|
||||
- Building a full CMS.
|
||||
|
||||
Reference in New Issue
Block a user