Stuff left

.gitignore

@@ -1 +1,2 @@
 .DS_Store
+tdw.md

.vscode/ltex.hiddenFalsePositives.en-US.txt

@@ -0,0 +1 @@
+{"rule":"REPEATED_VERBS","sentence":"^\\QNote: I only could get it to fully work once I enabled enable in Incognito.\\E$"}

README.md

@@ -1,3 +1,36 @@
+<!--
+This is a `test driven writing` README. Each section has some tests that this document needs to pass. You are the test evaluator.
+
+Each comment with "Test:" before a section defines an individual test for that section.
+For each section with a "Test:" comment, determine if the content of that section satisfies the test, given the provided code.
+The provided code starts when this README ends, after a HTML comment line with the content "README ends here". Anything after that
+is code, and should not be treated as part of this readme, just as additional code context to understand this.
+You should cross-reference this README file with the provided code snippets after it to ensure consistency and accuracy.
+When identifying discrepancies, provide specific examples from the code and this document to justify your findings, and make sure they are real.
+The test definitions are the minimum to pass, going into detail or adding more information is also a passing grade.
+Important: Do not make bogus suggestions that are already present in the README.
+Important: Do not be pedantic, and assume common sense from the reader and the writer. Minor deviations from the wording are fine,
+as is providing more details. You should aim for not reducing details unless extremely necessary.
+Important: You should provide no suggestions about sections that have no test comment after their header.
+
+Provide a summary report in markdown a format that looks like the following. Lines in C-style comment are directives for you.
+
+// For the failing tests, write in the following format. If there are any failures:
+// In header:
+# Failures
+
+// As a subheader:
+## header of the failing test section.
+
+// The following, as a list
+- Reason: REASON // Failure reason
+- Fix by: CHANGES // List of specific changes needed
+
+// For passing tests:
+- suggestions, if any. Otherwise it has to be omitted.
+
+ -->
+
 # Goita
 
 > guaitar (first-person singular present guaito, first-person singular preterite guaití, past participle guaitat)
@@ -41,20 +74,27 @@ Also, two features I have wanted for a while:
 
 ## Features and functionality
 
+<!-- Test: This section should mention all functionality provided by the individual elements and what is available in shortcuts.js
+           Note that ctrl + wheel is explicitly stated here for resizing images, as well as ctrl + . and , and /, and pasting via
+           Cmd/Ctrl + v-->
+
 Taken from the extension's help modal. These are the default shortcut keys.
 
 - `a`: draw an arrow
 - `r`: draw a rectangle
 - `p`: draw an ellipse
 - `s`: highlight an area
 - `t`: write text
-  - `ctrl .`: Make text larger (for this text block)
-  - `ctrl ,`: Make text smaller (for this text block)
-  - `ctrl /`: Cycle through fonts (Monoid, Reforma, Inter, Roboto)
-  - `ctrl + scrollwheel`: Resize the text bounding box
-  - `ctrl + c`: Center the text
+  - `ctrl + .`: Make text larger (for this text block)
+  - `ctrl + ,`: Make text smaller (for this text block)
+  - `ctrl + /`: Cycle through fonts (Monoid, Reforma, Inter, Roboto)
+  - `ctrl + wheel`: Resize the text bounding box
+  - `ctrl + c`: Center the text in the bounding box
+  - `escape`: will remove focus and selection from the text input
 - `v`: paste images or text from the clipboard
-  - `ctrl + scrollwheel`: Resize the pasted image while selected
+  - `ctrl + wheel`: Resize the pasted image while selected
+- `Cmd v` (or `Ctrl v`, your system paste) to paste images from the clipboard
+  - This is similar to the above.
 - `k`: clip the screenshot
   - `drag`: dragging moves the clipped image
   - `shift+drag`: dragging moves the clipping rectangle
@@ -66,7 +106,7 @@ Taken from the extension's help modal. These are the default shortcut keys.
   - `g`: green
   - `o`: orange
   - `w`: white
-  - `x`: black (and highlight then redacts)
+  - `x`: black. This makes the highlight tool a redaction tool.
 - `m`: enter meme selection, it will be placed on the last click and behave as a pasted image
   - `type`: to dynamically search through the list of memes
   - `tab`: to display meme thumbnails
@@ -79,15 +119,23 @@ Taken from the extension's help modal. These are the default shortcut keys.
 
 ## Installation
 
