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
|
||||
git clone https://github.com/your-org/www_ourworld_new.git
|
||||
cd www_ourworld_new
|
||||
npm install
|
||||
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
|
||||
- [Next.js](https://nextjs.org/docs) - the official Next.js documentation
|
||||
- [Headless UI](https://headlessui.dev) - the official Headless UI documentation
|
||||
```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/)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user