Add Header component and update pages that you use, initial work on Newsletter and Contact pages

Author: webstackdev

_TODO.md

@@ -133,7 +133,6 @@ https://mermaid.js.org/config/directives.html
 - /404
 - /about
 - /contact
-- /downloads/[slug]
 - /newsletter
 - /newsletter/confirm/[token]
 - /offline
@@ -191,25 +190,49 @@ Generate cover images for the skills and technologies tags pages
 ## Checklist
 
 - Need to make tables responsive on mobile
+
 - Need to stop system from adding abbreviation html when used in headings, also the `abbr` presentation needs improved - right now it gives a question mark pointer and long delay to appear
+
 - Re-enable link validator in `astro.config.ts` when pdf / downloads sorted out
+
 - Add people who sign up for newsletter, download, or fill out contact form to Hubspot tracking. Need to configure it to remove them if they do the GDPR remove me. Also remove them from the newsletter.
+
 - Mathjax not working on inline formulas: "Where $L$ is the average number of items in the system (queue depth), $\lambda$ is the arrival rate (requests per second), and $W$ is the average time in system (latency)." In backpressure-load-shedding-admission-control-overload, also "The Retry Amplification Problem" section in circuit-breaker-retry-budget-cascade-failure-prevention.
+
 - Uppy, Tus server, whatever other server needed for file upload on Contact Form component
+
 - Need a Q & A format to use in `blameless-postmortem-incident-analysis-systemic-causes`
+
 - Add a cloud of tags on articles list view at top for quick navigation. Add a ToC for featured tags so it's available on mobile, but with something different on desktop view - maybe hide tag cloud on mobile, and show it with an HR between all tags cloud and featured on desktop.
+
 - Use an in-project Image component to wrap Astro's Image and Picture. Show a magnifying glass with a "+" for the cursor on hover, and a modal to show a magnified view of images on click.
+
 - Add a copyright notice to content
+
 - DownloadLayout to wrap `downloads.mdx` in each folder
+
 - Image for home page newsletter CTA
+
+- Add PDF download image to download CTA, it's in the directory
+
 - Time in prose is causing a line break, and the colon and minutes to be removed - "2:47 AM" in `src/content/articles/mtls-certificate-rotation-service-mesh-authentication/pdf.mdx`. Times like "11:59:59" are breaking across two lines - `src/content/articles/rate-limiting-token-bucket-leaky-bucket-implementation/index.mdx` in "Algorithm Overview" section
+
 - Should we exclude "Footnotes" from the ToC list? Right now it shows at the bottom if there's a Footnotes H2.
+
 - If a reader has already given their email address - newsletter signup, contact form, download registration, then the download CTA on short form articles should go directly to the HTML version of the deep dive, and it should have a PDF download button. Think this workflow through - maybe a "Short / Deep-Dive" slider button on top and don't show the CTA + the PDF download button.
+
 - The articles list page should show tags at top for quick navigation. There's another note about this. Show the count of articles per tag unless they're all the same on the tag.
+
 - 404 page should show search results based on query
+
 - Update EXIF data on all AI generated JPGs
+
 - When you click a link to a heading anchor, the heading is hidden by the page header now that it's stickied to the page
 
+- The Newsletter token page spins forever. It should time out and show an error page at some point.
+
+- Need a secret token to bypass the waiting state for the Newsletter token page, so we can style it. Set it via env var.
+
 ## Header
 
 - Need to improve the "squish" animation where the header reduces in size on scroll down, and returns to full size on scroll up. Maybe reduce and expand the text and search / themepicker / hamburger menu sizes in place, and then slide them horizontally.
