Printable cheat sheet (#2074)

dscho · web-flow · commit 1df67801e8f2 · 2025-09-30T18:38:42.000Z
## Changes - Provides the shiny new Cheat Sheet as a printable PDF ## Context This was mentioned [as a wish](#2049 (comment)). Here it is in action: - https://dscho.github.io/git-scm.com/cheat-sheet.pdf - (linked from https://dscho.github.io/git-scm.com/cheat-sheet via the <img alt="pdf-link" width=16px src="https://dscho.github.io/git-scm.com/images/pdf.png" /> icon)
diff --git a/.github/actions/deploy-to-github-pages/action.yml b/.github/actions/deploy-to-github-pages/action.yml
@@ -88,6 +88,12 @@ runs:
         npm install node-html-parser &&
         node ./script/graphviz-ssr.js
 
+    - name: offer PDF version of the cheat sheet
+      shell: bash
+      run: |
+        npm install @playwright/test &&
+        node script/html-to-pdf.js -i public/cheat-sheet.html
+
     - name: run Pagefind ${{ env.PAGEFIND_VERSION }} to build the search index
       shell: bash
       run: npx -y pagefind@${{ env.PAGEFIND_VERSION }} --site public --write-playground
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -38,6 +38,11 @@ jobs:
         npm install node-html-parser &&
         node ./script/graphviz-ssr.js
 
+    - name: Install @playwright/test
+      run: npm install @playwright/test
+    - name: offer PDF version of the cheat sheet
+      run: node script/html-to-pdf.js -i public/cheat-sheet.html
+
     - name: run Pagefind ${{ env.PAGEFIND_VERSION }} to build the search index
       run: npx -y pagefind@${{ env.PAGEFIND_VERSION }} --site public --write-playground
 
@@ -83,8 +88,6 @@ jobs:
         output: lychee.md
         jobSummary: true
 
-    - name: Install @playwright/test
-      run: npm install @playwright/test
     - name: Run Playwright tests
       id: playwright
       env:
diff --git a/assets/js/application.js b/assets/js/application.js
@@ -37,6 +37,7 @@ $(document).ready(function() {
   Downloads.init();
   DownloadBox.init();
   PostelizeAnchor.init();
+  Print.init();
 });
 
 function onPopState(fn) {
@@ -650,7 +651,7 @@ var DarkMode = {
         || (!prefersDarkScheme && currentTheme === "dark")) {
       button.attr("src", `${baseURLPrefix}images/light-mode.svg`);
     }
-    button.css("display", "block");
+    button.addClass('active');
 
     button.on('click', function(e) {
       e.preventDefault();
@@ -807,3 +808,24 @@ var Graphviz = {
     });
   }
 }
+
+var Print = {
+  init: function() {
+    Print.tagline = $("#tagline");
+    Print.scrollToTop = $("#scrollToTop");
+    window.matchMedia("print").addListener((mediaQueryList) => {
+      Print.toggle(mediaQueryList.matches);
+    });
+  },
+  toggle: function(enable) {
+    if (enable) {
+      Print.taglineBackup = Print.tagline.html();
+      Print.tagline.html("--print-out");
+      Print.scrollToTopDisplay = Print.scrollToTop.attr("display");
+      Print.scrollToTop.attr("display", "none");
+    } else {
+      Print.tagline.html(Print.taglineBackup || "--as-git-as-it-gets");
+      Print.scrollToTop.attr("display", Print.scrollToTopDisplay);
+    }
+  }
+}
diff --git a/assets/sass/application.scss b/assets/sass/application.scss
@@ -30,6 +30,7 @@ $baseurl: "{{ .Site.BaseURL }}{{ if (and (ne .Site.BaseURL "/") (ne .Site.BaseUR
 @import 'cheat-sheet';
 @import 'dark-mode';
 @import 'git-turns-20';
+@import 'print';
 
 code {
   display: inline;
@@ -63,3 +64,7 @@ pre {
     align-self: center;
     margin: 5px;
 }
+
+#dark-mode-button.active {
+  display: block;
+}
diff --git a/assets/sass/cheat-sheet.scss b/assets/sass/cheat-sheet.scss
@@ -9,19 +9,19 @@
     border-radius: 10px;
     border: 1px solid var(--callout-color);
     display: flex;
-    font-size: 1rem;
+    font-size: 1em;
     flex-direction: column;
     gap: 5px;
 
     p {
-      font-size: 1rem;
+      font-size: 1em;
       margin: 0 8px;
     }
 
     h3 {
       color: var(--font-color);
       line-height: 1em;
-      font-size: 1.1rem;
+      font-size: 1.1em;
       margin-bottom: 8px;
       font-weight: 500;
     }
@@ -71,7 +71,7 @@
       grid-column: 1/3;
 
       margin-top: 0;
-      font-size: 1.2rem;
+      font-size: 1.2em;
       font-weight: 700;
       line-height: 1.2;
       color: var(--orange);
diff --git a/assets/sass/dark-mode.scss b/assets/sass/dark-mode.scss
diff --git a/assets/sass/git-turns-20.scss b/assets/sass/git-turns-20.scss
diff --git a/assets/sass/print.scss b/assets/sass/print.scss
@@ -0,0 +1,153 @@
+@media print {
+  .inner {
+    // The `position` of the `inner` class is defined as `relative`, which
+    // causes funny issues when printing, for example tens of empty pages in
+    // the middle. Let's suppress that.
+    position: inherit;
+
+    width: inherit;
+    margin-bottom: 0;
+  }
+
+  #main {
+    margin-bottom: 0;
+
+    /* Improve readability */
+    line-height: 1.4;
+    text-align: justify;
+
+    /* Ensure it uses full page width */
+    width: 100%;
+    border: none;
+    padding: 0;
+  }
+
+  footer {
+    display: none;
+  }
+
+  aside, .sidebar-btn, #search-container, #reference-version, #dark-mode-button, .site-source {
+    display: none;
+  }
+
+  section {
+    break-inside: avoid-page;
+  }
+
+  div#main {
+    box-decoration-break: clone;
+  }
+
+  .pdf-link, #dark-mode-button {
+    display: none !important;
+  }
+
+  .cheat-sheet {
+    font-size: 8pt;
+
+    section {
+      border: 1px solid black;
+      display: block;
+      gap: 0;
+      margin-bottom: 8px;
+      padding: 8px;
+
+      .item {
+        background: none;
+        border: none;
+
+        h3 {
+          margin-bottom: 0;
+        }
+
+        code {
+          background: none;
+          line-height: inherit;
+          padding: 1px;
+          display: block;
+          margin-bottom: 2px;
+        }
+      }
+    }
+    .commit-reference {
+      background: none;
+      border-left: 1px solid black;
+
+      dl {
+        gap: inherit;
+
+        dt,dt::before,dd {
+          line-height: inherit;
+          font-size: 0.7em !important;
+        }
+      }
+    }
+
+    p {
+      font-size: inherit;
+      line-height: inherit;
+      margin: 1px;
+    }
+  }
+}
+
+@media print and (min-width: 231mm) {
+  div#content {
+    width: 297mm;
+  }
+
+  header {
+    padding: 0;
+    #logo img {
+      max-height: 23px;
+      width: auto;
+      height: auto;
+    }
+  }
+
+  /* landscape orientation */
+  @page {
+    size: A4 landscape;
+    width: 297mm;
+    height: 210mm;
+    margin: 1cm;
+  }
+
+  .cheat-sheet {
+    /* Multi-column layout */
+    column-count: 4;
+    column-gap: 1em;
+    margin-top: 20px;
+
+    h1 {
+      column-span: all;
+      position: absolute;
+      top: -10px;
+      width: 100%;
+      font-size: 16px;
+      text-align: center;
+    }
+
+    div.item {
+      display: block;
+      width: 100%;
+      padding: 1px;
+      margin-bottom: 1px;
+      break-inside: avoid;
+
+      label {
+        margin-top: 2px;
+      }
+    }
+
+    /* Manual column break controls */
+    .print-break-before {
+      break-before: column;
+    }
+  }
+}
+
+div#main .pdf-link img {
+  float: right;
+  height: 36px;
+}
diff --git a/content/cheat-sheet/_index.html b/content/cheat-sheet/_index.html
@@ -113,7 +113,7 @@ <h3>Commit all unstaged changes:</h3>
     </div>
   </section>
 
