+
+ MERNMail Blog
+
+
+ Our blog has email-related tips and updates about MERNMail.
+
+
+ RSS feed
+
+
+
+
+ );
+}
+
+export default Blog;
diff --git a/app/(root)/blog/page/[id]/page.jsx b/app/(root)/blog/page/[id]/page.jsx
new file mode 100644
index 0000000..315db99
--- /dev/null
+++ b/app/(root)/blog/page/[id]/page.jsx
@@ -0,0 +1,74 @@
+import { Rss } from "lucide-react";
+import Link from "next/link";
+import BlogCards from "@/components/BlogCards";
+
+export const dynamic = "force-static";
+
+export async function generateMetadata({ params }) {
+ const obtainedParams = await params;
+
+ return {
+ title: "Blog - MERNMail",
+ description:
+ "Welcome to the MERNMail Blog! Explore our latest blog posts featuring email tips. Stay tuned for the latest MERNMail updates.",
+ openGraph: {
+ title: "Blog - MERNMail",
+ description:
+ "Welcome to the MERNMail Blog! Explore our latest blog posts featuring email tips. Stay tuned for the latest MERNMail updates.",
+ url: `${process.env.NEXT_PUBLIC_WEBSITE_URL}/blog/page/${params.id}`,
+ type: "website",
+ images: [
+ {
+ url: `${process.env.NEXT_PUBLIC_WEBSITE_URL}/metadata/mernmail-cover.png`,
+ width: 2560,
+ height: 1440,
+ alt: "Blog - MERNMail"
+ }
+ ]
+ },
+ twitter: {
+ card: "summary_large_image",
+ site: "@MERNMail",
+ title: "Blog - MERNMail",
+ description:
+ "Welcome to the MERNMail Blog! Explore our latest blog posts featuring email tips. Stay tuned for the latest MERNMail updates.",
+ images: [
+ `${process.env.NEXT_PUBLIC_WEBSITE_URL}/metadata/mernmail-cover.png`
+ ],
+ creator: "@MERNMail"
+ }
+ };
+}
+
+async function Blog(props) {
+ const params = await props.params;
+ // Optionally, you can fetch some initial data here if needed.
+ let id = parseInt(params.id);
+ if (isNaN(id)) id = 1;
+
+ return (
+
+
+ MERNMail Blog
+
+
+ Our blog has email-related tips and updates about MERNMail.
+
+
+ RSS feed
+
+
+
+
+ );
+}
+
+export default Blog;
diff --git a/app/api/revalidate/route.js b/app/api/revalidate/route.js
new file mode 100644
index 0000000..c552be3
--- /dev/null
+++ b/app/api/revalidate/route.js
@@ -0,0 +1,80 @@
+/**
+ * This code is responsible for revalidating the cache when a post or author is updated.
+ *
+ * It is set up to receive a validated GROQ-powered Webhook from Sanity.io:
+ * https://www.sanity.io/docs/webhooks
+ *
+ * 1. Go to the API section of your Sanity project on sanity.io/manage or run `npx sanity hook create`
+ * 2. Click "Create webhook"
+ * 3. Set the URL to https://YOUR_NEXTJS_SITE_URL/api/revalidate
+ * 4. Dataset: Choose desired dataset or leave at default "all datasets"
+ * 5. Trigger on: "Create", "Update", and "Delete"
+ * 6. Filter: _type == "blog"
+ * 7. Projection: Leave empty
+ * 8. Status: Enable webhook
+ * 9. HTTP method: POST
+ * 10. HTTP Headers: Leave empty
+ * 11. API version: v2023-08-08
+ * 12. Include drafts: No
+ * 13. Secret: Set to the same value as SANITY_REVALIDATE_SECRET (create a random secret if you haven't yet)
+ * 14. Save the cofiguration
+ */
+
+import { isValidSignature, SIGNATURE_HEADER_NAME } from "@sanity/webhook";
+import { client } from "@/sanity/lib/client";
+import { revalidatePath } from "next/cache";
+import { NextResponse } from "next/server";
+
+const secret = `${process.env.SANITY_WEBHOOK_SECRET}`;
+
+export async function POST(req) {
+ const body = await req.json();
+ const rawBody = JSON.stringify(body);
+
+ if (
+ !(await isValidSignature(
+ rawBody,
+ req.headers.get(SIGNATURE_HEADER_NAME) ?? "",
+ secret.trim()
+ ))
+ ) {
+ return NextResponse.json({ message: "Invalid signature" }, { status: 401 });
+ }
+
+ try {
+ if (body._type == "blog") {
+ if (body.slug.current) {
+ revalidatePath(`/blog/${body.slug.current}`);
+ revalidatePath("/sitemap.xml");
+ revalidatePath("/rss.xml");
+ }
+ revalidatePath("/blog");
+
+ // Change in /blog/page/[id] route and in BlogCards component too!
+ const cardsPerPage = 6;
+
+ const totalPostsQuery = `count(*[_type == 'blog'])`;
+ const totalPosts = await client.fetch(
+ totalPostsQuery,
+ {},
+ { cache: "no-store" }
+ );
+
+ const totalPages = Math.ceil(totalPosts / cardsPerPage);
+ for (let i = 1; i <= totalPages + 1; i++) {
+ revalidatePath(`/blog/page/${i.toString()}`);
+ }
+
+ return NextResponse.json({
+ message: `Revalidated "${body._type}" with slug "${body.slug.current}"`
+ });
+ }
+
+ return NextResponse.json({ message: "No managed type" });
+ } catch (err) {
+ return NextResponse.json(
+ { message: "Error revalidating" },
+ { status: 500 }
+ );
+ }
+}
diff --git a/app/rss.xml/route.js b/app/rss.xml/route.js
new file mode 100644
index 0000000..3f4da22
--- /dev/null
+++ b/app/rss.xml/route.js
@@ -0,0 +1,49 @@
+import { NextResponse } from "next/server";
+import RSS from "rss";
+import { client, urlFor } from "@/sanity/lib/client";
+import { toHTML } from "@portabletext/to-html";
+
+export const dynamic = "force-static";
+
+export async function GET() {
+ const postsQuery = `*[_type == 'blog'] | order(_createdAt desc) {
+ title,
+ "slug": slug.current,
+ content,
+ titleImage,
+ _createdAt
+ }`;
+
+ const posts = await client.fetch(postsQuery);
+
+ const feed = new RSS({
+ title: "MERNMail Blog",
+ description: "Explore the latest blog posts from MERNMail",
+ feed_url: `${process.env.NEXT_PUBLIC_WEBSITE_URL}/rss.xml`,
+ site_url: `${process.env.NEXT_PUBLIC_WEBSITE_URL}`,
+ image_url: `${process.env.NEXT_PUBLIC_WEBSITE_URL}/metadata/mernmail-cover.png`,
+ language: "en-US",
+ pubDate: new Date().toUTCString()
+ });
+
+ posts.forEach((post) => {
+ feed.item({
+ title: post.title,
+ description: toHTML(post.content),
+ url: `${process.env.NEXT_PUBLIC_WEBSITE_URL}/blog/${post.slug}`,
+ date: new Date(post._createdAt).toUTCString(),
+ enclosure: {
+ url: post.titleImage
+ ? urlFor(post.titleImage).url()
+ : `${process.env.NEXT_PUBLIC_WEBSITE_URL}/blog-missing.png`
+ },
+ author: "MERNMail"
+ });
+ });
+
+ return new NextResponse(feed.xml({ indent: true }), {
+ headers: {
+ "Content-Type": "application/xml"
+ }
+ });
+}
diff --git a/components/BlogCards.jsx b/components/BlogCards.jsx
new file mode 100644
index 0000000..228ee3e
--- /dev/null
+++ b/components/BlogCards.jsx
@@ -0,0 +1,151 @@
+import React from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { ChevronLeft, ChevronRight, ExternalLink } from "lucide-react";
+import { client, urlFor } from "@/sanity/lib/client";
+import { format } from "date-fns";
+import PropTypes from "prop-types";
+
+const BlogCards = async (props) => {
+ "use server";
+
+ // Change in /blog/page/[id] route and in /api/revalidate route too!
+ const cardsPerPage = 6;
+ const currentPage = props.page;
+
+ const query = `*[_type == 'blog'] | order(_createdAt desc) {
+ title,
+ smallDescription,
+ "currentSlug": slug.current,
+ titleImage,
+ _createdAt
+ }[${(currentPage - 1) * cardsPerPage}...${currentPage * cardsPerPage}]`;
+
+ const posts = await client.fetch(query, {}, { cache: "no-store" });
+
+ const totalPostsQuery = `count(*[_type == 'blog'])`;
+ const totalPosts = await client.fetch(
+ totalPostsQuery,
+ {},
+ { cache: "no-store" }
+ );
+
+ const totalPages = Math.ceil(totalPosts / cardsPerPage);
+
+ let begPage = currentPage - 2;
+ let endPage = currentPage + 2;
+ if (endPage > totalPages) {
+ begPage -= endPage - totalPages;
+ endPage = totalPages;
+ }
+ if (begPage < 1) {
+ endPage += 1 - begPage;
+ begPage = 1;
+ }
+
+ return (
+ <>
+