add setup details for Debian bookworm

2 files changed, 44 insertions, 1 deletions

diff --git a/static/build.html b/static/build.html
index 7a465aba..954bb708 100644
--- a/static/build.html
+++ b/static/build.html
@@ -193,6 +193,24 @@
                     <p>Arch Linux, Debian bookworm, Ubuntu 23.04 and Ubuntu 22.04 LTS are the
                     officially supported operating systems for building GrapheneOS.</p>
 
+                    <details>
+                        <summary>Set up Debian GNU/Linux 12 (bookworm)</summary>
+
+                        <p>To build GrapheneOS, install the required packages:</p>
+
+                        <pre>apt install repo yarnpkg python3-venv zip rsync</pre>
+
+                        <p>Your <code>PATH</code> may not contain directories like
+                        <code>/sbin</code>, and many system administration commands will fail. The
+                        <code>adevtool</code> from GrapheneOS requires the <code>debugfs</code>
+                        binary in <code>/sbin</code>. The simplest workaround is to add these
+                        directories to your <code>PATH</code> environment variable (and apply the
+                        change to your current shell):</p>
+
+                        <pre>echo 'export PATH=$PATH:/sbin:/usr/sbin:/usr/local/sbin' >> ~/.bashrc
+source ~/.bashrc</pre>
+                    </details>
+
                     <p>Dependencies for fetching and verifying the sources:</p>
 
                     <ul>
diff --git a/static/main.css b/static/main.css
index 28e73dc1..899a7053 100644
--- a/static/main.css
+++ b/static/main.css
@@ -350,6 +350,31 @@ main.normalize {
     margin-block-end: 0;
 }
 
+details {
+    border: 1px solid #74777f /* outline */;
+    border-radius: 12px;
+    padding: 0.5em 0.5em 0;
+}
+
+summary {
+    font-weight: bold;
+    margin: -0.5em -0.5em 0;
+    padding: 0.5em;
+}
+
+summary:hover {
+    cursor: pointer;
+}
+
+details[open] {
+    padding: 0.5em;
+}
+
+details[open] summary {
+    border-bottom: 1px solid #74777f /* outline */;
+    margin-bottom: 0.5em;
+}
+
 /* latin */
 @font-face {
     font-family: Roboto;
@@ -452,7 +477,7 @@ main.normalize {
         color: #c4c6cf; /* on-surface-variant */
     }
 
-    pre {
+    pre, details, details[open] summary {
         border-color: #8e9099; /* outline */
     }