fix: more lint fixes

components/about/AboutView.tsx

@@ -7,7 +7,10 @@ import { allPositions } from "data/experience";
 import { allFacts } from "data/facts";
 import { allRecommendations } from "data/recommendations";
 import { allSkills } from "data/skills";
+import { env } from "env/client";
 import { useTheme } from "providers/ThemeProvider";
+import GithubGraphDark from "public/img/gh-graph-dark.png";
+import GithubGraphLight from "public/img/gh-graph-light.png";
 
 import styles from "./aboutView.module.scss";
 import { Experience } from "./components/experience/Experience";
@@ -34,28 +37,37 @@ export const AboutView = ({ views }: { views: number }) => {
             I'm always open to new suggestions. If you have an
             unconventional offer or want to see what else I have to offer,
             contact me at{" "}
-            <Link href="mailto:[email protected]">[email protected]</Link>
+            <Link href={`mailto:${env.NEXT_PUBLIC_EMAIL}`}>
+              {env.NEXT_PUBLIC_EMAIL}
+            </Link>
           </p>
         </div>
         <div className={styles.contact}>
           <h2 className={styles.title}>Contact</h2>
           <p className={styles.description}>
             You can contact me directly from my{" "}
             <Link href="/contact">website</Link>, via{" "}
-            <Link href="mailto:[email protected]">email</Link>,{" "}
-            <Link href="https://facebook.com/bzagrodzki">Facebook</Link>,{" "}
-            <Link href="https://twitter.com/bzagrodzki">Twitter</Link> or other
-            social media. I reply to all messages! Ask me anything, I&apos;m not
-            afraid of any topics.
+            <Link href={`mailto:${env.NEXT_PUBLIC_EMAIL}`}>email</Link>,{" "}
+            <Link
+              href={`https://facebook.com/${env.NEXT_PUBLIC_FACEBOOK_USERNAME}`}
+            >
+              Facebook
+            </Link>
+            ,{" "}
+            <Link
+              href={`https://twitter.com/${env.NEXT_PUBLIC_TWITTER_USERNAME}`}
+            >
+              Twitter
+            </Link>{" "}
+            or other social media. I reply to all messages! Ask me anything,
+            I&apos;m not afraid of any topics.
           </p>
         </div>
       </div>
       <Recommendations recommendations={allRecommendations} />
       <figure className={styles.githubGraph}>
         <Image
-          src={`/img/gh-graph-${theme}.png`}
-          width="1127"
-          height="297"
+          src={theme === "dark" ? GithubGraphDark : GithubGraphLight}
           alt="My Github contributions graph"
         />
         <figcaption className={styles.caption}>

components/about/types/index.ts

@@ -1,29 +1,29 @@
-export type Fact = {
+export interface Fact {
   readonly title: string;
   readonly icon: string;
   readonly description: string;
-};
+}
 
-export type Position = {
+export interface Position {
   readonly position: string;
   readonly company: string;
   readonly date: string;
   readonly id: number;
   readonly link: string;
-};
+}
 
-export type Skill = {
+export interface Skill {
   readonly name: string;
   readonly slug: string;
   readonly color: string;
   readonly link: string;
-};
+}
 
-export type Recommendation = {
+export interface Recommendation {
   readonly content: string;
   readonly author: {
     readonly name: string;
     readonly position: string;
     readonly image: string;
   };
-};
+}

components/layout/footer/Footer.tsx

@@ -4,6 +4,7 @@ import dynamic from "next/dynamic";
 import NextLink from "next/link";
 
 import { Link } from "components/mdx/link/Link";
+import { env } from "env/client";
 import { useWindowSize } from "hooks/useWindowSize";
 import { useTheme } from "providers/ThemeProvider";
 import Logo from "public/svg/logo.svg";
@@ -48,7 +49,9 @@ export const Footer = () => (
         Feel free to reach out if you're looking for a developer, have a
         question or just want to connect 📭
       </p>
-      <Link href="mailto:[email protected]">[email protected]</Link>
+      <Link href={`mailto:${env.NEXT_PUBLIC_EMAIL}`}>
+        {env.NEXT_PUBLIC_EMAIL}
+      </Link>
 
       <div className={styles.links}>
         <NextLink href="/" className={styles.home}>

components/tile/spotifyTile/api/spotify.ts

@@ -34,7 +34,7 @@ export const getAccessToken = async (refreshToken: string) => {
         "Content-Type": "application/x-www-form-urlencoded",
       },
       next: {
-        revalidate: false,
+        revalidate: 0,
       },
     },
   );

