Teil 6: Galerie, Kontakt und der letzte Schliff

---
import { fieldAttribute } from '@manablox/live-preview';
import { assetUrl } from '@manablox/public-sdk';
import { assets, text } from '../../lib/fields';

interface Props {
  block: Record<string, unknown>;
  path: (string | number)[];
}

const { block, path } = Astro.props;
const headline = text(block.headline);
const images = assets(block.images);
---

<section class="block block-gallery" {...fieldAttribute(path)}>
  {headline && <h2 {...fieldAttribute([...path, 'headline'])}>{headline}</h2>}
  <div class="images" {...fieldAttribute([...path, 'images'])}>
    {
      images.map((image) => (
        <img
          class="rounded"
          src={assetUrl(image, { preset: 'card' })}
          alt={image.alt ?? ''}
          width={image.width ?? undefined}
          height={image.height ?? undefined}
          loading="lazy"
        />
      ))
    }
  </div>
</section>

<style>
  .images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 1rem;
  }
</style>

---
import { fieldAttribute } from '@manablox/live-preview';
import { link, text } from '../../lib/fields';

interface Props {
  block: Record<string, unknown>;
  path: (string | number)[];
}

const { block, path } = Astro.props;
const headline = text(block.headline);
const textValue = text(block.text);
const button = link(block.button);
---

<section class="block block-call-to-action" {...fieldAttribute(path)}>
  {headline && <h2 {...fieldAttribute([...path, 'headline'])}>{headline}</h2>}
  {textValue && <p class="lead" {...fieldAttribute([...path, 'text'])}>{textValue}</p>}
  {
    button && (
      <p {...fieldAttribute([...path, 'button'])}>
        <a class="button" href={button.href}>{button.label}</a>
      </p>
    )
  }
</section>

<style>
  .block-call-to-action {
    border-radius: var(--radius);
    background: var(--ink);
    color: white;
    padding: 3rem 2rem;
    text-align: center;
  }
  .lead {
    color: #cfc8e6;
  }
</style>

---
import { fieldAttribute } from '@manablox/live-preview';
import { assetUrl } from '@manablox/public-sdk';
import { assets, html, link, text } from '../../lib/fields';

interface Props {
  block: Record<string, unknown>;
  path: (string | number)[];
}

const { block, path } = Astro.props;
const headline = text(block.headline);
const body = html(block.body);
const image = assets(block.image)[0];
const button = link(block.button);
---

<section class="block block-media-text" {...fieldAttribute(path)}>
  {
    image && (
      <img
        class="rounded"
        src={assetUrl(image, { preset: 'card' })}
        alt={image.alt ?? ''}
        width={image.width ?? undefined}
        height={image.height ?? undefined}
        loading="lazy"
        {...fieldAttribute([...path, 'image'])}
      />
    )
  }
  <div>
    {headline && <h2 {...fieldAttribute([...path, 'headline'])}>{headline}</h2>}
    {body && <div {...fieldAttribute([...path, 'body'])} set:html={body} />}
    {
      button && (
        <p {...fieldAttribute([...path, 'button'])}>
          <a class="button" href={button.href}>{button.label}</a>
        </p>
      )
    }
  </div>
</section>

<style>
  .block-media-text {
    display: grid;
    gap: 2rem;
    align-items: center;
  }
  /* Side by side once there is room for both. */
  @media (min-width: 48rem) {
    .block-media-text {
      grid-template-columns: 1fr 1.5fr;
    }
  }
</style>

---
import { fieldAttribute } from '@manablox/live-preview';
import { text } from '../../lib/fields';

interface Props {
  block: Record<string, unknown>;
  path: (string | number)[];
}

const { block, path } = Astro.props;
const quote = text(block.quote);
const author = text(block.author);
const role = text(block.role);
---

<figure class="block block-quote" {...fieldAttribute(path)}>
  {quote && <blockquote {...fieldAttribute([...path, 'quote'])}>“{quote}”</blockquote>}
  <figcaption>
    {author && <strong {...fieldAttribute([...path, 'author'])}>{author}</strong>}
    {role && <span {...fieldAttribute([...path, 'role'])}>, {role}</span>}
  </figcaption>
