chore: easier development for jsonresume-theme-custom thanks to vite

2025-10-14 20:23:25 +02:00 · 2022-07-28 21:20:41 +02:00
parent 1ebdab18a5
commit 8bc1471cbb
21 changed files with 3197 additions and 8676 deletions
--- a/.markdownlint-cli2.jsonc
+++ b/.markdownlint-cli2.jsonc
@@ -0,0 +1,11 @@
+{
+  "config": {
+    "default": true,
+    "MD013": false,
+    "MD024": false,
+    "MD033": false,
+    "MD041": false
+  },
+  "globs": ["**/*.{md,mdx}"],
+  "ignores": ["**/node_modules"]
+}
--- a/.markdownlint.json
+++ b/.markdownlint.json
@@ -1,7 +0,0 @@
-{
-  "default": true,
-  "MD013": false,
-  "MD024": false,
-  "MD033": false,
-  "MD041": false
-}
--- a/components/Header/Language/index.tsx
+++ b/components/Header/Language/index.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState, useRef } from 'react'
 import useTranslation from 'next-translate/useTranslation'
 import setLanguage from 'next-translate/setLanguage'
-import classNames from 'classnames'
+import classNames from 'clsx'

 import i18n from 'i18n.json'

--- a/components/Profile/SocialMediaList/SocialMediaIcons/Icon.tsx
+++ b/components/Profile/SocialMediaList/SocialMediaIcons/Icon.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames'
+import classNames from 'clsx'

 export const Icon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
  const { children, className, ...rest } = props
--- a/components/design/ShadowContainer.tsx
+++ b/components/design/ShadowContainer.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames'
+import classNames from 'clsx'

 type ShadowContainerProps = React.ComponentPropsWithRef<'div'>

--- a/jsonresume-theme-custom/.gitignore
+++ b/jsonresume-theme-custom/.gitignore
@@ -1,4 +1,22 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 node_modules
-theme/index.html
 dist
-.parcel-cache
+dist-ssr
+*.local
+
+# Editor directories and files
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/jsonresume-theme-custom/theme/images/building-columns.svg
+++ b/jsonresume-theme-custom/theme/images/building-columns.svg
--- a/jsonresume-theme-custom/theme/images/graduation-cap.svg
+++ b/jsonresume-theme-custom/theme/images/graduation-cap.svg
--- a/jsonresume-theme-custom/theme/images/heart.svg
+++ b/jsonresume-theme-custom/theme/images/heart.svg
--- a/jsonresume-theme-custom/theme/images/toolbox.svg
+++ b/jsonresume-theme-custom/theme/images/toolbox.svg
--- a/jsonresume-theme-custom/theme/images/user.svg
+++ b/jsonresume-theme-custom/theme/images/user.svg
--- a/jsonresume-theme-custom/theme/index.ejs
+++ b/jsonresume-theme-custom/theme/index.ejs
@@ -5,10 +5,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%= locals.basics.name %></title>
    <link rel="icon" type="image/png" href="<%= locals.basics.image %>" />
-
-    <style>
-      @import './styles/global.css';
-    </style>
+    <link rel="stylesheet" href="./styles/global.css" />
  </head>
  <body>
    <div class="container-fluid">
@@ -59,7 +56,7 @@
            <div class="background-details">
              <div class="detail" id="about">
                <div class="icon">
-                  <img src="data-url:./images/user.svg" alt="user" />
+                  <img src="./images/user.svg" alt="user" />
                </div>
                <div class="info">
                  <h4 class="title text-uppercase">À propos</h4>
@@ -75,10 +72,7 @@

              <div class="detail" id="work-experience">
                <div class="icon">
-                  <img
-                    src="data-url:./images/building-columns.svg"
-                    alt="work"
-                  />
+                  <img src="./images/building-columns.svg" alt="work" />
                </div>
                <div class="info">
                  <h4 class="title text-uppercase">Expériences</h4>
@@ -117,7 +111,7 @@

              <div class="detail" id="skills">
                <div class="icon">
-                  <img src="data-url:./images/toolbox.svg" alt="toolbox" />
+                  <img src="./images/toolbox.svg" alt="toolbox" />
                </div>
                <div class="info">
                  <h4 class="title text-uppercase">Compétences</h4>
@@ -144,10 +138,7 @@

              <div class="detail" id="education">
                <div class="icon">
-                  <img
-                    src="data-url:./images/graduation-cap.svg"
-                    alt="graduation"
-                  />
+                  <img src="./images/graduation-cap.svg" alt="graduation" />
                </div>
                <div class="info">
                  <h4 class="title text-uppercase">Éducation</h4>
