From d72a415575e0b91985f8023c25f69da0c9791803 Mon Sep 17 00:00:00 2001 From: housamz Date: Thu, 8 Aug 2024 18:15:42 +0100 Subject: [PATCH] New interface, Better UX, Copy JSON feature --- src/css/basic.css | 101 ++++++++++++++++------------------ src/index.html | 136 +++++++++++++++++++++++++--------------------- src/js/main.ts | 21 ++++++- 3 files changed, 139 insertions(+), 119 deletions(-) diff --git a/src/css/basic.css b/src/css/basic.css index f24526a..668bea4 100644 --- a/src/css/basic.css +++ b/src/css/basic.css @@ -1,79 +1,72 @@ -main { - padding-bottom: 1rem; +.container-size { + width: 80%; } -.download { - margin: 1rem auto; -} - -#filedrag { - border: 5px dashed #C4CDF0; - border-radius: 7px; - cursor: default; - color: #333; - background-color: #F1F1F4; - font-size: 120%; - padding: 2em; - margin: 0 1em; +#fileselect, +#result { + display: none; } -#filedrag.hover { - color: #333; - background-color: #fff; +#select-file:hover { + background-color: rgba(0, 116, 217, 0.9); } -#fileselect { - display: none; +.instructions { + background-color: #f1f1f1; } -#result { - display: none; +.moving-border { + background: linear-gradient(90deg, white 50%, transparent 50%) repeat-x, + linear-gradient(90deg, white 50%, transparent 50%) repeat-x, + linear-gradient(0deg, white 50%, transparent 50%) repeat-y, + linear-gradient(0deg, white 50%, transparent 50%) repeat-y; + background-position: left top, right bottom, left bottom, right top; + background-size: 1rem 0.1rem, 1rem 0.1rem, 0.1rem 1rem, 0.1rem 1rem; + cursor: pointer; } -.media, .bd { - overflow: hidden; - _overflow: visible; - zoom: 1; +.moving-border:hover { + animation: move-border 1s infinite linear; } -.about > .media { - margin-top: 10px; -} +@keyframes move-border { + 0% { + background-position: left top, right bottom, left bottom, right top; + } -.media .img { - float: left; + 100% { + background-position: left 1rem top, right 1rem bottom, left bottom 1rem, + right top 1rem; + } } -.about .avatar-image { - border-radius: 100%; - height: 80px; - width: 80px; - margin-right: 10px; +#result { + position: relative; } -.about .name { - font-weight: bold; - font-size: 110%; - margin-top: 5px; - margin-bottom: 2px; +#result #buttons { + position: sticky; + top: 1rem; } -.twitter { - margin-bottom: 3px; +#result #buttons .button { + font-size: 0.8rem; + text-shadow: 0 1px 0 black; } -footer { - border-top: 1px solid rgba(0,0,0,0.15); - padding: 1em; +.avatar-image { + border-radius: 0.5rem; + height: 30px; + margin-right: 10px; + width: 30px; } -footer h3 { - color: rgba(0,0,0,0.3); - text-transform: uppercase; - font-size: 80%; - margin-bottom: 0.5em; -} +@media (max-width: 832px) { + .container-size { + width: 90%; + } -pre { - font-size: 0.8rem !important; + ol { + padding-left: 1rem; + } } \ No newline at end of file diff --git a/src/index.html b/src/index.html index 646352e..ab721fa 100644 --- a/src/index.html +++ b/src/index.html @@ -1,71 +1,83 @@ - - - - LinkedIn to JSON Resume - - - - - - - -
-

LinkedIn to Json Résumé

-

This is a small website that exports your LinkedIn profile to a JSON Résumé.

-

The source code is available on GitHub.

+ + + + LinkedIn to JSON Resume + + + + + + + +
+
+

LinkedIn to JSON Résumé

+

Convert your LinkedIn profile into a JSON Résumé.

-

Due to recent restrictions added to the LinkedIn API, this web app can't ask for access to user's full profile. Thus, the best way is to export your data from LinkedIn and import it in this tool.

- -

Instructions

-
    -
  1. Go to the Data Export Page on LinkedIn and click on "Request archive".
    2. -
  2. You will get an email from LinkedIn confirming your request. You will need to wait up to 72 hours to get a link to download your data.
    3. -
  3. After some hours you will receive a link to download your archive. Click on it and save the zip file.
    4. -
  4. Drag and drop or select the file (its name should be something like Basic_LinkedInDataExport_XX-XX-XXXX.zip or Complete_LinkedInDataExport_XX-XX-XXXX.zip) in the area below:
    5. - -
- -
-

- Drop a LinkedIn archive zip file or . -

- +
+
+
+

Drop a LinkedIn archive ZIP file here or

+ +
+ +
+
-

Result

-
- -
-
-

About me

-
-
- +
+
+
+

Don't have a LinedIn archive file?

-
-
José M. Pérez
- - jmperezperez.com +
+
    +
  1. Go to LinkedIn's Data Export Page and click "Request archive".
    2. +
  2. Within 72 hours, you'll receive an email with a download link. Save the zip file you receive.
    The file is named Basic_LinkedInDataExport_XX-XX-XXXX.zip or + Complete_LinkedInDataExport_XX-XX-XXXX.zip
    3. +
  3. Drag and drop or select the ZIP file above.
    4. +
-
- - - - + + Due to recent restrictions added + to + the LinkedIn API, this web app can't ask for access to user's full profile. Thus, the best way is to export your + data from LinkedIn and import it in this tool. + + +
+

Result

+
+ + +
+
+
+
+
+ + + + + + diff --git a/src/js/main.ts b/src/js/main.ts index 6c2d91c..a9b3fbf 100644 --- a/src/js/main.ts +++ b/src/js/main.ts @@ -20,7 +20,6 @@ interface Window { function fileDragHover(e) { e.stopPropagation(); e.preventDefault(); - e.target.className = e.type === "dragover" ? "hover" : ""; } let linkedinToJsonResume; @@ -37,7 +36,21 @@ downloadButton.addEventListener("click", () => { } }); }); -downloadButton.style.display = "none"; + +// adding action for the "Copy JSON" button +const copyButton = document.getElementById("copyButton"); +const output = document.getElementById("output"); +copyButton.addEventListener("click", () => { + if (output) { + const textArea = document.createElement("textarea"); + textArea.value = output.textContent; + document.body.appendChild(textArea); + textArea.select(); + document.execCommand("copy"); + document.body.removeChild(textArea); + alert("JSON copied to clipboard!"); + } +}); // file selection function fileSelectHandler(e) { @@ -306,7 +319,7 @@ function fileSelectHandler(e) { ); } filedrag.innerHTML = - "Dropped! See the resulting JSON Resume at the bottom."; + "Dropped! See the resulting JSON Resume at the bottom."; const output = document.getElementById("output"); output.innerHTML = JSON.stringify( linkedinToJsonResume.getOutput(), @@ -316,6 +329,8 @@ function fileSelectHandler(e) { window.Prism.highlightElement(output); downloadButton.style.display = "block"; document.getElementById("result").style.display = "block"; + document.getElementById("hideOnSuccess").style.display = "none"; + document.getElementById("select-file").classList.add("bg-olive"); }); }); });