Add tag dropdowns

[LDannijs]

Summary

Add a dropdown menu that lists certain types of tags to filter through the devices.

Changes

• add rudimentary code for tag dropdown
• added a bit of styling (just for testing mainly)

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.

[pierrephz]

https://github.com/TheThingsNetwork/lorawan-devices/assets/26456318/1af8975d-90ef-4c01-98a2-a61fa551f1b8

here is a proposal for an uplifting of the Device Repository home page Open for feedback

cc @KrishnaIyer

Expend to view the mockup

[KrishnaIyer]

This looks really fantastic. @wienke @kschiffer please review the new design. @mjamescompton: Can you please comment on the SEO implications?

[KrishnaIyer]

@pierrephz: Where does the Submit Your Device button lead to?

[mjamescompton]

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.

[mjamescompton]

@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

• Featured order - (Lets add a order number somewhere and then sort by that)
• Title - A-Z
• Title - Z-A

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