feat: add copyright

src/plugins/backgrounds/apod/Apod.sass

@@ -0,0 +1,16 @@
+.Apod
+    .picture
+        background-position: 50% 50%
+        background-size: cover
+        transition: opacity 0.25s ease-out
+
+    .title
+        display: flex
+        flex-direction: column
+        position: absolute
+        bottom: 1rem
+        left: 1rem
+        right: 1rem
+
+        p
+            margin: 4px 0 0

src/plugins/backgrounds/apod/Apod.tsx

@@ -5,6 +5,7 @@ import Backdrop from "../../../views/shared/Backdrop";
 import { defaultData, Props } from "./types";
 import { getPicture } from "./api";
 import ApodTitle from "./ApodTitle";
+import "./Apod.sass";
 
 const Unsplash: React.FC<Props> = ({
   cache,
@@ -14,27 +15,34 @@ const Unsplash: React.FC<Props> = ({
 }) => {
   const [picture, setPicture] = React.useState(cache);
   const mounted = React.useRef(false);
+
   React.useEffect(() => {
     getPicture(data, loader).then(setCache);
     if (mounted.current || !picture) getPicture(data, loader).then(setPicture);
     mounted.current = true;
   }, [data.customDate, data.date]);
 
   return (
-    <div className="Unsplash fullscreen">
+    <div className="Apod fullscreen">
       <Backdrop
-        className="image fullscreen"
-        ready={true}
+        className="picture fullscreen"
+        ready={
+          !!(picture?.media_type === "image"
+            ? picture?.hdurl || picture?.url
+            : picture?.thumbnail_url)
+        }
         style={{
           backgroundImage: `url(${
             picture?.media_type === "image"
-              ? picture?.hdurl
+              ? picture?.hdurl || picture?.url
               : picture?.thumbnail_url
           })`,
         }}
       />
 
-      {picture && data.showTitle && <ApodTitle title={picture.title} />}
+      {picture && data.showTitle && (
+        <ApodTitle title={picture.title} copyright={picture.copyright} />
+      )}
     </div>
   );
 };

src/plugins/backgrounds/apod/ApodSettings.sass

@@ -1,3 +1,3 @@
 .ApodSettings
     .date
-        margin-left: 4px;
+        margin-left: 4px

src/plugins/backgrounds/apod/ApodTitle.tsx

@@ -1,13 +1,12 @@
 import React from "react";
-import giphyLogo from "./giphy-logo.png";
+import { Image } from "./types";
 
-type Props = {
-  title?: string;
-};
+type Props = Pick<Image, "title" | "copyright">;
 
-const Credit: React.FC<Props> = ({ title }) => (
-  <div className="credit">
-    <span>{title}</span>
+const Credit: React.FC<Props> = ({ title, copyright }) => (
+  <div className="title">
+    <p>{title}</p>
+    {copyright && <p>&copy; {copyright}</p>}
   </div>
 );
 

src/plugins/backgrounds/apod/api.ts

@@ -12,8 +12,6 @@ export async function getPicture(
   data: Config,
   loader: API["loader"],
 ): Promise<Image> {
-  console.log("in getPicture");
-
   const url = "https://api.nasa.gov/planetary/apod";
   const params = new URLSearchParams();
 

src/plugins/backgrounds/apod/types.ts

@@ -17,6 +17,7 @@ export interface Image {
   media_type: string;
   explanation: string;
   thumbnail_url: string;
+  copyright: string;
 }
 
 type Cache = Image;