This commit is contained in:
@@ -1,68 +1,88 @@
|
||||
<script lang="ts">
|
||||
import SiteHeader from '$lib/components/SiteHeader.svelte';
|
||||
import GalleryFigure from '$lib/components/GalleryFigure.svelte';
|
||||
import type { MediaItem } from '$lib/media.js';
|
||||
import Lightbox from '$lib/components/Lightbox.svelte';
|
||||
import GalleryFigure from '$lib/components/GalleryFigure.svelte';
|
||||
import SiteHeader from '$lib/components/SiteHeader.svelte';
|
||||
|
||||
interface Props {
|
||||
data: { mediaItems: import('$lib/media.js').MediaItem[] };
|
||||
}
|
||||
let { data }: Props = $props();
|
||||
interface Props {
|
||||
data: { mediaItems: MediaItem[] };
|
||||
}
|
||||
|
||||
const title = '64 Armandine St #3 Boston, Massachusetts';
|
||||
const description =
|
||||
'An inviting blend of comfort and curated art—relaxation guaranteed.';
|
||||
const canonical = 'https://armandine.example.com'; // replace with real URL
|
||||
const gaId = 'G-QZGFK4MDT4';
|
||||
let { data }: Props = $props();
|
||||
|
||||
const jsonLd = {
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'Place',
|
||||
name: title,
|
||||
description,
|
||||
address: {
|
||||
'@type': 'PostalAddress',
|
||||
streetAddress: '64 Armandine St #3',
|
||||
addressLocality: 'Boston',
|
||||
addressRegion: 'MA',
|
||||
addressCountry: 'US'
|
||||
}
|
||||
};
|
||||
const title = '64 Armandine St #3 Boston, Massachusetts';
|
||||
const description =
|
||||
'An inviting blend of comfort and curated art—relaxation guaranteed.';
|
||||
const canonical = 'https://armandine.mifi.holdings/';
|
||||
const gaId = 'G-QZGFK4MDT4';
|
||||
|
||||
const jsonLd = {
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'Place',
|
||||
name: title,
|
||||
description,
|
||||
address: {
|
||||
'@type': 'PostalAddress',
|
||||
streetAddress: '64 Armandine St #3',
|
||||
addressLocality: 'Boston',
|
||||
addressRegion: 'MA',
|
||||
addressCountry: 'US',
|
||||
},
|
||||
};
|
||||
|
||||
let showPicture = $state<MediaItem | null>(null);
|
||||
|
||||
const showLightbox = (item: MediaItem) => {
|
||||
showPicture = item;
|
||||
};
|
||||
|
||||
const onClose = () => {
|
||||
showPicture = null;
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{title}</title>
|
||||
<meta name="description" content={description} />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<link rel="canonical" href={canonical} />
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content={canonical} />
|
||||
<title>{title}</title>
|
||||
<meta name="description" content={description} />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<link rel="canonical" href={canonical} />
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content={canonical} />
|
||||
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png" />
|
||||
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="32x32"
|
||||
href="/assets/favicon-32x32.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="16x16"
|
||||
href="/assets/favicon-16x16.png"
|
||||
/>
|
||||
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
|
||||
|
||||
<link rel="preload" href="/assets/js/script.js" as="script" />
|
||||
<script defer src="/assets/js/script.js"></script>
|
||||
<link rel="preload" href="/assets/js/script.js" as="script" />
|
||||
<script defer src="/assets/js/script.js"></script>
|
||||
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id={gaId}"></script>
|
||||
<script defer src="/assets/js/ga-init.js" data-ga-id={gaId}></script>
|
||||
<script
|
||||
async
|
||||
src="https://www.googletagmanager.com/gtag/js?id={gaId}"
|
||||
></script>
|
||||
<script defer src="/assets/js/ga-init.js" data-ga-id={gaId}></script>
|
||||
|
||||
{@html `<script type="application/ld+json">${JSON.stringify(jsonLd)}</script>`}
|
||||
{@html `<script type="application/ld+json">${JSON.stringify(jsonLd)}</script>`}
|
||||
</svelte:head>
|
||||
|
||||
<SiteHeader />
|
||||
<main>
|
||||
<section id="gallery" class="gallery-grid">
|
||||
{#each data.mediaItems as item}
|
||||
<GalleryFigure {item} />
|
||||
{/each}
|
||||
</section>
|
||||
<section id="gallery" class="gallery-grid">
|
||||
{#each data.mediaItems as item, index (item.name)}
|
||||
<GalleryFigure {item} {index} {showLightbox} />
|
||||
{/each}
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div id="lightbox" aria-hidden="true">
|
||||
<button id="lb-close" aria-label="Close">×</button>
|
||||
<div id="lb-content"></div>
|
||||
<p id="lb-caption"></p>
|
||||
</div>
|
||||
|
||||
<Lightbox item={showPicture} {onClose} />
|
||||
|
||||
Reference in New Issue
Block a user