Lesezeit eines Blog Posts mit Gatsby einblenden (Time to read)

Eine Minute Lesezeit
Lesezeit eines Blog Posts mit Gatsby einblenden (Time to read)

Warum die Lesezeit eines Blog Posts angeben?

Wie wertvoll Zeit ist, weiß jeder. Das bedeutet, dass man sie sich gut einteilt. Deswegen sieht man auf Websites immer häufiger eine Angabe über die Lesezeit. Ich mag euch hier kurz zeigen, wie ich es auf dieser Seite umgesetzt habe.

Die Daten sind schon da. Danke, Gatsby Remark

Besonders nett ist, dass wir Gatsby keine neuen Tricks beibringen müssen. Die Daten sind schon da. Hier eine beispielhafte Query:

    query MyQuery {
      allMarkdownRemark {
        nodes {
          timeToRead
          frontmatter {
            title
          }
        }
      }
    }

Die Response schaut darauf hin so aus:

    {
      "data": {
        "allMarkdownRemark": {
          "nodes": [
            {
              "timeToRead": 1,
              "frontmatter": {
                "title": "Webentwicklung mit Gatsby und 🌶️"
              }
            },
            {
              "timeToRead": 2,
              "frontmatter": {
                "title": "Komfortable und sichere externe Links via Gatsby Remark"
              }
            },
            {
              "timeToRead": 37,
              "frontmatter": {
                "title": "Datenschutzerklärung"
              }
            },
            // ...
          ]
        }
      }
    }

Damit brauchen wir also nur noch die Komponente zu bauen und etwas aufzuhübschen. Ich habe dafür eine headline.js Komponente erstellt. Diese hat die Eigenschaften (Props) typeundefined titleundefined publishedundefined timeToReadundefined image. Wichtig für unser Thema ist die timeToRead Prop. Damit es etwas hübscher dargestellt wird, formuliere ich etwas aus:

const Headline = ({ type, title, published, timeToRead, image }) => { 

  let readTimeString = ""
  if (timeToRead === 1) {
    readTimeString = "Eine Minute Lesezeit"
  } else {
    readTimeString = timeToRead + " Minuten Lesezeit"
  }
  // ...
  
}

Das JSX sieht dann so aus:

<HeaderEl>
  <h1>{title}</h1>
  <div className="meta">
    {type === "post" && <span>{readTimeString}</span>}{" "}
  {//...}
  </div>
</HeaderEl>

Und das wars dann auch schon. Verbesserungsvorschläge oder Feedback? Fragen? Schreibt mir: mail@sebastiannoell.de