@@ -183,7 +174,7 @@

              <div class="detail" id="interests">
                <div class="icon">
-                  <img src="data-url:./images/heart.svg" alt="heart" />
+                  <img src="./images/heart.svg" alt="heart" />
                </div>
                <div class="info">
                  <h4 class="title text-uppercase">Intérets</h4>
--- a/jsonresume-theme-custom/package-lock.json
+++ b/jsonresume-theme-custom/package-lock.json
--- a/jsonresume-theme-custom/package.json
+++ b/jsonresume-theme-custom/package.json
@@ -3,16 +3,18 @@
  "private": true,
  "version": "1.0.0",
  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
  "dependencies": {
-    "date-and-time": "2.4.0",
-    "ejs": "3.1.8",
    "modern-normalize": "1.1.0"
  },
  "devDependencies": {
-    "@parcel/config-default": "2.6.2",
-    "@parcel/core": "2.6.2",
-    "@parcel/optimizer-data-url": "2.6.2",
-    "@parcel/transformer-inline-string": "2.6.2",
-    "parcel": "2.6.2"
+    "@types/node": "18.6.2",
+    "date-and-time": "2.4.1",
+    "vite": "3.0.3",
+    "vite-plugin-html": "3.2.0"
  }
 }
--- a/jsonresume-theme-custom/resume.json
+++ b/jsonresume-theme-custom/resume.json
@@ -0,0 +1,118 @@
+{
+  "$schema": "https://raw.githubusercontent.com/jsonresume/resume-schema/v1.0.0/schema.json",
+  "meta": {
+    "theme": "custom"
+  },
+  "basics": {
+    "name": "Théo LUDWIG",
+    "label": "Développeur Full Stack Junior • Passionné de High-Tech",
+    "image": "https://divlo.fr/images/logo_orange.png",
+    "email": "contact@divlo.fr",
+    "location": {},
+    "url": "https://divlo.fr",
+    "summary": "Je me forme en autodidacte dans l'informatique en suivant des formations en ligne et je suis aussi un étudiant à l'université suivant la formation \"BUT Informatique\" (première année). <br/> Je mets en pratique tout ce que j'apprends et réalise de nombreux projets."
+  },
+  "education": [
+    {
+      "startDate": "2022",
+      "studyType": "Diplôme du Bachelor Universitaire de Technologie (BUT) Informatique",
+      "institution": "IUT Robert Schuman à Illkirch-Graffenstaden",
+      "score": "En cours"
+    },
+    {
+      "startDate": "2019",
+      "endDate": "2021",
+      "studyType": "Diplôme du Baccalauréat Général (Mathématiques et Numériques Sciences Informatiques)",
+      "institution": "Lycée Heinrich Nessel à Haguenau",
+      "score": "Mention Assez Bien"
+    },
+    {
+      "startDate": "2014",
+      "endDate": "2018",
+      "studyType": "Diplôme national du brevet",
+      "institution": "Collège Gustave Doré à Hochfelden",
+      "score": "Mention Bien"
+    }
+  ],
+  "work": [
+    {
+      "summary": "Développement site web en React.js et Strapi afin de répondre <a href=\"https://www.nuitdelinfo.com/nuitinfo/_media/infos:la_nuit_de_l_info_2021_-_sujet.pdf\">au sujet de la Nuit de l'Info 2021</a>.<br /> TOP 1 France: Défi de l'entreprise <a href=\"https://www.nuitdelinfo.com/inscription/defis/300\">ToolPad</a>.",
+      "website": "https://www.nuitdelinfo.com/",
+      "name": "La Nuit de l'info 2021",
+      "position": "Participation avec l'équipe <a href=\"https://www.nuitdelinfo.com/inscription/equipes/46\">Who are We</a>",
+      "startDate": "2021-12-02",
+      "endDate": "2021-12-03"
+    },
+    {
+      "summary": "Agent administratif en vue de faire face au sucroît temporaire d'activités liés à la numérisation des plans des postes sources <br /> actuellement sous format papier calque suite à la libération des locaux des archives.",
+      "website": "https://www.es.fr/",
+      "name": "ÉS (Électricité de Strasbourg)",
+      "location": "5 Rue André Marie Ampère, 67450 Mundolsheim",
+      "position": "Emploi d'été en qualité d'agent administratif",
+      "startDate": "2021-07-07",
+      "endDate": "2021-07-30"
+    },
+    {
+      "summary": "Hackathon développement d'une landing page et web scraping.",
+      "website": "https://www.wildcodeschool.fr/",
+      "name": "Wild Code School",
+      "location": "32 Rue du Bass. d'Austerlitz, 67100 Strasbourg",
+      "position": "Stage initiation métier développeur web",
+      "startDate": "2019-06-24",
+      "endDate": "2019-06-28"
+    },
+    {
+      "summary": "Développement d'un site web pour trouver un restaurant à la pause repas.",
+      "website": "https://www.itpartners.fr/",
+      "name": "Tribe | IT Partners",
+      "location": "16 Rue du Parc, 67205 Oberhausbergen",
+      "position": "Stage initiation métier développeur web",
+      "startDate": "2019-06-17",
+      "endDate": "2019-06-21"
+    },
+    {
+      "summary": "Apprentissage du métier \"Chargé de communication\" et des logiciels de graphisme tels que \"Adobe Photoshop\".",
+      "website": "https://www.es.fr/",
+      "name": "ÉS (Électricité de Strasbourg)",
+      "location": "26 Bd du Président-Wilson, 67000 Strasbourg",
+      "position": "Stage de découverte (3ème)",
+      "startDate": "2018-02-19",
+      "endDate": "2018-02-23"
+    }
+  ],
+  "interests": [
+    {
+      "name": "Développeur Full Stack Junior"
+    },
+    {
+      "name": "Passionné de High-Tech"
+    },
+    {
+      "name": "Enthousiaste de l'Open-Source"
+    }
+  ],
+  "skills": [
+    {
+      "keywords": ["JavaScript", "TypeScript", "Python", "C/C++"],
+      "name": "Langages de programmation"
+    },
+    {
+      "keywords": ["HTML", "CSS", "Tailwind CSS", "React.js (+ Next.js)"],
+      "name": "Front-end"
+    },
+    {
+      "keywords": ["Node.js", "Fastify", "PostgreSQL", "MySQL"],
+      "name": "Back-end"
+    },
+    {
+      "keywords": [
+        "GNU/Linux",
+        "Ubuntu",
+        "Visual Studio Code",
+        "git",
+        "Docker"
+      ],
+      "name": "Logiciels et outils"
+    }
+  ]
+}
--- a/jsonresume-theme-custom/scripts/build.js
+++ b/jsonresume-theme-custom/scripts/build.js
@@ -1,21 +1,19 @@
+import { fileURLToPath } from 'node:url'
 import fs from 'node:fs'

