fix: website lint script now lints its 'lib' directory after it was p…

…reviously eslintignored (#1770)

* monorepo lint and lint:fix scripts run in workspaces too

* website package has lint:fix, lint doesnt fix

* lint website lib dir

* website lint script doesnt provide eslint allowlist (just use eslintignore)

* website workflow runs lint script, not just lint:ts

.github/workflows/website.yml

@@ -22,7 +22,7 @@ jobs:
         with:
           node-version: 16
       - uses: bahmutov/npm-install@v1
-      - run: npm run lint:ts -w packages/website
+      - run: npm run lint -w packages/website
 
   test-e2e:
     name: "Test e2e - ${{ matrix.browser }}"

package.json

@@ -18,8 +18,12 @@
     "web": "npm start -w packages/website",
     "test": "npm run lint && npm run test --workspaces",
     "test:e2e": "npm run test:e2e --if-present --workspaces",
-    "lint": "standard --verbose | snazzy",
-    "lint:fix": "standard --fix "
+    "lint": "npm-run-all -p lint:workspaces lint:standard",
+    "lint:workspaces": "npm -ws run --if-present lint",
+    "lint:fix": "npm-run-all lint:standard:fix lint:fix:workspaces",
+    "lint:fix:workspaces": "npm -ws run --if-present lint:fix",
+    "lint:standard": "standard --verbose | snazzy",
+    "lint:standard:fix": "standard --fix"
   },
   "devDependencies": {
     "npm-run-all": "^4.1.5",

packages/website/.eslintignore

@@ -1,6 +1,5 @@
 # Specific to .eslintignore
 # Don't lint files we do not commit: Below are same as .gitignore
-lib
 
 # dependencies
 /node_modules

packages/website/components/card/card.js

@@ -47,14 +47,6 @@ export default function Card({ card, cardsGroup = [], index = 0, targetClass, on
     countly.trackCustomLinkClick(countly.events.LINK_CLICK_EXPLORE_DOCS, e.currentTarget);
   }, []);
 
-  const handleKeySelect = useCallback(
-    (e, url) => {
-      onLinkClick(e);
-      router.push(url);
-    },
-    [router, onLinkClick]
-  );
-
   const handleButtonClick = useCallback(
     cta => {
       if (cta.url) {

packages/website/lib/api.js

@@ -178,7 +178,7 @@ export async function getUploads({ size, before, sortBy, sortOrder }) {
       'Content-Type': 'application/json',
       Authorization: 'Bearer ' + (await getToken()),
     },
-  })
+  });
 
   if (!res.ok) {
     throw new Error(`failed to get uploads: ${await res.text()}`);
@@ -260,10 +260,10 @@ export async function listPins(status, token) {
       'Content-Type': 'application/json',
       Authorization: 'Bearer ' + token, // **** this needs to be a token generated from the tokens context
     },
-  })
+  });
   if (!res.ok) {
-    throw new Error(`failed to get pinned files: ${await res.text()}`)
+    throw new Error(`failed to get pinned files: ${await res.text()}`);
   }
 
-  return res.json()
+  return res.json();
 }

packages/website/lib/constants.js

@@ -1,16 +1,16 @@
-const API = /** @type {string} **/ (process.env.NEXT_PUBLIC_API)
-const MAGIC_TOKEN = /** @type {string} **/ (process.env.NEXT_PUBLIC_MAGIC)
+const API = /** @type {string} **/ (process.env.NEXT_PUBLIC_API);
+const MAGIC_TOKEN = /** @type {string} **/ (process.env.NEXT_PUBLIC_MAGIC);
 
 // In dev, set these vars in a .env file in the parent monorepo project root.
 if (!API) {
-  throw new Error('MISSING ENV. Please set NEXT_PUBLIC_API')
+  throw new Error('MISSING ENV. Please set NEXT_PUBLIC_API');
 }
 if (!MAGIC_TOKEN) {
-  throw new Error('MISSING ENV. Please set NEXT_PUBLIC_MAGIC')
+  throw new Error('MISSING ENV. Please set NEXT_PUBLIC_MAGIC');
 }
 
 export default {
   API: API,
   MAGIC_TOKEN: MAGIC_TOKEN,
-  MAGIC_TOKEN_LIFESPAN: 900_000 // 15 mins
-}
+  MAGIC_TOKEN_LIFESPAN: 900_000, // 15 mins
+};

packages/website/lib/countly.js

