open-people.astro

---
import PageLayout from "../layouts/page.astro";
import { marked } from "marked";

import { border } from "../styles/shared.js";

const response = await fetch(
  "https://raw.githubusercontent.com/guardian/our-engineering-culture/main/README.md",
);
const markdown = await response.text();
const content = marked.parse(markdown);
---

<PageLayout title="Open People" edit="open-people.astro">
  <section id="people">
    <h1>Open People</h1>

    <p>
      As defined in our <a
        href="https://github.com/guardian/our-engineering-culture"
        >engineering culture</a
      >, the key pillars are:
    </p>
    <ul>
      <!-- Extract titles from markdown for linking to sections directly -->
      {
        content
          .split("\n")
          .filter((line) => line.startsWith("#### "))
          .map((pillar) => {
            const name = pillar.slice(5);
            const link = name
              .trim()
              .replaceAll("&", "")
              .replaceAll(" ", "-")
              .toLowerCase();
            return (
              <li>
                <a href={`#${link}`}>{name}</a>
              </li>
            );
          })
      }
    </ul>

    <hr />

    <article set:html={content} />
  </section>
</PageLayout>

<style lang="scss" define:vars={{ border }}>
  section {
    padding: 0 1rem;

    // All but the first section
    &:nth-of-type(n + 2) {
      border-top: var(--border);
    }

    p,
    ul {
      max-width: 36rem;
    }
  }

  hr {
    border: none;
    border-top: var(--border);
  }
</style>