firefly-compiler 0.4.78 → 0.4.79

package/fireflysite/Guide.ff

@@ -1,308 +1,411 @@
-import Lux from ff:lux
-import Css from ff:lux
-import Tokenizer from ff:compiler
-import Token from ff:compiler
-import Styles
-
-data Guide(
-    documents: List[Document]
-)
-
-data Document(
-    sections: List[Section]
-)
-
-data Section(
-    heading: String
-    blocks: List[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)
-}
-
-capability Demo(
-    name: String
-    render: Lux => Unit
-)
-
-render(lux: Lux, prefix: String, kebab: String, guide: Guide, demos: List[Demo]) {
-    let document = guide.documents.find {
-        _.sections.first().any {kebabCase(_.heading) == kebab}
-    }.else {guide.documents.grabFirst()}
-    lux.add("div") {
-        lux.cssClass(Styles.pageCss)
-        renderTopbar(lux, prefix)
-        lux.add("div") {
-            lux.cssClass(Styles.guideCss)
-            renderSidebar(lux, prefix, guide, document.sections.first().map {_.heading}.else {""})
-            lux.add("main") {
-                lux.cssClass(Styles.guideMainCss)
-                renderDocument(lux, document, demos)
-            }
-        }
-    }
-}
-
-renderSoleDocument(lux: Lux, prefix: String, document: Document, demos: List[Demo]) {
-    lux.add("div") {
-        lux.cssClass(Styles.pageCss)
-        renderTopbar(lux, prefix)
-        lux.add("main") {
-            lux.cssClass(Styles.guideSoleDocumentCss)
-            renderDocument(lux, document, demos)
-        }
-    }
-}
-
-renderTopbar(lux: Lux, prefix: String) {
-    lux.add("header") {
-        lux.add("nav") {
-            lux.cssClass(Styles.topbarCss)
-            lux.add("a") {
-                lux.cssClass(Styles.whiteLinkCss)
-                lux.cssClass(Styles.topbarFireflyCss)
-                if(prefix == "/") {lux.set("aria-current", "page")}
-                lux.set("href", "/")
-                lux.text("Firefly")
-            }
-            lux.add("a") {
-                lux.cssClass(Styles.whiteLinkCss)
-                if(prefix == "/guide/") {lux.set("aria-current", "page")}
-                lux.set("href", "/guide/")
-                lux.text("Guide")
-            }
-            lux.add("a") {
-                lux.cssClass(Styles.whiteLinkCss)
-                if(prefix == "/examples/") {lux.set("aria-current", "page")}
-                lux.set("href", "/examples/")
-                lux.text("Examples")
-            }
-            lux.add("a") {
-                lux.cssClass(Styles.whiteLinkCss)
-                if(prefix == "/packages/") {lux.set("aria-current", "page")}
-                lux.set("href", "/packages/")
-                lux.text("Packages")
-            }
-            lux.add("a") {
-                lux.cssClass(Styles.whiteLinkCss)
-                if(prefix == "/community/") {lux.set("aria-current", "page")}
-                lux.set("href", "/community/")
-                lux.text("Community")
-            }
-        }
-    }
-}
-
-renderSidebar(lux: Lux, prefix: String, guide: Guide, selectedHeading: String) {
-    lux.add("nav") {
-        lux.cssClass(Styles.guideSidebarCss)
-        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.guideSidebarUlCss)
-            mutable first = True
-            guide.documents.each {document =>
-                lux.add("li") {
-                    lux.cssClass(Styles.guideSidebarLiCss)
-                    lux.add("a") {
-                        let heading = document.sections.grabFirst().heading
-                        lux.cssClass(Styles.whiteLinkCss)
-                        if(heading == selectedHeading) {lux.set("aria-current", "page")}
-                        lux.set("href", if(first) {prefix} else {prefix + kebabCase(heading)})
-                        lux.text(heading)
-                    }
-                }
-                first = False
-            }
-        }
-    }
-}
-
-renderDocument(lux: Lux, document: Document, demos: List[Demo]) {
-    lux.add("article") {
-        lux.cssClass(Styles.guideDocumentCss)
-        document.sections.pairs().each {| Pair(index, section) => 
-            renderSection(lux, index == 0, section, demos)
-        }
-    }
-}
-
-renderSection(lux: Lux, first: Bool, section: Section, demos: List[Demo]) {
-    lux.add(if(first) {"h1"} else {"h2"}) {
-        lux.cssClass(if(first) {Styles.guideH1Css} else {Styles.guideH2Css})
-        lux.text(section.heading)
-    }
-    section.blocks.each {renderBlock(lux, _, 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%"))
-    }
-}
-
-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) {
-    let tokens = Tokenizer.tokenize("<example>", code, None, False)
-    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
-    }
-}
-
-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, 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(" ", "-")
+}