diff --git a/.cache/pages.json b/.cache/pages.json index 5dc59dda0..114e5de58 100644 --- a/.cache/pages.json +++ b/.cache/pages.json @@ -89,6 +89,7 @@ "consent", "contact", "hero", + "links", "newsletter", "offline", { diff --git a/COVERS.md b/COVERS.md index 16ab26b5f..cfaba4c27 100644 --- a/COVERS.md +++ b/COVERS.md @@ -1744,148 +1744,151 @@ Medical photograph of surgical instruments during a precise operation—the care 1. Isometric crystal fortress built from translucent blue diamond shapes, each facet reflecting tiny infrastructure symbols like servers and databases, floating on a cloud layer, cool azure and white palette, technical illustration style -2. Abstract stained glass window pattern with a central diamond motif radiating geometric panels representing identity, compute, networking, and storage services, rich blues and teals on dark background, flat vector art +2. Abstract stained glass window pattern with a central diamond motif radiating geometric panels representing Azure identity, compute, networking, and storage services, rich blues and teals on dark background, flat vector art -3. Mechanical blueprint of interlocking gears shaped like hexagonal tiles, each engraved with cloud service glyphs, steel blue and white technical drawing on navy background, precise engineering illustration +3. Mechanical blueprint of interlocking gears shaped like hexagonal tiles, each engraved with cloud service glyphs for Azure, steel blue and white technical drawing on navy background, precise engineering illustration -4. Aerial view of a modern city grid where each building block is a different shade of blue, connected by luminous data highways forming a diamond pattern at the center, clean minimalist line art style +4. Aerial view of a modern city grid where each building block is a different shade of blue, connected by luminous data highways forming a diamond pattern at the center, Azure, clean minimalist line art style ### src/content/tags/backstage-idp/index.mdx -1. Isometric control room with a central glowing dashboard screen surrounded by floating plugin cards showing catalog entries, each card connected by thin luminous wires, teal and purple palette, technical illustration style +1. Isometric control room with a central glowing dashboard screen surrounded by floating plugin cards showing catalog entries for Backstage IDP, each card connected by thin luminous wires, teal and purple palette, technical illustration style -2. Abstract blueprint of an open book whose pages unfold into a branching tree of service tiles and documentation nodes, clean lines on dark indigo background, flat vector art with accent highlights +2. Abstract blueprint of an open book whose pages unfold into a branching tree of service tiles and documentation nodes for Backstage IDP, clean lines on dark indigo background, flat vector art with accent highlights -3. Mechanical switchboard with labeled toggle switches and patch cables connecting service icons to a central portal display, warm copper and cool steel tones, vintage engineering diagram style +3. Mechanical switchboard with labeled toggle switches and patch cables connecting service icons to a central portal display for Backstage IDP, warm copper and cool steel tones, vintage engineering diagram style -4. Top-down view of a mosaic floor pattern where each tile represents a different developer tool icon, all converging toward a central compass rose, muted teals and greys, clean geometric line art +4. Top-down view of a mosaic floor pattern where each tile represents a different developer tool icon for Backstage IDP, all converging toward a central compass rose, muted teals and greys, clean geometric line art ### src/content/tags/crossplane/index.mdx -1. Isometric Kubernetes wheel at center with extending bridges connecting to floating cloud provider islands (AWS, Azure, GCP), each island holding miniature infrastructure icons, cool blue and teal palette, technical illustration style +1. Isometric Kubernetes wheel at center with extending bridges connecting to floating cloud provider islands (AWS, Azure, GCP), each island holding miniature infrastructure icons for Crossplane on Kubernetes, cool blue and teal palette, technical illustration style -2. Abstract circuit board pattern where traces flow from a central hub outward to modular resource blocks labeled with database, storage, and network symbols, dark background with glowing cyan pathways, flat vector art +2. Abstract circuit board pattern where traces flow from a central hub outward to modular resource blocks labeled with database, storage, and network symbols, dark background with glowing cyan pathways for Crossplane on Kubernetes, flat vector art -3. Mechanical loom weaving threads of different colors (orange, blue, green representing cloud providers) into a single unified fabric, detailed technical drawing with steel and copper tones +3. Mechanical loom weaving threads of different colors (orange, blue, green representing cloud providers) into a single unified fabric for Crossplane on Kubernetes, detailed technical drawing with steel and copper tones -4. Top-down view of a crossroads intersection where four roads converge, each road carrying stylized infrastructure symbols toward the center meeting point, clean geometric line art on slate background +4. Top-down view of a crossroads intersection where four roads converge, each road carrying stylized infrastructure symbols toward the center meeting point for Crossplane on Kubernetes, clean geometric line art on slate background ### src/content/tags/docker/index.mdx -1. Isometric shipping dock scene with neatly stacked colorful containers on a platform, a small crane organizing them into rows, ocean-blue background fading to white, clean technical illustration style +1. Isometric shipping dock scene with neatly stacked colorful containers on a platform, a small crane organizing them into, gives idea of Docker container engine, ocean-blue background fading to white, clean technical illustration style -2. Abstract cross-section of a container showing layered horizontal strata in different blue tones, each layer labeled with tiny dependency symbols, dark navy background, flat vector art with clean edges +2. Abstract cross-section of a container showing layered horizontal strata in different blue tones, each layer labeled with tiny dependency symbols, gives idea of Docker container engine, dark navy background, flat vector art with clean edges -3. Mechanical conveyor belt carrying sealed boxes through stages labeled build, scan, sign, and deploy, industrial steel and blue palette, detailed technical drawing style +3. Mechanical conveyor belt carrying sealed boxes through stages labeled build, scan, sign, and deploy, industrial steel and blue palette, gives idea of Docker container engine, detailed technical drawing style -4. Top-down view of a warehouse floor plan with modular storage units arranged in a perfect grid, pathways connecting them to a central dispatch hub, cool blue and grey geometric line art +4. Top-down view of a warehouse floor plan with modular storage units arranged in a perfect grid, pathways connecting them to a central dispatch hub, gives idea of Docker container engine, cool blue and grey geometric line art ### src/content/tags/dotnet/index.mdx -1. Isometric purple crystal structure with faceted surfaces, each face etched with code symbols and curly braces, floating above a grid of microservice nodes connected by glowing lines, deep purple and white palette, technical illustration style +1. Isometric purple crystal structure with faceted surfaces, each face etched with code symbols and curly braces, floating above a grid of microservice nodes connected by glowing lines, represents Microsoft .NET, deep purple and white palette, technical illustration style -2. Abstract molecular model with interconnected spheres forming the shape of a hexagonal lattice, each node containing a tiny gear or API symbol, violet and silver tones on dark background, flat vector art +2. Abstract molecular model with interconnected spheres forming the shape of a hexagonal lattice, each node containing a tiny gear or API symbol, represents Microsoft .NET, violet and silver tones on dark background, flat vector art -3. Mechanical typewriter with keys shaped like code blocks, a sheet of paper emerging with structured log output, purple ribbon and steel frame, detailed vintage technical drawing style +3. Mechanical typewriter with keys shaped like code blocks, a sheet of paper emerging with structured log output, purple ribbon and steel frame, represents Microsoft .NET, detailed vintage technical drawing style -4. Bird's-eye view of a railway switching yard where tracks branch and merge, each track carrying cargo labeled with service names, purple and grey industrial palette, clean geometric line art +4. Bird's-eye view of a railway switching yard where tracks branch and merge, each track carrying cargo labeled with service names, represents Microsoft .NET, purple and grey industrial palette, clean geometric line art ### src/content/tags/go/index.mdx -1. Isometric scene of a small gopher character operating a control panel with levers and switches connected to floating infrastructure cubes representing services, light blue and white palette, playful technical illustration style +1. Isometric scene of a small gopher character operating a control panel with levers and switches connected to floating infrastructure cubes representing services, represents Go programming language, light blue and white palette, playful technical illustration style -2. Abstract speed lines radiating from a central compiled binary icon, surrounded by orbiting symbols for containers, APIs, and CLIs, teal and cyan on dark background, flat vector art with motion emphasis +2. Abstract speed lines radiating from a central compiled binary icon, surrounded by orbiting symbols for containers, APIs, and CLIs, represents Go programming language, teal and cyan on dark background, flat vector art with motion emphasis -3. Mechanical assembly line where identical toolboxes roll off a conveyor belt, each stamped with a different infrastructure icon, clean steel and sky-blue tones, precise engineering diagram style +3. Mechanical assembly line where identical toolboxes roll off a conveyor belt, each stamped with a different infrastructure icon, represents Go programming language, clean steel and sky-blue tones, precise engineering diagram style -4. Top-down view of a river delta splitting into clean parallel channels, each channel carrying data packets toward different infrastructure endpoints, natural blue-green palette rendered in geometric line art +4. Top-down view of a river delta splitting into clean parallel channels, each channel carrying data packets toward different infrastructure endpoints, represents Go programming language, natural blue-green palette rendered in geometric line art ### src/content/tags/grafana/index.mdx -1. Isometric control room with multiple floating holographic screens showing time-series graphs, heatmaps, and gauges, warm orange and amber glow against a dark background, technical illustration style +1. Isometric control room with multiple floating holographic screens showing time-series graphs, heatmaps, and gauges, represents Grafana, warm orange and amber glow against a dark background, technical illustration style -2. Abstract sundial face with concentric rings representing metric thresholds, the shadow hand pointing to an alert zone, burnt orange and charcoal palette, flat vector art with geometric precision +2. Abstract sundial face with concentric rings representing metric thresholds, the shadow hand pointing to an alert zone, represents Grafana, burnt orange and charcoal palette, flat vector art with geometric precision -3. Mechanical gauge cluster like a vintage airplane instrument panel, each dial showing a different observability signal (latency, errors, throughput), copper and amber tones, detailed technical drawing +3. Mechanical gauge cluster like a vintage airplane instrument panel, each dial showing a different observability signal (latency, errors, throughput), represents Grafana, copper and amber tones, detailed technical drawing -4. Top-down view of a mosaic pattern made from interlocking dashboard tiles of varying sizes, each containing miniature chart patterns, warm gradient from orange to gold on dark slate, clean geometric line art +4. Top-down view of a mosaic pattern made from interlocking dashboard tiles of varying sizes, each containing miniature chart patterns, represents Grafana, warm gradient from orange to gold on dark slate, clean geometric line art ### src/content/tags/helm/index.mdx -1. Isometric ship's wheel mounted on a platform, each spoke ending in a floating Kubernetes resource icon (pod, service, configmap), nautical blue and white palette, technical illustration style +1. Isometric ship's wheel mounted on a platform, each spoke ending in a floating Kubernetes resource icon (pod, service, configmap), represents Helm package manager, nautical blue and white palette, technical illustration style -2. Abstract blueprint of a package being unwrapped to reveal layered manifest sheets stacked neatly inside, each sheet showing YAML-like grid patterns, navy and silver tones on dark background, flat vector art +2. Abstract blueprint of a package being unwrapped to reveal layered manifest sheets stacked neatly inside, each sheet showing YAML-like grid patterns, represents Helm package manager, navy and silver tones on dark background, flat vector art -3. Mechanical compass rose with an anchor at center, cardinal points labeled with deployment lifecycle stages (template, install, upgrade, rollback), brass and ocean blue tones, detailed nautical engineering drawing +3. Mechanical compass rose with an anchor at center, cardinal points labeled with deployment lifecycle stages (template, install, upgrade, rollback), represents Helm package manager, brass and ocean blue tones, detailed nautical engineering drawing -4. Top-down view of a harbor with docked vessels arranged in versioned rows, cargo cranes loading configuration crates onto each ship, cool blue-grey maritime palette, clean geometric line art +4. Top-down view of a harbor with docked vessels arranged in versioned rows, cargo cranes loading configuration crates onto each ship, represents Helm package manager, cool blue-grey maritime palette, clean geometric line art ### src/content/tags/kubernetes/index.mdx -1. Isometric seven-spoke ship's wheel floating above a sea of hexagonal pod cells, each cell glowing with a tiny container icon, deep blue and white palette, technical illustration style +1. Isometric seven-spoke ship's wheel floating above a sea of hexagonal pod cells, each cell glowing with a tiny container icon, represents Kubernetes, deep blue and white palette, technical illustration style -2. Abstract orbital diagram with a central control-plane nucleus orbited by worker-node rings, each ring carrying workload particles along defined paths, navy and electric blue on dark background, flat vector art +2. Abstract orbital diagram with a central control-plane nucleus orbited by worker-node rings, each ring carrying workload particles along defined paths, represents Kubernetes, navy and electric blue on dark background, flat vector art -3. Mechanical clockwork mechanism with interlocking gears labeled schedule, reconcile, and scale, a central flywheel bearing the seven-spoke wheel emblem, steel blue and silver tones, detailed engineering drawing +3. Mechanical clockwork mechanism with interlocking gears labeled schedule, reconcile, and scale, a central flywheel bearing the seven-spoke wheel emblem, represents Kubernetes, steel blue and silver tones, detailed engineering drawing -4. Bird's-eye view of a hexagonal honeycomb grid where each cell contains a different workload symbol, pathways between cells forming a network mesh, cool blue gradient on slate background, clean geometric line art +4. Bird's-eye view of a hexagonal honeycomb grid where each cell contains a different workload symbol, pathways between cells forming a network mesh, represents Kubernetes, cool blue gradient on slate background, clean geometric line art ### src/content/tags/openstack/index.mdx -1. Isometric data center building cross-section showing stacked infrastructure layers (compute, network, storage) in red and white, tiny server racks visible inside each layer, clean technical illustration style +1. Isometric data center building cross-section showing stacked infrastructure layers (compute, network, storage) in red and white, tiny server racks visible inside each layer, represents OpenStack cloud platform, clean technical illustration style -2. Abstract layered cake diagram with each tier a different shade of red, connected by vertical data pipes, the top tier radiating API endpoint symbols, dark background with warm red accents, flat vector art +2. Abstract layered cake diagram with each tier a different shade of red, connected by vertical data pipes, the top tier radiating API endpoint symbols, represents OpenStack cloud platform, dark background with warm red accents, flat vector art -3. Mechanical elevator shaft cross-section with platforms at different levels carrying infrastructure components (VMs, switches, disks), industrial red and steel grey tones, detailed engineering drawing style +3. Mechanical elevator shaft cross-section with platforms at different levels carrying infrastructure components (VMs, switches, disks), represents OpenStack cloud platform, industrial red and steel grey tones, detailed engineering drawing style -4. Top-down view of a modular floor plan with color-coded rooms for compute, networking, and storage, hallways connecting all rooms to a central identity hub, warm red and white palette, clean geometric line art +4. Top-down view of a modular floor plan with color-coded rooms for compute, networking, and storage, hallways connecting all rooms to a central identity hub, represents OpenStack cloud platform, warm red and white palette, clean geometric line art ### src/content/tags/prometheus/index.mdx -1. Isometric torch or flame beacon on a stone pedestal, radiating concentric rings of time-series data waves outward, warm orange and ember tones against dark background, technical illustration style +1. Isometric torch or flame beacon on a stone pedestal, radiating concentric rings of time-series data waves outward, represents Prometheus monitoring, warm orange and ember tones against dark background, technical illustration style -2. Abstract circular gauge with a flame icon at center, needle arcs showing metric thresholds from green through amber to red, surrounded by floating label tag chips, dark background with warm accents, flat vector art +2. Abstract circular gauge with a flame icon at center, needle arcs showing metric thresholds from green through amber to red, represents Prometheus monitoring, surrounded by floating label tag chips, dark background with warm accents, flat vector art -3. Mechanical seismograph with a pen drawing continuous waveforms on scrolling paper, each waveform in a different warm tone representing different metric types, copper and flame-orange palette, detailed technical drawing +3. Mechanical seismograph with a pen drawing continuous waveforms on scrolling paper, each waveform in a different warm tone representing different metric types, represents Prometheus monitoring, copper and flame-orange palette, detailed technical drawing -4. Top-down view of a radar screen with concentric range rings, blips representing scraped targets arranged in clusters, warm amber glow on dark navy background, clean geometric line art +4. Top-down view of a radar screen with concentric range rings, blips representing scraped targets arranged in clusters, represents Prometheus monitoring, warm amber glow on dark navy background, clean geometric line art ### src/content/tags/python/index.mdx -1. Isometric workshop bench with two intertwined snake sculptures made of coiled cable, surrounded by miniature tools representing cloud SDKs and CLI utilities, blue and gold palette, technical illustration style +1. Isometric workshop bench with two intertwined snake sculptures made of coiled cable, surrounded by miniature tools representing Python cloud SDKs and CLI utilities, blue and gold palette, technical illustration style -2. Abstract double helix formed from two serpentine ribbons weaving through automation pipeline stages (script, test, deploy, monitor), blue and yellow on dark background, flat vector art +2. Abstract double helix formed from two serpentine ribbons weaving through automation pipeline stages (script, test, deploy, monitor), represents Python programming language, blue and yellow on dark background, flat vector art -3. Mechanical telegraph machine with Python-blue keys and golden connectors, ticker tape emerging with infrastructure command output, warm brass and blue tones, detailed vintage technical drawing +3. Mechanical telegraph machine with Python-blue keys and golden connectors, ticker tape emerging with infrastructure command output, represents Python programming language, warm brass and blue tones, technical illustration style -4. Top-down view of a branching river system where two streams intertwine and split repeatedly, carrying automation task icons downstream through a landscape of infrastructure nodes, blue and gold watercolor rendered as geometric line art +4. Top-down view of a branching river system where two streams intertwine and split repeatedly, carrying automation task icons downstream through a landscape of infrastructure nodes, represents Python programming language, blue and gold watercolor rendered as geometric line art ### src/content/tags/ruby/index.mdx -1. Isometric cut gemstone with faceted surfaces, each facet reflecting miniature infrastructure code blocks, deep red and crimson palette with white highlights, technical illustration style +1. Isometric cut gemstone with faceted surfaces, each facet reflecting miniature infrastructure code blocks, represents Ruby programming language, deep red and crimson palette with white highlights, technical illustration style -2. Abstract crystalline structure with hexagonal faces arranged in a gem formation, internal light refracting into configuration management symbols, rich ruby red on dark background, flat vector art +2. Abstract crystalline structure with hexagonal faces arranged in a gem formation, internal light refracting into configuration management symbols, represents Ruby programming language, rich ruby red on dark background, flat vector art -3. Mechanical jeweler's workbench with a magnifying loupe over a gemstone being polished, tiny automation script engravings visible on the gem surface, warm red and brass tones, detailed vintage technical drawing +3. Mechanical jeweler's workbench with a magnifying loupe over a gemstone being polished, tiny automation script engravings visible on the gem surface, represents Ruby programming language, warm red and brass tones, detailed vintage technical drawing -4. Top-down view of a gem mine cross-section showing layered strata, each layer containing embedded tool icons (chef's hat, puppet strings, vagrant box), deep red and earth tones, clean geometric line art +4. Top-down view of a gem mine cross-section showing layered strata, each layer containing embedded tool icons (chef's hat, puppet strings, vagrant box), represents Ruby programming language, deep red and earth tones, clean geometric line art ### src/content/tags/terraform/index.mdx -1. Isometric landscape of interlocking purple hexagonal platforms at different heights, each platform holding miniature cloud infrastructure icons, connected by bridges and pathways, violet and white palette, technical illustration style +1. Isometric landscape of interlocking purple hexagonal platforms at different heights, each platform holding miniature network symbols, connected by bridges and pathways, represents Terraform, violet and white palette, technical illustration style -2. Abstract tessellation of hexagons in varying purple shades, each containing a provider logo silhouette (cloud, database, network), forming a cohesive mosaic on dark background, flat vector art +2. Abstract tessellation of hexagons in varying purple shades, each containing a provider logo silhouette (cloud, database, network), represents Terraform infrastructure as code, forming a cohesive mosaic on dark background, flat vector art -3. Mechanical drafting table with a hexagonal grid ruler and compass, infrastructure blueprints being drawn in precise purple ink, showing plan and apply annotations, detailed technical drawing style +3. Mechanical drafting table with a hexagonal grid ruler and compass, infrastructure blueprints being drawn in precise purple ink, represents Terraform, showing plan and apply annotations, technical drawing style -4. Top-down view of a terraced hillside farm where each terrace is a hexagonal plot containing different infrastructure crops, connected by irrigation channels representing state flow, purple and lavender palette, clean geometric line art +4. Draw a top-down view of a terraced hillside farm where each terrace is a hexagonal plot containing different infrastructure crops, connected by irrigation channels representing state flow, represents Terraform infrastructure as code, purple and lavender palette, clean geometric line art ### src/content/tags/typescript/index.mdx -1. Isometric shield badge with the TypeScript "TS" monogram embossed at center, surrounded by floating type definition cards showing interface and type annotations, blue and white palette, technical illustration style +1. Isometric shield badge with the TypeScript "TS" monogram embossed at center, surrounded by floating type definition cards showing interface and type annotations, represents TypeScript programming language, blue and white palette, technical illustration style + +2. Abstract circuit board where traces form curly-brace and angle-bracket patterns, key junction points marked with type symbols (string, number, interface), represents TypeScript programming language, deep blue on dark background, flat vector art with glowing traces + +3. Mechanical typesetting press with movable type blocks arranged to spell out interface definitions, each block precisely machined in steel blue metal, represents TypeScript programming language, technical illustration style + +4. Top-down view of an architectural floor plan where rooms are shaped like nested type brackets, each room containing miniature infrastructure tool icons, represents TypeScript programming language, clean blue and white palette, precise geometric line art -2. Abstract circuit board where traces form curly-brace and angle-bracket patterns, key junction points marked with type symbols (string, number, interface), deep blue on dark background, flat vector art with glowing traces -3. Mechanical typesetting press with movable type blocks arranged to spell out interface definitions, each block precisely machined in steel blue metal, detailed vintage technical drawing style -4. Top-down view of an architectural floor plan where rooms are shaped like nested type brackets, each room containing miniature infrastructure tool icons, clean blue and white palette, precise geometric line art diff --git a/_TODO.md b/_TODO.md index 7c998eb76..0636eab8f 100644 --- a/_TODO.md +++ b/_TODO.md @@ -32,6 +32,11 @@ Axe accessibility (2) - axe-core integration - Code/CodeTabs - Consent/Checkbox +## Newsletter future plans + +- Make the Newsletter a list view page +- Add newsletters as Markdown. Publish to HubSpot from Markdown over API? + ## Testimonials on mobile We have E2E errors again testimonials slide on mobile chrome and safari. I think the problem is that we are pausing carousels when part of the carousel is outside of the viewport, and the testimonials are too large to display on mobile without being off viewport. @@ -264,8 +269,7 @@ This article has different approaches to [print pagination](https://www.customjs - Social shares - module CSS doesn't appear correct with nested button hover classes, not sure how network name is generated or styled but it needs improvement. Should be rendered inside article content column, not across both content and TOC columns. - - ### Component Stylings +### Component Stylings The bottom margin issues on CTAs need to handle paragraphs differently than headers. Headers are properly spaced now; paragraphs are flush with the CTA with no top margin. @@ -276,5 +280,3 @@ The bottom margin issues on CTAs need to handle paragraphs differently than head - Callouts should get round corners like the Download and Newsletter CTAs - Tags need styled at the top of articles item view pages - - diff --git a/src/components/Consent/Checkbox/@types/index.d.ts b/src/components/Consent/Checkbox/@types/index.d.ts index 63d07e25e..9bdddd458 100644 --- a/src/components/Consent/Checkbox/@types/index.d.ts +++ b/src/components/Consent/Checkbox/@types/index.d.ts @@ -14,5 +14,5 @@ export interface ConsentCheckboxProps { /** Form identifier (for tracking in consent logs) */ formId?: string /** Layout variants */ - variant: 'default' | 'newsletter-cta-home' | 'newsletter-cta-article' + variant: 'default' | 'newsletter-cta-home' | 'newsletter-cta-article' | 'download' } diff --git a/src/components/Consent/Checkbox/download.astro b/src/components/Consent/Checkbox/download.astro new file mode 100644 index 000000000..3c68ec299 --- /dev/null +++ b/src/components/Consent/Checkbox/download.astro @@ -0,0 +1,89 @@ +--- +/** + * GDPR Consent Component Download Layout + */ + +import type { ConsentCheckboxProps } from './@types' + +export type Props = Omit + +const { + purpose, + privacyPolicyUrl, + cookiePolicyUrl, + name, + id, + formId, +} = Astro.props +--- + +
+ + + + + + + +
diff --git a/src/components/Consent/Checkbox/index.astro b/src/components/Consent/Checkbox/index.astro index 0a1eb38bc..f585e668f 100644 --- a/src/components/Consent/Checkbox/index.astro +++ b/src/components/Consent/Checkbox/index.astro @@ -17,6 +17,7 @@ import type { ConsentCheckboxProps } from './@types' export type Props = ConsentCheckboxProps import DefaultCheckbox from './default.astro' +import DownloadCheckbox from './download.astro' import NewsletterCtaArticleCheckbox from './newsletter-cta-article.astro' import NewsletterCtaHomeCheckbox from './newsletter-cta-home.astro' @@ -68,6 +69,16 @@ const optionalProps = { {...optionalProps} /> )} + {variant === 'download' && ( + + )} diff --git a/src/components/Icon/icons/book.astro b/src/components/Icon/icons/book.astro new file mode 100644 index 000000000..6545e4efc --- /dev/null +++ b/src/components/Icon/icons/book.astro @@ -0,0 +1,30 @@ +--- +export type Props = { + color: string + classes?: string + size: number + accessible: boolean + focusable: boolean + isListMarker?: boolean +} + +const { color, classes, size, accessible, focusable, isListMarker } = Astro.props +--- + + + {accessible && User Avatar Icon} + + diff --git a/src/components/Icon/icons/file.astro b/src/components/Icon/icons/file.astro new file mode 100644 index 000000000..25e34deea --- /dev/null +++ b/src/components/Icon/icons/file.astro @@ -0,0 +1,30 @@ +--- +export type Props = { + color: string + classes?: string + size: number + accessible: boolean + focusable: boolean + isListMarker?: boolean +} + +const { color, classes, size, accessible, focusable, isListMarker } = Astro.props +--- + + + {accessible && User Avatar Icon} + + diff --git a/src/components/List/index.astro b/src/components/List/index.astro index 1b73a342d..2de65f946 100644 --- a/src/components/List/index.astro +++ b/src/components/List/index.astro @@ -5,6 +5,7 @@ import CardGridList from '@components/List/layouts/CardGridList.astro' import CheckIconsList from '@components/List/layouts/CheckIconsList.astro' import ChevronList from '@components/List/layouts/ChevronList.astro' import ColoredMarkerList from '@components/List/layouts/ColoredMarkerList.astro' +import DownloadPageList from '@components/List/layouts/DownloadPageList.astro' import NumberedWithBackgroundList from '@components/List/layouts/NumberedWithBackgroundList.astro' import PlainIconList from '@components/List/layouts/PlainIconList.astro' import SideBySideList from '@components/List/layouts/SideBySideList.astro' @@ -65,6 +66,7 @@ const itemsWithIconAndColor = items as Array<{ {variant === 'check-icons-list' && } {variant === 'chevron-list' && } {variant === 'colored-marker-list' && } +{variant === 'download-page-list' && } {variant === 'numbered-with-background-list' && } {variant === 'plain-icon-list' && } {variant === 'side-by-side-list' && } diff --git a/src/components/List/layouts/CheckIconsList.astro b/src/components/List/layouts/CheckIconsList.astro index 83f332994..91cd54488 100644 --- a/src/components/List/layouts/CheckIconsList.astro +++ b/src/components/List/layouts/CheckIconsList.astro @@ -27,7 +27,7 @@ const emClass = ["text-content font-semibold not-italic", classes?.em]
  • diff --git a/src/components/List/layouts/DownloadPageList.astro b/src/components/List/layouts/DownloadPageList.astro new file mode 100644 index 000000000..ccd50ccc3 --- /dev/null +++ b/src/components/List/layouts/DownloadPageList.astro @@ -0,0 +1,25 @@ +--- +import Icon from "@components/Icon/index.astro" + +export type Props = { + items: { + text: string + }[] +} + +const { items } = Astro.props + +const ulClass = ["space-y-3 ml-4 mr-4 md:mr-20 my-4"] +const liClass = ["flex items-start gap-3"] +--- + +
      + { + items.map(({ text }) => ( +
    • + + {text} +
      • + )) + } +
    diff --git a/src/components/List/layouts/PlainIconList.astro b/src/components/List/layouts/PlainIconList.astro index 7ab449724..723065038 100644 --- a/src/components/List/layouts/PlainIconList.astro +++ b/src/components/List/layouts/PlainIconList.astro @@ -32,4 +32,4 @@ const markerClasses = props.classes?.svg
    • )) } - \ No newline at end of file + diff --git a/src/components/Pages/Download/client/__tests__/__fixtures__/downloadForm.fixture.astro b/src/components/Pages/Download/client/__tests__/__fixtures__/downloadForm.fixture.astro new file mode 100644 index 000000000..a4528b766 --- /dev/null +++ b/src/components/Pages/Download/client/__tests__/__fixtures__/downloadForm.fixture.astro @@ -0,0 +1,45 @@ +--- +--- + + +
    +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + + + + + + +
    +     diff --git a/src/components/Forms/Download/client/__tests__/index.spec.ts b/src/components/Pages/Download/client/__tests__/index.spec.ts similarity index 100% rename from src/components/Forms/Download/client/__tests__/index.spec.ts rename to src/components/Pages/Download/client/__tests__/index.spec.ts diff --git a/src/components/Forms/Download/client/__tests__/selectors.spec.ts b/src/components/Pages/Download/client/__tests__/selectors.spec.ts similarity index 99% rename from src/components/Forms/Download/client/__tests__/selectors.spec.ts rename to src/components/Pages/Download/client/__tests__/selectors.spec.ts index 07621de1b..936de4967 100644 --- a/src/components/Forms/Download/client/__tests__/selectors.spec.ts +++ b/src/components/Pages/Download/client/__tests__/selectors.spec.ts @@ -11,7 +11,7 @@ import { getDownloadSubmitButton, getDownloadWorkEmailInput, queryDownloadFormInvalidatableControls, -} from '@components/Forms/Download/client/selectors' +} from '@components/Pages/Download/client/selectors' import { isButtonElement, isDivElement, diff --git a/src/components/Forms/Download/client/__tests__/testUtils.ts b/src/components/Pages/Download/client/__tests__/testUtils.ts similarity index 91% rename from src/components/Forms/Download/client/__tests__/testUtils.ts rename to src/components/Pages/Download/client/__tests__/testUtils.ts index dd9e9d620..9b7b26aa1 100644 --- a/src/components/Forms/Download/client/__tests__/testUtils.ts +++ b/src/components/Pages/Download/client/__tests__/testUtils.ts @@ -1,8 +1,8 @@ import { expect } from 'vitest' import { experimental_AstroContainer as AstroContainer } from 'astro/container' import { TestError } from '@test/errors' -import DownloadFormFixture from '@components/Forms/Download/client/__tests__/__fixtures__/downloadForm.fixture.astro' -import type { DownloadFormElement } from '@components/Forms/Download/client' +import DownloadFormFixture from '@components/Pages/Download/client/__tests__/__fixtures__/downloadForm.fixture.astro' +import type { DownloadFormElement } from '@components/Pages/Download/client' import { getDownloadButtonWrapper, getDownloadCompanyNameInput, @@ -13,7 +13,7 @@ import { getDownloadStatusDiv, getDownloadSubmitButton, getDownloadWorkEmailInput, -} from '@components/Forms/Download/client/selectors' +} from '@components/Pages/Download/client/selectors' import type { WebComponentModule } from '@components/scripts/@types/webComponentModule' import { executeRender } from '@test/unit/helpers/litRuntime' @@ -48,7 +48,7 @@ export const renderDownloadForm = async (assertion: RenderDownloadFormAssertion) await executeRender({ container, component: DownloadFormFixture, - moduleSpecifier: '@components/Forms/Download/client/index', + moduleSpecifier: '@components/Pages/Download/client/index', selector: 'download-form', assert: async ({ element, module, window, renderResult }) => { if (!window) { diff --git a/src/components/Forms/Download/client/index.ts b/src/components/Pages/Download/client/index.ts similarity index 100% rename from src/components/Forms/Download/client/index.ts rename to src/components/Pages/Download/client/index.ts diff --git a/src/components/Forms/Download/client/selectors.ts b/src/components/Pages/Download/client/selectors.ts similarity index 100% rename from src/components/Forms/Download/client/selectors.ts rename to src/components/Pages/Download/client/selectors.ts diff --git a/src/components/Pages/Download/download-icon.jpg b/src/components/Pages/Download/download-icon.jpg new file mode 100644 index 000000000..addd72290 Binary files /dev/null and b/src/components/Pages/Download/download-icon.jpg differ diff --git a/src/components/Pages/Download/index.astro b/src/components/Pages/Download/index.astro new file mode 100644 index 000000000..de7575c3a --- /dev/null +++ b/src/components/Pages/Download/index.astro @@ -0,0 +1,275 @@ +--- +import { Picture } from 'astro:assets' +import { type CollectionEntry, render } from 'astro:content' +import Confetti from '@components/Animations/Confetti/index.astro' +import GDPRConsent from '@components/Consent/Checkbox/index.astro' +import Icon from '@components/Icon/index.astro' +import List from '@components/List/index.astro' + +import './index.css' + +const Components = { List } + +export interface Props { + download: CollectionEntry<'downloads'> + content: { + header: { + title: string + description: string + } + } +} + +const { download, content } = Astro.props as Props + +const { + cover, + coverAlt, + fileName, + fileType, + fileSize, + pages, + title, +} = download.data + +const { Content } = await render(download) + +const normalizedDownloadUrl = `/downloads/${fileName}` +--- + + +
    +
    + +
    +

    {content.header.title}

    +
    + + {/* Two-column layout on desktop: info left, form right */} +
    + {/* Left column: cover, meta, content */} +
    +
    + { + cover && ( +
    + +
    + ) + } + + {/* Resource Meta Information */} +
    +

    + {content.header.description} +

    + +
    +
    + +
    File type
    +
    {fileType}
    +
    + { + pages && ( +
    + +
    Pages
    +
    {pages} pages
    +
    + ) + } + { + fileSize && ( +
    + +
    File size
    +
    {fileSize}
    +
    + ) + } +
    +
    +
    + +
    + +
    +
    {/* end left column */} + + {/* Right column: download form */} +
    +
    +
    +

    {title}

    +

    + Fill out the form below to receive your {fileType.toLowerCase()} instantly. +

    +
    + +
    +
    + {/* First Name */} +
    + + +
    + + {/* Last Name */} +
    + + +
    +
    + + {/* Work Email */} +
    + + +
    + + {/* GDPR Consent */} + + + {/* Privacy Notice */} +
    +

    + By submitting this form, you agree to receive marketing communications from Webstack + Builders. You can unsubscribe at any time. View our + + Privacy Policy + . +

    +
    + + {/* Submit Button */} + +
    + +
    +     + + {/* Download Button (hidden until form is successfully submitted) */} + + + {/* Status Messages */} + + +
    +
    {/* end right column */} +
    {/* end two-column grid */} +     + + diff --git a/src/components/Pages/Download/index.css b/src/components/Pages/Download/index.css new file mode 100644 index 000000000..68bf19467 --- /dev/null +++ b/src/components/Pages/Download/index.css @@ -0,0 +1,13 @@ +#downloadFormStatus.success { + background-color: var(--color-success-inverse); + border: 1px solid var(--color-success-offset); + color: var(--color-success); + display: block; +} + +#downloadFormStatus.error { + background-color: var(--color-danger-inverse); + border: 1px solid var(--color-danger-offset); + color: var(--color-danger); + display: block; +} diff --git a/src/content.config.ts b/src/content.config.ts index 9f6f5931d..6e45e4ccb 100644 --- a/src/content.config.ts +++ b/src/content.config.ts @@ -104,7 +104,6 @@ const downloadsCollection = defineCollection({ fileType: z.enum(['PDF', 'eBook', 'Whitepaper', 'Guide', 'Report', 'Template']), pages: z.number().optional(), readingTime: z.string().optional(), - showToc: z.boolean().default(false), }), 'downloads' ), diff --git a/src/content/articles/alert-fatigue-reduction-triage-actionable-alerts/download.jpg b/src/content/articles/alert-fatigue-reduction-triage-actionable-alerts/download.jpg new file mode 100644 index 000000000..fed1b3db0 Binary files /dev/null and b/src/content/articles/alert-fatigue-reduction-triage-actionable-alerts/download.jpg differ diff --git a/src/content/articles/alert-fatigue-reduction-triage-actionable-alerts/download.mdx b/src/content/articles/alert-fatigue-reduction-triage-actionable-alerts/download.mdx index ac9c46159..f32f042dc 100644 --- a/src/content/articles/alert-fatigue-reduction-triage-actionable-alerts/download.mdx +++ b/src/content/articles/alert-fatigue-reduction-triage-actionable-alerts/download.mdx @@ -2,14 +2,14 @@ title: "Download Your Alert Fatigue Reduction Guide" description: "Get the e-book: Systematic triage to reduce alert noise and make the alerts that remain actually actionable." author: "kevin-brown" -cover: "./cover.jpg" +cover: "./download.jpg" coverAlt: "Radar screen showing single bright alert ping surrounded by faded noise halo, representing critical actionable cloud monitoring alert" -publishDate: 2025-10-05 isDraft: false -fileType: "Whitepaper" +publishDate: 2025-10-05 +fileName: "*.pdf" fileSize: "2.3 MB" +fileType: "Whitepaper" pages: 24 -fileName: "*.pdf" --- On-call rotations with high alert volume drain engineers and slow incident response. An audit found one team managing 47 alerts per 24-hour shift—44 required no action, while the real issue went unnoticed in the noise. @@ -18,12 +18,17 @@ This complete guide walks you through the systematic process used to reduce a 20 Read this e-book to understand: -- The quantifiable cost of alert fatigue (MTTA, action rate, burnout indicators) -- How to audit and inventory your alerts systematically -- Classification frameworks for separating signal from noise -- Threshold tuning strategies that adapt to your actual traffic patterns -- Aggregation and grouping techniques to consolidate related alerts -- Inhibition rules to suppress downstream consequences -- Long-term maintenance practices to prevent alert creep + Download Your Alert Fatigue Reduction Guide now to implement a sustainable on-call system where alerts actually matter. diff --git a/src/content/articles/api-deprecation-sunset-headers-consumer-migration/download.jpg b/src/content/articles/api-deprecation-sunset-headers-consumer-migration/download.jpg new file mode 100644 index 000000000..1bac9fba8 Binary files /dev/null and b/src/content/articles/api-deprecation-sunset-headers-consumer-migration/download.jpg differ diff --git a/src/content/articles/api-deprecation-sunset-headers-consumer-migration/download.mdx b/src/content/articles/api-deprecation-sunset-headers-consumer-migration/download.mdx index 0d8cde76d..ce3d970ba 100644 --- a/src/content/articles/api-deprecation-sunset-headers-consumer-migration/download.mdx +++ b/src/content/articles/api-deprecation-sunset-headers-consumer-migration/download.mdx @@ -2,7 +2,7 @@ title: "Download Your API Deprecation Playbook" description: "Get the e-book: Sunset headers, usage tracking, and migration incentives that actually get consumers off deprecated endpoints." author: "kevin-brown" -cover: "./cover.jpg" +cover: "./download.jpg" coverAlt: "Countdown timer showing 30 days remaining with API traffic streams redirecting from deprecated endpoints to new endpoints" publishDate: 2023-06-04 isDraft: false @@ -18,13 +18,18 @@ This complete guide walks you through the full deprecation lifecycle and the org Read this e-book to understand: -- Realistic timeline guidance based on consumer type (internal, external, enterprise) -- RFC 8594 Sunset headers and Deprecation headers as technical foundations -- Usage tracking systems to identify which consumers still depend on deprecated endpoints -- Migration support strategies that reduce friction for consumers -- Communication tactics that move consumers from awareness to action -- Enforcement mechanisms—read-only modes, graduated restrictions, and final removal -- How to handle contractual obligations and political pressure -- Real-world lessons from successful large-scale deprecations + Download Your API Deprecation Playbook now to move deprecated endpoints from "technically sunset" to actually removed. diff --git a/src/content/articles/api-gateway-metrics-traces-logs-debugging/download.jpg b/src/content/articles/api-gateway-metrics-traces-logs-debugging/download.jpg new file mode 100644 index 000000000..65077a98e Binary files /dev/null and b/src/content/articles/api-gateway-metrics-traces-logs-debugging/download.jpg differ diff --git a/src/content/articles/api-gateway-metrics-traces-logs-debugging/download.mdx b/src/content/articles/api-gateway-metrics-traces-logs-debugging/download.mdx index 20826c555..dc9b549d2 100644 --- a/src/content/articles/api-gateway-metrics-traces-logs-debugging/download.mdx +++ b/src/content/articles/api-gateway-metrics-traces-logs-debugging/download.mdx @@ -2,7 +2,7 @@ title: "Download Your API Gateway Observability Guide" description: "Get the e-book: Metrics, traces, and logs from your gateway that help debug production issues instead of generating noise." author: "kevin-brown" -cover: "./cover.jpg" +cover: "./download.jpg" coverAlt: "API gateway shown as transparent structure with illuminated request path revealing internal components like auth, rate limiting, and routing" publishDate: 2024-09-01 isDraft: false @@ -18,14 +18,19 @@ This complete guide shows you how to instrument API gateways so the data actuall Read this e-book to understand: -- Why gateway observability is fundamentally different from service observability -- The RED method applied correctly to gateways with meaningful label dimensions -- Decomposing latency into gateway time vs. backend time vs. network time -- Distributed tracing that flows through the gateway boundary -- Structured logging with trace context for correlation across services -- Dashboard design for debugging rather than status page aesthetics -- Vendor-agnostic patterns using Kong Gateway, AWS API Gateway, and Envoy -- Real-world examples of metrics that revealed hidden problems -- Sampling strategies that capture rare errors without overwhelming your system +