Add Google Maps recipe (#241)

* Initial plan

* Add Google Maps recipe to recipe gallery

Co-authored-by: limonte <6059356+limonte@users.noreply.github.com>

* fff

* chore: add link to all themes

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: limonte <6059356+limonte@users.noreply.github.com>

Author: Copilot

.github/workflows/build.yml

@@ -30,5 +30,5 @@ jobs:
       - name: Check for broken links
         uses: lycheeverse/lychee-action@v2
         with:
-          args: src/**/*.tsx --exclude https://api.github.com --exclude https://codepen.io/pen/define --exclude https://www.minisexdoll.com/anime-sexdoll/ --exclude https://www.mymasturbators.com/ --exclude https://github.com/sweetalert2/sweetalert2/commits/main --exclude https://sextoycollective.com/ --exclude https://www.pidoll.com/ --exclude https://www.uusexdoll.com/ --exclude https://www.nakedoll.com/ --exclude https://doctorclimax.com/ --exclude https://www.cloudways.com/ --exclude https://cutesexdoll.com/ --exclude https://www.buypenispump.com/ --exclude https://www.myminisexdoll.com/
+          args: src/**/*.tsx --exclude https://api.github.com --exclude https://codepen.io/pen/define --exclude https://www.minisexdoll.com/anime-sexdoll/ --exclude https://www.mymasturbators.com/ --exclude https://github.com/sweetalert2/sweetalert2/commits/main --exclude https://sextoycollective.com/ --exclude https://www.pidoll.com/ --exclude https://www.uusexdoll.com/ --exclude https://www.nakedoll.com/ --exclude https://doctorclimax.com/ --exclude https://www.cloudways.com/ --exclude https://cutesexdoll.com/ --exclude https://www.buypenispump.com/ --exclude https://www.myminisexdoll.com/ --exclude https://www.uusextoy.com/
           fail: true

recipe-gallery/google-maps-src.ts

@@ -0,0 +1,11 @@
+import Swal from 'sweetalert2'
+import 'sweetalert2/themes/embed-iframe.css'
+
+Swal.fire({
+  theme: 'embed-iframe',
+  title: 'Google Maps',
+  html: '<iframe frameborder="0" src="https://maps.google.com/maps?q=New+York&t=&z=13&ie=UTF8&iwloc=&output=embed"></iframe>',
+  showCloseButton: true,
+  showConfirmButton: false,
+  width: 800,
+})

recipe-gallery/google-maps.tsx

@@ -0,0 +1,33 @@
+import { Nav, Prtnr } from '../src/components'
+import { renderRecipe } from '../src/utils'
+import { Sandpack } from './components/Sandpack'
+
+const src = (await import('./google-maps-src?raw')).default
+
+function Recipe() {
+  return (
+    <>
+      <Nav recipeGallery />
+      <Prtnr />
+      <h1>Google Maps</h1>
+
+      <p>
+        Uses the <strong>embed-iframe</strong> theme and a simple Google Maps embed URL (no API key required).
+      </p>
+
+      <p>
+        All themes can be found in the <a href="https://sweetalert2.github.io/#themes">SweetAlert2 themes gallery</a>.
+      </p>
+
+      <Sandpack
+        files={{
+          '/App.ts': src,
+        }}
+        editorHeight={300}
+        previewHeight={600}
+      />
+    </>
+  )
+}
+
+renderRecipe(<Recipe />)

recipe-gallery/index.tsx

@@ -68,6 +68,9 @@ function Recipe() {
         <li>
           <a href="./pdf-viewer.html">PDF Viewer</a>
         </li>
+        <li>
+          <a href="./google-maps.html">Google Maps</a>
+        </li>
       </ul>
     </>
   )

src/examples/functions.ts

@@ -230,7 +230,7 @@ export default {
   },
   ajaxRequest() {
     window.Swal.fire({
-      title: 'Submit your Github username',
+      title: 'Submit your GitHub username',
       input: 'text',
       inputAttributes: {
         autocapitalize: 'off',

tools/generate-recipe-html.mjs

@@ -29,6 +29,7 @@ const recipes = [
   { name: 'blurred-backdrop', title: 'Blurred Backdrop' },
   { name: 'sidebars-drawers', title: 'Sidebars and Drawers' },
   { name: 'pdf-viewer', title: 'PDF Viewer' },
+  { name: 'google-maps', title: 'Google Maps' },
 ]
 
 function generateHtml(title, scriptSrc) {

vite.config.ts

@@ -31,6 +31,7 @@ export default defineConfig({
         'blurred-backdrop': 'recipe-gallery/blurred-backdrop.html',
         'sidebars-drawers': 'recipe-gallery/sidebars-drawers.html',
         'pdf-viewer': 'recipe-gallery/pdf-viewer.html',
+        'google-maps': 'recipe-gallery/google-maps.html',
       },
     },
   },