From 7dd75fb0ffb45b2b0901526064b3c2e57f8c06cd Mon Sep 17 00:00:00 2001 From: Kevin Brown Date: Fri, 20 Feb 2026 02:53:32 +0300 Subject: [PATCH 1/4] Add Header component and update pages that you use, initial work on Newsletter and Contact pages --- _TODO.md | 39 +- .../Newsletter/client/@types/index.d.ts | 2 +- .../CallToAction/Newsletter/index.astro | 13 +- .../Newsletter/{ => layouts}/article.astro | 2 +- .../Newsletter/{ => layouts}/home.astro | 2 +- .../Newsletter/layouts/page.astro | 131 ++++ src/components/Forms/Contact/index.astro | 355 ---------- src/components/Layout/Header/index.astro | 32 + .../List/layouts/ColoredMarkerList.astro | 12 +- src/components/Pages/About/index.astro | 375 ++++++++++ src/components/Pages/Consent/index.astro | 17 +- .../{Forms => Pages}/Contact/README.md | 0 .../Contact/client/@types/index.ts | 0 .../__fixtures__/contactForm.fixture.astro | 0 .../Contact/client/__tests__/error.spec.ts | 0 .../Contact/client/__tests__/feedback.spec.ts | 0 .../client/__tests__/formSubmission.spec.ts | 0 .../Contact/client/__tests__/index.spec.ts | 0 .../Contact/client/__tests__/message.spec.ts | 0 .../Contact/client/__tests__/name.spec.ts | 0 .../client/__tests__/selectors.spec.ts | 0 .../Contact/client/__tests__/testUtils.ts | 0 .../Contact/client/__tests__/utils.spec.ts | 0 .../client/__tests__/validation.spec.ts | 0 .../{Forms => Pages}/Contact/client/email.ts | 0 .../Contact/client/errorMessages.ts | 0 .../Contact/client/feedback.ts | 0 .../Contact/client/formSubmission.ts | 0 .../{Forms => Pages}/Contact/client/index.ts | 0 .../Contact/client/selectors.ts | 0 .../{Forms => Pages}/Contact/client/upload.ts | 0 .../{Forms => Pages}/Contact/client/utils.ts | 0 .../Contact/client/validation.ts | 0 src/components/Pages/Contact/index.astro | 640 +++++++++++++----- .../{Forms => Pages}/Contact/uppy-audio.css | 0 .../{Forms => Pages}/Contact/uppy-core.css | 0 .../Contact/uppy-dashboard.css | 0 .../{Forms => Pages}/Contact/uppy-webcam.css | 0 .../{Forms => Pages}/Contact/validation.css | 0 src/components/Pages/Download/index.astro | 12 +- src/components/Pages/MyData/index.astro | 15 +- src/components/Pages/NotFound/index.astro | 33 +- src/components/Pages/Offline/index.astro | 24 +- src/components/Pages/Privacy/index.astro | 27 +- src/pages/404.astro | 14 +- src/pages/about/index.astro | 395 +---------- src/pages/contact/index.astro | 190 +++++- src/pages/newsletter/index.astro | 229 ++++++- src/pages/services/index.astro | 17 +- 49 files changed, 1522 insertions(+), 1054 deletions(-) rename src/components/CallToAction/Newsletter/{ => layouts}/article.astro (98%) rename src/components/CallToAction/Newsletter/{ => layouts}/home.astro (99%) create mode 100644 src/components/CallToAction/Newsletter/layouts/page.astro delete mode 100644 src/components/Forms/Contact/index.astro create mode 100644 src/components/Layout/Header/index.astro create mode 100644 src/components/Pages/About/index.astro rename src/components/{Forms => Pages}/Contact/README.md (100%) rename src/components/{Forms => Pages}/Contact/client/@types/index.ts (100%) rename src/components/{Forms => Pages}/Contact/client/__fixtures__/contactForm.fixture.astro (100%) rename src/components/{Forms => Pages}/Contact/client/__tests__/error.spec.ts (100%) rename src/components/{Forms => Pages}/Contact/client/__tests__/feedback.spec.ts (100%) rename src/components/{Forms => Pages}/Contact/client/__tests__/formSubmission.spec.ts (100%) rename src/components/{Forms => Pages}/Contact/client/__tests__/index.spec.ts (100%) rename src/components/{Forms => Pages}/Contact/client/__tests__/message.spec.ts (100%) rename src/components/{Forms => Pages}/Contact/client/__tests__/name.spec.ts (100%) rename src/components/{Forms => Pages}/Contact/client/__tests__/selectors.spec.ts (100%) rename src/components/{Forms => Pages}/Contact/client/__tests__/testUtils.ts (100%) rename src/components/{Forms => Pages}/Contact/client/__tests__/utils.spec.ts (100%) rename src/components/{Forms => Pages}/Contact/client/__tests__/validation.spec.ts (100%) rename src/components/{Forms => Pages}/Contact/client/email.ts (100%) rename src/components/{Forms => Pages}/Contact/client/errorMessages.ts (100%) rename src/components/{Forms => Pages}/Contact/client/feedback.ts (100%) rename src/components/{Forms => Pages}/Contact/client/formSubmission.ts (100%) rename src/components/{Forms => Pages}/Contact/client/index.ts (100%) rename src/components/{Forms => Pages}/Contact/client/selectors.ts (100%) rename src/components/{Forms => Pages}/Contact/client/upload.ts (100%) rename src/components/{Forms => Pages}/Contact/client/utils.ts (100%) rename src/components/{Forms => Pages}/Contact/client/validation.ts (100%) rename src/components/{Forms => Pages}/Contact/uppy-audio.css (100%) rename src/components/{Forms => Pages}/Contact/uppy-core.css (100%) rename src/components/{Forms => Pages}/Contact/uppy-dashboard.css (100%) rename src/components/{Forms => Pages}/Contact/uppy-webcam.css (100%) rename src/components/{Forms => Pages}/Contact/validation.css (100%) diff --git a/_TODO.md b/_TODO.md index 0636eab8f..fce6ba800 100644 --- a/_TODO.md +++ b/_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,9 +268,17 @@ 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 @@ -255,7 +286,7 @@ This article has different approaches to [print pagination](https://www.customjs - 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 diff --git a/src/components/CallToAction/Newsletter/client/@types/index.d.ts b/src/components/CallToAction/Newsletter/client/@types/index.d.ts index 63eb8faee..f4d2fd959 100644 --- a/src/components/CallToAction/Newsletter/client/@types/index.d.ts +++ b/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' } diff --git a/src/components/CallToAction/Newsletter/index.astro b/src/components/CallToAction/Newsletter/index.astro index d4d08c96c..fc62c42c2 100644 --- a/src/components/CallToAction/Newsletter/index.astro +++ b/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' && ( + + )} diff --git a/src/components/Layout/Header/index.astro b/src/components/Layout/Header/index.astro new file mode 100644 index 000000000..1cb1a2f78 --- /dev/null +++ b/src/components/Layout/Header/index.astro @@ -0,0 +1,32 @@ +--- +import Icon from '@components/Icon/index.astro' + +export type Props = { + title: string + description?: string + icon: string + trailer?: string +} +const { title, description, icon } = Astro.props +--- + +
+
+ +
+

{title}

+ {description && ( +

+ {description} +

+ )} + {Astro.props.trailer && ( +

+ {Astro.props.trailer} +

+ )} +
diff --git a/src/components/List/layouts/ColoredMarkerList.astro b/src/components/List/layouts/ColoredMarkerList.astro index 9720db282..438b266ea 100644 --- a/src/components/List/layouts/ColoredMarkerList.astro +++ b/src/components/List/layouts/ColoredMarkerList.astro @@ -3,12 +3,14 @@ export type Props = { items: { lead?: string text: string - color: string + color?: string }[] classes?: { ul?: string li?: string em?: string + icon?: string + text?: string } size?: number } @@ -18,15 +20,17 @@ const { items, classes, size = 2 }: Props = Astro.props const ulClass = ["list-none pl-0 text-content mt-4 mb-2 space-y-2", classes?.ul] const liClass = ["flex items-start", classes?.li] const emClass = ["mr-2 not-italic font-bold", classes?.em] +const iconClass = [`w-${size} h-${size}`, "rounded-full mt-3 mr-3 shrink-0", classes?.icon] +const textClass = classes?.text ? [classes.text] : [] ---