Add placeholder exhibit icon

binder/jupyter_gallery_config.json

@@ -27,6 +27,15 @@
         "homepage": "https://github.com/amueller/scipy-2018-sklearn",
         "title": "Scikit-learn Tutorial 2018",
         "description": "SciPy 2018 Scikit-learn Tutorial"
+      },
+      {
+        "git": "https://github.com/jupyter-widgets/tutorial.git",
+        "title": "Example without description"
+      },
+      {
+        "git": "https://gitlab.gnome.org/GNOME/atomix.git",
+        "title": "GNOME atomix",
+        "description": "Example without icon"
       }
     ]
   }

src/gallery.tsx

@@ -13,6 +13,7 @@ import { TranslationBundle } from '@jupyterlab/translation';
 import { IExhibit } from './types';
 import { IExhibitReply } from './types';
 import { requestAPI, eventStream, IStreamMessage, IProgress } from './handler';
+import { repositoryIcon } from './icons';
 
 interface IActions {
   download(exhibit: IExhibit): Promise<void>;
@@ -233,7 +234,11 @@ function Exhibit(props: {
       <h4 className="jp-Exhibit-title">{exhibit.title}</h4>
       <div className="jp-Exhibit-middle">
         <div className="jp-Exhibit-icon">
-          <img src={exhibit.icon} alt={exhibit.title} />
+          {exhibit.icon ? (
+            <img src={exhibit.icon} alt={exhibit.title} />
+          ) : (
+            <repositoryIcon.react className="jp-exhibitPlaceholder" />
+          )}
         </div>
         <div className="jp-Exhibit-buttons">
           {!exhibit.isCloned ? (

src/icons.ts

@@ -1,7 +1,13 @@
 import { LabIcon } from '@jupyterlab/ui-components';
 import gallerySvgstr from '../style/icons/md/gallery.svg';
+import repositorySvgstr from '../style/icons/md/repository.svg';
 
 export const galleryIcon = new LabIcon({
   name: 'jupyterlab-gallery:gallery',
   svgstr: gallerySvgstr
 });
+
+export const repositoryIcon = new LabIcon({
+  name: 'jupyterlab-gallery:repository',
+  svgstr: repositorySvgstr
+});

style/base.css

@@ -38,10 +38,20 @@
   cursor: default;
 }
 
-.jp-Exhibit-icon > img {
+.jp-Exhibit-icon > img,
+.jp-Exhibit-icon > .jp-exhibitPlaceholder > svg {
   max-width: 100%;
 }
 
+.jp-Exhibit-icon > .jp-exhibitPlaceholder > svg {
+  max-width: 100%;
+  block-size: 100%;
+}
+
+.jp-exhibitPlaceholder {
+  height: 100%;
+}
+
 .jp-Exhibit-icon {
   display: flex;
   justify-content: center;