circuitpython-org/downloads.html
Melissa LeBlanc-Williams a2496dd8d8
Merge pull request #1088 from makermelissa/keywords
Added tags and module search feature
2022-11-14 14:23:24 -08:00

186 lines
7.5 KiB
HTML

---
layout: default
title: Downloads
permalink: /downloads
excerpt: CircuitPython supported boards.
---
<div id="downloads-page">
<h1>Downloads</h1>
<div class="downloads-inputs">
<div class="downloads-search">
<label class="search-wrapper">
<input type="text" id="search" placeholder="Search for CircuitPython boards" />
</label>
</div>
<div class="downloads-filter">
<button class="filter" title="Filter Boards"><i class="fas fa-sliders-h"
aria-hidden="true"></i> Filters</button>
</div>
<div class="downloads-filter-tags">
</div>
</div>
<div class="downloads-filter-content">
<div class="filter-buttons">
<button class="save-changes" title="Close and Save Changes"><i class="fas fa-times" aria-hidden="true"></i></button>
</div>
<div>
<div class="manufacturers">
<fieldset>
<legend>Manufacturers</legend>
<ul class="content"></ul>
</fieldset>
</div>
<div>
<div class="features">
<fieldset>
<legend>Features</legend>
<ul class="content"></ul>
</fieldset>
</div>
<div class="mcufamilies">
<fieldset>
<legend>Processor family</legend>
<ul class="content"></ul>
</fieldset>
</div>
</div>
<div class="sort-by">
<fieldset>
<legend>Sort By</legend>
<ul class="content">
<li><input type="radio" name="sort-by" value="downloads" aria-label="Downloads" id="sortby-downloads" checked><label for="sortby-downloads">Downloads</label></li>
<li><input type="radio" name="sort-by" value="alpha-asc" aria-label="Board Name (A to Z)" id="sortby-alpha-asc" ><label for="sortby-alpha-asc">Board Name (A to Z)</label></li>
<li><input type="radio" name="sort-by" value="alpha-desc" aria-label="Board Name (Z to A)" id="sortby-alpha-desc"><label for="sortby-alpha-desc">Board Name (Z to A)</label></li>
<li><input type="radio" name="sort-by" value="date-desc" aria-label="Date Added (Newest First)" id="sortby-date-desc"><label for="sortby-date-desc">Date Added (Newest First)</label></li>
<li><input type="radio" name="sort-by" value="date-asc" aria-label="Date Added (Oldest First)" id="sortby-date-asc"><label for="sortby-date-asc">Date Added (Oldest First)</label></li>
</ul>
</fieldset>
</div>
</div>
</div>
<div class="download-count">
{% comment %}
Get a total number of boards by running through both loops
to get an accurate total.
{% endcomment %}
{% assign board_count = 0 %}
{% assign boards = site.data.files %}
{% for board in boards %}
{% assign info = site.board | where: 'board_id', board.id %}
{% if info.size == 0 %}
{% assign info = site.board | where: 'board_id', 'unknown' %}
{% endif %}
{% assign info = info[0] %}
{% if info.downloads_display == false %}
{% continue %}
{% endif %}
{% assign board_count = board_count | plus: 1 %}
{% endfor %}
{% for board in site.board %}
{% assign info = site.data.files | where: 'id', board.board_id | first %}
{% if info == nil and board.board_id != 'unknown' %}
{% if board.downloads_display == false %}
{% continue %}
{% endif %}
{% assign board_count = board_count | plus: 1 %}
{% endif %}
{% endfor %}
Displaying <span id="board_count">{{ board_count }}</span> boards.
</div>
<div class="downloads-section">
{% comment %}
The following are boards that are in the _data/files.json build
process. Separate loops due to wanting to sort by download count first.
{% endcomment %}
{% assign boards = site.data.files | sort: "downloads" | reverse %}
{% for board in boards %}
{% assign info = site.board | where: 'board_id', board.id %}
{% assign info_name = info[0].name %}
{% if info.size == 0 %}
{% assign info = site.board | where: 'board_id', 'unknown' %}
{% assign info_name = board.id %}
{% endif %}
{% assign info = info[0] %}
{% assign stable = board.versions | where: "stable", true | sort: "version" %}
{% assign unstable = board.versions | where: "stable", false | sort: "version" %}
{% if stable[0].modules and unstable[0].modules %}
{% assign modules = stable[0].modules | concat: unstable[0].modules | uniq %}
{% elsif stable[0].modules %}
{% assign modules = stable[0].modules %}
{% elsif unstable[0].modules %}
{% assign modules = unstable[0].modules %}
{% else %}
{% assign modules = '' | split: '' %}
{% endif %}
{% if info.downloads_display == false %}
{% continue %}
{% endif %}
{% if info.board_id != 'unknown' %}
{% assign download_url = info.url %}
{% else %}
{% capture download_url %}{{ info.url }}?unknown_id={{ board.id }}{% endcapture %}
{% endif %}
<div class="download" data-id="{{ board.id }}"
data-name="{{ info.name | default: board.id }}"
data-downloads="{{ board.downloads }}"
data-manufacturer="{{ info.manufacturer }}"
data-mcufamily="{{ info.family }}"
data-features="{{ info.features | join: ','}}"
data-tags="{{ info.tags | join: ','}}"
data-modules="{{ modules | join: ', ' }}"
data-date="{{ info.date_added }}">
<a href="{{ download_url | relative_url }}">
<div>
<div class="img-responsive-4by3">
{% include downloads/board_image.html board_image=info.board_image %}
</div>
<div class="details">
<h3>{{ info_name | default: board.id }}</h3>
By {{ info.manufacturer }}
</div>
</div>
</a>
</div>
{% endfor %}
{% comment %}
The following are boards that are not yet in the _data/files.json build
process and have no downloads.
{% endcomment %}
{% for board in site.board %}
{% assign info = site.data.files | where: 'id', board.board_id | first %}
{% if info == nil and board.board_id != 'unknown' %}
{% if board.downloads_display == false %}
{% continue %}
{% endif %}
<div class="download" data-id="{{ board.board_id }}"
data-name="{{ board.name }}"
data-downloads="0"
data-manufacturer="{{ board.manufacturer }}"
data-mcufamily="{{ board.family }}"
data-features="{{ board.features | join: ','}}"
data-tags="{{ info.tags | join: ','}}"
data-date="{{ board.date_added }}">
<a href="{{ board.url | relative_url }}">
<div>
<div class="img-responsive-4by3">
{% include downloads/board_image.html board_image=board.board_image %}
</div>
<div class="details">
<h3>{{ board.name }}</h3>
By {{ board.manufacturer }}
</div>
</div>
</a>
</div>
{% endif %}
{% endfor %}
</div>
</div>
<script src="/assets/javascript/downloads.js"></script>