From 03b5373c546a9a924e8ec5daafea7395e7dae2fd Mon Sep 17 00:00:00 2001 From: MohamedAazil Date: Fri, 15 May 2026 17:14:35 +0530 Subject: [PATCH 1/2] feat: Implemented - Autofill skills using github --- .gitignore | 3 +++ static/script.js | 63 ++++++++++++++++++++++++++++++++++++++++++++ static/style.css | 44 +++++++++++++++++++++++++++++++ templates/index.html | 46 ++++++++++++++++++++++++++++---- 4 files changed, 151 insertions(+), 5 deletions(-) diff --git a/.gitignore b/.gitignore index 63703955..239b67d2 100644 --- a/.gitignore +++ b/.gitignore @@ -117,3 +117,6 @@ app.*.symbols !**/ios/**/default.perspectivev3 !/packages/flutter_tools/test/data/dart_dependencies_test/**/.packages !/dev/ci/**/Gemfile.lock.venv/ + +# Virtual Environment +venv/* \ No newline at end of file diff --git a/static/script.js b/static/script.js index 58b5d60b..9db560a8 100644 --- a/static/script.js +++ b/static/script.js @@ -13,6 +13,12 @@ // ============================================================ var isIndexPage = !!document.getElementById("recommend-form"); var isDetailPage = typeof PROJECT_ID !== "undefined"; +var modal = document.getElementById('github-modal-overlay'); +var openModalBtn = document.getElementById('btn-show-github'); // The trigger in your main form +var closeModalBtn = document.getElementById('btn-close-github'); +var fetchBtn = document.getElementById('btn-fetch-github'); +var githubInput = document.getElementById('github-username'); +var errorMsg = document.getElementById('github-modal-error'); // ============================================================ @@ -346,6 +352,9 @@ if (isIndexPage) { } function syncSkillsHiddenInput() { + if (!skillsHidden){ + var skillsHidden = document.getElementById("skills"); + } // Keep the hidden in sync for form serialisation skillsHidden.value = selectedSkills.join(", "); } @@ -689,3 +698,57 @@ if (isDetailPage) { } } // end isDetailPage + +// 1. Open Github Input Modal +openModalBtn.addEventListener('click', (e) => { + e.preventDefault(); + modal.classList.add('active'); + githubInput.focus(); +}); + +// 2. Close Github Input Modal +const closeGithubModal = () => { + modal.classList.remove('active'); + githubInput.value = ''; + errorMsg.textContent = ''; +}; + +closeModalBtn.addEventListener('click', closeGithubModal); + +// Close on clicking outside the card +modal.addEventListener('click', (e) => { + if (e.target === modal) closeGithubModal(); +}); + +// 3. Fetch Skills Logic +fetchBtn.addEventListener('click', async () => { + const username = githubInput.value.trim(); + if (!username) return; + + fetchBtn.disabled = true; + fetchBtn.textContent = 'Syncing...'; + + try { + const response = await fetch(`https://api.github.com/users/${username}/repos`); + if (!response.ok) throw new Error(); + + const repos = await response.json(); + const langs = [...new Set(repos.map(r => r.language).filter(Boolean))]; + + if (langs.length > 0) { + langs.forEach(lang => { + if (typeof addSkill === 'function') addSkill(lang); + }); + closeGithubModal(); + // Optional: Show your existing copy-toast with a custom message + // showToast("Skills imported successfully!"); + } else { + errorMsg.textContent = "No public languages found."; + } + } catch (err) { + errorMsg.textContent = err; + } finally { + fetchBtn.disabled = false; + fetchBtn.textContent = 'Fetch Skills'; + } +}); \ No newline at end of file diff --git a/static/style.css b/static/style.css index 837c450d..1e69fbab 100644 --- a/static/style.css +++ b/static/style.css @@ -1654,3 +1654,47 @@ select:focus { .container { padding: 0 20px; } .section-sub { margin-bottom: 40px; } } + +.github-input-reveal input { + border: 1px solid var(--border); + border-radius: var(--r-xs); + font-family: var(--font-body); +} + +.github-input-reveal input:focus { + border-color: var(--indigo-400); + outline: none; + background: var(--white); +} + +#btn-show-github { + border: 1px solid transparent; + transition: all var(--t); + color: var(--indigo-600); + background: var(--indigo-50); +} + +#btn-show-github:hover { + background: var(--indigo-100); + border-color: rgba(79, 110, 247, 0.2); +} + +#github-modal-overlay.active { + display: flex !important; /* Overrides the 'none' display */ + backdrop-filter: blur(4px); + animation: fadeIn 0.2s ease; +} + +#github-modal-overlay .sidebar-card { + transform: scale(0.9); + transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); +} + +#github-modal-overlay.active .sidebar-card { + transform: scale(1); +} + +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index 14796a34..b15ba616 100644 --- a/templates/index.html +++ b/templates/index.html @@ -248,10 +248,18 @@

