view.mdin: /docs/internal/view/doc_tree/

import (
	"github.com/stanistan/veun"
	"github.com/stanistan/veun/el"

	"github.com/stanistan/veun-http-demo/internal/docs"
)

We want to make a component that lists out all of the docs that we've written, by their filenames so that we can attach it to the server.

Getting the tree

This is in the internal/docs package.

Making the view

Now that we have the files always available, we can make an index page that includes the directory.

We pass in the current url so we can set an active node on the tree.

func View(current string) veun.AsView {
    return el.Div{
        el.Class("doc-tree"),
        treeView(docs.Tree(), current),
    }
}

And our tree view function. This is recursive and walks the entire tree to build out the nav.

func treeView(n docs.Node, current string) el.Div {
	childPages := n.SortedKeys()
	name, href := n.LinkInfo()
	attrs := el.Attrs{}

	var elName el.Param
	if len(childPages) == 0 || name == "/" {
		elName = el.A{
			el.Attr{"href", href},
			el.Text(name),
		}
	} else {
		elName = el.Text(name)
	}

	if current == href {
		elName = el.Text(name + " ↞")
		attrs["class"] += " current"
	}

	var childContent el.Param = el.Fragment{}
	if len(childPages) > 0 {
		var children []el.Param
		for _, name := range childPages {
			children = append(children, el.Li{
				treeView(n.Children[name], current),
			})
		}
		childContent = el.Ul(children)
	}

	return el.Div{
		el.Div{attrs, elName},
		childContent,
	}
}