Add Print components - Cover and Header

Author: webstackdev

src/components/Layout/Copyright/index.astro

@@ -14,4 +14,4 @@ const publishYear = publishDate.getFullYear()
 
 
 {variant === 'default' && <DefaultCopyright publishYear={publishYear} />}
-{variant === 'print' && <PrintCopyright publishYear={publishYear} link={link} />}
+{variant === 'print' && <PrintCopyright publishYear={publishYear} {...(link ? { link } : {})} />}

src/components/Layout/Print/Cover/index.astro

@@ -0,0 +1,33 @@
+---
+import { type CollectionEntry } from 'astro:content'
+import Image from '@components/Image/index.astro'
+
+export interface Props {
+  article: CollectionEntry<'deepDives'>
+  authorName: string
+}
+
+const { article, authorName } = Astro.props
+const publishDateIso = article.data.publishDate.toISOString()
+const publishDateLabel = article.data.publishDate.toLocaleDateString(undefined, {
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric',
+})
+---
+
+<section class="flex min-h-screen break-after-page flex-col items-center justify-center text-center print:break-after-page">
+  <h1 class="mb-4 text-4xl font-bold text-content-active">{article.data.title}</h1>
+  <div class="mb-6 w-full max-w-4xl">
+    <Image
+      src={article.data.cover}
+      alt={article.data.coverAlt}
+      loading="eager"
+      variant="full"
+    />
+  </div>
+  <p class="mb-2 text-lg text-content">By {authorName}</p>
+  <p class="text-sm text-content-offset">
+    Published on <time datetime={publishDateIso}>{publishDateLabel}</time>
+  </p>
+</section>

src/components/Layout/Print/Header/index.astro

@@ -0,0 +1,23 @@
+---
+import Brand from '@components/Brand/index.astro'
+
+export interface Props {
+  /** The URL path component e.g. 'articles/my-article' */
+  path: string
+}
+---
+
+<header
+  id="header"
+  data-header-search-open="false"
+  class="site-header group/header flex flex-row items-center justify-between relative"
+  role="banner"
+>
+  {/* Logo and wordmark */}
+  <span
+    id="header__brand"
+    class="header-brand flex items-center justify-between relative z-(--z-content-overlay)"
+  >
+    <Brand />
+  </span>
+</header>

src/pages/pdf/[...slug].astro

@@ -5,6 +5,7 @@ import { type CollectionEntry, getCollection, getEntry } from 'astro:content'
 import { isDev } from '@lib/config/environmentServer'
 import { getReadingTimeLabel } from '@lib/markdown/utils/readingTime'
 import ContentLayout from '@components/Content/Layout/index.astro'
+import Cover from '@components/Layout/Print/Cover/index.astro'
 
 export interface Props {
   article: CollectionEntry<'deepDives'>
@@ -33,6 +34,7 @@ const readingTime = article.data.readingTime ?? getReadingTimeLabel(articleBody)
 const section = 'Deep Dive Article PDF Files'
 ---
 
+<Cover article={article} authorName={author.data.name} />
 <ContentLayout
   author={author.data.name}
   article={article}
@@ -44,30 +46,30 @@ const section = 'Deep Dive Article PDF Files'
 <style is:global is:inline>
   @media print and (color) {
     @page {
-      size: A4 landscape; /* Set paper size and orientation */
-      margin: 2cm;        /* Set all margins to 2 centimeters */
+      margin: 2cm 2cm 3.5cm; /* Reserve extra bottom margin for fixed print footer */
+      size: a4 landscape; /* Set paper size and orientation */
     }
 
     @page :first {
+      margin-bottom: 3.5cm;
       margin-top: 10cm;   /* Add extra top margin for a title page */
     }
 
     .footer {
-      display: block;
-      position: fixed;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      height: 50px;
+      align-items: center;
       background: #f8f9fa;
       border-top: 2px solid #dee2e6;
-      padding: 15px 20px;
-      font-size: 10pt;
+      bottom: 0;
       color: #666;
-
+      display: block;
       display: flex;
+      font-size: 0.875rem;
+      height: 50px;
       justify-content: space-between;
-      align-items: center;
+      left: 0;
+      padding: 15px 20px;
+      position: fixed;
+      right: 0;
     }
 
     body {

src/styles/print.css

@@ -8,7 +8,7 @@
      -------------------------------------------------------------------------- */
 
   @page {
-    margin: 2cm;
+    margin: 2cm 2cm 3.5cm;
   }
 
   /* --------------------------------------------------------------------------