@@ -245,17 +268,25 @@ This article has different approaches to [print pagination](https://www.customjs
 
 ## Downloads / Gated Content
 
-- The PDF downloads are going to be gated - the user has to sign up for them and give an email address. How do we handle the keywords in these from a search perspective?
+We can add a path like `/articles/pdf` or `/articles/deep-dive` for the long-form articles. Make that path SSR loaded so we can check if they've given their e-mail address.
+
+- Add a Pages layout for Articles so that we can use it for both the `/articles` and `/articles/pdf` content collections.
+
+- If they haven't and they get to the path from sharing a link or something, we should use the `index.astro` file in that directory to explain that they've accessed gated content, and ask for their e-mail address. Then redirect to the content they want when they give it.
+
+- If they've given their email link, both the regular article and the deep dive should have a button to switch between the two versions so they don't have to download the PDF version.
+
+- How do we handle the keywords in the long form / pdf files from a search perspective? Can we return the result in the search results if the short form content is not returned in the search results, and highlight it somehow in the search results to show that it is gated content? And clicking on its link takes the user to the Download page for that item?
 
-- We need a gating system, where the user gets a token to be able to download a PDF and the token is checked before downloading.
+- We need a gating system, where the user gets a token to be able to download a PDF and the token is checked before downloading. If they've already given their e-mail address, they should be able to download it immediately.
 
 ## Content Issues
 
 - "### Geographic/Currency Mismatches" in src/content/articles/cdn-edge-caching-cache-keys-vary-headers/index.mdx
 
 - cover.jpg for reliability-and-testing needs touch up in GIMP
 
-- We need to check for short form and deep article articles where the deep-dive index.pdf has a non-featured tag lik "argo-cd" only in the pdf.mdx. In those cases, we should make sure the callout for the deep dive includes the name of that non-featured (technology) tag and add the name to the tags: frontmatter key in the index.mdx
+- We need to check for short form and deep article articles where the deep-dive index.pdf has a non-featured tag like "argo-cd" only in the pdf.mdx. In those cases, we should make sure the callout for the deep dive includes the name of that non-featured (technology) tag and add the name to the tags: frontmatter key in the index.mdx
 
 - Need an article on OpenStack
 

src/components/CallToAction/Newsletter/client/@types/index.d.ts

@@ -8,5 +8,5 @@ export interface NewsletterProps {
   /** Submit button text */
   buttonText?: string
   /** Choose which variant to show */
-  variant: 'article' | 'home'
+  variant: 'article' | 'home' | 'page'
 }

src/components/CallToAction/Newsletter/index.astro

@@ -16,8 +16,9 @@
  */
 
 import type { NewsletterProps } from './client/@types'
-import ArticleNewsletter from './article.astro'
-import HomeNewsletter from './home.astro'
+import ArticleNewsletter from './layouts/article.astro'
+import HomeNewsletter from './layouts/home.astro'
+import PageNewsletter from './layouts/page.astro'
 
 export type Props = NewsletterProps
 
@@ -47,6 +48,14 @@ const {
       buttonText={buttonText}
     />
   )}
+  {variant === 'page' && (
+    <PageNewsletter
+      title={title}
+      description={description}
+      placeholder={placeholder}
+      buttonText={buttonText}
+    />
+  )}
 </newsletter-form>
 
 <script>

…ts/CallToAction/Newsletter/article.astro …oAction/Newsletter/layouts/article.astrosrc/components/CallToAction/Newsletter/article.astro renamed to src/components/CallToAction/Newsletter/layouts/article.astro src/components/CallToAction/Newsletter/article.astro renamed to src/components/CallToAction/Newsletter/layouts/article.astro

@@ -1,7 +1,7 @@
 ---
 import GDPRConsent from '@components/Consent/Checkbox/index.astro'
 import Confetti from '@components/Animations/Confetti/index.astro'
-import type { NewsletterProps } from './client/@types'
+import type { NewsletterProps } from '@components/Newsletter/client/@types'
 
 export type Props = Omit<NewsletterProps, 'variant'>
 

…nents/CallToAction/Newsletter/home.astro …llToAction/Newsletter/layouts/home.astrosrc/components/CallToAction/Newsletter/home.astro renamed to src/components/CallToAction/Newsletter/layouts/home.astro src/components/CallToAction/Newsletter/home.astro renamed to src/components/CallToAction/Newsletter/layouts/home.astro

@@ -1,7 +1,7 @@
 ---
 import GDPRConsent from '@components/Consent/Checkbox/index.astro'
 import Confetti from '@components/Animations/Confetti/index.astro'
