make lighthouse happy :)

README.md

@@ -7,7 +7,6 @@ Create a [Remix](https://remix.run/) blog powered by [Contentful](https://www.co
 ![Screenshot](screenshot.png)
 
 ## Getting started
-See our [official Contentful getting started guide](https://www.contentful.com/developers/docs/tutorials/general/get-started/).
 
 ### Get the source code and install dependencies
 ```shell

app/components/article-preview.tsx

@@ -3,11 +3,16 @@ import {Link} from 'remix'
 import {ContentfulImage} from "~/components/contentful-image";
 import {CssModuleWrapper} from "~/components/css-module-wrapper";
 import {toReadableDate} from "~/utils/to-readable-date";
+import {TypePostPreview} from "../../types/contentful-graphql-types";
 
 import Container from './container'
 import Tags from './tags'
 
-const ArticlePreview = ({posts}) => {
+type Props = {
+    posts: TypePostPreview[]
+}
+
+const ArticlePreview: React.FC<Props> = ({posts}) => {
     if (!posts) return null
     if (!Array.isArray(posts)) return null
 
@@ -21,22 +26,23 @@ const ArticlePreview = ({posts}) => {
                                 <Link to={`/blog/${post.slug}`} className={"link"} prefetch={"intent"}>
                                     <ContentfulImage
                                         image={post.heroImage}
-                                        width={424}
+                                        width={363}
                                         height={212}
                                         quality={50}
                                         format={"webp"}
+                                        behaviour={"thumb"}
                                     />
                                     <h2 className={"title"}>{post.title}</h2>
                                 </Link>
-                                <div
+                                <section
                                     dangerouslySetInnerHTML={{
                                         __html: post.description,
                                     }}
                                 />
-                                <div className={"meta"}>
+                                <section className={"meta"}>
                                     <small className="meta">{toReadableDate(post.publishDate)}</small>
-                                    <Tags tags={post.tags}/>
-                                </div>
+                                    {post.tags && <Tags tags={post.tags}/>}
+                                </section>
                             </li>
                         )
                     })}

app/components/container.tsx

@@ -5,7 +5,7 @@ type Props = {
     children?: React.ReactNode
 }
 
-const Container:React.FC<Props> = ({ children, as = 'div' }) => {
+const Container:React.FC<Props> = ({ children, as = 'section' }) => {
   const Tag = as
   return (
     <Tag

app/components/contentful-image.tsx

@@ -16,11 +16,6 @@ declare namespace ContentfulImageTransform {
         | 'faces'
     type Format = 'jpg' | 'progressive' | 'gif' | 'png' | '8bit' | 'webp' | 'avif'
     type Fit = 'pad' | 'fill' | 'scale' | 'crop' | 'thumb'
-    type Query = {
-        w?: string
-        h?: string
-        fit?: Fit
-    }
 }
 
 type MediaQuery = Record<number, {
@@ -70,7 +65,7 @@ const ContentfulImage: React.FC<Props> = (
         decoding = 'auto'
     }) => {
 
-    let mimeType = '' // extract mimeType from image.url
+    let mimeType = image.contentType // extract mimeType from image.url
     let query = {};
 
     // should only allow ContentfulImage.Query props
@@ -106,14 +101,14 @@ const ContentfulImage: React.FC<Props> = (
         if (format === '8bit') {
             addToQuery({'fm': 'png'})
             addToQuery({'fl': 'png8'})
-            mimeType = 'png'
+            mimeType = 'image/png'
         } else if (format === 'progressive') {
             addToQuery({'fm': 'jpg'})
             addToQuery({'fl': 'progressive'})
-            mimeType = 'jpg'
+            mimeType = 'image/jpg'
         } else {
             addToQuery({[imagePropsMap['format']]: format.toString()})
-            mimeType = format
+            mimeType = `image/${format}`
         }
     }
 
@@ -129,10 +124,10 @@ const ContentfulImage: React.FC<Props> = (
 
     return (
         <picture>
-            <source srcSet={transformSrc} type={`image/${mimeType}`}/>
+            <source srcSet={transformSrc} type={`${mimeType}`}/>
             <img
                 src={image.url}
-                alt={alt}
+                alt={alt || image.title}
                 decoding={decoding}
                 width={width}
                 height={height}

app/components/css-module-wrapper.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 
 type Props = {
-	className:string
+    className: string
 };
 
 const CssModuleWrapper: React.FC<Props> = ({className, children}) => {
@@ -12,4 +12,4 @@ const CssModuleWrapper: React.FC<Props> = ({className, children}) => {
     );
 };
 
-export { CssModuleWrapper };
+export {CssModuleWrapper};

app/components/hero.tsx

@@ -11,23 +11,23 @@ type Props = {
 
 const Hero: React.FC<Props> = ({image, title, content}) => (
     <CssModuleWrapper className={"hero-module"}>
-        <div className={"hero"}>
+        <section className={"hero"}>
             {image && (
-                <div className={'image'}>
+                <figure className={'image'}>
                 <ContentfulImage
                     alt={title}
                     image={image}
                     quality={50}
-                    format={'webp'}
+                    format={'avif'}
                     width={1920}
                 />
-                </div>
+                </figure>
             )}
             <div className={"details"}>
                 <h1 className={"title"}>{title}</h1>
                 {content && <p className={"content"}>{content}</p>}
             </div>
-        </div>
+        </section>
     </CssModuleWrapper>
 )
 

app/components/navigation.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import {Link} from 'remix'
 import {CssModuleWrapper} from "~/components/css-module-wrapper";
 
-const Navigation = () => (
+const Navigation: React.FC = () => (
     <CssModuleWrapper className={"navigation-module"}>
         <nav role="navigation" className={"container"} aria-label="Main">
             <Link to="/" className={"logoLink"}>

app/components/tags.tsx

@@ -1,17 +1,18 @@
 import React from 'react'
 import {CssModuleWrapper} from "~/components/css-module-wrapper";
 
-const Tags = ({tags}) =>
-    tags?.length > 0 ? (
+type Props = {
+    tags: string[]
+}
+
+const Tags: React.FC<Props> = ({tags = []}) => {
+    return (
         <CssModuleWrapper className={"tags-module"}>
             <small className={"tags"}>
-                {tags.map((tag) => (
-                    <div key={tag} className={"tag"}>
-                        {tag}
-                    </div>
-                ))}
+                {tags.map((tag) => <div key={tag} className={"tag"}>{tag}</div>)}
             </small>
         </CssModuleWrapper>
-    ) : <></>
+    )
+}
 
 export default Tags

app/root.tsx

@@ -24,24 +24,22 @@ export const links = () => [
 
 export const meta: MetaFunction = ({parentsData, params}) => {
 
-    const description = "default description"
+    const description = "Remix starter for a Contentful blog (template) project"
     const content = "default description"
-    const image = ""
-    const title = ""
+    const keywords = "Contentful, Blog, Starter, Remix"
+    const title = "Contentful Remix Blog Starter"
 
     return {
-        titel: title,
-        name: description,
-        "image": image,
+        title,
+        description,
+        keywords,
+
         "og:title": title,
         "og:description": description,
         "og:type": `website`,
-        "og:image": image,
-        "twitter:card": `summary_large_image`,
-        "twitter:creator": content,
+
         "twitter:title": title,
         "twitter:description": description,
-
     }
 }
 

app/routes/blog.$post.tsx

@@ -29,10 +29,10 @@ export const meta: MetaFunction = ({parentsData, params, data, location}) => {
     const post: TypePostDetail = data.post
     const description = post.description
     const image = post.heroImage.url
-    const title = post.title
+    const title = "Contentful Remix Blog Starter - " + post.title
 
     return {
-        titel: title,
+        title: title,
         "image": image,
         "og:title": title,
         "og:description": description,
@@ -47,7 +47,7 @@ export default function BlogPost() {
     const document = useReactComponentFromDocument(body)
 
     return (
-        <div className={"blog-post"}>
+        <article className={"blog-post"}>
             <Hero
                 image={post.heroImage}
                 title={post.title}
@@ -64,6 +64,6 @@ export default function BlogPost() {
                     <Tags tags={post.tags}/>
                 </div>
             </div>
-        </div>
+        </article>
     )
 }

app/routes/blog.tsx

@@ -6,7 +6,7 @@ import ArticlePreview from "~/components/article-preview";
 import Hero from "~/components/hero";
 import {TypePostPreview} from "../../types/contentful-graphql-types";
 
-type LoaderData = { posts: TypePostPreview };
+type LoaderData = { posts: TypePostPreview[] };
 
 export const loader: LoaderFunction = async ({}) => {
     return json({

app/styles/modules/article-preview.module.css

@@ -1,30 +1,30 @@
 .article-module .article-list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  grid-gap: var(--space-3xl);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    grid-gap: var(--space-3xl);
 }
 
 .article-module .title {
-  display: inline-block;
-  font-size: var(--text-lg);
-  margin-bottom: var(--space-xs);
-  margin-top: var(--space-lg);
-  border-bottom: 1.5px solid transparent;
+    display: inline-block;
+    font-size: var(--text-lg);
+    margin-bottom: var(--space-xs);
+    margin-top: var(--space-lg);
+    border-bottom: 1.5px solid transparent;
 }
 
 .article-module .link {
-  text-decoration: none;
+    text-decoration: none;
 }
 
 .article-module .link:hover .title {
-  border-bottom-color: var(--primary);
+    border-bottom-color: var(--primary);
 }
 
 .article-module .meta {
     margin-top: var(--space-md);
-  display: flex;
-  justify-content: space-between;
+    display: flex;
+    justify-content: space-between;
 }

app/styles/modules/tags.module.css

@@ -1,11 +1,12 @@
 .tags-module .tags {
-  display: flex;
-  gap: var(--space-md);
+    display: flex;
+    gap: var(--space-md);
+    margin-top: var(--space-md);
 }
 
 .tags-module .tag {
-  background-color: var(--black-fade-5);
-  border-radius: var(--radius-sm);
-  line-height: var(--solid);
-  padding: var(--space-sm) var(--space-md);
+    background-color: var(--black-fade-5);
+    border-radius: var(--radius-sm);
+    line-height: var(--solid);
+    padding: var(--space-sm) var(--space-md);
 }

app/utils/to-readable-date.ts

@@ -1,4 +1,4 @@
 export function toReadableDate(dateString: string): string {
     const options: Intl.DateTimeFormatOptions = {year: "numeric", month: "long", day: "numeric"}
-    return new Date(dateString).toLocaleDateString(undefined, options)
+    return new Date(dateString).toLocaleDateString(["de-DE"], options)
 }