---
import ProjectWall from '../../components/geek/ProjectWall.astro';
import Heatmap from '../../components/geek/Heatmap.astro';
import BaseLayout from '../../layouts/BaseLayout.astro';
import { t } from '../../i18n/ui';
import { githubReadmeMarkdown, openSourceCopy, openSourceOptions, pageTypography, renderMarkdown, renderRich } from '../../lib/site-content';

const copy = await openSourceCopy('en');
const options = await openSourceOptions();
const readmeMd = options.introFrom === 'github-readme' ? await githubReadmeMarkdown() : null;
const readmeHtml = readmeMd ? await renderMarkdown(readmeMd) : null;
const blurbHtml = await renderRich(copy.blurb, { inline: true });
const blurbAfterHtml = await renderRich(copy.blurbAfter, { inline: true });
const typo = await pageTypography('siteOpenSource', 'opensource');
---
<BaseLayout title="Open Source · wait4x" description="My open-source activity: repos, contributions, and this site's source">
  <h1 class="page-title">Open Source</h1>
  <div class={typo.className || undefined} style={typo.style || undefined}>
  {readmeHtml ? (
    <div class="blurb readme-intro" set:html={readmeHtml} />
  ) : (
    <p class="blurb rich" set:html={`${blurbHtml}<a class="link" href="${copy.repoUrl}">${copy.repoLabel}</a>${blurbAfterHtml}`} />
  )}
  <Heatmap labels={{
    title: t('heatmap_title', 'en'), summary: t('heatmap_summary', 'en'),
    less: t('heatmap_less', 'en'), more: t('heatmap_more', 'en'), note: t('heatmap_note', 'en'),
  }} />
  <ProjectWall limit={99} locale="en" pinned={copy.pinned} options={options} />
  </div>
</BaseLayout>

<style>
  .page-title { font-size: var(--text-h1); color: var(--ink-1); }
  .readme-intro :global(p) { margin-block: 0 var(--space-2); }
  .readme-intro :global(ul) { margin-block: var(--space-1) var(--space-2); padding-left: 1.2em; list-style: disc; }
  .readme-intro :global(h2), .readme-intro :global(h3) { font-size: 16px; margin: var(--space-3) 0 var(--space-1); }
  .readme-intro :global(img) { max-width: 100%; height: auto; border-radius: 8px; }
  .readme-intro :global(a) { color: var(--accent); }
  .blurb { margin-top: var(--space-3); margin-bottom: var(--space-5); font-size: 15px; color: var(--ink-2); line-height: 1.7; max-width: 640px; }
</style>