Max Width (#3)

* Max Width Support

* Docs

Author: John Richard Chipps-Harding

README.md

@@ -22,5 +22,6 @@ You can configure a few things by editing the file `src/config/index.tsx`.
 - `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 `true`.
+- `MAX_WIDTH` - The maximum width of the image column. Default `320`.
 
 You can also adjust the title field formatter here: `src/utils/images.ts`.

src/components/ImageStack/index.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @next/next/no-img-element */
 import { getTitle } from "@/utils/images";
-import { SHOW_TITLE } from "@/config";
+import { MAX_WIDTH, SHOW_TITLE } from "@/config";
 
 import styles from "./ImageStack.module.css";
 
@@ -9,7 +9,12 @@ interface Props {
 }
 
 export const ImageStack = ({ images = [] }: Props) => (
-  <ul className={styles.list}>
+  <ul
+    className={styles.list}
+    style={{
+      maxWidth: MAX_WIDTH,
+    }}
+  >
     {images.map((image) => (
       <li key={image}>
         {SHOW_TITLE && <h2>{getTitle(image)}</h2>}

src/config/index.ts

@@ -4,3 +4,4 @@ export const POLL_INTERVAL = 5 * 1000;
 export const FILE_EXTENSION = "png";
 export const FILE_MIME = "image/png";
 export const SHOW_TITLE = true;
+export const MAX_WIDTH = 320;