@ai-growth/nextjs
Version:
Seamlessly integrate Sanity CMS with Next.js applications for automated blog routing and rendering
120 lines (119 loc) • 7.45 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DefaultTemplateErrorBoundary = exports.DefaultTemplate = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const ContentHeader_1 = require("./ContentHeader");
const ContentBody_1 = require("./ContentBody");
const AuthorInfo_1 = require("./AuthorInfo");
const LoadingSkeleton_1 = require("./LoadingSkeleton");
const DefaultTemplate_module_css_1 = __importDefault(require("./DefaultTemplate.module.css"));
/**
* DefaultTemplate component for rendering CMS content
*
* This is the main template component that provides a default layout
* for rendering CMS content with header, body, and author sections.
*/
const DefaultTemplate = ({ content, className = '', showMetadata = true, showAuthor = true, customRenderers, isLoading = false, error, onRetry, }) => {
// Show loading skeleton
if (isLoading) {
return ((0, jsx_runtime_1.jsx)(LoadingSkeleton_1.LoadingSkeleton, { showAuthor: showAuthor, showMetadata: showMetadata, className: className }));
}
// Show error state
if (error) {
return ((0, jsx_runtime_1.jsx)("div", { className: `${DefaultTemplate_module_css_1.default.defaultTemplate} ${DefaultTemplate_module_css_1.default.error} ${className}`, children: (0, jsx_runtime_1.jsxs)("div", { className: DefaultTemplate_module_css_1.default.errorContainer, children: [(0, jsx_runtime_1.jsx)("h2", { className: DefaultTemplate_module_css_1.default.errorTitle, children: "Content Error" }), (0, jsx_runtime_1.jsx)("p", { className: DefaultTemplate_module_css_1.default.errorMessage, children: error }), (0, jsx_runtime_1.jsx)("div", { className: DefaultTemplate_module_css_1.default.errorActions, children: (0, jsx_runtime_1.jsx)("button", { className: DefaultTemplate_module_css_1.default.retryButton, onClick: () => onRetry ? onRetry() : window.location.reload(), type: "button", children: "Retry" }) })] }) }));
}
// Show content not available state
if (!content) {
return ((0, jsx_runtime_1.jsx)("div", { className: `${DefaultTemplate_module_css_1.default.defaultTemplate} ${className}`, children: (0, jsx_runtime_1.jsxs)("div", { className: DefaultTemplate_module_css_1.default.errorContainer, children: [(0, jsx_runtime_1.jsx)("h2", { className: DefaultTemplate_module_css_1.default.errorTitle, children: "Content Not Available" }), (0, jsx_runtime_1.jsx)("p", { className: DefaultTemplate_module_css_1.default.errorMessage, children: "The requested content could not be found or is not available." })] }) }));
}
// Extract content properties
const { title = 'Untitled', _type: contentType = 'page', publishedAt, metadata, author, content: contentBody, } = content;
return ((0, jsx_runtime_1.jsxs)("article", { className: `${DefaultTemplate_module_css_1.default.defaultTemplate} ${className}`, children: [customRenderers?.header ? (customRenderers.header(content)) : ((0, jsx_runtime_1.jsx)(ContentHeader_1.ContentHeader, { title: title, contentType: contentType, ...(publishedAt && { publishedAt }), metadata: metadata, showMetadata: showMetadata })), customRenderers?.body ? (customRenderers.body(contentBody)) : ((0, jsx_runtime_1.jsx)(ContentBody_1.ContentBody, { content: contentBody, contentType: contentType, ...(customRenderers?.body && { customRenderer: customRenderers.body }) })), showAuthor && author && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: customRenderers?.author ? (customRenderers.author(author)) : ((0, jsx_runtime_1.jsx)(AuthorInfo_1.AuthorInfo, { author: author, showBio: true, showImage: true })) })), !showMetadata && metadata && customRenderers?.metadata && ((0, jsx_runtime_1.jsx)("div", { className: DefaultTemplate_module_css_1.default.metadataSection, children: customRenderers.metadata(metadata) })), metadata && ((0, jsx_runtime_1.jsx)("script", { type: "application/ld+json", dangerouslySetInnerHTML: {
__html: JSON.stringify(generateStructuredData(content)),
} }))] }));
};
exports.DefaultTemplate = DefaultTemplate;
/**
* Generate structured data for SEO
*/
const generateStructuredData = (content) => {
const { title, _type: contentType, publishedAt, metadata, author, slug, _id, } = content;
const baseData = {
'@context': 'https://schema.org',
'@type': contentType === 'post' ? 'BlogPosting' : 'WebPage',
headline: title,
name: title,
identifier: _id,
};
// Add description if available
if (metadata?.description) {
Object.assign(baseData, {
description: metadata.description,
});
}
// Add publication date for posts
if (publishedAt && contentType === 'post') {
Object.assign(baseData, {
datePublished: publishedAt,
dateModified: publishedAt,
});
}
// Add author information
if (author) {
const authorName = typeof author === 'string' ? author : author.name;
if (authorName) {
Object.assign(baseData, {
author: {
'@type': 'Person',
name: authorName,
},
});
}
}
// Add URL if slug is available
if (slug) {
Object.assign(baseData, {
url: `${window.location.origin}/${slug}`,
});
}
// Add image if available in metadata
if (metadata?.image) {
Object.assign(baseData, {
image: metadata.image,
});
}
return baseData;
};
/**
* Error Boundary wrapper for the DefaultTemplate
*/
class DefaultTemplateErrorBoundary extends react_1.default.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true, error };
}
componentDidCatch(error, errorInfo) {
console.error('DefaultTemplate Error:', error, errorInfo);
}
render() {
if (this.state.hasError) {
if (this.props.fallback) {
return this.props.fallback;
}
return ((0, jsx_runtime_1.jsx)("div", { className: DefaultTemplate_module_css_1.default.defaultTemplate, children: (0, jsx_runtime_1.jsxs)("div", { className: DefaultTemplate_module_css_1.default.errorContainer, children: [(0, jsx_runtime_1.jsx)("h2", { className: DefaultTemplate_module_css_1.default.errorTitle, children: "Rendering Error" }), (0, jsx_runtime_1.jsx)("p", { className: DefaultTemplate_module_css_1.default.errorMessage, children: "There was an error rendering this content. Please try refreshing the page." }), (0, jsx_runtime_1.jsx)("div", { className: DefaultTemplate_module_css_1.default.errorActions, children: (0, jsx_runtime_1.jsx)("button", { className: DefaultTemplate_module_css_1.default.retryButton, onClick: () => {
this.setState({ hasError: false });
window.location.reload();
}, type: "button", children: "Retry" }) })] }) }));
}
return this.props.children;
}
}
exports.DefaultTemplateErrorBoundary = DefaultTemplateErrorBoundary;
exports.default = exports.DefaultTemplate;