Implementing iframe preview for a Gatsby/Sanity directory site
1 replies
Last updated: Jun 14, 2021
T
Hey guys just wondering if anyone can give me a firm nudge in the correct direction
I’m building a directory site for a client built on top of the official Gatsby/Sanity Blog starter. I’m wanting to implement iframe preview for both the blog posts and for directory entries. I modified the code from the starter’s IframePreview.js file to include some conditional logic that’s supposed to allow both documents to render previews. Here’s my code:
`const path = `/${dateSegment}/${slug.current}/`;`
`return `${previewURL}/blog${path}`;`
`return `${previewURL}/companies${path}`;`
However when I run everything, the blog previews work great, but when I click Web Preview on the directory entries I get an error that says “Invalid time value”. The directory entry slug path has no date value in it like the blog slug, and it’s reflected in my code above. Here’s the repo if it helps:
https://github.com/originellnav/modern-teams
I’m building a directory site for a client built on top of the official Gatsby/Sanity Blog starter. I’m wanting to implement iframe preview for both the blog posts and for directory entries. I modified the code from the starter’s IframePreview.js file to include some conditional logic that’s supposed to allow both documents to render previews. Here’s my code:
/* eslint-disable react/no-multi-comp, react/no-did-mount-set-state */
import React from "react";
import PropTypes from "prop-types";
import { format } from "date-fns";import styles from "./IframePreview.module.css";
/**
* Explore more examples of previews:
* <https://www.sanity.io/blog/evolve-authoring-experiences-with-views-and-split-panes>
*/
const assemblePostUrl = ({ _displayed_, _options_ }) => {const { slug, publishedAt } = _displayed_;const { previewURL } = _options_; if (!slug || !previewURL) { console.warn("Missing slug or previewURL", { slug, previewURL });return "";
}
const dateSegment = format(new Date(publishedAt), "yyyy/MM");
`return `${previewURL}/blog${path}`;`
};
const assembleCompanyUrl = ({ _displayed_, _options_ }) => {const { slug } = _displayed_; const { previewURL } = _options_; if (!slug || !previewURL) { console.warn("Missing slug or previewURL", { slug, previewURL });return "";
}`const path = `/${slug.current}/`;`
`return `${previewURL}/companies${path}`;`
};
const IframePreview = (_props_) => { const { options } = _props_; const { displayed } = _props_.document;if (!displayed) { return (
<div _className_={styles.componentWrapper}><p>There is no document to preview</p>
</div>
);
}
const blogUrl = assemblePostUrl({ displayed, options });const companyUrl = assembleCompanyUrl({ displayed, options });if (!blogUrl && !companyUrl) { return (
<div _className_={styles.componentWrapper}><p>Hmm. Having problems constructing the web front-end URL.</p>
</div>
);
}
if (displayed._type == "post") { return (
<div _className_={styles.componentWrapper}><div _className_={styles.iframeContainer}><iframe _src_={blogUrl} _frameBorder_={"0"} /></div>
</div>
);
}
if (displayed._type == "company") { return (
<div _className_={styles.componentWrapper}><div _className_={styles.iframeContainer}><iframe _src_={companyUrl} _frameBorder_={"0"} /></div>
</div>
);
}
};
IframePreview.propTypes = { document: PropTypes.object, _// eslint-disable-line react/forbid-prop-types_
options: PropTypes.object, _// eslint-disable-line react/forbid-prop-types_
};
IframePreview.defaultProps = { document: null,
};
export default IframePreview;
However when I run everything, the blog previews work great, but when I click Web Preview on the directory entries I get an error that says “Invalid time value”. The directory entry slug path has no date value in it like the blog slug, and it’s reflected in my code above. Here’s the repo if it helps:
https://github.com/originellnav/modern-teams
Jun 14, 2021, 12:32 AM
T
I think it was a scope issue, I got it working with this (for future reference):
const IframePreview = (_props_) => { const { options } = _props_; const { displayed } = _props_.document;if (!displayed) { return (
<div _className_={styles.componentWrapper}><p>There is no document to preview</p>
</div>
);
}
if (displayed._type == "post") { const url = assemblePostUrl({ displayed, options });if (!url) { return (
<div _className_={styles.componentWrapper}><p>Hmm. Having problems constructing the web front-end URL.</p>
</div>
);
}
return (
<div _className_={styles.componentWrapper}><div _className_={styles.iframeContainer}><iframe _src_={url} _frameBorder_={"0"} /></div>
</div>
);
} else if (displayed._type == "company") {const url = assembleCompanyUrl({ displayed, options });if (!url) { return (
<div _className_={styles.componentWrapper}><p>Hmm. Having problems constructing the web front-end URL.</p>
</div>
);
}
return (
<div _className_={styles.componentWrapper}><div _className_={styles.iframeContainer}><iframe _src_={url} _frameBorder_={"0"} /></div>
</div>
);
}
};
Jun 14, 2021, 3:04 AM
Sanity– build remarkable experiences at scale
Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.