From 5306ce26c50cf6e77baa626b95edd59e282b52c4 Mon Sep 17 00:00:00 2001
From: "ala'n (Alexey Stsefanovich)" <astsefanovich@exadel.com>
Date: Mon, 1 Jul 2024 03:31:34 +0200
Subject: [PATCH] chore(site): presentation layout print styles

---
 site/src/presentation/footer.less             |  4 ++++
 site/src/presentation/layout.less             | 20 +++++++++++++++++++
 site/src/presentation/sidebar.less            |  4 ++++
 site/src/presentation/slide.less              |  6 ++++++
 site/views/_includes/presentation/header.njk  | 17 ++++++++++++++--
 site/views/_layouts/presentation.njk          |  2 ++
 .../quick/03-components/05-syntax-sugar.njk   |  6 ------
 7 files changed, 51 insertions(+), 8 deletions(-)
 delete mode 100644 site/views/overview/quick/03-components/05-syntax-sugar.njk

diff --git a/site/src/presentation/footer.less b/site/src/presentation/footer.less
index 63a552739..d5a350c0b 100644
--- a/site/src/presentation/footer.less
+++ b/site/src/presentation/footer.less
@@ -12,6 +12,10 @@
   display: flex;
   justify-content: center;
 
+  @media print {
+    display: none;
+  }
+
   &-container {
     display: flex;
     align-items: center;
diff --git a/site/src/presentation/layout.less b/site/src/presentation/layout.less
index 28b4ac004..154dc0102 100644
--- a/site/src/presentation/layout.less
+++ b/site/src/presentation/layout.less
@@ -19,6 +19,19 @@
     }
   }
 
+  @media print {
+    height: fit-content;
+
+    pre {
+      overflow: hidden;
+    }
+
+    .print-hidden,
+    .esl-scrollbar {
+      display: none !important;
+    }
+  }
+
   background: @landing-bg-color url('/assets/common/stars.webp') repeat;
   background-size: 1000px 500px;
   animation: p-slow-move-bg 90s infinite linear;
@@ -56,6 +69,13 @@
   }
 }
 
+@media print {
+  @page {
+    margin: 0;
+    size: A4 landscape;
+  }
+}
+
 @import './carousel.less';
 @import './slide.less';
 @import './sidebar.less';
diff --git a/site/src/presentation/sidebar.less b/site/src/presentation/sidebar.less
index 7bf850be4..05fdfeb31 100644
--- a/site/src/presentation/sidebar.less
+++ b/site/src/presentation/sidebar.less
@@ -4,6 +4,10 @@
   &,
   &.esl-toggleable {
     display: flex;
+
+    @media print {
+      display: none;
+    }
   }
 
   flex-direction: column;
diff --git a/site/src/presentation/slide.less b/site/src/presentation/slide.less
index 7b802666c..82e838531 100644
--- a/site/src/presentation/slide.less
+++ b/site/src/presentation/slide.less
@@ -3,6 +3,12 @@
   position: relative;
   max-height: 100%;
 
+  @media print {
+    // A4 landscape height
+    min-height: 210mm;
+    page-break-after: always;
+  }
+
   .presentation-content {
     padding-block: 2rem;
     max-height: 100%;
diff --git a/site/views/_includes/presentation/header.njk b/site/views/_includes/presentation/header.njk
index 6112f0380..e13520b31 100644
--- a/site/views/_includes/presentation/header.njk
+++ b/site/views/_includes/presentation/header.njk
@@ -1,7 +1,7 @@
 <header class="header">
   <nav class="header-container container-fluid">
     <div class="header-left">
-      <esl-trigger class="header-hamburger"
+      <esl-trigger class="header-hamburger print-hidden"
                    target="#presentation-sidebar"
                    a11y-label-active="Close navigation menu"
                    a11y-label-inactive="Open navigation menu"></esl-trigger>
@@ -13,12 +13,25 @@
       <span class="header-long-name">{{ site.brand }}</span>
     </a>
     <ul class="header-utility">
+      <li class="header-nav-item print-hidden">
+        <esl-share-button class="header-link icon-link" name="print">
+          <svg xmlns="http://www.w3.org/2000/svg"
+               aria-hidden="true" focusable="false"
+               role="presentation"
+               viewBox="0 0 247.1 247.1"
+               fill="#fff" stroke="#fff" stroke-width="10">
+            <path d="M75.4 175.5h97v6.5h-97zM75.4 194.9h97v6.5h-97z" />
+            <circle stroke-width="2" stroke-miterlimit="10" cx="178.9" cy="117.3" r="6.5"/>
+            <path d="M198.3 84.9h-12.9V39.6c0-7.1-5.8-12.9-12.9-12.9h-97c-7.1 0-12.9 5.8-12.9 12.9v45.3H49.5c-11 0-19.4 8.4-19.4 19.4v58.2c0 11 8.4 19.4 19.4 19.4h12.9v25.9c0 7.1 5.8 12.9 12.9 12.9h97c7.1 0 12.9-5.8 12.9-12.9v-25.9h12.9c11 0 19.4-8.4 19.4-19.4v-58.2c.2-11-8.2-19.4-19.2-19.4zM68.9 39.6c0-3.2 2.6-6.5 6.5-6.5h97c3.2 0 6.5 2.6 6.5 6.5v45.3h-110V39.6zm110 168.2c0 3.2-2.6 6.5-6.5 6.5h-97c-3.2 0-6.5-2.6-6.5-6.5v-45.3h110v45.3zm32.3-45.3c0 7.1-5.8 12.9-12.9 12.9h-12.9V156h-123v19.4H49.5c-7.1 0-12.9-5.8-12.9-12.9v-58.2c0-7.1 5.8-12.9 12.9-12.9h148.8c7.1 0 12.9 5.8 12.9 12.9v58.2z"/>
+          </svg>
+        </esl-share-button>
+      </li>
       <li class="header-nav-item">
         <a class="header-link icon-link" href="{{ site.github.url }}" target="_blank" aria-label="Open on GitHub">
           {% include 'static/assets/common/github.svg' %}
         </a>
       </li>
-      <li class="header-nav-item">
+      <li class="header-nav-item print-hidden">
         <esl-trigger class="header-link icon-link"
                      aria-label="Share page"
                      target="::next" mode="toggle" track-click track-hover>
diff --git a/site/views/_layouts/presentation.njk b/site/views/_layouts/presentation.njk
index 5b8edd3a6..f5f7e33a5 100644
--- a/site/views/_layouts/presentation.njk
+++ b/site/views/_layouts/presentation.njk
@@ -8,6 +8,8 @@
   <main>
     <esl-carousel id="presentation-carousel"
                   class="presentation-carousel"
+                  media="all | print"
+                  type="default | none"
                   vertical count="1"
                   esl-carousel-wheel
                   esl-carousel-touch="@mobile => swipe"
diff --git a/site/views/overview/quick/03-components/05-syntax-sugar.njk b/site/views/overview/quick/03-components/05-syntax-sugar.njk
deleted file mode 100644
index 27fba081f..000000000
--- a/site/views/overview/quick/03-components/05-syntax-sugar.njk
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: Syntax Sugar
-hash: syntax-sugar
-tags: overview-quick
-parent: 00-components
----