From 608ddf4ac9349478e2e16c6770ecc06cf4b63b07 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 10 Jul 2025 14:10:29 +0000
Subject: [PATCH 1/2] Add GitHub repository link to Attribution component with
 styling

Co-authored-by: fatach <fatach@gmail.com>
---
 src/components/Attribution.tsx | 16 ++++++++++
 src/index.css                  | 58 ++++++++++++++++++++++++++++++++++
 2 files changed, 74 insertions(+)

diff --git a/src/components/Attribution.tsx b/src/components/Attribution.tsx
index dfc35d3..afb9bdb 100644
--- a/src/components/Attribution.tsx
+++ b/src/components/Attribution.tsx
@@ -49,6 +49,22 @@ const Attribution: React.FC = () => {
           <FaLinkedin />
         </a>
       </div>
+      
+      <div className="repository-section">
+        <div className="repository-text">
+          Open Source Project
+        </div>
+        <a
+          href="https://github.com/DeDuckProject/epp-demo"
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label="View source code on GitHub"
+          className="repository-link"
+        >
+          <FaGithub />
+          <span>View on GitHub</span>
+        </a>
+      </div>
     </div>
   );
 };
diff --git a/src/index.css b/src/index.css
index 44c32c9..f65acb9 100644
--- a/src/index.css
+++ b/src/index.css
@@ -318,6 +318,45 @@ input:focus {
   background-color: rgba(59, 130, 246, 0.1);
 }
 
+/* Repository section styles */
+.repository-section {
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--soft-gray);
+}
+
+.repository-text {
+  font-weight: 500;
+  line-height: 1.2;
+  margin-bottom: 0.5rem;
+  color: var(--secondary-color);
+  font-size: 0.75rem;
+}
+
+.repository-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  color: var(--primary-color);
+  text-decoration: none;
+  font-size: 0.75rem;
+  font-weight: 500;
+  padding: 0.25rem 0.5rem;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.repository-link:hover {
+  color: #2563eb;
+  background-color: rgba(59, 130, 246, 0.1);
+  transform: translateY(-1px);
+}
+
+.repository-link svg {
+  font-size: 0.875rem;
+}
+
 @media (max-width: 768px) {
   .attribution-container {
     bottom: 1rem;
@@ -335,6 +374,25 @@ input:focus {
     height: 1.25rem;
     font-size: 0.9rem;
   }
+
+  .repository-section {
+    margin-top: 0.5rem;
+    padding-top: 0.5rem;
+  }
+
+  .repository-text {
+    font-size: 0.7rem;
+  }
+
+  .repository-link {
+    font-size: 0.7rem;
+    gap: 0.2rem;
+    padding: 0.2rem 0.4rem;
+  }
+
+  .repository-link svg {
+    font-size: 0.8rem;
+  }
 }
 
 @media (prefers-color-scheme: light) {

From 86481c18907b98f94dbc12a9b9a4556ff55d5499 Mon Sep 17 00:00:00 2001
From: Iftach Yakar <iftachyakar@gmail.com>
Date: Thu, 10 Jul 2025 21:18:46 +0300
Subject: [PATCH 2/2] test: add tests for repository link in Attribution
 component

---
 tests/components/Attribution.test.tsx | 36 +++++++++++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

diff --git a/tests/components/Attribution.test.tsx b/tests/components/Attribution.test.tsx
index e691f86..5ccb511 100644
--- a/tests/components/Attribution.test.tsx
+++ b/tests/components/Attribution.test.tsx
@@ -53,6 +53,30 @@ describe('Attribution Component', () => {
       expect(linksContainer).toHaveClass('attribution-links');
       expect(firstLink).toHaveClass('attribution-link');
     });
+
+    it('should display the repository section', () => {
+      render(<Attribution />);
+      
+      expect(screen.getByText('Open Source Project')).toBeInTheDocument();
+      expect(screen.getByText('View on GitHub')).toBeInTheDocument();
+      
+      const repoLink = screen.getByLabelText('View source code on GitHub');
+      expect(repoLink).toBeInTheDocument();
+      expect(repoLink).toHaveAttribute('href', 'https://github.com/DeDuckProject/epp-demo');
+      expect(repoLink).toHaveClass('repository-link');
+    });
+
+    it('should style the repository section correctly', () => {
+      render(<Attribution />);
+      
+      const repoSection = screen.getByText('Open Source Project').closest('.repository-section');
+      const repoText = screen.getByText('Open Source Project');
+      const repoLink = screen.getByLabelText('View source code on GitHub');
+      
+      expect(repoSection).toHaveClass('repository-section');
+      expect(repoText).toHaveClass('repository-text');
+      expect(repoLink).toHaveClass('repository-link');
+    });
   });
 
   describe('when users interact with the attribution', () => {
@@ -74,6 +98,7 @@ describe('Attribution Component', () => {
       expect(screen.getByLabelText('LinkedIn profile')).toBeInTheDocument();
       expect(screen.getByLabelText('X (Twitter) profile')).toBeInTheDocument();
       expect(screen.getByLabelText('Bluesky profile')).toBeInTheDocument();
+      expect(screen.getByLabelText('View source code on GitHub')).toBeInTheDocument();
     });
   });
 
@@ -90,13 +115,20 @@ describe('Attribution Component', () => {
       
       // The story continues: They want to connect with the creator
       const socialLinks = screen.getAllByRole('link');
-      expect(socialLinks).toHaveLength(4);
+      expect(socialLinks).toHaveLength(5); // Updated to include repository link
       
-      // The story concludes: They can easily access the creator's profiles
+      // The story concludes: They can easily access the creator's profiles and the source code
       socialLinks.forEach(link => {
         expect(link).toBeVisible();
         expect(link.getAttribute('href')).toMatch(/^https:\/\//);
       });
+
+      // And they can find the open source repository
+      const repoText = screen.getByText('Open Source Project');
+      const repoLink = screen.getByLabelText('View source code on GitHub');
+      expect(repoText).toBeVisible();
+      expect(repoLink).toBeVisible();
+      expect(repoLink.getAttribute('href')).toBe('https://github.com/DeDuckProject/epp-demo');
     });
   });
 }); 
\ No newline at end of file