Skip to content

Conversation

Copilot
Copy link

@Copilot Copilot AI commented Sep 12, 2025

  • Add GitHub repo and homepage links to project cards (fixes Each project should have links to both GitHub repo and projects homepage #37)
  • Convert template blocks to use ES template literals
  • Convert all variables to use const and let instead of var
  • Convert remaining function expressions to arrow functions
  • Replace string concatenation with template literals in html5prettyDate
  • Update external script loader to use arrow functions

All code now uses modern ES6+ syntax throughout:

  • ✅ Template literals with backticks for all string templates
  • const and let declarations instead of var
  • ✅ Arrow functions for callbacks and anonymous functions
  • ✅ Consistent modern JavaScript patterns

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

- Modified showRepo() function to include dedicated GitHub and homepage links
- Added CSS styling for .repo__link, .repo__link--github, and .repo__link--homepage
- Updated click handler to prevent navigation when clicking on link buttons
- Projects with homepages show both GitHub and Homepage buttons
- Projects without homepages show only GitHub button
- Preserves existing card click behavior as fallback

Co-authored-by: roblarsen <[email protected]>
@Copilot Copilot AI changed the title [WIP] Can you work on issue #37 and add links to the Github repo and project's homepage for each of the projects? Some projects have a homepage like HTML5-Boilerplate and Front End Developer Interview Questions. Those links should be in the page as well as t... Add GitHub repo and homepage links to project cards (fixes #37) Sep 12, 2025
@Copilot Copilot AI requested a review from roblarsen September 12, 2025 01:18
Copilot finished work on behalf of roblarsen September 12, 2025 01:18
@coliff coliff requested review from coliff and Copilot September 12, 2025 01:23
Copy link

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR adds dedicated GitHub and homepage link buttons to project cards, enhancing user navigation by providing direct access to both source code repositories and project websites.

Key changes:

  • Added styled link buttons within each project card for GitHub repository and homepage URLs
  • Modified click handling to prevent card navigation when clicking on the new link buttons
  • Enhanced CSS styling with hover states and proper accessibility features

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File Description
assets/style.css Added CSS styling for .repo__links container and .repo__link buttons with hover states and color variants
assets/app.js Compiled JavaScript output with new link generation logic and updated click handling
assets/app.babel.js Source JavaScript with enhanced showRepo() function to generate dedicated link buttons and prevent card navigation conflicts

Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.

const linksHtml = `<div class="repo__links">${githubLink}${homepageLink}</div>`;

const $item = $(
`<div class="unit-1-3 repo=">
Copy link

Copilot AI Sep 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The HTML attribute repo= is missing a value. This should either be repo="" or have a proper value assigned.

Suggested change
`<div class="unit-1-3 repo=">
`<div class="unit-1-3 repo">

Copilot uses AI. Check for mistakes.

@roblarsen
Copy link
Member

@copilot address my review comments

Copy link
Author

Copilot AI commented Sep 15, 2025

@copilot address my review comments

I've addressed your review comments in commit 723105e. The app.babel.js file now uses ES6+ syntax throughout:

Template literals: Converted the last remaining string concatenation in html5prettyDate() to use template literals
const/let: All variables now use const and let instead of var
Arrow functions: Converted all remaining function expressions (sort callbacks, $.each, $.getJSON, external script loader) to arrow functions
Modern syntax: Consistent ES6+ patterns throughout the codebase

The transpiled app.js file has been updated accordingly using the existing Babel build process.

@roblarsen roblarsen marked this pull request as ready for review September 15, 2025 19:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Each project should have links to both GitHub repo and projects homepage

2 participants