infinitered / infinitered/ir-docs

Add support for images -- logo/thumbnail for cards on home page. Banner for intro to docs.

Open
#30 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
CSS
Stars
27
Forks
6
PR merge metrics
No merged PRs in 30d

Description

### Summary
- Add image previews to cards to reinforce the project brand

### Things to decide
- which image assets are needed from each project
- standard size would be best -- i.e card preview is 300x200, banner is 1600x900 or whatever
- standard / fallback assets for projects when preferred assets aren't available or are in the wrong place

### Technical Implementation

1. projects place their images in their `static` folder. These will be copied into `~/static/`
```
~
├── src
│ └── ...
└── docs
└── static
├── img
│ ├── project-logo.png
│ ├── project-banner@2x.jpg
│ └── ...
└── ...
```

2. the path of the image file is added as a prop to `customProps` in the `_category_.json`

```js
// ~/docs/_category_.json (in project)

{
"customProps": {
"card": "img/project-logo.png"
"banner": "img/project-banner@2x.jpg"
// ...
}
// ...
}
````

3. the `custom-homepage-plugin` (A.K.A. /plugins/homepage-items-plugin.js` 😬) reads the paths from `_category_.json` and adapts them to the `ir-docs` directory structure.

```js
'img/project-logo.png' => `/${projectName}/img/project-logo.png`

4. Components consume this via the docusaurus context.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with /plugins/homepage-items-plugin.js and inspect how _category_.json customProps are read and how homepage components consume the Docusaurus context. Define the card and banner asset conventions, fallback behavior, and project-relative paths; done means project images are available at the adapted //img/... locations and render on the home page and docs intro.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.