@@ -1,12 +1,12 @@
-import { useEffect } from 'react'
-import countly from 'countly-sdk-web'
-import Router from 'next/router'
-
+/* eslint-disable */
+import { useEffect } from 'react';
+import countly from 'countly-sdk-web';
+import Router from 'next/router';
 
 const config = {
   key: process.env.NEXT_PUBLIC_COUNTLY_KEY,
-  url: process.env.NEXT_PUBLIC_COUNTLY_URL
-}
+  url: process.env.NEXT_PUBLIC_COUNTLY_URL,
+};
 
 /** @constant */
 export const events = {
@@ -29,7 +29,7 @@ export const events = {
   FEEDBACK_HELPFUL: 'feedbackHelpful',
   FEEDBACK_IMPORTANT: 'feedbackImportant',
   FEEDBACK_GENERAL: 'feedbackGeneral',
-}
+};
 
 /** @constant */
 export const ui = {
@@ -44,110 +44,110 @@ export const ui = {
   TOKENS_EMPTY: 'tokens/empty',
   PROFILE_GETTING_STARTED: 'profile/getting-started',
   PROFILE_API_TOKENS: 'profile/api-tokens',
-}
+};
 
 /**
  * Initialize countly analytics object
  */
-export function init () {
+export function init() {
   if (typeof window === 'undefined') {
-      return
+    return;
   }
-  
+
   if (ready) {
-    return
+    return;
   }
-  
+
   if (!config.key || !config.url) {
-    console.warn('[lib/countly]', 'Countly config not found.')
+    console.warn('[lib/countly]', 'Countly config not found.');
 
-    return
+    return;
   }
-
-  countly.init({ app_key: config.key, url: config.url, debug: false })
-
-  countly.track_sessions()
-  countly.track_pageview()
-  countly.track_clicks()
-  countly.track_links()
-  countly.track_scrolls()
 
-  ready = true
+  countly.init({ app_key: config.key, url: config.url, debug: false });
+
+  countly.track_sessions();
+  countly.track_pageview();
+  countly.track_clicks();
+  countly.track_links();
+  countly.track_scrolls();
+
+  ready = true;
 
   // Track other not-so-easy to access links
   // NFT.Storage Banner link
-  document.querySelector('div > a[href*="https://nft.storage"]')?.addEventListener('click', (event) => {
-    const target = /** @type {HTMLLinkElement} **/ (event?.currentTarget)
-    
+  document.querySelector('div > a[href*="https://nft.storage"]')?.addEventListener('click', event => {
+    const target = /** @type {HTMLLinkElement} **/ (event?.currentTarget);
+
     trackEvent(events.LINK_CLICK_BANNER_NFTSTORAGE, {
       link: target?.href,
       text: target?.innerText,
-    })
-  })
+    });
+  });
 }
 
 /**
  * Track an event to countly with custom data
  *
- * @param {string} event Event name to be sent to countly. 
+ * @param {string} event Event name to be sent to countly.
  * @param {Object} [segmentation] Custom data object to be used as segmentation data in countly.
-*/
-export function trackEvent (event, segmentation = {}) {
+ */
+export function trackEvent(event, segmentation = {}) {
   if (!ready) {
-    init()
+    init();
   }
 
-  ready && countly.add_event({
-    key: event,
-    segmentation: {
-      path: location.pathname,
-      ...segmentation,
-    }
-  })
+  ready &&
+    countly.add_event({
+      key: event,
+      segmentation: {
+        path: location.pathname,
+        ...segmentation,
+      },
+    });
 }
 
 /**
  * Track page view to countly.
- * 
+ *
  * @param {string} [path] Page route to track. Defaults to window.location.pathname if not provided.
-*/
-export function trackPageView (path) {
+ */
+export function trackPageView(path) {
   if (!ready) {
-    init()
+    init();
   }
 
-  ready && countly.track_pageview(path)
+  ready && countly.track_pageview(path);
 }
 
 /**
  * Track custom link click.
- * 
- * @param {string} event Event name to be sent to countly. 
+ *
+ * @param {string} event Event name to be sent to countly.
  * @param {HTMLLinkElement} target DOM element target of the clicked link.
-*/
-export function trackCustomLinkClick (event, target) {
+ */
+export function trackCustomLinkClick(event, target) {
   if (!ready) {
-    init()
+    init();
   }
 
-  ready && trackEvent(event, {
-    link: target.href.includes(location.origin) ?
-      new URL(target.href).pathname :
-      target.href,
-    text: target.innerText
-  })
+  ready &&
+    trackEvent(event, {
+      link: target.href.includes(location.origin) ? new URL(target.href).pathname : target.href,
+      text: target.innerText,
+    });
 }
 
-export function useCountly () {
+export function useCountly() {
   useEffect(() => {
-    init()
-    Router.events.on('routeChangeComplete', (route) => {
-      trackPageView(route)
-    })
-  }, [])
+    init();
+    Router.events.on('routeChangeComplete', route => {
+      trackPageView(route);
+    });
+  }, []);
 }
 
-export let ready = false
+export let ready = false;
 
 export default {
   events,
@@ -156,5 +156,5 @@ export default {
   trackEvent,
   trackPageView,
   trackCustomLinkClick,
-  ready
-}
+  ready,
+};

packages/website/lib/floater-animations.js

@@ -1,50 +1,50 @@
-export const initFloaterAnimations = async (scenes) => {
-  if (typeof window !== undefined) {
+export const initFloaterAnimations = async scenes => {
+  if (typeof window !== 'undefined') {
     const ScrollMagic = (await import('scrollmagic')).default;
     const controller = new ScrollMagic.Controller();
     const scrollMagicScenes = [];
 
     for (let i = 0; i < scenes.length; i++) {
       let scene = scenes[i];
       scrollMagicScenes[i] = new ScrollMagic.Scene({
-        triggerElement: "#" + scene.trigger,
-        triggerHook: "onEnter",
+        triggerElement: '#' + scene.trigger,
+        triggerHook: 'onEnter',
         offset: scene.offset ? scene.offset : 0,
-        duration: scene.duration
-      })
+        duration: scene.duration,
+      });
     }
     controller.addScene(scrollMagicScenes);
 
-    const addSceneAnimation = (i) => {
+    const addSceneAnimation = i => {
       const len = scenes[i].floaters.length;
       for (let j = 0; j < len; j++) {
-        const xi = scenes[i].floaters[j].start.x
-        const xf = scenes[i].floaters[j].end.x
-        const yi = scenes[i].floaters[j].start.y
-        const yf = scenes[i].floaters[j].end.y
-        const si = scenes[i].floaters[j].start.scale
-        const sf = scenes[i].floaters[j].end.scale
-        const ri = scenes[i].floaters[j].start.rotate
-        const rf = scenes[i].floaters[j].end.rotate
-        const transform = scenes[i].floaters[j].default ? scenes[i].floaters[j].default : ''
-        const id = scenes[i].floaters[j].id
+        const xi = scenes[i].floaters[j].start.x;
+        const xf = scenes[i].floaters[j].end.x;
+        const yi = scenes[i].floaters[j].start.y;
+        const yf = scenes[i].floaters[j].end.y;
+        const si = scenes[i].floaters[j].start.scale;
+        const sf = scenes[i].floaters[j].end.scale;
+        const ri = scenes[i].floaters[j].start.rotate;
+        const rf = scenes[i].floaters[j].end.rotate;
+        const transform = scenes[i].floaters[j].default ? scenes[i].floaters[j].default : '';
+        const id = scenes[i].floaters[j].id;
 
-        scrollMagicScenes[i].on('progress', (e) => {
-            const element = document.getElementById(id);
+        scrollMagicScenes[i].on('progress', e => {
+          const element = document.getElementById(id);
 
-            if (element && !window.matchMedia(`(max-width: 40rem)`).matches) {
-              const t = e.progress;
-              const x = xi && xf ? (xf - xi) * t + xi : 0
-              const y = yi && yf ? (yf - yi) * t + yi : 0
-              const translate = x && y ? `translate(${x}px, ${y}px)` : ''
-              const scale = si && sf ? `scale(${(sf - si) * t + si})` : ''
-              const rotate = ri && rf ? `rotate(${(rf - ri) * t + ri}deg)` : ''
+          if (element && !window.matchMedia(`(max-width: 40rem)`).matches) {
+            const t = e.progress;
+            const x = xi && xf ? (xf - xi) * t + xi : 0;
+            const y = yi && yf ? (yf - yi) * t + yi : 0;
+            const translate = x && y ? `translate(${x}px, ${y}px)` : '';
+            const scale = si && sf ? `scale(${(sf - si) * t + si})` : '';
+            const rotate = ri && rf ? `rotate(${(rf - ri) * t + ri}deg)` : '';
 
-              element.style.transform = `${transform} ${translate} ${scale} ${rotate}`;
-            }
+            element.style.transform = `${transform} ${translate} ${scale} ${rotate}`;
+          }
         });
       }
-    }
+    };
 
     for (let i = 0; i < scenes.length; i++) {
       addSceneAnimation(i);

packages/website/lib/formatter.js

@@ -1,14 +1,14 @@
-import filesz from 'filesize'
+import filesz from 'filesize';
 
 /** @type {object} */
 const defaultOptions = {
   base: 2,
-  standard: "iec"
-}
+  standard: 'iec',
+};
 
 /**
  * local filesize formatter abstraction with default options
  *
  * @param {any} value
  */
-export const fileSize = (value) => filesz(value, defaultOptions)
+export const fileSize = value => filesz(value, defaultOptions);