Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 8 additions & 59 deletions .github/workflows/pr-preview.yml
Original file line number Diff line number Diff line change
@@ -1,72 +1,21 @@
name: PR Preview to GitHub Pages
name: Deploy Preview

on:
pull_request:
types: [opened, synchronize, reopened]
branches:
- main

jobs:
deploy-preview:
deploy:
runs-on: ubuntu-latest
permissions:
contents: read
pull-requests: write
pages: write

steps:
- name: Checkout PR branch
uses: actions/checkout@v4
with:
ref: ${{ github.event.pull_request.head.sha }}
fetch-depth: 1
- name: Checkout Code
uses: actions/checkout@v3

- 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
- name: Set up preview path
run: |
mkdir -p preview/pr-${{ github.event.pull_request.number }}
cp -r ./dist/* preview/pr-${{ github.event.pull_request.number }}/ || cp -r ./* preview/pr-${{ github.event.pull_request.number }}/
# 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/pr-${{ github.event.pull_request.number }}
publish_branch: gh-pages
destination_dir: pr-preview/pr-${{ github.event.pull_request.number }}
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: Get GitHub Pages URL
id: pages
uses: actions/github-script@v7
with:
script: |
const response = await github.rest.repos.getPages({ owner: context.repo.owner, repo: context.repo.repo });
return response.data.html_url;

- name: Comment PR with preview URL
uses: marocchino/sticky-pull-request-comment@v2
with:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
header: preview-url
message: |
🚀 PR Preview: ${{ steps.pages.outputs.result }}/pr-preview/pr-${{ github.event.pull_request.number }}/
- name: Copy static files to preview folder
run: |
rsync -av --exclude='preview' . preview/pr-${{ github.event.pull_request.number }}/
107 changes: 107 additions & 0 deletions about/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>About - CodeClip</title>

<!-- 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&display=swap" rel="stylesheet">

<!-- Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- Styles -->
<link rel="stylesheet" href="../styles.css">
<link rel="stylesheet" href="styles/about.css">
Copy link
Contributor

Choose a reason for hiding this comment

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

logic: This CSS path is incorrect. From about/index.html, the path should be ../styles/about.css to reach the styles directory.

Suggested change
<link rel="stylesheet" href="styles/about.css">
<link rel="stylesheet" href="../styles/about.css">

</head>
<body>
<!-- Header -->
<header class="header">
<div class="container header__container">
<div class="header__logo">
<span class="logo-text">CodeClip</span>
</div>
<nav class="header__nav" id="navMenu">
<ul class="nav__list">
<li><a href="/" data-route="/" class="nav__link">Home</a></li>
<li><a href="pages/challenges.html" data-route="/challenges" class="nav__link active">Challenges</a></li>
<li><a href="pages/editor.html" data-route="/editor" class="nav__link">Editor</a></li>
<li><a href="pages/profile.html" data-route="/profile" class="nav__link">Profile</a></li>
<li><a href="pages/about.html" class="nav__link">About</a></li>
Comment on lines +30 to +33
Copy link
Contributor

Choose a reason for hiding this comment

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

logic: These navigation paths are incorrect. From about/index.html, paths to pages should be ../pages/challenges.html, ../pages/editor.html, and ../pages/profile.html.

Copy link
Contributor

Choose a reason for hiding this comment

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

logic: This creates a circular reference - the About page linking to pages/about.html instead of being the about page itself.

</ul>
</nav>
<button class="header__toggle" id="navToggle" aria-label="Open menu">
<span class="hamburger"></span>
<span class="hamburger"></span>
<span class="hamburger"></span>
</button>
</div>
</header>

<!-- Hero -->
<section class="hero">
<div class="floating-elements">
<div class="floating-element"></div>
<div class="floating-element"></div>
<div class="floating-element"></div>
</div>
<div class="container">
<div class="hero__content about-hero">
<div class="hero__text">
<p class="hero__subtitle">🧠 Learn About CodeClip</p>
<h1 class="hero__title">Your Lightweight Code Companion</h1>
<p class="hero__description">
CodeClip is a browser-first, zero-backend snippet manager that helps developers organize and reuse code effortlessly — right inside your browser.
</p>
</div>
</div>
</div>
</section>

<!-- About Content -->
<section class="container about-section">
<div class="card about-card">
<h2 class="section-title">What is CodeClip?</h2>
<p>
<strong>CodeClip</strong> is a fast, clean code snippet manager made for developers who want zero clutter and 100% local privacy. Your code stays in your browser via <code>localStorage</code> — no databases, no accounts, no distractions.
</p>
</div>

<div class="card about-card">
<h2 class="section-title">Key Features</h2>
<ul class="feature-list">
<li>🌙 Light & Dark mode support</li>
<li>💾 Save, edit, and manage code snippets locally</li>
<li>🔍 Search functionality (coming soon)</li>
<li>📱 Fully responsive for mobile and desktop</li>
<li>🔐 100% privacy — nothing leaves your browser</li>
</ul>
</div>

<div class="card about-card">
<h2 class="section-title">Open Source</h2>
<p>
CodeClip is built with love for the open-source community. Contribute, fork, or star the project on GitHub:
</p>
<a href="https://github.com/opensource-society/CodeClip" class="btn btn-secondary" target="_blank">
🌐 View on GitHub
</a>
</div>
</section>

<!-- Theme Toggle -->
<div class="theme-toggle-container">
<button id="theme-toggle" class="theme-toggle-btn">Toggle Theme</button>
</div>

<!-- Footer -->
<div id="footer"></div>

<!-- Scripts -->
<script type="module" src="scripts/app.js"></script>
<script type="module" src="scripts/theme.js"></script>
Comment on lines +104 to +105
Copy link
Contributor

Choose a reason for hiding this comment

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

logic: Script paths are incorrect. From about/index.html, these should be ../scripts/app.js and ../scripts/theme.js.

Suggested change
<script type="module" src="scripts/app.js"></script>
<script type="module" src="scripts/theme.js"></script>
<script type="module" src="../scripts/app.js"></script>
<script type="module" src="../scripts/theme.js"></script>

</body>
</html>
17 changes: 8 additions & 9 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,13 @@
referrerpolicy="no-referrer"
/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


<!-- Styles -->
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="styles/main.css">
<!-- <link rel="stylesheet" href="styles/themes.css"> -->
<!-- <link rel="stylesheet" href="styles/challenges.css"> -->
<script
src="https://js.sentry-cdn.com/8994bf86fecf7733832520db1565ab1f.min.js"
crossorigin="anonymous"
></script>

<script src="https://js.sentry-cdn.com/8994bf86fecf7733832520db1565ab1f.min.js" crossorigin="anonymous">
</script>
</head>
<body>
<!-- header code starts -->
Expand All @@ -36,11 +35,11 @@
</div>
<nav class="header__nav" id="navMenu">
<ul class="nav__list">
<li><a href="/" data-route="/" class="nav__link">Home</a></li>
<li><a href="../CodeClip/index.html" data-route="/" class="nav__link">Home</a></li>
Copy link
Contributor

Choose a reason for hiding this comment

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

logic: The path '../CodeClip/index.html' assumes a specific directory structure that may not exist in all deployment environments. Consider using '../index.html' instead.

<li><a href="pages/challenges.html" data-route="/challenges" class="nav__link active">Challenges</a></li>
Copy link
Contributor

Choose a reason for hiding this comment

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

logic: The 'active' class should not be on the Challenges link when this is the Home page.

Suggested change
<li><a href="pages/challenges.html" data-route="/challenges" class="nav__link active">Challenges</a></li>
<li><a href="pages/challenges.html" data-route="/challenges" class="nav__link">Challenges</a></li>

<li><a href="pages/editor.html" data-route="/editor" class="nav__link">Editor</a></li>
<li><a href="pages/profile.html" data-route="/profile" class="nav__link">Profile</a></li>
<li><a href="/about" data-route="/about" class="nav__link">About</a></li>
<li><a href="pages/about.html" data-route="/about" class="nav__link">About</a></li>
</ul>
</nav>
<button class="header__toggle" id="navToggle" aria-label="Open navigation menu">
Expand Down
140 changes: 140 additions & 0 deletions index_resolved.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CodeClip</title>

<!-- 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]&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bitcount:[email protected]&family=Oooh+Baby&display=swap" rel="stylesheet">

<!-- Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- Styles -->
<link rel="stylesheet" href="styles.css">

<!-- Sentry Script -->
<script src="https://js.sentry-cdn.com/8994bf86fecf7733832520db1565ab1f.min.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- Header Component -->
<header class="header">
<div class="container header__container" id="navid">
<div class="header__logo">
<span class="logo-text">CodeClip</span>
</div>
<nav class="header__nav" id="navMenu">
<ul class="nav__list">
<li><a href="/" data-route="/" class="nav__link">Home</a></li>
<li><a href="/challenges" data-route="/challenges" class="nav__link active">Challenges</a></li>
Copy link
Contributor

Choose a reason for hiding this comment

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

logic: Challenges link has 'active' class on the home page, which is incorrect - this should only be active on the challenges page.

Suggested change
<li><a href="/challenges" data-route="/challenges" class="nav__link active">Challenges</a></li>
<li><a href="/challenges" data-route="/challenges" class="nav__link">Challenges</a></li>

<li><a href="editor.html" data-route="/editor" class="nav__link">Editor</a></li>
Copy link
Contributor

Choose a reason for hiding this comment

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

logic: Editor link uses direct href='editor.html' but also has data-route='/editor'. The href should match the data-route pattern (href='/editor') for consistency.

<li><a href="/profile" data-route="/profile" class="nav__link">Profile</a></li>
<li><a href="pages/about.html" class="nav__link">About</a></li>
Copy link
Contributor

Choose a reason for hiding this comment

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

logic: About link missing data-route attribute unlike other nav items. This creates inconsistent routing - some links use client-side routing while About uses direct navigation.

</ul>
</nav>
<button class="header__toggle" id="navToggle" aria-label="Open navigation menu">
<span class="hamburger"></span>
<span class="hamburger"></span>
<span class="hamburger"></span>
</button>
</div>
</header>

<!-- Main Content -->
<main>
<!-- Hero Section -->
<section class="hero">
<div class="floating-elements">
<div class="floating-element"></div>
<div class="floating-element"></div>
<div class="floating-element"></div>
</div>
<div class="container">
<div class="hero__content">
<div class="hero__text">
<p class="hero__subtitle">🚀 An Interactive Coding Platform</p>
<h1 class="hero__title">
Code. <span class="highlight">Challenge.</span><br>
Conquer.
</h1>
<p class="hero__description">
Discover CodeClip, an exhilarating, lightweight web app that empowers developers to master coding challenges right in their browser! Whether you're tackling algorithms, debugging scripts, or showcasing your solutions to the open-source community, CodeClip offers a seamless, interactive experience with a sleek interface, real-time feedback, and effortless sharing via unique URLs or GitHub Gists.
</p>
<div class="hero__cta">
<a href="/coding" data-route="/coding" class="btn btn-primary">🎯 Start Coding</a>
<a href="/challenges" data-route="/challenges" class="btn btn-secondary">📚 View Challenges</a>
</div>
</div>
<div class="hero__visual">
<div class="code-window">
<div class="code-window__header">
<span class="circle red"></span>
<span class="circle yellow"></span>
<span class="circle green"></span>
</div>
<div class="code-content">
<div class="code-line"><span class="comment">// Welcome to CodeClip</span></div>
<div class="code-line"><span class="keyword">function</span> <span class="string">solveProblem</span>() {</div>
<div class="code-line"> <span class="keyword">return</span> <span class="string">'Success!'</span>;</div>
<div class="code-line">}</div>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- Feature Cards -->
<div class="content">
<div class="card">
<a href="#" target="_blank">
<div class="icon"><i class="material-icons md-36" alt="Challenge vault icon">security</i></div>
<p class="title">Challenge Vault</p>
<p class="text">All your challenges in one place — track, review, repeat.</p>
</a>
</div>

<div class="card">
<a href="#" target="_blank">
<div class="icon"><i class="material-icons md-36" alt="Code editor icon">code</i></div>
<p class="title">Code Editor</p>
<p class="text">Write, test, and edit code seamlessly in your personal editor.</p>
</a>
</div>

<div class="card">
<a href="#" target="_blank">
<div class="icon"><i class="material-icons md-36" alt="Solution sharing icon">share</i></div>
<p class="title">Solution Sharing </p>
<p class="text">Show your approach. Discover new ones.</p>
</a>
</div>

<div class="card">
<a href="#" target="_blank">
<div class="icon"><i class="material-icons md-36" alt="AI recommendation icon">smart_toy</i></div>
<p class="title">AI Recommendation </p>
<p class="text">Let AI guide your next steps with personalized recommendations.</p>
</a>
</div>
</div>
</main>

<!-- Theme Toggle -->
<div class="theme-toggle-container">
<button id="theme-toggle" class="theme-toggle-btn">Toggle Theme</button>
</div>

<!-- Footer -->
<div id="footer"></div>

<!-- Scripts -->
<script type="module" src="scripts/data.js"></script>
<script type="module" src="scripts/app.js"></script>
<script type="module" src="./scripts/theme.js"></script>
</body>
</html>
Loading