@mapvx/website-component 0.5.3 → 0.6.0

package/README.md

@@ -246,6 +246,7 @@ The web component accepts the following input properties to customize its behavi
 | `show-category-filters` | `boolean` | ❌ No      | `true`  | If `true`, shows category filters                                                                |
 | `show-city-filter`      | `boolean` | ❌ No      | `true`  | If `true`, shows city filter                                                                     |
 | `inherit-font-family`   | `boolean` | ❌ No      | `false` | If `true`, inherits font family from parent                                                      |
+| `hide-deals`            | `boolean` | ❌ No      | `false` | If `true`, hides deals and promotional content                                                   |
 
 ### Input Usage Examples
 
@@ -264,6 +265,7 @@ The web component accepts the following input properties to customize its behavi
   default-to-map="true"
   show-category-filters="false"
   show-city-filter="true"
+  hide-deals="true"
 >
 </mapvx-website>
 ```
@@ -282,19 +284,64 @@ npm install @mapvx/website-component-helpers
 
 #### Next.js (App Router)
 
+**1. Install dependencies:**
+
+```bash
+npm install @mapvx/website-component @mapvx/website-component-helpers
+```
+
+**2. Copy the bundle script to your `package.json`:**
+
+```json
+{
+  "scripts": {
+    "copy-bundle": "node copy-bundle.mjs"
+  }
+}
+```
+
+**3. Create `copy-bundle.mjs` in your project root:**
+
+```javascript
+#!/usr/bin/env node
+
+import { existsSync, mkdirSync, copyFileSync } from 'fs'
+import { join } from 'path'
+
+const sourcePath = 'node_modules/@mapvx/website-component/dist/browser/main.js'
+const targetDir = 'public/mapvx-website'
+const targetPath = join(targetDir, 'bundle.js')
+
+if (!existsSync(sourcePath)) {
+  console.error(`❌ Source file not found: ${sourcePath}`)
+  process.exit(1)
+}
+
+if (!existsSync(targetDir)) {
+  mkdirSync(targetDir, { recursive: true })
+}
+
+copyFileSync(sourcePath, targetPath)
+console.log(`✅ Bundle copied successfully!`)
+```
+
+**4. Create your page component:**
+
 ```typescript
 // app/page.tsx
 import { prepareInitialData } from '@mapvx/website-component-helpers';
+import '@mapvx/website-component/dist/browser/styles.css';
+import Script from 'next/script';
 
 export default async function HomePage() {
-  // Execute on the server
-  const initialData = await prepareInitialData(process.env.MAPVX_API_KEY!);
+  const initialData = await prepareInitialData(process.env.NEXT_PUBLIC_MAPVX_API_KEY || '');
 
   return (
     <div>
-      <h1>My App</h1>
+      <Script src='/mapvx-website/bundle.js' />
       <mapvx-website
-        api-key={process.env.MAPVX_API_KEY}
+        api-key={process.env.NEXT_PUBLIC_MAPVX_API_KEY}
+        institution-id={process.env.NEXT_PUBLIC_MAPVX_INSTITUTION_ID}
         initial-data={initialData}
         default-to-map="true"
       />
@@ -303,36 +350,18 @@ export default async function HomePage() {
 }
 ```
 
-#### Next.js (Pages Router)
-
-```typescript
-// pages/index.tsx
-import { GetServerSideProps } from 'next';
-import { prepareInitialData } from '@mapvx/website-component-helpers';
+**5. Set environment variables in `.env.local`:**
 
-export const getServerSideProps: GetServerSideProps = async () => {
-  // Execute on the server
-  const initialData = await prepareInitialData(process.env.MAPVX_API_KEY!);
+```bash
+NEXT_PUBLIC_MAPVX_API_KEY=your-api-key-here
+NEXT_PUBLIC_MAPVX_INSTITUTION_ID=your-institution-id
+```
 
-  return {
-    props: {
-      initialData,
-    },
-  };
-};
+**6. Run the copy script before building:**
 
-export default function HomePage({ initialData }: { initialData: string }) {
-  return (
-    <div>
-      <h1>My App</h1>
-      <mapvx-website
-        api-key={process.env.MAPVX_API_KEY}
-        initial-data={initialData}
-        default-to-map="true"
-      />
-    </div>
-  );
-}
+```bash
+npm run copy-bundle
+npm run build
 ```
 
 #### Nuxt.js