env/schema.ts

@@ -11,6 +11,8 @@ export const clientSchema = z.object({
   NEXT_PUBLIC_TWITTER_USERNAME: z.string(),
   NEXT_PUBLIC_LINKEDIN_USERNAME: z.string(),
   NEXT_PUBLIC_GITHUB_USERNAME: z.string(),
+  NEXT_PUBLIC_FACEBOOK_USERNAME: z.string(),
+  NEXT_PUBLIC_EMAIL: z.string().email(),
 });
 
 /**
@@ -23,4 +25,6 @@ export const clientEnv = {
   NEXT_PUBLIC_TWITTER_USERNAME: process.env.NEXT_PUBLIC_TWITTER_USERNAME,
   NEXT_PUBLIC_LINKEDIN_USERNAME: process.env.NEXT_PUBLIC_LINKEDIN_USERNAME,
   NEXT_PUBLIC_GITHUB_USERNAME: process.env.NEXT_PUBLIC_GITHUB_USERNAME,
+  NEXT_PUBLIC_FACEBOOK_USERNAME: process.env.NEXT_PUBLIC_FACEBOOK_USERNAME,
+  NEXT_PUBLIC_EMAIL: process.env.NEXT_PUBLIC_EMAIL,
 };

hooks/useIntersectionObserver.ts

@@ -1,14 +1,19 @@
 import { useEffect, useState, useRef } from "react";
 
-type IntersectionObserverOptions = Pick<IntersectionObserverInit, "rootMargin" | "threshold">;
+type IntersectionObserverOptions = Pick<
+  IntersectionObserverInit,
+  "rootMargin" | "threshold"
+>;
 type ObserverCallback = (entry: IntersectionObserverEntry) => void;
-type Observer = {
+interface Observer {
   readonly key: string;
   readonly intersectionObserver: IntersectionObserver;
   readonly elementToCallback: Map<Element, ObserverCallback>;
-};
+}
 
-export const useIntersectionObserver = <T extends Element = HTMLElement>(options: IntersectionObserverOptions) => {
+export const useIntersectionObserver = <T extends Element = HTMLElement>(
+  options: IntersectionObserverOptions,
+) => {
   const unobserve = useRef<Map<T, () => void>>(new Map());
 
   const [entry, setEntry] = useState<IntersectionObserverEntry | null>(null);
@@ -40,6 +45,7 @@ export const useIntersectionObserver = <T extends Element = HTMLElement>(options
   }, []);
 
   if (typeof window === "undefined") {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     return { entry: null, observeElement: () => {}, cleanup: () => {} };
   }
 
@@ -76,8 +82,13 @@ const observe = (() => {
     return observer;
   };
 
-  return <T extends Element>(el: T, callback: ObserverCallback, options: IntersectionObserverOptions) => {
-    const { key, intersectionObserver, elementToCallback } = createObserver(options);
+  return <T extends Element>(
+    el: T,
+    callback: ObserverCallback,
+    options: IntersectionObserverOptions,
+  ) => {
+    const { key, intersectionObserver, elementToCallback } =
+      createObserver(options);
     elementToCallback.set(el, callback);
     intersectionObserver.observe(el);
 

hooks/useRunningHeader.ts

@@ -9,7 +9,7 @@ const options = {
 export const useRunningHeader = () => {
   const [id, setId] = useState("");
 
-  const { observeElement, entry, cleanup } = useIntersectionObserver<HTMLElement>(options);
+  const { observeElement, entry, cleanup } = useIntersectionObserver(options);
 
   const currentlyVisibleHeaders = useRef<Set<HTMLElement>>(new Set());
 
@@ -20,7 +20,9 @@ export const useRunningHeader = () => {
 
       return;
     }
-    el.querySelectorAll<HTMLElement>("h2, h3, h4, h5, h6, #introduction").forEach(observeElement);
+    el.querySelectorAll<HTMLElement>(
+      "h2, h3, h4, h5, h6, #introduction",
+    ).forEach(observeElement);
   };
 
   useEffect(() => {
@@ -34,12 +36,16 @@ export const useRunningHeader = () => {
       currentlyVisibleHeaders.current.delete(entry.target as HTMLElement);
     }
 
-    const highestEl = [...currentlyVisibleHeaders.current].reduce<HTMLElement | null>((acc, node) => {
+    const highestEl = [
+      ...currentlyVisibleHeaders.current,
+    ].reduce<HTMLElement | null>((acc, node) => {
       if (!acc) {
         return node;
       }
 
-      if (acc.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_PRECEDING) {
+      if (
+        acc.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_PRECEDING
+      ) {
         return node;
       }
 

lib/posts.ts

@@ -3,7 +3,13 @@ import path from "path";
 import dayjs from "dayjs";
 import customParseFormat from "dayjs/plugin/customParseFormat";
 
-import { getAllResources, getResourcesPaths, getResourceBySlug, getResourceParsedContent } from "lib/resource";
+import {
+  getAllResources,
+  getResourcesPaths,
+  getResourceBySlug,
+  getResourceParsedContent,
+} from "lib/resource";
+
 import type { Post } from "types";
 
 dayjs.extend(customParseFormat);
@@ -38,27 +44,23 @@ export const sortPostsByNewest = (posts: Post[]) => {
   });
 };
 
-const filterUnpublishedPosts = (posts: Post[]) => posts.filter((post) => post.isPublished);
-
 export const getPublishedPosts = () => {
   const posts = getAllPosts();
 
-  return filterUnpublishedPosts(posts);
+  return posts.filter((post) => post.isPublished);
 };
 
 export const getNewestPosts = () => {
   const publishedPosts = getPublishedPosts();
-  const sortedPosts = sortPostsByNewest(publishedPosts);
 
-  return sortedPosts;
+  return sortPostsByNewest(publishedPosts);
 };
 
 export const getPostsCategories = () => {
   const posts = getPublishedPosts();
   const allCategories = posts.map((post) => post.category);
-  const uniqueCategories = [...new Set(allCategories)];
 
-  return uniqueCategories;
+  return [...new Set(allCategories)];
 };
 
 export const getPopularPosts = () => {

lib/projects.ts

@@ -3,7 +3,13 @@ import path from "path";
 import dayjs from "dayjs";
 import customParseFormat from "dayjs/plugin/customParseFormat";
 
-import { getAllResources, getResourcesPaths, getResourceBySlug, getResourceParsedContent } from "lib/resource";
+import {
+  getAllResources,
+  getResourcesPaths,
+  getResourceBySlug,
+  getResourceParsedContent,
+} from "lib/resource";
+
 import type { Project } from "types";
 
 dayjs.extend(customParseFormat);
@@ -49,7 +55,6 @@ export const sortProjectsByPriority = (projects: Project[]) => {
 
 export const getBestProjects = () => {
   const projects = getAllProjects();
-  const sortedProjects = sortProjectsByPriority(projects);
 
-  return sortedProjects;
+  return sortProjectsByPriority(projects);
 };

lib/resource.ts

@@ -9,9 +9,10 @@ import remarkParse from "remark-parse";
 import remarkRehype from "remark-rehype";
 import unified from "unified";
 
-import type { Project, Post } from "types";
 import { commonRehypePlugins } from "utils/markdown";
 
+import type { Project, Post } from "types";
+
 const MDX_REGEX = /\.mdx$/;
 
 type Resource = Project | Post;
@@ -31,9 +32,9 @@ const getResourceFrontmatter = <T extends Resource>(
 
 export const getAllResources = <T extends Resource>(resourcePath: string) => {
   const filenames = fs.readdirSync(resourcePath);
-  const allResources = filenames.map((filename) => {
-    return getResourceFrontmatter<T>(filename, resourcePath);
-  });
+  const allResources = filenames.map((filename) =>
+    getResourceFrontmatter<T>(filename, resourcePath),
+  );
 
   return allResources;
 };

package.json

@@ -68,6 +68,7 @@
     "@svgr/webpack": "^5.5.0",
     "@types/gtag.js": "^0.0.8",
     "@types/invariant": "^2.2.35",
+    "@types/mapbox__rehype-prism": "0.8.0",
     "@types/node": "16.11.10",
     "@types/react": "17.0.37",
     "@types/react-dom": "^17.0.11",