This website was developed with:
- Next.js: A powerful React framework for server-side rendering, static site generation, and optimized performance.
- React: For building dynamic and interactive user interfaces.
- MDX: Enables writing rich content with Markdown while seamlessly embedding React components for enhanced interactivity.
- Tailwind CSS: For efficient and highly customizable utility-first styling.
- TypeScript: Provides static typing for better development experience and code quality.
To explore the codebase or run this guide locally for development:
Clone the repository to your local machine and install the required dependencies:
git clone [your-repository-url]
cd taking-notes # Navigate into your project directory
npm install # or yarn install / pnpm install
Once the packages are installed, you can start the development server. This project also includes a watch script for MDX content changes.
npm run dev # or yarn dev / pnpm dev
This project follows a clear, organized structure common in Next.js applications:
├── .next/ # Next.js build output (automatically generated)
├── components/ # Reusable React components for UI and content rendering
│ ├── Footer.tsx
│ ├── MDX.tsx # Component for rendering MDX content
│ ├── Note.tsx # Component for displaying individual notes
│ ├── Page.tsx # General page layout component
│ ├── PostList.tsx # Component to list notes/posts
│ ├── Prose.tsx # Tailwind Typography helper for content styling
│ └── ThemeSelect.tsx # Component for theme toggling
├── lib/ # Utility functions and data fetching logic
│ ├── formatDate.ts
│ ├── mdx.ts # MDX-related helper functions
│ ├── types.ts
│ └── utils.ts
├── pages/ # Next.js pages (routes)
│ ├── posts/ # Dynamic routes for individual notes/posts
│ │ ├── [slug].tsx # Individual note page template
│ │ └── index.tsx # Index page for all notes
│ ├── 404.tsx # Custom 404 error page
│ ├── _app.tsx # Custom App component for global settings
│ ├── _document.tsx # Custom Document component for HTML structure
│ └── index.tsx # Homepage
├── posts/ # Directory for all your MDX note/guide content files
│ └── *.mdx # Individual MDX files for each Posts
├── styles/ # Global CSS styles
│ └── global.css
├── .eslintrc.json # ESLint configuration
├── .gitignore # Files/folders ignored by Git
├── .prettierignore # Files/folders ignored by Prettier
├── README.md # This file
├── next-env.d.ts # TypeScript environment declarations for Next.js
├── next.config.js # Next.js configuration file
├── package-lock.json # npm lock file
├── package.json # Project metadata and dependencies
├── postcss.config.js # PostCSS configuration
├── tailwind.config.js # Tailwind CSS configuration
└── tsconfig.json # TypeScript configuration
This section outlines how to update and manage the content and appearance of your note-taking guide.
Global site settings, such as metadata and environment variables, are primarily managed within next.config.js and potentially environment variables (.env).
- Note.tsx: This component is central to displaying your individual note-taking guide entries.
- MDX.tsx: Handles the rendering of your rich MDX content.
- ThemeSelect.tsx: Provides the user interface for switching between different color themes (e.g., light and dark mode).
- PostList.tsx: Used to display a list of your note-taking guide entries on the main blog/posts page.
Your note-taking guide entries are written in MDX format and stored in the /posts/ directory. Each .mdx file represents a single guide topic or article.
This Next.js application is a static website, making it suitable for deployment on various static hosting platforms. Popular choices include Vercel, Netlify, and GitHub Pages.