From c01b2202f8369d45bc245aac68c72e8026d380ad Mon Sep 17 00:00:00 2001 From: Adrien HARNAY Date: Mon, 2 Nov 2020 22:05:22 +0100 Subject: [PATCH 1/6] [chore] upgrade image component to new API --- package.json | 4 +- .../components/PostsListHeader.module.scss | 3 +- .../components/PostsListHeader.tsx | 6 +-- yarn.lock | 48 +++++++++---------- 4 files changed, 29 insertions(+), 32 deletions(-) diff --git a/package.json b/package.json index d28bf82..950ff86 100644 --- a/package.json +++ b/package.json @@ -7,10 +7,9 @@ "license": "MIT", "private": false, "dependencies": { - "next": "10.0.0", + "next": "canary", "normalize.css": "8.0.1", "postcss": "8.1.4", - "prismjs": "1.22.0", "react": "17.0.1", "react-dom": "17.0.1" }, @@ -26,6 +25,7 @@ "postcss-preset-env": "6.7.0", "postcss-reporter": "7.0.1", "prettier": "2.1.2", + "prismjs": "1.22.0", "qs": "6.9.4", "react-ga": "3.2.0", "remark": "13.0.0", diff --git a/src/layouts/main-layout/components/PostsListHeader.module.scss b/src/layouts/main-layout/components/PostsListHeader.module.scss index d48b68e..f384c49 100644 --- a/src/layouts/main-layout/components/PostsListHeader.module.scss +++ b/src/layouts/main-layout/components/PostsListHeader.module.scss @@ -19,10 +19,9 @@ } .coverContainer > * { - overflow: hidden; position: absolute !important; z-index: -1; - margin: -12px 0; + margin: -12px 0 !important; width: 100%; height: 100%; diff --git a/src/layouts/main-layout/components/PostsListHeader.tsx b/src/layouts/main-layout/components/PostsListHeader.tsx index 2544524..77101e0 100644 --- a/src/layouts/main-layout/components/PostsListHeader.tsx +++ b/src/layouts/main-layout/components/PostsListHeader.tsx @@ -13,14 +13,12 @@ const PostsListHeader: FunctionComponent = () => {
sky full of stars
diff --git a/yarn.lock b/yarn.lock index 2edc9c9..70f7298 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1101,20 +1101,20 @@ resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.1.0.tgz#6c9eafc78c1529248f8f4d92b0799a712b6052c6" integrity sha512-i9YbZPN3QgfighY/1X1Pu118VUz2Fmmhd6b2n0/O8YVgGGfw0FbUYoA97k7FkpGJ+pLCFEDLUmAPPV4D1kpeFw== -"@next/env@10.0.0": - version "10.0.0" - resolved "https://registry.yarnpkg.com/@next/env/-/env-10.0.0.tgz#eb0239062226a9c8b604d58d4a4204e26c22eb16" - integrity sha512-59+6BnOxPoMY64Qy2crDGHtvQgHwIL1SIkWeNiEud1V6ASs59SM9oDGN+Bo/EswII1nn+wQRpMvax0IIN2j+VQ== +"@next/env@10.0.1-canary.5": + version "10.0.1-canary.5" + resolved "https://registry.yarnpkg.com/@next/env/-/env-10.0.1-canary.5.tgz#60997d1fa9482265e19034adc8dbd23640cb553b" + integrity sha512-4wAkWLKWbBcXe+lYzorsEbcDSXhvtcvtMAhz9Fh9c7mC4VO+SniaHHVMwl0hPmZhFPLzf+NiAGvU84ZDJsmgSw== -"@next/polyfill-module@10.0.0": - version "10.0.0" - resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-10.0.0.tgz#17f59cb7325a03f23b66b979fccc56d133411b0a" - integrity sha512-FLSwwWQaP/sXjlS7w4YFu+oottbo/bjoh+L+YED7dblsaRJT89ifV+h8zvLvh1hCL7FJUYVar4rehvj/VO5T9w== +"@next/polyfill-module@10.0.1-canary.5": + version "10.0.1-canary.5" + resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-10.0.1-canary.5.tgz#b9046721c03f06dad8434cc1d172688223eaf637" + integrity sha512-YVGgqHcJtK2ZmnZmB10OSKwbWnR8zsZGeigK2+SJwzc2TnirajEg3aFGhOuMHoEvlZCxQU6XkuRxH6KvVLMBrA== -"@next/react-dev-overlay@10.0.0": - version "10.0.0" - resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-10.0.0.tgz#ba1acc79bc9d874f1801a0b312e6a45de74bf425" - integrity sha512-HJ44TJXtaGfGxVtljPECZvqw+GctVvBr60Rsedo5A+wU2GIiycJ8n5yUSdc9UiYTnPuxfJFicJec6kgR6GSWKA== +"@next/react-dev-overlay@10.0.1-canary.5": + version "10.0.1-canary.5" + resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-10.0.1-canary.5.tgz#2d0b9c5ac41903455b425d6c5ae02d88c042be78" + integrity sha512-nUSOzSTtuAi+yOf51sVyF0ijrBFvLH9VnJsG1ENez7eR/rtU+H4xuOJzoMDMgcafD9IHWHH/nChvvf3F7s2cAw== dependencies: "@babel/code-frame" "7.10.4" ally.js "1.4.1" @@ -1127,10 +1127,10 @@ stacktrace-parser "0.1.10" strip-ansi "6.0.0" -"@next/react-refresh-utils@10.0.0": - version "10.0.0" - resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-10.0.0.tgz#45cdd1ad3b55ac442f8431cdc43ff53c3dc44d16" - integrity sha512-V1/oiDWb2C1Do0eZONsKX1aqGNkqCUqxUahIiCjwKFu9c3bps+Ygg4JjtaCd9oycv0KzYImUZnU+nqveFUjxUw== +"@next/react-refresh-utils@10.0.1-canary.5": + version "10.0.1-canary.5" + resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-10.0.1-canary.5.tgz#0dac1826f9c175196f6ec236a00748ffb6f3f661" + integrity sha512-Qzk2fTHTtlQU2JXnqa3mOm56zWeeewL9kwruI/IWb8OeE1Wf784o3CnheXUQl5KnMQ1bTkSVwbX7ARj33QWKlQ== "@npmcli/move-file@^1.0.1": version "1.0.1" @@ -4421,10 +4421,10 @@ next-tick@~1.0.0: resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c" integrity sha1-yobR/ogoFpsBICCOPchCS524NCw= -next@10.0.0: - version "10.0.0" - resolved "https://registry.yarnpkg.com/next/-/next-10.0.0.tgz#fbc82fa69f05bf82fb5c4e160151f38fb9615e99" - integrity sha512-hpJkikt6tqwj7DfD5Mizwc1kDsaaS73TQK6lJL+++Ht8QXIEs+KUqTZULgdMk80mDV2Zhzo9/JYMEranWwAFLA== +next@canary: + version "10.0.1-canary.5" + resolved "https://registry.yarnpkg.com/next/-/next-10.0.1-canary.5.tgz#d8fbb16184f6fe6b4f8e0c52e5a8d38bbd713a7d" + integrity sha512-zK9f8GQ/CrmbBuhHFXPgPuEItuUqFQ3D8VivRVZPTzgcOyI9G6JiXNcm6PeIQ3qLSZBKbNpVwud9SVhSYmknqA== dependencies: "@ampproject/toolbox-optimizer" "2.7.0-alpha.1" "@babel/code-frame" "7.10.4" @@ -4445,10 +4445,10 @@ next@10.0.0: "@babel/runtime" "7.11.2" "@babel/types" "7.11.5" "@hapi/accept" "5.0.1" - "@next/env" "10.0.0" - "@next/polyfill-module" "10.0.0" - "@next/react-dev-overlay" "10.0.0" - "@next/react-refresh-utils" "10.0.0" + "@next/env" "10.0.1-canary.5" + "@next/polyfill-module" "10.0.1-canary.5" + "@next/react-dev-overlay" "10.0.1-canary.5" + "@next/react-refresh-utils" "10.0.1-canary.5" ast-types "0.13.2" babel-plugin-transform-define "2.0.0" babel-plugin-transform-react-remove-prop-types "0.4.24" From b9a7f45e8931d2a4f281a43fd9feb04d1082d4b6 Mon Sep 17 00:00:00 2001 From: Adrien HARNAY Date: Mon, 2 Nov 2020 22:24:56 +0100 Subject: [PATCH 2/6] done for now --- next.config.js | 5 +++ .../markdown-page/MarkdownPage.module.scss | 23 +++---------- src/components/markdown-page/MarkdownPage.tsx | 5 +-- src/components/post-card/PostCard.module.scss | 34 +------------------ src/components/post-card/PostCard.tsx | 3 +- .../components/PostsListHeader.module.scss | 19 ----------- .../components/PostsListHeader.tsx | 18 ++++------ 7 files changed, 21 insertions(+), 86 deletions(-) create mode 100644 next.config.js diff --git a/next.config.js b/next.config.js new file mode 100644 index 0000000..5da1b18 --- /dev/null +++ b/next.config.js @@ -0,0 +1,5 @@ +module.exports = { + images: { + deviceSizes: [320, 420, 768, 1024, 1200, 1440, 1920], + }, +}; diff --git a/src/components/markdown-page/MarkdownPage.module.scss b/src/components/markdown-page/MarkdownPage.module.scss index 1ce4435..b024a89 100644 --- a/src/components/markdown-page/MarkdownPage.module.scss +++ b/src/components/markdown-page/MarkdownPage.module.scss @@ -39,7 +39,7 @@ height: 350px; margin: 0 -4vw 4vw; - > * > * > * { + img { border-radius: 0; } } @@ -48,7 +48,7 @@ height: 500px; margin: 0 -4vw -100px; - > * > * > * { + img { border-radius: 0; } } @@ -57,27 +57,12 @@ height: 800px; margin: 0 -10vw -165px; - > * > * > * { + img { border-radius: 5px; } } - > * { - width: 100% !important; - height: 100% !important; - - > * { - height: 100% !important; - padding-bottom: 0 !important; - > * { - height: 100%; - object-fit: cover; - object-position: center center; - background: $lightgrey center center; - background-size: cover; - } - } - } + position: relative; } .content { diff --git a/src/components/markdown-page/MarkdownPage.tsx b/src/components/markdown-page/MarkdownPage.tsx index f597dc8..3e98def 100644 --- a/src/components/markdown-page/MarkdownPage.tsx +++ b/src/components/markdown-page/MarkdownPage.tsx @@ -30,9 +30,10 @@ const MarkdownPage: FunctionComponent = ({
{cover.split('/').slice(-1)[0].split('.')[0]}
); diff --git a/src/components/post-card/PostCard.module.scss b/src/components/post-card/PostCard.module.scss index e922b38..f6a1007 100644 --- a/src/components/post-card/PostCard.module.scss +++ b/src/components/post-card/PostCard.module.scss @@ -39,40 +39,8 @@ text-decoration: none; .imgBlock { - @include breakpoint($small) { - height: 200px; - border-radius: 5px 5px 0 0; - - > * > * > * { - border-radius: 5px 5px 0 0; - height: 100%; - } - } - - @include breakpoint($mediumAndBig) { - border-radius: 5px 0 0 5px; - - > * > * > * { - border-radius: 5px 0 0 5px; - } - } - flex: 1; - - > * { - width: 100% !important; - height: 100% !important; - - > * { - height: 100% !important; - padding-bottom: 0 !important; - > * { - height: 100%; - object-fit: cover; - object-position: center center; - } - } - } + position: relative; } .contentBlock { diff --git a/src/components/post-card/PostCard.tsx b/src/components/post-card/PostCard.tsx index 4cf80cd..4ea8821 100644 --- a/src/components/post-card/PostCard.tsx +++ b/src/components/post-card/PostCard.tsx @@ -17,8 +17,7 @@ const PostCard: FunctionComponent = ({ post }) => (
{post.cover.split('/').slice(-1)[0].split('.')[0]}
diff --git a/src/layouts/main-layout/components/PostsListHeader.module.scss b/src/layouts/main-layout/components/PostsListHeader.module.scss index f384c49..dffd59c 100644 --- a/src/layouts/main-layout/components/PostsListHeader.module.scss +++ b/src/layouts/main-layout/components/PostsListHeader.module.scss @@ -18,25 +18,6 @@ background: rgba(0, 0, 0, 0.1); } - .coverContainer > * { - position: absolute !important; - z-index: -1; - margin: -12px 0 !important; - width: 100%; - height: 100%; - - > * { - padding-bottom: 0 !important; - width: 100%; - height: 100%; - - > * { - object-fit: cover; - object-position: center center; - } - } - } - .content { @include breakpoint($small) { padding: 14vw 4vw; diff --git a/src/layouts/main-layout/components/PostsListHeader.tsx b/src/layouts/main-layout/components/PostsListHeader.tsx index 77101e0..0330434 100644 --- a/src/layouts/main-layout/components/PostsListHeader.tsx +++ b/src/layouts/main-layout/components/PostsListHeader.tsx @@ -10,17 +10,13 @@ import styles from './PostsListHeader.module.scss'; const PostsListHeader: FunctionComponent = () => { return (
-
- sky full of stars -
+ sky full of stars

Adrien Harnay

From f32030d69e21426a7149d5a2fe8d2b95c870638e Mon Sep 17 00:00:00 2001 From: Adrien HARNAY Date: Mon, 2 Nov 2020 22:36:24 +0100 Subject: [PATCH 3/6] done for now --- .../markdown-page/MarkdownPage.module.scss | 9 +++++++-- src/components/markdown-page/MarkdownPage.tsx | 1 - src/components/post-card/PostCard.module.scss | 5 +++++ .../components/PostsListHeader.module.scss | 17 +++++++++++++++++ .../main-layout/components/PostsListHeader.tsx | 17 ++++++++++------- 5 files changed, 39 insertions(+), 10 deletions(-) diff --git a/src/components/markdown-page/MarkdownPage.module.scss b/src/components/markdown-page/MarkdownPage.module.scss index b024a89..186a764 100644 --- a/src/components/markdown-page/MarkdownPage.module.scss +++ b/src/components/markdown-page/MarkdownPage.module.scss @@ -35,6 +35,13 @@ } .coverContainer { + position: relative; + + img { + object-fit: cover; + object-position: center center; + } + @include breakpoint($small) { height: 350px; margin: 0 -4vw 4vw; @@ -61,8 +68,6 @@ border-radius: 5px; } } - - position: relative; } .content { diff --git a/src/components/markdown-page/MarkdownPage.tsx b/src/components/markdown-page/MarkdownPage.tsx index 3e98def..5d011b8 100644 --- a/src/components/markdown-page/MarkdownPage.tsx +++ b/src/components/markdown-page/MarkdownPage.tsx @@ -33,7 +33,6 @@ const MarkdownPage: FunctionComponent = ({ alt={cover.split('/').slice(-1)[0].split('.')[0]} priority layout="fill" - quality={100} />

); diff --git a/src/components/post-card/PostCard.module.scss b/src/components/post-card/PostCard.module.scss index f6a1007..3c0cb77 100644 --- a/src/components/post-card/PostCard.module.scss +++ b/src/components/post-card/PostCard.module.scss @@ -41,6 +41,11 @@ .imgBlock { flex: 1; position: relative; + + img { + object-fit: cover; + object-position: center center; + } } .contentBlock { diff --git a/src/layouts/main-layout/components/PostsListHeader.module.scss b/src/layouts/main-layout/components/PostsListHeader.module.scss index dffd59c..1ef0c1a 100644 --- a/src/layouts/main-layout/components/PostsListHeader.module.scss +++ b/src/layouts/main-layout/components/PostsListHeader.module.scss @@ -18,6 +18,23 @@ background: rgba(0, 0, 0, 0.1); } + .imageContainer { + .veil { + position: absolute; + background-color: $black; + top: 0; + bottom: 0; + left: 0; + right: 0; + opacity: 0.1; + } + + img { + object-fit: cover; + object-position: center center; + } + } + .content { @include breakpoint($small) { padding: 14vw 4vw; diff --git a/src/layouts/main-layout/components/PostsListHeader.tsx b/src/layouts/main-layout/components/PostsListHeader.tsx index 0330434..a59b000 100644 --- a/src/layouts/main-layout/components/PostsListHeader.tsx +++ b/src/layouts/main-layout/components/PostsListHeader.tsx @@ -10,13 +10,16 @@ import styles from './PostsListHeader.module.scss'; const PostsListHeader: FunctionComponent = () => { return (
- sky full of stars +
+ sky full of stars +
+

Adrien Harnay

From 2dee1fa1208bdd57932658e41dbd39a061779618 Mon Sep 17 00:00:00 2001 From: Adrien HARNAY Date: Mon, 2 Nov 2020 22:51:15 +0100 Subject: [PATCH 4/6] Update PostCard.module.scss --- src/components/post-card/PostCard.module.scss | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/components/post-card/PostCard.module.scss b/src/components/post-card/PostCard.module.scss index 3c0cb77..1d0846b 100644 --- a/src/components/post-card/PostCard.module.scss +++ b/src/components/post-card/PostCard.module.scss @@ -46,6 +46,24 @@ object-fit: cover; object-position: center center; } + + @include breakpoint($small) { + height: 200px; + border-radius: 5px 5px 0 0; + + img { + border-radius: 5px 5px 0 0; + height: 100%; + } + } + + @include breakpoint($mediumAndBig) { + border-radius: 5px 0 0 5px; + + img { + border-radius: 5px 0 0 5px; + } + } } .contentBlock { From 79aa9c5f3526690e00864c9568db9f9565abd99b Mon Sep 17 00:00:00 2001 From: Adrien HARNAY Date: Mon, 2 Nov 2020 22:53:35 +0100 Subject: [PATCH 5/6] Update PostCard.module.scss --- src/components/post-card/PostCard.module.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/post-card/PostCard.module.scss b/src/components/post-card/PostCard.module.scss index 1d0846b..f4b77d9 100644 --- a/src/components/post-card/PostCard.module.scss +++ b/src/components/post-card/PostCard.module.scss @@ -49,6 +49,7 @@ @include breakpoint($small) { height: 200px; + min-height: 200px; border-radius: 5px 5px 0 0; img { From c7f8eba656552a53954341107d57adfd6cbeabc0 Mon Sep 17 00:00:00 2001 From: Adrien HARNAY Date: Mon, 2 Nov 2020 23:09:45 +0100 Subject: [PATCH 6/6] Update 2020-11-02-migrating-your-website-from-gatsby-to-next-js.md --- ...0-11-02-migrating-your-website-from-gatsby-to-next-js.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/posts/2020-11-02-migrating-your-website-from-gatsby-to-next-js.md b/posts/2020-11-02-migrating-your-website-from-gatsby-to-next-js.md index b125395..40d65cf 100644 --- a/posts/2020-11-02-migrating-your-website-from-gatsby-to-next-js.md +++ b/posts/2020-11-02-migrating-your-website-from-gatsby-to-next-js.md @@ -15,7 +15,11 @@ One of the most important things to me when I browse the web is the way images l [gatsby-image](https://www.gatsbyjs.com/plugins/gatsby-image/) does the same, and actually I love it so much I wrote a webpack loader so that I could use it on any project ([@brigad/ideal-image-loader](https://github.com/Brigad/ideal-image-loader)). Next.js also has an [image component](https://nextjs.org/docs/api-reference/next/image) since v10, which is the latest version to date. -I have tried migrating to the new component, but either the images ended up blurry on the screen, or were not optimized (600kb vs 200kb for my hero picture, Next.js VS Gatsby). Also, there is no progressive loading as there is with gatsby-image. I know it is still a work in progress with pending PRs, so I will wait to see if the Next.js can be improved or if I need to use gatsby-image. +I have tried migrating to the new component, but either the images ended up blurry on the screen, or were not optimized (600kb vs 200kb for my hero picture, Next.js VS Gatsby). + +Edit: I have used the new `layout` prop, and it is working great! I have also set the `images.deviceSizes` property in `next.configs.js`. You can read my PR on upgrading to the new `layout` prop [here](https://github.com/adrienharnay/website/pull/5/files). + +One downside though, next/image doesn't have the same progressive loading feature as gatsby-image. # Static assets