diff --git a/src/code/index.html b/src/code/index.html index 2336d70..a0e5be1 100644 --- a/src/code/index.html +++ b/src/code/index.html @@ -1,119 +1,163 @@ - - - + + Social Repo - + - + - +
-
- logo -

SocialRepo

-
- +
+ + logo +

SocialRepo

+ +
+
-
- -
- + +
+ +
+ + +
+
- - - \ No newline at end of file + + diff --git a/src/code/index.js b/src/code/index.js index eec9bc0..6e2785a 100644 --- a/src/code/index.js +++ b/src/code/index.js @@ -1,4 +1,4 @@ -'use strict'; +"use strict"; console.log("Social Repo opened!"); const infoBtn = document.getElementById("info-btn"); @@ -10,268 +10,301 @@ const edit = document.getElementById("edit"); // ============== Header ============== infoBtn.addEventListener("click", () => { - console.log("Info button clicked!"); - if (info.classList.contains("hidden")) { - info.classList.remove("hidden"); - home.classList.add("hidden"); - edit.classList.add("hidden"); - } else { - info.classList.add("hidden"); - home.classList.remove("hidden"); - edit.classList.add("hidden"); - } + console.log("Info button clicked!"); + if (info.classList.contains("hidden")) { + info.classList.remove("hidden"); + home.classList.add("hidden"); + edit.classList.add("hidden"); + } else { + info.classList.add("hidden"); + home.classList.remove("hidden"); + edit.classList.add("hidden"); + } }); editBtn.addEventListener("click", () => { - console.log("Edit button clicked!"); - if (edit.classList.contains("hidden")) { - edit.classList.remove("hidden"); - home.classList.add("hidden"); - info.classList.add("hidden"); - } else { - edit.classList.add("hidden"); - home.classList.remove("hidden"); - info.classList.add("hidden"); - } + console.log("Edit button clicked!"); + if (edit.classList.contains("hidden")) { + edit.classList.remove("hidden"); + home.classList.add("hidden"); + info.classList.add("hidden"); + } else { + edit.classList.add("hidden"); + home.classList.remove("hidden"); + info.classList.add("hidden"); + } }); const showBtn = document.getElementById("table-btn"); const table = document.getElementsByTagName("table")[0]; showBtn.addEventListener("click", () => { - if (table.classList.contains("hidden")) { - showBtn.innerHTML = "Hide"; - table.classList.remove("hidden"); - } else { - showBtn.innerHTML = "Show"; - table.classList.add("hidden"); - } + if (table.classList.contains("hidden")) { + showBtn.innerHTML = "Hide"; + table.classList.remove("hidden"); + } else { + showBtn.innerHTML = "Show"; + table.classList.add("hidden"); + } }); // ============== Utility Functions ============== -function getSocialLinks() { - const socialLinks = {}; - fetch("../social-links.json") - .then(response => { - if (!response.ok) { - throw new Error("Failed to fetch social links"); - } - return response.json(); - }) - .then(jsonData => { - Object.keys(jsonData).slice(1).forEach(key => { - socialLinks[key] = jsonData[key]; - createSocialLink(key, jsonData[key]); - }); - return socialLinks; - }) - .catch(error => { - console.error("Error reading social links file:", error); - return {}; +// Fetch the usernames from a github repo +function getSocialLinks(url) { + const socialLinks = {}; + fetch(url) + .then((response) => { + if (!response.ok) { + throw new Error("Failed to fetch social links"); + } + return response.json(); + }) + .then((jsonData) => { + Object.keys(jsonData) + .slice(1) + .forEach((key) => { + socialLinks[key] = jsonData[key]; + createSocialLink(key, jsonData[key]); }); - return socialLinks; -}; -const socialLinks = getSocialLinks(); - + return socialLinks; + }) + .catch((error) => { + console.error("Error reading social links file:", error); + return {}; + }); + return socialLinks; +} +const socialLinks = ""; +// Check if there is any locally saved data +chrome.storage.local.get(null, function (result) { + if (chrome.runtime.lastError) { + console.error( + "Error retrieving locally saved data:", + chrome.runtime.lastError + ); + return; + } + + if (Object.keys(result).length === 0) { + console.log("No locally saved data found"); + socialLinks = getSocialLinks("../social-links.json"); + } else { + console.log("Locally saved data found:", result); + socialLinks = getSocialLinks(result.remoteURL); + } +}); // ============== Home ============== function showCopyMessage(key) { - console.log(`Copied ${key} to clipboard!`); -}; + console.log(`Copied ${key} to clipboard!`); +} function createImage(key) { - const img = document.createElement("img"); - img.classList.add("social-logo"); - img.alt = key; - img.src = `../assets/logos/${key}.png`; - return img; + const img = document.createElement("img"); + img.classList.add("social-logo"); + img.alt = key; + img.src = `../assets/logos/${key}.png`; + return img; +} + +function fetchUsername(valueUrl) { + const splitLink = valueUrl.split("/"); + const username = splitLink[splitLink.length - 1]; + return username; } const socialLinksContainer = document.getElementById("socialLinks"); function createSocialLink(key, value) { - const li = document.createElement("li"); - const img = createImage(key); - img.onload = () => { - li.appendChild(img); - li.addEventListener("click", () => { - navigator.clipboard.writeText(value); // Copy the value to clipboard - showCopyMessage(key); - }); - socialLinksContainer.appendChild(li); - }; - img.onerror = () => { - li.remove(); - }; + const li = document.createElement("li"); + const img = createImage(key); + img.title = fetchUsername(value) || key; + img.onload = () => { + li.appendChild(img); + li.addEventListener("click", () => { + navigator.clipboard.writeText(value); // Copy the value to clipboard + showCopyMessage(key); + }); socialLinksContainer.appendChild(li); + }; + img.onerror = () => { + li.remove(); + }; + socialLinksContainer.appendChild(li); } // ============== Random Placeholder Generation ============== const placeholderTexts = [ - "Paste your Social Handle here", - "https://social.media/your_username", - "Ctrl + V your social media profile", - "Enter your profile link here", - "Share your social media URL", - "Drop your handle here", - "Provide your social media profile", - "Link to your social media", - "Type your username", - "Insert your social link", - "Enter your profile address", - "Submit your social profile URL", - "Add your social media handle", - "Copy and paste your profile URL", - "Insert your social media handle", - "Link your profile here", - "Add your social media link", - "Enter your social profile", - "Paste your profile URL here", - "Share your handle", - "Input your social media URL", - "Type in your profile link", - "Provide your social profile address", - "Paste your link here", - "Enter the URL to your profile", - "Drop your profile address", - "Share your social handle link", - "Input your handle", - "Add your social URL", + "Paste your Social Handle here", + "https://social.media/your_username", + "Ctrl + V your social media profile", + "Enter your profile link here", + "Share your social media URL", + "Drop your handle here", + "Provide your social media profile", + "Link to your social media", + "Type your username", + "Insert your social link", + "Enter your profile address", + "Submit your social profile URL", + "Add your social media handle", + "Copy and paste your profile URL", + "Insert your social media handle", + "Link your profile here", + "Add your social media link", + "Enter your social profile", + "Paste your profile URL here", + "Share your handle", + "Input your social media URL", + "Type in your profile link", + "Provide your social profile address", + "Paste your link here", + "Enter the URL to your profile", + "Drop your profile address", + "Share your social handle link", + "Input your handle", + "Add your social URL", ]; // Function to generate a random placeholder text function getRandomPlaceholderText(placeholderTexts) { - const randomIndex = Math.floor(Math.random() * placeholderTexts.length); - return placeholderTexts[randomIndex]; + const randomIndex = Math.floor(Math.random() * placeholderTexts.length); + return placeholderTexts[randomIndex]; } - // ============== Search ============== -const searchInput = document.querySelector('.search-input'); -const linksContainer = document.getElementById('links-container'); -const originalLinkBoxes = Array.from(document.querySelectorAll('.link-box')); +const searchInput = document.querySelector(".search-input"); +const linksContainer = document.getElementById("links-container"); +const originalLinkBoxes = Array.from(document.querySelectorAll(".link-box")); function searchLinks() { - const searchText = searchInput.value.toLowerCase(); - - console.log('searchLinks function called'); - console.log('Search text:', searchText); - - // Clear the links container - linksContainer.innerHTML = ''; - - // Filter and append the appropriate link boxes - originalLinkBoxes.forEach(linkBox => { - const linkText = linkBox.querySelector('input').value.toLowerCase(); - const iconAlt = linkBox.querySelector('.icon').alt.toLowerCase(); - - console.log('Link text:', linkText); - console.log('Icon alt:', iconAlt); - - if (searchText === '' || linkText.includes(searchText) || iconAlt.includes(searchText)) { - console.log('Appending link box to container'); - // Append a cloned link box to avoid removing it from the original array - linksContainer.appendChild(linkBox.cloneNode(true)); - } else { - console.log('No match found, skipping link box'); - } - }); + const searchText = searchInput.value.toLowerCase(); + + console.log("searchLinks function called"); + console.log("Search text:", searchText); + + // Clear the links container + linksContainer.innerHTML = ""; + + // Filter and append the appropriate link boxes + originalLinkBoxes.forEach((linkBox) => { + const linkText = linkBox.querySelector("input").value.toLowerCase(); + const iconAlt = linkBox.querySelector(".icon").alt.toLowerCase(); + + console.log("Link text:", linkText); + console.log("Icon alt:", iconAlt); + + if ( + searchText === "" || + linkText.includes(searchText) || + iconAlt.includes(searchText) + ) { + console.log("Appending link box to container"); + // Append a cloned link box to avoid removing it from the original array + linksContainer.appendChild(linkBox.cloneNode(true)); + } else { + console.log("No match found, skipping link box"); + } + }); } -searchInput.addEventListener('input', searchLinks); -console.log('Event listener attached to search input'); - +searchInput.addEventListener("input", searchLinks); +console.log("Event listener attached to search input"); // ============== Link Validation ============== function updateLinkPreview(input) { - const button = input.parentNode.querySelector("button"); - const value = input.value; - button.disabled = false; - button.dataset.inputValue = value; - - // Add the event listener only once - if (!button.dataset.listenerAdded) { - button.addEventListener("click", openLink); - button.dataset.listenerAdded = true; // Mark the listener as added - } - - function openLink() { - // Use the latest input value stored in the data attribute - const value = button.dataset.inputValue; - window.open(value, "_blank"); - } -}; + const button = input.parentNode.querySelector("button"); + const value = input.value; + button.disabled = false; + button.dataset.inputValue = value; + + // Add the event listener only once + if (!button.dataset.listenerAdded) { + button.addEventListener("click", openLink); + button.dataset.listenerAdded = true; // Mark the listener as added + } + + function openLink() { + // Use the latest input value stored in the data attribute + const value = button.dataset.inputValue; + window.open(value, "_blank"); + } +} function isValidURL(url) { - const urlPattern = /^(http:\/\/|https:\/\/)[\w.-]+(?:\.[\w.-]+)+[\w\-\._~:/?#[\]@!$&'()*+,;=]+$/; - const mailtoPattern = /^(mailto:)?[^\s@]+@[^\s@]+\.[^\s@]+$/; + const urlPattern = + /^(http:\/\/|https:\/\/)[\w.-]+(?:\.[\w.-]+)+[\w\-\._~:/?#[\]@!$&'()*+,;=]+$/; + const mailtoPattern = /^(mailto:)?[^\s@]+@[^\s@]+\.[^\s@]+$/; - const isUrl = urlPattern.test(url); - const isMailto = mailtoPattern.test(url); + const isUrl = urlPattern.test(url); + const isMailto = mailtoPattern.test(url); - return isUrl || isMailto; + return isUrl || isMailto; } function validateInput(input) { - const previewButton = input.parentNode.querySelector("button"); - if (isValidURL(input.value)) { - input.style.borderBottomColor = "green"; - updateLinkPreview(input); - } else { - input.style.borderBottomColor = "red"; - previewButton.disabled = true; - } + const previewButton = input.parentNode.querySelector("button"); + if (isValidURL(input.value)) { + input.style.borderBottomColor = "green"; + updateLinkPreview(input); + } else { + input.style.borderBottomColor = "red"; + previewButton.disabled = true; + } } function removeIfEmpty(input) { - const linkBox = input.parentNode.parentNode; - const linkContainer = document.getElementById("links-container"); - if (input.value === "" && linkContainer.contains(linkBox) && document.getElementById(linkBox.id) !== null) { - try { - linkBox.remove(); - } catch (error) { - } - } + const linkBox = input.parentNode.parentNode; + const linkContainer = document.getElementById("links-container"); + if ( + input.value === "" && + linkContainer.contains(linkBox) && + document.getElementById(linkBox.id) !== null + ) { + try { + linkBox.remove(); + } catch (error) {} + } } function getSocialName(url) { - for (const key in socialLinks) { - const value = socialLinks[key].replace("", ""); - const valueUrl = new URL(value) - const host = valueUrl.hostname.replace("www.", ""); - if (url.includes(host)) { - return { key, value }; - } + for (const key in socialLinks) { + const value = socialLinks[key].replace("", ""); + const valueUrl = new URL(value); + const host = valueUrl.hostname.replace("www.", ""); + if (url.includes(host)) { + return { key, value }; } - return null; + } + return null; } function setIcon(key, parentElement) { - const iconElement = parentElement.querySelector('.icon'); - const logoPath = `../assets/logos/${key}.png`; - // png file must have the same name as the key. - const defaultLogoPath = '../assets/logos/default.png'; - - fetch(logoPath) - .then(response => { - if (!response.ok) { - throw new Error(`Logo not found:`); - } - iconElement.src = logoPath; - }) - .catch(() => { - iconElement.src = defaultLogoPath; - }); + const iconElement = parentElement.querySelector(".icon"); + const logoPath = `../assets/logos/${key}.png`; + // png file must have the same name as the key. + const defaultLogoPath = "../assets/logos/default.png"; + + fetch(logoPath) + .then((response) => { + if (!response.ok) { + throw new Error(`Logo not found:`); + } + iconElement.src = logoPath; + }) + .catch(() => { + iconElement.src = defaultLogoPath; + }); } function UpdateLinkBox(button) { - const parentElement = button.parentNode; - const inputElement = parentElement.querySelector("input"); - const inputValue = inputElement.value; - console.log("Placeholder value:", inputElement.placeholder); - console.log("Input value:", inputValue); + const parentElement = button.parentNode; + const inputElement = parentElement.querySelector("input"); + const inputValue = inputElement.value; + console.log("Placeholder value:", inputElement.placeholder); + console.log("Input value:", inputValue); - /* + /* Fixes: - check if the input value is MAIL - If not MAIL @@ -279,229 +312,262 @@ function UpdateLinkBox(button) { - validate complete profile URL using value of destructured object */ - console.log(getSocialName(inputValue)); - if (isValidURL(inputValue)) { - console.log("Valid URL!"); - const socialName = getSocialName(inputValue); - if (!socialName) { - button.disabled = true; - setIcon(null, parentElement); - return; - } - const { key, value } = socialName; - console.log("Key found!:", key); - setIcon(key, parentElement); - button.disabled = false; - //! It should done when the link is completed - inputElement.style.borderBottomColor = "transparent"; - - } else { - console.log("No key found!"); - setIcon(null, parentElement); - button.disabled = true; - }; + console.log(getSocialName(inputValue)); + if (isValidURL(inputValue)) { + console.log("Valid URL!"); + const socialName = getSocialName(inputValue); + if (!socialName) { + button.disabled = true; + setIcon(null, parentElement); + return; + } + const { key, value } = socialName; + console.log("Key found!:", key); + setIcon(key, parentElement); + button.disabled = false; + //! It should done when the link is completed + inputElement.style.borderBottomColor = "transparent"; + } else { + console.log("No key found!"); + setIcon(null, parentElement); + button.disabled = true; + } } function updateAllLinkBox() { - document.querySelectorAll("#edit #links-container input[type='text']").forEach(input => { - input.addEventListener("input", () => { - validateInput(input); - const button = input.parentNode.querySelector("button"); - console.log("Input changed!"); - UpdateLinkBox(button); - removeIfEmpty(input); - console.log("Changed", input.placeholder); - }); + document + .querySelectorAll("#edit #links-container input[type='text']") + .forEach((input) => { + input.addEventListener("input", () => { + validateInput(input); + const button = input.parentNode.querySelector("button"); + console.log("Input changed!"); + UpdateLinkBox(button); + removeIfEmpty(input); + console.log("Changed", input.placeholder); + }); }); } // ============== Focus Handlers ============== function checkFocusOut(event, linkBox) { - let otherLinkBox = event.relatedTarget; - switch (otherLinkBox) { - case null: - otherLinkBox = ""; - break; - case otherLinkBox.classList.contains("link-box"): - break; - case otherLinkBox.classList.contains("dragger"): - otherLinkBox = otherLinkBox.parentNode; - break; - case otherLinkBox.classList.contains("link"): - otherLinkBox = otherLinkBox.parentNode; - break; - case otherLinkBox.classList.contains("icon"): - otherLinkBox = otherLinkBox.parentNode.parentNode; - break; - case otherLinkBox.classList.contains("input"): - otherLinkBox = otherLinkBox.parentNode.parentNode; - break; - case otherLinkBox.classList.contains("preview"): - otherLinkBox = otherLinkBox.parentNode.parentNode; - break; - case otherLinkBox.classList.contains("share"): - otherLinkBox = otherLinkBox.parentNode.parentNode.parentNode; - break; - default: - otherLinkBox = ""; - break; - }; - return otherLinkBox.id !== linkBox.id; -}; + let otherLinkBox = event.relatedTarget; + switch (otherLinkBox) { + case null: + otherLinkBox = ""; + break; + case otherLinkBox.classList.contains("link-box"): + break; + case otherLinkBox.classList.contains("dragger"): + otherLinkBox = otherLinkBox.parentNode; + break; + case otherLinkBox.classList.contains("link"): + otherLinkBox = otherLinkBox.parentNode; + break; + case otherLinkBox.classList.contains("icon"): + otherLinkBox = otherLinkBox.parentNode.parentNode; + break; + case otherLinkBox.classList.contains("input"): + otherLinkBox = otherLinkBox.parentNode.parentNode; + break; + case otherLinkBox.classList.contains("preview"): + otherLinkBox = otherLinkBox.parentNode.parentNode; + break; + case otherLinkBox.classList.contains("share"): + otherLinkBox = otherLinkBox.parentNode.parentNode.parentNode; + break; + default: + otherLinkBox = ""; + break; + } + return otherLinkBox.id !== linkBox.id; +} // ============== Add Link Box ============== const addLinkBtn = document.querySelector(".add-link-btn"); let idx = 0; function addLinkBox() { - const parentLinkBox = document.getElementById("links-container"); - let randomPlaceholder = getRandomPlaceholderText(placeholderTexts); - - const childBoxFormat = document.createElement('li'); - childBoxFormat.classList.add('link-box', 'column'); - childBoxFormat.setAttribute("draggable", true); - childBoxFormat.id = `link-box-${idx}`; - - const draggerImg = document.createElement('img'); - draggerImg.src = '../assets/logos/drag.png'; - draggerImg.alt = 'dragger'; - draggerImg.classList.add('dragger'); - draggerImg.tabIndex = 1; - childBoxFormat.appendChild(draggerImg); - - const linkDiv = document.createElement('div'); - linkDiv.classList.add('link'); - linkDiv.tabIndex = 2; - - const iconImg = document.createElement('img'); - iconImg.src = '../assets/logos/default.png'; - iconImg.alt = 'linkedin'; - iconImg.classList.add('icon'); - iconImg.tabIndex = 3; - linkDiv.appendChild(iconImg); - - const inputField = document.createElement('input'); - inputField.type = 'text'; - inputField.placeholder = randomPlaceholder; - inputField.classList.add('input'); - inputField.tabIndex = 4; - linkDiv.appendChild(inputField); - - const previewBtn = document.createElement('button'); - previewBtn.classList.add('preview'); - previewBtn.disabled = true; - previewBtn.tabIndex = 5; - linkDiv.appendChild(previewBtn); - - const shareImg = document.createElement('img'); - shareImg.src = '../assets/logos/share.png'; - shareImg.alt = 'preview link'; - shareImg.classList.add('share'); - shareImg.tabIndex = 6; - - previewBtn.appendChild(shareImg); - childBoxFormat.appendChild(linkDiv); - parentLinkBox.insertBefore(childBoxFormat, parentLinkBox.firstChild); - idx += 1; - - const linkBox = inputField.parentNode.parentNode; - - linkBox.addEventListener('focusin', () => { - linkDiv.style.backgroundColor = "#eeeeee"; - }); - linkBox.addEventListener('focusout', () => { - linkDiv.style.backgroundColor = "#d0beff"; - }) - - inputField.focus(); - inputField.addEventListener('focusout', (event) => { - if (checkFocusOut(event, linkBox)) { - console.log("Focus Out"); - removeIfEmpty(inputField); - } - }); + const parentLinkBox = document.getElementById("links-container"); + let randomPlaceholder = getRandomPlaceholderText(placeholderTexts); + + const childBoxFormat = document.createElement("li"); + childBoxFormat.classList.add("link-box", "column"); + childBoxFormat.setAttribute("draggable", true); + childBoxFormat.id = `link-box-${idx}`; + + const draggerImg = document.createElement("img"); + draggerImg.src = "../assets/logos/drag.png"; + draggerImg.alt = "dragger"; + draggerImg.classList.add("dragger"); + draggerImg.tabIndex = 1; + childBoxFormat.appendChild(draggerImg); + + const linkDiv = document.createElement("div"); + linkDiv.classList.add("link"); + linkDiv.tabIndex = 2; + + const iconImg = document.createElement("img"); + iconImg.src = "../assets/logos/default.png"; + iconImg.alt = "linkedin"; + iconImg.classList.add("icon"); + iconImg.tabIndex = 3; + linkDiv.appendChild(iconImg); + + const inputField = document.createElement("input"); + inputField.type = "text"; + inputField.placeholder = randomPlaceholder; + inputField.classList.add("input"); + inputField.tabIndex = 4; + linkDiv.appendChild(inputField); + + const previewBtn = document.createElement("button"); + previewBtn.classList.add("preview"); + previewBtn.disabled = true; + previewBtn.tabIndex = 5; + linkDiv.appendChild(previewBtn); + + const shareImg = document.createElement("img"); + shareImg.src = "../assets/logos/share.png"; + shareImg.alt = "preview link"; + shareImg.classList.add("share"); + shareImg.tabIndex = 6; + + previewBtn.appendChild(shareImg); + childBoxFormat.appendChild(linkDiv); + parentLinkBox.insertBefore(childBoxFormat, parentLinkBox.firstChild); + idx += 1; + + const linkBox = inputField.parentNode.parentNode; + + linkBox.addEventListener("focusin", () => { + linkDiv.style.backgroundColor = "#eeeeee"; + }); + linkBox.addEventListener("focusout", () => { + linkDiv.style.backgroundColor = "#d0beff"; + }); + + inputField.focus(); + inputField.addEventListener("focusout", (event) => { + if (checkFocusOut(event, linkBox)) { + console.log("Focus Out"); + removeIfEmpty(inputField); + } + }); - addDnDHandlers(linkBox); - updateAllLinkBox(); -}; + addDnDHandlers(linkBox); + updateAllLinkBox(); +} -addLinkBtn.addEventListener('click', () => { - addLinkBox(); +addLinkBtn.addEventListener("click", () => { + addLinkBox(); }); // ============== Drag & Drop ============== var dragSrcEl = null; function handleDragStart(e) { - dragSrcEl = this; - e.dataTransfer.effectAllowed = 'move'; - e.dataTransfer.setData('text/html', this.outerHTML); - this.classList.add('dragElem'); + dragSrcEl = this; + e.dataTransfer.effectAllowed = "move"; + e.dataTransfer.setData("text/html", this.outerHTML); + this.classList.add("dragElem"); } function handleDragOver(e) { - e.preventDefault(); - e.dataTransfer.dropEffect = 'move'; - var top = this.getBoundingClientRect().top; - var bottom = this.getBoundingClientRect().bottom; - if (e.clientY < (top + bottom) / 2) { - this.classList.add('over-before'); - this.classList.remove('over-after'); - } - else { - this.classList.add('over-after'); - this.classList.remove('over-before'); - } + e.preventDefault(); + e.dataTransfer.dropEffect = "move"; + var top = this.getBoundingClientRect().top; + var bottom = this.getBoundingClientRect().bottom; + if (e.clientY < (top + bottom) / 2) { + this.classList.add("over-before"); + this.classList.remove("over-after"); + } else { + this.classList.add("over-after"); + this.classList.remove("over-before"); + } } -function handleDragEnter(e) { - -} +function handleDragEnter(e) {} function handleDragLeave(e) { - this.classList.remove('dragElem'); - this.classList.remove('over-before'); - this.classList.remove('over-after'); + this.classList.remove("dragElem"); + this.classList.remove("over-before"); + this.classList.remove("over-after"); } function handleDrop(e) { - e.stopPropagation(); - if (dragSrcEl != this) { - this.parentNode.removeChild(dragSrcEl); - - if (this.classList.contains('over-before')) { - this.parentNode.insertBefore(dragSrcEl, this); - addDnDHandlers(this.previousElementSibling); - } - else if (this.classList.contains('over-after')) { - this.parentNode.insertBefore(dragSrcEl, this.nextSibling); - addDnDHandlers(this.nextElementSibling); - } - } else { - console.log("THISSSS", this); - this.classList.remove('over'); + e.stopPropagation(); + if (dragSrcEl != this) { + this.parentNode.removeChild(dragSrcEl); + + if (this.classList.contains("over-before")) { + this.parentNode.insertBefore(dragSrcEl, this); + addDnDHandlers(this.previousElementSibling); + } else if (this.classList.contains("over-after")) { + this.parentNode.insertBefore(dragSrcEl, this.nextSibling); + addDnDHandlers(this.nextElementSibling); } - dragSrcEl.classList.remove('dragElem'); - this.classList.remove('over'); - this.classList.remove('over-before'); - this.classList.remove('over-after'); + } else { + console.log("THISSSS", this); + this.classList.remove("over"); + } + dragSrcEl.classList.remove("dragElem"); + this.classList.remove("over"); + this.classList.remove("over-before"); + this.classList.remove("over-after"); } function handleDragEnd(e) { - this.classList.remove('over-before'); - this.classList.remove('over-after'); + this.classList.remove("over-before"); + this.classList.remove("over-after"); } function addDnDHandlers(elem) { - elem.addEventListener('dragstart', handleDragStart, false); - elem.addEventListener('dragenter', handleDragEnter, false) - elem.addEventListener('dragover', handleDragOver, false); - elem.addEventListener('dragleave', handleDragLeave, false); - elem.addEventListener('drop', handleDrop, false); - elem.addEventListener('dragend', handleDragEnd, false); + elem.addEventListener("dragstart", handleDragStart, false); + elem.addEventListener("dragenter", handleDragEnter, false); + elem.addEventListener("dragover", handleDragOver, false); + elem.addEventListener("dragleave", handleDragLeave, false); + elem.addEventListener("drop", handleDrop, false); + elem.addEventListener("dragend", handleDragEnd, false); } - // ============== Saving Links ============== const saveBtn = document.getElementById("save-btn"); saveBtn.addEventListener("click", () => { - const links = Array.from(document.querySelectorAll(".link-box input")); -}); \ No newline at end of file + const links = Array.from(document.querySelectorAll(".link-box input")); +}); + +// ============== Add External URL for Usernames ============== + +document.addEventListener("DOMContentLoaded", function () { + // Get references to the button elements + const openPopupButton = document.getElementById("openPopupButton"); + const closePopupButton = document.getElementById("closePopupButton"); + const saveURL = document.getElementById("saveURL"); + const popup = document.getElementById("externalUrlPopup"); + const remoteUrl = document.getElementById("remoteUrl"); + + // Add event listener to the open button + openPopupButton.addEventListener("click", function () { + popup.style.display = "block"; + console.log("Popup Open"); + }); + + // Add event listener to the close button + closePopupButton.addEventListener("click", function () { + popup.style.display = "none"; + console.log("Popup Close"); + }); + + // Save URL to local storage so it fetches the username links from the remote repo + saveURL.addEventListener("click", function () { + // Data to be saved + var dataToSave = { + remoteURL: remoteUrl.value, + }; + + // Save data to local storage + chrome.storage.local.set(dataToSave, function () { + console.log("URL saved to local storage"); + popup.style.display = "none"; + }); + }); +}); diff --git a/src/code/style.css b/src/code/style.css index 1fd6433..fb25f57 100644 --- a/src/code/style.css +++ b/src/code/style.css @@ -1,544 +1,616 @@ -@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=M+PLUS+1+Code:wght@100..700&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=M+PLUS+1+Code:wght@100..700&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap"); * { - margin: 0; - padding: 0; - box-sizing: border-box; - /* font-family: "Source Sans 3", sans-serif; */ - font-family: "Raleway", sans-serif; - transition: all 300ms ease; - list-style-type: none; + margin: 0; + padding: 0; + box-sizing: border-box; + /* font-family: "Source Sans 3", sans-serif; */ + font-family: "Raleway", sans-serif; + transition: all 300ms ease; + list-style-type: none; } :root { - --primary-color: #7029ff; - --secondary-color: #b58fff; - --accent-color: #d0beff; - --text-color: #eeeeee; - --text-color-2: #242327; + --primary-color: #7029ff; + --secondary-color: #b58fff; + --accent-color: #d0beff; + --text-color: #eeeeee; + --text-color-2: #242327; } body { - width: 500px; - height: 450px; - font-family: Arial, Helvetica, sans-serif; - text-align: center; - scroll-behavior: smooth; + width: 500px; + height: 450px; + font-family: Arial, Helvetica, sans-serif; + text-align: center; + scroll-behavior: smooth; } a { - all: unset; - cursor: pointer; + all: unset; + cursor: pointer; } /* ============== Header ============== */ header { - background-color: var(--primary-color); - color: var(--text-color); - padding: 0.8rem 2rem; - display: flex; - justify-content: space-between; - align-items: center; + background-color: var(--primary-color); + color: var(--text-color); + padding: 0.8rem 2rem; + display: flex; + justify-content: space-between; + align-items: center; } #name a { - display: flex; - justify-content: center; - align-items: center; - gap: 0.5rem; + display: flex; + justify-content: center; + align-items: center; + gap: 0.5rem; } #name img { - width: 20px; - height: 20px; + width: 20px; + height: 20px; } #name h1 { - font-size: 1.5rem; + font-size: 1.5rem; } nav ul { - display: flex; - justify-content: space-around; - align-items: center; - gap: 1.5rem; + display: flex; + justify-content: space-around; + align-items: center; + gap: 1.5rem; } nav ul li { - list-style: none; + list-style: none; } nav li button { - width: 25px; - height: 25px; - border: none; - background-color: transparent; + width: 25px; + height: 25px; + border: none; + background-color: transparent; } nav li button:active { - transform: scale(0.9); - transition-duration: 100ms; + transform: scale(0.9); + transition-duration: 100ms; } #info-btn { - background-image: url("../assets/logos/info.png"); - background-size: cover; - cursor: pointer; + background-image: url("../assets/logos/info.png"); + background-size: cover; + cursor: pointer; } #info-btn:hover { - background-image: url("../assets/logos/info-hover.png"); + background-image: url("../assets/logos/info-hover.png"); } #edit-btn { - background-image: url("../assets/logos/edit.png"); - background-size: cover; - cursor: pointer; + background-image: url("../assets/logos/edit.png"); + background-size: cover; + cursor: pointer; } #edit-btn:hover { - background-image: url("../assets/logos/edit-hover.png"); + background-image: url("../assets/logos/edit-hover.png"); } /* ============== main ============== */ main { - width: 100%; - height: 400px; - background-color: var(--secondary-color); - overflow-x: hidden; + width: 100%; + height: 400px; + background-color: var(--secondary-color); + overflow-x: hidden; } section { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - text-align: left; - gap: 1rem; - position: relative; - overflow-y: auto; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + text-align: left; + gap: 1rem; + position: relative; + overflow-y: auto; } section::-webkit-scrollbar { - width: 0.6rem; - background-color: transparent; + width: 0.6rem; + background-color: transparent; } section::-webkit-scrollbar-thumb { - background: var(--primary-color); - height: 30px; + background: var(--primary-color); + height: 30px; } h2 { - font-size: 1.5rem; + font-size: 1.5rem; } p { - font-weight: 500; + font-weight: 500; } .hidden { - display: none; - padding: 0px; - margin: 0px; + display: none; + padding: 0px; + margin: 0px; } - /* ============== Home Panel ============== */ - #socialLinks { - width: 100%; - height: fit-content; - padding: 2rem; - background-color: var(--secondary-color); - display: grid; - grid-template-columns: repeat(4, 1fr); - justify-items: center; - gap: 2rem 1rem; + width: 100%; + height: fit-content; + padding: 2rem; + background-color: var(--secondary-color); + display: grid; + grid-template-columns: repeat(4, 1fr); + justify-items: center; + gap: 2rem 1rem; } #socialLinks li { - width: 65px; - height: 65px; - background-color: var(--accent-color); - border: 2px solid var(--primary-color); - border-radius: 7px; + width: 65px; + height: 65px; + background-color: var(--accent-color); + border: 2px solid var(--primary-color); + border-radius: 7px; } #socialLinks li:hover { - background-color: var(--primary-color); - cursor: pointer; + background-color: var(--primary-color); + cursor: pointer; } -#socialLinks li:active, #socialLinks li:focus { - transform: scale(0.9); - transition-duration: 100ms; +#socialLinks li:active, +#socialLinks li:focus { + transform: scale(0.9); + transition-duration: 100ms; } #socialLinks li img { - padding: .7rem; - border-radius: inherit; - width: 100%; - height: 100%; + padding: 0.7rem; + border-radius: inherit; + width: 100%; + height: 100%; } /* ============== Info Panel ============== */ #info { - padding: 1rem 2rem; - padding-bottom: 0; + padding: 1rem 2rem; + padding-bottom: 0; } #heading { - width: fit-content; - align-self: center; - display: flex; - justify-content: center; - align-items: center; - gap: 0.5rem; - padding: 1.2rem; - padding-bottom: 2rem; - background-color: var(--primary-color); - color: var(--text-color); - border-radius: 10px; + width: fit-content; + align-self: center; + display: flex; + justify-content: center; + align-items: center; + gap: 0.5rem; + padding: 1.2rem; + padding-bottom: 2rem; + background-color: var(--primary-color); + color: var(--text-color); + border-radius: 10px; } #heading img { - width: 25px; - height: 25px; + width: 25px; + height: 25px; } #tagline { - font-size: 0.75rem; - font-weight: 500; - color: var(--text-color); - align-self: center; - position: absolute; - top: 70px; + font-size: 0.75rem; + font-weight: 500; + color: var(--text-color); + align-self: center; + position: absolute; + top: 70px; } h3 { - color: var(--primary-color); - font-size: 1.2rem; - font-weight: 800; - border-bottom: 2px solid var(--primary-color); - padding-bottom: 0.2rem; - margin-bottom: 0.5rem; + color: var(--primary-color); + font-size: 1.2rem; + font-weight: 800; + border-bottom: 2px solid var(--primary-color); + padding-bottom: 0.2rem; + margin-bottom: 0.5rem; } #about p, #commands p { - font-size: 0.9rem; + font-size: 0.9rem; } #about p strong { - color: var(--primary-color); - font-weight: 800; + color: var(--primary-color); + font-weight: 800; } #commands .cmd { - background-color: #c5aff3; - color: var(--primary-color); - font-family: "Fira Code", monospace; - letter-spacing: 1px; - font-size: 0.8rem; - font-weight: 600; - padding: 1px 10px; - border-radius: 5px; + background-color: #c5aff3; + color: var(--primary-color); + font-family: "Fira Code", monospace; + letter-spacing: 1px; + font-size: 0.8rem; + font-weight: 600; + padding: 1px 10px; + border-radius: 5px; } #commands button { - margin-top: 5px; - background: var(--primary-color); - color: var(--text-color); - font-size: 0.9rem; - font-weight: 600; - border: none; - padding: 0.5rem 1rem; - border-radius: 5px; - cursor: pointer; + margin-top: 5px; + background: var(--primary-color); + color: var(--text-color); + font-size: 0.9rem; + font-weight: 600; + border: none; + padding: 0.5rem 1rem; + border-radius: 5px; + cursor: pointer; } #commands button:active { - transform: scale(0.9); + transform: scale(0.9); } table { - width: 100%; - border-collapse: collapse; - margin: 1rem 0; + width: 100%; + border-collapse: collapse; + margin: 1rem 0; } table tr { - border-bottom: 1px solid var(--primary-color); - font-size: 0.9rem; - font-weight: 700; + border-bottom: 1px solid var(--primary-color); + font-size: 0.9rem; + font-weight: 700; } table tr:hover { - background-color: #ffffff77; + background-color: #ffffff77; } table th { - background-color: var(--primary-color); - color: var(--text-color); - font-size: 1rem; - font-weight: 700; - padding: 0.5rem; + background-color: var(--primary-color); + color: var(--text-color); + font-size: 1rem; + font-weight: 700; + padding: 0.5rem; } table td { - color: var(--primary-color); - padding: 0.5rem; - width: 30%; + color: var(--primary-color); + padding: 0.5rem; + width: 30%; } #credits { - background-color: var(--secondary-color); - display: flex; - justify-content: center; - align-items: center; - gap: 1.5rem; - font-size: 0.8rem; - padding: 1rem 0; - border-top: 2px solid var(--primary-color); + background-color: var(--secondary-color); + display: flex; + justify-content: center; + align-items: center; + gap: 1.5rem; + font-size: 0.8rem; + padding: 1rem 0; + border-top: 2px solid var(--primary-color); } #credits a:hover { - color: var(--text-color); + color: var(--text-color); } #images { - display: flex; - gap: 1.5rem; + display: flex; + gap: 1.5rem; } #images img { - width: 35px; - height: 35px; + width: 35px; + height: 35px; } #images img:hover { - transform: scale(1.1); + transform: scale(1.1); } /* ============== Edit Panel ============== */ #edit { - gap: 0; + gap: 0; } .search-container { - background-color: var(--primary-color); - display: flex; - align-items: center; - padding: 10px 2.5rem 10px 2rem; - gap: 1rem; + background-color: var(--primary-color); + display: flex; + align-items: center; + padding: 10px 2.5rem 10px 2rem; + gap: 1rem; +} + +.input-field { + flex: 1; + padding: 8px 12px; + border: none; + border-radius: 5px; + font-size: 0.9rem; + outline: none; + border: none; + background-color: var(--accent-color); + color: var(--primary-color); + font-weight: 600; + text-align: center; } -.search-input { - flex: 1; - padding: 8px 12px; - border: none; - border-radius: 5px; - font-size: 0.9rem; - outline: none; - border: none; - background-color: var(--accent-color); - color: var(--primary-color); - font-weight: 600; - text-align: center; - +/* Focus, hover, and active effects for search bar */ +.input-field:hover, +.input-field:focus { + background-color: var(--text-color); } -/* Focus, hover, and active effects for search bar */ -.search-input:hover, .search-input:focus { - background-color: var(--text-color); +.add-link-btn, +.add-url-btn { + width: 25px; + height: 25px; + background-color: transparent; + background-image: url("../assets/logos/plus.png"); + background-size: cover; + border: none; + border-radius: 5px; } -.add-link-btn { - width: 25px; - height: 25px; - background-color: transparent; - background-image: url("../assets/logos/plus.png"); - background-size: cover; - border: none; - border-radius: 5px; +.add-link-btn:hover, +.add-url-btn:hover { + background-image: url("../assets/logos/plus-hover.png"); } -.add-link-btn:hover { - background-image: url("../assets/logos/plus-hover.png"); +.add-link-btn:active, +.add-url-btn:active { + background-image: url("../assets/logos/plus-hover.png"); + transform: scale(0.7); } -.add-link-btn:active { - background-image: url("../assets/logos/plus-hover.png"); - transform: scale(0.7); +.add-url-btn, +.add-url-btn:hover, +.add-url-btn:active { + background-image: url(../assets/logos/default.png); + filter: invert(100%) sepia(76%) saturate(66%) hue-rotate(171deg) + brightness(112%) contrast(87%); + + /* Other Options + + background-color: var(--accent-color); + filter: invert(71%) sepia(65%) saturate(3485%) hue-rotate(213deg) brightness(101%) contrast(101%); + + To get the exact filter values - https://codepen.io/sosuke/pen/Pjoqqp + */ } #links-container { - min-height: 270px; - max-height: 270px; - padding: 1rem 0; - display: flex; - flex-direction: column; - gap: 1rem; - list-style-type: none; - overflow-y: auto; + min-height: 270px; + max-height: 270px; + padding: 1rem 0; + display: flex; + flex-direction: column; + gap: 1rem; + list-style-type: none; + overflow-y: auto; } #links-container::-webkit-scrollbar { - width: 0.6rem; - background-color: transparent; + width: 0.6rem; + background-color: transparent; } #links-container::-webkit-scrollbar-thumb { - background: var(--primary-color); - height: 30px; + background: var(--primary-color); + height: 30px; } .link-box { - display: flex; - background-color: transparent; - flex-direction: row; - padding-right: 1.8rem; - justify-content: center; - align-items: center; - gap: 0.5rem; + display: flex; + background-color: transparent; + flex-direction: row; + padding-right: 1.8rem; + justify-content: center; + align-items: center; + gap: 0.5rem; } .dragger { - width: auto; - height: 25px; - visibility: hidden; - cursor: ns-resize; + width: auto; + height: 25px; + visibility: hidden; + cursor: ns-resize; } .link-box:focus-within .dragger, .link-box:hover .dragger { - visibility: visible; + visibility: visible; } .link { - width: 420px; - padding: 10px; - background-color: var(--accent-color); - display: flex; - justify-content: space-around; - align-items: center; - gap: 1rem; - border: 2px solid transparent; - border: 2px solid var(--primary-color); - border-radius: 10px; + width: 420px; + padding: 10px; + background-color: var(--accent-color); + display: flex; + justify-content: space-around; + align-items: center; + gap: 1rem; + border: 2px solid transparent; + border: 2px solid var(--primary-color); + border-radius: 10px; } .link-box:focus-within .link, .link-box:hover .link { - border-color: var(--primary-color); - background-color: var(--text-color); + border-color: var(--primary-color); + background-color: var(--text-color); } .icon { - width: 25px; - height: 25px; + width: 25px; + height: 25px; } .link button { - width: 40px; - height: 30px; - border: none; - background-color: transparent; - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; + width: 40px; + height: 30px; + border: none; + background-color: transparent; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; } .link button:active { - transform: scale(0.8); - transition-duration: 100ms; + transform: scale(0.8); + transition-duration: 100ms; } .link button:disabled { - cursor: not-allowed; - opacity: 0.1; + cursor: not-allowed; + opacity: 0.1; } .link button img { - width: 20px; - height: 20px; + width: 20px; + height: 20px; } .link input[type="text"] { - flex: 1; - margin-top: 5px; - padding-bottom: 2px; - background-color: transparent; - font-size: 1rem; - border: none; - outline: none; - color: var(--primary-color); - font-family: "M PLUS 1 Code", monospace; - font-weight: 500; - border-bottom: 2px solid transparent; - caret-color: var(--primary-color); - caret: pointer; + flex: 1; + margin-top: 5px; + padding-bottom: 2px; + background-color: transparent; + font-size: 1rem; + border: none; + outline: none; + color: var(--primary-color); + font-family: "M PLUS 1 Code", monospace; + font-weight: 500; + border-bottom: 2px solid transparent; + caret-color: var(--primary-color); + caret: pointer; } .link input[type="text"]:focus { - border-color: var(--primary-color); + border-color: var(--primary-color); } .link input[type="text"]::placeholder { - font-family: "Raleway", sans-serif; - font-weight: 500; - font-style: italic; - color: var(--text-color-2); + font-family: "Raleway", sans-serif; + font-weight: 500; + font-style: italic; + color: var(--text-color-2); } /* ====== Drag & Drop ====== */ .column.dragElem { - opacity: 0.1; + opacity: 0.1; } .column.over { - border-top: 2px solid orange; + border-top: 2px solid orange; } .column.over-before { - padding-top: 50px; + padding-top: 50px; } .column.over-after { - padding-bottom: 50px; + padding-bottom: 50px; } .column.drag-enter { - border: 2px dashed #000; + border: 2px dashed #000; } /* ====== Save Button ====== */ #save-btn-area { - position: absolute; - bottom: 0; - width: 100%; - display: flex; - justify-content: center; - background-color: var(--secondary-color); - padding: 1rem; + position: absolute; + bottom: 0; + width: 100%; + display: flex; + justify-content: center; + background-color: var(--secondary-color); + padding: 1rem; } #save-btn { - padding: 0.7rem 2.3rem; - background-color: var(--primary-color); - color: var(--text-color); - font-weight: 600; - border: 2px solid transparent; - border-radius: 5px; - font-size: 0.9rem; - cursor: pointer; + padding: 0.7rem 2.3rem; + background-color: var(--primary-color); + color: var(--text-color); + font-weight: 600; + border: 2px solid transparent; + border-radius: 5px; + font-size: 0.9rem; + cursor: pointer; } #save-btn:active { - transform: scale(0.9); - transition-duration: 100ms; + transform: scale(0.9); + transition-duration: 100ms; +} + +#externalUrlPopup { + position: fixed; + display: none; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: var(--primary-color); + height: auto; + width: fit-content; + padding: 0.8rem; +} + +#externalUrlPopup > div { + display: flex; + align-items: center; + justify-content: center; +} + +#closePopupButton { + width: 18px; + height: 18px; + background-color: transparent; + background-size: cover; + border: none; + border-radius: 5px; + position: absolute; + top: 0; + right: 0; + rotate: calc(45deg); + background-image: url("../assets/logos/plus.png"); +} + +#closePopupButton:hover, +#closePopupButton:active { + background-image: url("../assets/logos/plus-hover.png"); +} + +.btn-save { + padding: 0.5rem 1rem; + margin: 0.5rem; + background-color: var(--secondary-color); + color: var(--text-color-2); + font-weight: 600; + border: 2px solid transparent; + border-radius: 5px; + font-size: 0.9rem; + cursor: pointer; +} + +.btn-save:active { + transform: scale(0.9); + transition-duration: 100ms; } diff --git a/src/manifest.json b/src/manifest.json index 2b00761..06bb315 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -1,26 +1,22 @@ { - "manifest_version": 3, - "name": "SocialRepo", - "version": "0.1", - "description": "Your Social Handles Repository.", - "permissions": ["activeTab"], - "action": { - "default_popup": "./code/index.html", - "default_icon": "./assets/logos/logo.png" - }, - "icons": { - "16": "./assets/logos/logo.png", - "48": "./assets/logos/logo.png", - "128": "./assets/logos/logo.png" - }, - "web_accessible_resources": [ - { - "resources": [ - "./code/index.html", - "./code/style.css", - "./code/index.js" - ], - "matches": [""] - } - ] + "manifest_version": 3, + "name": "SocialRepo", + "version": "0.1", + "description": "Your Social Handles Repository.", + "permissions": ["activeTab", "storage"], + "action": { + "default_popup": "./code/index.html", + "default_icon": "./assets/logos/logo.png" + }, + "icons": { + "16": "./assets/logos/logo.png", + "48": "./assets/logos/logo.png", + "128": "./assets/logos/logo.png" + }, + "web_accessible_resources": [ + { + "resources": ["./code/index.html", "./code/style.css", "./code/index.js"], + "matches": [""] + } + ] } diff --git a/src/social-links.json b/src/social-links.json index 666377c..e0ad44c 100644 --- a/src/social-links.json +++ b/src/social-links.json @@ -1,58 +1,58 @@ { - "social_media_name": "link", - "airchat": "https://www.air.chat/user/", - "bio.link": "https://bio.link/", - "codeberg":"https://codeberg.org/", - "codechef" : "https://www.codechef.com/users/", - "codeforces": "https://codeforces.com/profile/", - "codewars":"https://www.codewars.com/users/", - "commudle":"https://www.commudle.com/users/", - "dev.to": "https://dev.to/", - "devfolio":"https://devfolio.co/@", - "devpost":"https://devpost.com/", - "discord": "https://discord.com/users/", - "exercism": "https://exercism.io/profiles/", - "facebook": "https://www.facebook.com/", - "fiverr": "https://www.fiverr.com/", - "github": "https://www.github.com/", - "gitlab": "https://www.gitlab.com/", - "hashnode": "https://hashnode.com/@", - "hackerrank": "https://www.hackerrank.com/profile/", - "instagram" : "https://www.instagram.com/", - "kaggle":"https://www.kaggle.com/", - "leetcode": "https://leetcode.com/", - "linkedin": "https://www.linkedin.com/in/", - "linktree": "https://linktr.ee/", - "mastodon":"https://mastodon.social/@", - "medium": "https://.medium.com", - "odysee":"https://odysee.com/@", - "pinterest": "https://in.pinterest.com/", - "peerlist": "https://peerlist.io/", - "quora": "https://www.quora.com/profile/", - "reddit": "https://www.reddit.com/user/", - "snapchat": "https://www.snapchat.com/add/", - "spotify": "https://open.spotify.com/user/", - "telegram": "https://t.me/", - "threads":"https://www.threads.net/@", - "tinder": "https://tinder.com/@ ", - "tiktok": "https://www.tiktok.com/@", - "twitter": "https://twitter.com/", - "upwork": "https://www.upwork.com/o/profiles/users/~", - "youtube": "https://www.youtube.com/@", - "douyin": "https://www.douyin.com/", - "kuaishou":"https://www.kuaishou.com/", - "sina Weibo":"https://weibo.com/", - "qzone":"https://qzone.qq.com/", - "baidu Tieba":"https://tieba.baidu.com/home/main?un=", - "mixi":"https://mixi.jp/show_profile.pl?id=", - "naver Band":"https://band.us/band/", - "kakao story":"https://story.kakao.com/", - "vk":"https://vk.com/", - "odnoklassniki":"https://ok.ru/", - "hornet": "https://hornet.com/profile/", - "scruff": "https://www.scruffapp.com/profile/", - "grindr": "https://grindr.com/profile/", - "meetme": "https://www.meetme.com/profile/", - "skout": "https://www.skout.com/profile/", - "x": "https://x.com/" + "social_media_name": "link", + "airchat": "https://www.air.chat/user/", + "bio.link": "https://bio.link/", + "codeberg": "https://codeberg.org/", + "codechef": "https://www.codechef.com/users/", + "codeforces": "https://codeforces.com/profile/", + "codewars": "https://www.codewars.com/users/", + "commudle": "https://www.commudle.com/users/", + "dev.to": "https://dev.to/", + "devfolio": "https://devfolio.co/@", + "devpost": "https://devpost.com/", + "discord": "https://discord.com/users/", + "exercism": "https://exercism.io/profiles/", + "facebook": "https://www.facebook.com/", + "fiverr": "https://www.fiverr.com/", + "github": "https://www.github.com/", + "gitlab": "https://www.gitlab.com/", + "hashnode": "https://hashnode.com/@", + "hackerrank": "https://www.hackerrank.com/profile/", + "instagram": "https://www.instagram.com/", + "kaggle": "https://www.kaggle.com/", + "leetcode": "https://leetcode.com/", + "linkedin": "https://www.linkedin.com/in/", + "linktree": "https://linktr.ee/", + "mastodon": "https://mastodon.social/@", + "medium": "https://.medium.com", + "odysee": "https://odysee.com/@", + "pinterest": "https://in.pinterest.com/", + "peerlist": "https://peerlist.io/", + "quora": "https://www.quora.com/profile/", + "reddit": "https://www.reddit.com/user/", + "snapchat": "https://www.snapchat.com/add/", + "spotify": "https://open.spotify.com/user/", + "telegram": "https://t.me/", + "threads": "https://www.threads.net/@", + "tinder": "https://tinder.com/@ ", + "tiktok": "https://www.tiktok.com/@", + "twitter": "https://twitter.com/", + "upwork": "https://www.upwork.com/o/profiles/users/~", + "youtube": "https://www.youtube.com/@", + "douyin": "https://www.douyin.com/", + "kuaishou": "https://www.kuaishou.com/", + "sina Weibo": "https://weibo.com/", + "qzone": "https://qzone.qq.com/", + "baidu Tieba": "https://tieba.baidu.com/home/main?un=", + "mixi": "https://mixi.jp/show_profile.pl?id=", + "naver Band": "https://band.us/band/", + "kakao story": "https://story.kakao.com/", + "vk": "https://vk.com/", + "odnoklassniki": "https://ok.ru/", + "hornet": "https://hornet.com/profile/", + "scruff": "https://www.scruffapp.com/profile/", + "grindr": "https://grindr.com/profile/", + "meetme": "https://www.meetme.com/profile/", + "skout": "https://www.skout.com/profile/", + "x": "https://x.com/" }