Conversion from static to dynamic site with Sanity

In this version I changed my site from being static to dynamic. Dont get me wrong, it's still static but with the ability to change the content with Sanity Studio.

I added a middleware for the data storage, that will read the JSON (API) from Sanity and parse it into my modules, pages, etc. The conversion was easy, but I needed to make o lot of changes like the output of html.

Content Blocks
The html is now produced by a serializer (BlockContent) or as Sanity prefer to pronounce it, PortableText. Below you'll see the serializer for my content module.

const urlFor = (source) => {
    return imageUrlBuilder(client).image(source);
}

const serializer = {
    types: {
        block(props) {
            switch (props.node.style) {
                case 'h1':
                    return <h1>{props.children}</h1>
                case 'h2':
                    return <h2>{props.children}</h2>
                case 'h3':
                    return <h3>{props.children}</h3>
                case 'span':
                    return <p>{props.children}</p>
                case 'code':
                    return <pre>{props.children}</pre>
                case 'link':
                    return <a>{props.children}</a>
                default:
                    return <p>{props.children}</p>
            }
        },
        image: props => <img src={urlFor(props.node.asset)} className="contentimg" alt="" />,
        imagetext: props => <h2><img src={urlFor(props.node.image.asset)} alt="" /> {props.node.header}</h2>,
        code: props => <SyntaxHighlighter language={props.node.language}>{props.node.code}</SyntaxHighlighter>,
        biglink: props => <div><br /><a class="biglink" href={props.node.url} target="_blank">{props.node.linktext}</a><br /><br /></div>
    }
}

export { serializer, urlFor };

To use the above serializer, use the BlockContent module in your react js file:

 <BlockContent blocks={contentBlocks} serializers={serializer} />

Fetching

Since the Redux JS does not have any support for ASYNC functions, I removed the Redux from the project. Instead I made a storage fetcher, that fetches all data from the api and put it into objects. Below is an example of the fetch from the GROQ.

    await client
        .fetch(pagesQuery)
        .then(pages =>
            pages.map(p => {
                var r = {
                    id: p._id, 
                    path: p.slug.current,
                    layout: p.layout[0],
                    pathId: null,
                    icon: p.icon,
                    title: p.title,
                    hidden: p.hidden,
                    meta_title: p.meta_title,
                    meta_description: p.meta_description,
                    zones: p.zones.map(n => {
                        return { name: n.name[0], modules: n.modules.map(m => { return m; }) };
                    })
                };
                Service.pages.push(r);
            })
        );

Summary

I'm very pleased that I decided to switch and use the Sanity Studio. It's easy to deploy, use and extend. Head over to Sanity to check it out


Created by Bootproject editor on 2020-01-09


  • multi

    About

    The Swede(me), Rickard Magnusson a Senior Software Engineer, currently employeed as a freelance consultant in Norway.

  • Legal

    Bootproject.se and Footer.se is property of Bootproject and may be used under (MIT)licence . See project on Bitbucket

  • Logo Contact

    Email: bootproject@icloud.com

(©) Copyright www.bootproject.no 2020