Fix: broken TypeScript in WordPress example. (#39402)

* chore: add typescript and update deps

* style: add tsconfig

* chore: add g.avatar.com domain

* fix: images domain api url to match with hostname

* style: convert files to typescript

* refactor(Avatar): const name for readable purpose

* refactor: change regex to extract www from url

* Update next-image domains.

* Update a few types.

* Update readme.

* typo

Co-authored-by: Chaiwat Trisuwan <chaiwattsw@gmail.com>
Co-authored-by: Lee Robinson <me@leerob.io>
Co-authored-by: Anthony Shew <anthony@inthezone.dev>
Co-authored-by: JJ Kasper <jj@jjsweb.site>

examples/cms-wordpress/README.md

@@ -1,6 +1,6 @@
-# A statically generated blog example using Next.js and WordPress
+# An Incremental Static Regeneration Blog Example Using Next.js and WordPress
 
-This example showcases Next.js's [Static Generation](https://nextjs.org/docs/basic-features/pages) feature using [WordPress](https://wordpress.org) as the data source.
+This example showcases Next.js's [Incremental Static Regeneration](https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration) feature using [WordPress](https://wordpress.org) as the data source.
 
 ## Demo
 

examples/cms-wordpress/components/cover-image.tsx

@@ -2,7 +2,17 @@ import cn from 'classnames'
 import Image from 'next/image'
 import Link from 'next/link'
 
-export default function CoverImage({ title, coverImage, slug }) {
+interface Props {
+  title: string
+  coverImage: {
+    node: {
+      sourceUrl: string
+    }
+  }
+  slug?: string
+}
+
+export default function CoverImage({ title, coverImage, slug }: Props) {
   const image = (
     <Image
       width={2000}

examples/cms-wordpress/lib/api.ts

@@ -1,6 +1,6 @@
 const API_URL = process.env.WORDPRESS_API_URL
 
-async function fetchAPI(query = '', { variables } = {}) {
+async function fetchAPI(query = '', { variables }: Record<string, any> = {}) {
   const headers = { 'Content-Type': 'application/json' }
 
   if (process.env.WORDPRESS_AUTH_REFRESH_TOKEN) {

examples/cms-wordpress/next.config.js

@@ -9,6 +9,7 @@ module.exports = {
   images: {
     domains: [
       process.env.WORDPRESS_API_URL.match(/(?!(w+)\.)\w*(?:\w+\.)+\w+/)[0], // Valid WP Image domain.
+      '0.gravatar.com',
       '1.gravatar.com',
       '2.gravatar.com',
       'secure.gravatar.com',