# 🌐 OurWorld Web (Salient Template)

**OurWorld Web** is a statically-exported site built using the [Salient](https://tailwindcss.com/plus) template with **Next.js**, **Tailwind CSS v4**, and **TypeScript**. It showcases people and ventures in a modular and scalable frontend.

---

## 📁 Project Structure

```
www_ourworld_new/
├── .env.local                # Local environment variables
├── public/                   # Public static assets (images, videos)
├── scripts/                  # Utility scripts (generate people)
├── src/
│   ├── app/                  # App routes (people, ventures, pages)
│   │   ├── people/           # Page routes per person
│   │   └── ventures/         # Venture route pages
│   ├── components/
│   │   └── people/           # Individual people components
│   ├── data/                 # Temporary or pre-generated data
│   ├── lib/                  # People data registry (auto-generated)
│   ├── styles/               # Tailwind & global CSS
│   └── videos/               # Local videos
├── docs/                     # Markdown docs for onboarding
├── out/                      # Static export folder after build
├── package.json              # Scripts and dependencies
└── README.md                 # You are here.
```

---

## ⚙️ Technologies

* [Next.js](https://nextjs.org/)
* [Tailwind CSS](https://tailwindcss.com/)
* [React](https://reactjs.org/)
* [TypeScript](https://www.typescriptlang.org/)
* [Headless UI](https://headlessui.dev/)
* [Heroicons](https://heroicons.com/)
* [Nodemailer](https://nodemailer.com/) (optional for contact form)

---

## 🚀 Getting Started

```bash
git clone https://github.com/your-org/www_ourworld_new.git
cd www_ourworld_new
npm install
npm run dev
```

Visit `http://localhost:3000` to view the site.

---

## ⚙️ Building the Site

```bash
npm run build
```

This will:

* Run `scripts/generate-people-data.js` to update the people registry
* Build a static export into `/out`

To preview production:

```bash
npm run start
```

---

## ✨ Adding a Person

1. Create a folder: `public/images/people/jane_doe/`
2. Inside it, place:

   * `index.md` (frontmatter + bio)
   * `jane_doe.jpg` (image)
3. Run:

```bash
node scripts/generate-all-people.js
npm run generate-people-data
npm run build
```

**Frontmatter example:**

```md
---
title: Jane Doe
description: Community Architect
extra:
  socialLinks:
    LinkedIn: https://linkedin.com/in/janedoe
---

Jane builds regenerative systems that empower local communities...
```

The script will:

* Generate a component in `src/components/people/People_Jane_Doe.tsx`
* Create or update `src/app/people/jane_doe/page.tsx`
* Add them to the dynamic people registry

---

## 🧠 Anatomy of a Person

### Component (`People_Jane_Doe.tsx`)

```tsx
export const data = [{
  name: 'Jane Doe',
  role: 'Community Architect',
  imageUrl: '/images/people/jane_doe/jane_doe.jpg',
  xUrl: '#',
  linkedinUrl: 'https://linkedin.com/in/janedoe',
}]

const biography = `<p class="text-lg/7">Jane builds regenerative systems...</p>`

export function People_Jane_Doe() {
  return <PersonTemplate personData={data[0]} biography={biography} />
}
```

### Page (`/people/jane_doe/page.tsx`)

```tsx
export default function JaneDoePage() {
  return (
    <>
      <Header_darkbg />
      <main>
        <People_Jane_Doe />
        <CallToAction />
        <Faqs />
      </main>
      <Footer />
    </>
  )
}
```

---

## 📚 Scripts

| Script                                | Description                                |
| ------------------------------------- | ------------------------------------------ |
| `npm run dev`                         | Start local dev server                     |
| `npm run build`                       | Export static HTML & run data generation   |
| `npm run generate-people-data`        | Regenerate peopleData.ts from all profiles |
| `node scripts/generate-all-people.js` | Parse markdown, images → full pages        |

---

## 📄 Docs

* [`docs/adding-people.md`](docs/adding-people.md) – Step-by-step onboarding
* [`docs/gmail-setup-guide.md`](docs/gmail-setup-guide.md) – Email auth

---

## 🧹 Code Quality

* ESLint + Prettier + Tailwind Plugin
* TypeScript strict mode
* Modular file structure

---

## 🔐 License

This project is based on a **Tailwind Plus** license. You may modify and build on top of it, but redistribution of the template or components is **not permitted**.

See [`LICENSE.md`](./LICENSE.md) for details.

---

## 🧠 Learn More

* [Next.js Documentation](https://nextjs.org/docs)
* [Tailwind CSS Documentation](https://tailwindcss.com/docs)
* [TypeScript Docs](https://www.typescriptlang.org/docs/)
* [Headless UI](https://headlessui.dev/)
* [Heroicons](https://heroicons.com/)