🌐 OurWorld Web (Salient Template)

OurWorld Web is a statically-exported site built using the Salient 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
• Tailwind CSS
• React
• TypeScript
• Headless UI
• Heroicons
• Nodemailer (optional for contact form)

---

🚀 Getting Started

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

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:

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:

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

Frontmatter example:

---
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)

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)

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 – Step-by-step onboarding
• 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 for details.

---

🧠 Learn More

• Next.js Documentation
• Tailwind CSS Documentation
• TypeScript Docs
• Headless UI
• Heroicons