adding a search to the nav bar (and more on navbar as a component)

[epaulson]

By way of setup - the current Brick ontology site (https://brickschema.org/ontology/1.3/ ) has a search bar that's specifically for the classes/relationships/properties in the ontology. I said earlier it uses lunr, I was wrong - it uses fuse.js ( https://github.com/krisk/fuse ) and then a vue-fuse wrapper (https://github.com/shayneo/vue-fuse ) to do a client-side search. The Brick website loads a JSON document for the search terms - the code is here ( https://github.com/BrickSchema/brick-website/blob/master/src/components/OntologySearchInput.vue ) and the JSON it loads is here: https://brickschema.org/ontology/1.3/search.json?version=1672180766783 )

Related, the Ontology page builds its nav bar from a related-but-smaller JSON document here: https://brickschema.org/ontology/1.3/tree.json?version=1672180766783 and then a Vue component builds all of that out from here: https://github.com/BrickSchema/brick-website/blob/master/src/pages/Ontology.vue

tree.json is pretty bare-bones. search.json includes a couple of fields that are indexed and used in the search - besides the class name, it includes the description of the class
(I don't think there's any reason we had to have the tree and search as separate documents, probably just made coding easier)

The Brick website is kind of an adventure - it uses Gridsome as its static site generator. Gridsome is a very different beast than something like Hugo/Jeykell/Pelican/other static site blog generators - Gridsome builds out a full backend with graphql and everything and then bakes out a static site from that.

It's very confusing, and I think this is what's happening, but I might be wrong. I think the full lifecycle is:

There's a python script that we run first - generate_doc_src.py - but all of the interesting parts happen in https://github.com/BrickSchema/brick-website/blob/master/util.py - this runs queries over Brick.ttl to find all of the classes/relationships/etc. It writes its output into a set of files in static/ontology/ and creates the tree.json and search.json that get read for the ontology.

The actual pages for each class/relationship/etc get read and built in the Gridsome and outputted after someone runs gridsome build to create the site, Gridsome reads those files and creates a tree of pages for each class in https://github.com/BrickSchema/brick-website/blob/cb4aa58b92dc437e6b0813e2768ef30f5fcaa621/gridsome.server.js

(Where I am a bit confused - there are two searches on the brick site -one for the ontology, and one for the rest of the pages. I think the search index that's being built in gridsome.server.js is only for the main site webpages and not the ontology pages)

After gridsome build, we copy over dist/ to the webserver. In each subdir for each version of Brick in ontology/, there's a classes.json and relationships.json (created by the python script) that you can fetch but I don't think any code in the website uses it, I think that's all driven from tree.json - but if you want them, they're there at https://brickschema.org/ontology/1.3/classes.json or https://brickschema.org/ontology/1.3/tree.json or even https://brickschema.org/ontology/all_classes.json

So anyway, we might want to do something similar - both for outputting a JSON tree that we can have a nav component load, as well as a JSON full of "documents" that includes we can load into lunr.js or fuse.js or some client side search on the names and descriptions. Maybe they're the same file or maybe we make them separate, I'm not sure what would be best - we could skip the nav bar component and go with the iframe approach but still have search with a backend JSON file.

@jbkoh