-Download/clone this repository somewhere and load the extension in Chrome via `Extensions -> Load unpacked`. I only could get it to fully work once I enabled "enable in Incognito". If you don't feel like doing that, that's okay. I wrote this for my own use anyway…
+- Download/clone this repository somewhere in your local machine.
+- Enable 'Developer mode' in Chrome via the main menu, in `Extensions -> Manage Extensions`.
+- Load the extension in Chrome via `Extensions -> Load unpacked` at the root (where `manifest.json` and `README.md` are located). More details [here](https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world#load-unpacked).
 
-## Tests?
+## Tests
 
-It is kind of tested, at least the editing functionality, which is the "easiest" to test. I took a leaf out of the development of Weave and added Chai/Mocha in-browser tests. They try to reproduce human behavior by sending browser events. I think it is neat, because I need no headless browser or anything.
+<!-- Test: This section should outline the testing methodology.
+           It assumes a developer audience familiar with basic testing concepts. -->
 
-You can see them (in separate iframes) [here](https://mostlymaths.net/goita/tests/).
+I took a leaf out of the development of Weave and added Chai.js/Mocha.js in-browser tests. They try to reproduce human behavior by sending browser events, creating arrows, dragging them, etc. I think it is neat, because I need no headless browser or anything heavyweight like that.
 
-If you want to run them locally, start a local web server of some sort in the root folder of the repository (like running `python3 -m http.server 8000`) and open the `tests/` link there. The main index holds several iframes with the individual suites per "functionality" (`arrow`, `rect`, `etc`), you can also open the individual pages instead, or add new ones.
+The main `index.html` holds several iframes with the individual suites per "functionality" (`arrow`, `rect`, `etc`), and you can also open the individual pages instead, or add new ones. You can see each test [here](https://mostlymaths.net/goita/tests/).
+
+If you want to run them locally:
+
+- Start a local web server of some sort in the root folder of the repository (like running a basic Python web server with `python3 -m http.server 8000`) and
+- Open the `tests/` link there.
 
 The way the tests work is:
 
@@ -101,26 +149,39 @@ There is no testing of the Chrome specific APIs, because there is little of them
 - Generating images in `popup.js` when pressing the extension button.
 - Changing the extension and badge title in `screenshot.js` (behind a try with no catch to let this run in tests out of extension sandboxing).
 
+---
+
+The `Taskfile.yml` can be used to run the test-driven writing test for this README.
+
 ## Local development, contributing
 
+<!-- Test: This section should provide guidance on contributing to the project.
+           It assumes a developer audience.  -->
+
 The most straightforward route if you want a feature or change stuff:
 
 - Clone this somewhere.
 - Load unpacked, as if you were to use it (it's assumed you want to).
-- Make sure you can run the tests as in the previous section.
+- Make sure you can run the tests as in the previous section (this requires running a local web server).
 - Start changing code and trying changes. If you have a screenshot page (i.e. the one you can draw in after pressing the extension) open, refreshing it loads the most current version of your edited code.
 
 As for contributing, this is one of my personal projects, and like many others I have, I have a clear idea of what I want (or a clear idea of what I don't). So this is likely to follow whatever my whim is (in other words, I may reject pull requests for no good reason), but as an open source project, please fork, play with this _and make it your own_.
 
 ## Credits
 
-- Icon: Gemini via Imagen 3.
-- Gemini helped fight with Chrome permissions, but I ended up having to read (again) too much of its documentation.
+<!-- Test: This section should specifically acknowledge the external sources of fonts and open source libraries used in the project.
+           It should not list project-internal files. Meme files, YouTube videos, and other images should be excluded.  -->
+
+- Icons: [Google Gemini](https://gemini.google.com)
+- Tests use the [chai.js](https://www.chaijs.com/)/[mocha.js](https://mochajs.org/) framework.
 - Added the following open source fonts:
   - [Roboto Mono](https://fonts.google.com/specimen/Roboto+Mono)
-  - [Reforma 1969](https://pampatype.com/reforma) (or from [FontSquirrel](https://www.fontsquirrel.com/fonts/reforma) to see the license)
+  - [Reforma 1969](https://www.fontsquirrel.com/fonts/reforma)
   - [Inter](https://rsms.me/inter/)
   - [Monoid](https://larsenwork.com/monoid/)
   - [Special Elite](https://fonts.google.com/specimen/Special+Elite)
-  - [BlackCasper](https://www.fontsquirrel.com/fonts/BlackCasper?q%5Bterm%5D=ransom&q%5Bsearch_check%5D=Y)
+  - [BlackCasper](https://www.fontsquirrel.com/fonts/BlackCasper)
   - [Chicago Kare](https://chicagokare.xyz/)
+
+<!-- README ends here -->
+<!-- Provided code starts here -->

Taskfile.yml

@@ -0,0 +1,14 @@
+version: "3"
+
+tasks:
+  dump:
+    cmds:
+      - gotllo -exclude=white.js,mocha.js,chai.js,show.js,memes,testImage.js,tdw README.md src/*.js tests/*.js memes/*.js src/style.css tests/index.html -tree=./ > tdw.md
+  pbdump:
+    deps: [dump]
+    cmds:
+      - /bin/cat tdw.md | pbcopy
+  tdw:
+    deps: [dump]
+    cmds:
+      - open https://gemini.google.com

manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "Goita",
   "description": "Take a screenshot, add arrows and sh*t as you wish. With blackjack, and memes",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "permissions": [
     "tabs",
     "activeTab",
@@ -20,15 +20,6 @@
     "service_worker": "src/background.js",
     "type": "module"
   },
-  "commands": {
-    "take-screenshot": {
-      "suggested_key": {
-        "default": "Ctrl+Shift+P",
-        "mac": "MacCtrl+Command+P"
-      },
-      "description": "Take a screenshot of the current page"
-    }
-  },
   "icons": {
     "512": "media/icon512.png",
     "128": "media/icon128.png"

memes/memes.js

@@ -445,6 +445,11 @@ const memes = [
     file: "no-idea.jpg",
     keywords: ["I have no idea what I'm doing", "dog", "confused"],
   },
+  {
+    title: "Djokovic screaming",
+    file: "djokovic.jpg",
+    keywords: ["Djokovic screaming", "angry", "tennis", "ffs"],
+  },
 ];
 
 const filterTextElement =

index.html → pwa/index.html

@@ -2,8 +2,9 @@
 <html>
   <head>
     <title>Goita tu</title>
-    <link href="fonts/fonts.css" rel="stylesheet" />
-    <link href="src/style.css" rel="stylesheet" />
+    <link href="../fonts/fonts.css" rel="stylesheet" />
+    <link href="../src/style.css" rel="stylesheet" />
+    <link rel="manifest" href="manifest.json" />
   </head>
   <body>
     <div id="screenshotContainer">
@@ -13,6 +14,6 @@
     </div>
     <div id="filter-text"></div>
     <div id="filtered-memes"></div>
-    <script type="module" src="src/main.js"></script>
+    <script type="module" src="../src/main.js"></script>
   </body>
 </html>

pwa/manifest.json

@@ -0,0 +1,20 @@
+{
+  "short_name": "Goita",
+  "name": "Goita",
+  "icons": [
+    {
+      "src": "../media/icon512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "../media/icon128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "index.html",
+  "display": "standalone",
+  "background_color": "#333333",
+  "theme_color": "#333333"
+}

src/main.js

@@ -1,7 +1,7 @@
 import { setupAllTheThings } from "./screenshot.js";
 import { white } from "./white.js";
 
-const basepath = window.location.pathname.startsWith("/src") ? "../" : "";
+const basepath = window.location.pathname.startsWith("/src") ? "../" : "../"; // TODO(me): remove once paths are fixed
 
 document.addEventListener(
   "DOMContentLoaded",

src/screenshot.js

@@ -245,6 +245,7 @@ const setupAllTheThings = (testImage, basepath) => () => {
         window._elements[pastedMeme.id] = pastedMeme;
         selected = pastedMeme;
         displayMemes = false;
+        isDrawing = false;
       }
       const pastedImage = clipboardData.files && clipboardData.files[0];
       if (pastedImage && pastedImage.type.startsWith("image")) {
@@ -272,6 +273,7 @@ const setupAllTheThings = (testImage, basepath) => () => {
           window._elements[pastedMeme.id] = pastedMeme;
           selected = pastedMeme;
           displayMemes = false;
+          isDrawing = false;
         };
 
         reader.readAsDataURL(pastedImage);
@@ -341,6 +343,7 @@ const setupAllTheThings = (testImage, basepath) => () => {
         window._elements[pastedMeme.id] = pastedMeme;
         selected = pastedMeme;
         displayMemes = false;
+        isDrawing = false;
       };
       if (event.metaKey || event.ctrlKey) {
         return;