@ai-growth/nextjs
Version:
Seamlessly integrate Sanity CMS with Next.js applications for automated blog routing and rendering
250 lines (249 loc) • 14.6 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.DefaultTemplateV2 = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
// ============================================================================
// THEME DEFAULTS
// ============================================================================
const defaultTheme = {
colors: {
primary: '#0066cc',
secondary: '#666666',
background: '#ffffff',
text: '#333333',
accent: '#ff6b6b',
},
fonts: {
heading: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
code: 'SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace',
},
spacing: {
xs: '0.25rem',
sm: '0.5rem',
md: '1rem',
lg: '1.5rem',
xl: '2rem',
xxl: '3rem',
},
borderRadius: {
sm: '0.25rem',
md: '0.5rem',
lg: '1rem',
},
};
// ============================================================================
// MAIN TEMPLATE COMPONENT
// ============================================================================
const DefaultTemplateV2 = ({ content, isLoading = false, error = '', onRetry, className = '', theme = defaultTheme, showMetadata = true, showAuthor = true, }) => {
// Loading state
if (isLoading) {
return (0, jsx_runtime_1.jsx)(LoadingPlaceholder, { theme: theme });
}
// Error state
if (error) {
return ((0, jsx_runtime_1.jsx)("div", { className: `default-template-v2 error ${className}`, children: (0, jsx_runtime_1.jsx)(ErrorDisplay, { error: error, ...(onRetry && { onRetry }), theme: theme }) }));
}
// No content
if (!content) {
return ((0, jsx_runtime_1.jsx)("div", { className: `default-template-v2 no-content ${className}`, children: (0, jsx_runtime_1.jsx)("div", { style: { textAlign: 'center', padding: theme.spacing.xl }, children: (0, jsx_runtime_1.jsx)("h2", { style: { color: theme.colors.text }, children: "No content available" }) }) }));
}
return ((0, jsx_runtime_1.jsxs)("article", { className: `default-template-v2 ${className}`, style: {
fontFamily: theme.fonts.body,
color: theme.colors.text,
backgroundColor: theme.colors.background,
lineHeight: 1.6,
}, children: [(0, jsx_runtime_1.jsxs)("header", { style: { marginBottom: theme.spacing.xl }, children: [(0, jsx_runtime_1.jsx)("h1", { style: {
fontFamily: theme.fonts.heading,
fontSize: '2.5rem',
fontWeight: 'bold',
color: theme.colors.primary,
marginBottom: theme.spacing.md,
lineHeight: 1.2,
}, children: content.title }), content.description && ((0, jsx_runtime_1.jsx)("p", { style: {
fontSize: '1.25rem',
color: theme.colors.secondary,
marginBottom: theme.spacing.lg,
fontStyle: 'italic',
}, children: content.description })), showMetadata && ((0, jsx_runtime_1.jsxs)("div", { style: {
display: 'flex',
gap: theme.spacing.md,
marginBottom: theme.spacing.lg,
fontSize: '0.875rem',
color: theme.colors.secondary,
flexWrap: 'wrap',
}, children: [content.publishedAt && ((0, jsx_runtime_1.jsxs)("span", { children: ["\uD83D\uDCC5 ", new Date(content.publishedAt).toLocaleDateString()] })), content._type && ((0, jsx_runtime_1.jsxs)("span", { children: ["\uD83D\uDCDD ", content._type] })), content.readingTime && ((0, jsx_runtime_1.jsxs)("span", { children: ["\u23F1\uFE0F ", content.readingTime, " min read"] }))] })), showAuthor && content.author && ((0, jsx_runtime_1.jsx)(DefaultAuthor, { author: content.author, theme: theme }))] }), (0, jsx_runtime_1.jsxs)("main", { children: [content.image && ((0, jsx_runtime_1.jsx)("div", { style: { marginBottom: theme.spacing.xl }, children: (0, jsx_runtime_1.jsx)("img", { src: content.image.url || content.image, alt: content.image.alt || content.title, style: {
width: '100%',
height: 'auto',
borderRadius: theme.borderRadius.lg,
boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
} }) })), Array.isArray(content.content) ? (content.content.map((block, index) => ((0, jsx_runtime_1.jsx)(ContentBlock, { block: block, theme: theme }, block._key || index)))) : typeof content.content === 'string' ? ((0, jsx_runtime_1.jsx)("div", { style: {
fontSize: '1.125rem',
lineHeight: 1.7,
marginBottom: theme.spacing.lg,
}, dangerouslySetInnerHTML: { __html: content.content } })) : content.content ? ((0, jsx_runtime_1.jsx)("div", { style: { marginBottom: theme.spacing.lg }, children: (0, jsx_runtime_1.jsx)("pre", { style: {
fontFamily: theme.fonts.code,
backgroundColor: '#f5f5f5',
padding: theme.spacing.md,
borderRadius: theme.borderRadius.md,
overflow: 'auto',
}, children: JSON.stringify(content.content, null, 2) }) })) : null, content.tags && content.tags.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { style: {
marginTop: theme.spacing.xl,
paddingTop: theme.spacing.lg,
borderTop: `1px solid ${theme.colors.secondary}20`,
}, children: [(0, jsx_runtime_1.jsx)("h3", { style: {
fontFamily: theme.fonts.heading,
fontSize: '1rem',
fontWeight: '600',
marginBottom: theme.spacing.md,
color: theme.colors.text,
}, children: "Tags" }), (0, jsx_runtime_1.jsx)("div", { style: {
display: 'flex',
gap: theme.spacing.sm,
flexWrap: 'wrap',
}, children: content.tags.map((tag, index) => ((0, jsx_runtime_1.jsx)("span", { style: {
backgroundColor: theme.colors.accent,
color: 'white',
padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
borderRadius: theme.borderRadius.sm,
fontSize: '0.75rem',
fontWeight: '500',
}, children: tag }, index))) })] }))] }), (0, jsx_runtime_1.jsx)("footer", { style: {
marginTop: theme.spacing.xxl,
paddingTop: theme.spacing.lg,
borderTop: `1px solid ${theme.colors.secondary}20`,
textAlign: 'center',
fontSize: '0.875rem',
color: theme.colors.secondary,
}, children: content.slug && ((0, jsx_runtime_1.jsxs)("p", { children: ["\uD83D\uDCCE ", (0, jsx_runtime_1.jsx)("strong", { children: "Slug:" }), " ", content.slug] })) })] }));
};
exports.DefaultTemplateV2 = DefaultTemplateV2;
// ============================================================================
// CONTENT BLOCK RENDERER
// ============================================================================
const ContentBlock = ({ block }) => {
if (!block || !block._type) {
return null;
}
const baseStyle = {
marginBottom: '1.5rem',
};
switch (block._type) {
case 'block':
return ((0, jsx_runtime_1.jsx)("div", { style: baseStyle, children: block.children?.map((child, index) => ((0, jsx_runtime_1.jsx)("span", { children: child.marks?.includes('strong') ? ((0, jsx_runtime_1.jsx)("strong", { children: child.text })) : child.marks?.includes('em') ? ((0, jsx_runtime_1.jsx)("em", { children: child.text })) : (child.text) }, index))) }));
case 'image':
return ((0, jsx_runtime_1.jsxs)("div", { style: baseStyle, children: [(0, jsx_runtime_1.jsx)("img", { src: block.asset?.url || block.url, alt: block.alt || 'Content image', style: {
width: '100%',
height: 'auto',
borderRadius: '0.5rem',
} }), block.caption && ((0, jsx_runtime_1.jsx)("p", { style: {
fontSize: '0.875rem',
color: '#666',
textAlign: 'center',
marginTop: '0.5rem',
fontStyle: 'italic',
}, children: block.caption }))] }));
case 'code':
return ((0, jsx_runtime_1.jsx)("div", { style: baseStyle, children: (0, jsx_runtime_1.jsx)("pre", { style: {
backgroundColor: '#f5f5f5',
padding: '1rem',
borderRadius: '0.5rem',
overflow: 'auto',
fontFamily: 'SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace',
}, children: (0, jsx_runtime_1.jsx)("code", { children: block.code }) }) }));
case 'quote':
return ((0, jsx_runtime_1.jsxs)("blockquote", { style: {
...baseStyle,
borderLeft: '4px solid #0066cc',
paddingLeft: '1rem',
fontStyle: 'italic',
fontSize: '1.125rem',
color: '#555',
}, children: [block.text, block.author && ((0, jsx_runtime_1.jsxs)("cite", { style: {
display: 'block',
marginTop: '0.5rem',
fontSize: '0.875rem',
color: '#666',
}, children: ["\u2014 ", block.author] }))] }));
default:
return ((0, jsx_runtime_1.jsx)("div", { style: baseStyle, children: (0, jsx_runtime_1.jsxs)("pre", { style: {
backgroundColor: '#f8f8f8',
padding: '0.5rem',
borderRadius: '0.25rem',
fontSize: '0.75rem',
color: '#666',
}, children: ["Unknown block type: ", block._type] }) }));
}
};
// ============================================================================
// AUTHOR COMPONENT
// ============================================================================
const DefaultAuthor = ({ author }) => ((0, jsx_runtime_1.jsxs)("div", { style: {
display: 'flex',
alignItems: 'center',
gap: '0.75rem',
padding: '0.75rem',
backgroundColor: '#f8f9fa',
borderRadius: '0.5rem',
border: '1px solid #e9ecef',
}, children: [author.image && ((0, jsx_runtime_1.jsx)("img", { src: author.image.url || author.image, alt: author.name || 'Author', style: {
width: '40px',
height: '40px',
borderRadius: '50%',
objectFit: 'cover',
} })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: {
fontWeight: '600',
fontSize: '0.875rem',
color: '#212529',
}, children: author.name || 'Unknown Author' }), author.bio && ((0, jsx_runtime_1.jsx)("div", { style: {
fontSize: '0.75rem',
color: '#6c757d',
marginTop: '0.125rem',
}, children: author.bio }))] })] }));
// ============================================================================
// LOADING PLACEHOLDER
// ============================================================================
const LoadingPlaceholder = () => ((0, jsx_runtime_1.jsxs)("div", { style: {
padding: '2rem',
textAlign: 'center',
color: '#666',
}, children: [(0, jsx_runtime_1.jsx)("div", { style: {
width: '40px',
height: '40px',
border: '3px solid #f3f3f3',
borderTop: '3px solid #0066cc',
borderRadius: '50%',
animation: 'spin 1s linear infinite',
margin: '0 auto 1rem',
} }), (0, jsx_runtime_1.jsx)("p", { children: "Loading content..." })] }));
// ============================================================================
// ERROR DISPLAY
// ============================================================================
const ErrorDisplay = ({ error, onRetry }) => ((0, jsx_runtime_1.jsxs)("div", { style: {
padding: '2rem',
textAlign: 'center',
color: '#dc3545',
backgroundColor: '#f8d7da',
border: '1px solid #f5c6cb',
borderRadius: '0.5rem',
}, children: [(0, jsx_runtime_1.jsx)("div", { style: {
fontSize: '2rem',
marginBottom: '1rem',
}, children: "\u26A0\uFE0F" }), (0, jsx_runtime_1.jsx)("h3", { style: {
fontSize: '1.25rem',
fontWeight: '600',
marginBottom: '0.5rem',
}, children: "Content Error" }), (0, jsx_runtime_1.jsx)("p", { style: {
marginBottom: '1rem',
color: '#721c24',
}, children: error }), onRetry && ((0, jsx_runtime_1.jsx)("button", { onClick: onRetry, style: {
backgroundColor: '#dc3545',
color: 'white',
border: 'none',
padding: '0.5rem 1rem',
borderRadius: '0.25rem',
cursor: 'pointer',
fontSize: '0.875rem',
fontWeight: '500',
}, children: "Try Again" }))] }));
exports.default = exports.DefaultTemplateV2;