Add copyright notice with QRCode on print

Author: webstackdev

.vscode/settings.json

@@ -422,6 +422,7 @@
     "vmax",
     "VNIC",
     "vtbot",
+    "WAAPI",
     "WHATWG",
     "Wolters",
     "wordprocessingml",

_TODO.md

@@ -10,6 +10,27 @@ For printed pages, your header should shift from a navigation tool to a document
 - Brand Identity: A high-contrast version of your logo or the site name in plain text for brand recognition.
 - Document Title: The main title of the page (usually the <h1>), ensuring the reader knows exactly what the document is.
 
+```css
+    @bottom-center {
+      content: "Page " counter(page) " of " counter(pages);
+      font-family: Arial, sans-serif;
+      font-size: 10pt;
+      color: #000;
+    }
+
+    @bottom-left {
+      content: "Company Name";
+      font-size: 9pt;
+      color: #000;
+    }
+
+    @bottom-right {
+      content: "Confidential";
+      font-size: 9pt;
+      color: #000;
+    }
+```
+
 ## PDF File Generation
 
 - Need a workflow to generate PDF files from Markdown for downloads.
@@ -24,8 +45,6 @@ Paged.js Polyfill: Use the Paged.js library to handle sophisticated print layout
 
 [Paged.js](https://pagedjs.org/en/documentation/) polyfills `@page` properties, and lays out an HTML document in print format where it can have page numbers generated to update in a table of contents.
 
-This article has different approaches to [print pagination](https://www.customjs.space/blog/html-print-pagination-footer/). One approach overlaps with PagedJS's approach.
-
 - Headers and Footers (Native Support)
 
 Puppeteer can inject dynamic data into your headers and footers using specific CSS classes. To use this, you must set `displayHeaderFooter: true` in the `page.pdf()` options.
@@ -75,8 +94,6 @@ if (window.matchMedia) {
 }
 ```
 
-[This article](https://excessivelyadequate.com/posts/print.html) shows how to control the following properties in Chrome's Print Properties dialog box from CSS: Layout, Paper size, Margins, Headers and footers, and Background graphics. Headers and footers is the checkbox that by default is enabled and adds information on printed pages. It also shows how to use Chrome from the terminal in headless mode to output a PDF file from an HTML page.
-
 Handling Dynamic Content
 
 If your page fetches data (like an API call) that needs to be visible in the print, the load event might fire before your data arrives. In that case, you should call  `print()` only after your data-fetching logic completes:

astro.config.ts

@@ -105,7 +105,7 @@ const standardIntegrations = [
   })] : []),
   sitemap({
     serialize: createSerializeFunction({
-      exclude: ['deep-dive', 'downloads', '/articles/demo', 'testing', 'hero', 'links'],
+      exclude: ['deep-dive', 'downloads', 'pdf', '/articles/demo', 'testing', 'hero', 'links'],
     }),
   }),
   /**

src/components/Footer/index.astro

@@ -61,7 +61,7 @@ const footerTextLinkClasses = [
 ].join(' ')
 ---
 
-<site-footer class="print:hidden!" transition:persist>
+<site-footer transition:persist>
   <footer class="w-full bg-page-offset mt-6 pt-4" role="contentinfo">
     <div
       id="footer-inner"
@@ -79,18 +79,22 @@ const footerTextLinkClasses = [
           <div class="mr-3 w-16">
             <Avatar name="Kevin Brown" />
           </div>
+          {/* Mobile: company name */}
           <h2 class="font-bold text-2xl sm:hidden">{contactData.company.name}</h2>
         </div>
+        {/* Address and Phone Numbers Block */}
         <address class="mt-3 text-base sm:mt-0">
-          {/* Desktop: show company name here */}
+          {/* Desktop: company name */}
           <h2 class="hidden font-bold text-2xl sm:block">{contactData.company.name}</h2>
+          {/* Street Address */}
           <div class="mt-2 sm:ml-1">
             <p>{contactData.company.address}</p>
             <p>
               {contactData.company.city}, {contactData.company.state}
               {contactData.company.index}
             </p>
           </div>
+          {/* Email Address */}
           <p class="hyphens-none">
             <a
               href={`mailto:${contactData.company.email}`}
@@ -103,6 +107,7 @@ const footerTextLinkClasses = [
               {contactData.company.email}
             </a>
           </p>
+          {/* Toll Free Telephone Number */}
           <p itemprop="telephone">
             <a
               href={`tel:${contactData.company.telephoneTollFree}`}
@@ -116,6 +121,7 @@ const footerTextLinkClasses = [
               Toll Free {formatPhoneNumber(contactData.company.telephoneTollFree)}
             </a>
           </p>
+          {/* Local Telephone Number */}
           <p itemprop="telephone">
             <a
               href={`tel:${contactData.company.telephoneLocal}`}
@@ -133,7 +139,11 @@ const footerTextLinkClasses = [
       </div>
 
       {/* "Hire Me" block with current month and year set by script */}
-      <div class:list={[styles.footerHireMe, 'hidden lg:block lg:self-end lg:mt-8']}>
+      <div class:list={[
+        styles.footerHireMe,
+        'hidden lg:block lg:self-end lg:mt-8',
+        'print:hidden!',
+      ]}>
         <a
           href="/contact"
           id="page-footer__hire-me-anchor"
@@ -149,7 +159,7 @@ const footerTextLinkClasses = [
       </div>
 
       {/* Page footer Social Share links */}
-      <nav class:list={["mt-5", styles.footerSocial]} aria-label="Social links">
+      <nav class:list={["mt-5", styles.footerSocial, 'print:hidden!']} aria-label="Social links">
         <ul class="grid list-none gap-x-4 gap-y-3 p-0 sm:mb-0 sm:mt-0 sm:mx-0 lg:grid-cols-2">
           {
             contactData.company.social
@@ -187,6 +197,7 @@ const footerTextLinkClasses = [
           styles.footerBottomRow,
           'mt-4 px-1 pt-4 pb-3 sm:p-0',
           'lg:pl-8',
+          'print:hidden!',
         ]}
       >
         <div class="grid grid-cols-2 gap-x-4 gap-y-3 lg:grid-cols-1">

src/components/Header/index.astro

@@ -19,13 +19,13 @@ import './index.css'
 
 {/* Hidden modal shown when theme picker icon selected - moved to BaseLayout for persistence */}
 {/* Header for all pages */}
-<div class="header-shell print:hidden!">
+<div class="header-shell">
   <div class="header-footprint print:hidden!" aria-hidden="true"></div>
-  <div class="header-fixed print:hidden!">
+  <div class="header-fixed">
     <header
       id="header"
       data-header-search-open="false"
-      class="print:hidden! site-header group/header flex flex-row items-center justify-between relative"
+      class="site-header group/header flex flex-row items-center justify-between relative"
       role="banner"
     >
       {/*- Element for animated background behind mobile navigation menu -*/}
@@ -54,15 +54,15 @@ import './index.css'
       {/* Theme picker toggle button to show modal */}
       <span
         id="header__theme-icon"
-        class="header-icon order-3 lg:order-4 ml-2 mr-2 block shrink-0 w-(--header-icon-size) h-(--header-icon-size) relative z-(--z-content-overlay)"
+        class="header-icon order-3 lg:order-4 ml-2 mr-2 block shrink-0 w-(--header-icon-size) h-(--header-icon-size) relative z-(--z-content-overlay)  print:hidden!"
       >
         <ThemeButton />
       </span>
 
       {/* Header search icon that expands left into a search panel */}
       <span
         id="header__search-icon"
-        class="header-icon order-4 lg:order-5 mr-2 lg:mr-0 block shrink-0 w-(--header-icon-size) h-(--header-icon-size) relative z-(--z-content-overlay) group-data-[header-search-open=true]/header:z-(--z-modal) lg:z-(--z-nav)"
+        class="header-icon order-4 lg:order-5 mr-2 lg:mr-0 block shrink-0 w-(--header-icon-size) h-(--header-icon-size) relative z-(--z-content-overlay) group-data-[header-search-open=true]/header:z-(--z-modal) lg:z-(--z-nav)  print:hidden!"
       >
         <SearchBar variant="header" />
       </span>

src/components/Layout/Copyright/index.astro

@@ -1,35 +1,17 @@
 ---
-import Icon from '@components/Icon/index.astro'
+import DefaultCopyright from '@components/Layout/Copyright/layouts/default.astro'
+import PrintCopyright from '@components/Layout/Copyright/layouts/print.astro'
 
 export interface Props {
+  link?: string
   publishDate: Date
+  variant?: 'default' | 'print'
 }
 
-const { publishDate } = Astro.props
+const { publishDate, variant = 'default', link } = Astro.props
 const publishYear = publishDate.getFullYear()
 ---
 
-<div class="flex flex-col text-content-active text-xs mb-6">
-  <div class="flex justify-center">
-    <span class="mr-2">Copyright</span>
-    <Icon
-      icon="copyright"
-      color="content-active"
-      size={3}
-      classes="mt-0"
-    />
-    <span class="ml-2 mr-1">
-      <time datetime={String(publishYear)}>{publishYear}</time>
-    </span>
-    <span class="">Webstack Builders, Inc.</span>
-  </div>
-  <div class="flex justify-center">
-    <span class="mr-1">See our </span>
-    <a
-      href="/terms"
-      class="inline-flex min-h-6 items-center align-middle underline transition-colors hover:text-primary-offset hover:decoration-primary-offset focus-visible:text-primary-offset focus-visible:decoration-primary-offset focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none"
-    >
-      terms of use
-    </a>
-  </div>
-</div>
+
+{variant === 'default' && <DefaultCopyright publishYear={publishYear} />}
+{variant === 'print' && <PrintCopyright publishYear={publishYear} link={link} />}

src/components/Layout/Copyright/layouts/default.astro

@@ -0,0 +1,34 @@
+---
+import Icon from '@components/Icon/index.astro'
+
+export interface Props {
+  publishYear: number
+}
+
+const { publishYear } = Astro.props
+---
+
+<div class="flex flex-col text-content-active text-xs mb-6 print:hidden">
+  <div class="flex justify-center">
+    <span class="mr-2">Copyright</span>
+    <Icon
+      icon="copyright"
+      color="content-active"
+      size={3}
+      classes="mt-0"
+    />
+    <span class="ml-2 mr-1">
+      <time datetime={String(publishYear)}>{publishYear}</time>
+    </span>
+    <span class="">Webstack Builders, Inc.</span>
+  </div>
+  <div class="flex items-center justify-center">
+    <span class="mr-1">See our </span>
+    <a
+      href="/terms"
+      class="inline-flex min-h-6 items-center align-middle underline transition-colors hover:text-primary-offset hover:decoration-primary-offset focus-visible:text-primary-offset focus-visible:decoration-primary-offset focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none"
+    >
+      terms of use
+    </a>
+  </div>
+</div>

src/components/Layout/Copyright/layouts/print.astro

@@ -0,0 +1,33 @@
+---
+import Icon from '@components/Icon/index.astro'
+
+export interface Props {
+  link?: string
+  publishYear: number
+}
+
+const { link, publishYear } = Astro.props
+
+const companyName = 'Webstack Builders, Inc.'
+const creativeCommonsLicense = 'The text, diagrams, and images in this work are licensed under CC BY-NC 4.0'
+const mitLicense = 'All code samples in this article are licensed under the MIT License. Feel free to use, modify, and distribute them in any project.'
+---
+
+<div class="flex flex-col gap-4">
+  <div class="flex">
+    <span>Copyright</span>
+    <Icon
+      icon="copyright"
+      color="content-active"
+      size={3}
+      classes="ml-2 mt-1"
+    />
+    <span class="ml-2 mr-1">
+      <time datetime={String(publishYear)}>{publishYear}</time>
+    </span>
+    <span>{companyName}</span>
+  </div>
+  <div>{creativeCommonsLicense}</div>
+  <div>{mitLicense}</div>
+  <div>{link}</div>
+</div>

src/components/Layout/Markdown/Lead/lead-on-hero-example.png

@@ -10,7 +10,7 @@ export interface Props {
 const { path } = Astro.props
 ---
 
-<site-navigation class="contents" data-testid="site-navigation">
+<site-navigation class="contents print:hidden!" data-testid="site-navigation">
   <div id="mobile-nav-focus-container" class="contents">
     {/* Main Navigation Menu */}
     <span