Description
Add additional comments in code to explain the purpose of components and files better.

Description
Update async dep or mitigate the risk to resolve "Prototype Pollution in async".

Description
Update sharp dep or mitigate the risk to resolve "Crash in HeaderParser in dicer".

What feature would you like?
Add support for merging a list of text files. We should be able to accept multiple file types as long as they are all text-based.

Description
Update cross-fetch dep or mitigate the risk to resolve "Incorrect Authorization in cross-fetch".

Description
Update ansi-html dep or mitigate the risk to resolve "Uncontrolled Resource Consumption in ansi-html".

Description
Rewrite all project configuration files in TypeScript if possible for consistency and better type checking.

Description
Update sharp dep or mitigate the risk to resolve "Possible vulnerability in sharp at 'npm install' time if an attacker has control over build environment".

What feature would you like?
The project only supports en-US atm so we should add support for additional translations.

Helpful info

• Browser & version: Irrelevant

Describe the bug
Mobile device screens are not always big enough to display the add/remove buttons and files in the file list. On small screen widths, we should:

• Reduce unnecessary padding
• Reduce text size. This should probably be reduced in general as the font size for the file list is larger than equivalent text in the header and footer components
• Implement wrapping for flexboxes
• Truncate long filenames to prevent overflow or line wrapping
• Allow file removal by swiping on cards?

Steps to reproduce
Steps to reproduce the behavior:

1. Open the site on a mobile device or emulate one via devtools
2. Add some PDF files
3. Notice that cards extend beyond the parent container horizontally and that add/remove buttons are cut off or not visible at all

Expected behavior
All elements should remain visible on small width screens, no matter how long filenames are.

Screenshots

What feature would you like?
The merge button is currently hidden completely if only one file is added. Disable the button instead as this reduces layout changes and is more intuitive for users. Optionally show an informational tooltip when the button is disabled.

Description
Update jpeg-js dep or mitigate the risk to resolve "Infinite loop in jpeg-js".

What feature would you like?
Although reordering files while merging is in process should have no side effects, it is not good UI design. We should be visually disabling the file list and preventing reordering of files whenever a merge is in progress.

The merge button should also be disabled to indicate that no input from the user is needed.

What feature would you like?
Various changes can be made to improve accessibility for disabled users:

