diff --git a/.github/actions/deploy-to-github-pages/action.yml b/.github/actions/deploy-to-github-pages/action.yml index 67230be8cd..1117a47737 100644 --- 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 index 7df82cbc3d..86d6156e29 100644 --- 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 index 6e4eb41f6f..ed83e31d31 100644 --- 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 index 6d28510499..a1d8d2481e 100644 --- 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 index 018309a5cf..f430400343 100644 --- 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.css b/assets/sass/dark-mode.scss similarity index 100% rename from assets/sass/dark-mode.css rename to assets/sass/dark-mode.scss diff --git a/assets/sass/git-turns-20.css b/assets/sass/git-turns-20.scss similarity index 100% rename from assets/sass/git-turns-20.css rename to assets/sass/git-turns-20.scss diff --git a/assets/sass/print.scss b/assets/sass/print.scss new file mode 100644 index 0000000000..2e6152c13a --- /dev/null +++ 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 index 71428d3dda..83d3a58df5 100644 --- a/content/cheat-sheet/_index.html +++ b/content/cheat-sheet/_index.html @@ -113,7 +113,7 @@

Commit all unstaged changes:

-
+ -
+ -
+ -
+ -
+ -
+