TrelloTriage LabsInteractive Portfolio

Knowledge System Rendering Test

A diagnostic article that exercises the complete TrelloTriage Markdown rendering pipeline.

Knowledge SystemMarkdownTesting

This is a real end-to-end rendering test for the TrelloTriage Knowledge system.

The article should appear on the public Knowledge index and open at:

/knowledge/knowledge-system-rendering-test/

The page should remain readable without JavaScript. Mermaid diagrams may enhance progressively when JavaScript loads.

1. Basic typography

This paragraph tests normal body text, line length, spacing, and wrapping. It should remain comfortable to read on desktop and mobile screens without becoming excessively wide.

This sentence contains bold text, italic text, and bold italic text.

This sentence includes inline code, a normal HTTPS link, and an abbreviation: HTML.

The abbreviation above should expose its expanded meaning when supported by the renderer.

2. Heading hierarchy

Third-level heading

This section confirms that nested headings are visually distinct without competing with the main article title.

Fourth-level heading

A fourth-level heading should remain readable and should not look like ordinary bold text.

3. Lists

Unordered list

  • Public Knowledge index
  • Permanent article URL
  • Server-rendered prose
  • Sanitized HTML
  • Responsive tables
  • Responsive images
  • Local Mermaid rendering

Ordered list

  1. Copy this Markdown file into the production Knowledge directory.
  2. Copy the matching image asset into the article asset directory.
  3. Refresh /knowledge/.
  4. Open the article.
  5. Verify every section in this document.
  6. Edit this same file and confirm the URL does not change.

4. Block quote

A Markdown file should control the article’s structure, while the Knowledge template and stylesheet control its appearance.

The quote should be visually separated from surrounding paragraphs but remain readable in both light and dark themes.

5. Definition list

Markdown renderer
Converts Markdown source into HTML.
Sanitizer
Removes unsafe elements, attributes, and URL schemes before the HTML is rendered.
Knowledge stylesheet
Applies the TrelloTriage visual system to the article without requiring custom classes inside the Markdown.

6. Code formatting

Inline code should look distinct: knowledge_bp.py.

A fenced Python block should preserve whitespace and scroll horizontally rather than stretching the page:

def public_article_url(slug: str) -> str:
    """Return the permanent public Knowledge URL."""
    return f"/knowledge/{slug}/"


article_url = public_article_url("knowledge-system-rendering-test")
print(article_url)

A plain-text block should also render correctly:

Markdown file
    ↓
Safe renderer
    ↓
Knowledge template
    ↓
Formatted public page

7. Responsive table

Feature Expected behavior Failure signal
Headings Clear hierarchy and spacing Headings look identical or collide
Code blocks Preserve formatting and scroll horizontally Page width expands
Tables Remain readable with responsive overflow Columns leave the viewport
Images Fit article width and preserve aspect ratio Cropping or horizontal overflow
Mermaid Render locally with readable source fallback Blank area or CDN request
Draft handling Drafts remain hidden Draft appears publicly
Editing Same filename keeps the same URL Duplicate page or changed URL

On narrow screens, the table may use a horizontal scrolling container. The entire page itself should not become wider than the viewport.

8. Responsive image

The following image should load from the article’s local asset directory:

Diagnostic image showing three responsive content panels

Expected behavior:

  • meaningful alt text is preserved
  • the image loads from the local site
  • width never exceeds the article container
  • aspect ratio remains correct
  • no horizontal page overflow occurs
  • lazy loading is applied when supported by the rendering pipeline

9. Mermaid flowchart

The diagram source should be readable before Mermaid runs and should remain readable if rendering fails.

flowchart LR
    A[Markdown File] --> B[Frontmatter Parser]
    B --> C[Markdown Renderer]
    C --> D[Mermaid Block Detection]
    D --> E[HTML Sanitizer]
    E --> F[Knowledge Template]
    F --> G[Public Article Page]

