firefly-compiler 0.4.79 → 0.4.81

package/fireflysite/Guide.ff

@@ -1,411 +1,442 @@
-import Lux from ff:lux
-import LuxEvent from ff:lux
-import Css from ff:lux
-import Tokenizer from ff:compiler
-import Token from ff:compiler
-import Styles
-import DocumentParser
-
-data Guide(
-    prefix: String
-    documents: List[Document]
-)
-
-data Document {
-    ReadyDocument(
-        sections: List[Section]
-    )
-    UnfetchedDocument(
-        header: String
-    )
-}
-
-
-data Section(heading: String) {
-    Section(
-        blocks: List[Block]
-    )
-    SplitSection(
-        first: Block
-        second: Block
-    )
-}
-
-data Block {
-    Paragraph(inlines: List[Inline])
-    Bullets(items: List[List[Inline]])
-    CodeBlock(code: String, firefly: Bool = False)
-    Image(url: String)
-    Video(url: String)
-    LuxDemo(demo: String)
-}
-
-data Inline {
-    Text(text: String)
-    Bold(text: String)
-    Italic(text: String)
-    Code(code: String, firefly: Bool = False)
-    Link(text: String, url: String)
-    Anchor(heading: String, title: Option[String] = None)
-}
-
-extend self: Guide {
-    heading(): String {
-        self.documents.first().map {_.heading()}.else {""}
-    }
-    title(): String {
-        if(self.heading() == "Firefly") {self.heading()} else {"Firefly " + self.heading()}
-    }
-}
-
-extend self: Document {
-    heading(): String {
-        self.{
-            | ReadyDocument(sections) => 
-                sections.first().map {_.heading}.else {""}
-            | UnfetchedDocument(header) => header
-        }
-    }
-    title(guide: Guide): String {
-        if(guide.documents.first().any {_.heading() == self.heading()}) {
-            guide.title()
-        } else {
-            self.heading() + " · " + guide.title()
-        }
-    }
-    path(guide: Guide): String {
-        if(guide.documents.first().any {_.heading() == self.heading()}) {
-            guide.prefix
-        } else {
-            guide.prefix + kebabCase(self.heading())
-        }
-    }
-}
-
-capability Demo(
-    name: String
-    render: Lux => Unit
-)
-
-data GuideDocument(
-    guide: Guide
-    document: Document
-)
-
-render(lux: Lux, browser: BrowserSystem, prefix: String, kebab: String, guides: List[Guide], demos: List[Demo]) {
-    let guide = guides.find {_.prefix == prefix}.else {guides.grabFirst()}
-    let document = guide.documents.find {d => 
-        kebabCase(d.heading()) == kebab
-    }.else {guide.documents.grabFirst()}
-    browser.js().global().get("document").set("title", document.title(guide))
-    let guideDocuments = guides.flatMap {guide => guide.documents.map {document => 
-        GuideDocument(guide, document)
-    }}
-    let nextDocument = guideDocuments.dropWhile {n => 
-        n.guide.prefix != guide.prefix || n.document.heading() != document.heading()
-    }.dropFirst().first()
-    lux.add("div") {
-        lux.useState(False): menu, setMenu =>
-        lux.cssClass(Styles.pageCss)
-        lux.add("div") {
-            lux.cssClass(Styles.guideCss)
-            lux.add("main") {
-                lux.cssClass(Styles.guideMainCss)
-                renderDocument(lux, browser.httpClient(), document, demos, nextDocument)
-            }
-            lux.add("button") {
-                lux.set("aria-label", "Toggle the menu")
-                lux.cssClass(Styles.guideSidebarButtonCss)
-                if(menu) {lux.cssClass(Styles.guideSidebarButtonOpenCss)}
-                lux.onClick {event =>
-                    event.preventDefault()
-                    setMenu(True)
-                }
-            }
-            lux.add("div") {
-                lux.cssClass(Styles.guideSidebarBackdropCss)
-                if(menu) {lux.cssClass(Styles.guideSidebarBackdropOpenCss)}
-                lux.onClick {event =>
-                    event.preventDefault()
-                    setMenu(False)
-                }
-            }
-            renderSidebar(lux, guides, guide, document.heading(), menu)
-        }
-    }
-}
-
-renderSidebar(lux: Lux, guides: List[Guide], selectedGuide: Guide, selectedHeading: String, menu: Bool) {
-    lux.add("nav") {
-        lux.cssClass(Styles.guideSidebarCss)
-        if(menu) {lux.cssClass(Styles.guideSidebarOpenCss)}
-        lux.add("a") {
-            lux.set("href", "/front/")
-            lux.cssClass(Styles.guideSidebarLogoCss)
-            lux.add("img") {
-                lux.set("src", "/assets/firefly-logo-yellow.png")
-            }
-            lux.div {
-                lux.text("Firefly")
-            }
-        }
-        lux.add("form") {
-            lux.set("role", "search")
-            lux.add("input") {
-                lux.set("aria-label", "Search")
-                lux.cssClass(Styles.searchInputCss)
-                lux.set("placeholder", "Search...")
-            }
-        }
-        lux.add("ul") {
-            lux.cssClass(Styles.guideSidebarUl1Css)
-            guides.dropFirst().each {guide =>
-                lux.add("li") {
-                    lux.cssClass(Styles.guideSidebarLi1Css)
-                    lux.add("a") {
-                        lux.cssClass(Styles.whiteLinkCss)
-                        let heading = guide.documents.grabFirst().heading()
-                        if(selectedGuide.prefix == guide.prefix && heading == selectedHeading) {
-                            lux.set("aria-current", "page")
-                        }
-                        lux.set("href", guide.prefix)
-                        lux.text(heading)
-                    }
-                    if(guide.documents.size() > 1): 
-                    lux.add("ul") {
-                        lux.cssClass(Styles.guideSidebarUl2Css)
-                        guide.documents.dropFirst().each {document =>
-                            lux.add("li") {
-                                lux.cssClass(Styles.guideSidebarLi2Css)
-                                lux.add("a") {
-                                    lux.cssClass(Styles.whiteLinkCss)
-                                    let heading = document.heading()
-                                    if(selectedGuide.prefix == guide.prefix && heading == selectedHeading) {
-                                        lux.set("aria-current", "page")
-                                    }
-                                    lux.set("href", guide.prefix + kebabCase(heading))
-                                    lux.text(heading)
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-renderDocument(lux: Lux, http: HttpClient, document: Document, demos: List[Demo], nextDocument: Option[GuideDocument]) {
-    lux.add("article") {
-        lux.cssClass(Styles.guideDocumentCss)
-        document.{
-            | ReadyDocument(sections) => 
-                renderSections(lux, sections, demos)
-            | UnfetchedDocument(header) => 
-                lux.div {
-                    lux.useSuspense {lux.div {lux.text("Loading document...")}}: lux =>
-                    let asset = "/assets/markdown/" + document.heading().replace(" ", "") + ".md"
-                    let markdown = http.get(asset, []) {_.readText()}
-                    let parser = DocumentParser(asset, markdown.split('\n'))
-                    let sections = parser.parseDocument()
-                    renderSections(lux, sections, demos)
-                }
-        }
-        nextDocument.each {next => 
-            lux.div {
-                lux.cssClass(Styles.guideNextButtonCss)
-                lux.add("a") {
-                    lux.cssClass(Styles.guideButtonCss)
-                    lux.set("href", next.document.path(next.guide))
-                    lux.text("Next: " + next.document.heading())
-                }
-            }
-        }
-    }
-}
-
-renderSections(lux: Lux, sections: List[Section], demos: List[Demo]) {
-    sections.pairs().each {| Pair(index, section) => 
-        renderSection(lux, index == 0, section, demos)
-    }
-}
-
-renderSection(lux: Lux, firstSection: Bool, section: Section, demos: List[Demo]) {
-    section.{
-        | Section(heading, blocks) => 
-            lux.add(if(firstSection) {"h1"} else {"h2"}) {
-                lux.cssClass(if(firstSection) {Styles.guideH1Css} else {Styles.guideH2Css})
-                lux.text(heading)
-            }
-            blocks.each {renderBlock(lux, _, demos)}
-        | SplitSection(heading, first, second) => 
-            lux.add("div") {
-                lux.cssClass(Styles.guideSplitCss)
-                lux.add("div") {
-                    lux.add("h2") {
-                        lux.cssClass(Styles.guideSplitHeadingCss)
-                        lux.text(section.heading)
-                    }
-                    renderBlock(lux, first, demos)
-                }
-                lux.add("div") {
-                    renderBlock(lux, second, demos)
-                }
-            }
-        }
-}
-
-renderBlock(lux: Lux, block: Block, demos: List[Demo]) {
-    block.{
-        | Paragraph(inlines) => renderParagraph(lux, inlines)
-        | CodeBlock(code, firefly) => renderCodeBlock(lux, code, firefly)
-        | Bullets(items) => renderBullets(lux, items)
-        | Image(url) => renderImage(lux, url)
-        | Video(url) => renderVideo(lux, url)
-        | LuxDemo(name) => renderLuxDemo(lux, name, demos)
-    }
-}
-
-renderParagraph(lux: Lux, inlines: List[Inline]) {
-    lux.add("p") {
-        renderInlines(lux, inlines)
-    }
-}
-
-renderCodeBlock(lux: Lux, code: String, firefly: Bool) {
-    let lines = code.lines().dropWhile {_.all {_ == ' '}}.reverse().dropWhile {_.all {_ == ' '}}.reverse()
-    let indentation = lines.first().map {_.takeWhile {_ == ' '}.size()}.else {0}
-    lux.add("pre") {
-        lux.cssClass(Styles.guideCodeBlockCss)
-        lux.add("code") {
-            lux.cssClass(Styles.guideCodeCss)
-            let unindentedCode = lines.map {_.dropFirst(indentation)}.join("\n")
-            if(firefly) {
-                renderHighlightedCode(lux, unindentedCode)
-            } else {
-                lux.text(unindentedCode)
-            }
-        }
-    }
-}
-
-renderBullets(lux: Lux, items: List[List[Inline]]) {
-    lux.add("ul") {
-        items.each {inlines =>
-            lux.add("li") {
-                renderInlines(lux, inlines)
-            }
-        }
-    }
-}
-
-renderImage(lux: Lux, url: String) {
-    lux.add("img") {
-        lux.set("src", url)
-        lux.css(Css.maxWidth("100%"))
-        lux.css(Css.borderRadius("8px"))
-    }
-}
-
-renderVideo(lux: Lux, url: String) {
-    lux.add("video") {
-        lux.set("src", url)
-        lux.css(Css.maxWidth("100%"))
-    }
-}
-
-renderLuxDemo(lux: Lux, name: String, demos: List[Demo]) {
-    demos.find {_.name == name}.map {_.render(lux)}.else {lux.text("Demo not found")}
-}
-
-renderInlines(lux: Lux, inlines: List[Inline]) {
-    inlines.separate([Text(" ")]).each {renderInline(lux, _)}
-}
-
-renderInline(lux: Lux, inline: Inline) {
-    inline.{
-        | Anchor(heading, title) => 
-            lux.add("a") {
-                let url = title.map {"/guide/" + kebabCase(_)}.else {""} + "#" + kebabCase(heading)
-                lux.cssClass(Styles.guideLinkCss)
-                lux.set("href", url)
-                lux.text(title.map {_ + ": "}.else {""} + heading)
-            }
-        | Bold(text) => 
-            lux.add("b") {
-                lux.text(text)
-            }
-        | Code(code, firefly) => 
-            lux.add("code") {
-                lux.cssClass(Styles.guideCodeCss)
-                if(firefly) {
-                    renderHighlightedCode(lux, code)
-                } else {
-                    lux.text(code)
-                }
-            }
-        | Italic(text) => 
-            lux.add("i") {
-                lux.text(text)
-            }
-        | Link(text, url) => 
-            lux.add("a") {
-                lux.cssClass(Styles.guideLinkCss)
-                lux.set("href", url)
-                lux.text(text)
-            }
-        | Text(text) => 
-            lux.text(text)
-    }
-}
-
-renderHighlightedCode(lux: Lux, code: String) {
-    try {
-        Tokenizer.tokenize("<example>", code + "\n", None, False)
-    }.toOption().map {tokens => 
-        mutable offset = 0
-        mutable index = 0
-        tokens.each {token =>
-            if(token.startOffset > offset) {
-                lux.span {
-                    lux.cssClass(Styles.codeCommentCss)
-                    lux.text(code.slice(offset, token.startOffset))
-                }
-            }
-            if(token.kind != LEnd) {
-                let css = token.kind.{
-                    | LChar => Styles.codeStringCss
-                    | LFloat => Styles.codeNumberCss
-                    | LInt => Styles.codeNumberCss
-                    | LKeyword => Styles.codeKeywordCss
-                    | LNamespace => Styles.codeTypeCss
-                    | LString => Styles.codeStringCss
-                    | LUpper => Styles.codeTypeCss
-                    | LWildcard => Styles.codeVariableCss
-                    | LLower {tokens.get(index - 1).any {t => 
-                        t.kind == LBracketRight || t.kind == LDot
-                    }} => Styles.codeCallCss
-                    | LLower {tokens.grab(index + 1).kind == LBracketLeft} => Styles.codeCallCss
-                    | LLower => Styles.codeVariableCss
-                    | _ => Styles.codeOtherCss
-                }
-                lux.span {
-                    lux.cssClass(css)
-                    lux.text(code.slice(token.startOffset, token.stopOffset))
-                }
-                offset = token.stopOffset
-            }
-            index += 1
-        }
-    }.else {lux.text(code)}
-}
-
-kebabCase(text: String): String {
-    mutable result = text.trim().lower().filter {c => c.isAsciiLetterOrDigit() || c == ' '}
-    doWhile {
-        let before = result
-        result = result.replace("  ", "")
-        result != before
-    }
-    result.replace(" ", "-")
-}
+import Lux from ff:lux
+import LuxEvent from ff:lux
+import Css from ff:lux
+import Tokenizer from ff:compiler
+import Token from ff:compiler
+import Styles
+import DocumentParser
+
+data Guide(
+    prefix: String
+    documents: List[Document]
+)
+
+data Document {
+    ReadyDocument(
+        sections: List[Section]
+    )
+    UnfetchedDocument(
+        header: String
+    )
+}
+
+
+data Section(heading: String) {
+    Section(
+        blocks: List[Block]
+    )
+    SplitSection(
+        first: Block
+        second: Block
+    )
+}
+
+data Block {
+    Paragraph(inlines: List[Inline])
+    Bullets(items: List[List[Inline]])
+    CodeBlock(code: String, firefly: Bool = False)
+    Image(url: String)
+    Video(url: String)
+    LuxDemo(demo: String)
+}
+
+data Inline {
+    Text(text: String)
+    Bold(text: String)
+    Italic(text: String)
+    Code(code: String, firefly: Bool = False)
+    Link(text: String, url: String)
+    Anchor(heading: String, title: Option[String] = None)
+}
+
+extend self: Guide {
+    heading(): String {
+        self.documents.first().map {_.heading()}.else {""}
+    }
+    title(): String {
+        if(self.heading() == "Firefly") {self.heading()} else {"Firefly " + self.heading()}
+    }
+}
+
+extend self: Document {
+    heading(): String {
+        self.{
+            | ReadyDocument(sections) => 
+                sections.first().map {_.heading}.else {""}
+            | UnfetchedDocument(header) => header
+        }
+    }
+    title(guide: Guide): String {
+        if(guide.documents.first().any {_.heading() == self.heading()}) {
+            guide.title()
+        } else {
+            self.heading() + " · " + guide.title()
+        }
+    }
+    path(guide: Guide): String {
+        if(guide.documents.first().any {_.heading() == self.heading()}) {
+            guide.prefix
+        } else {
+            guide.prefix + kebabCase(self.heading())
+        }
+    }
+}
+
+capability Demo(
+    name: String
+    render: Lux => Unit
+)
+
+data GuideDocument(
+    guide: Guide
+    document: Document
+)
+
+render(lux: Lux, httpClient: HttpClient, prefix: String, kebab: String, guides: List[Guide], demos: List[Demo]) {
+    let guide = guides.find {_.prefix == prefix}.else {guides.grabFirst()}
+    let document = guide.documents.find {d => 
+        kebabCase(d.heading()) == kebab
+    }.else {guide.documents.grabFirst()}
+    let guideDocuments = guides.flatMap {guide => guide.documents.map {document => 
+        GuideDocument(guide, document)
+    }}
+    let nextDocument = guideDocuments.dropWhile {n => 
+        n.guide.prefix != guide.prefix || n.document.heading() != document.heading()
+    }.dropFirst().first()
+    lux.add("div") {
+        lux.useState(False): menu, setMenu =>
+        lux.cssClass(Styles.pageCss)
+        lux.add("div") {
+            lux.cssClass(Styles.guideCss)
+            lux.add("main") {
+                lux.cssClass(Styles.guideMainCss)
+                renderDocument(lux, httpClient, prefix, document, demos, nextDocument)
+            }
+            renderTopbar(lux, menu, setMenu)
+            lux.add("div") {
+                lux.cssClass(Styles.guideSidebarBackdropCss)
+                if(menu) {lux.cssClass(Styles.guideSidebarBackdropOpenCss)}
+                lux.onClick {event =>
+                    event.preventDefault()
+                    setMenu(False)
+                }
+            }
+            renderSidebar(lux, guides, guide, document.heading(), menu)
+        }
+    }
+}
+
+renderTopbar(lux: Lux, menu: Bool, setMenu: Bool => Unit) {
+    lux.add("div") {
+        lux.cssClass(Styles.guideTopbarCss)
+        lux.add("a") {
+            lux.set("href", "/front/")
+            lux.cssClass(Styles.guideTopbarLogoCss)
+            lux.add("img") {
+                lux.set("src", "/assets/image/firefly-logo-yellow.png")
+            }
+            lux.div {
+                lux.text("Firefly")
+            }
+        }
+        lux.add("button") {
+            lux.set("aria-label", "Toggle the menu")
+            lux.cssClass(Styles.guideTopbarButtonCss)
+            lux.onClick {event =>
+                event.preventDefault()
+                setMenu(True)
+            }
+        }
+    }
+}
+
+renderSidebar(lux: Lux, guides: List[Guide], selectedGuide: Guide, selectedHeading: String, menu: Bool) {
+    lux.add("nav") {
+        lux.cssClass(Styles.guideSidebarCss)
+        if(menu) {lux.cssClass(Styles.guideSidebarOpenCss)}
+        lux.add("a") {
+            lux.set("href", "/front/")
+            lux.cssClass(Styles.guideSidebarLogoCss)
+            lux.add("img") {
+                lux.set("src", "/assets/image/firefly-logo-yellow.png")
+            }
+            lux.div {
+                lux.text("Firefly")
+            }
+        }
+        lux.add("form") {
+            lux.set("role", "search")
+            lux.add("input") {
+                lux.set("aria-label", "Search")
+                lux.cssClass(Styles.searchInputCss)
+                lux.set("placeholder", "Search...")
+            }
+        }
+        lux.add("ul") {
+            lux.cssClass(Styles.guideSidebarUl1Css)
+            guides.dropFirst().each {guide =>
+                lux.add("li") {
+                    lux.cssClass(Styles.guideSidebarLi1Css)
+                    lux.add("a") {
+                        lux.cssClass(Styles.whiteLinkCss)
+                        let heading = guide.documents.grabFirst().heading()
+                        if(selectedGuide.prefix == guide.prefix && heading == selectedHeading) {
+                            lux.set("aria-current", "page")
+                        }
+                        lux.set("href", guide.prefix)
+                        lux.text(heading)
+                    }
+                    if(guide.documents.size() > 1): 
+                    lux.add("ul") {
+                        lux.cssClass(Styles.guideSidebarUl2Css)
+                        guide.documents.dropFirst().each {document =>
+                            lux.add("li") {
+                                lux.cssClass(Styles.guideSidebarLi2Css)
+                                lux.add("a") {
+                                    lux.cssClass(Styles.whiteLinkCss)
+                                    let heading = document.heading()
+                                    if(selectedGuide.prefix == guide.prefix && heading == selectedHeading) {
+                                        lux.set("aria-current", "page")
+                                    }
+                                    lux.set("href", guide.prefix + kebabCase(heading))
+                                    lux.text(heading)
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+renderDocument(
+    lux: Lux
+    http: HttpClient
+    prefix: String
+    document: Document
+    demos: List[Demo] 
+    nextDocument: Option[GuideDocument]
+) {
+    lux.add("article") {
+        lux.cssClass(Styles.guideDocumentCss)
+        document.{
+            | ReadyDocument(sections) => 
+                renderSections(lux, sections, demos)
+                renderNext(lux, nextDocument)
+            | UnfetchedDocument(header) => 
+                lux.div {
+                    lux.useSuspense {lux.div {lux.text("Loading document...")}}: lux =>
+                    let firstName = document.heading().split(' ').map {w => 
+                        let word = w.trim().lower()
+                        word.slice(0, 1).upper() + word.dropFirst()
+                    }.join()
+                    let asset = "/assets/markdown" + prefix + firstName + ".md"
+                    let markdown = http.get(asset, []) {_.readText()}
+                    let parser = DocumentParser(asset, markdown.split('\n'), 0)
+                    let sections = parser.parseDocument()
+                    renderSections(lux, sections, demos)
+                    renderNext(lux, nextDocument)
+                }
+        }
+    }
+}
+
+renderSections(lux: Lux, sections: List[Section], demos: List[Demo]) {
+    sections.pairs().each {| Pair(index, section) => 
+        renderSection(lux, index == 0, section, demos)
+    }
+}
+
+renderNext(lux: Lux, nextDocument: Option[GuideDocument]) {
+    nextDocument.each {next => 
+        lux.div {
+            lux.cssClass(Styles.guideNextButtonCss)
+            lux.add("a") {
+                lux.cssClass(Styles.guideButtonCss)
+                lux.set("href", next.document.path(next.guide))
+                lux.text("Next: " + next.document.heading())
+            }
+        }
+    }
+}
+
+renderSection(lux: Lux, firstSection: Bool, section: Section, demos: List[Demo]) {
+    section.{
+        | Section(heading, blocks) => 
+            lux.add(if(firstSection) {"h1"} else {"h2"}) {
+                lux.cssClass(if(firstSection) {Styles.guideH1Css} else {Styles.guideH2Css})
+                lux.text(heading)
+            }
+            blocks.each {renderBlock(lux, _, demos)}
+        | SplitSection(heading, first, second) => 
+            lux.add("div") {
+                lux.cssClass(Styles.guideSplitCss)
+                lux.add("div") {
+                    lux.add("h2") {
+                        lux.cssClass(Styles.guideSplitHeadingCss)
+                        lux.text(section.heading)
+                    }
+                    renderBlock(lux, first, demos)
+                }
+                lux.add("div") {
+                    renderBlock(lux, second, demos)
+                }
+            }
+        }
+}
+
+renderBlock(lux: Lux, block: Block, demos: List[Demo]) {
+    block.{
+        | Paragraph(inlines) => renderParagraph(lux, inlines)
+        | CodeBlock(code, firefly) => renderCodeBlock(lux, code, firefly)
+        | Bullets(items) => renderBullets(lux, items)
+        | Image(url) => renderImage(lux, url)
+        | Video(url) => renderVideo(lux, url)
+        | LuxDemo(name) => renderLuxDemo(lux, name, demos)
+    }
+}
+
+renderParagraph(lux: Lux, inlines: List[Inline]) {
+    lux.add("p") {
+        renderInlines(lux, inlines)
+    }
+}
+
+renderCodeBlock(lux: Lux, code: String, firefly: Bool) {
+    let lines = code.lines().dropWhile {_.all {_ == ' '}}.reverse().dropWhile {_.all {_ == ' '}}.reverse()
+    let indentation = lines.first().map {_.takeWhile {_ == ' '}.size()}.else {0}
+    lux.add("pre") {
+        lux.cssClass(Styles.guideCodeBlockCss)
+        lux.add("code") {
+            lux.cssClass(Styles.guideCodeCss)
+            let unindentedCode = lines.map {_.dropFirst(indentation)}.join("\n")
+            if(firefly) {
+                renderHighlightedCode(lux, unindentedCode)
+            } else {
+                lux.text(unindentedCode)
+            }
+        }
+    }
+}
+
+renderBullets(lux: Lux, items: List[List[Inline]]) {
+    lux.add("ul") {
+        items.each {inlines =>
+            lux.add("li") {
+                renderInlines(lux, inlines)
+            }
+        }
+    }
+}
+
+renderImage(lux: Lux, url: String) {
+    lux.add("img") {
+        lux.set("src", url)
+        lux.css(Css.maxWidth("100%"))
+        lux.css(Css.borderRadius("8px"))
+    }
+}
+
+renderVideo(lux: Lux, url: String) {
+    lux.add("video") {
+        lux.set("src", url)
+        lux.css(Css.maxWidth("100%"))
+    }
+}
+
+renderLuxDemo(lux: Lux, name: String, demos: List[Demo]) {
+    demos.find {_.name == name}.map {_.render(lux)}.else {lux.text("Demo not found")}
+}
+
+renderInlines(lux: Lux, inlines: List[Inline]) {
+    inlines.separate([Text(" ")]).each {renderInline(lux, _)}
+}
+
+renderInline(lux: Lux, inline: Inline) {
+    inline.{
+        | Anchor(heading, title) => 
+            lux.add("a") {
+                let url = title.map {"/guide/" + kebabCase(_)}.else {""} + "#" + kebabCase(heading)
+                lux.cssClass(Styles.guideLinkCss)
+                lux.set("href", url)
+                lux.text(title.map {_ + ": "}.else {""} + heading)
+            }
+        | Bold(text) => 
+            lux.add("b") {
+                lux.text(text)
+            }
+        | Code(code, firefly) => 
+            lux.add("code") {
+                lux.cssClass(Styles.guideCodeCss)
+                if(firefly) {
+                    renderHighlightedCode(lux, code)
+                } else {
+                    lux.text(code)
+                }
+            }
+        | Italic(text) => 
+            lux.add("i") {
+                lux.text(text)
+            }
+        | Link(text, url) => 
+            lux.add("a") {
+                lux.cssClass(Styles.guideLinkCss)
+                lux.set("href", url)
+                lux.text(text)
+            }
+        | Text(text) => 
+            lux.text(text)
+    }
+}
+
+renderHighlightedCode(lux: Lux, code: String) {
+    try {
+        Tokenizer.tokenize("<example>", code + "\n", None, False)
+    }.toOption().map {tokens => 
+        mutable offset = 0
+        mutable index = 0
+        tokens.each {token =>
+            if(token.startOffset > offset && index <= tokens.size() - 5) {
+                lux.span {
+                    lux.cssClass(Styles.codeCommentCss)
+                    lux.text(code.slice(offset, token.startOffset))
+                }
+            }
+            if(token.kind != LEnd) {
+                let css = token.kind.{
+                    | LChar => Styles.codeStringCss
+                    | LFloat => Styles.codeNumberCss
+                    | LInt => Styles.codeNumberCss
+                    | LKeyword => Styles.codeKeywordCss
+                    | LNamespace => Styles.codeTypeCss
+                    | LString => Styles.codeStringCss
+                    | LUpper => Styles.codeTypeCss
+                    | LWildcard => Styles.codeVariableCss
+                    | LLower {tokens.get(index - 1).any {t => 
+                        t.kind == LBracketRight || t.kind == LDot
+                    }} => Styles.codeCallCss
+                    | LLower {tokens.grab(index + 1).kind == LBracketLeft} => Styles.codeCallCss
+                    | LLower => Styles.codeVariableCss
+                    | _ => Styles.codeOtherCss
+                }
+                lux.span {
+                    lux.cssClass(css)
+                    lux.text(code.slice(token.startOffset, token.stopOffset))
+                }
+                offset = token.stopOffset
+            }
+            index += 1
+        }
+    }.else {lux.text(code)}
+}
+
+kebabCase(text: String): String {
+    mutable result = text.trim().lower().filter {c => c.isAsciiLetterOrDigit() || c == ' '}
+    doWhile {
+        let before = result
+        result = result.replace("  ", "")
+        result != before
+    }
+    result.replace(" ", "-")
+}