Add AtomVM Ecosystem page

_data/ecosystem.yml

@@ -0,0 +1,50 @@
+title: "AtomVM Ecosystem"
+intro: "They love AtomVM, and we love them!"
+
+categories:
+  - heading: "Commercial Products"
+    items:
+      - name: "La Machine"
+        logo: /assets/images/ecosystem/la-machine.svg
+        desc: >-
+          An artistic, hardware "Useless Box" reloaded with Erlang. Built completely offline, it
+          demonstrates AtomVM's extreme reliability, stability, and deterministic memory management
+          in a rugged standalone production environment on an ESP32-C3 chip.
+        links:
+          - { label: "GitHub", url: "https://github.com/pguyot/la_machine" }
+          - { label: "Website", url: "https://la-machine.fr/" }
+
+  - heading: "Third-Party Projects"
+    items:
+      - name: "midiMESH"
+        logo: /assets/images/ecosystem/midimesh.svg
+        desc: >-
+          Real-time network MIDI handling using Elixir on the ESP32. It routes audio and musical
+          instrument data over network protocols, leveraging AtomVM's execution model to safely
+          coordinate live hardware and network events.
+        links:
+          - { label: "GitHub", url: "https://github.com/nanassound/midimesh_esp32" }
+
+  - heading: "Strategic Ecosystem Contributors"
+    items:
+      - name: "NLnet Foundation (NGI0 Commons Fund)"
+        logo: /assets/images/ecosystem/nlnet.svg
+        logo_dark: /assets/images/ecosystem/nlnet-dark.svg
+        desc: >-
+          NLnet officially funds and hosts the "Towards AtomVM v1.0" project initiative,
+          providing strategic financial backing to expand hardware support, polish core APIs, and
+          improve runtime security on the road to a stable 1.0 release.
+        links:
+          - { label: "NLnet project", url: "https://nlnet.nl/project/AtomVM/" }
+      - name: "piyopiyo.ex"
+        logo: /assets/images/ecosystem/piyopiyo.png
+        desc: >-
+          A highly active Japanese Elixir user community based out of Nagoya. They actively
+          collaborate on real-world implementations—such as building AtomVM configurations to ingest
+          BLE data from SwitchBot hardware—and regularly host localized, hands-on developer workshops
+          to lower the barrier to entry for embedded BEAM applications.
+        links:
+          - { label: "GitHub", url: "https://github.com/piyopiyoex" }
+
+outro: >-
+  Building something with AtomVM? [Get in touch](/contact/) to be featured here.

_data/home.yml

@@ -5,6 +5,8 @@ navbar_entries:
     url: /news/
   - title: Extensions
     url: /extensions/
+  - title: Ecosystem
+    url: /ecosystem/
   - title: Forum
     url: https://erlangforums.com/c/erlang-platforms/atomvm-forum/76
 
@@ -64,6 +66,8 @@ footer:
           url: /sample-code/
         - title: Extensions
           url: /extensions/
+        - title: Ecosystem
+          url: /ecosystem/
         - title: Tutorials
           url: /tutorials/
   cta:

_includes/ecosystem_card.html

@@ -0,0 +1,25 @@
+<article class="feature-card">
+  {% if include.item.logo %}
+  <span class="eco-card__logo">
+    <img src="{{ include.item.logo | relative_url }}" alt=""{% if include.item.logo_dark %} class="eco-card__logo-light"{% endif %}>
+    {% if include.item.logo_dark %}
+    <img src="{{ include.item.logo_dark | relative_url }}" alt="" class="eco-card__logo-dark">
+    {% endif %}
+  </span>
+  {% endif %}
+  <h3 class="feature-card__title">{{ include.item.name }}</h3>
+  <div class="feature-card__desc">{{ include.item.desc | markdownify }}</div>
+  {% if include.item.links %}
+  <div class="eco-card__links">
+    {% for link in include.item.links %}
+    <a class="eco-card__link" href="{{ link.url }}" target="_blank" rel="noopener">
+      {{ link.label }}
+      <svg viewBox="0 0 24 24" aria-hidden="true" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M7 17 17 7"/>
+        <path d="M8 7h9v9"/>
+      </svg>
+    </a>
+    {% endfor %}
+  </div>
+  {% endif %}
+</article>

_layouts/ecosystem.html

@@ -0,0 +1,30 @@
+---
+layout: default
+---
+<main class="page">
+  <header class="page-header">
+    <h1>{{ page.title }}</h1>
+    {% if site.data.ecosystem.intro %}
+    <p class="page-header__intro">{{ site.data.ecosystem.intro }}</p>
+    {% endif %}
+  </header>
+
+  {% for category in site.data.ecosystem.categories %}
+  <section class="eco-section">
+    <header class="page-header">
+      <h2>{{ category.heading }}</h2>
+    </header>
+    <div class="features__grid{% if category.items.size == 1 %} features__grid--single{% endif %}">
+      {% for item in category.items %}
+        {% include ecosystem_card.html item=item %}
+      {% endfor %}
+    </div>
+  </section>
+  {% endfor %}
+
+  {% if site.data.ecosystem.outro %}
+  <article class="content-card">
+    <div class="prose">{{ site.data.ecosystem.outro | markdownify }}</div>
+  </article>
+  {% endif %}
+</main>

_sass/_ecosystem.scss

@@ -0,0 +1,61 @@
+.page-header__intro {
+  max-width: 760px;
+  margin: 16px auto 0;
+  color: var(--color-text-muted);
+}
+
+.eco-section {
+  width: 100%;
+  max-width: 1420px;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.eco-card__logo {
+  display: flex;
+  align-items: center;
+}
+
+.eco-card__logo img {
+  height: 56px;
+  width: auto;
+  max-width: 100%;
+  object-fit: contain;
+}
+
+/* Theme-specific logo swap: show the light asset by default, the dark one
+   when the site theme toggle sets [data-theme="dark"]. */
+.eco-card__logo-dark { display: none; }
+[data-theme="dark"] .eco-card__logo-light { display: none; }
+[data-theme="dark"] .eco-card__logo-dark { display: block; }
+
+/* Centre a lone card instead of pinning it to the left column. */
+.features__grid--single {
+  justify-items: center;
+}
+
+@media (min-width: 768px) {
+  .features__grid--single {
+    grid-template-columns: min(100%, 700px);
+    justify-content: center;
+  }
+}
+
+.eco-card__links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  margin-top: auto;
+}
+
+.eco-card__link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--body-secondary-size);
+  color: var(--color-link);
+  text-decoration: none;
+}
+
+.eco-card__link:hover { color: var(--color-link-hover); }

assets/css/main.scss

@@ -8,6 +8,7 @@
 @import 'typography';
 @import 'layout';
 @import 'cards';
+@import 'ecosystem';
 @import 'navbar';
 @import 'footer';
 @import 'buttons';