Skip to content
Components Pack

Astro - Demo

Each example:

  • has its code below its demo photos - you can copy and paste it into your Astro project,
  • assumes that you have already followed the installation guide,
  • imports PhotoViewer and PhotoMultiViewer for the purpose of demonstration, there should only one PhotoViewer and PhotoMultiViewer per page.

Spring - only PhotoViewer

This example uses only PhotoViewer.

spring 0
spring 1
spring 2
spring 3
page.astro
---
  import Photo from "@matb85/astro-pack/Photo.astro";
  import PhotoViewer from "@matb85/astro-pack/PhotoViewer.astro";
---


<div class="gallery">
  {#each ["photo0.jpg", "photo1.jpg", "photo2.jpg", "photo3.jpg"] as name, i }
    <Photo
      src="/thumbnail_{name}"
      sizes={[480, 720]}
      className="photo"
      alt="spring {i}" />
  {/each}
</div>


<PhotoViewer/>

Summer - only PhotoMultiViewer

This example uses only PhotoMultiViewer.

summer 0
summer 1
summer 2
summer 3
page.astro
---
  import Photo from "@matb85/astro-pack/Photo.astro";
  import PhotoMultiViewer from "@matb85/astro-pack/PhotoMultiViewer.astro";
---


<div class="gallery">
  {#each ["photo0.jpg", "photo1.jpg", "photo2.jpg", "photo3.jpg"] as name, i }
    <Photo
      src="/thumbnail_{name}"
      sizes={[480, 720]}
      className="photo"
      multiview
      group="summer-{i}"
      alt="summer {i}" />
  {/each}
</div>


<PhotoMultiViewer/>

Autumn - both viewers

This example uses only PhotoMultiViewer, but there are two different groups.

autumn 0
autumn 1
autumn 2
autumn 3
page.astro
---
  import Photo from "@matb85/astro-pack/Photo.astro";
  import PhotoViewer from "@matb85/astro-pack/PhotoViewer.astro";
  import PhotoMultiViewer from "@matb85/astro-pack/PhotoMultiViewer.astro";
---


<div class="gallery">
  {#each ["photo0.jpg", "photo1.jpg"] as name, i }
    <Photo
      src="/thumbnail_{name}"
      sizes={[480, 720]}
      className="photo"
      multiview
      group="first-{i}"
      alt="first summer {i}" />
  {/each}
  {#each ["photo2.jpg", "photo3.jpg"] as name, i }
    <Photo
      src="/thumbnail_{name}"
      sizes={[480, 720]}
      className="photo"
      group="second-{i}"
      alt="second summer {i}" />
  {/each}
</div>


<PhotoMultiViewer/>

Winter - both viewers

winter 0
winter 1
winter 2
winter 3

This example uses both PhotoViewer and PhotoMultiViewer with two different groups.

page.astro
---
  import Photo from "@matb85/astro-pack/Photo.astro";
  import PhotoViewer from "@matb85/astro-pack/PhotoViewer.astro";
  import PhotoMultiViewer from "@matb85/astro-pack/PhotoMultiViewer.astro";
---


<div class="gallery">
  <Photo
      src="/thumbnail_photo1.jpg"
      sizes={[480, 720]}
      className="photo"
      alt="winter" />
  {["photo1.jpg", "photo2.jpg"].map((name, i) => (
    <Photo
      src="/thumbnail_{name}"
      sizes={[480, 720]}
      className="photo"
      multiview
      group="first-{i}"
      alt="first winter {i}" />
  ))}
  <Photo
    src="/thumbnail_photo3.jpg"
    sizes={[480, 720]}
    className="photo"
    multiview
    group="winter"
    alt="second winter" />
</div>


<PhotoViewer/>
<PhotoMultiViewer/>

Map

Example of Map component usage.

YourMapComponent.astro
---
import Map from '@matb85/astro-pack/Map.astro';
import type { MapCallbackT } from '@matb85/base-pack';
--


<Map class="your-map-class" apikey="YOUR_API_KEY" callback={mapCallback} />


<script>
import { mapUtil, type MapCallbackT } from "@matb85/base-pack";


const map = document.getElementById("map") as HTMLElement;


const mapCallback: MapCallbackT = (domMap: HTMLElement) => {
    // The Goole Maps script has been loaded
    // The map is ready to be initialized
    const center = { lat: 50.061642912299185, lng: 19.939391711972192 };
    const map = new google.maps.Map(domMap, {
        center,
        zoom: 16,
        streetViewControl: false,
        styles: [{ featureType: 'poi', elementType: 'all', stylers: [{ visibility: 'off' }] }]
    });
    new google.maps.Marker({ position: center, map });
};


mutations.addHandler(store, {
  name: "map",
  handler: () => mapUtil(apikey, callback, map),
});


store.observer.observe(map);
</script>
Powiększone zdjęcie