-
-
-
-
-
-
-
-
-
GitHub Username Search | FetchCV
-
-<%- include("../partials/navbar.ejs") %>
-
-
-
-
-
-
-
- person_search
-
-
-
-
-
-
diff --git a/public/pages/github-profile.ejs b/public/pages/github-profile.ejs
index 704fb9b..2948a40 100644
--- a/public/pages/github-profile.ejs
+++ b/public/pages/github-profile.ejs
@@ -14,21 +14,10 @@
<%- include("../partials/navbar.ejs") %>
-
-
-
-
-
- person_search
-
-
@@ -37,10 +26,6 @@
-
-
-
-
@@ -91,7 +76,6 @@
-
diff --git a/public/pages/user-profile.ejs b/public/pages/user-profile.ejs
index b717afd..fb5574a 100644
--- a/public/pages/user-profile.ejs
+++ b/public/pages/user-profile.ejs
@@ -14,27 +14,10 @@
<%- include("../partials/navbar.ejs") %>
-
-
@@ -43,9 +26,6 @@
-
-
-
-
\ No newline at end of file
diff --git a/public/partials/navbar.ejs b/public/partials/navbar.ejs
index bf434d8..9ecd77a 100644
--- a/public/partials/navbar.ejs
+++ b/public/partials/navbar.ejs
@@ -18,10 +18,11 @@
FetchCV
-
-
-
person_search
+
@@ -31,4 +32,4 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/public/scripts-src/github/getId.ts b/public/scripts-src/github/getId.ts
index 123398d..52ab578 100644
--- a/public/scripts-src/github/getId.ts
+++ b/public/scripts-src/github/getId.ts
@@ -1,11 +1,11 @@
async function getId() {
- try {
- const response = await fetch(`https://api.github.com/users/${username}`, header);
- if (response.ok) {
- return (await response.json()).id;
- }
- }
- catch (error) {
- console.error("Failed to fetch github id. Error - ", error);
- }
- }
\ No newline at end of file
+ try {
+ const response = await fetch(`https://api.github.com/users/${username}`, header);
+ if (response.ok) {
+ return (await response.json()).id;
+ }
+ }
+ catch (error) {
+ console.error("Failed to fetch github id. Error - ", error);
+ }
+}
\ No newline at end of file
diff --git a/public/scripts-src/github/usernameSearch.ts b/public/scripts-src/github/usernameSearch.ts
deleted file mode 100644
index d046098..0000000
--- a/public/scripts-src/github/usernameSearch.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-// @ts-nocheck
-
-//===============================================
-// Username search
-//===============================================
-
-function newUsername() {
- let usernameElement = document.getElementById("username") as HTMLInputElement;
- if (usernameElement) {
- // @ts-ignore
- username = usernameElement.value;
- // @ts-ignore
- window.location.href = window.location.origin + "/user/github/" + username;
- }
-}
-
-const usernameInput = document.getElementById("username");
-if (usernameInput) {
- usernameInput.addEventListener("keydown", function (event) {
- if (event.key == "Enter") {
- newUsername();
- }
- });
-}
diff --git a/public/scripts-src/userProfile.ts b/public/scripts-src/userProfile.ts
deleted file mode 100644
index 8b3f630..0000000
--- a/public/scripts-src/userProfile.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-// @ts-nocheck
-
-//===============================================
-// Setting username
-//===============================================
-
-function newUsername() {
- hideError();
- let usernameElement = document.getElementById("username") as HTMLInputElement;
- if (usernameElement) {
- // @ts-ignore
- username = usernameElement.value;
- // @ts-ignore
- window.location.href = window.location.origin + "/user/github/" + username;
- }
-}
-
-const usernameInput = document.getElementById("username");
-if (usernameInput) {
- usernameInput.addEventListener("keydown", function (event) {
- if (event.key == "Enter") {
- newUsername();
- }
- });
-}
-
-
diff --git a/public/scripts-src/userSearch.ts b/public/scripts-src/userSearch.ts
new file mode 100644
index 0000000..7abfcb2
--- /dev/null
+++ b/public/scripts-src/userSearch.ts
@@ -0,0 +1,78 @@
+// @ts-nocheck
+
+//===============================================
+// Username search
+//===============================================
+
+let usernameElement = document.getElementById("user-name") as HTMLInputElement;
+
+const usernameInput = document.getElementById("user-name");
+if (usernameInput) {
+ usernameInput.addEventListener("keyup", (event) => {
+ if (usernameElement.value.length > 0) {
+ showElement(searchResultsElement);
+ getUpdatedSearchResults(usernameElement.value);
+ }
+ else {
+ hideElement(searchResultsElement);
+ showUpdatedSearchResults([]);
+ }
+ });
+}
+
+async function getUpdatedSearchResults(search) {
+ try {
+ const response = await fetch(`/search/user/${search.replace("/", "slash")}`);
+ if (response.ok) {
+ let data = await response.json();
+ showUpdatedSearchResults(data.users);
+ }
+ }
+ catch (error) {
+ console.error("Error fetching users - ", error); // should show to user
+ }
+}
+
+let searchResultsElement = document.querySelector(".search-results");
+
+function showUpdatedSearchResults(users) {
+ searchResultsElement.innerHTML = "";
+ for (let i = 0; i < users.length; i++) {
+ let user = users[i];
+ let userElement = document.createElement("div");
+ createSearchResultElement(userElement, user.handle, user.profile.description);
+ let divider = document.createElement("hr");
+ divider.classList.add("dark:border-zinc-700");
+ userElement.append(divider);
+ searchResultsElement.append(userElement);
+ }
+ // Should only show if github username does exist
+ if (usernameElement.value.length > 0) {
+ let userElement = document.createElement("div");
+ createSearchResultElement(userElement, "github/" + usernameElement.value, "No results? Try with their GitHub username");
+ searchResultsElement.append(userElement);
+ }
+}
+
+function createSearchResultElement(element, name, description) {
+ element.innerHTML = `
+
+ `;
+}
+
+function showElement(element) {
+ if (element.classList.contains("hidden")) {
+ element.classList.remove("hidden");
+ }
+}
+
+function hideElement(element) {
+ if (!element.classList.contains("hidden")) {
+ element.classList.add("hidden");
+ }
+}
diff --git a/public/scripts/github/usernameSearch.js b/public/scripts/github/usernameSearch.js
deleted file mode 100644
index fd249a3..0000000
--- a/public/scripts/github/usernameSearch.js
+++ /dev/null
@@ -1,21 +0,0 @@
-// @ts-nocheck
-//===============================================
-// Username search
-//===============================================
-function newUsername() {
- let usernameElement = document.getElementById("username");
- if (usernameElement) {
- // @ts-ignore
- username = usernameElement.value;
- // @ts-ignore
- window.location.href = window.location.origin + "/user/github/" + username;
- }
-}
-const usernameInput = document.getElementById("username");
-if (usernameInput) {
- usernameInput.addEventListener("keydown", function (event) {
- if (event.key == "Enter") {
- newUsername();
- }
- });
-}
diff --git a/public/scripts/userProfile.js b/public/scripts/userProfile.js
deleted file mode 100644
index 95d2e0c..0000000
--- a/public/scripts/userProfile.js
+++ /dev/null
@@ -1,22 +0,0 @@
-// @ts-nocheck
-//===============================================
-// Setting username
-//===============================================
-function newUsername() {
- hideError();
- let usernameElement = document.getElementById("username");
- if (usernameElement) {
- // @ts-ignore
- username = usernameElement.value;
- // @ts-ignore
- window.location.href = window.location.origin + "/user/github/" + username;
- }
-}
-const usernameInput = document.getElementById("username");
-if (usernameInput) {
- usernameInput.addEventListener("keydown", function (event) {
- if (event.key == "Enter") {
- newUsername();
- }
- });
-}
diff --git a/public/scripts/userSearch.js b/public/scripts/userSearch.js
new file mode 100644
index 0000000..84755f8
--- /dev/null
+++ b/public/scripts/userSearch.js
@@ -0,0 +1,69 @@
+// @ts-nocheck
+//===============================================
+// Username search
+//===============================================
+let usernameElement = document.getElementById("user-name");
+const usernameInput = document.getElementById("user-name");
+if (usernameInput) {
+ usernameInput.addEventListener("keyup", (event) => {
+ if (usernameElement.value.length > 0) {
+ showElement(searchResultsElement);
+ getUpdatedSearchResults(usernameElement.value);
+ }
+ else {
+ hideElement(searchResultsElement);
+ showUpdatedSearchResults([]);
+ }
+ });
+}
+async function getUpdatedSearchResults(search) {
+ try {
+ const response = await fetch(`/search/user/${search.replace("/", "slash")}`);
+ if (response.ok) {
+ let data = await response.json();
+ showUpdatedSearchResults(data.users);
+ }
+ }
+ catch (error) {
+ console.error("Error fetching users - ", error); // should show to user
+ }
+}
+let searchResultsElement = document.querySelector(".search-results");
+function showUpdatedSearchResults(users) {
+ searchResultsElement.innerHTML = "";
+ for (let i = 0; i < users.length; i++) {
+ let user = users[i];
+ let userElement = document.createElement("div");
+ createSearchResultElement(userElement, user.handle, user.profile.description);
+ let divider = document.createElement("hr");
+ divider.classList.add("dark:border-zinc-700");
+ userElement.append(divider);
+ searchResultsElement.append(userElement);
+ }
+ // Should only show if github username does exist
+ if (usernameElement.value.length > 0) {
+ let userElement = document.createElement("div");
+ createSearchResultElement(userElement, "github/" + usernameElement.value, "No results? Try with their GitHub username");
+ searchResultsElement.append(userElement);
+ }
+}
+function createSearchResultElement(element, name, description) {
+ element.innerHTML = `
+
+ `;
+}
+function showElement(element) {
+ if (element.classList.contains("hidden")) {
+ element.classList.remove("hidden");
+ }
+}
+function hideElement(element) {
+ if (!element.classList.contains("hidden")) {
+ element.classList.add("hidden");
+ }
+}
diff --git a/public/styles/tailwind.css b/public/styles/tailwind.css
index a71cd29..852ba7d 100644
--- a/public/styles/tailwind.css
+++ b/public/styles/tailwind.css
@@ -562,8 +562,8 @@ video {
position: absolute;
}
-.sticky {
- position: sticky;
+.relative {
+ position: relative;
}
.-left-40 {
@@ -574,24 +574,20 @@ video {
bottom: 0px;
}
-.left-2 {
- left: 0.5rem;
+.left-0 {
+ left: 0px;
}
-.top-2 {
- top: 0.5rem;
+.right-0 {
+ right: 0px;
}
.top-0 {
top: 0px;
}
-.left-0 {
- left: 0px;
-}
-
-.right-0 {
- right: 0px;
+.top-\[4rem\] {
+ top: 4rem;
}
.-z-10 {
@@ -614,40 +610,31 @@ video {
margin: 1.5rem;
}
-.m-2 {
- margin: 0.5rem;
-}
-
.mx-1 {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
-.my-2 {
- margin-top: 0.5rem;
- margin-bottom: 0.5rem;
-}
-
-.my-auto {
- margin-top: auto;
- margin-bottom: auto;
-}
-
.mx-2 {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
-.my-1 {
- margin-top: 0.25rem;
- margin-bottom: 0.25rem;
-}
-
.my-0\.5 {
margin-top: 0.125rem;
margin-bottom: 0.125rem;
}
+.my-2 {
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem;
+}
+
+.my-auto {
+ margin-top: auto;
+ margin-bottom: auto;
+}
+
.mb-20 {
margin-bottom: 5rem;
}
@@ -660,14 +647,6 @@ video {
margin-right: 0.5rem;
}
-.-mt-2 {
- margin-top: -0.5rem;
-}
-
-.-mt-6 {
- margin-top: -1.5rem;
-}
-
.block {
display: block;
}
@@ -700,14 +679,6 @@ video {
height: 100%;
}
-.h-\[200vh\] {
- height: 200vh;
-}
-
-.w-\[100\%\] {
- width: 100%;
-}
-
.w-\[140\%\] {
width: 140%;
}
@@ -732,14 +703,6 @@ video {
max-width: 45vw;
}
-.cursor-pointer {
- cursor: pointer;
-}
-
-.grid-cols-3 {
- grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
.items-center {
align-items: center;
}
@@ -785,6 +748,11 @@ video {
border-color: rgb(59 130 246 / var(--tw-border-opacity));
}
+.border-zinc-200 {
+ --tw-border-opacity: 1;
+ border-color: rgb(228 228 231 / var(--tw-border-opacity));
+}
+
.border-zinc-300 {
--tw-border-opacity: 1;
border-color: rgb(212 212 216 / var(--tw-border-opacity));
@@ -854,6 +822,10 @@ video {
background-color: rgb(244 244 245 / var(--tw-bg-opacity));
}
+.bg-zinc-100\/85 {
+ background-color: rgb(244 244 245 / 0.85);
+}
+
.bg-zinc-200 {
--tw-bg-opacity: 1;
background-color: rgb(228 228 231 / var(--tw-bg-opacity));
@@ -874,39 +846,6 @@ video {
background-color: rgb(39 39 42 / var(--tw-bg-opacity));
}
-.bg-zinc-500 {
- --tw-bg-opacity: 1;
- background-color: rgb(113 113 122 / var(--tw-bg-opacity));
-}
-
-.bg-zinc-200\/50 {
- background-color: rgb(228 228 231 / 0.5);
-}
-
-.bg-zinc-100\/50 {
- background-color: rgb(244 244 245 / 0.5);
-}
-
-.bg-zinc-100\/25 {
- background-color: rgb(244 244 245 / 0.25);
-}
-
-.bg-zinc-100\/75 {
- background-color: rgb(244 244 245 / 0.75);
-}
-
-.bg-zinc-100\/100 {
- background-color: rgb(244 244 245 / 1);
-}
-
-.bg-zinc-100\/95 {
- background-color: rgb(244 244 245 / 0.95);
-}
-
-.bg-zinc-100\/85 {
- background-color: rgb(244 244 245 / 0.85);
-}
-
.bg-none {
background-image: none;
}
@@ -977,10 +916,6 @@ video {
vertical-align: top;
}
-.align-middle {
- vertical-align: middle;
-}
-
.font-mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
@@ -1036,14 +971,6 @@ video {
font-weight: 600;
}
-.leading-3 {
- line-height: .75rem;
-}
-
-.leading-none {
- line-height: 1;
-}
-
.text-black {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
@@ -1110,30 +1037,12 @@ video {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
-.backdrop-blur {
- --tw-backdrop-blur: blur(8px);
- -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
- backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-}
-
.backdrop-blur-lg {
--tw-backdrop-blur: blur(16px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
-.backdrop-blur-xl {
- --tw-backdrop-blur: blur(24px);
- -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
- backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-}
-
-.backdrop-blur-2xl {
- --tw-backdrop-blur: blur(40px);
- -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
- backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-}
-
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1149,11 +1058,6 @@ video {
background-color: rgb(228 228 231 / var(--tw-bg-opacity));
}
-.hover\:bg-zinc-300:hover {
- --tw-bg-opacity: 1;
- background-color: rgb(212 212 216 / var(--tw-bg-opacity));
-}
-
.focus\:border-b-2:focus {
border-bottom-width: 2px;
}
@@ -1164,22 +1068,12 @@ video {
}
@media (min-width: 640px) {
- .sm\:w-\[80vw\] {
- width: 80vw;
- }
-
.sm\:px-0 {
padding-left: 0px;
padding-right: 0px;
}
}
-@media (min-width: 768px) {
- .md\:w-\[400px\] {
- width: 400px;
- }
-}
-
@media (min-width: 1024px) {
.lg\:px-\[20vw\] {
padding-left: 20vw;
@@ -1193,11 +1087,21 @@ video {
border-color: rgb(63 63 70 / var(--tw-border-opacity));
}
+ .dark\:border-gray-700 {
+ --tw-border-opacity: 1;
+ border-color: rgb(55 65 81 / var(--tw-border-opacity));
+ }
+
.dark\:border-t-zinc-600 {
--tw-border-opacity: 1;
border-top-color: rgb(82 82 91 / var(--tw-border-opacity));
}
+ .dark\:bg-black {
+ --tw-bg-opacity: 1;
+ background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+ }
+
.dark\:bg-zinc-600 {
--tw-bg-opacity: 1;
background-color: rgb(82 82 91 / var(--tw-bg-opacity));
@@ -1213,27 +1117,15 @@ video {
background-color: rgb(39 39 42 / var(--tw-bg-opacity));
}
+ .dark\:bg-zinc-800\/75 {
+ background-color: rgb(39 39 42 / 0.75);
+ }
+
.dark\:bg-zinc-900 {
--tw-bg-opacity: 1;
background-color: rgb(24 24 27 / var(--tw-bg-opacity));
}
- .dark\:bg-zinc-900\/50 {
- background-color: rgb(24 24 27 / 0.5);
- }
-
- .dark\:bg-zinc-900\/75 {
- background-color: rgb(24 24 27 / 0.75);
- }
-
- .dark\:bg-zinc-900\/85 {
- background-color: rgb(24 24 27 / 0.85);
- }
-
- .dark\:bg-zinc-800\/75 {
- background-color: rgb(39 39 42 / 0.75);
- }
-
.dark\:text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1258,9 +1150,4 @@ video {
--tw-bg-opacity: 1;
background-color: rgb(63 63 70 / var(--tw-bg-opacity));
}
-
- .dark\:hover\:bg-zinc-800:hover {
- --tw-bg-opacity: 1;
- background-color: rgb(39 39 42 / var(--tw-bg-opacity));
- }
}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 6c962fc..591372e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,6 @@
/** @type {import("tailwindcss").Config} */
module.exports = {
- content: ["./public/**/*.{html,ejs,js}"],
+ content: ["./public/**/*.{html,ejs,js,ts}"],
theme: {
extend: {
colors: {