Enabled printing function

OpenInternet · Aug 22, 2024 · 5ea628d · 5ea628d
1 parent 9b167f3
commit 5ea628d
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 3 deletions.
diff --git a/assets/style.css b/assets/style.css
diff --git a/assets/tailwind.css b/assets/tailwind.css
@@ -166,4 +166,29 @@ details summary::marker {
 
 .highlight {
   @apply max-w-full w-full;
+}
+
+@media print {
+  body * {
+    @apply invisible;
+  }
+
+  #content, #content * {
+    @apply visible;
+  }
+
+  #printButton,
+  #githubEdit,
+  #breadcrumb,
+  #mark-complete,
+  #learning-resources,
+  nav,
+  #other-resources-and-links,
+  .transition-200 {
+    @apply hidden !important;
+  }
+
+  #content {
+    @apply absolute left-0 top-0 w-full bg-white;
+  }
 }
diff --git a/i18n/ar.yml b/i18n/ar.yml
@@ -444,6 +444,10 @@ key:
     translation:
       one: null
       other: "تعديل هذه الصفحة على GitHub"
+  - id: print-pdf
+    translation:
+      one: null
+      other: "الطباعة بصيغة PDF"
   - id: cookie-banner
     translation:
       one: null

diff --git a/i18n/en.yml b/i18n/en.yml
@@ -465,6 +465,10 @@ key:
     translation:
       one: null
       other: Edit this page on GitHub
+  - id: print-pdf
+    translation:
+      one: null
+      other: Print as PDF
   - id: cookie-banner
     translation:
       one: null

diff --git a/i18n/es.yml b/i18n/es.yml
@@ -438,6 +438,10 @@ key:
     other: "La información de Git no está disponible."
   - id: edit-github
     other: "Editar esta página en GitHub"
+  - id: print-pdf
+    translation:
+      one: null
+      other: "Imprimir como PDF"
   - id: cookie-banner
     translation:
       one: null

diff --git a/i18n/fr.yml b/i18n/fr.yml
@@ -347,6 +347,10 @@ key:
   - id: edit-github
     one: null
     other: "Modifier cette page sur GitHub"
+  - id: print-pdf
+    translation:
+      one: null
+      other: "Imprimer au format PDF"
   - id: cookie-banner
     translation:
       one: null

diff --git a/layouts/learning-path/single.html b/layouts/learning-path/single.html
@@ -37,6 +37,12 @@ <h1 class="mb-0 text-3xl font-semibold text-gray-900">
                         <p class="text-sm text-green-900">{{ i18n "key.git-unavailable" }}</p>
                         {{ end }}
                         {{ partial "github.html" . }}
+                        <button id="printButton" class="mb-5 ms-3 lg:ms-0 sm:mb-0 inline-flex items-center text-sm font-semibold text-green-800 underline hover:text-green-900 hover:no-underline lg:mb-0">
+                            <svg class="me-1 h-5 w-5" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke-width="1.5" stroke="currentColor">
+                                <title>Print</title>
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M6.72 13.829c-.24.03-.48.062-.72.096m.72-.096a42.415 42.415 0 0 1 10.56 0m-10.56 0L6.34 18m10.94-4.171c.24.03.48.062.72.096m-.72-.096L17.66 18m0 0 .229 2.523a1.125 1.125 0 0 1-1.12 1.227H7.231c-.662 0-1.18-.568-1.12-1.227L6.34 18m11.318 0h1.091A2.25 2.25 0 0 0 21 15.75V9.456c0-1.081-.768-2.015-1.837-2.175a48.055 48.055 0 0 0-1.913-.247M6.34 18H5.25A2.25 2.25 0 0 1 3 15.75V9.456c0-1.081.768-2.015 1.837-2.175a48.041 48.041 0 0 1 1.913-.247m10.5 0a48.536 48.536 0 0 0-10.5 0m10.5 0V3.375c0-.621-.504-1.125-1.125-1.125h-8.25c-.621 0-1.125.504-1.125 1.125v3.659M18 10.5h.008v.008H18V10.5Zm-3 0h.008v.008H15V10.5Z" />
+                              </svg> {{ i18n "key.print-pdf" }}
+                        </button>
                     </div>
 
                 </article>
@@ -249,6 +255,17 @@ <h2 class="mb-4 mt-3 text-xl font-bold">{{ i18n "key.table-of-contents" }}</h2>
                 {{ $parentPageCount := len $parentPages }}
                 <span class="hidden" id="moduleCount" data-count="{{ $parentPageCount }}"></span>
 
+                <script>
+                    window.addEventListener('beforeprint', () => {
+                        document.querySelectorAll('details').forEach(details => {
+                            details.open = true;
+                        });
+                        });
+                    document.getElementById('printButton').addEventListener('click', function () {
+                        window.print(); // Triggers the browser's print dialog
+                    });
+                </script>
+
                 <script>
                     document.addEventListener('alpine:init', () => {
                       Alpine.store('modal', {

diff --git a/layouts/partials/github.html b/layouts/partials/github.html
@@ -5,8 +5,8 @@
 {{ $filePath = replace $filePath "%5c" "/" }}
 {{ $githubPath := printf "%s/blob/%s/content/%s" $baseUrl $branch $filePath }}
 
-<a href="{{ $githubPath }}" target="_blank" rel="noopener noreferrer" class="mb-5 sm:mb-0 inline-flex items-center text-sm font-semibold text-green-800 underline hover:text-green-900 hover:no-underline lg:mb-0">
-    <svg class="me-2 h-5 w-5" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<a id="githubEdit" href="{{ $githubPath }}" target="_blank" rel="noopener noreferrer" class="mb-5 sm:mb-0 inline-flex items-center text-sm font-semibold text-green-800 underline hover:text-green-900 hover:no-underline lg:mb-0">
+    <svg class="me-1 h-5 w-5" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
         <title>GitHub</title>
         <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" fill="currentColor"/>
     </svg> {{ i18n "key.edit-github" }}