feat: pagedjs pdf with first page

AirWalk-Digital · May 9, 2023 · 07195bf · 07195bf
1 parent 357f743
commit 07195bf
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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);