From d6a8fb63533bc76377ccba0227f1b813e53f2f9f Mon Sep 17 00:00:00 2001 From: yusuf0279 Date: Sun, 28 Jun 2026 10:02:24 +0000 Subject: [PATCH] css readability --- README.md | 153 +++++++++++++++++++++++++++++++-- index.html | 2 - src/css/kit.css | 1 + src/css/layout.css | 2 + src/css/pages.css | 10 +++ src/css/pages/page-23.css | 1 + src/css/pages/page-31.css | 1 + src/css/pages/page-32.css | 1 + src/css/pages/page-36.css | 1 + src/css/pages/page-48.css | 1 + src/css/pages/service-3159.css | 1 + src/css/pages/service-3160.css | 1 + src/css/pages/service-3172.css | 1 + src/css/pages/service-3179.css | 1 + src/css/pages/service-3186.css | 1 + src/css/pages/service-3192.css | 1 + src/css/pages/service-3199.css | 1 + src/css/pages/service-3206.css | 1 + src/css/pages/service-35.css | 1 + src/css/services.css | 9 ++ src/css/theme.css | 21 +++++ src/data/extraCss.js | 28 ------ src/data/serviceCss.js | 13 --- src/hooks/elementorCss.js | 74 ---------------- src/hooks/useLayoutInit.js | 6 -- src/main.jsx | 5 ++ 26 files changed, 206 insertions(+), 132 deletions(-) create mode 100644 src/css/kit.css create mode 100644 src/css/layout.css create mode 100644 src/css/pages.css create mode 100644 src/css/pages/page-23.css create mode 100644 src/css/pages/page-31.css create mode 100644 src/css/pages/page-32.css create mode 100644 src/css/pages/page-36.css create mode 100644 src/css/pages/page-48.css create mode 100644 src/css/pages/service-3159.css create mode 100644 src/css/pages/service-3160.css create mode 100644 src/css/pages/service-3172.css create mode 100644 src/css/pages/service-3179.css create mode 100644 src/css/pages/service-3186.css create mode 100644 src/css/pages/service-3192.css create mode 100644 src/css/pages/service-3199.css create mode 100644 src/css/pages/service-3206.css create mode 100644 src/css/pages/service-35.css create mode 100644 src/css/services.css create mode 100644 src/css/theme.css delete mode 100644 src/data/extraCss.js delete mode 100644 src/data/serviceCss.js delete mode 100644 src/hooks/elementorCss.js diff --git a/README.md b/README.md index a36934d..5179883 100644 --- a/README.md +++ b/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 `` tags (`index.html`) — Theme stylesheets from `public/wp-content/themes/rakar/` +4. **Behavior** comes from the original Rakar theme JS loaded via `