index.html

---
layout: compress
---

{% include header.html %}
<summary>
  So, you want to build an app that has its data co-located with its UI?
  That works offline? That synchronizes between clients? And that lets its
  users own their data?
  <b>Welcome to the world of local-first web&nbsp;development.</b>
</summary>
{% include heading.html %}

<main>
  {%for group in site.data.content%}
  <h2><em>{{group.index}}.</em> {{group.title}}</h2>
  {%for section in group.sections%}
  <section class="{{section.class}}">
    <h3>{{section.title}}</h3>
    <ul>
      {%for item in section.items%}
      <li>
        <a href="{{item.url}}" target="_blank">
          <img src="{{item.icon}}" />
          {{item.title}}
        </a>
        <small>{{item.author}}</small>
      </li>
      {%endfor%}
    </ul>
  </section>
  {%endfor%} {%endfor%}
</main>
<aside>
  <p>
    We started a blog! Read our origin story in
    <a href="/blog/2023-05-29-i-wrote-a-static-web-page">the first post</a>.
  </p>
  <p>
    Something missing? ✍️
    <a href="https://github.com/mylofi/localfirstweb.dev/blob/main/_data/content.json"
      >Edit the lists</a
    >
    or 🎨
    <a href="https://github.com/mylofi/localfirstweb.dev/blob/main/assets/css/main.scss"
      >redesign the page!</a
    >
  </p>
</aside>
{% include footer.html %}