containers / containers/podman.io
[Bug]: ArticleCard uses browser-only DOM API during server-side rendering
- Dominant language
- TypeScript
- Stars
- 108
- Forks
- 188
- Avg merge
- 9d 15h
- Merged PRs (30d)
- 11
Description
### Consisely describe the issue
ArticleCard currently processes the HTML passed to its title and subtitle props using a sanitizeHtml function that calls document.createElement() during component rendering.
Since document is only available in a browser environment, this makes ArticleCard dependent on browser-specific APIs during rendering. Docusaurus can render the component in its server/static rendering environment, where document is unavailable.
This makes ArticleCard unsafe to render in Docusaurus's non-browser rendering environment.
SCOPE: ArticleCard is a shared component used across multiple parts of the Podman website to display article and blog content. Because the browser-only DOM operation happens during the component's render path, the issue is not isolated to a single page.
### Upload screenshots or screen recordings
I reproduced this by creating a minimal page that directly renders ArticleCard and running yarn build. The client compilation succeeds, but Docusaurus fails while server-side rendering the test page. The failure occurs when ArticleCard attempts to access document.
Proposed Fix: Replace the DOM-based HTML-to-text conversion in ArticleCard with an SSR-safe conversion that does not rely on browser-specific APIs such as document.
The HTML contained in the title and subtitle props should be converted to plain text using the existing html-react-parser dependency and then rendered normally. This keeps the conversion available during both browser and Docusaurus server/static rendering.
The existing ArticleCard layout, truncation behavior, and displayed content should remain unchanged. The change should be limited to removing the browser DOM dependency from the text-conversion step.
### LLM Policy
- [x] This issue is human-written, and folow up comments will also be human-written
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by locating the ArticleCard component and inspect the sanitizeHtml call in its render path, along with the existing html-react-parser dependency. Run yarn build with a page that renders ArticleCard to reproduce the Docusaurus server-rendering failure; done means the build succeeds without document while the layout, truncation, and displayed content remain unchanged.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100