Store images on the repo

README.md

@@ -17,6 +17,7 @@ This is a gallery of [Voici](https://github.com/voila-dashboards/voici) examples
    - `branch`: the branch to be checked out from `repo_url` repository, default to `main`.
    - `dashboard_url`: the URL of the deployed voici dashboard. If the voici dashboard is already deployed elsewhere you can use this field to bypass the build step. If you use this option, you do not need to provide the `repo_url`, `content_path` and the `branch` field.
    - `image_url`: the URL of the picture to use as thumbnail.
+   - `image_path`: alternate way to provide your thumbnail image, by adding it to the `public/images` directory on this repository and providing the path in this parameter.
 3. Once the PR is merged into `main`, the gallery is automatically redeployed and the new example will be visible shortly after.
 
 ## Development

script/gallery.yaml

@@ -2,7 +2,7 @@
   description: A simple Voici demo using bqplot and ipywidgets
   content_path: content/demo.ipynb
   repo_url: https://github.com/voila-dashboards/voici-demo
-  image_url: https://private-user-images.githubusercontent.com/21197331/286634630-07e1a426-78d6-4885-92bb-0678674111be.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTEiLCJleHAiOjE3MDEyNjk2NjIsIm5iZiI6MTcwMTI2OTM2MiwicGF0aCI6Ii8yMTE5NzMzMS8yODY2MzQ2MzAtMDdlMWE0MjYtNzhkNi00ODg1LTkyYmItMDY3ODY3NDExMWJlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFJV05KWUFYNENTVkVINTNBJTJGMjAyMzExMjklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjMxMTI5VDE0NDkyMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTBjY2JjMjk0NzlhNDZjYjkzODdjYzQ4YWFhMTBlMzZjNTFmZDQ2NzgyZWZkNmNjZjg3OTAxOTc3OWQwODhlMzUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.HqsMLfvKzXl_6gybreSzS1oZ8mrwni1YEjSpXLAcacc
+  image_path: voici-demo.png
 
 - title: stock-dashboard
   description: SP500 stock dashboard

src/GalleryItem.tsx

@@ -10,6 +10,7 @@ export interface IGalleryItemProps {
   title: string;
   repo_url: string;
   dashboard_url: string;
+  image_path?: string;
   image_url?: string;
   description?: string;
 }
@@ -32,7 +33,7 @@ export function GalleryItem(props: IGalleryItemProps) {
     >
       <CardMedia
         sx={{ height: 175, backgroundSize: 'contain', cursor: 'pointer' }}
-        image={props.image_url ?? ''}
+        image={props.image_path ? `./images/${props.image_path}` : props.image_url ?? ''}
         title={props.title}
         onClick={openNewTab}
       />