Deluge Screenshots

You can use the ::screen[...] Markdown directive to include screenshots from the Deluge.

How to use

1. Take a screenshot on DEx by pasting the following code snippet into your browser console:

   All browsers

   const reader = Object.assign(new FileReader(), {
     onload: () => console.log(
       reader.result.split("data:application/octet-stream;base64,")[1]
     ),
     onerror: () => console.error(reader.error),
   });
   
   new Response(new Blob([lastOled]).stream()
     .pipeThrough(new CompressionStream("gzip")))
     .bytes().then((bytes) =>
       reader.readAsDataURL(
         new File([bytes], "", { type: "application/octet-stream" })
       )
     )

   Firefox and Safari

   Firefox and Safari can use a simpler snippet because they support the new toBase64 method.

   new Response(new Blob([lastOled]).stream()
     .pipeThrough(new CompressionStream("gzip")))
     .bytes().then((bytes) => console.log(bytes.toBase64()))

2. Copy the output, this will be the screen-data in the directive below.

3. Add your screen directive to any markdown (.md or .mdx) file:

   ::screen[screen-data]{alt="Alt text"}

Alt text is mandatory.

You can also add a scale attribute to the directive to scale the image up or down. Default scale is 2, meaning that 1 deluge pixel will show as a 2x2 square in the browser.

::screen[screen-data]{alt="Alt text" scale=4}

Directives that begin with :: will be shown as block elements. If there is just one : then it will be shown inline. This is true for all directives.

Inline example (note the single :):

:screen[screen-data]{alt="Inline screenshot"}

Examples

Scale 2 (default)

Scale 4

Inline examples

Can be used inline with text (for whatever reason): Scale is 1 here.

Or even smaller (for whatever reason): This is at 0.5 scale.

Screens can be used in tables too. This also uses the inline (single :) directive variant.

First Column	Second Colum