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

@@ -46,6 +46,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,14 +1,16 @@
 # Quick start
 
 1. [Requirements](#requirements)
-2. [Single plugin guide](#quick-guide)
-3. [Multi-src guide](#creating-multi-src-plugins)
+2. [Single plugin guide](#guide)
+3. [Multi-src guide](#creating-multi-source-plugins)
+3. [Dev Containers / Codespaces](#dev-containers--codespaces)
+3. [VScode](#vscode)
 
 ### Requirements
 
 -   [git](https://git-scm.com/doc/ext) basics
 -   Typescript or Javascript basics
--   Node >=18
+-   Node >=20
 -   Installing the dependencies with `npm i`
 
 ### Guide
@@ -20,6 +22,7 @@
 #### Creating plugin script
 
 1. Remember to create your plugin inside the language folder corresponding to the language of the novels
+Recommend checking that the site doesn't have a wordpress theme, as it may be a simple addition to a multisrc config.
 2. File should have the `.ts` extension
    Example `plugins/english/nobleMTL.ts`
 3. Add an icon to `icons/src/<lang>/<plugin-name>/icon.png`
@@ -28,3 +31,41 @@
 > Icon size should be 96x96px!
 
 ### Creating multi-source plugins
+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,11 @@
   "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 && node scripts/generate-plugin-index.js && vite",
+    "dev:start": "npm run dev:prep && vite",
+    "dev:auto": "npm run dev:prep && vite --no-open",
+    "dev:prep": "npm run build:multisrc && node scripts/generate-plugin-index.js",
     "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,
   },
 });