</figure>

<style>
  .block-quote {
    margin-inline: 0;
    border-left: 6px solid var(--pink);
    padding-left: 1.5rem;
  }
  blockquote {
    margin: 0 0 0.75rem;
    font-size: 1.75rem;
    line-height: 1.3;
  }
  figcaption {
    color: var(--muted);
  }
</style>

---
import { fieldAttribute } from '@manablox/live-preview';
import { text } from '../../lib/fields';

interface Props {
  block: Record<string, unknown>;
  path: (string | number)[];
}

const { block, path } = Astro.props;
const headline = text(block.headline);
const textValue = text(block.text);
const email = text(block.email);
---

<section class="block block-contact" {...fieldAttribute(path)}>
  {headline && <h2 {...fieldAttribute([...path, 'headline'])}>{headline}</h2>}
  {textValue && <p class="lead" {...fieldAttribute([...path, 'text'])}>{textValue}</p>}
  {
    email && (
      <p {...fieldAttribute([...path, 'email'])}>
        <a class="button" href={`mailto:${email}`}>Write me an email</a>
      </p>
    )
  }
</section>

interface Props {
  title: string;
  description?: string | null;
  image?: string | null;
  bare?: boolean;
}

const { title, description, image, bare = false } = Astro.props;

<title>{title === siteName ? title : `${title} · ${siteName}`}</title>
    {description && <meta name="description" content={description} />}
    <meta property="og:title" content={title} />
    {description && <meta property="og:description" content={description} />}
    {image && <meta property="og:image" content={image} />}

---
import { assetUrl, blocksOf, gridOf, ManabloxError } from '@manablox/public-sdk';
import Blocks from '../components/Blocks.astro';
import { contentRenderers } from '../components/content/index';
import Site from '../layouts/Site.astro';
import { assets, text } from '../lib/fields';
import { manablox } from '../lib/manablox';

const client = manablox();
const path = Astro.url.pathname;

let page: Record<string, unknown> | null = null;
let failure: string | null = null;

try {
  // `expand` inlines the relations the components show, which would otherwise be ids.
  page = await client.byPermalink(path, {
    expand: ['cover', 'gallery', 'image', 'images', 'projects'],
  });
} catch (error) {
  failure = error instanceof ManabloxError ? error.message : String(error);
}

const notFound = !failure && !page;
const fields = (page?.fields ?? {}) as Record<string, unknown>;
const blocks = blocksOf(fields.components) as Record<string, unknown>[];
const grid = gridOf(fields.components);
const Content = page ? contentRenderers[String(page.type)] : undefined;

// What search engines and link previews show: the summary, and the cover if there is one.
const description = text(fields.summary);
const cover = assets(fields.cover)[0];
const image = cover ? assetUrl(cover, { preset: 'hero' }) : null;

Astro.response.status = failure ? 503 : notFound ? 404 : 200;
Astro.response.headers.set(
  'cache-control',
  failure ? 'no-store' : 'public, max-age=0, s-maxage=300',
);
---

<Site
  title={failure ? 'Something went wrong' : notFound ? 'Page not found' : String(page?.title ?? '')}
  description={description}
  image={image}
>
  {
    notFound ? (
      <div class="state">
        <h1>Page not found</h1>
        <p class="lead">There is nothing here. Maybe the link is old, or the page moved.</p>
        <a class="button" href="/">Back to the start</a>
      </div>
    ) : failure ? (
      <div class="state">
        <h1>Something went wrong</h1>
        <p>{failure}</p>
      </div>
    ) : Content ? (
      <Content node={{ title: String(page?.title ?? ''), fields }} />
    ) : (
      <article>
        <h1>{String(page?.title || 'Untitled')}</h1>
        <Blocks blocks={blocks} path={['components']} grid={grid} />
      </article>
    )
  }
</Site>

<style>
  .state {
    padding: 4rem 0;
    text-align: center;
  }
  .state h1 {
    font-size: 3rem;
  }
</style>