-import { render } from '../index.js'
+import { build } from 'vite'

-const jsonResumeURL = new URL('../../resume.json', import.meta.url)
-const publicResumeURL = new URL(
-  '../../public/curriculum-vitae.html',
+const jsonResumeThemeCustom = new URL('../', import.meta.url)
+const jsonResumeThemeCustomDist = new URL('./dist', jsonResumeThemeCustom)
+const publicResumeOutputURL = new URL(
+  '../../public/curriculum-vitae',
  import.meta.url
 )

-const dataResumeStringJSON = await fs.promises.readFile(jsonResumeURL, {
-  encoding: 'utf-8'
-})
-const dataResumeJSON = JSON.parse(dataResumeStringJSON)
-const dataResumeIndexHTML = await render(dataResumeJSON)
-await fs.promises.writeFile(publicResumeURL, dataResumeIndexHTML, {
-  encoding: 'utf-8'
+await build({
+  root: fileURLToPath(jsonResumeThemeCustom)
 })

-console.log('Resume generated successfully!')
-console.log(`See it at ${publicResumeURL}`)
+await fs.promises.cp(jsonResumeThemeCustomDist, publicResumeOutputURL, {
+  recursive: true
+})
--- a/jsonresume-theme-custom/theme/styles/global.css
+++ b/jsonresume-theme-custom/theme/styles/global.css
@@ -1,4 +1,4 @@
-@import 'npm:modern-normalize/modern-normalize.css';
+@import 'modern-normalize/modern-normalize.css';

 body {
  font-family: 'Montserrat', 'Arial', 'sans-serif';
--- a/jsonresume-theme-custom/vite.config.ts
+++ b/jsonresume-theme-custom/vite.config.ts
@@ -0,0 +1,33 @@
+import fs from 'node:fs'
+
+import { defineConfig } from 'vite'
+import { createHtmlPlugin } from 'vite-plugin-html'
+import date from 'date-and-time'
+
+const jsonResumeURL = new URL('./resume.json', import.meta.url)
+const dataResumeStringJSON = await fs.promises.readFile(jsonResumeURL, {
+  encoding: 'utf-8'
+})
+const resume = JSON.parse(dataResumeStringJSON)
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  build: {
+    assetsDir: './'
+  },
+  plugins: [
+    createHtmlPlugin({
+      inject: {
+        data: {
+          date,
+          locals: {
+            ...resume
+          }
+        }
+      }
+    })
+  ],
+  css: {
+    postcss: {}
+  }
+})
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
    "export": "next export",
    "lint:commit": "commitlint",
    "lint:editorconfig": "editorconfig-checker",
-    "lint:markdown": "markdownlint \"**/*.{md,mdx}\" --dot --ignore-path \".gitignore\"",
+    "lint:markdown": "markdownlint-cli2",
    "lint:typescript": "eslint \"**/*.{js,jsx,ts,tsx}\"",
    "lint:prettier": "prettier \".\" --check --ignore-path \".gitignore\"",
    "lint:staged": "lint-staged",
@@ -27,22 +27,21 @@
    "test:e2e": "start-server-and-test \"start\" \"http://localhost:3000\" \"cypress run\"",
    "test:e2e:dev": "start-server-and-test \"dev\" \"http://localhost:3000\" \"cypress open\"",
    "resume:build": "node ./jsonresume-theme-custom/scripts/build.js",
-    "resume:dev": "nodemon ./jsonresume-theme-custom/scripts/build.js --watch ./jsonresume-theme-custom/theme -e js,css,ejs",
    "release": "semantic-release",
    "deploy": "vercel",
    "postinstall": "husky install"
  },
  "dependencies": {
    "@fontsource/montserrat": "4.5.11",
-    "@fortawesome/fontawesome-svg-core": "6.1.1",
-    "@fortawesome/free-brands-svg-icons": "6.1.1",
-    "@fortawesome/free-solid-svg-icons": "6.1.1",
+    "@fortawesome/fontawesome-svg-core": "6.1.2",
+    "@fortawesome/free-brands-svg-icons": "6.1.2",
+    "@fortawesome/free-solid-svg-icons": "6.1.2",
    "@fortawesome/react-fontawesome": "0.2.0",
-    "classnames": "2.3.1",
-    "date-and-time": "2.4.0",
+    "clsx": "1.2.1",
+    "date-and-time": "2.4.1",
    "gray-matter": "4.0.3",
    "html-react-parser": "3.0.1",
-    "next": "12.2.3",
+    "next": "12.2.2",
    "next-mdx-remote": "4.1.0",
    "next-pwa": "5.5.4",
    "next-themes": "0.2.0",
@@ -69,16 +68,16 @@
    "@testing-library/jest-dom": "5.16.4",
    "@testing-library/react": "13.3.0",
    "@types/jest": "27.5.0",
-    "@types/node": "18.0.6",
+    "@types/node": "18.6.2",
    "@types/react": "18.0.15",
    "@types/unist": "2.0.6",
-    "@typescript-eslint/eslint-plugin": "5.30.7",
+    "@typescript-eslint/eslint-plugin": "5.31.0",
    "autoprefixer": "10.4.7",
    "cypress": "10.3.1",
    "editorconfig-checker": "4.0.2",
    "eslint": "8.20.0",
    "eslint-config-conventions": "3.0.0",
-    "eslint-config-next": "12.2.3",
+    "eslint-config-next": "12.2.2",
    "eslint-config-prettier": "8.5.0",
    "eslint-plugin-import": "2.26.0",
    "eslint-plugin-prettier": "4.2.1",
@@ -89,16 +88,15 @@
    "jest": "27.5.1",
    "jsonresume-theme-custom": "file:./jsonresume-theme-custom",
    "lint-staged": "13.0.3",
-    "markdownlint-cli": "0.32.0",
+    "markdownlint-cli2": "0.5.0",
    "next-secure-headers": "2.2.0",
-    "nodemon": "2.0.19",
    "postcss": "8.4.14",
    "prettier": "2.7.1",
-    "prettier-plugin-tailwindcss": "0.1.12",
+    "prettier-plugin-tailwindcss": "0.1.13",
    "semantic-release": "19.0.3",
    "start-server-and-test": "1.14.0",
    "tailwindcss": "3.1.6",
    "typescript": "4.7.4",
-    "vercel": "27.2.0"
+    "vercel": "27.3.0"
  }
 }
--- a/public/curriculum-vitae/.gitkeep
+++ b/public/curriculum-vitae/.gitkeep