From 7f53f7f318e87c4952cee2699d8b71c38ae4182a Mon Sep 17 00:00:00 2001 From: Joep van de Laarschot Date: Thu, 10 Sep 2020 15:49:51 +0200 Subject: [PATCH] Using html img component for now. There seems to be a bug in the optimized-images library: https://github.com/cyrilwanner/next-optimized-images/issues/186 --- .babelrc | 12 ++++---- images.config.js | 13 +++++++++ next.config.js | 14 +++------- pages/home.tsx | 49 ++++++++++++++++++--------------- src/build/requireImages.js | 1 + src/components/avatar.tsx | 2 +- src/components/cover-image.tsx | 7 +++-- src/components/hero-post.tsx | 2 +- src/components/more-stories.tsx | 2 +- src/components/post-preview.tsx | 2 +- src/types/index.ts | 2 +- styles/site.scss | 7 ++--- 12 files changed, 63 insertions(+), 50 deletions(-) create mode 100644 images.config.js diff --git a/.babelrc b/.babelrc index f7fd708..d80f6e3 100644 --- a/.babelrc +++ b/.babelrc @@ -1,8 +1,8 @@ { - "presets": [ - "next/babel" - ], - "plugins": [ - "react-optimized-image/plugin" - ] + "presets": [ + "next/babel" + ], + "plugins": [ + "react-optimized-image/plugin" + ] } \ No newline at end of file diff --git a/images.config.js b/images.config.js new file mode 100644 index 0000000..6341133 --- /dev/null +++ b/images.config.js @@ -0,0 +1,13 @@ +/* eslint-disable no-undef */ +module.exports = { + default: { + sizes: [320, 480, 640, 960, 1280, 1600, 1920], + webp: true, + }, + types: { + thumbnail: { + sizes: [200, 400, 600], + breakpoints: [800], + }, + }, +}; \ No newline at end of file diff --git a/next.config.js b/next.config.js index c5d1b08..a5d9e4d 100644 --- a/next.config.js +++ b/next.config.js @@ -19,19 +19,13 @@ module.exports = withBundleAnalyzer( }, // these are the default values so you don't have to provide them if they are good enough for your use-case. // but you can overwrite them here with any valid value you want. - handleImages: ['jpg', 'jpeg', 'png', 'svg', 'webp'], - inlineImageLimit: 8192, - imagesFolder: 'src/assets', - imagesName: '[name]-[hash].[ext]', - imagesOutputPath: 'static/assets', - optimizeImages: true, - optimizeImagesInDev: true, - removeOriginalExtension: true, + handleImages: ['ico', 'jpg', 'jpeg', 'png', 'svg', 'webp'], + outputPath: 'static/assets', mozjpeg: { quality: 80 }, - optipng: { - optimizationLevel: 3 + oxipng: { + level: 3 }, svgo: { // enable/disable svgo plugins here diff --git a/pages/home.tsx b/pages/home.tsx index dd1392a..cfc9add 100644 --- a/pages/home.tsx +++ b/pages/home.tsx @@ -1,7 +1,7 @@ import { NextSeo } from 'next-seo' import Link from 'next/link' import Img from 'react-optimized-image' -import { Card, CardBody, CardColumns, CardTitle, CardText, Container } from 'reactstrap' +import { Card, CardBody, CardColumns, CardTitle, CardText, Col, Container, Row } from 'reactstrap' import Layout from '../src/components/layout' import { data, siteInfo, navigation } from '../src/lib/data' import { getAge } from '../src/lib/getAge' @@ -39,40 +39,39 @@ export default function Home() { src={require('../src/assets/home-banner-beach.jpg')} alt={siteInfo.HomeTitle + '-banner'} className='img-fluid' - webp - sizes={[320, 480, 640, 960, 1280, 1600, 1920]} /> + />

{siteInfo.HomeTitle}

- +

What is Joeplaa?

 - Joeplaa, pronounce "you-p-laah", is an abbreviation of my full name: Joep van de Laarschot. - Initially I started using it to shorten my e-mail address, but it turned into my "official" handle @joeplaa everywhere on the web. So obviously I had to use for this website too. + Joeplaa, pronounce "you-p-laah", is an abbreviation of my full name: Joep van de Laarschot. + Initially I started using it to shorten my e-mail address, but it turned into my "official" handle @joeplaa everywhere on the web. So obviously I had to use for this website too. - +

Who is Joeplaa?

 - I'm Joep, a {getAge('1985/01/14')} year old guy, trying to figure out what he wants to achieve with his time in the sun*. + I'm Joep, a {getAge('1985/01/14')} year old guy, trying to figure out what he wants to achieve with his time in the sun*. Currently I live in Eindhoven in The Netherlands, where I went to university to study mechanical engineering. - After working as a mechanical engineer for 7.5 years, I quit my "dayjob" and started working full time on my own company: jodiBooks. + After working as a mechanical engineer for 7.5 years, I quit my "dayjob" and started working full time on my own company: jodiBooks. - +

