From 07195bfde817abc400e6b833a6cf3f5384ded345 Mon Sep 17 00:00:00 2001
From: Rob Ellison <rob.ellison@r&r.org.uk>
Date: Tue, 9 May 2023 20:45:07 +0000
Subject: [PATCH] feat: pagedjs pdf with first page

---
 markdown/test.mdx              |  4 +--
 pages/files/[format]/[file].js |  2 +-
 public/pdf.css                 | 65 +++++++++++++++++++++++++---------
 3 files changed, 51 insertions(+), 20 deletions(-)

diff --git a/markdown/test.mdx b/markdown/test.mdx
index 215e0e24..5ca1cec8 100644
--- a/markdown/test.mdx
+++ b/markdown/test.mdx
@@ -3,9 +3,9 @@
 
 # Test Document
 
-# Title
+## Sub Title
 
-subtitle
+some text
 
 </TitleSlide>
 
diff --git a/pages/files/[format]/[file].js b/pages/files/[format]/[file].js
index 68ed15f2..3a3a0d32 100644
--- a/pages/files/[format]/[file].js
+++ b/pages/files/[format]/[file].js
@@ -83,7 +83,7 @@ export async function getStaticProps(context) {
     if (context.params.format === 'ppt') {
       pad = '<SlidePage>\n' + pad + '\n</SlidePage>'
     } else if (context.params.format === 'pdf') {
-      pad = '<div>' + pad + '</div>'
+      pad = '<div>' + pad.replace(/---/g, '') + '</div>'
     } else {
       pad = removeSection(pad, 'TitleSlide');
       pad = '<MDXViewer>\n' + pad.replace('---', '') + '\n</MDXViewer>'
diff --git a/public/pdf.css b/public/pdf.css
index cbf11c2f..2c45a893 100644
--- a/public/pdf.css
+++ b/public/pdf.css
@@ -44,75 +44,106 @@
     box-shadow: 0 0 0 1px inset var(--color-marginBox);
 } */
 
-
+@page :first {
+    /* background: url(./backgrounds/image17-bg.jpeg) no-repeat; */
+    /* background: url(/backgrounds/cover.jpg) no-repeat; */
+    /* background-size: cover; */
+    margin: 0;
+}
 
 @page {
     background: url(/logos/airwalk-logo.png) no-repeat;
     background-position: left 30px bottom 10px;
     background-size: 100px;
-    padding-top: 20px;
-    padding-bottom: 15px;
+    padding-top: 0px;
+    padding-bottom: 0px;
+    padding-left: 0px;
+    padding-right: 0px;
     z-index: -1000;
     size: A4;
     margin-left: 25px;
     margin-right: 25px;
+    margin-top: 10px;
     margin-bottom: 50px;
     /* width: 100%; */
     /* counter-reset: page; */
-    @top-left {
+    @top-left-corner {
         background: #4AC7F0;
         content: '';
         display: block;
         height: .05cm;
         opacity: .5;
-        width: 100%;
+        /* width: 100%; */
     }
 
     @top-center {
         background: #4AC7F0;
-        content: '';
+        content: string(heading);
+        font-size: 9pt;
         display: block;
         height: .05cm;
         opacity: .5;
-        width: 100%;
+        /* width: 100%; */
     }
 
-    @top-right {
-        content: string(heading);
-        font-size: 9pt;
-        height: 1cm;
-        vertical-align: middle;
-        width: 100%;
+    @top-right-corner {
+        background: #4AC7F0;
+        content: '';
+        display: block;
+        height: .05cm;
+        opacity: .5;
+        /* width: 100%; */
     }
     
+    @bottom-left-corner {
+        background: #4AC7F0;
+        content: '';
+        height: .05cm;
+        opacity: .5;
+    }
     @bottom-left {
         background: #4AC7F0;
         content: '';
         height: .05cm;
         opacity: .5;
-        /* text-align: center; */
-        /* width: 1cm; */
     }
     @bottom-center {
         background: #4AC7F0;
         content: 'Technology, done right.';
+        vertical-align: middle;
         font-size: 16px;
         display: block;
         height: .05cm;
         opacity: .5;
-        width: 100%;
+        /* width: 100%; */
     }
     @bottom-right {
         background: #4AC7F0;
         content: counter(page);
+        font-size: 16px;
         color: white;
         height: 1cm;
+        opacity: .5;
         text-align: center;
         width: 1cm;
-        /* counter-increment: page; */
     }
+    @bottom-right-corner {
+        background: #4AC7F0;
+        content: '';
+        height: .05cm;
+        opacity: .5;
+    }
+}
+
+h1 {
+    break-before: always;
+}
+
+h2 {
+    break-after: avoid;
 }
 
+
 /* Add the page counter to the pagedjs_margin-bottom-right-corner-holder */
 /* .pagedjs_margin-content::after {
     content: "Page " counter(page);