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/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/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 diff --git a/src/components/markdown-page/MarkdownPage.module.scss b/src/components/markdown-page/MarkdownPage.module.scss index 1ce4435..186a764 100644 --- a/src/components/markdown-page/MarkdownPage.module.scss +++ b/src/components/markdown-page/MarkdownPage.module.scss @@ -35,11 +35,18 @@ } .coverContainer { + position: relative; + + img { + object-fit: cover; + object-position: center center; + } + @include breakpoint($small) { height: 350px; margin: 0 -4vw 4vw; - > * > * > * { + img { border-radius: 0; } } @@ -48,7 +55,7 @@ height: 500px; margin: 0 -4vw -100px; - > * > * > * { + img { border-radius: 0; } } @@ -57,27 +64,10 @@ 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; - } - } - } } .content { diff --git a/src/components/markdown-page/MarkdownPage.tsx b/src/components/markdown-page/MarkdownPage.tsx index f597dc8..5d011b8 100644 --- a/src/components/markdown-page/MarkdownPage.tsx +++ b/src/components/markdown-page/MarkdownPage.tsx @@ -30,9 +30,9 @@ 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..f4b77d9 100644 --- a/src/components/post-card/PostCard.module.scss +++ b/src/components/post-card/PostCard.module.scss @@ -39,11 +39,20 @@ text-decoration: none; .imgBlock { + flex: 1; + position: relative; + + img { + object-fit: cover; + object-position: center center; + } + @include breakpoint($small) { height: 200px; + min-height: 200px; border-radius: 5px 5px 0 0; - > * > * > * { + img { border-radius: 5px 5px 0 0; height: 100%; } @@ -52,27 +61,10 @@ @include breakpoint($mediumAndBig) { border-radius: 5px 0 0 5px; - > * > * > * { + img { 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; - } - } - } } .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 d48b68e..1ef0c1a 100644 --- a/src/layouts/main-layout/components/PostsListHeader.module.scss +++ b/src/layouts/main-layout/components/PostsListHeader.module.scss @@ -18,23 +18,20 @@ background: rgba(0, 0, 0, 0.1); } - .coverContainer > * { - overflow: hidden; - position: absolute !important; - z-index: -1; - margin: -12px 0; - width: 100%; - height: 100%; - - > * { - padding-bottom: 0 !important; - width: 100%; - height: 100%; - - > * { - object-fit: cover; - object-position: center center; - } + .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; } } diff --git a/src/layouts/main-layout/components/PostsListHeader.tsx b/src/layouts/main-layout/components/PostsListHeader.tsx index 2544524..a59b000 100644 --- a/src/layouts/main-layout/components/PostsListHeader.tsx +++ b/src/layouts/main-layout/components/PostsListHeader.tsx @@ -10,18 +10,15 @@ import styles from './PostsListHeader.module.scss'; const PostsListHeader: FunctionComponent = () => { return (
-
+
sky full of stars +

Adrien Harnay

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"