docs: add shell prefix for shell examples

cachix · Apr 13, 2024 · 24796d1 · 24796d1
1 parent b336108
commit 24796d1
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 36 deletions.
diff --git a/docs/assets/extra.css b/docs/assets/extra.css
@@ -25,3 +25,10 @@ body {
 .md-main__inner {
  padding-bottom: 1rem;
 }
+
+@layer components {
+ .language-shell::before {
+ content: attr(data-shell-prefix);
+ @apply me-2 text-blue-300;
+ }
+}
diff --git a/docs/assets/output.css b/docs/assets/output.css
@@ -592,6 +592,13 @@ html {
  }
 }
 
+.language-shell::before {
+ content: attr(data-shell-prefix);
+ margin-inline-end: 0.4rem;
+ --tw-text-opacity: 1;
+ color: rgb(147 197 253 / var(--tw-text-opacity));
+}
+
 .static {
  position: static;
 }

diff --git a/docs/overrides/home.html b/docs/overrides/home.html
@@ -103,7 +103,7 @@ <h1 class="text-2xl font-bold tracking-tight text-black sm:text-4xl">Fast, Decla
  devenv.nix</div>
  </div>
  </div>
- <pre class="text-white text-sm"><code class="language-nix">{ pkgs, config, ... }: {
+<pre class="text-white text-sm"><code class="language-nix">{ pkgs, config, ... }: {
  env.GREET = "determinism";
 
  packages = [ 
@@ -115,17 +115,16 @@ <h1 class="text-2xl font-bold tracking-tight text-black sm:text-4xl">Fast, Decla
  ncdu --version
  '';
 }
- </code></pre>
+</code></pre>
  </div>
  </div>
 
  <div class="overflow-hidden bg-gray-900 border-t border-t-white/20">
- <pre class="text-white text-sm"><code class="language-shell">$ devenv shell
+<pre class="text-white text-sm"><code class="language-shell" data-shell-prefix="$">devenv shell
 hello determinism
 ncdu 2.3
-
-(devenv) $
- </code></pre>
+</code><code class="language-shell" data-shell-prefix="(devenv) $">
+</code></pre>
  </div>
  </div>
  </div>
@@ -147,7 +146,7 @@ <h1 class="text-2xl font-bold tracking-tight text-black sm:text-4xl">Fast, Decla
  </div>
  </div>
  </div>
- <pre class="text-white text-sm"><code class="language-nix">{ pkgs, ... }: {
+<pre class="text-white text-sm"><code class="language-nix">{ pkgs, ... }: {
  scripts.build.exec = "parcel build";
 
  # Runs on git commit and CI
@@ -161,14 +160,15 @@ <h1 class="text-2xl font-bold tracking-tight text-black sm:text-4xl">Fast, Decla
  };
  };
 }
- </code></pre>
+</code></pre>
  </div>
  </div>
 
  <div class="overflow-hidden bg-gray-900 border-t border-t-white/20">
- <pre class="text-white text-sm"><code class="language-shell">$ devenv shell build
+<pre class="text-white text-sm"><code class="language-shell" data-shell-prefix="$">devenv shell build
 ...
- </code></pre>
+
+</code></pre>
  </div>
  </div>
  </div>
@@ -230,7 +230,7 @@ <h1 class="text-2xl font-bold tracking-tight text-black sm:text-4xl">Fast, Decla
  <div class="px-4 lg:px-0">
  <div class="mt-4 relative isolate overflow-hidden rounded-md sm:mx-auto sm:max-w-2xl lg:mx-0 lg:max-w-none">
  <div class="bg-gray-900">
- <pre class="text-white text-sm"><code class="language-shell">$ devenv search devenv
+<pre class="text-white text-sm"><code class="language-shell" data-shell-prefix="$">devenv search devenv
 +--------------+---------------+------------------------------------------------------------------------+
 | Package | Version | Description |
 +--------------+---------------+------------------------------------------------------------------------+
@@ -246,7 +246,7 @@ <h1 class="text-2xl font-bold tracking-tight text-black sm:text-4xl">Fast, Decla
 | devenv.latestVersion | string | "1.0.3" | The latest version of devenv. |
 +--------------------------+---------+-----------+------------------------------------------------------------+
 • Found 1 package and 3 options for 'devenv'.
- </code></pre>
+</code></pre>
  </div>
  </div>
  </div>
@@ -300,7 +300,7 @@ <h1 class="text-2xl font-bold tracking-tight text-black sm:text-4xl">Fast, Decla
  devenv.nix</div>
  </div>
  </div>
- <pre class="text-white text-sm"><code class="language-nix">{ pkgs, config, ... }: {
+<pre class="text-white text-sm"><code class="language-nix">{ pkgs, config, ... }: {
  languages.python = {
  enable = true;
  version = "3.11";
@@ -330,7 +330,7 @@ <h1 class="text-2xl font-bold tracking-tight text-black sm:text-4xl">Fast, Decla
  };
  };
 }
- </code></pre>
+</code></pre>
  </div>
  </div>
  </div>
@@ -353,7 +353,7 @@ <h1 class="text-2xl font-bold tracking-tight text-black sm:text-4xl">Fast, Decla
  devenv.nix</div>
  </div>
  </div>
- <pre class="text-white text-sm"><code class="language-nix">{ pkgs, ... }: {
+<pre class="text-white text-sm"><code class="language-nix">{ pkgs, ... }: {
  packages = [ 
  pkgs.mkdocs
  pkgs.watchexec
@@ -364,16 +364,17 @@ <h1 class="text-2xl font-bold tracking-tight text-black sm:text-4xl">Fast, Decla
  tailwind.exec = "watchexec -e html,css,js npx tailwindcss build extra.css -o output.css";
  };
 }
- </code></pre>
+</code></pre>
  </div>
  </div>
 
  <div class="overflow-hidden bg-gray-900 border-t border-t-white/20">
- <pre class="text-white text-sm"><code class="language-shell">$ devenv up
+<pre class="text-white text-sm"><code class="language-shell" data-shell-prefix="$">devenv up
 • Building processes ...
 • Starting processes ...
 ...
- </code></pre>
+
+</code></pre>
  </div>
  </div>
  </div>
@@ -463,7 +464,7 @@ <h1 class="text-2xl font-bold tracking-tight text-black sm:text-4xl">Fast, Decla
  devenv.nix</div>
  </div>
  </div>
- <pre class="text-white text-sm"><code class="language-nix">{ pkgs, ... }: {
+<pre class="text-white text-sm"><code class="language-nix">{ pkgs, ... }: {
  services.postgres = {
  enable = true;
  package = pkgs.postgresql_15;
@@ -476,14 +477,15 @@ <h1 class="text-2xl font-bold tracking-tight text-black sm:text-4xl">Fast, Decla
  initialScript = "CREATE EXTENSION IF NOT EXISTS timescaledb;";
  };
 }
- </code></pre>
+</code></pre>
  </div>
  </div>
 
  <div class="overflow-hidden bg-gray-900 border-t border-t-white/20">
- <pre class="text-white text-sm"><code class="language-shell">$ devenv up
+<pre class="text-white text-sm"><code class="language-shell" data-shell-prefix="$">devenv up
 ...
- </code></pre>
+
+</code></pre>
  </div>
  </div>
  </div>
@@ -504,7 +506,7 @@ <h1 class="text-2xl font-bold tracking-tight text-black sm:text-4xl">Fast, Decla
  devenv.nix</div>
  </div>
  </div>
- <pre class="text-white text-sm"><code class="language-nix">{ pkgs, ... }: {
+<pre class="text-white text-sm"><code class="language-nix">{ pkgs, ... }: {
  packages = [ 
  pkgs.mkdocs
  pkgs.curl
@@ -519,14 +521,16 @@ <h1 class="text-2xl font-bold tracking-tight text-black sm:text-4xl">Fast, Decla
  curl http:https://localhost:8000 | grep "Hello, world!"
  '';
 }
- </code></pre>
+
+</code></pre>
  </div>
  </div>
 
  <div class="overflow-hidden bg-gray-900 border-t border-t-white/20">
- <pre class="text-white text-sm"><code class="language-shell">$ devenv test
+<pre class="text-white text-sm"><code class="language-shell" data-shell-prefix="$">devenv test
 ...
- </code></pre>
+
+</code></pre>
  </div>
  </div>
  </div>
@@ -610,7 +614,7 @@ <h1 class="text-2xl font-bold tracking-tight text-black sm:text-4xl">Fast, Decla
  devenv.nix</div>
  </div>
  </div>
- <pre class="text-white text-sm"><code class="language-nix">{ pkgs, ... }: {
+<pre class="text-white text-sm"><code class="language-nix">{ pkgs, ... }: {
  packages = [ 
  pkgs.mkdocs
  pkgs.curl
@@ -620,20 +624,20 @@ <h1 class="text-2xl font-bold tracking-tight text-black sm:text-4xl">Fast, Decla
  docs.exec = "mkdocs serve";
  };
 }
- </code></pre>
+
+</code></pre>
  </div>
  </div>
 
  <div class="overflow-hidden bg-gray-900 border-t border-t-white/20">
- <pre class="text-white text-sm"><code class="language-shell">$ devenv container build processes
+<pre class="text-white text-sm"><code class="language-shell" data-shell-prefix="$">devenv container build processes
 ...
-
-$ devenv container copy processes
+</code><code class="language-shell" data-shell-prefix="$">devenv container copy processes
 ...
-
-$ devenv container run processes
+</code><code class="language-shell" data-shell-prefix="$"> devenv container run processes
 ...
- </code></pre>
+
+</code></pre>
  </div>
  </div>
  </div>
@@ -654,15 +658,15 @@ <h1 class="text-2xl font-bold tracking-tight text-black sm:text-4xl">Fast, Decla
  devenv.yaml</div>
  </div>
  </div>
- <pre class="text-white text-sm"><code class="language-yaml">inputs:
+<pre class="text-white text-sm"><code class="language-yaml">inputs:
  myorg-devenv:
  url: github:myorg/myorg-devenv
 imports:
  - ./frontend
  - ./backend
  - myorg-devenv/service1
  - myorg-devenv/service2
- </code></pre>
+</code></pre>
  </div>
  </div>
  </div>