Add styling, attribution, error handling

src/index.ts

@@ -31,6 +31,7 @@ const plugin: JupyterFrontEndPlugin<void> = {
     const newWidget = async () => {
       // Create a blank content widget inside of a MainAreaWidget
       const content = new Widget();
+      content.addClass('my-apodWidget');
       const widget = new MainAreaWidget({ content });
       widget.id = 'apod-jupyterlab';
       widget.title.label = 'Astronomy Picture';
@@ -40,6 +41,9 @@ const plugin: JupyterFrontEndPlugin<void> = {
       let img = document.createElement('img');
       content.node.appendChild(img);
 
+      let summary = document.createElement('p');
+      content.node.appendChild(summary);
+
       // Get a random date string in YYYY-MM-DD format
       function randomDate() {
         const start = new Date(2010, 1, 1);
@@ -50,15 +54,29 @@ const plugin: JupyterFrontEndPlugin<void> = {
 
       // Fetch info about a random picture
       const response = await fetch(`https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY&date=${randomDate()}`);
-      const data = await response.json() as APODResponse;
-
-      if (data.media_type === 'image') {
-        // Populate the image
-        img.src = data.url;
-        img.title = data.title;
+      if (!response.ok) {
+        const data = await response.json();
+        if (data.error) {
+          summary.innerText = data.error.message;
+        } else {
+          summary.innerText = response.statusText;
+        }
       } else {
-        console.log('Random APOD was not a picture.');
+        const data = await response.json() as APODResponse;
+
+        if (data.media_type === 'image') {
+          // Populate the image
+          img.src = data.url;
+          img.title = data.title;
+          summary.innerText = data.title;
+          if (data.copyright) {
+            summary.innerText += ` (Copyright ${data.copyright})`;
+          }
+        } else {
+          summary.innerText = 'Random APOD fetched was not an image.';
+        }
       }
+
       return widget;
     }
     let widget = await newWidget();

style/base.css

@@ -3,3 +3,9 @@
 
     https://jupyterlab.readthedocs.io/en/stable/developer/css.html
 */
+.my-apodWidget {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow: auto;
+  }