Using html img component for now. There seems to be a bug in the opti…

…mized-images library: cyrilwanner/next-optimized-images#186
joeplaa-com · Sep 10, 2020 · 7f53f7f · 7f53f7f
1 parent 50af17e
commit 7f53f7f
Show file tree

Hide file tree

Showing 12 changed files with 63 additions and 50 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,8 +1,8 @@
 {
-  "presets": [
-    "next/babel"
-  ],
-  "plugins": [
-    "react-optimized-image/plugin"
-  ]
+    "presets": [
+        "next/babel"
+    ],
+    "plugins": [
+        "react-optimized-image/plugin"
+    ]
 }
diff --git a/images.config.js 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],
+        },
+    },
+};
diff --git 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
@@ -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]} />
+                    />
                     <div className='overlay'>
                         <h1>{siteInfo.HomeTitle}</h1>
                     </div>
                 </div>
                 <Container fluid>
                     <CardColumns>
-                        <Card>
+                        <Card outline color="primary">
                             <CardBody>
                                 <CardTitle><h4>What is Joeplaa?</h4></CardTitle>
                                 <CardText>
-                                    Joeplaa, pronounce "you-p-laah", is an abbreviation of my full name: <strong>Joe</strong>p van de <strong>Laa</strong>rschot.
-                                    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 &quot;you-p-laah&quot;, is an abbreviation of my full name: <strong>Joe</strong>p van de <strong>Laa</strong>rschot.
+                                    Initially I started using it to shorten my e-mail address, but it turned into my &quot;official&quot; handle @joeplaa everywhere on the web. So obviously I had to use for this website too.
                                 </CardText>
                             </CardBody>
                         </Card>
 
-                        <Card>
+                        <Card outline color="primary">
                             <CardBody>
                                 <CardTitle><h4>Who is Joeplaa?</h4></CardTitle>
                                 <CardText>
-                                    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&apos;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 <a href='https://en.wikipedia.org/wiki/Eindhoven' target='_blank' rel='noopener noreferrer'>Eindhoven in The Netherlands</a>, where I went to <a href='https://www.tue.nl/' target='_blank' rel='noopener noreferrer'>university</a> 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: <a href='https://www.jodibooks.com' target='_blank' rel='noopener noreferrer'>jodiBooks</a>.
+                                    After working as a mechanical engineer for 7.5 years, I quit my &quot;dayjob&quot; and started working full time on my own company: <a href='https://www.jodibooks.com' target='_blank' rel='noopener noreferrer'>jodiBooks</a>.
                                 </CardText>
                             </CardBody>
                         </Card>
 
-                        <Card>
+                        <Card outline color="primary">
                             <CardBody>
                                 <CardTitle><h4>Why joeplaa.com?</h4></CardTitle>
                                 <CardText>
-                                    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&apos;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.
                                 </CardText>
                                 <CardText>
                                     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() {
                                 <CardTitle><h5><Link href={navigation.blog}><a>{data.Blog}</a></Link></h5></CardTitle>
                                 <CardText>
                                     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&apos;t have enough time for at the moment. But there&apos;s a lot of stuff I&apos;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.
                                 </CardText>
                                 <CardText>
@@ -114,8 +113,8 @@ export default function Home() {
                                 <CardTitle><h5><Link href={navigation.howto}><a>{data.Howto}</a></Link></h5></CardTitle>
                                 <CardText>
                                     Next to designing websites and programming, I also host the <a href='https://www.jodibooks.com' target='_blank' rel='noopener noreferrer'>jodiBooks</a> 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&apos;m doing it professionally.
+                                    In these howto&apos;s I share some of the hurdles I encounter and how I crossed them.
                                 </CardText>
                                 <CardText>
                                     Subjects are: Ubuntu, file-sharing, virtual machines and website hosting.
@@ -127,21 +126,27 @@ export default function Home() {
                             <CardBody>
                                 <CardTitle><h5><Link href={navigation.recommended}><a>{data.Recommended}</a></Link></h5></CardTitle>
                                 <CardText>
-                                    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&apos;ve seen a video on YouTube or read a book. In the recommended section I share the most influential and thought-provoking ones I&apos;ve encountered.
                                 </CardText>
                                 <CardText>
-                                    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&apos;t mean I (still) fully support the ideas put forward in them. I grow, learn and change my mind and I&apos;ll very probably have to keep doing that and I hope you will join me.
                                 </CardText>
                             </CardBody>
                         </Card>
                     </CardColumns>
 
-                    <Container>
-                        <blockquote className="blockquote">
-                            <small className="mb-0">* "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?"</small>
-                            <footer className="blockquote-footer">Richard Dawkins: <cite title="Source Title"><a href='https://www.goodreads.com/work/quotes/3323916-unweaving-the-rainbow-science-delusion-and-the-appetite-for-wonder' target='_blank' rel='noopener noreferrer'>Unweaving the Rainbow</a></cite></footer>.
-                        </blockquote>
-                    </Container>
+                    <Row>
+                        <Col md='6' lg='4' className='mx-auto'>
+                            <Card className='mb-2'>
+                                <CardBody>
+                                    <blockquote className='blockquote'>
+                                        <small className='mb-0'>* <em>&quot;Isn&apos;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?&quot;</em></small>
+                                        <footer className='blockquote-footer'>Richard Dawkins: <cite title='Source Title'><a href='https://www.goodreads.com/work/quotes/3323916-unweaving-the-rainbow-science-delusion-and-the-appetite-for-wonder' target='_blank' rel='noopener noreferrer'>Unweaving the Rainbow</a>.</cite></footer>
+                                    </blockquote>
+                                </CardBody>
+                            </Card>
+                        </Col>
+                    </Row>
                 </Container >
             </Layout >
         </>

diff --git 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
@@ -5,7 +5,7 @@ import { AuthorProps } from '../types'
 export default function Avatar({ name, picture }: AuthorProps) {
     return (
         <div>
-            <Img src={images[picture]} alt={name} />
+            <img src={images[picture]} alt={name} />
             <div>{name}</div>
         </div>
     );

diff --git 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 = (
-        <Img
-            src={images[src]}
+        <img
+            src={images[picture]}
             alt={`Cover Image for ${title}`}
+            className='img-fluid'
         />
     );
     return (

diff --git a/src/components/hero-post.tsx b/src/components/hero-post.tsx
@@ -28,7 +28,7 @@ export default function HeroPost({
                         <DateFormater dateString={date} />
                     </CardSubtitle>
                 </CardBody>
-                <CoverImage title={title} src={coverImage} slug={slug} />
+                <CoverImage title={title} picture={coverImage} slug={slug} />
                 <CardBody>
                     <Avatar name={author.name} picture={author.picture} />
                     <CardText>{excerpt}</CardText>

diff --git a/src/components/more-stories.tsx b/src/components/more-stories.tsx
@@ -8,7 +8,7 @@ export default function MoreStories({ posts }: { posts: Array<PostTypeProps> } )
             <h2>
                 More Stories
             </h2>
-            <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+            <div>
                 {posts.map((post) => (
                     <PostPreview
                         key={post.slug}

diff --git a/src/components/post-preview.tsx b/src/components/post-preview.tsx
@@ -15,7 +15,7 @@ export default function PostPreview({
     return (
         <div>
             <div className='mb-5'>
-                <CoverImage slug={slug} title={title} src={coverImage} />
+                <CoverImage slug={slug} title={title} picture={coverImage} />
             </div>
             <h3 className='text-3xl mb-3 leading-snug'>
                 <Link as={`/posts/${slug}`} href='/posts/[slug]'>

diff --git 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
@@ -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 {