fix: use placeholder image if none-exists, update readme

README.md

@@ -34,21 +34,33 @@ yarn add react-linkedinbadge
 
 
 ### Example Usage
-```fortran
+```jsx
 import React from 'react';
-import LinkedInBadge from 'react-linkedinbadge';
+import LinkedInBadge, {LinkedInBadgeProps} from 'react-linkedinbadge';
+/* 
+ * Import the react-linkedinbadge stylesheet so that the badge is styled correctly
+ * This is required as the rendering of the badge is now done fully within the React component
+ * and not through a server-side script. To utilize the server-side method, set the 
+ * `useLinkedInApiUrlPure` prop to `true` when using the `LinkedInBadge` component.
+ */
 import 'react-linkedinbadge/src/LinkedInBadge.css';
 
 const App = () => {
+  const LinkedInBadgeProps: LinkedInBadgeProps = {
+   /**
+      * The vanity is the part of your LinkedIn profile URL that 
+      * comes after the last forward slash, 
+      * e.g. for https://www.linkedin.com/in/your-vanity, 
+      * the vanity is `your-vanity`
+      */
+    vanity: "your-linkedin-vanity",
+    size: "large",
+    theme: "light",
+    type: "vertical",
+  };
   return (
 	 <div>
-		<LinkedInBadge
-		  vanity="your-linkedin-vanity" // the vanity is the part of your LinkedIn profile URL that comes after the last forward slash, e.g. for https://www.linkedin.com/in/your-vanity, the vanity is `your-vanity`
-		  id="MyLinkedInBadge" // id is only required if you want to load more than one badge on the same page
-		  size="large"
-		  theme="light"
-		  type="vertical"
-		/>
+		<LinkedInBadge {...LinkedInBadgeProps}/>
 	 </div>
   );
 };
@@ -111,7 +123,6 @@ Full example:
  `LinkedInBadge` is the parent component responsible for rendering the container and basic structure of the LinkedIn badge, while `LIRenderAll` is a child component that handles the rendering and management of the actual badge content.
 
 The reason for this separation is that the badge content needs to be loaded asynchronously from a server, and the `LIRenderAll` component is responsible for making the necessary requests and handling the responses. By separating the concerns, the parent component can render the initial structure, and the child component can take care of the dynamic badge content.
-</details>
 
 ### `LinkedInBadge`
 
@@ -125,6 +136,11 @@ The component uses various hooks and callbacks to manage the state and lifecycle
 
 The separation of concerns between `LinkedInBadge` and `LIRenderAll` allows for a more modular and maintainable codebase, where the responsibilities of rendering the badge container and managing the dynamic badge content are clearly separated.
 
+Note, with versions 5.11 and above, by default, `LIRenderAll` is not used to render the badge content. The badge content is fully  rendered on the client-side and within the `LinkedInBadge` component itself. This allows for better control and management of the badge rendering process, as well as improved performance and reliability. 
+To use the `LIRenderAll` component, set the `useLinkedInApiUrlPure` prop to `true` when using `LinkedInBadge` component.
+</details>
+
+
 ## Improvements over LinkedIn's Implementation
 
 This implementation improves upon LinkedIn's provided code in the following ways:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-linkedinbadge",
-  "version": "5.12.2028",
+  "version": "5.12.2029",
   "description": "The LinkedIn Badge Rendering React Component is a powerful tool for displaying LinkedIn badges on websites. With customizable options and support for both profile and entity badges, this component offers improved features over LinkedIn's basic implementation. It enhances code organization by separating badge container rendering from dynamic content rendering and efficiently handles asynchronous loading of content from LinkedIn servers. This component also allows for easy management of multiple badges on a page and provides a callback function for tracking badge rendering completion. Make sure to review the licensing information for proper usage.",
   "repository": {
     "type": "git",
@@ -77,6 +77,7 @@
   "files": [
     "lib",
     "src/LinkedInBadge.css",
+    "src/LinkedInBadge.min.css",
     "LICENSE.md",
     "types",
     "README.md",
@@ -157,6 +158,14 @@
       "default": "./src/LinkedInBadge.css",
       "umd": "./src/LinkedInBadge.css",
       "css": "./src/LinkedInBadge.css"
+    },
+    "./src/LinkedInBadge.min.css": {
+      "import": "./src/LinkedInBadge.css",
+      "require": "./src/LinkedInBadge.css",
+      "node": "./src/LinkedInBadge.css",
+      "default": "./src/LinkedInBadge.css",
+      "umd": "./src/LinkedInBadge.css",
+      "css": "./src/LinkedInBadge.css"
     }
   },
   "types": "./lib/index.d.ts",