firefly-compiler 0.4.78 → 0.4.80

package/fireflysite/Styles.ff

@@ -1,19 +1,19 @@
 import Css from ff:lux
 
-mobileMediaQuery = "@media only screen and (max-width: 600px)"
-desktopMediaQuery = "@media only screen and (min-width: 1500px)"
+mobileMediaQuery: String = "@media only screen and (max-width: 840px)"
+mobileOrTabletMediaQuery: String = "@media only screen and (max-width: 1140px)"
 
 pageCss: CssClass = CssClass(
     [
         Css.display("flex")
         Css.flexDirection("column")
         Css.minHeight("100vh")
-        Css.fontFamily("'Helvetica Neue', Helvetica, Arial, sans-serif")
+        Css.fontFamily("'Firefly Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif")
         Css.textRendering("optimizeLegibility")
     ]
     [
         CssNest("*:focus-visible", [
-            Css.outline("2px solid #4fc1ff")
+            Css.outline("2px solid #ecc45e")
             Css.outlineOffset("2px")
         ], [])
     ]
@@ -22,12 +22,13 @@ pageCss: CssClass = CssClass(
 
 whiteLinkCss: CssClass = CssClass(
     [
-        Css.color("#dadada")
+        Css.color("#000000")
         Css.textDecoration("none")
+        Css.fontWeight("600")
     ]
     [
         CssNest("&:hover", [Css.textDecoration("underline")], [])
-        CssNest("&[aria-current='page']", [Css.color("#4ec9b0")], [])
+        CssNest("&[aria-current='page']", [Css.color("#000000")], [])
     ]
     []
 )
@@ -43,80 +44,173 @@ greenLinkCss: CssClass = CssClass(
     []
 )
 
-topbarCss: CssClass = CssClass(
+searchInputCss: CssClass = CssClass(
     [
-        Css.display("flex")
-        Css.gap("30px")
-        Css.paddingLeft("20px")
-        Css.paddingRight("30px")
-        Css.lineHeight("49px")
-        Css.fontSize("17px")
-        Css.backgroundColor("#34373d")
-        Css.borderBottom("1px solid #2b2d30")
+        Css.appearance("none")
         Css.boxSizing("border-box")
+        Css.marginLeft("20px")
+        Css.marginRight("25px")
+        Css.width("calc(100% - 20px - 25px)")
+        Css.display("flex")
+        Css.border("none")
+        Css.borderBottom("2px solid #000000")
+        Css.backgroundColor("#ffffff50")
+        Css.color("#000000")
+        Css.height("34px")
+        Css.fontSize("16px")
+        Css.borderRadius("0")
+        Css.paddingLeft("5px")
+        Css.paddingRight("5px")
+        Css.paddingTop("0")
+        Css.paddingBottom("0")
+        Css.marginBottom("20px")
     ]
     [
-        CssNest(mobileMediaQuery, [
-            Css.paddingLeft("20px")
-            Css.paddingRight("20px")
-            Css.gap("10px")
-            Css.fontSize("15px")
-            Css.overflowX("auto")
-            Css.justifyContent("space-between")
+        CssNest("&::placeholder", [
+            Css.color("#000000")
+            Css.opacity("unset")
+            Css.fontSize("16px")
+        ], [])
+        CssNest("&:focus::placeholder", [
+            Css.opacity("0")
         ], [])
     ]
     []
 )
 
-topbarFireflyCss: CssClass = CssClass(
+guideCss: CssClass = CssClass(
     [
-        Css.marginRight("auto")
-        Css.fontSize("19px")
+        Css.display("flex")
+        Css.minHeight("100vh")
     ]
-    [
-        CssNest(mobileMediaQuery, [
-            Css.fontSize("15px")
+    []
+    []
+)
+
+guideTopbarCss: CssClass = CssClass(
+    [
+        Css.display("none")
+        Css.justifyContent("space-between")
+        Css.alignItems("center")
+        Css.backgroundColor("#ecc45e")
+        Css.color("#000000")
+        Css.position("fixed")
+        Css.top("0")
+        Css.left("0")
+        Css.right("0")
+        Css.height("76px")
+    ]
+    [
+        CssNest(mobileOrTabletMediaQuery, [
+            Css.display("flex")
         ], [])
     ]
     []
 )
 
-searchInputCss: CssClass = CssClass(
+guideTopbarLogoCss: CssClass = CssClass(
+    [
+        Css.display("flex")
+        Css.gap("20px")
+        Css.alignItems("center")
+        Css.justifyContent("center")
+        Css.fontSize("25px")
+        Css.letterSpacing("5px")
+        Css.textTransform("uppercase")
+        Css.color("inherit")
+        Css.textDecoration("none")
+        Css.height("70px")
+        Css.paddingLeft("20px")
+    ]
     [
+        CssNest("&>img", [Css.width("70px")], [])
+    ]
+    []
+)
+
+guideTopbarButtonCss: CssClass = CssClass(
+    [
+        Css.display("none")
         Css.appearance("none")
+        Css.border("none")
+        Css.outline("none")
+        Css.background("""url('data:image/svg+xml,<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_788_122)"><rect x="4" y="9" width="25" height="2" rx="1" fill="%23000000"/><rect x="4" y="17" width="25" height="2" rx="1" fill="%23000000"/><rect x="4" y="25" width="25" height="2" rx="1" fill="%23000000"/></g><defs><clipPath id="clip0_788_122"><rect width="50" height="50" fill="white"/></clipPath></defs></svg>') no-repeat center""")
+        Css.backgroundSize("60px 60px")
+        Css.backgroundPosition("20px 16px")
+        Css.fontSize("20px")
+        Css.cursor("pointer")
+        Css.webkitTapHighlightColor("transparent")
+        Css.padding("0")
+        Css.margin("0")
+        Css.height("76px")
+        Css.width("76px")
+        Css.marginLeft("auto")
+    ]
+    [
+        CssNest(mobileOrTabletMediaQuery, [
+            Css.display("block")
+        ], [])
+    ]
+    []
+)
+
+guideSidebarButtonCss: CssClass = CssClass(
+    [
+        Css.position("fixed")
+        Css.bottom("-68px")
+        Css.right("-65px")
+        Css.width("70px")
+        Css.height("70px")
+        Css.padding("0")
         Css.boxSizing("border-box")
-        Css.marginLeft("15px")
-        Css.marginRight("25px")
-        Css.width("calc(100% - 15px - 25px)")
-        Css.display("flex")
+        Css.background("""url('data:image/svg+xml,<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_788_122)"><rect x="4" y="9" width="30" height="3" rx="1" fill="%23ecc45e"/><rect x="4" y="17" width="21" height="3" rx="1" fill="%23ecc45e"/><rect x="4" y="25" width="13" height="3" rx="1" fill="%23ecc45e"/></g><defs><clipPath id="clip0_788_122"><rect width="50" height="50" fill="white"/></clipPath></defs></svg>') no-repeat center""")
+        Css.backgroundSize("70px 70px")
+        Css.appearance("none")
         Css.border("none")
-        Css.backgroundColor("#34373d")
-        Css.color("#dadada")
-        Css.height("34px")
-        Css.fontSize("15px")
-        Css.borderRadius("17px")
-        Css.paddingLeft("15px")
-        Css.paddingRight("15px")
-        Css.paddingTop("0")
-        Css.paddingBottom("0")
-        Css.marginBottom("20px")
+        Css.outline("none")
+        Css.transformOrigin("top left")
+        Css.transform("rotate(180deg) scale(0, 0)")
+        Css.transition("100ms transform")
     ]
     [
-        CssNest("&::placeholder", [
-            Css.color("#dadada")
-            Css.opacity("0.7")
+        CssNest(mobileOrTabletMediaQuery, [
+            Css.display("block")
+            Css.transform("rotate(180deg) scale(1, 1)")
+        ], [])        
+    ]
+    []
+)
+
+guideSidebarButtonOpenCss: CssClass = CssClass(
+    []
+    [
+        CssNest(mobileOrTabletMediaQuery, [
+            Css.transform("rotate(180deg) scale(0, 1)")
         ], [])
     ]
     []
 )
 
-guideCss: CssClass = CssClass(
+guideSidebarBackdropCss: CssClass = CssClass(
     [
-        Css.display("flex")
+        Css.display("none")
+        Css.position("fixed")
+        Css.top("0")
+        Css.bottom("0px")
+        Css.left("0")
+        Css.right("0px")
+        Css.backgroundColor("rgba(20, 20, 0, 0.6)")
+        Css.touchAction("none")
     ]
+    []
+    []
+)
+
+guideSidebarBackdropOpenCss: CssClass = CssClass(
+    []
     [
-        CssNest(mobileMediaQuery, [
-            Css.flexDirection("column")
+        CssNest(mobileOrTabletMediaQuery, [
+            Css.display("block")
         ], [])
     ]
     []
@@ -124,79 +218,150 @@ guideCss: CssClass = CssClass(
 
 guideSidebarCss: CssClass = CssClass(
     [
+        Css.position("fixed")
+        Css.top("0")
+        Css.bottom("0")
+        Css.left("0")
         Css.width("300px")
-        Css.minHeight("calc(100vh - 50px)")
-        Css.paddingTop("20px")
-        Css.backgroundColor("#2b2d30")
         Css.boxSizing("border-box")
+        Css.paddingTop("10px")
+        Css.backgroundColor("#ecc45e")
+        Css.overflowY("auto")
+        Css.transition("200ms transform")
+        Css.scrollbarWidth("thin")
+        Css.scrollbarColor("#333333 #ecc45e")
     ]
     [
-        CssNest(mobileMediaQuery, [
+        CssNest(mobileOrTabletMediaQuery, [
             Css.order("2")
-            Css.width("100%")
+            Css.width("calc(100% - 50px)")
+            Css.maxWidth("300px")
+            Css.minHeight("auto")
             Css.height("auto")
             Css.paddingTop("20px")
             Css.paddingBottom("20px")
+            Css.transform("translateX(-110%)")
+            Css.outline("1px solid rgba(0, 0, 0, 0.15)")
+        ], [])
+        CssNest("& *:focus-visible", [
+            Css.outline("2px solid #000000")
+            Css.outlineOffset("2px")
+        ], [])
+    ]
+    []
+)
+
+guideSidebarOpenCss: CssClass = CssClass(
+    []
+    [
+        CssNest(mobileOrTabletMediaQuery, [
+            Css.transform("translateX(0)")
         ], [])
     ]
     []
 )
 
-guideSidebarUlCss: CssClass = CssClass(
+guideSidebarLogoCss: CssClass = CssClass(
+    [
+        Css.display("flex")
+        Css.gap("20px")
+        Css.alignItems("center")
+        Css.justifyContent("center")
+        Css.fontSize("30px")
+        Css.letterSpacing("5px")
+        Css.textTransform("uppercase")
+        Css.color("inherit")
+        Css.textDecoration("none")
+        Css.height("100px")
+    ]
+    [
+        CssNest("&>img", [Css.width("100px")], [])
+        CssNest("&>div", [Css.width("145px")], [])
+        CssNest(mobileOrTabletMediaQuery, [
+            Css.display("none")
+        ], [])
+    ]
+    []
+)
+
+guideSidebarUl1Css: CssClass = CssClass(
     [
         Css.display("flex")
         Css.flexDirection("column")
-        Css.gap("25px")
+        Css.gap("35px")
         Css.listStyle("none")
         Css.margin("0px")
         Css.padding("20px")
+        Css.opacity("0.85")
+        Css.transition("100ms opacity")
+    ]
+    [
+        CssNest(mobileOrTabletMediaQuery, [
+            Css.opacity("1.00")
+        ], [])
+        CssNest("&:hover", [
+            Css.opacity("1.00")
+        ], [])
     ]
-    []
     []
 )
 
-guideSidebarLiCss: CssClass = CssClass(
+guideSidebarLi1Css: CssClass = CssClass(
     [
         Css.listStyle("none")
+        Css.fontSize("17px")
     ]
     []
     []
 )
 
-guideMainCss: CssClass = CssClass(
+guideSidebarUl2Css: CssClass = CssClass(
     [
-        Css.flex("1")
         Css.display("flex")
-        Css.justifyContent("center")
-        Css.padding("20px")
-        Css.paddingTop("70px")
-        Css.position("relative")
-        Css.boxSizing("content-box")
+        Css.flexDirection("column")
+        Css.gap("15px")
+        Css.listStyle("none")
+        Css.margin("0px")
+        Css.paddingLeft("15px")
+        Css.paddingTop("20px")
+        Css.paddingRight("0")
+        Css.paddingBottom("5px")
+        Css.fontSize("17px")
     ]
+    []
+    []
+)
+
+guideSidebarLi2Css: CssClass = CssClass(
     [
-        CssNest(mobileMediaQuery, [
-            Css.paddingTop("30px")
-        ], [])
-        CssNest(desktopMediaQuery, [
-            Css.paddingRight("200px")
-        ], [])
+        Css.listStyle("none")
     ]
     []
+    []
 )
 
-guideSoleDocumentCss: CssClass = CssClass(
+guideMainCss: CssClass = CssClass(
     [
         Css.flex("1")
         Css.display("flex")
         Css.justifyContent("center")
-        Css.padding("20px")
-        Css.paddingTop("70px")
+        Css.marginLeft("300px")
+        Css.paddingLeft("20px")
+        Css.paddingRight("calc(max(20px, 25vw - 300px))")
+        Css.paddingTop("80px")
+        Css.paddingBottom("80px")
         Css.position("relative")
         Css.boxSizing("content-box")
+        Css.color("#333333")
+        Css.fontWeight("500")
     ]
     [
-        CssNest(mobileMediaQuery, [
-            Css.paddingTop("30px")
+        CssNest(mobileOrTabletMediaQuery, [
+            Css.marginLeft("0")
+            Css.paddingLeft("20px")
+            Css.paddingRight("20px")
+            Css.paddingTop("120px")
+            Css.paddingBottom("70px")
         ], [])
     ]
     []
@@ -209,10 +374,64 @@ guideDocumentCss: CssClass = CssClass(
         Css.fontSize("17px")
         Css.lineHeight("1.7")
     ]
+    []
+    []
+)
+
+guideSplitCss: CssClass = CssClass(
+    [
+        Css.display("flex")
+        Css.gap("30px")
+        Css.justifyContent("space-between")
+        Css.alignItems("stretch")
+        Css.marginTop("170px")
+        Css.marginBottom("170px")
+    ]
     [
+        CssNest("&>div:first-child", [
+            Css.width("calc(345px - 15px)")
+            Css.paddingTop("10px")
+            Css.paddingBottom("15px")
+        ], [])
+        CssNest("&>div:last-child", [
+            Css.width("calc(455px - 15px)")
+        ], [])
+        CssNest("&>div>:first-child", [
+            Css.marginTop("0")
+        ], [])
+        CssNest("&>div>:last-child", [
+            Css.marginBottom("0")
+        ], [])
+        CssNest("&>div>pre", [
+            Css.overflowX("hidden")
+            Css.minHeight("100%")
+        ], [])
         CssNest(mobileMediaQuery, [
-            Css.fontSize("16px")
-            Css.lineHeight("1.6")
+            Css.flexDirection("column")
+        ], [
+            CssNest("&>div:first-child", [
+                Css.width("auto")
+            ], [])
+            CssNest("&>div:last-child", [
+                Css.width("auto")
+            ], [])
+            CssNest("&>div>pre", [
+                Css.overflowX("auto")
+            ], [])
+        ])
+    ]
+    []
+)
+
+guideSplitHeadingCss: CssClass = CssClass(
+    [
+        Css.fontSize("23px")
+        Css.fontWeight("600")
+        Css.margin("0")
+    ]
+    [
+        CssNest(mobileMediaQuery, [
+            Css.fontSize("21px")
         ], [])
     ]
     []
@@ -221,11 +440,12 @@ guideDocumentCss: CssClass = CssClass(
 guideH1Css: CssClass = CssClass(
     [
         Css.fontSize("32px")
+        Css.fontWeight("600")
         Css.marginTop("0px")
     ]
     [
         CssNest(mobileMediaQuery, [
-            Css.fontSize("30px")
+            Css.fontSize("26px")
         ], [])
     ]
     []
@@ -234,11 +454,12 @@ guideH1Css: CssClass = CssClass(
 guideH2Css: CssClass = CssClass(
     [
         Css.fontSize("28px")
-        Css.marginTop("40px")
+        Css.fontWeight("600")
+        Css.marginTop("70px")
     ]
     [
         CssNest(mobileMediaQuery, [
-            Css.fontSize("25px")
+            Css.fontSize("23px")
         ], [])
     ]
     []
@@ -246,14 +467,21 @@ guideH2Css: CssClass = CssClass(
 
 guideCodeCss: CssClass = CssClass(
     [
-        Css.fontFamily("Consolas, 'Liberation Mono', Menlo, Courier, monospace")
-        Css.fontSize("17px")
-        Css.lineHeight("1.4")
-        Css.color("#4ec9b0")
+        Css.fontFamily("'Firefly Mono', monospace")
+        Css.fontSize("15px")
+        Css.lineHeight("1.3")
+        Css.color("#000000")
+        Css.whiteSpace("pre-wrap")
+        Css.wordBreak("break-all")
     ]
     [
         CssNest(mobileMediaQuery, [
-            Css.fontSize("16px")
+            Css.fontSize("14px")
+            Css.lineHeight("1.4")
+        ], [])
+        CssNest("pre>&", [
+            Css.color("#4ec9b0")
+            Css.whiteSpace("pre")
         ], [])
     ]
     []
@@ -261,11 +489,10 @@ guideCodeCss: CssClass = CssClass(
 
 guideCodeBlockCss: CssClass = CssClass(
     [
-        Css.lineHeight("1.4")
-        Css.backgroundColor("#2b2d30")
-        Css.padding("12px 18px")
-        Css.paddingBottom("14px")
-        Css.border("1px solid #232323")
+        Css.lineHeight("1.3")
+        Css.background("#1f1f1f")
+        Css.padding("20px 25px")
+        Css.margin("30px 0")
         Css.borderRadius("5px")
         Css.boxSizing("border-box")
         Css.overflowX("auto")
@@ -273,13 +500,14 @@ guideCodeBlockCss: CssClass = CssClass(
     ]
     [
         CssNest(mobileMediaQuery, [
-            Css.maxWidth("calc(100% + 40px)")
+            Css.maxWidth("calc(100vw)")
             Css.marginLeft("-20px")
             Css.marginRight("-20px")
             Css.borderRadius("0")
             Css.borderLeft("none")
             Css.borderRight("none")
-            Css.padding("12px 20px")
+            Css.padding("20px 20px")
+            Css.lineHeight("1.4")
         ], [])
     ]
     []
@@ -287,16 +515,49 @@ guideCodeBlockCss: CssClass = CssClass(
 
 guideLinkCss: CssClass = CssClass(
     [
-        Css.color("#4fc1ff")
+        Css.color("#000000")
+        Css.textDecoration("2px #ecc45e underline")
+        Css.fontWeight("600")
+    ]
+    [
+        CssNest("&:hover", [
+            Css.textDecoration("2px #ecc45e underline")
+        ], [])
+    ]
+    []
+)
+
+guideNextButtonCss: CssClass = CssClass(
+    [
+        Css.marginTop("100px")
+    ]
+    []
+    []
+)
+
+guideButtonCss: CssClass = CssClass(
+    [
+        Css.padding("15px 30px")
+        Css.borderRadius("5px")
+        Css.background("#ecc45e")
+        Css.color("#000000")
+        Css.border("2px solid black")
         Css.textDecoration("none")
+        Css.fontSize("17px")
+        Css.fontWeight("600")
     ]
     [
-        CssNest("&:hover", [Css.textDecoration("underline")], [])
+        CssNest(mobileMediaQuery, [
+            Css.fontSize("15px")
+        ], [])
+        CssNest("&::after", [
+            Css.content("' →'")
+        ], [])
     ]
     []
 )
 
-codeCommentCss: CssClass = CssClass([Css.color("#6a9955")], [], [])
+codeCommentCss: CssClass = CssClass([Css.color("#757c8a")], [], [])
 codeStringCss: CssClass = CssClass([Css.color("#ce9178")], [], [])
 codeNumberCss: CssClass = CssClass([Css.color("#b5cea8")], [], [])
 codeKeywordCss: CssClass = CssClass([Css.color("#569cd6")], [], [])

package/fireflysite/Test.ff

@@ -0,0 +1,38 @@
+import WebServer from ff:webserver // This is required to run the file.
+
+nodeMain(system: NodeSystem) {
+    let f = {x, y => Pair(x, y)}
+    let g = {Pair(_, _)}
+    Log.show(f(1, 2))
+    Log.show(g(1, 2))
+    Log.show(factorial(5))
+    Log.show(factorialTail(5))
+    Log.show([1, 2].map({x => x + x}))
+    
+    let x = {a, b => Pair(a, b)}(1, 2)
+    let f0: () => Unit = {42}
+    let p = {Pair(1, _)}
+    let p2 = {Pair(_, _)}
+
+    let increment: Int => Int = {i => i + 1}
+    let plus: (Int, Int) => Int = {a, b => a + b}
+        
+    Log.show([1, 2].map(increment))
+    
+}
+
+factorial(n: Int): Int {
+    if(n == 0) {
+        1
+    } else {
+        n * factorial(n - 1)
+    }
+}
+
+factorialTail(n: Int, acc: Int = 1): Int {
+    if(n == 0) {
+        acc
+    } else {
+        tailcall factorialTail(n - 1, n * acc)
+    }
+}