feat: optimize post images, closes #30

data/posts/2019-07-20-How-to-Set-up-Port-Forwarding-with-iptables.md

@@ -6,7 +6,7 @@ slug: port-forwarding-with-iptables
 tags:
   - networking
   - guide
-cover: "https://source.unsplash.com/40XgDxBfYXM/2000x600"
+cover: "https://images.unsplash.com/photo-1544197150-b99a580bb7a8"
 ---
 
 If you have a server on a private network and need to access it from the outside (but can't simply give it an external IP) you can use port forwarding on an externally accessible server to get around it. Once set up it simply sends all incoming packets that meet certain criteria to a new IP. That way you can connect to a public server in order to communicate with the private server.

next.config.js

@@ -7,6 +7,9 @@ module.exports = withPrefresh({
   experimental: {
     jsconfigPaths: true, // enables it for both jsconfig.json and tsconfig.json
   },
+  images: {
+    domains: ["images.unsplash.com"],
+  },
   // preact config
   webpack(config, { dev, isServer }) {
     // Move Preact into the framework chunk instead of duplicating in routes:

pages/posts/[slug].tsx

@@ -1,32 +1,37 @@
 import { getAllPosts, getPost, writePostsSpecToFS } from "lib";
+import type { GetStaticProps, GetStaticPaths } from "next";
 
 import React from "react";
-import type { GetStaticProps, GetStaticPaths } from "next";
-import { HomeButton, Tags, Body } from "components";
+import { HomeButton, Body } from "components";
+import Image from "next/image";
 
 type PostProps = {
   meta: PostMetadata;
   content: string;
 };
 
 const Post: React.FC<PostProps> = ({
-  meta: { title, cover, date, readTime, tags, description },
+  meta: { title, cover, date, readTime, description },
   content,
 }) => (
   <>
     <header>
-      <div className="relative overflow-hidden text-center text-white max-h-cover">
+      <div className="relative overflow-hidden text-center text-white max-h-cover min-h-cover">
         <div className="absolute inset-x-0 bottom-0 z-10 max-w-xl px-6 pb-16 mx-auto text-center md:max-w-3xl xl:max-w-4xl text-shadow-lg">
           <p className="text-sm uppercase">{readTime}</p>
           <h1>{title}</h1>
           <p>{date}</p>
         </div>
-        <img
-          className="filter-blur"
-          style={{ transform: "scale(1.03)" }}
-          src={cover}
-          alt="Post cover"
-        />
+        {cover && (
+          <Image
+            className="filter-blur"
+            src={cover}
+            alt="Post cover"
+            width={1600}
+            height={900}
+            layout="responsive"
+          />
+        )}
       </div>
       <HomeButton title={title} description={description} />
     </header>

tailwind.config.js

@@ -55,6 +55,11 @@ module.exports = {
         cover: "32rem",
         full: "100%",
       },
+      minHeight: {
+        0: "0",
+        cover: "14rem",
+        full: "100%",
+      },
     },
     variants: {
       extend: { margin: ["hover", "group-hover"] },