Find Your Next Project

- -
- +
+ + + +
+ +
+
Find Your Next Project
- Or click a popular skill below to add it + + Or click a popular skill below to add it
@@ -440,7 +449,34 @@

About

- + +
+
+ +
+ + Sync with GitHub +
+ +

Enter your username to import coding languages from your top repositories into the skills list.
Note: We use stars to determine top repositories

+ +
+
+ @ + +
+
+
+ +
+ + +
+ +
+
+ + From 9d8db2a12fe8c44045d2bfc97b16a5c1a3207677 Mon Sep 17 00:00:00 2001 From: MohamedAazil Date: Mon, 18 May 2026 10:44:47 +0530 Subject: [PATCH 2/2] feat: autofill github skills - review changes --- static/script.js | 113 +++++++++++++++++++++++++---------------------- 1 file changed, 59 insertions(+), 54 deletions(-) diff --git a/static/script.js b/static/script.js index 06c5d3f1..7880f7a5 100644 --- a/static/script.js +++ b/static/script.js @@ -724,61 +724,66 @@ if (isDetailPage) { } } // end isDetailPage -} // end isDetailPage - +if ( + openModalBtn && + closeModalBtn && + modal && + githubInput && + fetchBtn && + errorMsg +) { // 1. Open Github Input Modal -openModalBtn.addEventListener('click', (e) => { - e.preventDefault(); - modal.classList.add('active'); - githubInput.focus(); -}); - -// 2. Close Github Input Modal -const closeGithubModal = () => { - modal.classList.remove('active'); - githubInput.value = ''; - errorMsg.textContent = ''; -}; - -closeModalBtn.addEventListener('click', closeGithubModal); - -// Close on clicking outside the card -modal.addEventListener('click', (e) => { - if (e.target === modal) closeGithubModal(); -}); - -// 3. Fetch Skills Logic -fetchBtn.addEventListener('click', async () => { - const username = githubInput.value.trim(); - if (!username) return; - - fetchBtn.disabled = true; - fetchBtn.textContent = 'Syncing...'; - - try { - const response = await fetch(`https://api.github.com/users/${username}/repos`); - if (!response.ok) throw new Error(); - - const repos = await response.json(); - const langs = [...new Set(repos.map(r => r.language).filter(Boolean))]; - - if (langs.length > 0) { - langs.forEach(lang => { - if (typeof addSkill === 'function') addSkill(lang); - }); - closeGithubModal(); - // Optional: Show your existing copy-toast with a custom message - // showToast("Skills imported successfully!"); - } else { - errorMsg.textContent = "No public languages found."; - } - } catch (err) { - errorMsg.textContent = err; - } finally { - fetchBtn.disabled = false; - fetchBtn.textContent = 'Fetch Skills'; - } -}); + openModalBtn.addEventListener('click', (e) => { + e.preventDefault(); + modal.classList.add('active'); + githubInput.focus(); + }); + + // 2. Close Github Input Modal + const closeGithubModal = () => { + modal.classList.remove('active'); + githubInput.value = ''; + errorMsg.textContent = ''; + }; + + closeModalBtn.addEventListener('click', closeGithubModal); + + // Close on clicking outside the card + modal.addEventListener('click', (e) => { + if (e.target === modal) closeGithubModal(); + }); + + // 3. Fetch Skills Logic + fetchBtn.addEventListener('click', async () => { + const username = githubInput.value.trim(); + if (!username) return; + + fetchBtn.disabled = true; + fetchBtn.textContent = 'Syncing...'; + + try { + const response = await fetch(`https://api.github.com/users/${username}/repos`); + if (!response.ok) throw new Error(); + + const repos = await response.json(); + const langs = [...new Set(repos.map(r => r.language).filter(Boolean))]; + + if (langs.length > 0) { + langs.forEach(lang => { + if (typeof addSkill === 'function') addSkill(lang); + }); + closeGithubModal(); + } else { + errorMsg.textContent = "No public languages found."; + } + } catch (err) { + errorMsg.textContent = err.message ?? "Failed to fetch skills"; + } finally { + fetchBtn.disabled = false; + fetchBtn.textContent = 'Fetch Skills'; + } + }); +} /* ---- Scroll-to-top button ---- */