Skip to content

Start hardware page populated from Hex #67

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Start hardware page populated from Hex #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions assets/js/axios.js
View file
Open in desktop

Large diffs are not rendered by default.

109 changes: 109 additions & 0 deletions assets/js/hardware.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
import axios from "./axios";

export default {
init() {
function create_card(container, hexPackage, is_official) {
var div = document.createElement("div");
div.setAttribute("class", "column is-half");

var extra = document.createElement("div");
extra.setAttribute("class", "columns is-multiline");

if ('extra' in hexPackage.meta) {
hexPackage.meta.extra.entries().forEach(([key, value]) => {
entry = document.createElement("div");
entry.setAttribute("class", "box px-1 py-1 mx-1 my-1");
entry.innerHTML = `<strong>${key}:</strong> ${val}`
extra.appendChild(entry);
});
}

var name = hexPackage.name
var title = hexPackage.meta.description.replace("Nerves System -", "");
var notes = ""
if (hexPackage.meta.extra && hexPackage.meta.extra.notes) {
notes = hexPackage.meta.extra.notes
}

var owners = ""
if (is_official) {
owners = `<span class="icon-text">
<span class="icon" title="Officially supported by Nerves">
<img src="/img/icon.png" alt="">
</span>
<span> official</span>
</span>
`
}

div.innerHTML = `
<div class="card">
<div class="card-content">

<div class="media">
<div class="media-left">
<figure class="image is-128x128">
<img src="https://bulma.io/images/placeholders/128x128.png" alt="Placeholder image">
</figure>
</div>
<div class="media-content">
<p class="title is-4">${title}</p>
<p class="subtitle is-6">
<a href="https://hex.pm/packages/${name}"><img src="https://img.shields.io/hexpm/v/${name}.svg?label=${name}" alt=""></a>
<a href=""><img src="https://img.shields.io/librariesio/release/hex/${name}" alt=""></a>
</p>
${owners}
<p>${notes}</p>
</div>

</div>
<div id="${name}-extra" class="content">
</div>
</div>
</div>
`;

// this is hacky to put the extra stuff where I want it
div.children[0].children[0].children[1].appendChild(extra);

container.appendChild(div);
}

document.addEventListener("DOMContentLoaded", () => {
var official_container = document.getElementById("official-hardware-items");
var user_container = document.getElementById("user-hardware-items");

axios.get("https://hex.pm/api/packages?search=depends%3Anerves_system_br&sort=downloads").then(function (response) {
const grouped = {official: [], user: []}

response.data.forEach((item) => {
switch(item.name) {
case "nerves_system_bbb":
case "nerves_system_osd32mp1":
case "nerves_system_rpi":
case "nerves_system_rpi0":
case "nerves_system_rpi2":
case "nerves_system_rpi3":
case "nerves_system_rpi3a":
case "nerves_system_rpi4":
case "nerves_system_vultr":
case "nerves_system_x86_64":
case "nerves_system_grisp2":
grouped.official.push(item)
break;
default:
grouped.user.push(item)
break;
}
});

grouped.official.forEach((hexPackage) => {
create_card(official_container, hexPackage, true);
})
grouped.user.forEach((hexPackage) => {
create_card(user_container, hexPackage, false);
})
})
});
},
};
4 changes: 4 additions & 0 deletions assets/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
import modal from './modal'
import Navbar from './navbar'
import videos from './videos'
import hardware from './hardware'

Navbar.init()
modal.init()

if (window.location.href.indexOf("videos") != -1) {
videos.init()
}
if (window.location.href.indexOf("hardware") != -1) {
hardware.init()
}
107 changes: 107 additions & 0 deletions content/hardware.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
---
type: hardware
title: Hardware
date: 2022-01-01
tags: []

systems:
- name: Beaglebone family of boards
package: nerves_system_bbb
metadata:
CPU: arm
Memory: 4GB
Storage: EMMC
WiFi: built-in
Ethernet:
Cellular: something
- name: Octavo OSD32MP1-BRK
package: nerves_system_osd32mp1
metadata:
CPU: arm
Memory: 4GB
Storage: EMMC
WiFi: built-in
Ethernet:
Cellular: something
- name: Original Raspberry Pi Model B
package: nerves_system_rpi
metadata:
CPU: arm
Memory: 4GB
Storage: EMMC
WiFi: built-in
Ethernet:
Cellular: something
- name: Raspberry Pi Zero W
package: nerves_system_rpi0
metadata:
CPU: arm
Memory: 4GB
Storage: EMMC
WiFi: built-in
Ethernet:
Cellular: something
- name: Raspberry Pi 2
package: nerves_system_rpi2
metadata:
CPU: arm
Memory: 4GB
Storage: EMMC
WiFi: built-in
Ethernet:
Cellular: something
- name: Raspberry Pi 3 Module B
package: nerves_system_rpi3
metadata:
CPU: arm
Memory: 4GB
Storage: EMMC
WiFi: built-in
Ethernet:
Cellular: something
- name: Raspberry Pi 3 Model A+ w/ gadget mode and Raspberry Pi Zero 2 W
package: nerves_system_rpi3a
metadata:
CPU: arm
Memory: 4GB
Storage: EMMC
WiFi: built-in
Ethernet:
Cellular: something
- name: Raspberry Pi 4
package: nerves_system_rpi4
metadata:
CPU: arm
Memory: 4GB
Storage: EMMC
WiFi: built-in
Ethernet:
Cellular: something
- name: Vultr cloud server
package: nerves_system_vultr
metadata:
CPU: arm
Memory: 4GB
Storage: EMMC
WiFi: built-in
Ethernet:
Cellular: something
- name: Generic x86_64
package: nerves_system_x86_64
metadata:
CPU: arm
Memory: 4GB
Storage: EMMC
WiFi: built-in
Ethernet:
Cellular: something
- name: GRiSP 2
package: nerves_system_grisp2
metadata:
CPU: arm
Memory: 4GB
Storage: EMMC
WiFi: built-in
Ethernet:
Cellular: something
---
53 changes: 53 additions & 0 deletions layouts/hardware/single.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
{{ define "main" }}

{{ partial "simple-hero" . }}

<section class="section">
<div id="official-hardware-items" class="columns is-multiline">
<!-- {{ range .Params.systems }}
<div class="column is-half">
<div class="card">
<div class="card-content">

<div class="media">
<div class="media-left">
<figure class="image is-128x128">
<img src="https://bulma.io/images/placeholders/128x128.png" alt="Placeholder image">
</figure>
</div>
<div class="media-content">
<p class="title is-4">{{ .name }}</p>
<p class="subtitle is-6">
<a href="https://hex.pm/packages/{{ .package }}"><img src="https://img.shields.io/hexpm/v/{{ .package }}.svg?label={{ .package }}" alt=""></a>
<a href=""><img src="https://img.shields.io/librariesio/release/hex/{{ .package }}" alt=""></a>
<span class="icon" title="Officially supported by Nerves">
<img src="{{ relURL "img/icon.png" }}" alt="">
</span>
</p>
<p>These are some notes from the metadata</p>
</div>

</div>
<div class="content">
<div class="columns is-multiline">
{{ range $key, $val := .metadata }}
<div class="box px-1 py-1 mx-1 my-1">
<strong>{{ $key }}:</strong> {{ $val }}
</div>
{{ end }}
</div>

</div>
</div>
</div>
</div>
{{ end }} -->
</div>
</section>
<section class="section">
<div class="title">User provided systems</div>
<div id="user-hardware-items" class="columns is-multiline">
</div>
</section>

{{ end }}