use placeholder for service education page

theHandsomestNerd · Oct 2, 2023 · e74f9c3 · e74f9c3
1 parent 1878246
commit e74f9c3
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -4,34 +4,76 @@ Application that serves as the website builder from React Components
 
 ## Description
 
-Client project.
-
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-
+* Mainly for Client projects.
+* This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+* This project uses Sanity CMS to store and manage content.
+* This project has Storybook which is the component library.
+* This project uses Firebase for hosting and deployment.
 
 ## Getting Started
-
 ### Dependencies
-
 * npm
 * tsc
-* firebase
+* storybook - component library for demos
+* firebase - hosting, functions, analytics
+* sanity - cms datastore
+
+### Config
+* .env file - create this file if not already created.
+  ```
+  REACT_APP_RELEASEDATE=2022-11-10
+  REACT_APP_SANITY_PROJECTID=
+  REACT_APP_SANITY_DB=development
+  REACT_APP_API_KEY=
+  REACT_APP_AUTH_DOMAIN=
+  REACT_APP_DATABASE_URL=
+  REACT_APP_PROJECT_ID=
+  REACT_APP_STORAGE_BUCKET=
+  REACT_APP_MESSAGING_SENDER_ID=
+  REACT_APP_APP_ID=
+  REACT_APP_FIREBASE_ANALYTICS_TRACKING_ID=
+  ```
+
+#### Firebase
+* update firebase.json
+* update .firebaserc
+#### Sanity
+* ```cd sanityIo```
+* update all places where sanity project Id is used
+* update all places where project name is used.
+#### Functions
+* ```cd functions```
+* update sanity client with project ID
+* .env file
+  * SANITY_PROJECTID=
+  * SANITY_DB=development
+  * SANITY_API_TOKEN=
+  * SENDGRID_API_KEY=
+  * SENDGRID_FROM_EMAIL=
 
 ### Installing
 #### UI
 * ```npm install```
-
 #### Functions
 * ```cd functions```
 * ```npm install```
+#### Sanity
+* ```cd sanityIo```
+* ```npm install```
 
-### Executing program
+### Development & Executing program
 #### UI
 * ```npm start```
+* navigate in browser to http://localhost:3000/
 #### Functions
 * ```npm serve```
 #### Sanity
+* ```cd sanityIo```
 * ```npm run dev```
+* navigate in browser to http://localhost:3333/
+#### Storybook
+* ```npm runs storybook```
+* navigate in browser to http://localhost:6006/
 
 ### Deployment
 #### First Build UI

diff --git a/src/components/transform-hw/service-education-page/ThwServiceEducationPage.tsx b/src/components/transform-hw/service-education-page/ThwServiceEducationPage.tsx
@@ -11,6 +11,7 @@ import OtherServices from "./OtherServices";
 import {v4 as uuidv4} from 'uuid'
 import PageContext from "../../page-context/PageContext";
 import MediaQueriesContext from "../../media-queries-context/MediaQueriesContext";
+import imagePlaceholderClient from "../../../utils/imagePlaceholderClient";
 
 export const useStyles = makeStyles((theme: Theme) => ({
     root: {
@@ -151,7 +152,7 @@ const ThwServiceEducationPage: FunctionComponent<IProps> = (props) => {
                                                 // backgroundColor: "red",
                                                 backgroundRepeat: "no-repeat",
                                                 backgroundPosition: "center",
-                                                backgroundImage: `url(${urlFor(serviceAmenity.imageSrc).url()})`
+                                                backgroundImage: `url(${imagePlaceholderClient.placeholderOrImage(serviceAmenity.imageSrc)})`
                                             }}
                                             container>