Getting Started

Welcome to The Lab Notebook! This guide will help you get up and running with the project, whether you’re contributing to the codebase or setting up your own instance.

Prerequisites

Node.js 18.0 or later
npm or pnpm (recommended)
Git for version control

Installation

Clone the repository:


git clone <repository-url>
cd the-lab-notebook

Install dependencies:
```
npm install
# or
pnpm install
```
Start the development server:
```
npm run dev
```
Open your browser: Navigate to http://localhost:3000

Project Overview

The Lab Notebook is built with:

Next.js 15 - React framework for production
Nextra - Documentation framework built on Next.js
MDX - Markdown with embedded React components
Tailwind CSS - Utility-first CSS framework

Key Concepts

Content Structure

Content is organized in the content/ directory:

content/index.mdx - Homepage content
content/projects.mdx - Projects listing page
content/project/[project-name]/ - Individual project directories

Project Metadata

Each project directory contains a _meta.js file that defines:

Navigation order and display names
Page visibility (hidden/visible)
Project-specific metadata

Example _meta.js:


export default {
  index: 'Project Overview',
  'getting-started': 'Getting Started',
  conclusion: {
    title: 'Conclusion',
    display: 'hidden',
  },
}

Components

The project includes several reusable components:

FeatureCard - Project showcase cards
LightboxImage - Images with lightbox functionality
Project utilities - Helpers for project content

Your First Contribution

Create a new project:
```
mkdir content/project/my-new-project
```

Add metadata file:


// content/project/my-new-project/_meta.js
const meta = {
  index: 'Overview',
}
 
export default meta

Create content file:


# My New Project
 
Description of your project here.

Test your changes:
```
npm run dev
```

Next Steps

Read the Development Guide for detailed development workflows
Explore Component Documentation to understand available components
Check Script Documentation for build and maintenance tools
Review Utility Documentation for helper functions

Need Help?

Check existing documentation in the /docs folder
Look at existing project examples in content/project/
Run npm run check to verify links and linting

Common Commands


# Development
npm run dev          # Start dev server
npm run build        # Build for production
npm run start        # Start production server
 
# Quality checks
npm run lint         # Run ESLint
npm run verify-links # Check all internal links
npm run check        # Run both lint and verify-links
 
# Utilities
node scripts/create-placeholders.js  # Generate placeholder images

Ready to start exploring? Head to the development guide or dive into the codebase!