Tidy (#12)

* Tidy

* misc

* Simplify stack transform

* Misc

* Tidy

* more

Author: John Richard Chipps-Harding

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Phantom Studios Ltd
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,40 +1,39 @@
-This is a small [Next.js](https://nextjs.org/) fullstack app that allows you to specify a local folder of images (PNGs) to watch, and an accompanying frontend application displaying these images in a simple but slick vertical list.
+<h1 align="center">Folder Stack</h1>
+<p align="center">
+  A slick way to watch folders on big screens.
+</p>
+
+<p align="center">
+  <img src="samples/phantom-screen.gif" />
+</p>
+
+This is a small [Next.js](https://nextjs.org/) fullstack app that allows you to specify a local folder of images (PNGs) to watch, and an accompanying frontend application displaying these images in a simple yet elegant vertical list.
 
 ## Getting Started
 
-First, run the development server:
+First, clone the repository and install the dependencies:
+
+```bash
+npm run i
+```
+
+Then, run the development server:
 
 ```bash
 npm run dev
-# or
-yarn dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
 ## Configuration
 
-You can configure a few things by editing the file `src/config/index.tsx`.
-
-- `DIR` - The directory to watch.
-- `RECURSIVE` - Should we scan recursively within folders. Default is `true`.
-- `MAX_IMAGES` - How many images to request. Default `10`.
-- `POLL_INTERVAL` - How often should the frontend look for updates. Default 5 seconds.
-- `RETRY_INTERVAL` - How frequently should the frontend retry polling on failure.
-- `FILE_EXTENSION` - The filetypes supported. Default `png`.
-- `FILE_MIME` - The file mime type. Default `image/png`.
-- `SHOW_TITLE` - If the title should be overlaid. Default `false`.
-- `DISABLE_SCROLL` - Should the user be able to scroll? Default `true`.
-- `STACK_TRANSFORM` - How the stack should be positioned on the page. Default shown below.
-
-```ts
-export const STACK_TRANSFORM = {
-  x: "100%",
-  y: 0,
-  width: 256,
-  height: 1265,
-  rotation: 90,
-};
-```
+You can configure a few things by editing the file `src/config/index.ts`.
 
-You can also adjust the title field formatter here: `src/utils/images.ts`.
+- `ROOT_DIRECTORY` - The directory to watch. Can be absolute or relative to the project root.
+- `RECURSIVE` - Should we scan recursively within folders.
+- `MAX_IMAGES` - How many images to request.
+- `POLL_INTERVAL` - How often should the frontend look for updates.
+- `FILE_EXTENSIONS` - An array of filetypes supported, e.g. `["png", "jpg"]`.
+- `SHOW_TITLE` - If the title should be overlaid.
+- `DISABLE_SCROLL` - Should scrolling be blocked?
+- `STACK_STYLE` - How the image stack should be transformed on the page using regular `CSSProperties`.