Skip to content

Refactor duplicated code across layouts, stylesheets, and JavaScript#110

Draft
Copilot wants to merge 4 commits intomasterfrom
copilot/refactor-duplicate-code-again
Draft

Refactor duplicated code across layouts, stylesheets, and JavaScript#110
Copilot wants to merge 4 commits intomasterfrom
copilot/refactor-duplicate-code-again

Conversation

Copy link
Copy Markdown

Copilot AI commented Oct 24, 2025 •
edited
Loading

Overview

This PR refactors duplicated code patterns across HTML layouts, SCSS stylesheets, and JavaScript files to improve maintainability and follow DRY (Don't Repeat Yourself) principles. All changes are pure refactoring with no functional modifications.

Changes

HTML Layout Consolidation

The _layouts/home.html file was duplicating the entire HTML boilerplate structure (DOCTYPE, html, head, body tags) from _layouts/default.html. This has been refactored:

Before:

<!DOCTYPE html>
<html lang="en">
{% include head.html %}
<body class="home">
  <!-- content -->
</body>
</html>

After:

---
layout: default
body_class: home
---
<!-- content -->

The default.html layout now supports an optional body_class parameter for flexible styling, making it reusable across all layouts.

CSS Refactoring

Created reusable SCSS placeholders in _sass/_base.scss to eliminate repeated transition and hover patterns:

%transition-slow {
  transition: all var(--base-trans-slow) ease-in-out;
}

%transition-base {
  transition: all var(--base-trans) ease-in-out;
}

%transition-mid {
  transition: all var(--base-trans-mid) ease-in-out;
}

%hover-brand-color:hover {
  color: var(--brand-color);
}

These placeholders replaced 10 duplicate CSS declarations throughout _sass/_layout.scss:

  • 6 transition declarations consolidated
  • 4 hover color declarations consolidated

Example transformation:

// Before
.home-navigation a {
  transition: all var(--base-trans-slow) ease-in-out;
}
.home-navigation a:hover {
  color: var(--brand-color);
}

// After
.home-navigation a {
  @extend %transition-slow;
  @extend %hover-brand-color;
}

JavaScript Refactoring

Extracted duplicated time calculation logic in assets/js/s.js:

Before:

const startTime = "now" in window.performance ? performance.now() : new Date().getTime();
// ... 30 lines later ...
const now = "now" in window.performance ? performance.now() : new Date().getTime();

After:

function getCurrentTime() {
  return "now" in window.performance ? performance.now() : new Date().getTime();
}

const startTime = getCurrentTime();
// ... 30 lines later ...
const now = getCurrentTime();

Benefits

  • Maintainability: Common patterns are now managed in single locations. Changes to transition timing or hover colors only need to be made once.
  • Code Quality: Follows DRY principles, reducing the risk of inconsistencies when updating styles.
  • Readability: Helper functions and placeholders make the code's intent clearer.
  • File Size: Net reduction of ~15 lines across 5 files.

Testing

  • ✅ Code review completed - all feedback addressed
  • ✅ Security scan completed - no vulnerabilities found
  • ✅ No functional changes - pure structural improvements
  • ✅ All existing styles and behaviors preserved

Files Changed

  • _layouts/default.html - Added body_class parameter support
  • _layouts/home.html - Refactored to extend default layout
  • _sass/_base.scss - Added reusable CSS placeholders
  • _sass/_layout.scss - Replaced duplicates with @extend
  • assets/js/s.js - Extracted getCurrentTime() helper function
Original prompt

Find and refactor duplicated code

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

Copilot AI and others added 3 commits October 24, 2025 19:25
@adrianmg
Refactor duplicated code in layouts and stylesheets
4b0104a 
- Consolidate HTML boilerplate by making home.html extend default.html
- Add support for body_class parameter in default layout
- Create reusable CSS placeholders for common transition patterns
- Create reusable CSS placeholder for brand color hover state
- Replace 6 duplicate transition declarations with @extend
- Replace 4 duplicate hover color declarations with @extend
- Reduce code duplication and improve maintainability

Co-authored-by: adrianmg <589285+adrianmg@users.noreply.github.com>
@adrianmg
Extract duplicated time calculation into helper function
3c19fbf 
- Create getCurrentTime() helper to eliminate code duplication
- Replace two identical time calculation expressions with function call
- Improve code maintainability and readability in scrollToItem function

Co-authored-by: adrianmg <589285+adrianmg@users.noreply.github.com>
@adrianmg
Fix comment formatting for consistency
5ef9cb4 
Co-authored-by: adrianmg <589285+adrianmg@users.noreply.github.com>
Copilot AI changed the title [WIP] Refactor duplicated code to improve maintainability Refactor duplicated code across layouts, stylesheets, and JavaScript Oct 24, 2025
Copilot AI requested a review from adrianmg October 24, 2025 19:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@adrianmg adrianmg Awaiting requested review from adrianmg

Assignees

@adrianmg adrianmg

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@adrianmg