git.iko.soy/urbit.org
on bc0f661 help sign in
urbit.org/docs/dev/client/tree.md
59 lines 2.4 kB history raw
1# `:tree`
3`:tree` is the web filesystem interface. Odds are this file has been rendered for you by `:tree`.
5`:tree` is a single-page app that uses a backend in `/home/tree` to load
6contents from `%clay` as the user navigates around as `%json`. The frontend
7lives in `/home/pub/tree` and is a fairly straightforward
8[React](https://facebook.github.io/react/) /
9[Flux](https://facebook.github.io/flux/) app.
11## Frontend
13The frontend code for `:tree` can be found in `/home/pub/tree/src/`.
15### CSS
17The CSS is written in [Stylus](https://learnboost.github.io/stylus/). The main entry point is `main.styl` and can be compiled with `stylus main.styl` which should output a `main.css`
19### JS
21The JS is written in [CoffeeScript](http://coffeescript.org/) and packaged with
22[Browserify](http://browserify.org/). The main entry point is `main.coffee` and
23is compiled with `browserify -t coffeeify main.coffee > main.js`. You'll need
24to `npm install` first.
26Each page is loaded as JSON and then rendered using React on the page. This
27allows us to write JSX in our markdown to implement simple components. Check
28out `/home/pub/tree/src/js/components` to see the component library.
30You'll notice that some of these doc pages use things like `<list>` in the raw markdown files.
32## JSON API
33Async provides loading by schema
35`{path name sein sibs next prev}` are all immediately accesible from the store
37a `getPath` method, if present (defaulting to current url), is used to determine the query root node.
39## JSON Internals
41### `/[desk]/tree/{path}.json`
42`tree/json.hook` accepts a query string schema `q` in light noun encoding
44 ++ schema (dict ,[term $|(mark schema)])
45 ++ dict |*(a=_,* $&([a (dict a)] a))
47which is normalized and type-checked to a `query` list of
48- `[%kids query]`, the only recursive value, which executes for all subpaths
49 XX descent is only currently supported to a single level as a performance optimization
50- `[%name %t]`, the node name
51- `[%path %t]`, the current path
52- `[%snip %r]`, a snippet, extracted via `react-snip-json`
53- `[%head %r]`, the first `<h1/>`, extracted via `react-head-json`
54- `[%body %r]`, the `react-json` body
55- `[%meta %j]`, json frontmatter per the `mdy` mark definition
57The request types above are `%t` text, `%r` html-derived tree, and `%j`
58arbitrary json; an example query, used by the main content renderer, is
59`"q=body.r__kids_name.t"` (`body:'r' kids:{name:'t'}` )