jenkshields/[slug-1].js Secret

## [slug-1].js
/** @jsxImportSource theme-ui */
import Layout from '../../components/layout'
import Head from 'next/head'
import { sanityClient, urlFor, PortableText } from '../../sanity'
import Image from 'next/image'
import Link from 'next/link'
import { useRouter } from 'next/router'

const Collection = ({ post }) => {
    console.log(post)
    const router = useRouter()

    if (router.isFallback) {
        return (
            <Layout>
                <div>Loading...</div>
            </Layout>
        )
    }

    return (
        <Layout>
            <Head>
                <title>{post.title ? post.title : 'Collection'}</title>
                <link rel="icon" href="/favicon.ico" />
            </Head>
            <div sx={{
                background: "#FFF"
            }}>
                <h1 sx={{
                    variant: 'text.categoryPage',
                }}>{post.title ? post.title : 'Collection'}</h1>
                <p sx={{
                    m: 2,
                    fontSize: [3, 4],
                    textAlign: 'center',
                    color: '#000',
                    width: 'fit-content',
                    fontWeight: '300',
                    lineHeight: 1.5,
                }}>
                    <PortableText blocks={post.description} />
                </p>
            </div>
            <div sx={{
                display: 'grid',
                gridTemplateColumns: 'repeat(3, 1fr)',
                gridTemplateRows: 'auto',
                gridGap: '1rem',
                p: 1,

                '@media (min-width: 800px)': {
                    gridTemplateColumns: '1fr 1fr 1fr 1fr',
                }
            }}>
                {post.images.map((post) => {
                    console.log(post.image)
                })}
                        <div sx={{


                            '> a > div': {
                                position: 'relative !important',
                                height: 'auto',
                                display: 'block',
                                aspectRatio: '1 / 1',
                            },

                            '> a > div > img': {
                                height: '100% !important',
                                width: '100% !important',
                                position: 'relative !important',
                            }
                        }}>
                            <Link href={`/photo/${encodeURIComponent(post.slug.current)}`}>
                                <a>
                                    <Image src={urlFor(post.image).auto('format').url()} layout="fill" objectFit="cover" />
                                </a>
                            </Link>
                        </div>

            </div>
        </Layout>
    )
}

export default Collection

export const getStaticPaths = async () => {
    const posts = await sanityClient.fetch(`*[_type == "collection"]{ slug }`)
    const paths = posts.map(post => ({
        params: {
            slug: post.slug.current,
        }
    }))

    return {
        paths,
        fallback: true
    }
}

export const getStaticProps = async ({ params }) => {
    const post = await sanityClient.fetch(`*[_type == "collection" && slug.current == $slug]{title, description, "images": images[]->{image, slug}}[0]`, { slug: params.slug })

    return {
        props: { post },
        revalidate: 30,
    }
}

## [slug].js
/** @jsxImportSource theme-ui */
import Layout from '../../components/layout'
import Head from 'next/head'
import { sanityClient, urlFor } from '../../sanity'
import Image from 'next/image'
import Link from 'next/link'
import { useRouter } from 'next/router'

const Camera = ({ post }) => {
    const router = useRouter()

    if (router.isFallback) {
        return (
            <Layout>
                <div>Loading...</div>
            </Layout>
        )
    }

    return (
        <Layout>
            <Head>
                <title>{post.title ? post.title : 'Camera'}</title>
                <link rel="icon" href="/favicon.ico" />
            </Head>
            <div sx={{
                background: "#FFF"
            }}>
                <h1 sx={{
                    variant: 'text.categoryPage',
                }}>{post.title ? post.title : 'Camera'}</h1>
                <p sx={{
                    m: 2,
                    fontSize: [3, 4],
                    textAlign: 'center',
                    color: '#000',
                    width: 'fit-content',
                    fontWeight: '300',
                    lineHeight: 1.5,
                }}>
                    {post.description}
                </p>
            </div>
            <div sx={{
                display: 'grid',
                gridTemplateColumns: 'repeat(3, 1fr)',
                gridTemplateRows: 'auto',
                gridGap: '1rem',
                p: 1,

                '@media (min-width: 800px)': {
                    gridTemplateColumns: '1fr 1fr 1fr 1fr',
                }
            }}>
                {post.photos.map((post) => {
                    console.log(post)
                    return (
                        <div sx={{


                            '> a > div': {
                                position: 'relative !important',
                                height: 'auto',
                                display: 'block',
                                aspectRatio: '1 / 1',
                            },

                            '> a > div > img': {
                                height: '100% !important',
                                width: '100% !important',
                                position: 'relative !important',
                            }
                        }}>
                            <Link href={`/photo/${encodeURIComponent(post.slug.current)}`}>
                                <a>
                                    <Image src={urlFor(post.image).auto('format').url()} layout="fill" objectFit="cover" />
                                </a>
                            </Link>
                        </div>
                    )
                })}
            </div>
        </Layout>
    )
}

