css readability
This commit is contained in:
153
README.md
153
README.md
@@ -1,16 +1,151 @@
|
||||
# React + Vite
|
||||
# Profen Engineering — React SPA
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
A React single-page application that recreates [profeneng.com](https://profeneng.com) (WordPress + Elementor + Rakar theme) as a fast, portable frontend.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
## Architecture
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
|
||||
```
|
||||
src/
|
||||
├── main.jsx Entry point — imports all CSS, mounts React
|
||||
├── App.jsx Router setup (BrowserRouter, Routes, lazy pages)
|
||||
├── components/
|
||||
│ ├── Layout.jsx Shared layout wrapper (Header + Footer + Outlet)
|
||||
│ ├── Header.jsx Injects raw Elementor header HTML
|
||||
│ ├── Footer.jsx Injects raw Elementor footer HTML
|
||||
│ └── WhatsAppButton.jsx Custom floating WhatsApp widget (replaces broken plugin)
|
||||
├── pages/
|
||||
│ ├── Home.jsx Page: /
|
||||
│ ├── About.jsx Page: /about
|
||||
│ ├── Services.jsx Page: /service
|
||||
│ ├── ServiceDetail.jsx Page: /service/:slug
|
||||
│ ├── Project.jsx Page: /project
|
||||
│ └── Contact.jsx Page: /contact
|
||||
├── hooks/
|
||||
│ ├── useLayoutInit.js Re-initializes theme JS on route change
|
||||
│ └── useNavFix.js Intercepts links for proper SPA routing
|
||||
├── data/ Raw Elementor HTML content (fetched from WP)
|
||||
│ ├── home-content.html
|
||||
│ ├── about-content.html
|
||||
│ ├── service-content.html
|
||||
│ ├── project-content.html
|
||||
│ ├── contact-content.html
|
||||
│ ├── layout-header.html
|
||||
│ ├── layout-footer.html
|
||||
│ └── servicePages.js Maps slugs to service detail page HTML
|
||||
├── css/ Page-specific Elementor CSS (extracted from WP)
|
||||
│ ├── kit.css Elementor kit CSS (global styles)
|
||||
│ ├── theme.css Rakar theme overrides
|
||||
│ ├── layout.css Header (elementor-945) + Footer (elementor-128) CSS
|
||||
│ ├── pages.css Combined CSS for all 5 main pages
|
||||
│ ├── services.css Combined CSS for all 9 service detail pages
|
||||
│ └── pages/ Individual page CSS files (development reference)
|
||||
│ ├── page-23.css Home page
|
||||
│ ├── page-31.css About page
|
||||
│ ├── page-32.css Services listing
|
||||
│ ├── page-36.css Project page
|
||||
│ ├── page-48.css Contact page
|
||||
│ └── service-*.css Individual service detail pages
|
||||
```
|
||||
|
||||
## React Compiler
|
||||
## Strategy: WordPress-in-React
|
||||
|
||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||
This app uses a "render what WordPress built" approach:
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
1. **Page content** is raw Elementor HTML from WordPress (`src/data/*.html`)
|
||||
2. **Injected via** `dangerouslySetInnerHTML` in page components
|
||||
3. **Styling** arrives from two places:
|
||||
- Build-time CSS imports (`src/css/*.css`) — Elementor's page-specific CSS
|
||||
- Runtime `<link>` tags (`index.html`) — Theme stylesheets from `public/wp-content/themes/rakar/`
|
||||
4. **Behavior** comes from the original Rakar theme JS loaded via `<script>` tags in `index.html`
|
||||
5. **Theme re-initialization** on route change is handled by `useLayoutInit.js` via `requestAnimationFrame` polling
|
||||
|
||||
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
|
||||
### Why This Works
|
||||
|
||||
Elementor pages are self-contained: each page has a unique CSS class (`.elementor-<postId>`) and the HTML references it. By loading ALL page CSS at once and the correct page HTML per route, we get pixel-perfect WordPress output without running PHP.
|
||||
|
||||
## Key Fixes & Workarounds
|
||||
|
||||
| Issue | Solution |
|
||||
|-------|----------|
|
||||
| Elementor lazyload hides background images | Removed `.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded)` CSS that applies `background-image: none !important` (was in `theme.css` — already cleaned) |
|
||||
| Elfsight WhatsApp plugin crashes page | Replaced with custom `WhatsAppButton.jsx` component |
|
||||
| Theme JS not found on route change | `useLayoutInit.js` polls with `requestAnimationFrame` until `window.rakar_content_load_scripts` is available |
|
||||
| SPA links reload page | `useNavFix.js` intercepts same-site links, uses `react-router-dom`'s `useNavigate` |
|
||||
| Missing Elementor JS dependencies | Added `webpack.runtime.min.js` and `frontend-modules.min.js` to `index.html` |
|
||||
| Waypoint plugin 404 | Created empty shim at `public/wp-includes/js/waypoint.min.js` |
|
||||
|
||||
## Setup & Development
|
||||
|
||||
```bash
|
||||
cd react-app
|
||||
npm install
|
||||
npm run dev # Vite dev server (HMR enabled)
|
||||
```
|
||||
|
||||
## Build & Deploy
|
||||
|
||||
```bash
|
||||
npm run build # Outputs to dist/
|
||||
```
|
||||
|
||||
The site is served via a **Python3 HTTP server** on port 8011:
|
||||
|
||||
```bash
|
||||
cd dist && python3 -m http.server 8011
|
||||
```
|
||||
|
||||
No CI/CD pipeline is configured — deploy is manual.
|
||||
|
||||
### Production File Structure
|
||||
|
||||
```
|
||||
dist/
|
||||
├── index.html 7.6 KB
|
||||
├── assets/index-*.css 94 KB (all CSS bundled)
|
||||
├── assets/index-*.js 262 KB (main bundle)
|
||||
├── assets/Home-*.js 70 KB
|
||||
├── assets/About-*.js 27 KB
|
||||
├── assets/Services-*.js 30 KB
|
||||
├── assets/ServiceDetail-*.js 69 KB
|
||||
├── assets/Project-*.js 6 KB
|
||||
├── assets/Contact-*.js 9 KB
|
||||
└── assets/*.wasm (if any)
|
||||
```
|
||||
|
||||
All other assets (theme CSS/JS, Elementor assets, images) are served from `public/wp-content/` and `public/wp-includes/`.
|
||||
|
||||
## CSS Organization
|
||||
|
||||
CSS files in `src/css/` are imported at build time via `main.jsx`. They become part of the single `index-*.css` bundle:
|
||||
|
||||
```js
|
||||
// main.jsx
|
||||
import './css/kit.css'
|
||||
import './css/theme.css'
|
||||
import './css/layout.css'
|
||||
import './css/pages.css'
|
||||
import './css/services.css'
|
||||
```
|
||||
|
||||
To update styles:
|
||||
- **Theme overrides** → edit `theme.css`
|
||||
- **Header/Footer layout** → edit `layout.css`
|
||||
- **Individual page styles** → edit `pages/page-<id>.css`, then regenerate `pages.css`
|
||||
- **Service detail styles** → edit `pages/service-<id>.css`, then regenerate `services.css`
|
||||
|
||||
### Regenerating Combined CSS
|
||||
|
||||
After editing individual page files:
|
||||
|
||||
```bash
|
||||
cat src/css/pages/page-*.css > src/css/pages.css
|
||||
cat src/css/pages/service-*.css > src/css/services.css
|
||||
```
|
||||
|
||||
## Updating Content
|
||||
|
||||
1. Download updated HTML from WordPress
|
||||
2. Replace the corresponding file in `src/data/`
|
||||
3. Update the CSS in `src/css/pages/` if Elementor page CSS changed
|
||||
4. Rebuild: `npm run build`
|
||||
5. Deploy: restart Python server with new `dist/`
|
||||
|
||||
Reference in New Issue
Block a user