Feat: upload download config (#5)

* Adds download

* Adds Upload

* Adds drag drop file upload

* Adds drag drop file upload

README.md

@@ -19,6 +19,7 @@ A static start page to get to your most important links, **FAST**. You can use t
 - Local Config management
 - PWA support
 - Keyboard shortcuts
+- Full keyboard navigation support
 
 ## Screens
 
@@ -38,11 +39,21 @@ Locally manage config using JSON
 
 ![Locally manage config using JSON](docs/assets/screen-config.png)
 
+Drag & drop config file
+
+![Drag & drop config file](docs/assets/screen-drop.png)
+
 ## Getting started
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). Serve the release build or any of the available react scripts to run the app.
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). Serve the release build or use any of the available react scripts to run the app.
 The startpage uses a `config.json` file as the source of truth for page. It can be modified locally but the result will only be saved on the browsers `localStorage` and persist across sessions.
 
+### Hotkeys
+
+The app has a few hotkeys to help you easily navigate around. To quickly view the available hotkeys, use the `Cmd/Ctrl + /` hotkey!
+
+> Note: Hotkeys do not work when the search is bar is in focus. Use `Tab` to focus out of the search bar and into the app or click anywhere outside the search bar to use hotkeys
+
 ### Using Search
 
 The purpose of the search is to get to you link as easily as possible.
@@ -79,9 +90,11 @@ Since this is a static website, the only way to permanently update the links is
 
 To update config on a local browser instance, use the online config editor using the ⚙️ icon. This will persist the config across sessions. The local editor allows to:
 
-- Delete local cache and restore the configuration from `config.json`
-- Reset a local modification to the last saved point (useful if config was edited by accident)
-- Save the config to `localS
+- Edit the raw local config
+- Sync the configuration from `./config.json` file
+- Download the latest valid config file
+- Upload a local config file. (psst.. if the file has issues, no problem! The editor will still load it and show you the errors until you can save it)
+- Save the config to **LocalStorage**
 
 #### Config structure
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hiccup",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "private": false,
   "dependencies": {
     "@testing-library/jest-dom": "^4.2.4",

public/config.json

@@ -6,7 +6,7 @@
             "link": "http://google.com"
         },
         {
-            "name": "Another Feaured link",
+            "name": "Another Featured link",
             "link": "http://google.com"
         },
         {

src/App.tsx

@@ -7,6 +7,7 @@ import { SearchBar } from './components/SearchBar'
 import { ConfigEditor } from './components/ConfigEditor'
 import { Hotkeys } from './components/Hotkeys'
 import { ConnectedEditLinkModal } from 'components/EditLinkModal'
+import { FileUpload } from 'components/FileUpload'
 
 export const ROOT_ID = 'root'
 
@@ -17,12 +18,14 @@ interface Props {
 const App = ({ config }: Props) => (
   <ConfigProvider config={config}>
     <SearchProvider>
-      <SearchBar />
-      <FeaturedSection />
-      <CategorySection />
-      <ConnectedEditLinkModal />
-      <ConfigEditor />
-      <Hotkeys />
+      <FileUpload>
+        <SearchBar />
+        <FeaturedSection />
+        <CategorySection />
+        <ConnectedEditLinkModal />
+        <ConfigEditor />
+        <Hotkeys />
+      </FileUpload>
     </SearchProvider>
   </ConfigProvider>
 )