DO NOT REVIEW: GitHub Actions: Implement ESlint

.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "env": {
+    "browser": true,
+      "es2021": true,
+      "node": true
+    },
+    "extends": "eslint:recommended",
+    "parserOptions": {
+      "ecmaVersion": "latest",
+      "sourceType": "module"
+    },
+    "rules": {
+      "no-mixed-spaces-and-tabs": "off",
+      "no-unused-vars": "off",
+      "no-extra-semi": "off",
+      "no-prototype-builtins": "off"
+    }
+}

.github/workflows/lint-js.yml

@@ -0,0 +1,33 @@
+name: Lint JS
+
+
+on:
+  pull_request:
+    # branches: [gh-pages]
+  push:
+    # branches: [gh-pages]
+
+jobs:
+  build:
+    name: Lint JS
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v3
+        with:
+          # Full git history is needed to get a proper list of changed files within `super-linter`
+          fetch-depth: 0
+
+      # Run Linter against code base #
+      - name: Lint JS
+        uses: github/[email protected]
+        env:
+          VALIDATE_ALL_CODEBASE: false
+          DEFAULT_BRANCH: gh-pages
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+
+          LINTER_RULES_PATH: /
+          JAVASCRIPT_ES_CONFIG_FILE: .eslintrc.json
+          VALIDATE_JAVASCRIPT_ES: true

assets/js/hamburger-nav.js

@@ -1,10 +1,14 @@
----
-title: hamburger nav file
----
+// ---
+// title: hamburger nav file
+// ---
 
  //Retrieve svg string from _includes
- const burgerImage = `{% include svg/icon-hamburger-nav.svg %}` ;
- const burgerImageX = `{% include svg/icon-hamburger-nav-x.svg %}` ;
+//  const burgerImage = `{% include svg/icon-hamburger-nav.svg %}` ;
+//  const burgerImageX = `{% include svg/icon-hamburger-nav-x.svg %}` ;
+
+var parser = new DOMParser();
+var burgerImage = parser.parseFromString(window.burgerImage, "image/svg+xml").documentElement;
+var burgerImageX = parser.parseFromString(window.burgerImageX, "image/svg+xml").documentElement;
 
 
 document.querySelector('#burgerImage').addEventListener('click',toggleNavDisplay);
@@ -14,7 +18,7 @@ function toggleNavDisplay(){
  swapIcons(this.firstElementChild.id);
  document.querySelector('#headerNav').style.display == 'flex' ? document.querySelector('#headerNav').style.display = 'none': document.querySelector('#headerNav').style.display = 'flex';
 
- 
+
 }
 
 
@@ -30,7 +34,7 @@ function swapIcons(icon_id){
 
  //insert opposite icon
  document.querySelector(`#burgerImage`).insertAdjacentHTML('afterbegin',hamburger[icon_id].opposite);
- 
+
 
 }
 

assets/js/hamburger-nav.liquid

@@ -0,0 +1,14 @@
+---
+title: hamburger nav file
+---
+
+{% assign burgerImage = include svg/icon-hamburger-nav.svg %}
+{% assign burgerImageX = include svg/icon-hamburger-nav-x.svg %}
+
+<script>
+    // This is a global variable that your JavaScript file can access
+    window.burgerImage = "{{ burgerImage }}";
+    window.burgerImageX = "{{ burgerImageX }}";
+</script>
+
+<script src="hamburger-nav.js"></script>

assets/js/wins.js

@@ -1,6 +1,6 @@
----
+// ---
 
----
+// ---
   //assigning the google form questions to variables for readability
   //these variables correspond with a question on the google form
   //these variables can be used as a key to access the data
@@ -39,9 +39,10 @@
 	}
 
   function main() {
-    {% assign localData = site.data.external._wins-data %}
+    // {% assign localData = site.data.external._wins-data %}
     // Escapes JSON for injections. See: #2134. If this is no longer the case, perform necessary edits, and remove this comment
-    const cardData = JSON.parse(decodeURIComponent("{{ localData | jsonify | uri_escape }}"));
+    // const cardData = JSON.parse(decodeURIComponent("{{ localData | jsonify | uri_escape }}"));
+		const cardData = window.localData;
     window.localStorage.setItem('data', JSON.stringify(cardData));
     makeCards(cardData);
     ifPageEmpty();
@@ -280,10 +281,10 @@
 	}
 
   function makeCards(data) {
-	{% assign githubData = site.data.external.github-data %}
+	// {% assign githubData = site.data.external.github-data %}
 	// Escapes JSON for injections. See: #2134. If this is no longer the case, perform necessary edits, and remove this comment.
-  	let githubData = JSON.parse(decodeURIComponent("{{ githubData | jsonify | uri_escape }}"));
-
+  // let githubData = JSON.parse(decodeURIComponent("{{ githubData | jsonify | uri_escape }}"));
+	const githubData = window.githubData;
 	const cards = data.reverse();
 	const cardTemplate = document.getElementById("wins-card-template");
 	const QUOTE_ICON_PATH = '/assets/images/wins-page/quote-icon.svg'
@@ -311,7 +312,7 @@
 			AVATAR_DEFAULT_PATH;
 
 		cloneCardTemplate.querySelector('.wins-card-profile-img').src = profileImgSrc;
-		cloneCardTemplate.querySelector('.wins-card-profile-img').id = `ghImg-${index}`;		
+		cloneCardTemplate.querySelector('.wins-card-profile-img').id = `ghImg-${index}`;
 		cloneCardTemplate.querySelector('.wins-card-profile-img').alt = `photograph of ${card[name]}`;
 
 		cloneCardTemplate.querySelector('.wins-card-big-quote').src = QUOTE_ICON_PATH;
@@ -321,10 +322,10 @@
 		if (card[linkedin_url].length > 0) {
 			cloneCardTemplate.querySelector('.wins-card-linkedin-icon').href = card[linkedin_url];
 			cloneCardTemplate.querySelector('.linkedin-icon').src = LINKEDIN_ICON ;
-			cloneCardTemplate.querySelector('.linkedin-icon').alt = `LinkedIn profile for ${card[name]}`; 
+			cloneCardTemplate.querySelector('.linkedin-icon').alt = `LinkedIn profile for ${card[name]}`;
 		} else {
 			cloneCardTemplate.querySelector('.wins-card-linkedin-icon').setAttribute('hidden', 'true')
-		};
+		}
 
 		if (card[github_url].length > 0){
 			cloneCardTemplate.querySelector('.wins-card-github-icon').href = card[github_url];
@@ -528,4 +529,3 @@ function changeSeeMoreBtn(x) {
 
   main();
   changeSeeMoreBtn(x);
-

assets/js/wins.liquid

@@ -0,0 +1,11 @@
+---
+---
+
+<script>
+    // This is a global variable that your separate JavaScript file can access
+    window.localData = {{ site.data.external._wins-data | jsonify }};
+    window.githubData = {{ site.data.external.github-data | jsonify }};
+</script>
+
+<!-- Here you would include your separate JavaScript file -->
+<script src="/path/to/your/javascript/file.js"></script>