export default Camera

export const getStaticPaths = async () => {
    const posts = await sanityClient.fetch(`*[_type == "camera"]{ slug }`)
    const paths = posts.map(post => ({
        params: {
            slug: post.slug.current,
        }
    }))

    return {
        paths,
        fallback: true
    }
}

export const getStaticProps = async ({ params }) => {
    const post = await sanityClient.fetch(`*[_type == "camera" && slug.current == $slug]{title, description, "photos": *[_type == 'photo' && references(^._id)] | order(date desc) {
        image, slug
    }}[0]`, { slug: params.slug })

    return {
        props: { post },
        revalidate: 30,
    }
}
	/** @jsxImportSource theme-ui */
	import Layout from '../../components/layout'
	import Head from 'next/head'
	import { sanityClient, urlFor, PortableText } from '../../sanity'
	import Image from 'next/image'
	import Link from 'next/link'
	import { useRouter } from 'next/router'

	const Collection = ({ post }) => {
	console.log(post)
	const router = useRouter()

	if (router.isFallback) {
	return (
	<Layout>
	<div>Loading...</div>
	</Layout>
	)
	}

	return (
	<Layout>
	<Head>
	<title>{post.title ? post.title : 'Collection'}</title>
	<link rel="icon" href="/favicon.ico" />
	</Head>
	<div sx={{
	background: "#FFF"
	}}>
	<h1 sx={{
	variant: 'text.categoryPage',
	}}>{post.title ? post.title : 'Collection'}</h1>
	<p sx={{
	m: 2,
	fontSize: [3, 4],
	textAlign: 'center',
	color: '#000',
	width: 'fit-content',
	fontWeight: '300',
	lineHeight: 1.5,
	}}>
	<PortableText blocks={post.description} />
	</p>
	</div>
	<div sx={{
	display: 'grid',
	gridTemplateColumns: 'repeat(3, 1fr)',
	gridTemplateRows: 'auto',
	gridGap: '1rem',
	p: 1,

	'@media (min-width: 800px)': {
	gridTemplateColumns: '1fr 1fr 1fr 1fr',
	}
	}}>
	{post.images.map((post) => {
	console.log(post.image)
	})}
	<div sx={{


	'> a > div': {
	position: 'relative !important',
	height: 'auto',
	display: 'block',
	aspectRatio: '1 / 1',
	},

	'> a > div > img': {
	height: '100% !important',
	width: '100% !important',
	position: 'relative !important',
	}
	}}>
	<Link href={`/photo/${encodeURIComponent(post.slug.current)}`}>
	<a>
	<Image src={urlFor(post.image).auto('format').url()} layout="fill" objectFit="cover" />
	</a>
	</Link>
	</div>

	</div>
	</Layout>
	)
	}

	export default Collection

	export const getStaticPaths = async () => {
	const posts = await sanityClient.fetch(`*[_type == "collection"]{ slug }`)
	const paths = posts.map(post => ({
	params: {
	slug: post.slug.current,
	}
	}))

	return {
	paths,
	fallback: true
	}
	}

	export const getStaticProps = async ({ params }) => {
	const post = await sanityClient.fetch(`*[_type == "collection" && slug.current == $slug]{title, description, "images": images[]->{image, slug}}[0]`, { slug: params.slug })

	return {
	props: { post },
	revalidate: 30,
	}
	}