@@ -212,25 +212,41 @@ func (c CommitID) Render() []*html.Node {
		}
	}
	return []*html.Node{sha}
}

// Reference is a component that displays a reference (branch or tag). E.g., "master".
// Reference is a component that displays a reference (branch or tag). E.g., "main".
type Reference struct {
	Name          string
	Strikethrough bool
}

func (r Reference) Render() []*html.Node {
	codeStyle := `padding: 2px 6px;
background-color: rgb(232, 241, 246);
border-radius: 3px;`
	style := &html.Node{
		Type: html.ElementNode, Data: atom.Style.String(),
		Attr: []html.Attribute{{Key: atom.Type.String(), Val: "text/css"}},
		FirstChild: htmlg.Text(`.BeltReference {
	padding: 2px 6px;
	background-color: rgb(232, 241, 246);
	border-radius: 3px;
}
.BeltReference.Strikethrough {
	text-decoration: line-through;
	color: gray;
}
@media (prefers-color-scheme: dark) {
	.BeltReference {
		background-color: rgb(52, 56, 58);
	}
}`),
	}
	class := "BeltReference"
	if r.Strikethrough {
		codeStyle += `text-decoration: line-through; color: gray;`
		class += " Strikethrough"
	}
	code := &html.Node{
		Type: html.ElementNode, Data: atom.Code.String(),
		Attr:       []html.Attribute{{Key: atom.Style.String(), Val: codeStyle}},
		Attr:       []html.Attribute{{Key: atom.Class.String(), Val: class}},
		FirstChild: htmlg.Text(r.Name),
	}
	return []*html.Node{code}
	return []*html.Node{style, code}
}