Switch from create-react-app to vite

2026-03-18 21:40:29 +01:00 · 2024-07-02 16:17:49 +02:00
parent 20c622b3f6
commit 89fa5a57b6
23 changed files with 2627 additions and 12832 deletions
--- a/MARQUET.pdf
+++ b/MARQUET.pdf
--- a/dist/assets/buttons.esm-Bog6bH3O.js
+++ b/dist/assets/buttons.esm-Bog6bH3O.js
--- a/dist/assets/index-BbuFt1Ms.css
+++ b/dist/assets/index-BbuFt1Ms.css
--- a/dist/assets/index-Cl6KeT6w.js
+++ b/dist/assets/index-Cl6KeT6w.js
--- a/dist/favicon.ico
+++ b/dist/favicon.ico
--- a/dist/index.html
+++ b/dist/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="generator" content="React" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="darkreader" content="dark" />
+    <meta
+      name="description"
+      content="Portfolio de Félix MARQUET"
+    />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="manifest" href="/manifest.json" />
+    <title>Portfolio Félix MARQUET</title>
+    <script type="module" crossorigin src="/assets/index-Cl6KeT6w.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BbuFt1Ms.css">
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
--- a/dist/logo192.png
+++ b/dist/logo192.png
--- a/dist/logo512.png
+++ b/dist/logo512.png
--- a/dist/manifest.json
+++ b/dist/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "Portfolio",
+  "name": "Portfolio de Félix MARQUET",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
--- a/dist/robots.txt
+++ b/dist/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
--- a/public/index.html
+++ b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="fr">
  <head>
    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="generator" content="React" />
    <meta name="theme-color" content="#000000" />
@@ -11,12 +11,13 @@
      name="description"
      content="Portfolio de Félix MARQUET"
    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="manifest" href="/manifest.json" />
    <title>Portfolio Félix MARQUET</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
+    <script type="module" src="/src/App.jsx"></script>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -13,17 +13,16 @@
    "react-github-btn": "^1.4.0",
    "react-i18next": "^14.1.2",
    "react-icons": "^5.2.1",
-    "react-scripts": "^5.0.1",
    "sass": "^1.69.4",
    "web-vitals": "^4.2.1",
    "typescript": "^5.5.3",
    "yarn": "^1.22.22"
  },
  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "vite",
+    "build": "tsc && vite build",
+    "serve": "vite preview",
+    "build:css": "tailwindcss build src/index.css -o src/output.css"
  },
  "eslintConfig": {
    "extends": [
@@ -45,6 +44,10 @@
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "tailwindcss": "^3.3.3"
+    "@vitejs/plugin-react": "^4.3.1",
+    "tailwindcss": "^3.3.3",
+    "vite": "^5.3.2",
+    "vite-plugin-svgr": "^4.2.0",
+    "vite-tsconfig-paths": "^4.3.2"
  }
 }
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { FaSun, FaMoon} from "react-icons/fa";
-import "./index.css";
+import ReactDOM from "react-dom";
+import './output.css';
 import Card from "./components/Card.tsx";
 import About from "./components/About.tsx";
 import Skills from "./components/Skills.tsx";
@@ -62,4 +63,6 @@ function App() {
    );
 }

+ReactDOM.render(<App />, document.getElementById('root'));
+
 export default App;
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -3,7 +3,19 @@ import React from 'react';
 import { FaGithub, FaTwitter, FaLinkedin, FaRegEnvelope } from 'react-icons/fa';
 import {useTranslation} from "react-i18next";

