diff --git a/examples/cms-agilitycms/components/alert.js b/examples/cms-agilitycms/components/alert.tsx
similarity index 100%
rename from examples/cms-agilitycms/components/alert.js
rename to examples/cms-agilitycms/components/alert.tsx
diff --git a/examples/cms-agilitycms/components/avatar.js b/examples/cms-agilitycms/components/avatar.tsx
similarity index 100%
rename from examples/cms-agilitycms/components/avatar.js
rename to examples/cms-agilitycms/components/avatar.tsx
diff --git a/examples/cms-agilitycms/components/container.js b/examples/cms-agilitycms/components/container.tsx
similarity index 100%
rename from examples/cms-agilitycms/components/container.js
rename to examples/cms-agilitycms/components/container.tsx
diff --git a/examples/cms-agilitycms/components/cover-image.js b/examples/cms-agilitycms/components/cover-image.tsx
similarity index 97%
rename from examples/cms-agilitycms/components/cover-image.js
rename to examples/cms-agilitycms/components/cover-image.tsx
index 746e5fc8579e..517d21d69bd1 100644
--- a/examples/cms-agilitycms/components/cover-image.js
+++ b/examples/cms-agilitycms/components/cover-image.tsx
@@ -2,7 +2,7 @@ import Image from '../lib/components/image'
import cn from 'classnames'
import Link from 'next/link'
-export default function CoverImage({ title, responsiveImage, slug }) {
+export default function CoverImage({ title, responsiveImage, slug = null }) {
const image = (
// This client is used by nested components to fetch additional data within `getStaticProps`
export class APIClient {
+ public preview: any
+ public client: any
+
constructor({ preview = false }) {
this.preview = preview
this.client = getClient(preview)
diff --git a/examples/cms-agilitycms/lib/components/content-zone.js b/examples/cms-agilitycms/lib/components/content-zone.tsx
similarity index 100%
rename from examples/cms-agilitycms/lib/components/content-zone.js
rename to examples/cms-agilitycms/lib/components/content-zone.tsx
diff --git a/examples/cms-agilitycms/lib/components/image.js b/examples/cms-agilitycms/lib/components/image.tsx
similarity index 82%
rename from examples/cms-agilitycms/lib/components/image.js
rename to examples/cms-agilitycms/lib/components/image.tsx
index 7cbf061f35bc..38e686a6c47e 100644
--- a/examples/cms-agilitycms/lib/components/image.js
+++ b/examples/cms-agilitycms/lib/components/image.tsx
@@ -1,13 +1,21 @@
import React, { useCallback, useState } from 'react'
import { useInView } from 'react-intersection-observer'
+type State = {
+ lazyLoad: boolean
+ isSsr: boolean
+ isIntersectionObserverAvailable: boolean
+ inView?: boolean
+ loaded: boolean
+}
+
const imageAddStrategy = ({
lazyLoad,
isSsr,
isIntersectionObserverAvailable,
inView,
loaded,
-}) => {
+}: State) => {
if (!lazyLoad) {
return true
}
@@ -28,7 +36,7 @@ const imageShowStrategy = ({
isSsr,
isIntersectionObserverAvailable,
loaded,
-}) => {
+}: State) => {
if (!lazyLoad) {
return true
}
@@ -44,6 +52,34 @@ const imageShowStrategy = ({
return true
}
+type ImageData = {
+ aspectRatio: number
+ base64?: string
+ height?: number
+ width: number
+ sizes?: string
+ src?: string
+ srcSet?: string
+ webpSrcSet?: string
+ bgColor?: string
+ alt?: string
+ title?: string
+}
+
+type ImageProps = {
+ data: ImageData
+ className?: string
+ pictureClassName?: string
+ fadeInDuration?: number
+ intersectionTreshold?: number
+ intersectionThreshold?: number
+ intersectionMargin?: string
+ lazyLoad?: boolean
+ style?: React.CSSProperties
+ pictureStyle?: React.CSSProperties
+ explicitWidth?: boolean
+}
+
const Image = function ({
className,
fadeInDuration,
@@ -55,7 +91,7 @@ const Image = function ({
pictureStyle,
explicitWidth,
data,
-}) {
+}: ImageProps) {
const [loaded, setLoaded] = useState(false)
const handleLoad = useCallback(() => {
@@ -74,7 +110,7 @@ const Image = function ({
? false
: !!window.IntersectionObserver
- const absolutePositioning = {
+ const absolutePositioning: React.CSSProperties = {
position: 'absolute',
left: 0,
top: 0,
diff --git a/examples/cms-agilitycms/lib/components/one-column-template.js b/examples/cms-agilitycms/lib/components/one-column-template.tsx
similarity index 100%
rename from examples/cms-agilitycms/lib/components/one-column-template.js
rename to examples/cms-agilitycms/lib/components/one-column-template.tsx
diff --git a/examples/cms-agilitycms/lib/components/page-template.js b/examples/cms-agilitycms/lib/components/page-template.tsx
similarity index 100%
rename from examples/cms-agilitycms/lib/components/page-template.js
rename to examples/cms-agilitycms/lib/components/page-template.tsx
diff --git a/examples/cms-agilitycms/lib/components/rich-text-area.js b/examples/cms-agilitycms/lib/components/rich-text-area.tsx
similarity index 100%
rename from examples/cms-agilitycms/lib/components/rich-text-area.js
rename to examples/cms-agilitycms/lib/components/rich-text-area.tsx
diff --git a/examples/cms-agilitycms/lib/constants.js b/examples/cms-agilitycms/lib/constants.ts
similarity index 100%
rename from examples/cms-agilitycms/lib/constants.js
rename to examples/cms-agilitycms/lib/constants.ts
diff --git a/examples/cms-agilitycms/lib/dependancies.js b/examples/cms-agilitycms/lib/dependancies.ts
similarity index 77%
rename from examples/cms-agilitycms/lib/dependancies.js
rename to examples/cms-agilitycms/lib/dependancies.ts
index 63f3e583c31f..44ccead1baee 100644
--- a/examples/cms-agilitycms/lib/dependancies.js
+++ b/examples/cms-agilitycms/lib/dependancies.ts
@@ -24,10 +24,10 @@ export const requireComponentDependancyByName = (name) => {
if (!Component) {
// eslint-disable-next-line no-throw-literal
throw `Could not find a component with the name ${name}. Tried searching:
- ${userComponentsPath}/${kebabCaseName}.js',
- ${libComponentsPath}/${kebabCaseName}.js',
- ${userComponentsPath}/${pascalCaseName}.js',
- ${libComponentsPath}/${pascalCaseName}.js'.`
+ ${userComponentsPath}/${kebabCaseName}.tsx',
+ ${libComponentsPath}/${kebabCaseName}.tsx',
+ ${userComponentsPath}/${pascalCaseName}.tsx',
+ ${libComponentsPath}/${pascalCaseName}.tsx'.`
}
return Component
@@ -38,13 +38,13 @@ const requireComponent = (name) => {
try {
//check the user path first (must be relative paths)
- Component = require(`../components/${name}.js`).default
+ Component = require(`../components/${name}.tsx`).default
} catch {}
if (!Component)
try {
//fallback to lib path (must be relative paths)
- Component = require(`./components/${name}.js`).default
+ Component = require(`./components/${name}.tsx`).default
} catch {}
return Component
diff --git a/examples/cms-agilitycms/lib/normalize.js b/examples/cms-agilitycms/lib/normalize.ts
similarity index 82%
rename from examples/cms-agilitycms/lib/normalize.js
rename to examples/cms-agilitycms/lib/normalize.ts
index 226a8621e75c..620a979549a8 100644
--- a/examples/cms-agilitycms/lib/normalize.js
+++ b/examples/cms-agilitycms/lib/normalize.ts
@@ -20,6 +20,14 @@ export function normalizePosts(postsFromAgility) {
excerpt: p.fields.excerpt,
date: p.fields.date,
content: p.fields.content,
+ author: p.fields.author
+ ? {
+ name: p.fields.author.fields.name,
+ picture: {
+ url: `${p.fields.author.fields.picture.url}?w=100&h=100`,
+ },
+ }
+ : null,
ogImage: {
url: `${p.fields.coverImage.url}?w=2000&h=1000&q=70`,
},
@@ -40,15 +48,6 @@ export function normalizePosts(postsFromAgility) {
},
}
- if (p.fields.author) {
- normalizedPost.author = {
- name: p.fields.author.fields.name,
- picture: {
- url: `${p.fields.author.fields.picture.url}?w=100&h=100`,
- },
- }
- }
-
return normalizedPost
})
diff --git a/examples/cms-agilitycms/lib/preview.js b/examples/cms-agilitycms/lib/preview.ts
similarity index 100%
rename from examples/cms-agilitycms/lib/preview.js
rename to examples/cms-agilitycms/lib/preview.ts
diff --git a/examples/cms-agilitycms/lib/use-preview-redirect.js b/examples/cms-agilitycms/lib/use-preview-redirect.ts
similarity index 100%
rename from examples/cms-agilitycms/lib/use-preview-redirect.js
rename to examples/cms-agilitycms/lib/use-preview-redirect.ts
diff --git a/examples/cms-agilitycms/lib/utils.js b/examples/cms-agilitycms/lib/utils.ts
similarity index 100%
rename from examples/cms-agilitycms/lib/utils.js
rename to examples/cms-agilitycms/lib/utils.ts
diff --git a/examples/cms-agilitycms/next-env.d.ts b/examples/cms-agilitycms/next-env.d.ts
new file mode 100644
index 000000000000..4f11a03dc6cc
--- /dev/null
+++ b/examples/cms-agilitycms/next-env.d.ts
@@ -0,0 +1,5 @@
+///
+///
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/cms-agilitycms/package.json b/examples/cms-agilitycms/package.json
index 8660055b38cb..133365354cad 100644
--- a/examples/cms-agilitycms/package.json
+++ b/examples/cms-agilitycms/package.json
@@ -6,19 +6,23 @@
"start": "next start"
},
"dependencies": {
- "@agility/content-fetch": "^0.8.1",
- "classnames": "2.3.1",
- "date-fns": "2.28.0",
- "isomorphic-unfetch": "3.0.0",
+ "@agility/content-fetch": "^1.1.5",
+ "classnames": "^2.3.1",
+ "date-fns": "^2.29.1",
+ "isomorphic-unfetch": "^3.1.0",
"next": "latest",
- "react": "^17.0.2",
- "react-datocms": "1.1.0",
- "react-dom": "^17.0.2",
- "react-intersection-observer": "^8.26.1"
+ "react": "^18.2.0",
+ "react-datocms": "^3.0.15",
+ "react-dom": "^18.2.0",
+ "react-intersection-observer": "^9.4.0"
},
"devDependencies": {
- "autoprefixer": "10.4.2",
- "postcss": "8.4.5",
- "tailwindcss": "^3.0.15"
+ "@types/node": "^18.6.0",
+ "@types/react": "^18.0.15",
+ "@types/react-dom": "^18.0.6",
+ "autoprefixer": "^10.4.7",
+ "postcss": "^8.4.14",
+ "tailwindcss": "^3.1.6",
+ "typescript": "^4.7.4"
}
}
diff --git a/examples/cms-agilitycms/pages/[...slug].js b/examples/cms-agilitycms/pages/[...slug].tsx
similarity index 100%
rename from examples/cms-agilitycms/pages/[...slug].js
rename to examples/cms-agilitycms/pages/[...slug].tsx
diff --git a/examples/cms-agilitycms/pages/_app.js b/examples/cms-agilitycms/pages/_app.tsx
similarity index 51%
rename from examples/cms-agilitycms/pages/_app.js
rename to examples/cms-agilitycms/pages/_app.tsx
index d56d9bf601a9..bbd8269522fc 100644
--- a/examples/cms-agilitycms/pages/_app.js
+++ b/examples/cms-agilitycms/pages/_app.tsx
@@ -1,7 +1,5 @@
import '../styles/index.css'
-function MyApp({ Component, pageProps }) {
+export default function MyApp({ Component, pageProps }) {
return
}
-
-export default MyApp
diff --git a/examples/cms-agilitycms/pages/_document.js b/examples/cms-agilitycms/pages/_document.js
deleted file mode 100644
index c55951c0d5da..000000000000
--- a/examples/cms-agilitycms/pages/_document.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import Document, { Html, Head, Main, NextScript } from 'next/document'
-
-export default class MyDocument extends Document {
- render() {
- return (
-
-
-
-
-
-
-
- )
- }
-}
diff --git a/examples/cms-agilitycms/pages/_document.tsx b/examples/cms-agilitycms/pages/_document.tsx
new file mode 100644
index 000000000000..950169082cb9
--- /dev/null
+++ b/examples/cms-agilitycms/pages/_document.tsx
@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function MyDocument() {
+ return (
+
+
+
+
+
+
+ )
+}
diff --git a/examples/cms-agilitycms/pages/api/exit-preview.js b/examples/cms-agilitycms/pages/api/exit-preview.ts
similarity index 57%
rename from examples/cms-agilitycms/pages/api/exit-preview.js
rename to examples/cms-agilitycms/pages/api/exit-preview.ts
index 03d954f4a7a9..eb19f4ed526c 100644
--- a/examples/cms-agilitycms/pages/api/exit-preview.js
+++ b/examples/cms-agilitycms/pages/api/exit-preview.ts
@@ -1,4 +1,9 @@
-export default async function handler(_, res) {
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default async function handler(
+ _req: NextApiRequest,
+ res: NextApiResponse
+) {
// Exit the current user from "Preview Mode". This function accepts no args.
res.clearPreviewData()
diff --git a/examples/cms-agilitycms/pages/api/preview.js b/examples/cms-agilitycms/pages/api/preview.ts
similarity index 71%
rename from examples/cms-agilitycms/pages/api/preview.js
rename to examples/cms-agilitycms/pages/api/preview.ts
index 4867bb03c129..1df16bf31f32 100644
--- a/examples/cms-agilitycms/pages/api/preview.js
+++ b/examples/cms-agilitycms/pages/api/preview.ts
@@ -1,6 +1,10 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
import { validatePreview } from '../../lib/api'
-export default async function handler(req, res) {
+export default async function handler(
+ req: NextApiRequest,
+ res: NextApiResponse
+) {
// Check the secret and next parameters
// This secret should only be known to this API route and the CMS
@@ -19,6 +23,9 @@ export default async function handler(req, res) {
res.setPreviewData({})
// Redirect to the slug
+ if (!('slug' in validationResp)) {
+ throw new Error('invariant missing slug in validation response')
+ }
res.writeHead(307, { Location: validationResp.slug })
res.end()
}
diff --git a/examples/cms-agilitycms/pages/index.js b/examples/cms-agilitycms/pages/index.ts
similarity index 100%
rename from examples/cms-agilitycms/pages/index.js
rename to examples/cms-agilitycms/pages/index.ts
diff --git a/examples/cms-agilitycms/tsconfig.json b/examples/cms-agilitycms/tsconfig.json
new file mode 100644
index 000000000000..0c8fa8791dfd
--- /dev/null
+++ b/examples/cms-agilitycms/tsconfig.json
@@ -0,0 +1,20 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": false,
+ "forceConsistentCasingInFileNames": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "incremental": true
+ },
+ "include": ["next-env.d.ts", "environment.d.ts", "**/*.ts", "**/*.tsx"],
+ "exclude": ["node_modules"]
+}