Halving Codebase Duplication in Static Site Generators

In large-scale static site architectures, especially projects serving thousands of programmatic SEO landing pages such as 2,993 generated routes across duration views and multilingual hubs, markup duplication tends to grow invisibly. When a codebase scales across multiple sibling pages and shared layout files, repetitive boilerplate markup and stylesheet rules accumulate without immediate detection. During a recent static analysis audit using SonarCloud and jscpd, our codebase exhibited an overall duplication rate of 10.36 percent, representing 5,749 duplicated lines across 182 distinct clone clusters. Legal and compliance views each contained identical multi-line style blocks styling document layouts. Timer surface modals and interactive drawers were duplicated verbatim across four key presentation and timer routes. Stage widget markup, including announcement carousels and embedded video players, was repeated across various views. Global theme stylesheets duplicated numerous identical lines of CSS variables between default light theme selectors. While quality gates on new code passed initially, the cumulative technical debt posed high maintenance overhead and pushed repository metrics uncomfortably close to the 50,000 line free-tier ceiling of our static analysis tools. This article explores how to systematically detect, isolate, and collapse that duplication while keeping test suites fully green.

Architectural Decision and Trade-offs

Instead of attempting to micro-optimize small utility functions, we applied a high-impact Pareto extraction strategy. This approach focused on targeting large block clones first, since roughly 80 percent of codebase duplication typically resides in a small fraction of files, specifically inline modal dialogs, drawers, and repeated stylesheet blocks. We extracted all 12 modal backdrops and the realtime cheer drawer into a clean, dedicated component named TimerModals.astro consisting of 821 lines. We then extracted shared stage widgets like announcement slides and video players into StageWidgets.astro, parameterized with flexible props for internationalized layouts. Centralizing legal styling into a dedicated legal.css file imported once per document further reduced inline redundancy. In native CSS, we merged default light theme variables and light data-theme selectors into a unified selector block, leveraging CSS specificity to eliminate duplicate declarations without breaking dark mode operating system toggles. To protect test invariants during these refactorings, assertions that previously scanned raw template strings for specific DOM identifiers were upgraded to dynamically resolve child component imports, maintaining comprehensive coverage without coupling tests to strict file structures.

Implementing Component Extraction and CSS Merging

To see how this works in practice, consider the structural organization of duplicated modal templates in static site generators. Instead of repeating identical modal markup across multiple layout files, isolate the markup into a single parameterized component and import it where needed. The following example demonstrates how an Astro template imports a consolidated modal component and a centralized stylesheet:

---
import TimerModals from '../components/timer/TimerModals.astro';
import StageWidgets from '../components/timer/StageWidgets.astro';
import '../styles/legal.css';

const { pageTitle } = Astro.props;
---
<html lang="en">
  <head>
    <title>{pageTitle}</title>
  </head>
  <body>
    <main>
      <StageWidgets slidesLabel="Announcement" videoLabel="Player" />
    </main>
    <TimerModals />
  </body>
</html>

Similarly, CSS token redundancy can be solved by merging duplicate variable declarations. Instead of maintaining separate blocks for root and explicit light themes, combine them into a single rule set while handling dark mode through media queries:

:root, [data-theme="light"] {
  --color-bg: #ffffff;
  --color-text: #111111;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0b0f19;
    --color-text: #f3f4f6;
  }
}

This method keeps client DOM element identifiers stable, ensuring that existing client-side scripts, accessibility attributes, and end-to-end test selectors continue to function without requiring rewrites of interaction logic.

Verification and Test Suite Integrity

Refactoring massive template blocks carries the inherent risk of breaking downstream layouts or test assertions. To validate our deduplication effort without regressions, we executed a rigorous verification checklist across multiple validation tools. Running the duplication detector confirmed that repository duplication dropped from 10.36 percent down to 5.43 percent across the entire project. Total line count settled at 49,321 lines, placing the repository safely below the strict 50,000 line free-tier boundary. Unit test suites containing 109 individual assertions passed with zero failures. Linter and type check passes reported zero errors across all component files. Finally, executing 96 Playwright end-to-end browser interaction flows confirmed that all modal dialogs, drawer toggles, and UI components behaved correctly in a rendered browser environment. For a related implementation, see Executing A Thorough Technical Project Review.

Conclusion

Systematic codebase deduplication in static site generators requires targeting large structural blocks rather than chasing minor utility redundancies. By isolating repetitive modal dialogs into reusable components, unifying theme tokens, and updating test harnesses to verify composed trees, engineering teams can significantly lower duplication rates. This discipline preserves strict code analysis quotas, reduces maintenance overhead, and ensures that large programmatic websites remain robust and performant as they scale.