README: Use example instead directly embedding example.

realazthat · Aug 23, 2024 · 1c1bd58 · 1c1bd58
1 parent 66af20d
commit 1c1bd58
Show file tree

Hide file tree

Showing 13 changed files with 486 additions and 388 deletions.
diff --git a/.github/README.example.terminal.svg b/.github/README.example.terminal.svg
diff --git a/.github/README.md.jinja2 b/.github/README.md.jinja2
@@ -119,33 +119,27 @@ npx playwright install firefox
 
 Example:
 
-{% set example_cmd='
-npx excalidraw-brute-export-cli \\
-  -i ./examples/simple.excalidraw \\
-  --background 1 \\
-  --embed-scene 0 \\
-  --dark-mode 0 \\
-  --scale 1 \\
-  --format svg \\
-  -o "./.github/README.example.output.svg"
-' | trim %}
-
-```bash
-# Use this command:
-{{ example_cmd | safe }}
-```
-
-<!--{{ shell('bash -c \'%s\'' | format(example_cmd),
-             rich='README.example.terminal.svg',
-             rich_alt='Example output',
-             rich_bg_color='black',
-             rich_cols=120,
-             decomentify=True,
-             include_args=False) }}-->
+<!--{{snippet('./examples/simple_example.sh',
+              start='# SNIPPET_START',
+              end='\n# SNIPPET_END',
+              backtickify='bash',
+              decomentify='nl')|trim}}-->
+
+<!--{{ shell('cat ./.github/simple_example.log',
+               start=': ECHO_SNIPPET_START',
+               end='^.*: ECHO_SNIPPET_END',
+               regex='MULTILINE',
+               rich='README.simple_example.log.svg',
+               rich_alt='Output of `bash ./examples/simple_example.sh`',
+               rich_bg_color='black',
+               rich_term='xterm-256color',
+               rich_cols=160,
+               include_args=False,
+               decomentify='nl') }}-->
 
 And the resulting image (svg):
 
-<img src="./.github/README.example.output.svg" alt="Simple Excalidraw Diagram as a SVG" width="400" />
+<img src="./examples/simple_example_output.svg" alt="Simple Excalidraw Diagram as a SVG" width="400" />
 
 ## 💻 Command Line Options
 

diff --git a/.github/README.remotified.md b/.github/README.remotified.md
@@ -122,25 +122,30 @@ npx playwright install firefox
 
 Example:
 
-
-
+<!---->
 ```bash
-# Use this command:
+
 npx excalidraw-brute-export-cli \
   -i ./examples/simple.excalidraw \
   --background 1 \
   --embed-scene 0 \
   --dark-mode 0 \
   --scale 1 \
   --format svg \
-  -o "./.github/README.example.output.svg"
+  -o "./examples/simple_example_output.svg"
+
+ls "./examples/simple_example_output.svg"
+
 ```
+<!---->
 
-<!-- --><img alt="Example output" src="https://raw.githubusercontent.com/realazthat/excalidraw-brute-export-cli/v0.3.2/.github/README.example.terminal.svg"/><!-- -->
+<!---->
+<img alt="Output of `bash ./examples/simple_example.sh`" src="https://raw.githubusercontent.com/realazthat/excalidraw-brute-export-cli/v0.3.2/.github/README.simple_example.log.svg"/>
+<!-- -->
 
 And the resulting image (svg):
 
-<img alt="Simple Excalidraw Diagram as a SVG" src="https://raw.githubusercontent.com/realazthat/excalidraw-brute-export-cli/v0.3.2/.github/README.example.output.svg" width="400"/>
+<img alt="Simple Excalidraw Diagram as a SVG" src="https://raw.githubusercontent.com/realazthat/excalidraw-brute-export-cli/v0.3.2/examples/simple_example_output.svg" width="400"/>
 
 ## 💻 Command Line Options
 

diff --git a/.github/README.simple_example.log.svg b/.github/README.simple_example.log.svg
diff --git a/.github/simple_example.log b/.github/simple_example.log
@@ -0,0 +1,53 @@
+[0;32m$ [0mset -e -x -v -u -o pipefail
+set +v
+[0;32m$ [0mset +v
+[0;32m$ [0mGREEN='\033[0;32m'
+[0;32m$ [0mYELLOW='\033[1;33m'
+[0;32m$ [0mNC='\033[0m'
+[0;32m$ [0mPS4='\033[0;32m$ \033[0m'
+[0;32m$ [0mEXCALIDRAW_BRUTE_EXPORT_CLI_URL=http://localhost:59876
+[0;32m$ [0m[[ -z http://localhost:59876 ]]
+[0;32m$ [0m: ECHO_SNIPPET_START
+[0;32m$ [0mnpx excalidraw-brute-export-cli -i ./examples/simple.excalidraw --background 1 --embed-scene 0 --dark-mode 0 --scale 1 --format svg -o ./examples/simple_example_output.svg
+[38;2;86;156;214minfo[39m: options:
+[38;2;86;156;214minfo[39m: {
+  i: [32m'./examples/simple.excalidraw'[39m,
+  input: [32m'./examples/simple.excalidraw'[39m,
+  background: [33mtrue[39m,
+  b: [33mtrue[39m,
+  embedScene: [33mfalse[39m,
+  e: [33mfalse[39m,
+  darkMode: [33mfalse[39m,
+  d: [33mfalse[39m,
+  scale: [33m1[39m,
+  s: [33m1[39m,
+  format: [32m'svg'[39m,
+  f: [32m'svg'[39m,
+  o: [32m'./examples/simple_example_output.svg'[39m,
+  output: [32m'./examples/simple_example_output.svg'[39m,
+  url: [32m''[39m,
+  excalidrawVersion: [32m''[39m,
+  headless: [33mtrue[39m,
+  leaveBrowserRunning: [33mfalse[39m,
+  screenshots: [32m''[39m,
+  actionSleepTime: [33m200[39m,
+  timeout: [33m-1[39m
+}
+[38;2;86;156;214minfo[39m: Falling back to environment variable EXCALIDRAW_BRUTE_EXPORT_CLI_URL
+[38;2;86;156;214minfo[39m: excalidrawURL: http://localhost:59876
+[38;2;86;156;214minfo[39m: Detecting Excalidraw version...
+[38;2;86;156;214minfo[39m: excalidrawVersion: 0.15.0
+[38;2;86;156;214minfo[39m: Clicking: Menu Burger
+[38;2;86;156;214minfo[39m: Clicking: Open Menu Item
+[38;2;86;156;214minfo[39m: File is chosen!
+[38;2;86;156;214minfo[39m: Clicking: Export Menu Item
+[38;2;86;156;214minfo[39m: await exportBackgroundSwitch.count(): 1
+[38;2;86;156;214minfo[39m: await exportEmbedSwitch.count(): 1
+[38;2;86;156;214minfo[39m: await exportScaleDiv.count(): 1
+[38;2;86;156;214minfo[39m: await exportScaleElements.count(): 3
+[38;2;86;156;214minfo[39m: Pressing SVG button!
+[38;2;86;156;214minfo[39m: File is downloaded!
+[38;2;86;156;214minfo[39m: closing...
+[0;32m$ [0mls ./examples/simple_example_output.svg
+./examples/simple_example_output.svg
+[0;32m$ [0m: ECHO_SNIPPET_END
diff --git a/README.md b/README.md
@@ -122,25 +122,30 @@ npx playwright install firefox
 
 Example:
 
-
-
+<!---->
 ```bash
-# Use this command:
+
 npx excalidraw-brute-export-cli \
   -i ./examples/simple.excalidraw \
   --background 1 \
   --embed-scene 0 \
   --dark-mode 0 \
   --scale 1 \
   --format svg \
-  -o "./.github/README.example.output.svg"
+  -o "./examples/simple_example_output.svg"
+
+ls "./examples/simple_example_output.svg"
+
 ```
+<!---->
 
-<!----><img src=".github/README.example.terminal.svg" alt="Example output" /><!---->
+<!---->
+<img src=".github/README.simple_example.log.svg" alt="Output of `bash ./examples/simple_example.sh`" />
+<!---->
 
 And the resulting image (svg):
 
-<img src="./.github/README.example.output.svg" alt="Simple Excalidraw Diagram as a SVG" width="400" />
+<img src="./examples/simple_example_output.svg" alt="Simple Excalidraw Diagram as a SVG" width="400" />
 
 ## 💻 Command Line Options
 

diff --git a/examples/local-docker_example.sh b/examples/local-docker_example.sh
@@ -37,13 +37,13 @@ docker run --rm --tty \
   my-excalidraw-brute-export-cli-image \
   -i ./examples/simple.excalidraw \
   --background 1 \
-  --embed-scene 1 \
+  --embed-scene 0 \
   --dark-mode 0 \
   --scale 1 \
-  --format png \
-  -o "./examples/simple_example_output.png"
+  --format svg \
+  -o "./examples/simple_example_output.svg"
 
-ls "./examples/simple_example_output.png"
+ls "./examples/simple_example_output.svg"
 
 # SNIPPET_END
 : ECHO_SNIPPET_END
diff --git a/examples/remote-docker_example-noautorun.sh b/examples/remote-docker_example-noautorun.sh
@@ -36,13 +36,13 @@ docker run --rm --tty \
   ghcr.io/realazthat/excalidraw-brute-export-cli:v0.3.2 \
   -i ./examples/simple.excalidraw \
   --background 1 \
-  --embed-scene 1 \
+  --embed-scene 0 \
   --dark-mode 0 \
   --scale 1 \
-  --format png \
-  -o "./examples/simple_example_output.png"
+  --format svg \
+  -o "./examples/simple_example_output.svg"
 
-ls "./examples/simple_example_output.png"
+ls "./examples/simple_example_output.svg"
 
 # SNIPPET_END
 : ECHO_SNIPPET_END
diff --git a/examples/simple_example.sh b/examples/simple_example.sh
@@ -22,13 +22,13 @@ fi
 npx excalidraw-brute-export-cli \
   -i ./examples/simple.excalidraw \
   --background 1 \
-  --embed-scene 1 \
+  --embed-scene 0 \
   --dark-mode 0 \
   --scale 1 \
-  --format png \
-  -o "./examples/simple_example_output.png"
+  --format svg \
+  -o "./examples/simple_example_output.svg"
 
-ls "./examples/simple_example_output.png"
+ls "./examples/simple_example_output.svg"
 
 # SNIPPET_END
 : ECHO_SNIPPET_END
diff --git a/examples/simple_example.sh.jinja2 b/examples/simple_example.sh.jinja2
@@ -60,13 +60,13 @@ docker build -t {{docker_image_name|safe}} .
 {{cmd|safe}} \
   -i ./examples/simple.excalidraw \
   --background 1 \
-  --embed-scene 1 \
+  --embed-scene 0 \
   --dark-mode 0 \
   --scale 1 \
-  --format png \
-  -o "./examples/simple_example_output.png"
+  --format svg \
+  -o "./examples/simple_example_output.svg"
 
-ls "./examples/simple_example_output.png"
+ls "./examples/simple_example_output.svg"
 
 # SNIPPET_END
 : ECHO_SNIPPET_END
diff --git a/examples/simple_example_output.png b/examples/simple_example_output.png
diff --git a/.github/README.example.output.svg → examples/simple_example_output.svg b/.github/README.example.output.svg → examples/simple_example_output.svg
diff --git a/scripts/generate-readme.sh b/scripts/generate-readme.sh
@@ -28,6 +28,7 @@ NODE_VERSION_PATH=${PWD}/.nvmrc \
 
 bash scripts/format.sh
 
+(
 # FORCE_COLOR and TERM are set, to produce consistent results across different
 # systems.
 #
@@ -55,10 +56,19 @@ export TERM=dumb
 export CLI_WIDTH=120
 export LINES=40
 export COLUMNS=120
+
+
+# Try to make terminal output as consistent as possible.
+TERM=xterm-256color COLUMNS=160 LINES=40 \
+PS4="${GREEN}$ ${NC}" unbuffer bash -x ./examples/simple_example.sh \
+  > .github/simple_example.log 2>&1
+
+
 python -m snipinator.cli \
   -t "${PROJ_PATH}/.github/README.md.jinja2" \
   -o "${PROJ_PATH}/README.md" \
   --rm --force --create --chmod-ro
+)
 ################################################################################
 LAST_VERSION=$(node -p "require('./package.json').version")
 python -m mdremotifier.cli \