194 lines
4.8 KiB
Markdown
194 lines
4.8 KiB
Markdown
# 🌐 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/)
|