Add Readme to folio dir

packages/main/src/DirWatcher.ts

@@ -2,6 +2,7 @@ import * as path from 'node:path';
 import {app} from 'electron';
 import * as fs from 'node:fs/promises';
 import {Mutex} from 'async-mutex';
+import FolioDirReadme from './FolioDirReadme.md?raw'
 
 const APP_SUPPORT_DIR = app.getPath('appData')
 const MY_APP_DIR = path.join(APP_SUPPORT_DIR, 'bitfolio')
@@ -15,6 +16,7 @@ export interface FolioFile {
 
 const IGNORE_LIST = [
   '.DS_Store',
+  'README.txt',
 ]
 
 export default class DirWatcher {
@@ -24,8 +26,6 @@ export default class DirWatcher {
 
   constructor() {
     console.log("Folio dir: ", MY_APP_FOLIO_DIR);
-    // ensure the directory exists
-    fs.mkdir(MY_APP_FOLIO_DIR, {recursive: true});
 
     this.watcher = this.watch();
     this.watcher.catch(console.error)
@@ -34,6 +34,12 @@ export default class DirWatcher {
   watcher?: Promise<void>;
 
   async watch() {
+    // ensure the directory exists
+    await fs.mkdir(MY_APP_FOLIO_DIR, {recursive: true});
+
+    // ensure the readme exists
+    await fs.writeFile(path.join(MY_APP_FOLIO_DIR, 'README.txt'), FolioDirReadme, {flag: 'w'});
+
     await this.updateIfNeeded()
 
     for await (const event of fs.watch(MY_APP_FOLIO_DIR)) {

packages/main/src/FolioDirReadme.md

@@ -0,0 +1,46 @@
+Bitfolio
+========
+
+Put files in this directory to view them in Bitfolio.
+
+Supported file types:
+
+- Images: .jpg, .jpeg, .png, .gif
+- Video: .mp4, .webm, .mov
+- Webpages: .html
+- Fragment shaders: .glsl
+
+Filename tags
+-------------
+
+To customize the display of a file, you can add tags to the filename.
+
+- *Duration*: to set a file duration to 10 seconds, add `.10s.` to the
+  filename. e.g. `myvideo.10s.mp4`. If a duration is specified for a video, 
+  it will loop for the duration.
+
+- *Conform*: to specify the scale mode of a file, you can add `.fill.`, 
+  `.fit.` or `.1-1.` to the filename. e.g. `myimage.fill.jpg`. The 
+  default is `fill`.
+
+Shaders
+-------
+
+Shaders can be written in [Tinyshader] format. There is one extra option - you 
+can specify the resolution of the shader using a comment at the start of the 
+file.
+
+Here's an example:
+
+*sample.glsl*
+```
+// {"resolution": 80}
+t*=0.2;
+color = vec3(
+  sin(x+t),
+  sawtooth(x*y+t),
+  triangle(x*r+t)
+);
+```
+
+[Tinyshader]: https://tinyshader.com