feat: VScode/devcontainers/docs

.devcontainer/devcontainer.json

@@ -0,0 +1,34 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
+{
+    "name": "lnreader-plugins",
+    // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+    "image": "mcr.microsoft.com/devcontainers/javascript-node:4.0-24-bookworm",
+    // Features to add to the dev container. More info: https://containers.dev/features.
+    // "features": {},
+    // Configure tool-specific properties.
+    "customizations": {
+        // Configure properties specific to VS Code.
+        "vscode": {
+            "settings": {},
+            "extensions": [
+                "streetsidesoftware.code-spell-checker",
+                "esbenp.prettier-vscode"
+            ]
+        }
+    },
+    // Use 'forwardPorts' to make a list of ports inside the container available locally.
+    // "forwardPorts": [3000],
+    // Use 'portsAttributes' to set default properties for specific forwarded ports. 
+    // More info: https://containers.dev/implementors/json_reference/#port-attributes
+    "portsAttributes": {
+        "3000": {
+            "label": "Vite Dev Playground",
+            "onAutoForward": "notify"
+        }
+    },
+    // Use 'postCreateCommand' to run commands after the container is created.
+    "postCreateCommand": "npm install"
+    // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+    // "remoteUser": "root"
+}

.gitignore

@@ -1,5 +1,6 @@
 node_modules
 .vscode
+.devcontainer
 .idea
 .env
 config.json

.vscode/extensions.json

@@ -0,0 +1,10 @@
+{
+    "recommendations": [
+        "oderwat.indent-rainbow",
+        "tzachovadia.todo-list",
+        "esbenp.prettier-vscode",
+        "firefox-devtools.vscode-firefox-debug",
+        "ms-vscode-remote.remote-containers",
+        "github.vscode-pull-request-github"
+    ]
+}

.vscode/launch.json

@@ -0,0 +1,27 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "command": "npm run dev:start",
+            "name": "Run npm dev:start",
+            "request": "launch",
+            "type": "node-terminal"
+        },
+        {
+            "name": "Chrome Debug",
+            "request": "launch",
+            "type": "chrome",
+            "url": "http://localhost:3000",
+            "webRoot": "${workspaceFolder}/src",
+            "preLaunchTask": "npm: dev:auto"
+        },
+        {
+            "name": "Firefox Debug",
+            "request": "launch",
+            "type": "firefox",
+            "url": "http://localhost:3000",
+            "webRoot": "${workspaceFolder}/src",
+            "preLaunchTask": "npm: dev:auto"
+        }
+    ]
+}

.vscode/tasks.json

@@ -0,0 +1,56 @@
+{
+    // See https://go.microsoft.com/fwlink/?LinkId=733558
+    // for the documentation about the tasks.json format
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "type": "npm",
+            "script": "dev:prep",
+            "problemMatcher": [],
+            "label": "npm: dev:prep",
+            "detail": "Builds multisource files and plugin index for use in Vite/Dev Playground",
+            "group": {
+                "kind": "build",
+                "isDefault": true
+            }
+        },
+        {
+            "type": "npm",
+            "script": "dev:auto",
+            "label": "npm: dev:auto",
+            "detail": "Runs dev:prep, then starts vite daemon",
+            "isBackground": true,
+            "problemMatcher": [
+                {
+                    "pattern": [
+                        {
+                            "regexp": ".",
+                            "file": 1,
+                            "location": 2,
+                            "message": 3
+                        }
+                    ],
+                    "background": {
+                        "activeOnStart": true,
+                        "beginsPattern": ".",
+                        "endsPattern": "."
+                    }
+                }
+            ]
+        },
+        {
+            "type": "npm",
+            "script": "clean:multisrc",
+            "problemMatcher": [],
+            "label": "npm: clean:multisrc",
+            "detail": "Interactive git clean of ignored files under ./plugins"
+        },
+        {
+            "type": "npm",
+            "script": "format",
+            "problemMatcher": [],
+            "label": "npm: format",
+            "detail": "Overwrite file with corrected formatting"
+        }
+    ]
+}

README.md

@@ -47,6 +47,18 @@ Add your repository URL to the app:
 https://raw.githubusercontent.com/<username>/<repo>/plugins/<tag>/.dist/plugins.min.json
 ```
 
+**From GitHub (Manual):**
+
+There is a npm command that will push your current code to the same link as above:
+
+```
+npm run publish:plugins
+```
+Or on windows
+```
+npm run publish:plugins:windows
+```
+
 **From Localhost:**
 
 ```bash

docs/quickstart.md

