This blog is a personal project created by Manish Tamang. It was conceived during my early days of learning Next.js, at a time when the shift from the pages router to the app router had just taken place. I initially started with Stablo templates, and then embarked on the journey to customise and make it my own.
This project served as a perfect practical learning experience. Through reverse engineering and meticulous code dissection, I aimed to solidify my understanding of Next.js's app router concepts. It is worth noting that all of the authors you see featured in this blog are actually my friends.
Here's a glimpse into the technologies used to build this blog:
Here is the project folder structure:
├── .eslintignore # Files to be ignored by ESLint.
├── .eslintrc # Configuration for ESLint.
├── .gitignore # Files to be ignored by Git.
├── .prettierrc # Configuration for Prettier code formatting.
├── .vscode # Configuration directory for VSCode.
│ └── settings.json # VSCode settings.
├── README.md # Project README.
├── app # Next.js application directory (App Router).
│ ├── (sanity) # Routes related to Sanity Studio.
│ │ ├── layout.tsx # Layout for Sanity Studio.
│ │ └── studio # Sanity Studio routes.
│ │ └── [[...index]]
│ │ ├── head.tsx # Head component for Sanity Studio.
│ │ └── page.tsx # Sanity Studio page.
│ ├── (website) # Routes related to the main website.
│ │ ├── about # About page related files.
│ │ │ ├── about.js # About page component.
│ │ │ └── page.js # About page data fetching logic.
│ │ ├── archive # Archive page related files.
│ │ │ ├── archive.js # Archive page component.
│ │ │ └── page.js # Archive page data fetching logic.
│ │ ├── author # Author related files.
│ │ │ └── [slug] # Dynamic author route.
│ │ │ ├── default.js # Author page default component.
│ │ │ └── page.js # Author page data fetching logic.
│ │ ├── contact # Contact page related files.
│ │ │ ├── contact.js # Contact page component.
│ │ │ └── page.js # Contact page data fetching logic.
│ │ ├── home.js # Home page component.
│ │ ├── layout.tsx # Root layout for website pages.
│ │ ├── page.js # Home page data fetching logic.
│ │ └── post # Post related files.
│ │ └── [slug] # Dynamic post route.
│ │ ├── default.js # Post page default component.
│ │ ├── opengraph-todo.js # Open Graph image generator.
│ │ └── page.js # Post page data fetching logic.
│ ├── api # API routes.
│ │ └── hello # Example API route.
│ │ └── route.ts # API route handler.
│ ├── favicon.ico # Favicon file
│ ├── layout.tsx # Root layout of the app.
│ └── providers.jsx # Theme provider
├── components # Reusable React components.
│ ├── blog # Blog related components.
│ │ ├── authorCard.js # Author card component.
│ │ └── category.js # Category label component.
│ ├── container.js # Container component for page layouts.
│ ├── featured.js # Featured post component.
│ ├── footer.js # Footer component.
│ ├── layout.js # Layout component (legacy).
│ ├── navbar.js # Main navbar component
│ ├── navbaralt.js # Alternate navbar component (legacy)
│ ├── ogimage.js # Open Graph image component.
│ ├── postalt.js # Alternate post component.
│ ├── postlist.js # Post list item component.
│ ├── sidebar.js # Sidebar component.
│ ├── themeSwitch.js # Theme switch component.
│ └── ui # UI related components.
│ ├── label.js # Label component.
│ ├── search.js # Search input component.
│ └── time.js # Time display component.
├── lib # Library files.
│ └── sanity # Sanity.io related files.
│ ├── client.ts # Sanity client setup and data fetching.
│ ├── config.ts # Sanity configuration.
│ ├── groq.js # GROQ queries.
│ ├── image.js # Image helper functions.
│ ├── plugins # Sanity Studio plugins.
│ │ ├── portabletext.js # Portable Text serialization setup.
│ │ └── previews # Sanity Studio previews.
│ │ ├── BlogPreview.js
│ │ ├── BlogPreview.jsx
│ │ ├── IframePreview.css
│ │ ├── PagePreview.js
│ │ └── PagePreview.jsx
│ └── settings.tsx # Sanity Singleton setup plugin
│ └── schemas # Sanity schema definitions.
│ ├── author.js # Author schema.
│ ├── blockContent.js # Block content schema.
│ ├── category.js # Category schema.
│ ├── index.ts # Entry point for schemas.
│ ├── post.js # Post schema.
│ ├── previews # Preview components.
│ │ ├── iframe.jsx # iFrame Preview component
│ │ └── table.jsx # table preview component
│ └── settings.js # Settings singleton schema
├── next-sitemap.config.js # Sitemap configuration for next-sitemap.
├── next.config.js # Next.js configuration file.
├── package-lock.json # Lock file for npm dependencies.
├── package.json # Project metadata and dependencies.
├── postcss.config.js # PostCSS configuration.
├── public # Public assets (images, fonts, etc.).
│ ├── fonts # Font files.
│ │ ├── Inter-Bold.otf
│ │ └── Inter-Regular.otf
│ └── img # Image files.
│ ├── opengraph.jpg # Open Graph default image
│ └── skeleton.svg # Skeleton loading animation.
├── sanity.cli.ts # Sanity CLI configuration.
├── sanity.config.ts # Sanity studio configuration.
├── styles # Stylesheets.
│ ├── prism.css # Prism CSS for code highlighting.
│ └── tailwind.css # Tailwind CSS styles.
├── tailwind.config.js # Tailwind configuration.
├── tsconfig.json # TypeScript configuration.
└── utils # Utility functions
├── all.js # utility functions
└── upperFirst.js # utility functions