[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.`,
 };
 
+/**
+ * Functional component that renders the main page of an application or website.
+ * The component includes sections for cover, skills, and contact information.
+ *
+ * @returns {JSX.Element} - Returns a JSX element representing the main content of the page.
+ */
 export default function About() {
   return (
     <>

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

@@ -9,6 +9,11 @@ export const metadata = {
 };
 
 
+/**
+ * A React component that renders a contact section with a Lottie animation and a contact form.
+ *
+ * @returns {JSX.Element} - The rendered JSX for 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

@@ -10,6 +10,17 @@ export async function generateStaticParams() {
   return allBlogs.map((blog) => ({ slug: blog._raw.flattenedPath }));
 }
 
+/**
+ * Generates metadata for a blog post based on the provided parameters.
+ *
+ * @param {Object} params - The parameters object containing the slug of the blog post.
+ * @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 openGraph and twitter properties, or null if no blog is found.
+ *
+ * Example:
+ * const result = await generateMetadata({ slug: "my-blog-post" });
+ * console.log(result);
+ */
 export async function generateMetadata({ params }) {
   const blog = allBlogs.find((blog) => blog._raw.flattenedPath === params.slug);
   if (!blog) {
@@ -56,6 +67,13 @@ export async function generateMetadata({ params }) {
   };
 }
 
+/**
+ * Generates the blog page content based on the provided parameters.
+ *
+ * @param {Object} params - The route parameters containing the slug of the blog post.
+ * @param {string} params.slug - The unique identifier for the blog post.
+ * @returns {JSX.Element} - The JSX element representing the blog page.
+ */
 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 routing based on published blog tags.
+ *
+ * This function iterates over all blogs to collect unique tag slugs that are marked as published. It constructs a list of paths,
+ * where each path corresponds to a unique tag slug, and includes an additional path for "all" tags.
+ *
+ * @returns {Array} - An array of objects representing the paths to be used in static routing.
+ * Each object has a property 'slug' which is the slugified tag name or 'all'.
+ */
 export async function generateStaticParams() {
   const categories = [];
   const paths = [{ slug: "all" }];
@@ -24,6 +33,25 @@ export async function generateStaticParams() {
   return paths;
 }
 
+/**
+ * Generates metadata for blog pages based on provided parameters.
+ *
+ * @async
+ * @function generateMetadata
+ * @param {Object} params - The parameters object containing the slug.
+ * @param {string} params.slug - The slug of the blog category or 'all' for all blogs.
+ * @returns {Promise<Object>} A promise that resolves to an object containing title and description metadata.
+ *
+ * Example usage:
+ * generateMetadata({ params: { slug: "javascript" } })
+ *   .then(metadata => console.log(metadata));
+ *
+ * This function constructs the metadata for blog pages based on the provided slug. If the slug is 'all',
+ * it sets the title to "Learn more about web development through our collection of expert blogs and tutorials".
+ * Otherwise, it sets the title to include the capitalized version of the slug with spaces replacing hyphens.
+ *
+ * @throws {Error} Throws an error if params or slug are not provided or are invalid.
+ */
 export async function generateMetadata({ params }) {
   return {
     title: `${params.slug.replaceAll("-"," ")} Blogs`,
@@ -32,6 +60,18 @@ export async function generateMetadata({ params }) {
 }
 
 
+/** @typedef {Object} Params - The parameters object passed to the component.
+ * @property {string} slug - The category slug.
+
+ * @typedef {Object} Blog - A blog post object.
+ * @property {Array<string>} tags - An array of tags associated with the blog post.
+
+ * @function CategoryPage
+ * @param {Params} params - The parameters object containing the category slug.
+ * @returns {React.ReactNode} - JSX representing the category page component.
+
+ * This function is a React functional component that renders a category page based on the provided category slug. It filters blogs by their tags and displays them along with the list of available categories.
+ */
 const CategoryPage = ({ params }) => {
   const allCategories = ["all"];
   const blogs = allBlogs.filter((blog) => {

src/app/layout.js

@@ -53,6 +53,18 @@ export const metadata = {
   },
 };
 
+/**
+ * Represents the root layout component of an application.
+ *
+ * @param {Object} props - The props for the RootLayout component.
+ * @param {JSX.Element} props.children - The children components to render within the root layout.
+ * @returns {JSX.Element} The rendered HTML structure with a dark theme switcher script, header, footer, and body content.
+ *
+ * Example:
+ * <RootLayout>
+ *   <SomeChildComponent />
+ * </RootLayout>
+ */
 export default function RootLayout({ children }) {
   return (
     <html lang="en">

src/app/manifest.js

@@ -1,3 +1,17 @@
+/**
+ * Returns the manifest object for the Next.js App.
+ *
+ * @returns {Object} The manifest configuration object.
+ *   - {string} name - The full name of the app.
+ *   - {string} short_name - A shorter version of the app name.
+ *   - {string} description - A brief description of the app.
+ *   - {string} start_url - The URL that the browser should load first when it starts the app.
+ *   - {string} display - The display mode for the app (e.g., 'standalone', 'fullscreen').
+ *   - {Object[]} icons - An array of icon objects to be used in various contexts.
+ *     - {string} src - The path to the icon file.
+ *     - {string} sizes - The dimensions and type of the icon.
+ *     - {string} type - The MIME type of the icon file.
+ */
 export default function manifest() {
     return {
       name: 'Next.js App',

src/app/not-found.js

@@ -1,5 +1,10 @@
 import Link from "next/link";
 
+/**
+ * A functional component that renders a 404 error page indicating that a requested page was not found.
+ *
+ * @returns {JSX.Element} - The rendered JSX for the 404 error page.
+ */
 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,11 @@ import HomeCoverSection from "../components/Home/HomeCoverSection";
 import FeaturedPosts from "../components/Home/FeaturedPosts";
 import RecentPosts from "../components/Home/RecentPosts";
 
+/**
+ * The main component of the home page that renders various sections.
+ *
+ * @returns {JSX.Element} - The JSX element representing the home page.
+ */
 export default function Home() {
 
   return (

src/components/About/AboutCoverSection.js

@@ -2,6 +2,11 @@ import Image from 'next/image'
 import React from 'react'
 import profileCharacter from "../../../public/character.png"
 
+/**
+ * React component representing an About Cover Section with a profile image and inspirational text.
+ *
+ * @returns {JSX.Element} - The rendered JSX element for the About Cover Section.
+ */
 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 element with a rolling animation containing insights text.
+ *
+ * @param {Object} props - The component props.
+ * @param {Array<string>} props.insights - An array of strings representing the insights to be displayed.
+ * @returns {JSX.Element} - The rendered 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 component that renders a section listing skills.
+ *
+ * @returns {JSX.Element} - The rendered JSX element for the Skills component.
+ */
 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/BlogLayoutOne.js

@@ -4,6 +4,32 @@ import Link from "next/link";
 import Image from "next/image";
 import { slug } from "github-slugger";
 
+/**
+ * A React component that displays a blog post layout with various styles and elements.
+ *
+ * @param {Object} props - The component's props.
+ * @param {Object} props.blog - An object representing the blog post data.
+ * @param {string} props.blog.image.filePath - The file path of the blog post image.
+ * @param {string} props.blog.image.blurhashDataUrl - The blur hash data URL for the blog post image.
+ * @param {string} props.blog.title - The title of the blog post.
+ * @param {Array} props.blog.tags - An array of tags associated with the blog post.
+ * @param {string} props.blog.url - The URL of the blog post.
+ *
+ * @returns {JSX.Element} - A React JSX element representing the blog post layout.
+ *
+ * @example
+ * <BlogLayoutOne
+ *   blog={{
+ *     image: {
+ *       filePath: "/path/to/image.jpg",
+ *       blurhashDataUrl: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...",
+ *     },
+ *     title: "Example Blog Post",
+ *     tags: ["example"],
+ *     url: "/blog/example-post"
+ *   }}
+ * />
+ */
 const BlogLayoutOne = ({ blog }) => {
   return (
     <div className="group inline-block overflow-hidden rounded-xl">

src/components/Blog/BlogLayoutThree.js

@@ -3,6 +3,23 @@ import Image from "next/image";
 import Link from "next/link";
 import React from "react";
 
+/**
+ * A React component that renders a blog post layout with specific styling and interactivity.
+ *
+ * @param {Object} props - The properties for the BlogLayoutThree component.
+ * @param {Object} props.blog - An object containing details about the blog post.
+ * @param {string} props.blog.url - The URL of the blog post.
+ * @param {Object} props.blog.image - An object containing image details.
+ * @param {string} props.blog.image.filePath - The file path to the blog post's image.
+ * @param {string} props.blog.image.blurhashDataUrl - The blur hash data URL for the image.
+ * @param {number} props.blog.image.width - The width of the image.
+ * @param {number} props.blog.image.height - The height of the image.
+ * @param {Array<string>} props.blog.tags - An array of tags associated with the blog post.
+ * @param {string} props.blog.title - The title of the blog post.
+ * @param {string} props.blog.publishedAt - The date and time when the blog post was published.
+ *
+ * @returns {JSX.Element} - A React element representing the blog post layout.
+ */
 const BlogLayoutThree = ({ blog }) => {
   return (
     <div className="group flex flex-col 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";
 
+/**
+ * A functional component that renders a list of categories.
+ *
+ * @param {Object} props - The properties passed to the component.
+ * @param {Array<string>} props.categories - An array of category slugs.
+ * @param {string} props.currentSlug - The current category slug being viewed.
+ * @returns {React.ReactNode} - The rendered list of categories as a div element.
+ *
+ * Example:
+ * <Categories categories={['programming', 'science', 'technology']} currentSlug='programming' />
+ */
 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,18 @@ import { cx } from "@/src/utils";
 import Link from "next/link";
 import React from "react";
 
+/**
+ * Represents a category component that renders a link with conditional styling based on its active state.
+ *
+ * @param {Object} props - The properties for the Category component.
+ * @param {string} [props.link="#"] - The URL to which the link points. Defaults to '#'.
+ * @param {string} props.name - The name of the category that will be displayed as the text of the link.
+ * @param {boolean} [props.active=false] - Indicates whether the category is currently active. If true, it will have a different background and text color.
+ * @returns {JSX.Element} - A React element representing the Category component.
+ *
+ * @example
+ * <Category name="JavaScript" link="/javascript" />
+ */
 const Category = ({ link = "#", name, active, ...props }) => {
   return (
     <Link

src/components/Blog/RenderMdx.js

@@ -8,6 +8,17 @@ const mdxComponents = {
     Image
 }
 
+/**
+ * React component that renders MDX content from blog data.
+ *
+ * @param {Object} props - The component props.
+ * @param {BlogPost} props.blog - The blog post containing the MDX content to be rendered.
+ * @returns {JSX.Element} A JSX element representing the rendered MDX content within a styled div.
+ *
+ * @example
+ * // Assuming `blog` is an object fetched from a blog API with MDX content
+ * <RenderMdx blog={blog} />
+ */
 const RenderMdx = ({blog}) => {
 
     const MDXContent = useMDXComponent(blog.body.code)

src/components/Blog/ViewCounter.js

@@ -8,6 +8,17 @@ const ViewCounter = ({ slug, noCount = false, showCount = true }) => {
   const [views, setViews] = useState(0);
 
   useEffect(() => {
+    /**
+     * Asynchronously increments the view count of a resource using Supabase RPC.
+     *
+     * @async
+     * @function incrementView
+     * @param {Object} options - The options object containing necessary parameters.
+     * @param {string} options.slug - The slug text used as an identifier for the resource whose view count needs to be incremented.
+     * @returns {Promise<void>} A promise that resolves when the operation is complete, or rejects if an error occurs.
+     *
+     * @throws {Error} Throws an error if there is an issue with the Supabase RPC call or if an unexpected error occurs during the process.
+     */
     const incrementView = async () => {
       try {
         let { error } = await supabase.rpc("increment", {
@@ -32,6 +43,14 @@ const ViewCounter = ({ slug, noCount = false, showCount = true }) => {
   }, [slug, noCount]);
 
   useEffect(() => {
+    /**
+     * Asynchronously increments the view count for a specific item based on its slug.
+     *
+     * @async
+     * @function
+     * @param {string} slug - The unique identifier (slug) of the item whose views need to be incremented.
+     * @throws {Error} If an error occurs while executing the query or processing the response.
+     */
     const getViews = async () => {
       try {
         let { data, error } = await supabase

src/components/Contact/ContactForm.js

@@ -2,12 +2,22 @@
 import React from "react";
 import { useForm } from "react-hook-form";
 
+/**
+ * A functional component that renders a contact form for submitting project inquiries.
+ *
+ * @returns {JSX.Element} - The rendered contact form.
+ */
 export default function ContactForm() {
   const {
     register,
     handleSubmit,
     formState: { errors },
   } = useForm();
+  /**
+   * Handles form submission by logging the data to the console.
+   *
+   * @param {Object} data - The data submitted from the form.
+   */
   const onSubmit = (data) => console.log(data);
   console.log(errors);
 

src/components/Contact/LottieAnimation.js

@@ -3,6 +3,12 @@ import React from 'react';
 import { DotLottiePlayer } from '@dotlottie/react-player';
 import '@dotlottie/react-player/dist/index.css';
 
+/**
+ * A React component that renders a Lottie animation using the DotLottiePlayer component.
+ *
+ * @function
+ * @returns {JSX.Element} - A JSX element representing the Lottie animation player.
+ */
 const LottieAnimation = () => {
   return (
       <DotLottiePlayer