Open LDannijs opened 11 months ago
here is a proposal for an uplifting of the Device Repository home page Open for feedback
cc @KrishnaIyer
This looks really fantastic. @wienke @kschiffer please review the new design. @mjamescompton: Can you please comment on the SEO implications?
@pierrephz: Where does the Submit Your Device
button lead to?
These filter need to work for everything page type not just the homepage.
For now I think we are good having a page that contains every single device in the repo but at some point this page will become very slow. This may in happen when we start to parse the json and render everything when we are not using our Shinny new M1's. At this point it might time to add a more curated homepage https://github.com/TheThingsNetwork/lorawan-devices/issues/188 and then spilt the devices up in to categories.
Our second most valuable page other then the homepage is https://www.thethingsnetwork.org/device-repository/tags/temperature/ (we can still get this page a little higher if we complete this task https://github.com/TheThingsNetwork/lorawan-devices/issues/185 @KrishnaIyer )
This tag page will also need these filters as there are already to many devices on this page.
For this work the filter need to populated based on the content on the page and the page need to contain all devices already in the html.
I think the best way to do this is
With a JSON object containing all the device data on a page (homepage, tag, or device maker) on the page. We would still have all the devices on the page in html when it loads, this json object will also be there ready for js to consume. When the filter dropdown is press we could rebuild the devices list from this json
The json object will be generated by hugo, I believe as we are already requesting the tag we will already have an object with the devices from that tag and it might even already have the attributes. We are already generating something similar to this json object on the single device page website/layouts/devices/single.json.json
which is imported into the page
<script>
var config = {
device: JSON.parse("{{ .Params | jsonify }}")
}
</script>
We need to write the custom js to filter the elements.
@pierrephz
I think we should also add sorting as well as filters and they should be visually different from each other.
The sorting should include
Can we think of any more? Maybe creation date if we have it. Vender could be both sorting and a filter
There are things like weight
and from the dimensions we could get a size value
Summary
Add a dropdown menu that lists certain types of tags to filter through the devices.
Changes
Note
This is basically the same PR as #680 but i accidentally deleted the fork. Whoops. Please refer to that PR for the discussions around it.