+
+
- {blogs.length ? (
-
- {blogs.map((blog: Blog) => (
-
- {blog.image && (
-
- )}
+ {/* Articles Grid */}
+
+
+
All Articles
+
{publishedBlogs.length} articles published
+
- {blog.title}
-
- {blog.description && (
- {blog.description}
- )}
+ {publishedBlogs.length ? (
+
+ {publishedBlogs.map((blog: Blog) => {
+ const author = getAuthor(blog.author || "");
- {blog.date && (
-
- {formatDate(blog.date)}
-
- )}
+ return (
+
+ {blog.image && (
+
+
+ {blog.featured && (
+
+ Featured
+
+ )}
+
- ))}
-
No Blogs found
- )}
+
+
+
+ {blog.title}
+
+
+ {blog.description && (
+
+ {blog.description}
+
+ )}
+
+ {blog.tags &&
}
+
+
+
+
+
+
{blog.author}
+
{formatDate(blog.date)}
+
+
+
+
+
+ {blog.readTime || 5}m
+
+
+
+
+ );
+ })}
+
+ ) : (
+
+ )}
+
);
-}
\ No newline at end of file
+}
diff --git a/src/app/blog/tags/[tag]/page.tsx b/src/app/blog/tags/[tag]/page.tsx
new file mode 100644
index 0000000..f21d8d0
--- /dev/null
+++ b/src/app/blog/tags/[tag]/page.tsx
@@ -0,0 +1,111 @@
+import React from "react";
+import type { Blog } from "@/types/globals";
+import { blogs as allBlogs } from "#site/content";
+import PageHeader from "@/components/page-header";
+import Link from "next/link";
+import { Tag } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface TagPageProps {
+ params: {
+ tag: string;
+ };
+}
+
+export default function TagPage({ params }: TagPageProps) {
+ const decodedTag = decodeURIComponent(params.tag);
+
+ const taggedBlogs = allBlogs
+ .filter(
+ (blog: Blog) =>
+ blog.published && blog.tags?.some(tag => tag.toLowerCase() === decodedTag.toLowerCase()),
+ )
+ .sort((a: Blog, b: Blog) => new Date(b.date).getTime() - new Date(a.date).getTime());
+
+ // Get all tags for tag cloud
+ const allTags = Array.from(
+ new Set(
+ allBlogs
+ .filter((blog: Blog) => blog.published && blog.tags)
+ .flatMap((blog: Blog) => blog.tags || []),
+ ),
+ ).sort();
+
+ return (
+
+
+
+
+
+ {/* Tag Cloud */}
+
+ All Tags
+
+ {allTags.map(tag => {
+ const isActive = tag.toLowerCase() === decodedTag.toLowerCase();
+ return (
+
+
+ {tag}
+
+ );
+ })}
+
+
+
+ {/* Tagged Articles */}
+ {taggedBlogs.length ? (
+
+ {taggedBlogs.map((blog: Blog) => (
+
+
+
+ {blog.title}
+
+
+ {blog.description && (
+
+ {blog.description}
+
+ )}
+
+
+ {blog.author}
+ {new Date(blog.date).toLocaleDateString()}
+
+
+ ))}
+
+ ) : (
+
+
+ No articles found with the tag "{decodedTag}".
+
+
+ ← Back to all articles
+
+
+ )}
+
+ );
+}
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
new file mode 100644
index 0000000..00d1e69
Binary files /dev/null and b/src/app/favicon.ico differ
diff --git a/src/app/icon.svg b/src/app/icon.svg
deleted file mode 100644
index 23c440d..0000000
--- a/src/app/icon.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 2f6aeaf..9c0465f 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -11,6 +11,7 @@ import App from "@/components/app";
const lexend = Lexend({ subsets: ["latin"], variable: "--font-lexend" });
export const metadata: Metadata = {
+ metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000"),
title: {
template: "%s | Mdx Blog Template",
default: "Mdx Blog Template",
@@ -31,7 +32,7 @@ export default function RootLayout({
- {SOCIALS.map((social) => (
+ {SOCIALS.map(social => (
@@ -56,22 +55,19 @@ export default function Home() {
))}
- A personal Blog template using{" "}
- Mdx and{" "}
- NextJs14
+ Insights & Stories on AI,{" "}
+ Content Creation & Growth
- {siteConfig.description}
+ Explore how ThinkTapFast helps startups, creators, and businesses scale smarter with
+ AI-powered text, image, and voice content.
- 🎉My Blog
+ 📚 Read the Blog
diff --git a/src/components/app.tsx b/src/components/app.tsx
index daa715d..adc78fc 100644
--- a/src/components/app.tsx
+++ b/src/components/app.tsx
@@ -1,24 +1,14 @@
import React, { PropsWithChildren } from "react";
import SiteHeader from "@/components/site-header";
-import { siteConfig } from "@/config/site";
-import Link from "next/link";
export default function App({ children }: PropsWithChildren) {
return (
diff --git a/src/components/blog-author-header.tsx b/src/components/blog-author-header.tsx
new file mode 100644
index 0000000..4b8394a
--- /dev/null
+++ b/src/components/blog-author-header.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { formatDate } from "@/lib/utils";
+import { getAuthor } from "@/config/authors";
+import { Github, Twitter } from "lucide-react";
+
+interface BlogAuthorHeaderProps {
+ authorName: string;
+ publishDate?: string;
+ readTime?: string;
+}
+
+export function BlogAuthorHeader({ authorName, publishDate, readTime }: BlogAuthorHeaderProps) {
+ const author = getAuthor(authorName);
+
+ // Fallback if author not found in config
+ const authorData = author || {
+ name: authorName,
+ username: authorName.toLowerCase().replace(/\s+/g, ""),
+ avatar: "/images/author/abdelkabir.jpeg",
+ bio: "Blog author",
+ social: {
+ github: undefined,
+ twitter: undefined,
+ },
+ };
+
+ return (
+
+ {/* Publication Info */}
+ {publishDate && (
+
+
+ {readTime && (
+ <>
+ •
+ {readTime} read
+
+ )}
+
+ )}
+
+ {/* Author Section */}
+
+ {/* Author Avatar */}
+
+
+
+
+ {/* Author Details */}
+
+
+
{authorData.name}
+ @{authorData.username}
+
+
+ {authorData.bio && (
+
{authorData.bio}
+ )}
+
+ {/* Social Links */}
+ {(authorData.social?.github || authorData.social?.twitter) && (
+
+ {authorData.social?.github && (
+
+
+ GitHub
+
+ )}
+ {authorData.social?.twitter && (
+
+
+ Twitter
+
+ )}
+
+ )}
+
+
+
+ );
+}
diff --git a/src/components/blog-search.tsx b/src/components/blog-search.tsx
new file mode 100644
index 0000000..6d5d592
--- /dev/null
+++ b/src/components/blog-search.tsx
@@ -0,0 +1,181 @@
+"use client";
+
+import React, { useState, useMemo } from "react";
+import { Search, Filter, X, Calendar, User } from "lucide-react";
+import { Button } from "./ui/button";
+import { cn } from "@/lib/utils";
+import type { Blog } from "@/types/globals";
+
+interface BlogSearchProps {
+ blogs: Blog[];
+ onFilter: (filteredBlogs: Blog[]) => void;
+ className?: string;
+}
+
+export function BlogSearch({ blogs, onFilter, className }: BlogSearchProps) {
+ const [searchTerm, setSearchTerm] = useState("");
+ const [selectedAuthor, setSelectedAuthor] = useState("");
+ const [selectedDateRange, setSelectedDateRange] = useState("");
+ const [showFilters, setShowFilters] = useState(false);
+
+ // Extract unique authors and dates
+ const authors = useMemo(() => {
+ const authorSet = new Set(blogs.map((blog: Blog) => blog.author).filter(Boolean));
+ return Array.from(authorSet);
+ }, [blogs]);
+
+ const dateRanges = useMemo(() => {
+ const currentYear = new Date().getFullYear();
+ return [`${currentYear}`, `${currentYear - 1}`, "Older"];
+ }, []);
+
+ // Filter blogs based on search and filters
+ const filteredBlogs = useMemo(() => {
+ let filtered = blogs;
+
+ // Search filter
+ if (searchTerm) {
+ filtered = filtered.filter(
+ (blog: Blog) =>
+ blog.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+ blog.description?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+ blog.author?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+ blog.tags?.some((tag: string) => tag.toLowerCase().includes(searchTerm.toLowerCase())),
+ );
+ }
+
+ // Author filter
+ if (selectedAuthor) {
+ filtered = filtered.filter((blog: Blog) => blog.author === selectedAuthor);
+ }
+
+ // Date range filter
+ if (selectedDateRange) {
+ const currentYear = new Date().getFullYear();
+ filtered = filtered.filter((blog: Blog) => {
+ const blogYear = new Date(blog.date).getFullYear();
+ if (selectedDateRange === `${currentYear}`) {
+ return blogYear === currentYear;
+ } else if (selectedDateRange === `${currentYear - 1}`) {
+ return blogYear === currentYear - 1;
+ } else if (selectedDateRange === "Older") {
+ return blogYear < currentYear - 1;
+ }
+ return true;
+ });
+ }
+
+ return filtered;
+ }, [blogs, searchTerm, selectedAuthor, selectedDateRange]);
+
+ // Update parent component with filtered results
+ React.useEffect(() => {
+ onFilter(filteredBlogs);
+ }, [filteredBlogs, onFilter]);
+
+ const clearFilters = () => {
+ setSearchTerm("");
+ setSelectedAuthor("");
+ setSelectedDateRange("");
+ };
+
+ const hasActiveFilters = searchTerm || selectedAuthor || selectedDateRange;
+
+ return (
+
+ {/* Search Bar */}
+
+
+ setSearchTerm(e.target.value)}
+ className="w-full rounded-lg border bg-background py-2 pl-10 pr-4 text-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+ />
+
+
+ {/* Filter Toggle */}
+
+
+
+ {hasActiveFilters && (
+
+ )}
+
+
+ {/* Advanced Filters */}
+ {showFilters && (
+
+ {/* Author Filter */}
+
+
+
+
+
+ {/* Date Range Filter */}
+
+
+
+
+
+ )}
+
+ {/* Results Summary */}
+
+ {filteredBlogs.length === blogs.length
+ ? `Showing all ${blogs.length} articles`
+ : `Showing ${filteredBlogs.length} of ${blogs.length} articles`}
+
+
+ );
+}
diff --git a/src/components/blog-sidebar.tsx b/src/components/blog-sidebar.tsx
new file mode 100644
index 0000000..dd91030
--- /dev/null
+++ b/src/components/blog-sidebar.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { TableOfContents } from "./table-of-contents";
+
+interface BlogSidebarProps {
+ className?: string;
+ slug?: string;
+ publishDate?: string;
+ readTime?: number;
+}
+
+export function BlogSidebar({ className, slug, publishDate, readTime }: BlogSidebarProps) {
+ return (
+
+ );
+}
diff --git a/src/components/blog-tags.tsx b/src/components/blog-tags.tsx
new file mode 100644
index 0000000..5d323d8
--- /dev/null
+++ b/src/components/blog-tags.tsx
@@ -0,0 +1,45 @@
+import { Tag } from "lucide-react";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+
+interface BlogTagsProps {
+ tags: string[];
+ className?: string;
+ variant?: "default" | "outline" | "secondary";
+ size?: "sm" | "md" | "lg";
+}
+
+export function BlogTags({ tags, className, variant = "default", size = "md" }: BlogTagsProps) {
+ if (!tags || tags.length === 0) return null;
+
+ const sizeClasses = {
+ sm: "text-xs px-2 py-1",
+ md: "text-sm px-3 py-1",
+ lg: "text-base px-4 py-2",
+ };
+
+ const variantClasses = {
+ default: "bg-primary/10 text-primary hover:bg-primary/20",
+ outline: "border border-primary/20 text-primary hover:border-primary/40",
+ secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ };
+
+ return (
+
+
+ {tags.map(tag => (
+
+ {tag}
+
+ ))}
+
+ );
+}
diff --git a/src/components/client-only.tsx b/src/components/client-only.tsx
new file mode 100644
index 0000000..c50ce27
--- /dev/null
+++ b/src/components/client-only.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+
+interface ClientOnlyProps {
+ children: React.ReactNode;
+ fallback?: React.ReactNode;
+}
+
+export function ClientOnly({ children, fallback = null }: ClientOnlyProps) {
+ const [hasMounted, setHasMounted] = useState(false);
+
+ useEffect(() => {
+ setHasMounted(true);
+ }, []);
+
+ if (!hasMounted) {
+ return <>{fallback};
+ }
+
+ return <>{children};
+}
diff --git a/src/components/header-nav.tsx b/src/components/header-nav.tsx
index 76e7361..29a6e62 100644
--- a/src/components/header-nav.tsx
+++ b/src/components/header-nav.tsx
@@ -9,15 +9,13 @@ export default function HeaderNav() {
const segment = useSelectedLayoutSegment();
return (