src/pages/e/[...slug].astro - master - spirzen/it-code-examples

src/pages/e/[...slug].astro
97 строк3 KB
Spirzen
Code migration pack
09 июн 2026, 01:41
09 июн 2026, 01:41cebc284
---
import BaseLayout from '@/layouts/BaseLayout.astro';
import ExampleViewer from '@/components/ExampleViewer.astro';
import SeriesNav from '@/components/SeriesNav.astro';
import {getSeriesNeighbors, loadCatalog, loadExampleBySlug} from '@/lib/examples';
import {sitePath} from '@/lib/site';

export function getStaticPaths() {
  return loadCatalog().map((entry) => ({
    params: {slug: entry.slug},
    props: {slug: entry.slug},
  }));
}

const {slug} = Astro.props;
const example = loadExampleBySlug(slug)!;

const catalog = loadCatalog();
const embed = Astro.url.searchParams.get('embed') === '1';
const pageTitle = `${example.title} — IT Code Examples`;
const embedUrl = sitePath(`e/embed/${example.slug}/`);
const {prev, next, series} = getSeriesNeighbors(example, catalog);
const embedSnippet = `<ExternalCodeEmbed
  example="${example.slug}"
  title="${example.title}"
/>`;
---

<BaseLayout title={pageTitle} description={example.description} embed={embed}>
  <article class:list={['example', embed && 'example--embed']}>
    <header class="example__header">
      <div class="wrap">
        {
          !embed && (
            <a class="back" href={sitePath('')}>
              ← Каталог
            </a>
          )
        }
        <h1>{example.title}</h1>
        {example.description && <p class="example__lead">{example.description}</p>}
        <div class="example__meta">
          <span class="pill">{example.language}</span>
          {example.tags.map((tag) => (
            <span class="tag">{tag}</span>
          ))}
          {example.versions.length >= 2 && <span class="tag">versions</span>}
          {!embed && (
            <a class="pill pill--link" href={embedUrl}>
              embed URL
            </a>
          )}
          {
            example.encyclopediaUrl && (
              <a class="pill pill--link" href={example.encyclopediaUrl} rel="noopener noreferrer">
                статья в энциклопедии
              </a>
            )
          }
        </div>
      </div>
    </header>

    <div class="wrap example__body">
      {series && !embed && <SeriesNav example={example} series={series} prev={prev} next={next} />}
      <ExampleViewer example={example} />
      {
        embed && (
          <p class="embed-open">
            <a href={sitePath(`e/${example.slug}/`)} target="_blank" rel="noopener noreferrer">
              Открыть на code.spirzen.ru ↗
            </a>
          </p>
        )
      }
      {
        !embed && (
          <aside class="embed-help" data-raw={embedSnippet}>
            <div class="embed-help__head">
              <div>
                <h2>Встраивание в Docusaurus</h2>
                <p class="embed-help__hint">
                  В MDX статьи <code>it-knowledge-base</code> — компонент{' '}
                  <code>ExternalCodeEmbed</code>:
                </p>
              </div>
              <button type="button" class="embed-help__copy" data-copy aria-label="Копировать сниппет">
                Копировать
              </button>
            </div>
            <pre class="embed-snippet"><code>{embedSnippet}</code></pre>
          </aside>
        )
      }
    </div>
  </article>
</BaseLayout>