p5.js-website/src/layouts/ExamplesLayout.astro at 974113e5b0c15cbb99bd80f7267897554f28ff26 · processing/p5.js-website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
---
import BaseLayout from "./BaseLayout.astro";
import Head from "@components/Head/index.astro";
import GridItemExample from "@components/GridItem/Example.astro";
import { getExampleCategory } from "../pages/_utils";
import { getCurrentLocale, getUiTranslator } from "../i18n/utils";
import type { CollectionEntry } from "astro:content";

interface Props {
  exampleEntries: CollectionEntry<"examples">[];
}

const currentLocale = getCurrentLocale(Astro.url.pathname);
const t = await getUiTranslator(currentLocale);

const { exampleEntries } = Astro.props;
const exampleCategories = new Set<string>();
exampleEntries.forEach((exampleEntry) => {
  exampleCategories.add(getExampleCategory(exampleEntry.id));
});

const examplesByCategory = Array.from(exampleCategories).map((category) => {
  return {
    name: t("exampleCategories", category) as string,
    examples: exampleEntries.filter((exampleEntry) => {
      return getExampleCategory(exampleEntry.id) === category;
    }),
  };
});

// If there are any featured examples, add a Featured category at the top
const featuredEntries = exampleEntries.filter(
  (exampleEntry) => exampleEntry.data.featured
);
if (featuredEntries.length > 0) {
  examplesByCategory.unshift({
    name: t("exampleCategories", "Featured") as string,
    examples: featuredEntries,
  });
}

const jumpToLinks = Array.from(examplesByCategory).map(({ name }) => ({
  label: name as string,
  url: `/examples/#${name.toLowerCase()}`,
}));

const jumpToState = {
  links: jumpToLinks,
};

Astro.locals.jumpToState = jumpToState;
---

<Head title={"Examples"} locale={currentLocale} />

<BaseLayout title="Examples">
  {
    examplesByCategory.map((category, i) => (
      <section class="grid">
        <h2 class="col-span-full">
          {category.name} <a id={category.name.toLowerCase()} />
        </h2>
        <ul class="col-span-full content-grid-simple">
          {category.examples.map((exampleEntry, i) => (
            <li class="col-span-1">
              {<GridItemExample item={exampleEntry} lazyLoad={i <= 4} />}
            </li>
          ))}
        </ul>
      </section>
    ))
  }
</BaseLayout>