index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>inxi</title>

    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <link href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" rel="stylesheet">

    <style>
        body {
            font-family: monospace;
        }

        .categories {
            line-height: 1.3;
        }
    </style>

    <script defer src="https://unpkg.com/lodash.orderby"></script>
    <script defer src="https://unpkg.com/alpinejs"></script>
    <script>
        // Important stuff
        const jsonPath = 'inxi.json'

        // Stupid stuff
        const module = {}

        async function normalize() {
            const json = await (await fetch(jsonPath)).json()
            return json.map(normalizeCategory)
        }

        function normalizeCategory(category) {
            return Object
                .keys(category)
                .sort()
                .map(key => ({
                    title: cleanString(key),
                    categories: normalizeGroups(category[key])
                }))[0]
        }

        function normalizeGroups(groups) {
            return groups.map(group => (
                Object
                    .keys(group)
                    .sort()
                    .map(key => ({
                        title: cleanString(key),
                        item: group[key]
                    }))
            ))
        }

        function getGroupsHighlight(group, index) {
            const isGroupTitle = !index && !group.item
            const highlightClass = isGroupTitle
                ? 'has-background-info-dark is-block mb-1'
                : 'has-background-info'
            return `${highlightClass} has-text-white px-1`
        }

        function cleanString(str) {
            return str.split('#').slice(-1).pop()
        }
    </script>
</head>
<body>

<div
        class="container is-max-desktop p-4 content"
        x-data="{ inxi: [] }"
        x-init="inxi = await normalize(); console.log(inxi)"
>
    <template x-for="section in inxi">
        <div class="sections block">
            <h2 class="title mb-2" x-text="section.title"></h2>

            <blockquote>
                <template x-for="category in section.categories">
                    <div class="categories mb-1">
                        <template x-for="(group, index) in category">
                            <div class="groups is-inline">
                                <span x-text="group.title" x-bind:class="getGroupsHighlight(group, index)"></span>
                                <span x-text="group.item"></span>
                            </div>
                        </template>
                    </div>
                </template>
            </blockquote>
        </div>
    </template>
</div>

</body>
</html>