Why joeplaa.com?

 - I've originally started joeplaa.com as my personal blog. I wanted to have a place where I could write about anything that I was interested in and you can still find my blog here. + I've originally started joeplaa.com as my personal blog. I wanted to have a place where I could write about anything that I was interested in and you can still find my blog here. More importantly, with this new website, joeplaa.com 2.0, I want to show what I can do. It both is and contains my portfolio. Have a look around and let me know if you like my work. @@ -85,7 +84,7 @@ export default function Home() {
{data.Blog}
 The reason I started this website: I wanted a blog. When starting the focus was on goals, mindset, nutrition and health. Figuring out what I have to do and eat to stay healthy, however, has proven to be a big challenge. - A challenge I don't have enough time for at the moment. But there's a lot of stuff I'm trying to understand about myself, humanity, the world and the universe and I learned that talking about them or writing them down really helps. + A challenge I don't have enough time for at the moment. But there's a lot of stuff I'm trying to understand about myself, humanity, the world and the universe and I learned that talking about them or writing them down really helps. Giving words to my thought makes them more tangible, concrete and well better. They get more articulated and thought-through. @@ -114,8 +113,8 @@ export default function Home() {
{data.Howto}
 Next to designing websites and programming, I also host the jodiBooks software. - Ever since I bought my first computer, I have been learning how to use it as a server. That was more than 15 year ago. I learned a lot through all those year and now I'm doing it professionally. - In these howto's I share some of the hurdles I encounter and how I crossed them. + Ever since I bought my first computer, I have been learning how to use it as a server. That was more than 15 year ago. I learned a lot through all those year and now I'm doing it professionally. + In these howto's I share some of the hurdles I encounter and how I crossed them. Subjects are: Ubuntu, file-sharing, virtual machines and website hosting. @@ -127,21 +126,27 @@ export default function Home() {
{data.Recommended}
 - The ideas I write about in my blog all started somewhere. Mostly after I've seen a video on YouTube or read a book. In the recommended section I share the most influential and thought-provoking ones I've encountered. + The ideas I write about in my blog all started somewhere. Mostly after I've seen a video on YouTube or read a book. In the recommended section I share the most influential and thought-provoking ones I've encountered. - That doesn't mean I (still) fully support the ideas put forward in them. I grow, learn and change my mind and I'll very probably have to keep doing that and I hope you will join me. + That doesn't mean I (still) fully support the ideas put forward in them. I grow, learn and change my mind and I'll very probably have to keep doing that and I hope you will join me. - -
- * "Isn't it a noble, an enlightened way of spending our brief time in the sun, to work at understanding the universe and how we have come to wake up in it?" - . -
- + + + + +
+ * "Isn't it a noble, an enlightened way of spending our brief time in the sun, to work at understanding the universe and how we have come to wake up in it?" + +
+ + + + diff --git a/src/build/requireImages.js b/src/build/requireImages.js index 27992e0..5d14446 100644 --- a/src/build/requireImages.js +++ b/src/build/requireImages.js @@ -29,6 +29,7 @@ function getFilesFromDir (dir, fileTypes) { } // #2. Create image object +// https://stackoverflow.com/questions/38374344/require-file-with-a-variable-in-react-js function printRequireLines (filePaths) { let file; let key; diff --git a/src/components/avatar.tsx b/src/components/avatar.tsx index e48d43f..e42fb69 100644 --- a/src/components/avatar.tsx +++ b/src/components/avatar.tsx @@ -5,7 +5,7 @@ import { AuthorProps } from '../types' export default function Avatar({ name, picture }: AuthorProps) { return (
- {name} + {name}
{name}
); diff --git a/src/components/cover-image.tsx b/src/components/cover-image.tsx index 408fcb4..4ad0fb3 100644 --- a/src/components/cover-image.tsx +++ b/src/components/cover-image.tsx @@ -3,11 +3,12 @@ import Img from 'react-optimized-image' import { images } from '../lib/images' import { CoverImageProps } from '../types' -export default function CoverImage({ title, src, slug }: CoverImageProps) { +export default function CoverImage({ title, picture, slug }: CoverImageProps) { const image = ( - {`Cover ); return ( diff --git a/src/components/hero-post.tsx b/src/components/hero-post.tsx index 1a73625..ec377c2 100644 --- a/src/components/hero-post.tsx +++ b/src/components/hero-post.tsx @@ -28,7 +28,7 @@ export default function HeroPost({ - + {excerpt} diff --git a/src/components/more-stories.tsx b/src/components/more-stories.tsx index 6f8e9d2..8406588 100644 --- a/src/components/more-stories.tsx +++ b/src/components/more-stories.tsx @@ -8,7 +8,7 @@ export default function MoreStories({ posts }: { posts: Array } )

More Stories

-
+
{posts.map((post) => (
- +

diff --git a/src/types/index.ts b/src/types/index.ts index 98df0f6..0afbe6d 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -9,7 +9,7 @@ export type AuthorProps = { export type CoverImageProps = { slug: string - src: string + picture: string title: string } diff --git a/styles/site.scss b/styles/site.scss index 8569606..8e81acb 100644 --- a/styles/site.scss +++ b/styles/site.scss @@ -50,7 +50,8 @@ $reds: map-merge( /* or, use an existing variable */ $theme-colors: ( primary: $red-full, - secondary: $gray-100 + secondary: $gray-100, + gray-light: $gray-200 ); $body-bg: $gray-100; @@ -122,10 +123,8 @@ $link-light-hover-color: darken($link-light-color, 15%); $card-column-sizes: ( xs: 1, - sm: 1, md: 2, - lg: 3, - xl: 4 + lg: 3 ); @each $breakpoint-size, $column-count in $card-column-sizes {