-import type { NewsletterProps } from './client/@types'
+import type { NewsletterProps } from '@components/Newsletter/client/@types'
 
 export type Props = Omit<NewsletterProps, 'variant'>
 

src/components/CallToAction/Newsletter/layouts/page.astro

@@ -0,0 +1,131 @@
+---
+/**
+ * Newsletter Page Layout
+ *
+ * A centered, standalone newsletter signup form designed for the dedicated
+ * /newsletter page. Features a prominent form with supporting content.
+ */
+
+import GDPRConsent from '@components/Consent/Checkbox/index.astro'
+import Confetti from '@components/Animations/Confetti/index.astro'
+import type { NewsletterProps } from '../client/@types'
+
+export type Props = Omit<NewsletterProps, 'variant'>
+
+const {
+  title = 'Stay Updated',
+  description = 'Subscribe to our newsletter for the latest insights on web development and digital solutions.',
+  placeholder = 'Enter your email address',
+  buttonText = 'Subscribe',
+} = Astro.props
+---
+
+<div class="w-full max-w-xl mx-auto">
+  <div class="bg-page-base border border-trim rounded-2xl shadow-lg p-8 md:p-10">
+    <div class="text-center mb-8">
+      <div class="inline-flex items-center gap-2 mb-4">
+        <span
+          class="px-3 py-1 rounded-full bg-primary/10 text-primary text-xs font-bold uppercase tracking-wider border border-primary/20"
+        >
+          Monthly Dispatch
+        </span>
+      </div>
+      <h2 class="text-2xl md:text-3xl font-black text-content leading-tight">
+        {title}
+      </h2>
+      <p class="text-base text-content-offset mt-3 max-w-md mx-auto">
+        {description}
+      </p>
+    </div>
+
+    <form id="newsletter-form" class="space-y-5">
+      <div class="space-y-1">
+        <label
+          id="newsletter-email-label"
+          for="newsletter-email"
+          class="text-xs font-bold text-content uppercase tracking-wide"
+        >
+          Work Email
+        </label>
+        <div class="relative after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent focus-within:after:-inset-1 focus-within:after:border-spotlight">
+          <input
+            type="email"
+            id="newsletter-email"
+            name="email"
+            placeholder={placeholder}
+            class="w-full px-4 py-3 border border-trim rounded-lg bg-page-offset text-sm focus:outline-none focus-visible:outline-none transition-colors"
+            required
+            aria-describedby="newsletter-message"
+          />
+        </div>
+      </div>
+
+      <Confetti>
+        <button
+          type="submit"
+          id="newsletter-submit"
+          data-e2e-state="idle"
+          class="relative w-full px-6 py-3 bg-content text-page-base font-bold rounded-lg text-sm transition-all transform hover:-translate-y-0.5 hover:shadow-lg flex items-center justify-center gap-2 hover:bg-primary disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0 focus-visible:outline-none after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent focus-visible:after:-inset-1 focus-visible:after:border-spotlight"
+        >
+          <span id="button-text">{buttonText}</span>
+          <svg
+            id="button-arrow"
+            class="w-4 h-4 transition-transform"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+            focusable="false"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M17 8l4 4m0 0l-4 4m4-4H3"
+            ></path>
+          </svg>
+          <svg
+            id="button-spinner"
+            class="hidden w-4 h-4 animate-spin"
+            fill="none"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+            focusable="false"
+          >
+            <circle
+              class="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              stroke-width="4"
+            ></circle>
+            <path
+              class="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            ></path>
+          </svg>
+        </button>
+      </Confetti>
+
+      <GDPRConsent
+        purpose="marketing communications (unsubscribe anytime)"
+        id="newsletter-gdpr-consent"
+        name="consent"
+        formId="newsletter_form"
+        variant="newsletter-cta-home"
+      />
+
+      <p
+        id="newsletter-message"
+        class="text-xs text-content-offset leading-relaxed text-center"
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
+      >
+        You'll receive a confirmation email. Click the link to complete your subscription.
+      </p>
+    </form>
+  </div>
+</div>