update readme
This commit is contained in:
parent
738ba8b279
commit
cac65e427a
192
README.md
192
README.md
@ -1,35 +1,193 @@
|
|||||||
# Salient
|
# 🌐 OurWorld Web (Salient Template)
|
||||||
|
|
||||||
Salient is a [Tailwind Plus](https://tailwindcss.com/plus) site template built using [Tailwind CSS](https://tailwindcss.com) and [Next.js](https://nextjs.org).
|
**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.
|
||||||
|
|
||||||
## Getting started
|
---
|
||||||
|
|
||||||
To get started with this template, first install the npm dependencies:
|
## 📁 Project Structure
|
||||||
|
|
||||||
```bash
|
```
|
||||||
npm install
|
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.
|
||||||
```
|
```
|
||||||
|
|
||||||
Next, run the development server:
|
---
|
||||||
|
|
||||||
|
## ⚙️ 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
|
```bash
|
||||||
|
git clone https://github.com/your-org/www_ourworld_new.git
|
||||||
|
cd www_ourworld_new
|
||||||
|
npm install
|
||||||
npm run dev
|
npm run dev
|
||||||
```
|
```
|
||||||
|
|
||||||
Finally, open [http://localhost:3000](http://localhost:3000) in your browser to view the website.
|
Visit `http://localhost:3000` to view the site.
|
||||||
|
|
||||||
## Customizing
|
---
|
||||||
|
|
||||||
You can start editing this template by modifying the files in the `/src` folder. The site will auto-update as you edit these files.
|
## ⚙️ Building the Site
|
||||||
|
|
||||||
## License
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
This site template is a commercial product and is licensed under the [Tailwind Plus license](https://tailwindcss.com/plus/license).
|
This will:
|
||||||
|
|
||||||
## Learn more
|
* Run `scripts/generate-people-data.js` to update the people registry
|
||||||
|
* Build a static export into `/out`
|
||||||
|
|
||||||
To learn more about the technologies used in this site template, see the following resources:
|
To preview production:
|
||||||
|
|
||||||
- [Tailwind CSS](https://tailwindcss.com/docs) - the official Tailwind CSS documentation
|
```bash
|
||||||
- [Next.js](https://nextjs.org/docs) - the official Next.js documentation
|
npm run start
|
||||||
- [Headless UI](https://headlessui.dev) - the official Headless UI documentation
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✨ 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/)
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user