• Add descriptive text for label attached to theme toggle. This should only be visible to screen readers
• Change h5 heading at top of file list to an h2 heading (ie. don't skip heading ranks)
• Choose different secondary accent colors for dark and light themes. Change the brightness for primary and secondary theme colors to improve contrast against the page background
• Limit animations when prefers-reduced-motion is set
• Reconfigure sitemap generate such that sitemap.xml is located under the root domain?
• Remove duplicate meta charset declaration
• Remove section elements if possible. All page content aside from the header and footer are essentially in the same section, and it is not ideal to declare sections without titles

Helpful info

• Browser & version: Irrelevant

Describe the bug
The JOHNG.IO link in the footer currently points to http://johng.io/projects/mergist, but we should probably change it johng.io because that link doesn't exist at the moment. This is more correct semantically as well since we never indicate we are linking to the project page on that site rather than the homepage.

Steps to reproduce
Steps to reproduce the behavior:

1. Load the site
2. Click the JOHNG.IO link in the footer
3. Notice the link returns a 404 error

Expected behavior
Link goes to johng.io

Description
Switch from NPM to Yarn for package management. This will reduce the size of the local dependency cache and make builds faster.

Description
The components folder is a mess. We need to organize components together better based on their type and dependencies.

Helpful info

• Browser & version: Chrome 101.0.4951.54, probably others

Describe the bug
When a serious error is encountered in the merging process (ex. corrupted PDF file), an error alert is shown and we exit the createMergedFile method but the action button is never reset and still shows the progress percent.

Steps to reproduce
Steps to reproduce the behavior:

1. Upload a corrupted file (ex. Mergist Test Document 5 (corrupt).pdf)
2. Click the merge button
3. See action button in indeterminate state

Expected behavior
We should either reset the button to its initial state (Merge), or change it to a disabled error button so that the user can remove the problematic file before trying again.

Screenshots

What feature would you like?
Once a toggle switch is used, the user's preference is saved to local storage and used whenever the user visits the page again. Add a reset button/link to toggle switch components to handle the case where a user would like to have the theme or animation preference set automatically again.

Description
There are a ton of event handlers in index.html related to the full screen dropzone component. These should be factored out into a separate component.

What feature would you like?
Add additional error checking to the createMergedFile method of PDFManager to help avoid unexpected bugs. Since this method is only called once we can afford to do extra checks. For example:

• Check that at least 1 PDF file has been added
• Check that the size of the fileIds array matches the size of the file map
• Add a separate try/catch block for setting metadata so that we can soft-fail and return a warning to the user instead of cancelling the merge altogether when there is an error
• Figure out if it is possible to return warnings generated by pdf-lib. If some of the input files are only partially corrupted, it is still possible to merge them atm. However, pdf-lib displays warnings in the console when it encounters parsing issues so it would be good to inform the user that there were issues with the input files

What feature would you like?

• Use classes or React state to open popups instead of targets to prevent page from scrolling to the top when links are clicked
• Make the privacy modal automatically open on page load
• Add a new item to local storage to track whether it is a user's first time visiting the site and integrate this with the privacy modal

Describe the bug
OpenGraph images don't support base64 URLs as currently used by the site. Copy this image to the public folder on build and replace this with a traditional URL.

Also add metadata tags for Twitter cards so that these can be displayed properly as well.

Steps to reproduce

1. Use an online OpenGraph tag previewer
2. Note that no image is displayed

Expected behavior
OpenGraph image should be shown as expected.

What feature would you like?

• Move the actual PDF merging functionality into a web worker so that it doesn't freeze up the UI.
• Increase granularity of the calculateProgress() method
• Throttle messages for progress updates to a reasonable speed and update the transition duration to match

Description
The OpenGraph image is currently being used as the logo image in the README but the sizing and background color are not ideal for this purpose. Instead we should make make a transparent version of the text logo that is larger and update the README with it.

Helpful info

• Browser & version: Chrome 101.0.4951.54, probably others

Describe the bug
On page load, various styles aren't applied immediately, causing disruptive FOUC. Examples include:

• The page title, which shows unstyled text for a brief moment (this is hardly noticeable in comparison to the other examples)
• The icon next to the page title, which temporarily display's itself above the title text rather than inline with it
• The add files icon of the file picker, which temporarily shows with a width of 100%
• The icons in the footer take a moment to show up

Steps to reproduce
Steps to reproduce the behavior:

1. Reload the page
2. See FOUC

Expected behavior
Either a loading screen should be shown to cover the partially loaded page or the icons should be shown with their final layout positions/sizes when the page first loads.

Screenshots

Other
For the text, we should specific a default font that is much closer to the desired font so that any font changes are less noticeable. In addition, we could make the text transparent until it is ready to display.

For the icons, this is likely an issue with font-awesome styles loading later than the page content. This issue is mentioned in the FontAwesome docs.

Description
Add Google Analytics tracking code to the site so that we can track usage statistics. Update the privacy policy section to reflect this change.

Helpful info

• Browser & version: Chrome 101.0.4951.54, probably others

Describe the bug
If the light or dark theme has not been manually selected by the user, than it should automatically be chosen based on the prefers-color-scheme property. If this property is not available, we should be using the dark theme as the default.

Steps to reproduce
Steps to reproduce the behavior:

1. Enable dark mode in your OS
2. Reload the site in an incognito window so that local storage is not preserved
3. Notice the light theme is loaded and the setting is automatically stored in local storage

Expected behavior
Theme selection should use the following rules:

• We should be picking the theme based on the prefers-color-scheme property if it exists
• We should not be saving any particular theme to local storage unless the user specifically picks that theme
• If the prefers-color-scheme property is not available and the user has not picked a theme, we should select the dark theme by default as this is the best looking one

Description
React defaultProps component property will be depreciated in the future so we should replace this with default parameters instead as per https://stackoverflow.com/questions/47774695/react-functional-component-default-props-vs-default-parameters. This may have performance benefits as well.

Description
Update ws dep or mitigate the risk to resolve "ReDoS in Sec-Websocket-Protocol header".

What feature would you like?
Because processing is already done locally, we can make the site a progressive web app. This will allow users to add a shortcut to their homescreen and run the app offline. Lighthouse reports two issues that need to be resolved to make the site compatible:

• Does not register a service worker that controls page and start_url
• Manifest doesn't have a maskable icon

We can implement a service worker using gatsby-plugin-offline.

Description
Update node-fetch dep or mitigate the risk to resolve "node-fetch is vulnerable to Exposure of Sensitive Information to an Unauthorized Actor".

What feature would you like?
Add accept attribute to file input so that the file picker will only suggest uploading PDF files in supported browsers.

What feature would you like?
Add a bouncy scaling effect to the page title text on hover to give the page some life.

What feature would you like?
Change the layout of alerts such that they displayed in a fixed position at the bottom of the page on top of all other page elements. This will ensure that users always see alerts when they are generated and prevent unnecessary reflow when alerts are show/hidden.

Description
Create CONTRIBUTIONS.md with more details about the project. Move existing info out of the README and link to the new file.

Description
Rename sample PDFs to have shorter names for convenience.

Specify that Mergist Test Document 4 (corrupt).pdf is only partially corrupt whereas Mergist Test Document 5 (corrupt).pdf is completely unreadable

Add one file with an extra long name to test truncation of the name in the file list