Must add visible kids

blog/src/components/PSLayout.purs

@@ -1,11 +1,13 @@
 module PSLayout where
 
 import Prelude
+
 import Data.Array as A
 import Data.Array as Array
 import Data.Array.NonEmpty as NEA
-import Data.Maybe (Maybe(..), fromMaybe)
-import Data.Nullable (Nullable)
+import Data.Function.Uncurried (mkFn2)
+import Data.Maybe (Maybe(..), fromMaybe, isJust)
+import Data.Nullable (Nullable, toMaybe)
 import Data.Nullable as Nullable
 import Data.String as String
 import Data.Tuple.Nested ((/\))
@@ -14,7 +16,7 @@ import Effect (Effect)
 import JSS (jss, jssClasses)
 import Justifill (justifill)
 import Milkis.Impl (FetchImpl)
-import React.Basic (JSX, ReactComponent)
+import React.Basic (JSX, ReactComponent, fragment)
 import React.Basic.DOM (unsafeCreateDOMComponent)
 import React.Basic.DOM as R
 import React.Basic.Helpers (jsx)
@@ -24,8 +26,9 @@ import Unsafe.Coerce (unsafeCoerce)
 import Yoga.Box.Component as Box
 import Yoga.CompileEditor.Component (mkCompileEditor)
 import Yoga.Compiler.Api (apiCompiler)
+import Yoga.Compiler.Types (Compiler)
 import Yoga.FillInTheGaps.Component as FillInTheGaps
-import Yoga.FillInTheGaps.Logic (parseSegments)
+import Yoga.FillInTheGaps.Logic (complete, parseSegments)
 import Yoga.Header.Component (mkHeader)
 import Yoga.Helpers ((?||))
 import Yoga.InlineCode.Component as InlineCode
@@ -70,7 +73,7 @@ mkLayout ∷
     )
 mkLayout fetchImpl = do
   themeProvider <- mkThemeProvider
-  mdxProviderComponent <- mkMdxProviderComponent fetchImpl
+  mdxProviderComponent <- mkMdxProviderComponent (apiCompiler fetchImpl)
   componentWithChildren "MDXLayout" \{ children, siteInfo } -> React.do
     pure
       $ element themeProvider
@@ -96,16 +99,17 @@ mkSecret = do
           }
 
 mkMdxProviderComponent ∷
-  FetchImpl ->
+  ∀ r.
+  { | Compiler r } ->
   Effect
     ( ReactComponent
         { children ∷ ReactChildren JSX
         , siteInfo ∷ SiteQueryResult
         }
     )
-mkMdxProviderComponent fetchImpl = do
+mkMdxProviderComponent compiler = do
   cssBaseline <- mkCssBaseline
-  editor <- mkCompileEditor fetchImpl
+  editor <- mkCompileEditor compiler
   fillInTheGaps <- FillInTheGaps.makeComponent
   box <- Box.makeComponent
   sidebar <- mkSidebar
@@ -132,18 +136,14 @@ mkMdxProviderComponent fetchImpl = do
           }
   componentWithChildren "MDXProviderComponent" \{ children, siteInfo } -> React.do
     classes <- useStyles {}
-    visibleThroughKey /\ updateVisible <- useState ""
+    visibleThrough /\ updateVisible <- useState 1
     let
       baseline child = element cssBaseline { kids: child }
 
       kids = reactChildrenToArray children
 
       visibleKids =
-        spy "visibleKids"
-          $ fromMaybe kids do
-              i <- kids # A.findIndex (\x -> (unsafeCoerce x).key == visibleThroughKey)
-              pure $ A.take (i + 1) kids
-
+        TODO
       siteInfoJSX =
         R.div
           { children:
@@ -163,13 +163,12 @@ mkMdxProviderComponent fetchImpl = do
         , h3:
           \props ->
             element h { level: H4, text: props.children, className: Nothing }
+        , hr: (const $ R.hr {})
         , p:
           \props ->
             R.div
               { children: [ element p { text: props.children } ]
               }
-        -- , thematicBreak:
-        --   \props -> jsx secret { register: updateSections (Map.insert )  }
         , inlineCode:
           \props -> do
             R.span { className: classes.code, children: props.children }
@@ -200,23 +199,35 @@ mkMdxProviderComponent fetchImpl = do
                     )
 
               language = fromMaybe "" (classNameQ >>= String.stripPrefix (String.Pattern "language-"))
-            case isCode, language of
-              true, "puregaps" ->
-                element fillInTheGaps
-                  { initialSegments: parseSegments (codeQ ?|| "")
-                  , update: \segs -> pure unit
-                  }
-              true, _ ->
+
+              segmentsQ = parseSegments (codeQ ?|| "")
+            case isCode, language, segmentsQ of
+              true, "purescript", Just initialSegments ->
+                jsx box {}
+                  [ element fillInTheGaps
+                      { initialSegments
+                      , update:
+                        \segs ->
+                          when (complete segs)
+                            $ updateVisible
+                                (\_ -> spy "setting key to" (unsafeCoerce props).key)
+                      }
+                  ]
+              true, _, _ ->
                 element editor
                   { initialCode: fromMaybe "" codeQ
                   , height
                   , language
                   }
