feat: implements url hash filter

jraleman · May 11, 2024 · dbc631f · dbc631f
1 parent e7a4b26
commit dbc631f
Show file tree

Hide file tree

Showing 7 changed files with 154 additions and 95 deletions.
diff --git a/README.md b/README.md
@@ -22,6 +22,13 @@ To change the default style, simply change the variable in the
 
 A live preview can be [accessed here](https://jraleman.com/cv).
 
+### Bonus
+
+- Enter the Konami Code, this will show the raw markdown content without styling
+- Use the following href tags to change the content of the CV
+  - `#all`: Shows everything (default)
+  - `#fe`: Tailored for front-end work experience
+
 ### License
 
 [MIT License](https://github.com/jraleman/cv-fe-cloud/blob/master/LICENSE)
diff --git a/_layouts/cv.html b/_layouts/cv.html
@@ -1,20 +1,34 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
-<head>
-  <meta charset=utf-8 />
-  <title> {% if page.title %} {{ page.title }} | {% endif %} CV</title>
-  <link href="media/styles/reset.css" type="text/css" rel="stylesheet" media="all" />
-  <link href="media/styles/{{ site.style }}-screen.css" type="text/css" rel="stylesheet" media="screen">
-  <link href="media/styles/{{ site.style }}-print.css" type="text/css" rel="stylesheet" media="print">
-</head>
-<body>
-  <div id="main">
-    <div id="content">
-    {{ content }}
+  <head>
+    <meta charset="utf-8" />
+    <title>{% if page.title %} {{ page.title }} | {% endif %} CV</title>
+    <link
+      href="media/styles/reset.css"
+      type="text/css"
+      rel="stylesheet"
+      media="all"
+    />
+    <link
+      href="media/styles/{{ site.style }}-screen.css"
+      type="text/css"
+      rel="stylesheet"
+      media="screen"
+    />
+    <link
+      href="media/styles/{{ site.style }}-print.css"
+      type="text/css"
+      rel="stylesheet"
+      media="print"
+    />
+  </head>
+  <body>
+    <div id="main">
+      <div id="content">{{ content }}</div>
+      <pre id="raw"></pre>
     </div>
-    <pre id="raw"></pre>
-  </div>
-</body>
-<script type="module" src="media/js/handle-keys.js"></script>
-<script type="module" src="media/js/handle-print.js"></script>
-</html>
+  </body>
+  <script type="module" src="media/js/handle-keys.js"></script>
+  <script type="module" src="media/js/handle-print.js"></script>
+  <script type="module" src="media/js/handle-hash.js"></script>
+</html>
diff --git a/index.md b/index.md
@@ -285,42 +285,42 @@ _______________________________________________________________________________
 
 `2021 – 2022`
 ![upc](media/images/upc.png)
-[__UPC School (Universitat Politècnica de Catalunya) 🇪🇸__](https://www.upc.edu/en){:target="_blank"}
+[__UPC School (Universitat Politècnica de Catalunya) 🇪🇸__](https://www.upc.edu/en){:target="_blank", #upc_2022}
 - Postgraduate Degree, Quantum Engineering
 
 <br />
 
 `2016 – 2019`
 ![42 coding school](media/images/42.png)
-[__42 Silicon Valley 🇺🇸 🇫🇷__](https://www.42.fr/en/){:target="_blank"}
+[__42 Silicon Valley 🇺🇸 🇫🇷__](https://www.42.fr/en/){:target="_blank", #42_2019}
 - Certificate in Software Engineering
 
 <br />
 
 `2015 – 2018`
 ![universidad latina](media/images/ulat.jpeg)
-[__Latin University of Panama 🇵🇦__](https://ulatina.edu.pa/){:target="_blank"}
+[__Latin University of Panama 🇵🇦__](https://ulatina.edu.pa/){:target="_blank", #ulat_2018}
 - Master of Business Administration (M.B.A.)
 
 <br />
 
 `2011 – 2015`
 ![universidad latina](media/images/ulat.jpeg)
-[__Latin University of Panama 🇵🇦__](https://ulatina.edu.pa/){:target="_blank"}
+[__Latin University of Panama 🇵🇦__](https://ulatina.edu.pa/){:target="_blank", #ulat_2015}
 - Mechatronics Engineering (B.Sc)
 
 <br />
 
 `2012 – 2014`
 ![academia de musica de panama](media/images/amp.png)
-[__Music Academy of Panama 🇵🇦__](https://www.ampenlinea.com/){:target="_blank"}
+[__Music Academy of Panama 🇵🇦__](https://www.ampenlinea.com/){:target="_blank", #amp_2014}
 - Music Theory and Composition
 
 <br />
 
 `1997 – 2010`
 ![panamerican schnool](media/images/pas.jpg)
-[__Panamerican School 🇵🇦__](http://panamericanschool-pa.net/index.php){:target="_blank"}
+[__Panamerican School 🇵🇦__](http://panamericanschool-pa.net/index.php){:target="_blank", #pas_2010}
 - High School Degree, Specialty in Science and Informatics
 
 _______________________________________________________________________________

diff --git a/media/js/constants.js b/media/js/constants.js
@@ -1,61 +1,60 @@
 export const CHEAT_CODE = [
-    // konami code
-    'ArrowUp', 
-    'ArrowUp', 
-    'ArrowDown', 
-    'ArrowDown', 
-    'ArrowLeft', 
-    'ArrowRight', 
-    'ArrowLeft', 
-    'ArrowRight', 
-    'b', 
-    'a'
+  // konami code
+  "ArrowUp",
+  "ArrowUp",
+  "ArrowDown",
+  "ArrowDown",
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowLeft",
+  "ArrowRight",
+  "b",
+  "a",
 ];
 
-export const URL = 'https://raw.githubusercontent.com/jraleman/cv/master/index.md';
-export const HOME_URL = 'https://jraleman.com';
+export const URL =
+  "https://raw.githubusercontent.com/jraleman/cv/master/index.md";
+
+export const HOME_URL = "https://jraleman.com";
 
 export const CV_COMPLETE = {
-    titleSectionsIds: [
-        'experience',
-        'education',
-        'skills',
-        'awards',
-        'languages'
-    ],
-    workExperienceIds: [
-        'opus1io_2024',
-        'raisga_2023',
-        'allurion_2021',
-        'axiad_2020',
-        'easyworking_2019',
-        'opus1io_2019',
-        'vemidoc_2018',
-        'scarletbytes_2016',
-        'courious_2017',
-        'ulat_2015',
-        'electricidadtotal_2011',
-    ],
-    skillsIds: [
-        'skills_tech',
-        'skills_soft',
-        'skills_misc'
-    ]
+  titleSectionsIds: [
+    "experience",
+    "education",
+    "skills",
+    "awards",
+    "languages",
+  ],
+  workExperienceIds: [
+    "opus1io_2024",
+    "raisga_2023",
+    "allurion_2021",
+    "axiad_2020",
+    "easyworking_2019",
+    "opus1io_2019",
+    "vemidoc_2018",
+    "scarletbytes_2016",
+    "courious_2017",
+    "ulat_2015",
+    "electricidadtotal_2011",
+  ],
+  skillsIds: ["skills_tech", "skills_soft", "skills_misc"],
+  schoolIds: ["upc_2022", "42_2019", "ulat_2018", "ulat_2015", "amp_2014", "pas_2010"]
 };
 
 export const FRONTEND_CV = {
-    titleSectionsIds: [
-        'experience',
-        'education',
-        'skills',
-    ],
-    workExperienceIds: [
-        'opus1io_2024',
-        'raisga_2023',
-        'allurion_2021',
-        'axiad_2020',
-    ],
-    skillsIds: [
-        'skills_tech',
-    ]
-}
+  titleSectionsIds: ["experience", "education", "skills"],
+  workExperienceIds: [
+    "opus1io_2024",
+    "raisga_2023",
+    "allurion_2021",
+    "axiad_2020",
+  ],
+  skillsIds: ["skills_tech"],
+  schoolIds: ["upc_2022", "42_2019", "ulat_2018", "ulat_2015"]
+};
+
+export const HREF_HASH = {
+  "#all": CV_COMPLETE,
+  "#fe": FRONTEND_CV,
+};
diff --git a/media/js/handle-hash.js b/media/js/handle-hash.js
@@ -0,0 +1,27 @@
+import { HREF_HASH } from "./constants.js";
+import { hideSectionByTagName, findUniqueElements } from "./utils.js";
+
+document.addEventListener("DOMContentLoaded", function () {
+  const hash = window.location.hash;
+  const content = HREF_HASH[hash];
+  if (content && content !== "#all") {
+    findUniqueElements(
+      HREF_HASH["#all"].workExperienceIds,
+      content.workExperienceIds
+    ).map((id) => {
+      hideSectionByTagName("h3", "h3", id);
+    });
+    findUniqueElements(
+      HREF_HASH["#all"].skillsIds,
+      content.skillsIds
+    ).map((id) => {
+      hideSectionByTagName("h3", "h3", id);
+    });
+   findUniqueElements(
+      HREF_HASH["#all"].schoolIds,
+      content.schoolIds
+    ).map((id) => {
+      hideSectionByTagName("div", "p", id);
+    });
+  }
+});
diff --git a/media/js/handle-print.js b/media/js/handle-print.js
@@ -1,15 +1,15 @@
-import { hideSection } from './utils.js';
+import { hideSectionById } from './utils.js';
 
-var handlePrint = function (e) {
+const handlePrint = function (e) {
   window.alert('Remember to change email and phone values! :)')
-  var delim = 'HR';
-  hideSection("about", delim);
-  hideSection("awards", delim);
-  hideSection("skills_misc", delim);
-  hideSection("languages", delim);
+  const delim = 'HR';
+  hideSectionById("about", delim);
+  hideSectionById("awards", delim);
+  hideSectionById("skills_misc", delim);
+  hideSectionById("languages", delim);
 }
 
-var reloadPage = function (e) {
+const reloadPage = function (e) {
   if (e && e.returnValue) {
     window.location.reload();
   }

diff --git a/media/js/utils.js b/media/js/utils.js
@@ -5,12 +5,24 @@ export function nextElement(e) {
   return e;
 }
 
-export function hideSection(id, delim) {
+export function findUniqueElements(arr1, arr2) {
+  return arr1.filter((element) => !arr2.includes(element));
+}
+
+export function hideSectionByTagName(tagName, delim, id) {
+  const htmlCollection = document.getElementsByTagName(tagName);
+  const elements = Array.from(htmlCollection);
+  let filteredElement = elements.map((el) => el.id).filter((el) => el === id)[0];
+  hideSectionById(filteredElement, delim)
+}
+
+export function hideSectionById(id, delim) {
   let element = document.getElementById(id);
   element.style.display = "none";
   while (true) {
     const e = nextElement(element);
-    if (!e || !e.nodeName || e.nodeName === delim) {
+    console.log(e.nodeName);
+    if (!e || !e.nodeName || e.nodeName === delim || e.nodeName === 'HR') {
       if (e && e.nodeName === delim) {
         e.style.display = "none";
       }
@@ -22,19 +34,19 @@ export function hideSection(id, delim) {
 }
 
 export function renderRaw(raw, homeUrl) {
-  const homePage = document.createElement('a');
-  homePage.setAttribute('href', homeUrl);
-  homePage.innerText = '<< Return to home page\n\n';
-  const content = document.getElementById('content');
-  content.style.display = 'none';
+  const homePage = document.createElement("a");
+  homePage.setAttribute("href", homeUrl);
+  homePage.innerText = "<< Return to home page\n\n";
+  const content = document.getElementById("content");
+  content.style.display = "none";
   const rawContent = document.getElementById("raw");
   rawContent.innerHTML += raw;
-  rawContent.insertBefore(homePage, rawContent.childNodes[0])
+  rawContent.insertBefore(homePage, rawContent.childNodes[0]);
 }
 
 export function triggerAction(url, homeUrl) {
-  fetch(url).then(function(res) {
-    res.text().then(function(raw) {
+  fetch(url).then(function (res) {
+    res.text().then(function (raw) {
       renderRaw(raw, homeUrl);
       window.scrollTo(0, 0);
     });