@@ -1,61 +1,103 @@
-# Quick start
-
-1. [Requirements](#requirements)
-2. [Single plugin guide](#single-plugin-guide)
-3. [Multi-source guide](#creating-multi-source-plugins)
-4. [Testing your plugin](./testing.md)
-
-### Requirements
-
-- [git](https://git-scm.com/doc/ext) basics
-- TypeScript or JavaScript basics
-- Node.js >= 22
-- Install the dependencies with `npm i`
-
-### Single plugin guide
-
-1. Create your plugin script in `/plugins` [<span style="font-size: 0.8rem;">(learn more)</span>](#creating-plugin-script)
-2. Copy the code from [plugin-template.ts](./plugin-template.ts)
-3. Start coding [<span style="font-size:0.8rem">(documentation)</span>](./docs.md)
-4. Run `npm run check:plugin -- plugins/<lang>/yourPlugin.ts` before opening a PR — see [Testing your plugin](./testing.md)
-
-#### Creating plugin script
-
-1. Remember to create your plugin inside the language folder corresponding to the language of the novels.
-   These folders are spelled out in full, e.g. `plugins/english/`, `plugins/portuguese/` (see the
-   existing folders under `plugins/` for the full list).
-2. The file should have the `.ts` extension.
-   Example: `plugins/english/nobleMTL.ts`
-3. Add a 96x96px icon at `public/static/src/<lang>/<plugin-name>/icon.png`, then reference it from
-   your plugin as `icon = 'src/<lang>/<plugin-name>/icon.png'` (without the `public/static` prefix
-   — see [PluginBase::icon](./docs.md#pluginbaseicon)).
-
-   > [!WARNING]
-   > The `<lang>` folder here uses the **short** language code (`en`, `pt-br`, `fr`, ...), which is
-   > different from the full language name used for the `plugins/<lang>/` folder in step 1. Check
-   > the existing folders under `public/static/src/` for the codes already in use.
-
-### Creating multi-source plugins
-
-Some sites run on the same off-the-shelf CMS/theme (WordPress themes, Madara, etc.), so instead of
-writing a near-identical plugin by hand for each one, this repo generates them from a shared
-template. That system lives in `plugins/multisrc/`, where each subfolder is one **generator** —
-for example `plugins/multisrc/lightnovelwp/` covers sites using the LightNovel WordPress theme, and
-`plugins/multisrc/madara/` covers sites using the Madara theme.
-
-**Adding a new source to an existing generator** (the common case — check `plugins/multisrc/` first
-to see if a generator already matches your target site's CMS):
-
-1. Open the generator's folder, e.g. `plugins/multisrc/lightnovelwp/`, and add an entry for your
-   site to its `sources.json`.
-2. Run `npm run build:multisrc` to materialize the actual plugin file(s) into
-   `plugins/<lang>/<name>[<generator>].ts`.
-3. Follow the generator's own `README.md` for anything specific to it — icon handling, available
-   filters, and `sources.json` fields differ between generators (compare
-   `plugins/multisrc/lightnovelwp/README.md` and `plugins/multisrc/madara/README.md` for examples).
-4. [Test your plugin](./testing.md) the same way you would a single-source one.
-
-**Adding a new generator** (only if no existing generator's CMS matches your target site) is a
-larger undertaking — read an existing generator's `generator.js` and `template.ts` first to see the
-shape expected by `plugins/multisrc/generate-multisrc-plugins.js`, which drives all generators via
-`npm run build:multisrc`.
+# Quick start
+
+1. [Requirements](#requirements)
+2. [Single plugin guide](#single-plugin-guide)
+3. [Multi-source guide](#creating-multi-source-plugins)
+4. [Testing your plugin](./testing.md)
+3. [Dev Containers / Codespaces](#dev-containers--codespaces)
+3. [VScode](#vscode)
+
+### Requirements
+
+- [git](https://git-scm.com/doc/ext) basics
+- TypeScript or JavaScript basics
+- Node.js >= 22
+- Install the dependencies with `npm i`
+
+### Single plugin guide
+
+1. Create your plugin script in `/plugins` [<span style="font-size: 0.8rem;">(learn more)</span>](#creating-plugin-script)
+2. Copy the code from [plugin-template.ts](./plugin-template.ts)
+3. Start coding [<span style="font-size:0.8rem">(documentation)</span>](./docs.md)
+4. Run `npm run check:plugin -- plugins/<lang>/yourPlugin.ts` before opening a PR — see [Testing your plugin](./testing.md)
+
+#### Creating plugin script
+
+1. Remember to create your plugin inside the language folder corresponding to the language of the novels.
+   These folders are spelled out in full, e.g. `plugins/english/`, `plugins/portuguese/` (see the
+   existing folders under `plugins/` for the full list).
+2. The file should have the `.ts` extension.
+   Example: `plugins/english/nobleMTL.ts`
+3. Add a 96x96px icon at `public/static/src/<lang>/<plugin-name>/icon.png`, then reference it from
+   your plugin as `icon = 'src/<lang>/<plugin-name>/icon.png'` (without the `public/static` prefix
+   — see [PluginBase::icon](./docs.md#pluginbaseicon)).
+
+Recommend checking that the site doesn't have a wordpress theme, as it may be a simple addition to a multisrc config.
+
+   > [!WARNING]
+   > The `<lang>` folder here uses the **short** language code (`en`, `pt-br`, `fr`, ...), which is
+   > different from the full language name used for the `plugins/<lang>/` folder in step 1. Check
+   > the existing folders under `public/static/src/` for the codes already in use.
+
+### Creating multi-source plugins
+
+Some sites run on the same off-the-shelf CMS/theme (WordPress themes, Madara, etc.), so instead of
+writing a near-identical plugin by hand for each one, this repo generates them from a shared
+template. That system lives in `plugins/multisrc/`, where each subfolder is one **generator** —
+for example `plugins/multisrc/lightnovelwp/` covers sites using the LightNovel WordPress theme, and
+`plugins/multisrc/madara/` covers sites using the Madara theme.
+
+**Adding a new source to an existing generator** (the common case — check `plugins/multisrc/` first
+to see if a generator already matches your target site's CMS):
+
+1. Open the generator's folder, e.g. `plugins/multisrc/lightnovelwp/`, and add an entry for your
+   site to its `sources.json`.
+2. Run `npm run build:multisrc` to materialize the actual plugin file(s) into
+   `plugins/<lang>/<name>[<generator>].ts`.
+3. Follow the generator's own `README.md` for anything specific to it — icon handling, available
+   filters, and `sources.json` fields differ between generators (compare
+   `plugins/multisrc/lightnovelwp/README.md` and `plugins/multisrc/madara/README.md` for examples).
+4. [Test your plugin](./testing.md) the same way you would a single-source one.
+
+**Adding a new generator** (only if no existing generator's CMS matches your target site) is a
+larger undertaking — read an existing generator's `generator.js` and `template.ts` first to see the
+shape expected by `plugins/multisrc/generate-multisrc-plugins.js`, which drives all generators via
+`npm run build:multisrc`.
+TBD, but in the meantime, you can check out `/plugins/multisrc` for examples!
+
+#### Adding a multi-source source
+You edit `sources.json` inside the relevant `/plugins/multisrc/*/` folder for your website template/theme.
+
+Example
+```json
+  {
+    "id": "totallyrealnovel",
+    "sourceSite": "https://veryreal.example.com/",
+    "sourceName": "TotallyRealNovel",
+    "options": {
+      "useNewChapterEndpoint": true
+    }
+  },
+  ```
+
+### Dev Containers / Codespaces
+You can use the VScode [Dev Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) extension to spin up a docker container on your local machine with a valid dev environment, if you prefer. Do note a docker container requires more resources than setting up the environment properly, but can be simpler and more consistent.
+
+Codespaces will *mostly* work, but **it's not currently possible to fetch any pages from dev playground.** This is due to CORS, but even with that bypassed, the codespace is hosted in a datacenter, which is often IP blocked.
+
+Either will automatically run `npm install`
+
+### VScode
+
+#### Build
+The multisrc generators generate `.ts` files inside the relevant language directories, and you will need these during local testing. It is setup within VScode as build. `Terminal > Run Build Task` will trigger it.
+
+#### Debug/Testing
+
+You can `Run > Start Debugging` or use the Run and Debug panel to launch vite, which will trigger the builds, and then launch vite the same as `npm run dev:start` would have. It will attach the debugger, to vite, which is probably less helpful than the browser's built in debugging tools and console.
+
+Vite will automatically reload when you save files, so you can edit the relevant `.ts` file, save it, and test immediately with results. The only exception is multisrc which must be rebuilt/regenerated.
+
+#### Extensions
+
+Recommended extensions for this repo have been set to pop up in the window.

package.json

@@ -5,10 +5,10 @@
   "main": "index.js",
   "type": "module",
   "scripts": {
-    "clean:multisrc": "find . -type f -wholename \"*plugins*\\[*\\]*.[t,j]s\" -delete",
-    "clean:multisrc:windows": "powershell -Command \"Get-ChildItem -Recurse -Include \\\"*].ts\\\",\\\"*].js\\\" | Where-Object { $_.FullName -like \\\"*plugins*\\\" } | Remove-Item\"",
+    "clean:multisrc": "git clean -dX ./plugins -i",
     "dev": "vite",
-    "dev:start": "node ./plugins/multisrc/generate-multisrc-plugins.js && vite",
+    "dev:start": "npm run build:multisrc && vite",
+    "dev:auto": "npm run build:multisrc && vite --no-open",
     "build:multisrc": "node ./plugins/multisrc/generate-multisrc-plugins.js",
     "build:compile": "npx tsc --project tsconfig.production.json",
     "build:manifest": "node ./scripts/build-plugin-manifest.js",

vite.config.ts

@@ -31,6 +31,7 @@ export default defineConfig({
   },
   server: {
     port: 3000,
+    host: true,
     open: true,
   },
 });