yourjs-box 1.8.0 → 1.9.0

package/README.md

@@ -7,7 +7,7 @@ Worker or the page itself.  TypeScript works too.
 **[Live demo](https://westc.github.io/yourjs-box/)** ·
 [Examples](https://westc.github.io/yourjs-box/examples/)
 
-![JS Box running code one block at a time, expanding an object, showing a table and an error](demo.gif)
+![YourJS Box running code one block at a time, expanding an object, showing a table and an error](demo.gif)
 
 ## Usage
 
@@ -35,6 +35,9 @@ script is also available from unpkg at
 A comment line that ends with `\\` is a header.  Headers split the code into
 blocks which are run one at a time each time the run button is clicked (or
 <kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Enter</kbd> is pressed in the editor).
+<kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>Enter</kbd> (or **Run all
+blocks** in the **&#8943;** menu) runs all of the remaining blocks, one after
+another and in order with any hidden blocks.
 
 Hovering over code that already ran shows a "Copy to editor" button which
 copies that code into the editor so that it can be run again, as is or modified.
@@ -43,8 +46,8 @@ If the editor already has code in it you are asked before it is replaced.
 ### Toolbar
 
 - The **&#8943;** button opens a menu (see below).
-- **Clear** removes everything from the console.  Code can also call
-  `console.clear()`.
+- **Clear** (or <kbd>Ctrl</kbd>+<kbd>L</kbd>) removes everything from the
+  console.  Code can also call `console.clear()`.
 - The **layout** button switches between showing the editor beside or below
   the console.
 - **Full screen** shows the console using the whole screen.  If the browser
@@ -62,6 +65,7 @@ If the editor already has code in it you are asked before it is replaced.
   code that hasn't been run yet comes back.  Hidden blocks aren't in the
   history.
 - The **&#8943;** menu has:
+  - **Run all blocks**, which runs all of the remaining blocks.
   - **Text size**, which is remembered for every console on the same site.
   - **Open**, which loads a JavaScript (or TypeScript) file as the code that the console starts
     with (its hidden blocks are hidden and Reset goes back to it).
@@ -78,7 +82,7 @@ If the editor already has code in it you are asked before it is replaced.
   - **Reset**, which clears the console and puts the original code back into
     the editor.  In worker mode this also stops any code that is still running
     (eg. an infinite loop) by starting a new worker.
-  - **About JS Box**
+  - **About YourJS Box**
 
 ### Right-Clicking Values
 
@@ -219,7 +223,7 @@ npm install vue@3.5.43 ace-builds@1.44.0 prismjs@1.30.0 prism-themes@1.9.0 acorn
 npm install @babel/standalone@7.29.9
 ```
 
-The About window lists the versions that each version of JS Box uses.
+The About window lists the versions that each version of YourJS Box uses.
 
 ### Console Functions
 
@@ -228,6 +232,22 @@ The About window lists the versions that each version of JS Box uses.
 `timeLog()`, `timeEnd()`, `trace()`, `group()`, `groupCollapsed()`,
 `groupEnd()` and `clear()` are all shown in the console.
 
+Like the browser's console, the first argument can use format specifiers:
+`%s` (string), `%d` or `%i` (integer), `%f` (number), `%o` and `%O` (a value
+that can be expanded), `%c` (CSS styles for the text after it) and `%%` (a
+percent sign).  For example:
+
+```js
+console.log('%cHello%c, %s!', 'color: white; background: #1a73e8; padding: 2px 6px; border-radius: 4px', '', 'world');
+```
+
+Like the browser, `%c` only allows CSS for things like colors, fonts, borders,
+margins and padding, and never anything that loads a URL.
+
+A message that is the same as the one logged right before it is shown once with
+a count instead of being repeated.  Messages that include objects are always
+shown again since the objects may have changed.
+
 ### Loading
 
 Like `<img loading="lazy">`, a console isn't loaded until it is about to be
@@ -327,6 +347,8 @@ Install the development dependencies by running `npm install`.
   `--dry-run` to see what it would do or `--skip-tests` to skip the tests.
 - `npm run record-demo` records `demo.gif` (shown at the top of this README)
   from the built files.  It needs [ffmpeg](https://ffmpeg.org/).
+- `npm run og-image` makes `og-image.png` (the picture shown when the landing
+  page is shared) from the built files.
 - `npm run purge-cdn` purges jsDelivr's cache so that URLs like
   `yourjs-box@1` point to the latest version right away.
 - In VS Code, **Terminal &rarr; Run Task&hellip;** has tasks for all of these
@@ -343,15 +365,7 @@ The options are kept in the URL so the page can be reloaded or shared as is.
 
 Ideas for future versions, roughly from easiest to hardest:
 
-- **Format specifiers:** support `%s`, `%d`, `%i`, `%f`, `%o`, `%O` and `%c`
-  (CSS styles) in `console.log()` and the other logging functions.
-- **Repeated messages:** show identical messages logged in a row once with a
-  count, like the browser's console.
-- **Run all:** run every remaining block with <kbd>Ctrl</kbd> /
-  <kbd>&#8984;</kbd> + <kbd>Shift</kbd> + <kbd>Enter</kbd> or from the
-  **&#8943;** menu.
 - **`data-autorun`:** run every visible block when the page loads.
-- **Clear shortcut:** clear the console with <kbd>Ctrl</kbd> + <kbd>L</kbd>.
 - **Autocomplete:** turn on Ace's keyword and snippet completion in the editor.
 - **`data-remember`:** save the editor's code and history in the browser so
   that they are still there after a reload.