-function Card({name, social: {github, twitter, linkedin, mail}}){
+interface Social {
+    github: string;
+    twitter: string;
+    linkedin: string;
+    mail: string;
+}
+
+interface CardProps {
+    name: string;
+    social: Social;
+}
+
+function Card({name, social: {github, twitter, linkedin, mail}}: CardProps){
    //Get avatar from gravatar using email
    const profile = `https://1.gravatar.com/avatar/4d43af207280d1d23e2a2905577c7b6167723fec2d33f946cc86f114c1a85b8d?size=256`;
    const { t } = useTranslation();
--- a/src/components/ProgresBar.tsx
+++ b/src/components/ProgresBar.tsx
@@ -1,8 +1,15 @@
 import React from "react";

-const ProgressBar = (props) => {
+interface ProgressBarProps {
+    bgcolor: string;
+    completed: number;
+}
+
+const ProgressBar = (props: ProgressBarProps) => {
    const { bgcolor, completed } = props;

+    const completedPercentage = completed + "%";
+
    const containerStyles = {
        height: 30,
        width: '100%',
@@ -14,10 +21,10 @@ const ProgressBar = (props) => {

    const fillerStyles = {
        height: '100%',
-        width: `${completed}%`,
+        width: completedPercentage,
        backgroundColor: bgcolor,
        borderRadius: 'inherit',
-        textAlign: 'right',
+        textAlign: 'right' as 'right',
        transition: 'width 1s ease-in-out',
    }

--- a/src/components/Project.tsx
+++ b/src/components/Project.tsx
@@ -4,13 +4,14 @@ import React from 'react';
 import ProjectCard from "./ProjectCard.tsx";
 import {useTranslation} from "react-i18next";

+// @ts-ignore
 function Projects({projects}) {
    const { t } = useTranslation();
    return(
        <div>
            <h1 className="mt-8 text-2xl md:text-4xl text-center font-extrabold dark:text-gray-200">{t('projects.title')}</h1>
                <div className="flex-row flex-wrap flex justify-center gap-4">
-                    {projects.map((project) => (
+                    {projects.map((project: any) => (
                        <ProjectCard project={project} />
                    ))}
                </div>
--- a/src/components/ProjectCard.tsx
+++ b/src/components/ProjectCard.tsx
@@ -4,7 +4,18 @@ import { FaExternalLinkAlt} from "react-icons/fa";
 import GitHubButton from 'react-github-btn';
 import {useTranslation} from "react-i18next";

-const ProjectCard = ({ project }) => {
+interface Project {
+    title: string;
+    link: string;
+    tags: string[];
+}
+
+interface ProjectCardProps {
+    project: Project;
+}
+
+
+const ProjectCard = ({ project }: ProjectCardProps) => {
    const { t } = useTranslation();
    const { title, link, tags } = project;
    return (
@@ -18,7 +29,7 @@ const ProjectCard = ({ project }) => {
            <hr className="my-4" />
            <p className="dark:text-gray-300">{t(`projects.${project.title}.description`)}</p>
            <div className="mt-4 mb-8 flex flex-wrap justify-center items-center gap-2">
-                {tags.map((tag) => (
+                {project.tags.map((tag) => (
                    <div className="px-4 py-1 border-2 rounded-full dark:text-gray-300">{tag}</div>
                ))}
            </div>
--- a/src/components/SkillCard.tsx
+++ b/src/components/SkillCard.tsx
@@ -6,7 +6,7 @@ import ProgresBar from "./ProgresBar.tsx";

 const iconClassName = "mx-auto text-4xl text-gray-800 dark:text-gray-200";

-const iconMapping = {
+const iconMapping: IconMapping = {
    "C": <FaCuttlefish className={iconClassName} />,
    "C++": <FaCuttlefish className={iconClassName} />,
    "Admin Système": <FaServer className={iconClassName} />,
@@ -19,6 +19,11 @@ const iconMapping = {

 interface SkillCardProps {
    skillName: string;
+    skillLevel: number;
+}
+
+type IconMapping = {
+    [key: string]: JSX.Element;
 }

 const SkillCard: React.FC<SkillCardProps> = ({skillName, skillLevel}) => {
--- a/src/components/Skills.tsx
+++ b/src/components/Skills.tsx
@@ -3,10 +3,19 @@ import React from 'react';
 // @ts-ignore
 import SkillCard from './SkillCard.tsx';

-function Skills({skills}) {
+interface Skill {
+    skillName: string;
+    skillLevel: number;
+}
+
+interface SkillsProps {
+    skills: Skill[];
+}
+
+function Skills({skills}: SkillsProps) {
    return(
        <div className="flex flex-col sm:flex-row align-center justify-center max-w-8xl mx-auto mt-8 gap-5 flex-wrap">
-            {skills.map((skill) => {
+            {skills.map((skill: Skill) => {
                return (
                    <SkillCard skillName={skill.skillName} skillLevel={skill.skillLevel}/>
                );
--- a/src/output.css
+++ b/src/output.css
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react"
+  },
+  "include": ["src"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import viteTsconfigPaths from 'vite-tsconfig-paths';
+import svgr from 'vite-plugin-svgr';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [
+        react(),
+        viteTsconfigPaths(),
+        svgr({
+            include: '**/*.svg?react',
+        }),
+    ],
+});