add more packages filters

frontend/default.nix

@@ -1,10 +1,89 @@
-{ lib
-, stdenv
-}: stdenv.mkDerivation {
+{ stdenv
+, fetchFromGitHub
+, fetchYarnDeps
+, fixup-yarn-lock
+, nodejs
+, yarn
+}: let
+  buildJS = { pname, version, src, yarnHash, packagePath, buildCmd ? "build" }: stdenv.mkDerivation {
+    inherit pname version src;
+
+    offlineCache = fetchYarnDeps {
+      yarnLock = "${src}/yarn.lock";
+      hash = yarnHash;
+    };
+
+    nativeBuildInputs = [ fixup-yarn-lock nodejs yarn ];
+
+    configurePhase = ''
+      runHook preConfigure
+
+      export HOME=$NIX_BUILD_TOP/fake_home
+      yarn config --offline set yarn-offline-mirror $offlineCache
+      fixup-yarn-lock yarn.lock
+      yarn install --offline --frozen-lockfile --ignore-scripts --no-progress --non-interactive
+      patchShebangs node_modules/
+      patchShebangs packages/${packagePath}/node_modules/
+
+      runHook postConfigure
+    '';
+
+    buildPhase = ''
+      runHook preBuild
+
+      pushd packages/${packagePath}
+      yarn --offline ${buildCmd}
+      popd
+
+      runHook postBuild
+    '';
+
+    installPhase = ''
+      runHook preInstall
+
+      mv packages/${packagePath}/dist $out
+
+      runHook postInstall
+    '';
+  };
+  algoliaInstantsearchJS = buildJS rec {
+    pname = "instantsearch";
+    version = "4.73.2";
+    src = fetchFromGitHub {
+        owner = "algolia";
+        repo = "instantsearch";
+        rev = "instantsearch.js@${version}";
+        hash = "sha256-Wu4q8PPbHlb77hSYIFnRg4FemRPjqEw4p7fSBc3gzQQ=";
+    };
+    yarnHash = "sha256-B1OP8Q+QMu6EkdeVkxiTpQY2halZmE8GhsbEJp1q4TQ=";
+    packagePath = "instantsearch.js";
+    buildCmd = "build:umd";
+  };
+  meilisearchInstant = buildJS rec {
+    pname = "meilisearch-js-plugins";
+    version = "0.19.1";
+    src = fetchFromGitHub {
+      owner = "meilisearch";
+      repo = "meilisearch-js-plugins";
+      rev = "@meilisearch/instant-meilisearch@${version}";
+      hash = "sha256-KJOj9ZMtN4bwEy+0PKuziq+1gqMp9volNACn1XTA7AA=";
+    };
+    yarnHash = "sha256-zODub/XZzIoxwUHQhp+6S2vIg7P9K/rw9ZT02teM0fw=";
+    packagePath = "instant-meilisearch";
+  };
+in  stdenv.mkDerivation {
   pname = "frontend";
   version = "0.1.0";
 
   src = ./.;
 
-  # todo
+  installPhase = ''
+    mkdir -p $out
+
+    cp $src/index.html $out/
+    cp -r ${algoliaInstantsearchJS}/instantsearch.production.min.js.map $out/
+    cp -r ${algoliaInstantsearchJS}/instantsearch.production.min.js $out/
+    cp -r ${meilisearchInstant}/instant-meilisearch.umd.min.js.map $out/
+    cp -r ${meilisearchInstant}/instant-meilisearch.umd.min.js $out/
+  '';
 }

frontend/index.html

@@ -17,10 +17,14 @@
       <option value="rolling">rolling</option>
       <option value="stable">stable</option>
     </select>
-    <div id="sort-by"></div>
+    <!-- <div id="sort-by"></div> -->
     <div id="packages_filter" class="filter">
       <h2>Platform</h2>
       <div id="platform"></div>
+      <h2>Licenses</h2>
+      <div id="licenses"></div>
+      <h2>Maintainers</h2>
+      <div id="maintainers"></div>
     </div>
     <div id="modules_filter" class="filter">
     </div>
@@ -30,8 +34,8 @@
     <div id="hits"></div>
   </div>
 </body>
-<script
-  src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>
+<script src="./instant-meilisearch.umd.min.js"></script>
+<!-- fixme: https://github.com/algolia/instantsearch/issues/6301 -->
 <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>
 <script>
   function kind() {
@@ -72,33 +76,54 @@
     instantsearch.widgets.refinementList({
       container: "#platform",
       attribute: "meta.platforms",
+      // hack for working around a quirck with transformItems
+      limit: 200,
+      // this is a rather inperformant method of doing this
+      // because every time the search term changes, this function gets run
+      // it should be fine as long as the page performance isn't too bad
+      // but we might want to revisit this in the future
+      transformItems(items) {
+        function filterPlatform(platform) {
+          let platforms = [
+            "x86_64-linux",
+            "aarch64-linux",
+            "i686-linux",
+            "x86_64-darwin",
+            "aarch64-darwin",
+          ];
+          return platforms.includes(platform.value)
+        };
+        return items.filter(filterPlatform)
+      }
     }),
-    instantsearch.widgets.sortBy({
-      container: '#sort-by',
-      items: [
-        {value: 'steam-video-games', label: 'Relevant'},
-        {
-          value: 'steam-video-games:recommendationCount:desc',
-          label: 'Most Recommended',
-        },
-        {
-          value: 'steam-video-games:recommendationCount:asc',
-          label: 'Least Recommended',
-        },
-      ],
+    instantsearch.widgets.refinementList({
+      container: "#licenses",
+      attribute: "meta.license.fullName",
+      searchable: true
+    }),
+    instantsearch.widgets.refinementList({
+      container: "#maintainers",
+      attribute: "meta.maintainers.name",
+      searchable: true
+    }),
+    instantsearch.widgets.searchBox({
+      container: "#searchbox",
+      placeholder: "Search for packages",
+      autofocus: true,
     }),
-    instantsearch.widgets.searchBox({container: "#searchbox"}),
     instantsearch.widgets.configure({hitsPerPage: 8}),
     instantsearch.widgets.hits({
       container: "#hits",
       templates: {
-        item: `
-            <div>
-            <div class="hit-name">
-                  {{#helpers.highlight}}{"attribute": "name"}{{/helpers.highlight}}
-            </div>
-            </div>
-          `}
+        item(hit, {html, components}) {
+          return html`
+        <h2>
+          ${components.Highlight({attribute: 'name', hit})}
+        </h2>
+        <p>${hit.version}</p>
+      `;
+        },
+      },
     })]);
   search.start();
 </script>

updateIndex/default.py

@@ -47,7 +47,11 @@ with open(args.documentsJsonFile) as json_file:
 
 if args.kind == "packages":
     documentResponse = client.index(indexName).add_documents(documents)
-    indexResponse = client.index(indexName).update_filterable_attributes(['meta'])
+    indexResponse = client.index(indexName).update_filterable_attributes([
+        'meta',
+        'meta.maintainers.name',
+        'meta.license.fullName'
+    ])
     meiliTaskStatus(documentResponse.task_uid, args.verbose)
     meiliTaskStatus(indexResponse.task_uid, args.verbose)
 elif args.kind == "options":