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

[trevor-coleman]

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/<project-name>

   ~
   ├── src
   │   └── ...
   └── docs
       └── static
           ├── img
           │   ├── project-logo.png
           │   ├── [email protected]
           │   └── ...
           └── ...
   

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

   // ~/docs/_category_.json (in project)
   
   {
     "customProps": {
       "card": "img/project-logo.png"
       "banner": "img/[email protected]"
       // ...
     }
   // ...
   }

3. the custom-homepage-plugin (A.K.A. /plugins/homepage-items-plugin.js😬) reads the paths fromcategory.jsonand adapts them to their-docs` directory structure.

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

4. Components consume this via the docusaurus context.