Expected behavior:

  • the diagram appears at this exact location
  • the page loads the locally hosted Mermaid bundle
  • no Mermaid CDN request occurs at runtime
  • securityLevel is set to strict
  • article prose remains server-rendered

10. Second Mermaid diagram

This second diagram confirms that multiple Mermaid blocks work independently.

stateDiagram-v2
    [*] --> Draft
    Draft --> Published
    Published --> Draft
    Published --> Updated
    Updated --> Published

A failure in one diagram must not erase the source or prevent the other diagram from rendering.

11. Footnotes

The public Knowledge system uses Markdown files as the article source of truth.1

The article filename is the authoritative public slug.2

12. Horizontal rule

The following line should create a clear section divider:

The content after the divider should retain normal article spacing.

13. Unsafe HTML sanitization test

The following raw HTML is intentionally unsafe and must not execute:

The sanitizer may remove the script entirely or display harmless text, but no alert should appear and no executable script element should remain in the final article HTML.

The following unsafe link must not remain active:

Unsafe JavaScript URL)

The following safe link should remain active:

Safe HTTPS URL

14. Long unbroken content

The following value tests overflow handling:

knowledge-system-rendering-test-abcdefghijklmnopqrstuvwxyz-0123456789-abcdefghijklmnopqrstuvwxyz-0123456789-abcdefghijklmnopqrstuvwxyz-0123456789

It should wrap or scroll within its content container without forcing the full page wider than the viewport.

15. Update-in-place test

After the first successful publication:

  1. Keep the filename exactly:

text knowledge-system-rendering-test.md

  1. Add a sentence beneath this list.
  2. Set the updated field to a later timezone-aware timestamp.
  3. Replace the existing Markdown file.
  4. Refresh the same URL.

Expected result:

  • the public URL remains unchanged
  • no duplicate article appears
  • the edited sentence appears
  • the original publication date remains unchanged
  • the updated date appears separately

16. Verification checklist

The SSH LLM should verify and report:

  • [ ] /knowledge/ returns HTTP 200
  • [ ] this article appears on the Knowledge index
  • [ ] /knowledge/knowledge-system-rendering-test/ returns HTTP 200
  • [ ] title and description render correctly
  • [ ] publication date renders correctly
  • [ ] headings have a clear visual hierarchy
  • [ ] bold, italic, links, and inline code render correctly
  • [ ] unordered and ordered lists render correctly
  • [ ] nested lists render correctly
  • [ ] block quote renders correctly
  • [ ] definition list renders correctly
  • [ ] fenced code blocks preserve whitespace
  • [ ] code blocks do not widen the page
  • [ ] table renders and remains responsive
  • [ ] image loads from the local asset directory
  • [ ] image alt text is present
  • [ ] image remains responsive
  • [ ] both Mermaid diagrams render
  • [ ] Mermaid uses only the local bundle
  • [ ] no external Mermaid network request occurs
  • [ ] Mermaid source is readable before rendering
  • [ ] Mermaid source survives or is restored after a forced render failure
  • [ ] footnotes render and link correctly
  • [ ] abbreviation support works
  • [ ] horizontal rules render correctly
  • [ ] unsafe script content does not execute
  • [ ] unsafe URL scheme is removed or disabled
  • [ ] long content does not break the page width
  • [ ] page remains readable on mobile
  • [ ] article HTML exposes no filesystem paths or tracebacks
  • [ ] application logs contain no new errors

17. Final expected result

If every section works, this article confirms that the Knowledge system can safely and consistently display:

  • ordinary long-form writing
  • structured technical content
  • code
  • tables
  • local images
  • Mermaid diagrams
  • metadata
  • footnotes
  • abbreviations
  • definition lists
  • responsive layouts
  • sanitized user-authored Markdown

This article may be unpublished or removed after testing by changing:

status: "published"

to:

status: "draft"

Changing it to draft should remove it from the public index and make its public article route return HTTP 404 without deleting the Markdown file.

  1. Editing the same Markdown file should update the existing article page. ↩

  2. Renaming the file changes the URL and should be treated as a deliberate action. ↩