Update bulma to v1

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

package.json

@@ -7,14 +7,19 @@
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "prepare": "husky install"
+  },
+  "lint-staged": {
+    "*.jsx": "prettier",
+    "*.json": "prettier"
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.5.1",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "bulma": "^0.9.4",
+    "bulma": "^1.0.0",
     "bulma-ribbon": "^0.1.1",
     "ionicons": "^7.2.2",
     "prop-types": "^15.8.1",
@@ -33,6 +38,9 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "husky": "^8.0.0",
+    "lint-staged": "^15.2.0",
+    "prettier": "^3.3.3",
     "sass": "^1.69.5",
     "vite": "^5.0.13"
   }

src/sass/App.sass

@@ -1,5 +1,25 @@
 @charset 'utf-8'
-@import "../../node_modules/bulma/bulma.sass"
+
+@use "sass:color"
+@use "sass:map"
+@use "bulma/sass" as bulma
+
+// global variables for bulma-ribbon
+$colors: ("white": (bulma.$white, bulma.$black), "black": (bulma.$black, bulma.$white), "light": (bulma.$light, bulma.$dark), "dark": (bulma.$dark, bulma.$light), "info": (bulma.$info, bulma.$light))
+$grey-darker: bulma.$grey-darker
+$grey-lighter: bulma.$grey-lighter
+$white: bulma.$white
+
+$size-small: bulma.$size-small
+$size-normal: bulma.$size-normal
+$size-medium: bulma.$size-medium
+$size-large: bulma.$size-large
+
+//@debug $grey-darker
+
+//@use "bulma-ribbon/dist/css/bulma-ribbon.sass"
+
+//@import "../../node_modules/bulma/bulma.scss"
 @import "../../node_modules/bulma-ribbon/src/sass/index"
 @import "../../node_modules/react-responsive-carousel/lib/styles/carousel.min.css"
 

src/sass/Resume.sass

@@ -1,6 +1,6 @@
 @charset 'utf-8'
 
-@import "../../node_modules/bulma/bulma.sass"
+@import "../../node_modules/bulma/bulma.scss"
 
 @import 'crt_effect'
 //@import 'crt'

src/sections/GithubSection.jsx

@@ -1,7 +1,40 @@
 import GitHubCalendar from "react-github-calendar";
 import PropTypes from 'prop-types';
+import { useEffect, useState } from "react";
 
 function GithubSection({ username }) {
+  const [dataTheme, setDataTheme] = useState(null);
+
+  const onChange = (mutationList) => {
+    for (const mutation of mutationList) {
+      if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {
+        const theme = (mutation.target).getAttribute('data-theme')
+
+        switch (theme) {
+          case 'dark':
+            setDataTheme('dark')
+            break
+          case 'light':
+            setDataTheme('light')
+            break
+          default:
+            setDataTheme(null)
+            break
+        }
+      }
+    }
+  };
+
+  useEffect(() => {
+    const observer = new MutationObserver(onChange)
+
+    observer.observe(window.document.documentElement, { attributes: true })
+
+    return () => {
+      observer.disconnect()
+    };
+  })
+
   return (
     <section className="section is-medium">
       <div id="github" className="section-github">
@@ -13,7 +46,7 @@ function GithubSection({ username }) {
             <span>Mes contributions</span>
           </span>
         </p>
-        <GitHubCalendar username={username} colorScheme="light" />
+        <GitHubCalendar username={username} colorScheme={dataTheme} />
       </div>
     </section>
   )

src/sections/WorkSection.jsx

@@ -22,7 +22,7 @@ function Project({ name, description, langs, carousel, status, link }) {
   }
 
   return (
-    <div className="tile is-child is-12 box has-ribbon">
+    <div className="box is-12 has-ribbon">
       { status && <div className={`ribbon ${status?.style || 'is-info'}`}>{status?.label || status}</div> }
       { getLink() }
       <p className="title">{name}</p>
@@ -84,10 +84,10 @@ function Projects({ projects, limit }) {
   return (
     <>
       {renderPagination()}
-      <div className="tile is-ancestor">
+      <div className="grid">
           {projects.slice((currentPage-1)*_limit, (currentPage*_limit)).map((project,index) => {
             return (
-              <div className="tile is-4 is-parent" key={index}>
+              <div className="cell is-4" key={index}>
                 <Project name={project.name} description={project.description} langs={project.langs} carousel={project.carousel} status={project.status} link={project.link} />
               </div>
             )