src/pages/index.astro - master - spirzen/it-code-examples

src/pages/index.astro
114 строк5 KB
Spirzen
Code migration pack
09 июн 2026, 01:41
09 июн 2026, 01:41cebc284
---
import BaseLayout from '@/layouts/BaseLayout.astro';
import {groupByLanguage, groupBySeries, loadCatalog} from '@/lib/examples';
import {LANGUAGE_CATALOG} from '@/lib/languages';
import {sitePath} from '@/lib/site';

const catalog = loadCatalog();
const grouped = groupByLanguage(catalog);
const seriesGroups = groupBySeries(catalog);
const labelById = Object.fromEntries(LANGUAGE_CATALOG.map((l) => [l.id, l.label]));
const languagesWithExamples = [...grouped.keys()].sort((a, b) =>
  (labelById[a] ?? a).localeCompare(labelById[b] ?? b, 'ru'),
);
const totalFiles = catalog.reduce((sum, ex) => sum + ex.fileCount, 0);
---

<BaseLayout
  title="IT Code Examples — примеры кода"
  description="Каталог примеров кода для энциклопедии Вселенная IT: подсветка синтаксиса, практикумы, встраивание в статьи."
>
  <div
    class="catalog-home"
    data-catalog
    data-base={import.meta.env.BASE_URL}
    data-catalog-url={sitePath('catalog.json')}
  >
    <section class="hero-panel">
      <div class="hero-panel__copy">
        <p class="hero-panel__eyebrow">Вселенная IT · Code Examples</p>
        <h1>Примеры кода</h1>
        <p class="hero-panel__lead">
          Лёгкий каталог для <a href="https://spirzen.ru/" rel="noopener noreferrer">Вселенной IT</a>:
          читайте, копируйте и открывайте в полный экран. В статьях энциклопедии — через iframe.
        </p>
        <div class="hero-panel__stats">
          <span class="stat-pill"><strong>{catalog.length}</strong> примеров</span>
          <span class="stat-pill"><strong>{grouped.size}</strong> языков</span>
          <span class="stat-pill"><strong>{totalFiles}</strong> файлов</span>
          {seriesGroups.length > 0 && (
            <span class="stat-pill"><strong>{seriesGroups.length}</strong> серий</span>
          )}
        </div>
      </div>
      <div class="hero-panel__search">
        <label class="sr-only" for="catalog-q">Поиск по каталогу</label>
        <input
          id="catalog-q"
          class="catalog-search__input catalog-search__input--hero"
          type="search"
          placeholder="Поиск: Python, practicum, hello-world…"
          autocomplete="off"
          data-search-input
        />
        <p class="catalog-search__meta" data-search-count></p>
      </div>
    </section>

    <p class="catalog-search__empty" data-search-empty hidden>Ничего не найдено — попробуйте другой запрос.</p>

    {
      seriesGroups.length > 0 && (
        <section class="catalog-block catalog-block--series">
          <div class="catalog-block__head">
            <h2>Практикумы</h2>
            <p>Пошаговые серии из нескольких примеров</p>
          </div>
          <div class="series-strip">
            {seriesGroups.map((group) => (
              <a class="series-card" href={sitePath(`series/${group.id}/`)}>
                <span class="series-card__title">{group.title}</span>
                <span class="series-card__meta">
                  {group.examples.length} шагов · {labelById[group.examples[0]?.language] ?? group.examples[0]?.language}
                </span>
              </a>
            ))}
          </div>
        </section>
      )
    }

    <section class="catalog-block" data-lang-grid>
      <div class="catalog-block__head">
        <h2>Языки и технологии</h2>
        <p>Выберите язык — примеры подгружаются порциями</p>
      </div>
      <div class="lang-grid">
        {
          languagesWithExamples.map((lang) => (
            <a class="lang-card" href={sitePath(`lang/${lang}/`)} data-lang-card={lang}>
              <span class="lang-card__title">{labelById[lang] ?? lang}</span>
              <span class="lang-card__count">
                <span data-lang-count>{grouped.get(lang)?.length}</span> примеров
              </span>
            </a>
          ))
        }
      </div>
    </section>

    <section class="catalog-block" data-search-results hidden>
      <div class="catalog-block__head">
        <h2>Результаты поиска</h2>
      </div>
      <ul class="example-grid" data-catalog-grid></ul>
      <div class="catalog-load-more" data-load-more-wrap hidden>
        <button type="button" class="catalog-load-more__btn" data-load-more>
          Показать ещё
        </button>
        <p class="catalog-load-more__meta" data-load-more-meta></p>
      </div>
    </section>
  </div>
  <script src={sitePath('scripts/catalog.js')} defer></script>
</BaseLayout>