Add support for full image backgrounds

[CapriciousRebel]

Fixes

Fixes #12 by @zackkrida

Description

The following goals have been achieved and the PR is a work in progress:

• A dropdown for background type (choices are pattern | image) that defaults to pattern
• A text input for the image URL
• A field to add attribution to the image (this is essential for Creative Commons) which can just be a textarea.

Tests

• Navigate to http://localhost:3000/
• Verify all the marked tasks above (screenshot with latest progress attached in the next section)

Screenshots

Checklist

• My pull request has a descriptive title (not a vague title like Update index.md).
• My pull request targets the default branch of the repository (main or master).
• My commit messages follow best practices.
• My code follows the established code style of the repository.
• I added tests for the changes I made (if applicable).
• I added or updated documentation (if applicable).
• I tried running the project locally and verified that there are no
  visible errors.

Developer Certificate of Origin

Developer Certificate of Origin

Developer Certificate of Origin
Version 1.1

Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
1 Letterman Drive
Suite D4700
San Francisco, CA, 94129

Everyone is permitted to copy and distribute verbatim copies of this
license document, but changing it is not allowed.


Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I
    have the right to submit it under the open source license
    indicated in the file; or

(b) The contribution is based upon previous work that, to the best
    of my knowledge, is covered under an appropriate open source
    license and I have the right under that license to submit that
    work with modifications, whether created in whole or in part
    by me, under the same open source license (unless I am
    permitted to submit under a different license), as indicated
    in the file; or

(c) The contribution was provided directly to me by some other
    person who certified (a), (b) or (c) and I have not modified
    it.

(d) I understand and agree that this project and the contribution
    are public and that a record of the contribution (including all
    personal information I submit with it, including my sign-off) is
    maintained indefinitely and may be redistributed consistent with
    this project or the open source license(s) involved.

[zackkrida]

Here's some initial feedback! Good start

[zackkrida]

This logic doesn't make sense to me...it says "If the imageUrl is an empty string, return an empty string. Otherwise return an empty string".

[CapriciousRebel]

@zackkrida I agree with you completely on this, kindly refer to this discussion once where I have gone in-depth with issues faced by me, and why I had to use the syntax that I used. I would love your inputs

[zackkrida]

Suggested change

	backgroundType: backgroundType === 'image' ? 'image' : 'pattern',
	backgroundType

This should be all we need (the shorthand for backgroundType: backgroundType). Since background type can only be 'image' or 'pattern', we can just assign it directly without the use of the ternary logic.

[CapriciousRebel]

Hey @zackkrida I tried doing just that, but I am getting the following error:

The type of backgroundType is BackgroundType, but we assign to it the backgroundType received from the destructing {backgroundType} = query || {}, hence it's type is string | undefined. Thus we need to only assign it when it is a `string.
Let me know if there is any better method to do this in your mind (Perhaps converting it to a string before assigning it below?)

[CapriciousRebel]

We can see the same syntax used for theme: theme === 'dark' ? 'dark' : 'light', Where theme on the left is of the type Theme and the one on the right is of the type string | undefined

[CapriciousRebel]

@zackkrida I'm waiting for your valuable inputs on this.

[zackkrida]

Good

[CapriciousRebel]

Hey Zack, I completely missed this review on my PR because I just realised that my notifications were turned off... I was waiting for you to reply on my comment in the main issue page instead. I'll immediately make the requested changes and go ahead with my PR