From ce059fee0df97efcfb30b173ee6d8aa7a8d43ecd Mon Sep 17 00:00:00 2001
From: Egor Tensin <Egor.Tensin@gmail.com>
Date: Mon, 21 Mar 2022 22:17:07 +0300
Subject: add an include for shell commands & output

---
 _includes/shell.html       | 22 ++++++++++++++++++++
 _posts/2022-03-21-shell.md | 52 ++++++++++++++++++++++++++++++++++++++++++++++
 assets/css/main.css        |  1 +
 assets/css/shell.css       | 41 ++++++++++++++++++++++++++++++++++++
 index.md                   |  1 +
 5 files changed, 117 insertions(+)
 create mode 100644 _includes/shell.html
 create mode 100644 _posts/2022-03-21-shell.md
 create mode 100644 assets/css/shell.css

diff --git a/_includes/shell.html b/_includes/shell.html
new file mode 100644
index 0000000..40ed1c8
--- /dev/null
+++ b/_includes/shell.html
@@ -0,0 +1,22 @@
+<div class="shell">
+{% assign cmd = include.cmd | newline_to_br | strip_newlines %}
+{% assign br = '<br />' %}
+{% assign br_len = br | size %}
+{% assign prefix = cmd | slice: 0,br_len %}
+{% if prefix == br %}
+  {% assign cmd = cmd | remove_first: br %}
+{% endif %}
+{% assign cmd = cmd | split: br %}
+{% assign new_cmd = '' | split: '' %}
+{% for line in cmd %}
+  {% capture new_line %}{{ line }}
+{% endcapture %}
+  {% assign new_cmd = new_cmd | push: new_line %}
+{% endfor %}
+{% assign cmd = new_cmd %}
+{% assign cmd = cmd | join: '' %}
+<div>
+  <pre class="shell-mark">$</pre><pre class="shell-cmd">{{ cmd }}</pre>
+</div>
+<pre class="shell-out">{{ include.out }}</pre>
+</div>
diff --git a/_posts/2022-03-21-shell.md b/_posts/2022-03-21-shell.md
new file mode 100644
index 0000000..1f8f56a
--- /dev/null
+++ b/_posts/2022-03-21-shell.md
@@ -0,0 +1,52 @@
+---
+title: Shell commands
+excerpt: >
+  Pretty formatting for shell commands and their outputs.
+---
+It's easy to style shell commands and their outputs.
+Here's a one-line command and a one-line output.
+
+{% include shell.html cmd='echo 1' out='1' %}
+
+You can pass multiple commands and multi-line output to the include as well:
+
+{% include shell.html cmd='echo 1
+echo 2' out='1
+2' %}
+
+However, it is recommended that you `capture` multi-line commands and outputs
+into variables and pass them.
+This is mostly because Liquid doesn't like backslashes too much.
+
+{% capture cmd1 %}
+touch test.txt && \
+    echo 123 >> test.txt && \
+    echo 456 >> test.txt && \
+    cat test.txt
+{% endcapture %}
+{% capture out1 %}
+123
+456
+{% endcapture %}
+
+{% include shell.html cmd=cmd1 out=out1 %}
+
+You can display multiple commands one after another.
+
+{% include shell.html cmd="printf 'Hello\n'" out='Hello' %}
+{% include shell.html cmd="printf 'World\n'" out='World' %}
+
+Only the last one will have a bottom margin.
+
+Also, here's a really long command with a really long output:
+
+{% capture cmd1 %}
+printf '%s\n' 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'
+{% endcapture %}
+{% capture out1 %}
+AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
+{% endcapture %}
+
+{% include shell.html cmd=cmd1 out=out1 %}
+
+This is ugly though, so please don't do that.
diff --git a/assets/css/main.css b/assets/css/main.css
index 68c6414..b84b432 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -2,5 +2,6 @@
 @import 'common/footer.css';
 @import 'common/posts.css';
 @import 'common/utils.css';
+@import 'shell.css';
 @import 'snippets.css';
 @import 'syntax.css';
diff --git a/assets/css/shell.css b/assets/css/shell.css
new file mode 100644
index 0000000..9ddcf67
--- /dev/null
+++ b/assets/css/shell.css
@@ -0,0 +1,41 @@
+.shell pre {
+  /* Reset Bootstrap's settings for <pre>. */
+  margin: 0;
+  border-radius: 0;
+}
+
+/* WTF is this? I somehow came up with it, but I hope there's a better way.
+ * 10.5px is the standard bottom margin for <pre>s. */
+.shell {
+  margin-bottom: 10.5px;
+}
+.shell + .shell {
+  margin-top: -10.5px;
+}
+
+.shell > div {
+  display: flex;
+}
+.shell-cmd {
+  flex: 2;
+}
+
+/* Styling, yo. */
+.shell-cmd, .shell-mark {
+  border-width: 0 0 medium 0;
+  background-color: #ececec;
+  /* Color the border in the color of grass. */
+  border-color: #008567;
+}
+.shell-out {
+  border-width: 0 0 thin 0;
+}
+.shell-cmd {
+  padding-left: 0;
+}
+.shell-mark {
+  font-weight: bold;
+  /* I like colors. */
+  color: #20004b;
+  user-select: none;
+}
diff --git a/index.md b/index.md
index 0977df0..ab0384f 100644
--- a/index.md
+++ b/index.md
@@ -20,6 +20,7 @@ I use it for
 * [Post w/ MathJax formulas]({{ site.baseurl }}{% post_url 2021-04-08-mathjax %})
 * [Post w/ code snippets]({{ site.baseurl }}{% post_url 2021-04-09-snippets %})
 * [Post w/ _collapsible_ code snippets]({{ site.baseurl }}{% post_url 2021-04-10-collapsible %})
+* [Post w/ shell commands]({{ site.baseurl }}{% post_url 2022-03-21-shell %})
 
 [Jekyll]: https://jekyllrb.com/
 [egor-tensin.github.io]: {{ page.base }}
-- 
cgit v1.2.3