Fix/favicon missing pages

.github/workflows/pr-preview.yml

@@ -22,32 +22,40 @@ jobs:
           ref: ${{ github.event.pull_request.head.sha }}
           fetch-depth: 1
 
-      - name: Create preview directory
-        run: |
-          mkdir -p preview
+      - name: Set up Node.js
+        if: env.BUILD_REQUIRED == 'true' # Set this environment variable in the repository settings if a build is needed
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm" # Cache dependencies for faster builds
+
+      - name: Install dependencies
+        if: env.BUILD_REQUIRED == 'true'
+        run: npm ci # Use npm ci for reproducible builds
+
+      - name: Build project
+        if: env.BUILD_REQUIRED == 'true'
+        run: npm run build # Replace with your build command (e.g., `hugo`, `vite build`, etc.)
+        env:
+          BASE_URL: /${{ github.repository }}/pr-preview/pr-${{ github.event.pull_request.number }}/
 
       - name: Copy files to preview folder
         run: |
-          # Copy only the necessary files for the static site, excluding git and github folders
-          rsync -av --exclude='.git*' --exclude='.github' --exclude='node_modules' --exclude='*.md' \
-            --exclude='LICENSE' --exclude='CONTRIBUTING.md' --exclude='CODE_OF_CONDUCT.md' \
-            --exclude='SECURITY.md' --exclude='LEADERBOARD.md' --exclude='NAVIGATION_IMPLEMENTATION.md' \
-            ./ preview/
-
-          # List contents to debug
-          echo "Preview directory contents:"
-          find preview -type f | head -20
+          mkdir -p preview/pr-${{ github.event.pull_request.number }}
+          cp -r ./*.html ./styles ./assets preview/pr-${{ github.event.pull_request.number }}/ || echo "Copy fallback"
+        # Copies from `dist` if a build step exists, otherwise copies all files (excluding .git, .github)
 
       - name: Deploy to GitHub Pages
         uses: peaceiris/actions-gh-pages@v4
         with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./preview
+          personal_token: ${{ secrets.DEPLOY_PAT }}
+          external_repository: Mastercoder0406/CodeClip
+          publish_dir: ./preview/pr-${{ github.event.pull_request.number }}
           publish_branch: gh-pages
           destination_dir: pr-preview/pr-${{ github.event.pull_request.number }}
-          keep_files: true  # Keep other PR previews
-          user_name: 'github-actions[bot]'
-          user_email: 'github-actions[bot]@users.noreply.github.com'
+          keep_files: false # Clean up old files to avoid bloat
+          user_name: "github-actions[bot]"
+          user_email: "github-actions[bot]@users.noreply.github.com"
 
       - name: Comment PR with preview URL
         uses: marocchino/sticky-pull-request-comment@v2

index.html

@@ -136,18 +136,41 @@ <h2>Loading<span class="dots"></span></h2>
     <!-- ================================ Header Section Start Here ================================ -->
  <main>
     <!-- ================================ Hero Section Start Here ================================ -->
-    <section id="top" class="heroSection">
-      <div class="container">
-        <div class="row heroSection-Container">
-          <div class="col-12 col-md-6 heroSection-Left">
-            <div  data-aos="fade-right" data-aos-duration="650" class="gssocContainer shinning-effect">
-              <img 
-                src="assets/images/hero-section/gssoc-log.png"
-                class="img-fluid gssoc-logo"
-                alt="gssoc logo"
-              />
-              <p>GSSOC 2025</p>
-            </div>
+    <section id="homeSection" class="heroSection">
+
+        <div class="container">
+            <div class="row heroSection-Container">
+                <div class="col-12 col-md-6 heroSection-Left">
+
+                    <div class="gssocContainer shinning-effect">
+                        <img src="assets/images/hero-section/gssoc-log.png" class="img-fluid gssoc-logo"
+                            alt="gssoc logo">
+                        <p>GSSOC 2025</p>
+                    </div>
+
+                    <h1>Code Run <br> <span class="blueCol">Contribute</span></h1>
+                    <p class="heroDescription">CodeClip is a lightweight, browser-based platform designed to make coding
+                        practice simple, accessible, and collaborative. Whether you're a beginner looking to sharpen
+                        your skills or an aspiring contributor to open source, CodeClip offers a clean interface where
+                        you can solve real-world coding challenges, run your code live, and share your solutions — all
+                        without any setup, Built entirely with HTML, CSS, and JavaScript, CodeClip is not just a tool
+                        but a learning experience itself. It’s an open-source project proudly developed as part of
+                        <strong>GirlScript Summer of Code (GSSoC)</strong>, aimed at empowering developers through
+                        hands-on practice and meaningful contributions.
+                    </p>
+
+
+                    <!-- ==== Do Changes According to requirements === -->
+                    <div class="ctaBtn-Container">
+                        <button class="btn heroSectionBtn"><i class="fa-solid fa-gear"></i> Code</button>
+                        <button class="btn heroSectionBtn"><i class="fa-solid fa-cloud"></i> Run</button>
+                    </div>
+
+                </div>
+
+                <div class="col-12 col-md-6 heroSection-Right d-none d-md-block">
+                    <img src="assets/images/hero-section/hero-Img.png" class="img-fluid" alt="hero section image">
+                </div>
 
             <h1 data-aos="fade-right" data-aos-duration="650">
               Code Run <br />

pages/about.html

@@ -19,6 +19,10 @@
     <link rel="stylesheet" href="/CodeClip/styles/about.css">
     <!-- Or, if you want to scope styles to just challenges, use: -->
     <!-- <link rel="stylesheet" href="../styles/challenges.css" /> -->
+    <link rel="icon" href="../assets/logo.svg" type="image/svg+xml" sizes="any">
+    <!-- optional fallback (add favicon.ico to repo root if you create one) -->
+    <link rel="icon" href="../favicon.ico" type="image/x-icon" sizes="32x32">
+
 </head>
 <style>
 

pages/challenges.html

@@ -1,30 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Challenges - CodeClip</title>
-
-  <!-- Google Fonts -->
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Bitcount:[email protected]&family=Oooh+Baby&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
-    <!-- Community logos -->
-     <link
-  rel="stylesheet"
-  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
-/>
-
-<!-- Link your separate CSS file here -->
-<link rel="stylesheet" href="../styles/challenges.css" /> <!-- changed the link -->
-
-<!-- ============== Favicon ============== -->
-<link
-    rel="shortcut icon"
-    href="assets/favicon/codeClip-favicon.png"
-    type="image/png"
-/>
-
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Challenges - CodeClip</title>
+
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <!-- Merge both font options for flexibility -->
+    <link href="https://fonts.googleapis.com/css2?family=Bitcount:[email protected]&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Bitcount:[email protected]&family=Oooh+Baby&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+
+    <!-- Styles -->
+    <!-- If you want to keep all challenge styles in one file, use: -->
+    <link rel="stylesheet" href="../styles.css">
+    <!-- Or, if you want to scope styles to just challenges, use: -->
+    <!-- <link rel="stylesheet" href="../styles/challenges.css" /> -->
+    <link rel="icon" href="../assets/logo.svg" type="image/svg+xml" sizes="any">
+    <!-- optional fallback (add favicon.ico to repo root if you create one) -->
+    <link rel="icon" href="../favicon.ico" type="image/x-icon" sizes="32x32">
+
 </head>
 <body>
   <style>

pages/editor.html

@@ -10,6 +10,9 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
     <!-- Prism.js CSS for syntax highlighting -->
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism-tomorrow.min.css" rel="stylesheet" />
+    <link rel="icon" href="../assets/logo.svg" type="image/svg+xml" sizes="any">
+    <!-- optional fallback (add favicon.ico to repo root if you create one) -->
+    <link rel="icon" href="../favicon.ico" type="image/x-icon" sizes="32x32">
 
     <style>
         /* Custom CSS Variables for the new theme */
@@ -127,6 +130,7 @@
                         <a href="/CodeClip/pages/profile.html"  style="color: #f8f9fa; text-decoration: none; padding: 0.5rem 1rem; border-radius: 0.5rem; transition: background 0.2s;">Profile</a>
                     </nav>
                 </div>
+
                 <div>
                     <button class="btn btn-outline-light btn-sm">Save Code</button>
                 </div>

pages/profile.html

@@ -23,6 +23,10 @@
     <!-- === SMART PROGRESS DASHBOARD FEATURE END === -->
 
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <link rel="icon" href="../assets/logo.svg" type="image/svg+xml" sizes="any">
+<!-- optional fallback (add favicon.ico to repo root if you create one) -->
+<link rel="icon" href="../favicon.ico" type="image/x-icon" sizes="32x32">
+
 
 </head>
 <body>