contribute.njk

---
layout: layouts/home.njk
---

<div class=" py-16">
<div class="max-w-screen-lg mx-4 2xl:max-w-screen-xl lg:mx-auto">
  <h1 class="pt-6 text-5xl text-neutral-content font-bold">Support bonfire</h1>
  <div class="mt-6 prose leading-relaxed prose-lg text-neutral-content text-opacity-80">
    <p>Together with dozens of others, you can become a backer or sponsor on our OpenCollective. You will receive regular updates exclusively for backers.</p>
    <p>Donations wil pay contributors, maintainers, and artists to work primarily on app development, towards our feature <a href="/roadmap">roadmap</a>, but also any kind of project-related fees such as hosting. </p>
    <p>Everything is transparent, and the outcome of the work is seen in the <a href="https://github.com/bonfire-networks">code repositories</a> as commits, with progress tracked as <a href="https://github.com/bonfire-networks/bonfire-app/milestones?direction=asc&sort=due_date&state=open">milestones and issues</a>.</p>
    <p>As a token of appreciation, names of recent and/or regular backers are mentioned in the app and on this website, and updated regularly.
  </div>
  <div class="flex items-center space-x-4 mt-6">
    <a href="https://opencollective.com/bonfire-networks#category-CONTRIBUTE" class="btn btn-primary">Donate</a>
    <a href="https://opencollective.com/bonfire-networks/contribute/sponsor-39507/checkout" class="btn btn-outline btn-primary">Become a sponsor</a>
  </div>

  <div class="mt-6 prose prose-lg leading-relaxed text-md text-neutral-content text-opacity-80">
      <p>Donations are not the only way to help, you can also join our effort to improve the platform by becoming a contributor. There are plenty of things you can do to make Bonfire even better! </p>
  </div>
  <div class="mt-6">
      <a href="/docs" class="btn btn-outline">Become a contributor</a>
  </div>

  <div class="text-3xl text-base-content font-bold mt-8">Recent donors</div>
  <div 
    x-data="backers()" 
    x-init="fetchBackers()"
    class="flex items-center mt-4 mb-8 flex-wrap">
      <template x-if="backers">
      <template x-for="(b, index) in backers" class="flex shrink-0">
        <template x-if="b.profile">
          <a :href="b.website || b.twitter || b.github || b.profile" :title="b.name || b.description" class="avatar shrink-0 mr-2 mb-2 w-12 h-12" target="_blank"  rel="noopener noreferrer">
            <img :src="b.image || 'https://unavatar.io/' + (b.profile || b.twitter || b.github || b.createdAt).replace('https://opencollective.com/', '').replace('https://github.com/', '').replace('https://twitter.com/', '') + '?fallback=https://source.boringavatars.com'" type="image/png" class="bg-contain  bg-base-100 bg-no-repeat bg-center w-12 h-12 rounded-full flex-1 shrink-0"/>
          </a>
        </template>
      </template>
    </template>
  </div>

    
  <div class="text-3xl text-base-content font-bold mt-8">Recent contributors</div>
  <div 
    x-data="contributors()" 
    x-init="fetchContributors()"
    class="flex items-center mt-4 mb-8 flex-wrap">
      <template x-if="contributors">
      <template x-for="(b, index) in contributors" class="flex shrink-0">
        <template x-if="b.html_url">
          <a :href="b.html_url" :title="b.login" class="avatar shrink-0 mr-2 mb-2 w-12 h-12" target="_blank"  rel="noopener noreferrer">
            <img :src="b.avatar_url || 'https://unavatar.io/' + b.login" type="image/png" class="bg-contain  bg-base-100 bg-no-repeat bg-center w-12 h-12 rounded-full flex-1 shrink-0"/>
          </a>
        </template>
      </template>
    </template>
  </div>

  <div class="text-3xl text-base-content font-bold mt-8">Recent sponsors</div>
  <div class="flex items-center mt-8 space-x-4">
      <div class="bg-contain bg-no-repeat w-40 bg-[url('/img/ecf2.png')] h-20"></div>
      <div class="bg-contain bg-no-repeat w-40 bg-[url('/img/nlnet.png')] h-20"></div>
  </div>
</div>

<script>
function backers() {
  return {
    isLoading: false,
    backers: null,
    fetchBackers() {
      this.isLoading = true;
      fetch(`https://opencollective.com/bonfire-networks/members/all.json`)
        .then(response => response.json())
        .then(data => {
          console.log(data);
          this.backers = data
          this.isLoading = false;
        });
    },
  }
}

function contributors() {
    return {
      isLoading: false,
      contributors: null,
      fetchContributors() {
        this.isLoading = true;
        fetch(`/img/contributors.json`)
          .then(response => response.json())
          .then(data => {
            console.log(data);
            this.contributors = data
            this.isLoading = false;
          });
      },
    }
  }
</script>

</div>