[Penify] Full Repo Documentation

src/app/(about)/about/page.js

@@ -8,6 +8,12 @@ export const metadata = {
   description: `Here are some details about my self.`,
 };
 
+/**
+ * Renders the main page of the application with an introduction section,
+ * skills showcase, and a contact form to get in touch.
+ *
+ * @returns {JSX.Element} - The JSX element representing the about page.
+ */
 export default function About() {
   return (
     <>

src/app/(about)/contact/page.js

@@ -9,6 +9,11 @@ export const metadata = {
 };
 
 
+/**
+ * Represents a functional component that renders a contact section with a Lottie animation and a contact form.
+ *
+ * @returns {JSX.Element} - A React JSX element representing the contact section.
+ */
 export default function Contact() {
   return (
     <section className="w-full h-auto md:h-[75vh] border-b-2 border-solid border-dark dark:border-light flex  flex-col md:flex-row items-center justify-center text-dark dark:text-light">

src/app/blogs/[slug]/page.js

@@ -6,10 +6,32 @@ import { allBlogs } from "contentlayer/generated";
 import { slug } from "github-slugger";
 import Image from "next/image";
 
+/**
+ * Generates static parameters for blog slugs.
+ *
+ * @async
+ * @returns {Array<{ slug: string }>} An array of objects containing the slug for each blog.
+ *
+ * @throws {Error} If there is an error processing the blogs.
+ */
 export async function generateStaticParams() {
   return allBlogs.map((blog) => ({ slug: blog._raw.flattenedPath }));
 }
 
+/**
+ * Generates metadata for a blog post based on the provided parameters.
+ *
+ * @async
+ * @function generateMetadata
+ * @param {Object} params - An object containing the parameters for the function.
+ * @param {string} params.slug - The slug of the blog post to fetch metadata for.
+ * @returns {Promise<Object|null>} - A Promise that resolves with an object containing blog metadata or null if no blog is found.
+ *
+ * @example
+ * generateMetadata({ slug: 'example-blog' }).then(metadata => {
+ *   console.log(metadata);
+ * });
+ */
 export async function generateMetadata({ params }) {
   const blog = allBlogs.find((blog) => blog._raw.flattenedPath === params.slug);
   if (!blog) {
@@ -56,6 +78,14 @@ export async function generateMetadata({ params }) {
   };
 }
 
+/**
+ * React component that renders an individual blog post page.
+ *
+ * @param {Object} params - The parameters passed to the component.
+ * @param {string} params.slug - The slug of the blog post.
+ *
+ * @returns {JSX.Element} The rendered BlogPage component.
+ */
 export default function BlogPage({ params }) {
   const blog = allBlogs.find((blog) => blog._raw.flattenedPath === params.slug);
 

src/app/categories/[slug]/page.js

@@ -5,6 +5,15 @@ import GithubSlugger, { slug } from "github-slugger";
 
 const slugger = new GithubSlugger();
 
+/**
+ * Generates static parameters for blog paths.
+ *
+ * This function iterates through all published blogs and extracts unique tags,
+ * slugifying them to create category slugs. It then constructs an array of path objects,
+ * each representing a blog category or the 'all' category.
+ *
+ * @returns {Array<{slug: string}>} - An array of path objects, each with a 'slug' property.
+ */
 export async function generateStaticParams() {
   const categories = [];
   const paths = [{ slug: "all" }];
@@ -24,6 +33,33 @@ export async function generateStaticParams() {
   return paths;
 }
 
+/**
+ * Generates metadata for blog pages based on the provided parameters.
+ *
+ * @param {Object} params - The parameters object containing necessary data.
+ * @param {string} params.slug - The slug of the blog or "all" if no specific blog is selected.
+ * @returns {Object} - An object containing the title and description for the blog page.
+ *
+ * @example
+ * const metadata = await generateMetadata({ params: { slug: "javascript" } });
+ * console.log(metadata);
+ * // Output:
+ * // {
+ * //   title: 'JavaScript Blogs',
+ * //   description: 'Learn more about JavaScript through our collection of expert blogs and tutorials'
+ * // }
+ *
+ * @example
+ * const allBlogsMetadata = await generateMetadata({ params: { slug: "all" } });
+ * console.log(allBlogsMetadata);
+ * // Output:
+ * // {
+ * //   title: 'All Blogs',
+ * //   description: 'Learn more about web development through our collection of expert blogs and tutorials'
+ * // }
+ *
+ * @throws {Error} - If the params object is missing or does not contain a slug.
+ */
 export async function generateMetadata({ params }) {
   return {
     title: `${params.slug.replaceAll("-"," ")} Blogs`,
@@ -32,6 +68,13 @@ export async function generateMetadata({ params }) {
 }
 
 
+/**
+ * A React component that renders a category page based on the provided parameters.
+ *
+ * @param {Object} params - The URL parameters.
+ * @param {string} params.slug - The slug of the category to filter by. If 'all', displays all blogs.
+ * @returns {JSX.Element} A React element representing the category page.
+ */
 const CategoryPage = ({ params }) => {
   const allCategories = ["all"];
   const blogs = allBlogs.filter((blog) => {

src/app/layout.js

@@ -53,6 +53,16 @@ export const metadata = {
   },
 };
 
+/**
+ * The root layout component of the application.
+ * This component provides the structure for the entire application,
+ * including the HTML structure, body styling, theme switching script,
+ * header, children components, and footer.
+ *
+ * @param {Object} props - The properties passed to the RootLayout component.
+ * @param {JSX.Element} props.children - The child components to be rendered within the root layout.
+ * @returns {JSX.Element} - The JSX element representing the root layout of the application.
+ */
 export default function RootLayout({ children }) {
   return (
     <html lang="en">

src/app/manifest.js

@@ -1,3 +1,8 @@
+/**
+ * Generates the manifest object for a Next.js application.
+ *
+ * @returns {Object} - The manifest object containing various configuration properties.
+ */
 export default function manifest() {
     return {
       name: 'Next.js App',

src/app/not-found.js

@@ -1,5 +1,15 @@
 import Link from "next/link";
 
+/**
+ * A React component that renders a "404 Page Not Found" error page.
+ *
+ * @returns {JSX.Element} The rendered "404 Page Not Found" page.
+ *
+ * Example usage:
+ * ```
+ * <NotFound />
+ * ```
+ */
 export default function NotFound() {
   return (
     <main className="my-32 w-full dark:bg-dark flex justify-center font-mr">

src/app/page.js

@@ -3,6 +3,13 @@ import HomeCoverSection from "../components/Home/HomeCoverSection";
 import FeaturedPosts from "../components/Home/FeaturedPosts";
 import RecentPosts from "../components/Home/RecentPosts";
 
+/**
+ * The main component representing the home page of the application.
+ * It renders a `main` element containing a cover section, featured posts, and recent posts.
+ *
+ * @function
+ * @returns {JSX.Element} - A JSX representation of the Home component.
+ */
 export default function Home() {
 
   return (

src/components/About/AboutCoverSection.js

@@ -2,6 +2,13 @@ import Image from 'next/image'
 import React from 'react'
 import profileCharacter from "../../../public/character.png"
 
+/**
+ * React functional component that renders an about cover section.
+ * This section includes an image on the left and text content on the right,
+ * featuring a motivational mantra, description, and personal attributes.
+ *
+ * @returns {React.ReactNode} - The rendered AboutCoverSection component.
+ */
 const AboutCoverSection = () => {
   return (
     <section className='w-full md:h-[75vh] border-b-2 border-solid border-dark dark:border-light flex flex-col md:flex-row items-center justify-center text-dark dark:text-light'>

src/components/About/InsightRoll.js

@@ -1,5 +1,12 @@
 import React from "react";
 
+/**
+ * A React component that renders a div containing insights with rolling animation.
+ *
+ * @param {Object} props - The props object for the component.
+ * @param {Array<string>} props.insights - An array of strings representing the insights to be displayed.
+ * @returns {JSX.Element} - The rendered JSX element representing the InsightRoll component.
+ */
 const InsightRoll = ({ insights }) => {
   return (
     <div className="w-full bg-accent dark:bg-accentDark text-light dark:text-dark whitespace-nowrap overflow-hidden">

src/components/About/Skills.js

@@ -14,6 +14,11 @@ const SkillList = [
   "sanity",
 ];
 
+/**
+ * React functional component that renders a section showcasing the skills of the individual.
+ *
+ * @returns {React.ReactNode} - The rendered JSX for the skill list section.
+ */
 const Skills = () => {
   return (
     <section className="w-full flex flex-col p-5 xs:p-10 sm:p-12 md:p-16 lg:p-20 border-b-2 border-solid border-dark dark:border-light

src/components/Blog/BlogDetails.js

@@ -4,6 +4,17 @@ import React from "react";
 import { slug } from "github-slugger";
 import ViewCounter from "./ViewCounter";
 
+/**
+ * React component that displays details about a blog post.
+ *
+ * @param {Object} props - The properties for the BlogDetails component.
+ * @param {Object} props.blog - An object representing the blog post data.
+ * @param {string} props.blogSlug - The slug of the blog post.
+ * @returns {ReactElement} - A React element representing the blog details.
+ *
+ * @example
+ * <BlogDetails blog={blogData} slug="example-slug" />
+ */
 const BlogDetails = ({ blog, slug: blogSlug }) => {
   return (
     <div className="px-2  md:px-10 bg-accent dark:bg-accentDark text-light dark:text-dark py-2 flex items-center justify-around flex-wrap text-lg sm:text-xl font-medium mx-5  md:mx-10 rounded-lg">

src/components/Blog/BlogLayoutOne.js

@@ -4,6 +4,16 @@ import Link from "next/link";
 import Image from "next/image";
 import { slug } from "github-slugger";
 
+/**
+ * Renders a blog layout with a given blog object.
+ *
+ * @param {Object} props - The component props.
+ * @param {Object} props.blog - The blog object containing details about the blog post.
+ * @returns {JSX.Element} - The rendered blog layout.
+ *
+ * Example:
+ * <BlogLayoutOne blog={blogData} />
+ */
 const BlogLayoutOne = ({ blog }) => {
   return (
     <div className="group inline-block overflow-hidden rounded-xl">

src/components/Blog/BlogLayoutThree.js

@@ -3,6 +3,21 @@ import Image from "next/image";
 import Link from "next/link";
 import React from "react";
 
+/**
+ * A React component representing a blog layout with specific styling and functionality.
+ *
+ * @param {Object} props - The props for the BlogLayoutThree component.
+ * @param {Object} props.blog - The blog object containing details about the blog post.
+ * @param {string} props.blog.url - The URL of the blog post.
+ * @param {Object} props.blog.image - The image object containing details about the blog's image.
+ * @param {string} props.blog.image.filePath - The file path of the blog's image.
+ * @param {string} props.blog.image.blurhashDataUrl - The blurhash data URL for the image.
+ * @param {string} props.blog.title - The title of the blog post.
+ * @param {Array<string>} props.blog.tags - An array of tags associated with the blog post.
+ * @param {Date} props.blog.publishedAt - The publication date of the blog post.
+ *
+ * @returns {React.ReactNode} - The rendered BlogLayoutThree component.
+ */
 const BlogLayoutThree = ({ blog }) => {
   return (
     <div className="group flex flex-col items-center text-dark dark:text-light">

src/components/Blog/BlogLayoutTwo.js

@@ -3,6 +3,13 @@ import Image from "next/image";
 import Link from "next/link";
 import React from "react";
 
+/**
+ * A React component representing the layout of a blog post.
+ *
+ * @param {Object} props - The props for the BlogLayoutTwo component.
+ * @param {Object} props.blog - The blog post data to be displayed.
+ * @returns {JSX.Element} - The rendered BlogLayoutTwo component.
+ */
 const BlogLayoutTwo = ({ blog }) => {
   return (
     <div className="group grid grid-cols-12 gap-4 items-center text-dark dark:text-light">

src/components/Blog/Categories.js

@@ -2,6 +2,17 @@ import { slug } from "github-slugger";
 import React from "react";
 import Category from "./Category";
 
+/**
+ * Renders a container with category links.
+ *
+ * @param {Object} props - The component props.
+ * @param {Array<String>} props.categories - An array of category slugs.
+ * @param {String} props.currentSlug - The current active category slug.
+ * @returns {JSX.Element} A JSX element representing the Categories component.
+ *
+ * @example
+ * <Categories categories={['technology', 'finance', 'health']} currentSlug='technology' />
+ */
 const Categories = ({ categories, currentSlug }) => {
   return (
     <div className=" px-0 md:px-10 sxl:px-20 mt-10 border-t-2 text-dark dark:text-light border-b-2 border-solid border-dark dark:border-light py-4 flex items-start flex-wrap font-medium mx-5 md:mx-10">

src/components/Blog/Category.js

@@ -2,6 +2,16 @@ import { cx } from "@/src/utils";
 import Link from "next/link";
 import React from "react";
 
+/**
+ * A component representing a category link with optional styling.
+ *
+ * @param {Object} props - The properties for the Category component.
+ * @param {string} [props.link="#"] - The URL to which the link should navigate. Default is '#'.
+ * @param {string} props.name - The name of the category, displayed as the text of the link.
+ * @param {boolean} [props.active=false] - Whether the category is currently active. If true, applies different styles.
+ * @param {...Object} props - Additional properties to be spread onto the Link component.
+ * @returns {React.ReactNode} - The rendered Category component as a styled <Link>.
+ */
 const Category = ({ link = "#", name, active, ...props }) => {
   return (
     <Link

src/components/Blog/RenderMdx.js

@@ -8,6 +8,16 @@ const mdxComponents = {
     Image
 }
 
+/**
+ * React component that renders Markdown content using MDX.
+ *
+ * @param {Object} props - The component's properties.
+ * @param {Object} props.blog - The blog object containing the Markdown content to render.
+ * @returns {JSX.Element} - The rendered JSX element.
+ *
+ * @example
+ * <RenderMdx blog={blogData} />
+ */
 const RenderMdx = ({blog}) => {
 
     const MDXContent = useMDXComponent(blog.body.code)