src/layouts/BaseLayout.astro - master - spirzen/it-code-examples

src/layouts/BaseLayout.astro
112 строк4 KB
Spirzen
Logo and icon
07 июн 2026, 03:44
07 июн 2026, 03:448a7c892
---
import {sitePath} from '@/lib/site';

interface Props {
  title: string;
  description?: string;
  embed?: boolean;
}

const {title, description = 'Каталог примеров кода для энциклопедии Вселенная IT', embed = false} =
  Astro.props;
---

<!doctype html>
<html lang="ru" data-base={import.meta.env.BASE_URL}>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content={description} />
    <link rel="canonical" href={new URL(Astro.url.pathname, Astro.site).href} />
    <meta
      http-equiv="Content-Security-Policy"
      content="frame-ancestors https://spirzen.ru https://www.spirzen.ru http://localhost:3000 http://127.0.0.1:3000;"
    />
    <title>{title}</title>
    <link rel="icon" href={sitePath('favicon.ico')} sizes="any" />
    <script is:inline src={sitePath('scripts/theme.js')}></script>
    <link rel="stylesheet" href={sitePath('styles/global.css')} />
    <script is:inline src={sitePath('scripts/embed-mode.js')}></script>
  </head>
  <body class:list={['site', embed && 'site--embed']}>
    {
      !embed && (
        <header class="site-header">
          <div class="wrap site-header__row">
            <div>
              <a class="brand" href={sitePath('')}>
                <img
                  class="brand__logo"
                  src={sitePath('img/logo.png')}
                  alt=""
                  width="40"
                  height="40"
                  decoding="async"
                />
                <span class="brand__text">
                  <span class="brand__title">Вселенная IT</span>
                  <span class="brand__subtitle">Примеры кода</span>
                </span>
              </a>
              <p class="site-header__lead">
                Каталог для встраивания в{' '}
                <a href="https://spirzen.ru/" rel="noopener noreferrer">
                  энциклопедию
                </a>
                {' '}· code.spirzen.ru
              </p>
            </div>
            <div class="theme-toggle" role="group" aria-label="Тема оформления">
              <button
                type="button"
                class="theme-toggle__btn"
                data-theme-toggle="light"
                aria-pressed="false"
              >
                Светлая
              </button>
              <button
                type="button"
                class="theme-toggle__btn"
                data-theme-toggle="dark"
                aria-pressed="false"
              >
                Тёмная
              </button>
            </div>
          </div>
        </header>
      )
    }
    <main class="site-main">
      <slot />
    </main>
    {
      !embed && (
        <footer class="site-footer">
          <div class="wrap site-footer__inner">
            <p>
              Часть проекта{' '}
              <a href="https://spirzen.ru/" rel="noopener noreferrer">
                Вселенная IT
              </a>
              . Исходники — в репозитории{' '}
              <a
                href="https://github.com/spirzen/it-code-examples"
                rel="noopener noreferrer"
              >
                it-code-examples
              </a>
              .
            </p>
            <p class="site-footer__muted">
              Для авторов: embed <code>/e/embed/&lt;slug&gt;/</code>
            </p>
          </div>
        </footer>
      )
    }
    <script src={sitePath('scripts/code-toolbar.js')} defer></script>
    <script src={sitePath('scripts/embed-resize.js')} defer></script>
  </body>
</html>