-  <section>
+  <section class="print-break-before">
     <h2 id="move-between-branches">Move Between Branches</h2>
     <div class="item">
       <h3>Switch branches:</h3>
@@ -181,7 +181,7 @@ <h3>Show a summary of a diff:</h3>
       <code>git show &lt;commit&gt; --stat</code>
     </div>
   </section>
-  <section class="commit-reference">
+  <section class="commit-reference print-break-before">
     <h2 id="ways-to-refer-to-a-commit">Ways to refer to a commit</h2>
     <p class="intro">
       Every time we say <code>&lt;commit&gt;</code>, you can use any of these:
@@ -236,7 +236,7 @@ <h3>'Stash' all staged and unstaged changes:</h3>
     </div>
   </section>
 
-  <section>
+  <section class="print-break-before">
     <h2 id="edit-history">Edit History</h2>
     <div class="item">
       <h3>"Undo" the most recent commit (keep your working directory the same):</h3>
@@ -285,7 +285,7 @@ <h3>Show who last changed each line of a file:</h3>
     </div>
   </section>
 
-  <section>
+  <section class="print-break-before">
     <h2 id="combine-diverged-branches">Combine Diverged Branches</h2>
     <div class="item">
       <h3>Combine with rebase:</h3>
@@ -695,7 +695,7 @@ <h2 id="add-a-remote">Add a Remote</h2>
     </div>
   </section>
 
-  <section>
+  <section class="print-break-before">
     <h2 id="push-your-changes">Push Your Changes</h2>
     <div class="item">
       <h3>Push the <code>main</code> branch to the remote <code>origin</code>:</h3>
@@ -757,7 +757,7 @@ <h3>See all possible config options:</h3>
     </div>
   </section>
 
-  <section>
+  <section class="print-break-before">
     <h2 id="important-files">Important Files</h2>
     <div class="item">
       <h3>Local git config:</h3>
diff --git a/script/html-to-pdf.js b/script/html-to-pdf.js
