Merge pull request #1 from styxlab/review-leerob

minor fixes

Author: styxlab

examples/cms-ghost/components/cover-image.js

@@ -1,24 +1,18 @@
 import cn from 'classnames'
 import Link from 'next/link'
-import Imgix from 'react-imgix'
+import Image from 'next/image'
 
-export default function CoverImage({ title, url, slug }) {
+export default function CoverImage({ title, url, slug, width, height }) {
   const image = (
-    <Imgix
+    <Image
       src={url}
       alt={`Cover Image for ${title}`}
-      className={cn('lazyload shadow-small w-full', {
-        'hover:shadow-medium transition-shadow duration-200': slug,
+      className={cn('shadow-sm', {
+        'hover:shadow-md transition-shadow duration-200': slug,
       })}
-      sizes="100vw"
-      attributeConfig={{
-        src: 'data-src',
-        srcSet: 'data-srcset',
-        sizes: 'data-sizes',
-      }}
-      htmlAttributes={{
-        src: `${url}?auto=format,compress&q=1&blur=500&w=auto`,
-      }}
+      layout="responsive"
+      width={width}
+      height={height}
     />
   )
   return (

examples/cms-ghost/components/hero-post.js

@@ -14,7 +14,13 @@ export default function HeroPost({
   return (
     <section>
       <div className="mb-8 md:mb-16">
-        <CoverImage title={title} url={coverImage} slug={slug} />
+        <CoverImage
+          title={title}
+          url={coverImage}
+          slug={slug}
+          width={2000}
+          height={1216}
+        />
       </div>
       <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
         <div>

examples/cms-ghost/components/post-header.js

@@ -11,7 +11,7 @@ export default function PostHeader({ title, coverImage, date, author }) {
         <Avatar name={author.title} picture={author.profile_image} />
       </div>
       <div className="mb-8 md:mb-16 sm:mx-0">
-        <CoverImage title={title} url={coverImage} />
+        <CoverImage title={title} url={coverImage} width={2000} height={1216} />
       </div>
       <div className="max-w-2xl mx-auto">
         <div className="block md:hidden mb-6">

examples/cms-ghost/components/post-preview.js

@@ -14,10 +14,16 @@ export default function PostPreview({
   return (
     <div>
       <div className="mb-5">
-        <CoverImage slug={slug} title={title} url={coverImage} />
+        <CoverImage
+          slug={slug}
+          title={title}
+          url={coverImage}
+          width={2000}
+          height={1216}
+        />
       </div>
       <h3 className="text-3xl mb-3 leading-snug">
-        <Link as={`/posts/${slug}`} href="/posts/[slug]">
+        <Link href={`/posts/${slug}`}>
           <a className="hover:underline">{title}</a>
         </Link>
       </h3>

examples/cms-ghost/lib/api.js

@@ -1,7 +1,8 @@
 import GhostContentAPI from '@tryghost/content-api'
+import { GHOST_API_URL_DEFAULT, GHOST_API_KEY_DEFAULT } from './defaults.js'
 
-const GHOST_API_URL = process.env.GHOST_API_URL || 'https://cms.gotsby.org'
-const GHOST_API_KEY = process.env.GHOST_API_KEY || '387f956eaa95345f7bb484d0b8'
+const GHOST_API_URL = process.env.GHOST_API_URL || GHOST_API_URL_DEFAULT
+const GHOST_API_KEY = process.env.GHOST_API_KEY || GHOST_API_KEY_DEFAULT
 
 const api = new GhostContentAPI({
   url: GHOST_API_URL,

examples/cms-ghost/lib/defaults.js

@@ -0,0 +1,9 @@
+export const GHOST_API_URL_DEFAULT = Buffer.from(
+  'aHR0cHM6Ly9jbXMuZ290c2J5Lm9yZw==',
+  'base64'
+).toString('utf-8')
+
+export const GHOST_API_KEY_DEFAULT = Buffer.from(
+  'Mzg3Zjk1NmVhYTk1MzQ1ZjdiYjQ4NGQwYjg=',
+  'base64'
+).toString('utf-8')

examples/cms-ghost/next.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  images: {
+    domains: ['static.gotsby.org'],
+  },
+}

examples/cms-ghost/package.json

@@ -7,19 +7,19 @@
     "start": "next start"
   },
   "dependencies": {
-    "@tryghost/content-api": "^1.4.10",
+    "@tryghost/content-api": "^1.4.13",
     "classnames": "2.2.6",
-    "date-fns": "2.14.0",
-    "lazysizes": "^5.2.1-rc2",
+    "date-fns": "2.16.1",
+    "lazysizes": "^5.3.0",
     "next": "latest",
-    "react": "^16.13.1",
-    "react-imgix": "^9.0.2",
-    "react-dom": "^16.13.1"
+    "postcss": "^8.2.4",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   },
   "devDependencies": {
-    "postcss-flexbugs-fixes": "4.2.1",
+    "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-preset-env": "^6.7.0",
-    "tailwindcss": "^1.4.6"
+    "tailwindcss": "^2.0.2"
   },
   "license": "MIT"
 }