Guigui14460 · snyk-bot · Feb 26, 2023 · Feb 26, 2023 · Feb 26, 2023 · Feb 26, 2023
diff --git a/.eslintcache b/.eslintcache
diff --git a/.gitignore b/.gitignore
@@ -22,3 +22,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# Next.js
+.next/
diff --git a/src/pages/projects/FilterBar.tsx → components/features/FilterBar.tsx b/src/pages/projects/FilterBar.tsx → components/features/FilterBar.tsx
@@ -1,9 +1,9 @@
-import './FilterBar.css';
+import styles from '@/styles/FilterBar.module.css';
 import Select, { MultiValue, Theme } from "react-select";
 import makeAnimated from 'react-select/animated';
 import { CSSProperties } from "styled-components";
-import { GroupedOption, KeywordOption, LanguageOption } from "../../model/Options";
-import { groupedOptions } from "../../data";
+import { GroupedOption, KeywordOption, LanguageOption } from "@/models/Options";
+import { groupedOptions } from "@/data/optionsData";
 
 // animation on select
 const animatedComponents = makeAnimated();
@@ -49,7 +49,7 @@ const ProjectsFilterBar = ({onChange}: { onChange: (value: MultiValue<LanguageOp
 
     return <Select<LanguageOption | KeywordOption, true, GroupedOption> 
         isDisabled={false} isLoading={false} isClearable isRtl={false} isSearchable
-        name="projects-search-bar" className="multi-select" classNamePrefix="select" isMulti
+        name="projects-search-bar" className={styles["multi-select"]} classNamePrefix="select" isMulti
         closeMenuOnSelect={false} closeMenuOnScroll={true} placeholder="Select options to filter projects"
         noOptionsMessage={() => "No more languages or keywords to select 😢"} components={animatedComponents}
         options={groupedOptions} formatGroupLabel={formatGroupLabel} onChange={onChange} theme={customTheme}

diff --git a/components/meta/PageMetaTags.tsx b/components/meta/PageMetaTags.tsx
@@ -0,0 +1,114 @@
+/**
+ * Defines a component to add basic
+ * meta tags for page.
+ * 
+ * @module components.meta.basic-tags
+ */
+
+import { pathToUrl } from "@/utils/routes"
+import Head from "next/head"
+import { FC } from "react"
+
+/**
+ * Structure to represent the basic meta tags component properties.
+ */
+export interface PageMetaTagsProps {
+  /**
+   * Title of the page.
+   */
+  title?: string
+
+  /**
+   * Description of the page
+   */
+  description?: string
+
+  /**
+   * Path to access the canonical page.
+   */
+  pagePath: string
+
+  /**
+   * Substructure to handle image for social networks.
+   */
+  image?: {
+    /**
+     * Path to the image.
+     */
+    path: string
+
+    /**
+     * Width of the image.
+     */
+    width: number
+
+    /**
+     * Height of the image.
+     */
+    height: number
+
+    /**
+     * Alternative text for the image.
+     */
+    alt: string
+  }
+}
+
+/**
+ * Represents a set of needed meta tags to upgrade SEO,
+ * display basic informations and for social networks sharing.
+ * 
+ * @param {PageMetaTagsProps} param0 component parameters
+ * @returns {JSX.Element} component instance
+ */
+const PageMetaTags: FC<PageMetaTagsProps> = (props) => {
+  const { title, description, pagePath, image } = {
+    ...props,
+    title: props.title ? props.title + " | GL's Portfolio" : "Guillaume Letellier Portfolio",
+    description: props.description || "Portfolio of Guillaume Letellier, a french student at University of Caen Normandy",
+    pagePath: pathToUrl(props.pagePath),
+    image: {
+      ...props.image,
+      path: props.image && pathToUrl(props.image.path),
+    }
+  }
+
+  return (
+    <Head key="page_meta_tags">
+      <title data-testid="site-title">{title}</title>
+      <meta data-testid="meta-title" name="title" content={title} />
+      <meta data-testid="meta-description" name="description" content={description} />
+      <link data-testid="link-canonical" rel="canonical" href={pagePath} />
+
+      {/* Open Graph / Facebook */}
+      {/* <meta data-testid="meta-og-sitename" property="og:site_name" content="Guillaume Letellier's Portfolio" />
+      <meta data-testid="meta-og-type" property="og:type" content="website" />
+      <meta data-testid="meta-og-url" property="og:url" content={pagePath} />
+      <meta data-testid="meta-og-title" property="og:title" content={title} />
+      <meta data-testid="meta-og-description" property="og:description" content={description} />
+      {
+        props.image && <>
+          <meta data-testid="meta-og-image" property="og:image" content={image.path} />
+          <meta data-testid="meta-og-image-width" property="og:image:width" content={`${image.width}`} />
+          <meta data-testid="meta-og-image-height" property="og:image:height" content={`${image.height}`} />
+          <meta data-testid="meta-og-image-alt" property="og:image:alt" content={image.alt} />
+        </>
+      } */}
+
+      {/* Twitter */}
+      {/* <meta name="twitter:site" content="@khollector" /> */}
+      {/* <meta data-testid="meta-twitter-card" name="twitter:card" content={`summary${props.image ? "_large_image" : ""}`} />
+      <meta data-testid="meta-twitter-url" name="twitter:url" content={pagePath} />
+      <meta data-testid="meta-twitter-title" name="twitter:title" content={title} />
+      <meta data-testid="meta-twitter-description" name="twitter:description" content={description} />
+      {
+        props.image && <>
+          <meta data-testid="meta-twitter-image" name="twitter:image" content={image.path} />
+        </>
+      } */}
+    </Head>
+  )
+}
+PageMetaTags.displayName = "PageMetaTags"
+
+export default PageMetaTags
diff --git a/src/components/Responsive.tsx → components/ui/Responsive.tsx b/src/components/Responsive.tsx → components/ui/Responsive.tsx
diff --git a/src/components/accordion/Chevron.tsx → components/ui/accordion/Chevron.tsx b/src/components/accordion/Chevron.tsx → components/ui/accordion/Chevron.tsx
@@ -1,10 +1,11 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import classNames from "classnames";
 import { FontAwesomeIcon } from "../icons";
 library.add(faChevronRight);
 
 const Chevron = (props: { className?: string; }) => {
-    return <FontAwesomeIcon className={props.className} type="solid" size="1x" iconName="chevron-right" />
+    return <FontAwesomeIcon iconName="chevron-right" type="solid" size="1x" className={classNames(props.className, "icon-size")} />
 };
 
 export default Chevron;
diff --git a/src/components/accordion/index.tsx → components/ui/accordion/index.tsx b/src/components/accordion/index.tsx → components/ui/accordion/index.tsx
@@ -1,4 +1,4 @@
-import "./accordion.css";
+import styles from "@/styles/Accordion.module.css";
 import { ReactNode, useEffect, useRef, useState } from "react";
 import Chevron from "./Chevron";
 
@@ -40,10 +40,10 @@ const Accordion = (props: { title: string; children: ReactNode; id?: string, isO
         }
     }, [props.isOpen])
 
-    return <div className="accordion" id={props.id}>
-        <button className={`accordion__title ${active && "active"}`} onClick={toggleAccordion}>{props.title}<Chevron className={`accordion__icon ${rotate}`} /></button>
-        <div className="accordion__content" ref={content} style={{ maxHeight: (active ? height : 0) }}>
-            <div className="accordion__text">{props.children}</div>
+    return <div className={styles["accordion"]} id={props.id}>
+        <button className={`${styles["accordion__title"]} ${active && styles["active"]}`} onClick={toggleAccordion}>{props.title}<Chevron className={`${styles["accordion__icon"]} ${styles[rotate]}`} /></button>
+        <div className={styles["accordion__content"]} ref={content} style={{ maxHeight: (active ? height : 0) }}>
+            <div className={styles["accordion__text"]}>{props.children}</div>
         </div>
     </div>
 };

diff --git a/src/components/button/index.tsx → components/ui/button/index.tsx b/src/components/button/index.tsx → components/ui/button/index.tsx
@@ -1,6 +1,7 @@
-import './buttons.css';
-import { Link } from 'react-router-dom';
+import styles from "@/styles/Button.module.css"
+import Link from 'next/link';
 import styled from 'styled-components';
+import classNames from 'classnames'
 
 const ButtonWrapper = styled.button<{ size?: number }>`
     border: none;
@@ -18,22 +19,37 @@ const ButtonWrapper = styled.button<{ size?: number }>`
 `;
 
 export const Button = (props: { className?: string; children: React.Component | string | number | boolean | JSX.Element; size?: number; style?: React.CSSProperties }) => {
-    return <ButtonWrapper size={props.size} className={"button " + props.className} style={props.style}>
+    const classnames = classNames(
+        styles["button"],
+        props.className && props.className,
+    )
+
+    return <ButtonWrapper size={props.size} className={classnames} style={props.style}>
         {props.children}
     </ButtonWrapper>
 };
 
 export const ButtonLink = (props: { targetLink: string; className?: string; children: React.Component | string | number | boolean | JSX.Element; size?: number; style?: React.CSSProperties, title?: string }) => {
-    return <Link to={props.targetLink} className="button-link" title={props.title}>
-        <ButtonWrapper size={props.size} className={"button " + props.className} style={props.style}>
+    const classnames = classNames(
+        styles["button"],
+        props.className && props.className,
+    )
+
+    return <Link href={props.targetLink} className="button-link" title={props.title}>
+        <ButtonWrapper size={props.size} className={classnames} style={props.style}>
             {props.children}
         </ButtonWrapper>
     </Link>;
 };
 
 export const ButtonExternalLink = (props: { download?: boolean, title: string; targetLink: string; className?: string; target?: string, children: React.Component | string | number | boolean | JSX.Element; size?: number; style?: React.CSSProperties }) => {
+    const classnames = classNames(
+        styles["button"],
+        props.className && props.className,
+    )
+
     return <a className="button-link" href={props.targetLink} title={props.title} download={props.download} target={props.target} rel="noreferrer">
-        <ButtonWrapper size={props.size} className={"button " + props.className} style={props.style}>
+        <ButtonWrapper size={props.size} className={classnames} style={props.style}>
             {props.children}
         </ButtonWrapper>
     </a>;