From bf9f0494782c49200e120e50e6c653ffa4d6b793 Mon Sep 17 00:00:00 2001 From: miku0129 Date: Sun, 26 May 2024 20:32:07 +0200 Subject: [PATCH 1/8] feat: change name of component from Gallery to MainVisual --- src/App.tsx | 40 +++++++++---------- .../main-visual.component.tsx} | 4 +- src/component/main/main.component.tsx | 4 +- 3 files changed, 24 insertions(+), 24 deletions(-) rename src/component/{gallery/gallery.component.tsx => main-visual/main-visual.component.tsx} (88%) diff --git a/src/App.tsx b/src/App.tsx index 4ced185..f9b7781 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,20 +1,20 @@ -import { Route, Routes } from "react-router-dom"; -import { AnchorProvider } from "react-anchor-navigation"; - -import BasicLayout from "./route/basic-layout/basic-layout"; -import Home from "./route/home/home.route"; - -function App() { - return ( - -
{/* TypeScriptの型解決のためのdiv */}
- - }> - } /> - - - - ); -} - -export default App; +import { Route, Routes } from "react-router-dom"; +import { AnchorProvider } from "react-anchor-navigation"; + +import BasicLayout from "./route/basic-layout/basic-layout"; +import Home from "./route/home/home.route"; + +function App() { + return ( + +
{/* TypeScriptの型解決のためのdiv */}
+ + }> + } /> + + + + ); +} + +export default App; diff --git a/src/component/gallery/gallery.component.tsx b/src/component/main-visual/main-visual.component.tsx similarity index 88% rename from src/component/gallery/gallery.component.tsx rename to src/component/main-visual/main-visual.component.tsx index fb47b16..f1956b5 100644 --- a/src/component/gallery/gallery.component.tsx +++ b/src/component/main-visual/main-visual.component.tsx @@ -2,7 +2,7 @@ import { useState, useEffect } from "react"; import ImageGallery from "react-image-gallery"; import { getPhotos } from "../../utils/data.utils"; -const Gallery = () => { +const MainVisual = () => { const [photos, setPhotos] = useState([]); useEffect(() => { @@ -28,4 +28,4 @@ const Gallery = () => { ); }; -export default Gallery; +export default MainVisual; diff --git a/src/component/main/main.component.tsx b/src/component/main/main.component.tsx index 669f4b6..1999665 100644 --- a/src/component/main/main.component.tsx +++ b/src/component/main/main.component.tsx @@ -9,7 +9,7 @@ import ContentContact from "../content-contact/content-contact.component"; import "react-image-gallery/styles/css/image-gallery.css"; import "./main.styles.scss"; -import Gallery from "../gallery/gallery.component"; +import MainVisual from "../main-visual/main-visual.component"; const Main = () => { return ( @@ -20,7 +20,7 @@ const Main = () => {
- + From 8141ab16e65e8a04ef2dc9e84c28868d90bda3e3 Mon Sep 17 00:00:00 2001 From: miku0129 Date: Sun, 26 May 2024 21:11:19 +0200 Subject: [PATCH 2/8] feat: add route for /gallery --- src/App.tsx | 2 ++ src/component/gallery/gallery.component.tsx | 5 +++++ src/index.js | 2 +- 3 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 src/component/gallery/gallery.component.tsx diff --git a/src/App.tsx b/src/App.tsx index f9b7781..8b5e510 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,6 +3,7 @@ import { AnchorProvider } from "react-anchor-navigation"; import BasicLayout from "./route/basic-layout/basic-layout"; import Home from "./route/home/home.route"; +import Gallery from "./component/gallery/gallery.component"; function App() { return ( @@ -11,6 +12,7 @@ function App() { }> } /> + } /> diff --git a/src/component/gallery/gallery.component.tsx b/src/component/gallery/gallery.component.tsx new file mode 100644 index 0000000..e3d4808 --- /dev/null +++ b/src/component/gallery/gallery.component.tsx @@ -0,0 +1,5 @@ +const Gallery = () => { + return

gallery

+} + +export default Gallery; \ No newline at end of file diff --git a/src/index.js b/src/index.js index 50d062d..5ada063 100644 --- a/src/index.js +++ b/src/index.js @@ -10,7 +10,7 @@ import reportWebVitals from "./reportWebVitals"; const router = createBrowserRouter([ { - path: "/", + path: "/*", element: , }, ]); From 0c990ce51cb87c56e45cca812670518d6d376a3f Mon Sep 17 00:00:00 2001 From: miku0129 Date: Sun, 26 May 2024 22:15:30 +0200 Subject: [PATCH 3/8] feat: add styles to Gallery --- package-lock.json | 483 ++++++++++++++++++ package.json | 3 + src/component/gallery/gallery.component.scss | 11 + src/component/gallery/gallery.component.tsx | 72 ++- .../main-visual/main-visual.component.tsx | 4 +- src/utils/data.utils.tsx | 42 +- src/utils/useWindowSize.ts | 16 + 7 files changed, 612 insertions(+), 19 deletions(-) create mode 100644 src/component/gallery/gallery.component.scss create mode 100644 src/utils/useWindowSize.ts diff --git a/package-lock.json b/package-lock.json index 77c8e1c..1b34b93 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,9 @@ "name": "jardinieresmasquees", "version": "0.1.0", "dependencies": { + "@emotion/react": "^11.11.4", + "@emotion/styled": "^11.11.5", + "@mui/material": "^5.15.18", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -2753,6 +2756,75 @@ "kuler": "^2.0.0" } }, + "node_modules/@emotion/babel-plugin": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz", + "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==", + "dependencies": { + "@babel/helper-module-imports": "^7.16.7", + "@babel/runtime": "^7.18.3", + "@emotion/hash": "^0.9.1", + "@emotion/memoize": "^0.8.1", + "@emotion/serialize": "^1.1.2", + "babel-plugin-macros": "^3.1.0", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^4.0.0", + "find-root": "^1.1.0", + "source-map": "^0.5.7", + "stylis": "4.2.0" + } + }, + "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz", + "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==" + }, + "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@emotion/babel-plugin/node_modules/source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/@emotion/babel-plugin/node_modules/stylis": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz", + "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==" + }, + "node_modules/@emotion/cache": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz", + "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==", + "dependencies": { + "@emotion/memoize": "^0.8.1", + "@emotion/sheet": "^1.2.2", + "@emotion/utils": "^1.2.1", + "@emotion/weak-memoize": "^0.3.1", + "stylis": "4.2.0" + } + }, + "node_modules/@emotion/cache/node_modules/stylis": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz", + "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==" + }, + "node_modules/@emotion/hash": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", + "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==" + }, "node_modules/@emotion/is-prop-valid": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz", @@ -2766,11 +2838,91 @@ "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" }, + "node_modules/@emotion/react": { + "version": "11.11.4", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.4.tgz", + "integrity": "sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==", + "dependencies": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.11.0", + "@emotion/cache": "^11.11.0", + "@emotion/serialize": "^1.1.3", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1", + "@emotion/utils": "^1.2.1", + "@emotion/weak-memoize": "^0.3.1", + "hoist-non-react-statics": "^3.3.1" + }, + "peerDependencies": { + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@emotion/serialize": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.4.tgz", + "integrity": "sha512-RIN04MBT8g+FnDwgvIUi8czvr1LU1alUMI05LekWB5DGyTm8cCBMCRpq3GqaiyEDRptEXOyXnvZ58GZYu4kBxQ==", + "dependencies": { + "@emotion/hash": "^0.9.1", + "@emotion/memoize": "^0.8.1", + "@emotion/unitless": "^0.8.1", + "@emotion/utils": "^1.2.1", + "csstype": "^3.0.2" + } + }, + "node_modules/@emotion/sheet": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz", + "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==" + }, + "node_modules/@emotion/styled": { + "version": "11.11.5", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.5.tgz", + "integrity": "sha512-/ZjjnaNKvuMPxcIiUkf/9SHoG4Q196DRl1w82hQ3WCsjo1IUR8uaGWrC6a87CrYAW0Kb/pK7hk8BnLgLRi9KoQ==", + "dependencies": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.11.0", + "@emotion/is-prop-valid": "^1.2.2", + "@emotion/serialize": "^1.1.4", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1", + "@emotion/utils": "^1.2.1" + }, + "peerDependencies": { + "@emotion/react": "^11.0.0-rc.0", + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@emotion/unitless": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==" }, + "node_modules/@emotion/use-insertion-effect-with-fallbacks": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz", + "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==", + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/@emotion/utils": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz", + "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==" + }, + "node_modules/@emotion/weak-memoize": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz", + "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==" + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -3401,6 +3553,40 @@ "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-1.0.0.tgz", "integrity": "sha512-zuWxyfXNbsKbm96HhXzainONPFqRcoZblQ++e9cAIGUuHfl2cFSBzW01jtesqWG/lqaUyX3H8O1y9oWboGNQBA==" }, + "node_modules/@floating-ui/core": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.2.tgz", + "integrity": "sha512-+2XpQV9LLZeanU4ZevzRnGFg2neDeKHgFLjP6YLW+tly0IvrhqT4u8enLGjLH3qeh85g19xY5rsAusfwTdn5lg==", + "dependencies": { + "@floating-ui/utils": "^0.2.0" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.6.5", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.5.tgz", + "integrity": "sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==", + "dependencies": { + "@floating-ui/core": "^1.0.0", + "@floating-ui/utils": "^0.2.0" + } + }, + "node_modules/@floating-ui/react-dom": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.0.tgz", + "integrity": "sha512-lNzj5EQmEKn5FFKc04+zasr09h/uX8RtJRNj5gUXsSQIXHVWTVh+hVAg1vOMCexkX8EgvemMvIFpQfkosnVNyA==", + "dependencies": { + "@floating-ui/dom": "^1.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz", + "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==" + }, "node_modules/@google-cloud/cloud-sql-connector": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/@google-cloud/cloud-sql-connector/-/cloud-sql-connector-1.3.0.tgz", @@ -4578,6 +4764,236 @@ "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz", "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==" }, + "node_modules/@mui/base": { + "version": "5.0.0-beta.40", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz", + "integrity": "sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@floating-ui/react-dom": "^2.0.8", + "@mui/types": "^7.2.14", + "@mui/utils": "^5.15.14", + "@popperjs/core": "^2.11.8", + "clsx": "^2.1.0", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/core-downloads-tracker": { + "version": "5.15.18", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.18.tgz", + "integrity": "sha512-/9pVk+Al8qxAjwFUADv4BRZgMpZM4m5E+2Q/20qhVPuIJWqKp4Ie4tGExac6zu93rgPTYVQGgu+1vjiT0E+cEw==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + } + }, + "node_modules/@mui/material": { + "version": "5.15.18", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.18.tgz", + "integrity": "sha512-n+/dsiqux74fFfcRUJjok+ieNQ7+BEk6/OwX9cLcLvriZrZb+/7Y8+Fd2HlUUbn5N0CDurgAHm0VH1DqyJ9HAw==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@mui/base": "5.0.0-beta.40", + "@mui/core-downloads-tracker": "^5.15.18", + "@mui/system": "^5.15.15", + "@mui/types": "^7.2.14", + "@mui/utils": "^5.15.14", + "@types/react-transition-group": "^4.4.10", + "clsx": "^2.1.0", + "csstype": "^3.1.3", + "prop-types": "^15.8.1", + "react-is": "^18.2.0", + "react-transition-group": "^4.4.5" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/material/node_modules/react-is": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", + "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==" + }, + "node_modules/@mui/private-theming": { + "version": "5.15.14", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.14.tgz", + "integrity": "sha512-UH0EiZckOWcxiXLX3Jbb0K7rC8mxTr9L9l6QhOZxYc4r8FHUkefltV9VDGLrzCaWh30SQiJvAEd7djX3XXY6Xw==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@mui/utils": "^5.15.14", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/styled-engine": { + "version": "5.15.14", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.14.tgz", + "integrity": "sha512-RILkuVD8gY6PvjZjqnWhz8fu68dVkqhM5+jYWfB5yhlSQKg+2rHkmEwm75XIeAqI3qwOndK6zELK5H6Zxn4NHw==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@emotion/cache": "^11.11.0", + "csstype": "^3.1.3", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@emotion/react": "^11.4.1", + "@emotion/styled": "^11.3.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + } + } + }, + "node_modules/@mui/system": { + "version": "5.15.15", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.15.tgz", + "integrity": "sha512-aulox6N1dnu5PABsfxVGOZffDVmlxPOVgj56HrUnJE8MCSh8lOvvkd47cebIVQQYAjpwieXQXiDPj5pwM40jTQ==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@mui/private-theming": "^5.15.14", + "@mui/styled-engine": "^5.15.14", + "@mui/types": "^7.2.14", + "@mui/utils": "^5.15.14", + "clsx": "^2.1.0", + "csstype": "^3.1.3", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/types": { + "version": "7.2.14", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.14.tgz", + "integrity": "sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ==", + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/utils": { + "version": "5.15.14", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.14.tgz", + "integrity": "sha512-0lF/7Hh/ezDv5X7Pry6enMsbYyGKjADzvHyo3Qrc/SSlTsQ1VkbDMbH0m2t3OR5iIVLwMoxwM7yGd+6FCMtTFA==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@types/prop-types": "^15.7.11", + "prop-types": "^15.8.1", + "react-is": "^18.2.0" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/utils/node_modules/react-is": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", + "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==" + }, "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": { "version": "5.1.1-v1", "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz", @@ -4792,6 +5208,15 @@ "node": ">=12" } }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@protobufjs/aspromise": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz", @@ -5739,6 +6164,14 @@ "@types/react": "*" } }, + "node_modules/@types/react-transition-group": { + "version": "4.4.10", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz", + "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -8054,6 +8487,14 @@ "node": ">=0.8" } }, + "node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "engines": { + "node": ">=6" + } + }, "node_modules/co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -9544,6 +9985,15 @@ "utila": "~0.4" } }, + "node_modules/dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "dependencies": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "node_modules/dom-serializer": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", @@ -11158,6 +11608,11 @@ "url": "https://github.com/avajs/find-cache-dir?sponsor=1" } }, + "node_modules/find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" + }, "node_modules/find-up": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", @@ -12395,6 +12850,19 @@ "node": ">=10.0.0" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dependencies": { + "react-is": "^16.7.0" + } + }, + "node_modules/hoist-non-react-statics/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -20321,6 +20789,21 @@ "node": ">=12" } }, + "node_modules/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": ">=16.6.0", + "react-dom": ">=16.6.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index 0c0eea3..0ca8f33 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,9 @@ "version": "0.1.0", "private": true, "dependencies": { + "@emotion/react": "^11.11.4", + "@emotion/styled": "^11.11.5", + "@mui/material": "^5.15.18", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", diff --git a/src/component/gallery/gallery.component.scss b/src/component/gallery/gallery.component.scss new file mode 100644 index 0000000..506592b --- /dev/null +++ b/src/component/gallery/gallery.component.scss @@ -0,0 +1,11 @@ +.gallery{ + position: absolute; + top: 0; + left: 0; + background-color: darkgoldenrod; + width: 100vw; +} + +.gallery-container{ + margin-top: 120px; +} \ No newline at end of file diff --git a/src/component/gallery/gallery.component.tsx b/src/component/gallery/gallery.component.tsx index e3d4808..36cc86f 100644 --- a/src/component/gallery/gallery.component.tsx +++ b/src/component/gallery/gallery.component.tsx @@ -1,5 +1,71 @@ +import { useEffect, useState } from "react"; + +import Box from "@mui/material/Box"; +import ImageList from "@mui/material/ImageList"; +import ImageListItem from "@mui/material/ImageListItem"; + +import { useWindowSize } from "../../utils/useWindowSize"; +import { getPhotosForGallery } from "../../utils/data.utils"; + +import "./gallery.component.scss"; + const Gallery = () => { - return

gallery

-} + const [photos, setPhotos] = useState([]); + const [width, height] = useWindowSize(); + console.log("to avoid eslint issue: ", height); + + useEffect(() => { + const pulltrigger = async () => { + const res = await getPhotosForGallery(); + setPhotos(res); + }; + pulltrigger(); + }, []); + + const imageItem = () => { + return photos.map((photo) => { + return ( + + {photo} + + ); + }); + }; + + const handleStyleOfImageList = () => { + if (width < 450) { + return ( + <> + + {imageItem()} + + + ); + } else { + return ( + <> + + {imageItem()} + + + ); + } + }; + + return ( +
+
+ + {handleStyleOfImageList()} + +
+
+ ); +}; -export default Gallery; \ No newline at end of file +export default Gallery; diff --git a/src/component/main-visual/main-visual.component.tsx b/src/component/main-visual/main-visual.component.tsx index f1956b5..2d1b834 100644 --- a/src/component/main-visual/main-visual.component.tsx +++ b/src/component/main-visual/main-visual.component.tsx @@ -1,13 +1,13 @@ import { useState, useEffect } from "react"; import ImageGallery from "react-image-gallery"; -import { getPhotos } from "../../utils/data.utils"; +import { getPhotosForMainVisual } from "../../utils/data.utils"; const MainVisual = () => { const [photos, setPhotos] = useState([]); useEffect(() => { const pulltrigger = async () => { - const res = await getPhotos(); + const res = await getPhotosForMainVisual(); setPhotos(res); }; pulltrigger(); diff --git a/src/utils/data.utils.tsx b/src/utils/data.utils.tsx index 67f3476..d121d3d 100644 --- a/src/utils/data.utils.tsx +++ b/src/utils/data.utils.tsx @@ -1,6 +1,33 @@ import { createFlickr } from "flickr-sdk"; -export const getPhotos = async () => { +type FlickrPhotoInfo = { + farm: number; + id: string; + isfamily: number; + isfriend: number; + isprimary: string; + ispublic: number; + secret: string; + server: string; + title: string; +}; + +export const getPhotosForGallery = async () => { + const { flickr } = createFlickr(process.env.REACT_APP_FLICKR_API_KEY!); + + const serverId = process.env.REACT_APP_FLICKR_SERVER_ID; + const res = await flickr("flickr.photosets.getPhotos", { + photoset_id: process.env.REACT_APP_FLICKR_PHOTOSET_ID!, + user_id: process.env.REACT_APP_FLICKR_USER_ID!, + }); + + const photos = res.photoset.photo.map((item: FlickrPhotoInfo) => { + return `https://live.staticflickr.com/${serverId}/${item.id}_${item.secret}.jpg`; + }); + return photos; +}; + +export const getPhotosForMainVisual = async () => { const { flickr } = createFlickr(process.env.REACT_APP_FLICKR_API_KEY!); const serverId = process.env.REACT_APP_FLICKR_SERVER_ID; @@ -8,21 +35,8 @@ export const getPhotos = async () => { photoset_id: process.env.REACT_APP_FLICKR_PHOTOSET_ID!, user_id: process.env.REACT_APP_FLICKR_USER_ID!, }); - console.log(res.photoset.photo); - type FlickrPhotoInfo = { - farm: number; - id: string; - isfamily: number; - isfriend: number; - isprimary: string; - ispublic: number; - secret: string; - server: string; - title: string; - }; const photos = res.photoset.photo.map((item: FlickrPhotoInfo) => { - console.log(item); const photoUrl = `https://live.staticflickr.com/${serverId}/${item.id}_${item.secret}.jpg`; const obj = { original: photoUrl, diff --git a/src/utils/useWindowSize.ts b/src/utils/useWindowSize.ts new file mode 100644 index 0000000..910a6a7 --- /dev/null +++ b/src/utils/useWindowSize.ts @@ -0,0 +1,16 @@ +import { useLayoutEffect, useState } from "react"; + +export const useWindowSize = (): number[] => { + const [size, setSize] = useState([0, 0]); + useLayoutEffect(() => { + const updateSize = (): void => { + setSize([window.innerWidth, window.innerHeight]); + }; + + window.addEventListener("resize", updateSize); + updateSize(); + + return () => window.removeEventListener("resize", updateSize); + }, []); + return size; +}; From 624c3c9c6ab1b40b6e4b472a4ce4f3674c2dc2ff Mon Sep 17 00:00:00 2001 From: miku0129 Date: Sun, 26 May 2024 23:16:53 +0200 Subject: [PATCH 4/8] feat: update menu in nav --- .../content-contact.component.tsx | 9 ++++++--- src/component/main/main.component.tsx | 10 +++++----- src/component/nav/nav.component.tsx | 18 ++++++++++++++---- src/component/nav/nav.styles.ts | 3 ++- 4 files changed, 27 insertions(+), 13 deletions(-) diff --git a/src/component/content-contact/content-contact.component.tsx b/src/component/content-contact/content-contact.component.tsx index 6fe4c6a..3fd2356 100644 --- a/src/component/content-contact/content-contact.component.tsx +++ b/src/component/content-contact/content-contact.component.tsx @@ -9,9 +9,12 @@ const ContentContact = () => {
- - - + +
diff --git a/src/component/main/main.component.tsx b/src/component/main/main.component.tsx index 1999665..1c10638 100644 --- a/src/component/main/main.component.tsx +++ b/src/component/main/main.component.tsx @@ -1,5 +1,5 @@ import { Fragment } from "react"; -import { AnchorSection } from "react-anchor-navigation"; +// import { AnchorSection } from "react-anchor-navigation"; import ArticlesPreview from "../../route/articles-preview/articles-preview.component"; import ContentHeader from "../content-header/content-header.compoment"; @@ -15,15 +15,15 @@ const Main = () => { return (
- + {/* */}
- + {/* */} - + {/* */} - + {/* */}
diff --git a/src/component/nav/nav.component.tsx b/src/component/nav/nav.component.tsx index 0635833..c227e71 100644 --- a/src/component/nav/nav.component.tsx +++ b/src/component/nav/nav.component.tsx @@ -1,6 +1,7 @@ import { useState } from "react"; +import { Link } from "react-router-dom"; -import { AnchorLink } from "react-anchor-navigation"; +// import { AnchorLink } from "react-anchor-navigation"; import { Navigation, Logo } from "./nav.styles"; @@ -18,12 +19,15 @@ const Nav = () => { return (
- + {/* - + */} + + +
    -
  • + {/*
  • Accueil
  • @@ -34,6 +38,12 @@ const Nav = () => {
  • Contact +
    • */} +
  • + Accueil +
    • +
  • + Gallery
diff --git a/src/component/nav/nav.styles.ts b/src/component/nav/nav.styles.ts index 4a233f1..496aa53 100644 --- a/src/component/nav/nav.styles.ts +++ b/src/component/nav/nav.styles.ts @@ -23,7 +23,8 @@ export const Navigation = styled.div` .menu { list-style: none; display: flex; - gap: 20px; + gap: 30px; + margin-right: 30px; li { a { From efcdd499e797da9f29e28802ca01b26f32ac9f96 Mon Sep 17 00:00:00 2001 From: miku0129 Date: Fri, 14 Jun 2024 19:09:35 +0200 Subject: [PATCH 5/8] feat: update env-key for flickrAPI --- src/utils/data.utils.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/utils/data.utils.tsx b/src/utils/data.utils.tsx index d121d3d..2930646 100644 --- a/src/utils/data.utils.tsx +++ b/src/utils/data.utils.tsx @@ -17,7 +17,7 @@ export const getPhotosForGallery = async () => { const serverId = process.env.REACT_APP_FLICKR_SERVER_ID; const res = await flickr("flickr.photosets.getPhotos", { - photoset_id: process.env.REACT_APP_FLICKR_PHOTOSET_ID!, + photoset_id: process.env.REACT_APP_FLICKR_GALLERY_PHOTOSET_ID!, user_id: process.env.REACT_APP_FLICKR_USER_ID!, }); @@ -32,7 +32,7 @@ export const getPhotosForMainVisual = async () => { const serverId = process.env.REACT_APP_FLICKR_SERVER_ID; const res = await flickr("flickr.photosets.getPhotos", { - photoset_id: process.env.REACT_APP_FLICKR_PHOTOSET_ID!, + photoset_id: process.env.REACT_APP_FLICKR_MAINVISUAL_PHOTOSET_ID!, user_id: process.env.REACT_APP_FLICKR_USER_ID!, }); From 73454b4909dcfb4689d4d77ac1748819c4a08797 Mon Sep 17 00:00:00 2001 From: miku0129 Date: Fri, 14 Jun 2024 19:20:10 +0200 Subject: [PATCH 6/8] feat: remove react-anchor-navigation --- README.md | 1 - package-lock.json | 9 --------- package.json | 1 - src/App.tsx | 16 ++++++---------- src/component/main/main.component.tsx | 5 ----- src/component/nav/nav.component.tsx | 17 ----------------- 6 files changed, 6 insertions(+), 43 deletions(-) diff --git a/README.md b/README.md index 44b8eeb..28ef136 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,6 @@ This repository contains the TypeScript codebase of a website for "Jardinieresma - **Achieved scalable architecture:** by TypeScript + React - **Obtains contents always up-to-date:** Assembled with Facebook API & Flickr API. -- **Simple Navigation:** Smooth, user-friendly interface using by react-anchor-navigation. - **Appeal to the eye:** Enhance visuals with react-image-gallery and styled-component. ## Demo diff --git a/package-lock.json b/package-lock.json index 1b34b93..17c3938 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,7 +20,6 @@ "firebase-tools": "^13.4.1", "flickr-sdk": "^7.0.0-beta.7", "react": "^18.2.0", - "react-anchor-navigation": "^0.2.7", "react-dom": "^18.2.0", "react-image-gallery": "^1.3.0", "react-router-dom": "^6.14.0", @@ -20508,14 +20507,6 @@ "node": ">=0.10.0" } }, - "node_modules/react-anchor-navigation": { - "version": "0.2.7", - "resolved": "https://registry.npmjs.org/react-anchor-navigation/-/react-anchor-navigation-0.2.7.tgz", - "integrity": "sha512-4wMYr0e9fwVFwHynDXH3OgSQbMP6FNpmXY/wkEpXs02meS07h3U4XFStsE2IzCBD4KapehxDn5ajFrCUCB9eww==", - "peerDependencies": { - "react": ">=16.8.6" - } - }, "node_modules/react-app-polyfill": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz", diff --git a/package.json b/package.json index 0ca8f33..8f173b5 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,6 @@ "firebase-tools": "^13.4.1", "flickr-sdk": "^7.0.0-beta.7", "react": "^18.2.0", - "react-anchor-navigation": "^0.2.7", "react-dom": "^18.2.0", "react-image-gallery": "^1.3.0", "react-router-dom": "^6.14.0", diff --git a/src/App.tsx b/src/App.tsx index 8b5e510..16ebafd 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,4 @@ import { Route, Routes } from "react-router-dom"; -import { AnchorProvider } from "react-anchor-navigation"; import BasicLayout from "./route/basic-layout/basic-layout"; import Home from "./route/home/home.route"; @@ -7,15 +6,12 @@ import Gallery from "./component/gallery/gallery.component"; function App() { return ( - -
{/* TypeScriptの型解決のためのdiv */}
- - }> - } /> - } /> - - - + + }> + } /> + } /> + + ); } diff --git a/src/component/main/main.component.tsx b/src/component/main/main.component.tsx index 1c10638..a601925 100644 --- a/src/component/main/main.component.tsx +++ b/src/component/main/main.component.tsx @@ -1,5 +1,4 @@ import { Fragment } from "react"; -// import { AnchorSection } from "react-anchor-navigation"; import ArticlesPreview from "../../route/articles-preview/articles-preview.component"; import ContentHeader from "../content-header/content-header.compoment"; @@ -15,15 +14,11 @@ const Main = () => { return (
- {/* */}
- {/* */} - {/* */} - {/* */}
diff --git a/src/component/nav/nav.component.tsx b/src/component/nav/nav.component.tsx index c227e71..b997713 100644 --- a/src/component/nav/nav.component.tsx +++ b/src/component/nav/nav.component.tsx @@ -1,8 +1,6 @@ import { useState } from "react"; import { Link } from "react-router-dom"; -// import { AnchorLink } from "react-anchor-navigation"; - import { Navigation, Logo } from "./nav.styles"; const Nav = () => { @@ -19,26 +17,11 @@ const Nav = () => { return (
- {/* - - */}
    - {/*
  • - Accueil -
    • -
  • - A propos -
    • -
  • - Infos -
    • -
  • - Contact -
    • */}
  • Accueil
    • From 72b89202075671de6ac01b82695e0e2d098184e2 Mon Sep 17 00:00:00 2001 From: miku0129 Date: Fri, 14 Jun 2024 19:24:29 +0200 Subject: [PATCH 7/8] style: change css for menu in navigation --- src/component/nav/nav.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/component/nav/nav.styles.ts b/src/component/nav/nav.styles.ts index 496aa53..af2ae6d 100644 --- a/src/component/nav/nav.styles.ts +++ b/src/component/nav/nav.styles.ts @@ -75,7 +75,7 @@ export const Navigation = styled.div` .menu { padding-left: 0; - justify-content: space-around; + justify-content: right; li { text-align: center; From d1f51d7f17907fb8ba68d50b33ab6d8de1a0b35b Mon Sep 17 00:00:00 2001 From: miku0129 Date: Fri, 14 Jun 2024 19:35:46 +0200 Subject: [PATCH 8/8] docs: update README --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 28ef136..e709f3a 100644 --- a/README.md +++ b/README.md @@ -9,6 +9,8 @@ This repository contains the TypeScript codebase of a website for "Jardinieresma - **Achieved scalable architecture:** by TypeScript + React - **Obtains contents always up-to-date:** Assembled with Facebook API & Flickr API. - **Appeal to the eye:** Enhance visuals with react-image-gallery and styled-component. +- **Deployment automation:** Integrate Github Actions for smoother development. + ## Demo