Add in Custom Backgrounds and update Readme.md

README.md

@@ -189,6 +189,18 @@ Contributions are welcome! Here are some ways you can contribute:
 - Enhance SVG designs
 - Add animations or effects
 
+## 🙌 Contributors
+
+Here is a list of everyone who has contributed to the Octocanvas!
+- [thelonewolf39](https://github.com/thelonewolf39)
+- [MV Karan](https://github.com/mvkaran)
+- [Jessica Deen](https://github.com/jldeen)
+- [Damian Brady](https://github.com/Damovisa)
+- [Mike Perrotti](https://github.com/mperrotti)
+- [Zack Koppert](https://github.com/zkoppert)
+- [Katie Langerman](https://github.com/langermank)
+
+
 ## License 
 
 This project is licensed under the terms of the MIT open source license. Please refer to the [LICENSE](./LICENSE) file for the full terms.

astro.config.mjs

@@ -22,4 +22,9 @@ export default defineConfig({
     tailwind(),
     preact({ compat: true })
   ],
+
+  // Disable dev toolbar to fix axobject-query error
+  devToolbar: {
+    enabled: false
+  },
 });

src/components/GitHubWallpaperApp.module.css

@@ -95,6 +95,12 @@
   border-top: none; /* Connect visually with tabs */
 }
 
+/* File upload label styling */
+.FileUploadLabel {
+  display: block;
+  cursor: pointer;
+}
+
 @media (min-width: 640px) {
   .PreviewArea {
     padding: var(--space-2xl);

src/components/GitHubWallpaperApp.tsx

@@ -59,11 +59,14 @@ const getCleanUsername = (username: string) =>
 
 // Background theme configurations for wallpaper
 const BACKGROUND_THEMES = {
-  "github-universe-green": { label: "GitHub Universe Green" },
-  "github-universe-blue": { label: "GitHub Universe Blue" },
-  "universe-octocanvas": { label: "Universe Octocanvas" },
-  "github-dark": { label: "GitHub Dark" },
-};
+  "github-universe-green": { label: "GitHub Universe Green", type: "gradient" },
+  "github-universe-blue": { label: "GitHub Universe Blue", type: "gradient" },
+  "universe-octocanvas": { label: "Universe Octocanvas", type: "gradient" },
+  "github-dark": { label: "GitHub Dark", type: "gradient" },
+  "bg-images": { label: "Background Image 1", type: "image", imagePath: "/backgrounds/images.png" },
+  "bg-wallpaper": { label: "Background Image 2", type: "image", imagePath: "/backgrounds/wallpaper_footer_4KUHD_16_9.webp" },
+  "custom": { label: "Custom Upload", type: "image" },
+} as const;
 
 // Avatar filter options
 const AVATAR_FILTERS = {
@@ -86,6 +89,7 @@ export default function GitHubWallpaperApp() {
   >("github-universe-green");
   const [wallpaperAvatarFilter, setWallpaperAvatarFilter] =
     useState<keyof typeof AVATAR_FILTERS>("grayscale");
+  const [customBackgroundUrl, setCustomBackgroundUrl] = useState<string>("");
 
   // Devemon Card form controls
   const [devemonAvatarFilter, setDevemonAvatarFilter] = useState<
@@ -225,6 +229,24 @@ export default function GitHubWallpaperApp() {
     };
   };
 
+  /**
+   * Handle custom background image upload
+   */
+  const handleBackgroundUpload = (e: JSX.TargetedEvent<HTMLInputElement, Event>) => {
+    const input = e.target as HTMLInputElement;
+    const file = input.files?.[0];
+
+    if (file && file.type.startsWith('image/')) {
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        const dataUrl = event.target?.result as string;
+        setCustomBackgroundUrl(dataUrl);
+        setWallpaperTheme("custom");
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
   /**
    * Fetch GitHub user data from public API
    * No authentication required for public profiles
@@ -405,6 +427,37 @@ export default function GitHubWallpaperApp() {
                           )}
                         </PrimerSelect>
                       </div>
+
+                      {wallpaperTheme === "custom" && (
+                        <div>
+                          <label
+                            className={styles.ControlLabel}
+                          >
+                            Upload Custom Background
+                          </label>
+                          <input
+                            id="custom-background-upload"
+                            type="file"
+                            accept="image/*"
+                            onChange={handleBackgroundUpload}
+                            style={{ display: "none" }}
+                          />
+                          <label htmlFor="custom-background-upload" className={styles.FileUploadLabel}>
+                            <SecondaryButton
+                              as="span"
+                              fullWidth={true}
+                              icon={<Icon name="upload" size="functional" />}
+                            >
+                              {customBackgroundUrl ? "Change Image" : "Choose File"}
+                            </SecondaryButton>
+                          </label>
+                          <p className={styles.HelpText}>
+                            {customBackgroundUrl
+                              ? "Custom background uploaded ✓"
+                              : "Upload a custom image for your wallpaper background"}
+                          </p>
+                        </div>
+                      )}
                     </div>
                   )}
 
@@ -551,6 +604,7 @@ export default function GitHubWallpaperApp() {
               user={userData}
               selectedTheme={wallpaperTheme}
               avatarFilter={wallpaperAvatarFilter}
+              customBackgroundUrl={customBackgroundUrl}
             />
           </div>