-              false, _ -> element (unsafeCreateDOMComponent "pre") props
+              false, _, _ -> element (unsafeCreateDOMComponent "pre") props
         }
     useEffect (A.length kids) do
       let
-        firstGaps = kids # A.find (\x -> (unsafeCoerce x).props.mdxType == "pre" && ((unsafeCoerce x).props.children.props.className == "language-puregaps")) <#> (\x -> (unsafeCoerce x).key)
+        firstGaps = kids # A.find (\x -> (unsafeCoerce x).props.mdxType == "pre" && 
+          ((unsafeCoerce x).props.children.props.className == "language-purescript") &&
+          ((unsafeCoerce x).props.children.props.mdxType == "code") &&
+          ((unsafeCoerce x).props.children.props.children # parseSegments # isJust)
+          ) <#> (\x -> spy "first boy" $ (unsafeCoerce x).key)
 
         lastKey = kids # A.last # unsafeCoerce # _.key
       updateVisible (const (firstGaps ?|| lastKey))

blog/src/pages/optional.mdx

@@ -5,7 +5,7 @@ import SEO from '../components/seo'
 
 # Optional
 
-```puregaps
+```purescript
 --result Hello World
 module Main where
 import Grimoire
@@ -19,7 +19,7 @@ incantation = cast $
 
 ---
 
-```puregaps
+```purescript
 --result Hello World
 module Main where
 import Grimoire
@@ -31,4 +31,10 @@ incantation = cast $
 --end here
 ```
 
-## Hans Hölzel
+--- 
+
+## Hans Hölzel
+
+---
+
+Guter Mann

components/src/Yoga/FillInTheGaps/Logic.purs

@@ -3,32 +3,18 @@ module Yoga.FillInTheGaps.Logic where
 import Prelude
 import Data.Array (intercalate)
 import Data.Array as A
-import Data.Either (Either(..))
 import Data.Foldable (foldl)
 import Data.Lens ((%~))
 import Data.Lens.Index (ix)
-import Data.Maybe (Maybe(..), fromMaybe')
+import Data.Maybe (Maybe(..))
 import Data.String (Pattern(..), split)
 import Data.String as S
 import Data.String.Regex (Regex)
 import Data.String.Regex as Regex
 import Data.String.Regex.Flags as RegexFlags
 import Data.String.Regex.Unsafe (unsafeRegex)
-import Data.Tuple.Nested ((/\))
-import Debug.Trace (spy)
-import Effect (Effect)
-import Justifill (justifill)
 import Partial.Unsafe (unsafeCrashWith)
-import React.Basic (JSX, ReactComponent, element)
-import React.Basic.DOM as R
-import React.Basic.Hooks (component, useState)
-import React.Basic.Hooks as React
-import React.Basic.SyntaxHighlighter.Component (HighlighterTheme, syntaxHighlighterImpl)
-import Shared.Models.Body (CompileResult, RunResult)
 import Yoga.Helpers ((?||))
-import Yoga.InlineCode.Component as InlineCode
-import Yoga.Theme.Styles (useTheme)
-import Yoga.Theme.Syntax (mkHighlighterTheme)
 
 complete ∷ Array (Array Segment) -> Boolean
 complete arr = foldl f true (join arr)
@@ -52,8 +38,8 @@ getResult = case _ of
   ExpectedResult r -> Just r
   _ -> Nothing
 
-findResult ∷ Array Segment -> String
-findResult = fromMaybe' (\_ -> unsafeCrashWith "Even teachers make mistakes") <<< A.findMap getResult
+findResult ∷ Array Segment -> Maybe String
+findResult = A.findMap getResult
 
 toCode ∷ Array (Array Segment) -> String
 toCode lines = intercalate "\n" mapped
@@ -112,7 +98,9 @@ smooshFillers = foldl smooshOuter []
     [ Filler f ], Just { init, last: [ Filler prev ] } -> A.snoc init [ Filler (prev <> "\n" <> f) ]
     _, _ -> A.snoc acc segs
 
-parseSegments code = segments
+parseSegments ∷ String -> Maybe (Array (Array Segment))
+parseSegments code = result $> segments
   where
   lines = split (Pattern "\n") code
   segments = smooshFillers (lines <#> \line -> rawSegments line <#> toSegment)
+  result = findResult (join segments)

components/src/Yoga/FillInTheGaps/Stories.purs

@@ -7,13 +7,14 @@ import Storybook.Decorator.FullScreen (fullScreenDecorator)
 import Storybook.React (Storybook, add, addDecorator, storiesOf)
 import Yoga.FillInTheGaps.Component as FillInTheGaps
 import Yoga.FillInTheGaps.Logic (parseSegments)
+import Yoga.Helpers ((?||))
 
 stories ∷ Effect Storybook
 stories = do
   storiesOf "FillInTheGaps" do
     addDecorator fullScreenDecorator
     add "The FillInTheGaps" (FillInTheGaps.makeComponent)
-      [ { initialSegments: parseSegments codeWithHoles, update: pure (pure unit) }
+      [ { initialSegments: parseSegments codeWithHoles ?|| [], update: pure (pure unit) }
       ]
 
 codeWithHoles =