@asgerami/zemenay-blog
Version:
Plug-and-play blog system for Next.js - Get a fully functional blog running in minutes with zero configuration
73 lines (72 loc) • 5.82 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
exports.BlogPost = BlogPost;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const supabase_1 = require("../lib/supabase");
const seo_1 = require("../lib/seo");
const SEOHead_1 = require("./SEOHead");
const LoadingStates_1 = require("./LoadingStates");
const useAnalytics_1 = require("../hooks/useAnalytics");
function BlogPost({ slug, className = "", baseUrl }) {
const [post, setPost] = (0, react_1.useState)(null);
const [loading, setLoading] = (0, react_1.useState)(true);
const [error, setError] = (0, react_1.useState)(null);
// Track analytics for this post
(0, useAnalytics_1.useAnalytics)((post === null || post === void 0 ? void 0 : post.id) || null, {
trackViews: true,
trackTimeOnPage: true,
sessionDuration: 30,
});
(0, react_1.useEffect)(() => {
async function fetchPost() {
try {
console.log("Fetching post with slug:", slug);
if (!slug || slug.trim() === "") {
throw new Error("Invalid slug provided");
}
const supabase = (0, supabase_1.getSupabaseClient)();
const { data, error } = await supabase
.from("posts")
.select("*")
.eq("slug", slug.trim())
.single();
console.log("Supabase response:", { data, error });
if (error) {
console.error("Supabase error:", error);
if (error.code === "PGRST116") {
throw new Error("Post not found");
}
throw error;
}
if (!data) {
throw new Error("Post not found");
}
setPost(data);
}
catch (err) {
console.error("Fetch error:", err);
setError(err instanceof Error ? err.message : "Failed to fetch post");
}
finally {
setLoading(false);
}
}
if (slug) {
fetchPost();
}
}, [slug]);
if (loading) {
return ((0, jsx_runtime_1.jsx)("div", { className: `zemenay-blog-post ${className}`, children: (0, jsx_runtime_1.jsxs)("div", { className: "blog-post-skeleton", children: [(0, jsx_runtime_1.jsx)(LoadingStates_1.Skeleton, { height: "3rem", width: "80%", className: "skeleton-title" }), (0, jsx_runtime_1.jsxs)("div", { className: "skeleton-badges", children: [(0, jsx_runtime_1.jsx)(LoadingStates_1.Skeleton, { height: "1.5rem", width: "80px", borderRadius: "20px" }), (0, jsx_runtime_1.jsx)(LoadingStates_1.Skeleton, { height: "1.5rem", width: "60px", borderRadius: "20px" })] }), (0, jsx_runtime_1.jsx)(LoadingStates_1.Skeleton, { height: "1rem", width: "200px", className: "skeleton-meta" }), (0, jsx_runtime_1.jsxs)("div", { className: "skeleton-content", style: { marginTop: "2rem" }, children: [(0, jsx_runtime_1.jsx)(LoadingStates_1.Skeleton, { height: "1.2rem", width: "100%" }), (0, jsx_runtime_1.jsx)(LoadingStates_1.Skeleton, { height: "1.2rem", width: "95%" }), (0, jsx_runtime_1.jsx)(LoadingStates_1.Skeleton, { height: "1.2rem", width: "88%" }), (0, jsx_runtime_1.jsx)(LoadingStates_1.Skeleton, { height: "1.2rem", width: "92%" }), (0, jsx_runtime_1.jsx)(LoadingStates_1.Skeleton, { height: "1.2rem", width: "96%" }), (0, jsx_runtime_1.jsx)(LoadingStates_1.Skeleton, { height: "1.2rem", width: "85%" }), (0, jsx_runtime_1.jsx)(LoadingStates_1.Skeleton, { height: "1.2rem", width: "90%" }), (0, jsx_runtime_1.jsx)(LoadingStates_1.Skeleton, { height: "1.2rem", width: "93%" })] })] }) }));
}
if (error) {
return ((0, jsx_runtime_1.jsx)(LoadingStates_1.FadeIn, { children: (0, jsx_runtime_1.jsx)("div", { className: `zemenay-blog-post ${className}`, children: (0, jsx_runtime_1.jsxs)("div", { className: "error", children: ["Error: ", error] }) }) }));
}
if (!post) {
return ((0, jsx_runtime_1.jsx)(LoadingStates_1.FadeIn, { children: (0, jsx_runtime_1.jsx)("div", { className: `zemenay-blog-post ${className}`, children: (0, jsx_runtime_1.jsx)("div", { className: "not-found", children: "Post not found." }) }) }));
}
// Generate SEO data for this post
const seoData = (0, seo_1.generateSEOFromPost)(post, baseUrl);
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SEOHead_1.SEOHead, { seoData: seoData, baseUrl: baseUrl }), (0, jsx_runtime_1.jsx)(LoadingStates_1.FadeIn, { children: (0, jsx_runtime_1.jsxs)("article", { className: `zemenay-blog-post ${className}`, children: [(0, jsx_runtime_1.jsx)(LoadingStates_1.SlideIn, { direction: "down", delay: 100, children: (0, jsx_runtime_1.jsxs)("header", { className: "post-header", children: [(0, jsx_runtime_1.jsx)("h1", { className: "post-title", children: post.title }), (0, jsx_runtime_1.jsxs)("div", { className: "post-meta", children: [(0, jsx_runtime_1.jsxs)("time", { dateTime: post.created_at, children: ["Published: ", new Date(post.created_at).toLocaleDateString()] }), post.updated_at !== post.created_at && ((0, jsx_runtime_1.jsxs)("time", { dateTime: post.updated_at, children: ["Updated: ", new Date(post.updated_at).toLocaleDateString()] }))] })] }) }), (0, jsx_runtime_1.jsx)(LoadingStates_1.SlideIn, { direction: "up", delay: 200, children: (0, jsx_runtime_1.jsx)("div", { className: "post-content", children: post.content.includes("<") ? ((0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: { __html: post.content } })) : ((0, jsx_runtime_1.jsx)("div", { style: { whiteSpace: "pre-wrap" }, children: post.content })) }) })] }) })] }));
}