e68af4f · rowtype-yoga/psfp

git.iko.soy/rowtype-yoga/psfp

on master help sign in

Must add visible kids

e68af4fMark Eibes6 years ago

blog/src/components/PSLayout.purs+36−25

compare with master

unifiedsplit

@@ -1,11 +1,13 @@

1module PSLayout where

3import Prelude

4import Data.Array as A

5import Data.Array as A

5import Data.Array as Array

6import Data.Array as Array

6import Data.Array.NonEmpty as NEA

7import Data.Array.NonEmpty as NEA

8+import Data.Function.Uncurried (mkFn2)

7−import Data.Maybe (Maybe(..), fromMaybe)

9+import Data.Maybe (Maybe(..), fromMaybe, isJust)

8−import Data.Nullable (Nullable)

10+import Data.Nullable (Nullable, toMaybe)

9import Data.Nullable as Nullable

11import Data.Nullable as Nullable

10import Data.String as String

12import Data.String as String

11import Data.Tuple.Nested ((/\))

13import Data.Tuple.Nested ((/\))

@@ -14,7 +16,7 @@ import Effect (Effect)

14import JSS (jss, jssClasses)

16import JSS (jss, jssClasses)

15import Justifill (justifill)

17import Justifill (justifill)

16import Milkis.Impl (FetchImpl)

18import Milkis.Impl (FetchImpl)

17−import React.Basic (JSX, ReactComponent)

19+import React.Basic (JSX, ReactComponent, fragment)

18import React.Basic.DOM (unsafeCreateDOMComponent)

20import React.Basic.DOM (unsafeCreateDOMComponent)

19import React.Basic.DOM as R

21import React.Basic.DOM as R

20import React.Basic.Helpers (jsx)

22import React.Basic.Helpers (jsx)

@@ -24,8 +26,9 @@ import Unsafe.Coerce (unsafeCoerce)

24import Yoga.Box.Component as Box

26import Yoga.Box.Component as Box

25import Yoga.CompileEditor.Component (mkCompileEditor)

27import Yoga.CompileEditor.Component (mkCompileEditor)

26import Yoga.Compiler.Api (apiCompiler)

28import Yoga.Compiler.Api (apiCompiler)

29+import Yoga.Compiler.Types (Compiler)

27import Yoga.FillInTheGaps.Component as FillInTheGaps

30import Yoga.FillInTheGaps.Component as FillInTheGaps

28−import Yoga.FillInTheGaps.Logic (parseSegments)

31+import Yoga.FillInTheGaps.Logic (complete, parseSegments)

29import Yoga.Header.Component (mkHeader)

32import Yoga.Header.Component (mkHeader)

30import Yoga.Helpers ((?||))

33import Yoga.Helpers ((?||))

31import Yoga.InlineCode.Component as InlineCode

34import Yoga.InlineCode.Component as InlineCode

@@ -70,7 +73,7 @@ mkLayout ∷

70 )

73 )

71mkLayout fetchImpl = do

74mkLayout fetchImpl = do

72 themeProvider <- mkThemeProvider

75 themeProvider <- mkThemeProvider

73− mdxProviderComponent <- mkMdxProviderComponent fetchImpl

76+ mdxProviderComponent <- mkMdxProviderComponent (apiCompiler fetchImpl)

74 componentWithChildren "MDXLayout" \{ children, siteInfo } -> React.do

77 componentWithChildren "MDXLayout" \{ children, siteInfo } -> React.do

75 pure

78 pure

76 $ element themeProvider

79 $ element themeProvider

@@ -96,16 +99,17 @@ mkSecret = do

96 }

99 }

100

98mkMdxProviderComponent ∷

101mkMdxProviderComponent ∷

99− FetchImpl ->

102+ ∀ r.

103+ { | Compiler r } ->

100 Effect

104 Effect

101 ( ReactComponent

105 ( ReactComponent

102 { children ∷ ReactChildren JSX

106 { children ∷ ReactChildren JSX

103 , siteInfo ∷ SiteQueryResult

107 , siteInfo ∷ SiteQueryResult

104 }

108 }

105 )

109 )

106−mkMdxProviderComponent fetchImpl = do

110+mkMdxProviderComponent compiler = do

107 cssBaseline <- mkCssBaseline

111 cssBaseline <- mkCssBaseline

108− editor <- mkCompileEditor fetchImpl

112+ editor <- mkCompileEditor compiler

109 fillInTheGaps <- FillInTheGaps.makeComponent

113 fillInTheGaps <- FillInTheGaps.makeComponent

110 box <- Box.makeComponent

114 box <- Box.makeComponent

111 sidebar <- mkSidebar

115 sidebar <- mkSidebar

@@ -132,18 +136,14 @@ mkMdxProviderComponent fetchImpl = do

132 }

136 }

133 componentWithChildren "MDXProviderComponent" \{ children, siteInfo } -> React.do

137 componentWithChildren "MDXProviderComponent" \{ children, siteInfo } -> React.do

134 classes <- useStyles {}

138 classes <- useStyles {}

135− visibleThroughKey /\ updateVisible <- useState ""

139+ visibleThrough /\ updateVisible <- useState 1

136 let

140 let

137 baseline child = element cssBaseline { kids: child }

141 baseline child = element cssBaseline { kids: child }

138

142

139 kids = reactChildrenToArray children

143 kids = reactChildrenToArray children

140

144

141 visibleKids =

145 visibleKids =

142− spy "visibleKids"

146+ TODO

143− $ fromMaybe kids do

144− i <- kids # A.findIndex (\x -> (unsafeCoerce x).key == visibleThroughKey)

145− pure $ A.take (i + 1) kids

146−

147 siteInfoJSX =

148 R.div

149 { children:

@@ -163,13 +163,12 @@ mkMdxProviderComponent fetchImpl = do

163 , h3:

164 \props ->

165 element h { level: H4, text: props.children, className: Nothing }

166+ , hr: (const $ R.hr {})

166 , p:

167 , p:

167 \props ->

168 \props ->

168 R.div

169 R.div

169 { children: [ element p { text: props.children } ]

170 { children: [ element p { text: props.children } ]

170 }

171 }

171− -- , thematicBreak:

172− -- \props -> jsx secret { register: updateSections (Map.insert ) }

173 , inlineCode:

172 , inlineCode:

174 \props -> do

173 \props -> do

175 R.span { className: classes.code, children: props.children }

174 R.span { className: classes.code, children: props.children }

@@ -200,23 +199,35 @@ mkMdxProviderComponent fetchImpl = do

200 )

199 )

201

200

202 language = fromMaybe "" (classNameQ >>= String.stripPrefix (String.Pattern "language-"))

201 language = fromMaybe "" (classNameQ >>= String.stripPrefix (String.Pattern "language-"))

202+

203+ segmentsQ = parseSegments (codeQ ?|| "")

203− case isCode, language of

204+ case isCode, language, segmentsQ of

204− true, "puregaps" ->

205+ true, "purescript", Just initialSegments ->

206+ jsx box {}

205− element fillInTheGaps

207+ [ element fillInTheGaps

206− { initialSegments: parseSegments (codeQ ?|| "")

208+ { initialSegments

207− , update: \segs -> pure unit

209+ , update:

210+ \segs ->

211+ when (complete segs)

212+ $ updateVisible

213+ (\_ -> spy "setting key to" (unsafeCoerce props).key)

208− }

214+ }

215+ ]

209− true, _ ->

216+ true, _, _ ->

210 element editor

217 element editor

211 { initialCode: fromMaybe "" codeQ

218 { initialCode: fromMaybe "" codeQ

212 , height

219 , height

213 , language

220 , language

214 }

221 }

215− false, _ -> element (unsafeCreateDOMComponent "pre") props

222+ false, _, _ -> element (unsafeCreateDOMComponent "pre") props

216 }

223 }

217 useEffect (A.length kids) do

224 useEffect (A.length kids) do

218 let

225 let

219− firstGaps = kids # A.find (\x -> (unsafeCoerce x).props.mdxType == "pre" && ((unsafeCoerce x).props.children.props.className == "language-puregaps")) <#> (\x -> (unsafeCoerce x).key)

226+ firstGaps = kids # A.find (\x -> (unsafeCoerce x).props.mdxType == "pre" &&

227+ ((unsafeCoerce x).props.children.props.className == "language-purescript") &&

228+ ((unsafeCoerce x).props.children.props.mdxType == "code") &&

229+ ((unsafeCoerce x).props.children.props.children # parseSegments # isJust)

230+ ) <#> (\x -> spy "first boy" $ (unsafeCoerce x).key)

220

231

221 lastKey = kids # A.last # unsafeCoerce # _.key

232 lastKey = kids # A.last # unsafeCoerce # _.key

222 updateVisible (const (firstGaps ?|| lastKey))

233 updateVisible (const (firstGaps ?|| lastKey))

blog/src/pages/optional.mdx+9−3

@@ -5,7 +5,7 @@ import SEO from '../components/seo'

6# Optional

8−```puregaps

8+```purescript

9--result Hello World

10module Main where

11import Grimoire

@@ -19,7 +19,7 @@ incantation = cast $

20---

22−```puregaps

22+```purescript

23--result Hello World

24module Main where

25import Grimoire

@@ -31,4 +31,10 @@ incantation = cast $

31--end here

32```

34+---

35+

34−## Hans Hölzel

36+## Hans Hölzel

37+

38+---

39+

40+Guter Mann

components/src/Yoga/FillInTheGaps/Logic.purs+6−18

@@ -3,32 +3,18 @@ module Yoga.FillInTheGaps.Logic where

3import Prelude

4import Data.Array (intercalate)

5import Data.Array as A

6−import Data.Either (Either(..))

7import Data.Foldable (foldl)

6import Data.Foldable (foldl)

8import Data.Lens ((%~))

7import Data.Lens ((%~))

9import Data.Lens.Index (ix)

8import Data.Lens.Index (ix)

10−import Data.Maybe (Maybe(..), fromMaybe')

9+import Data.Maybe (Maybe(..))

11import Data.String (Pattern(..), split)

10import Data.String (Pattern(..), split)

12import Data.String as S

11import Data.String as S

13import Data.String.Regex (Regex)

12import Data.String.Regex (Regex)

14import Data.String.Regex as Regex

13import Data.String.Regex as Regex

15import Data.String.Regex.Flags as RegexFlags

14import Data.String.Regex.Flags as RegexFlags

16import Data.String.Regex.Unsafe (unsafeRegex)

15import Data.String.Regex.Unsafe (unsafeRegex)

17−import Data.Tuple.Nested ((/\))

18−import Debug.Trace (spy)

19−import Effect (Effect)

20−import Justifill (justifill)

21import Partial.Unsafe (unsafeCrashWith)

16import Partial.Unsafe (unsafeCrashWith)

22−import React.Basic (JSX, ReactComponent, element)

23−import React.Basic.DOM as R

24−import React.Basic.Hooks (component, useState)

25−import React.Basic.Hooks as React

26−import React.Basic.SyntaxHighlighter.Component (HighlighterTheme, syntaxHighlighterImpl)

27−import Shared.Models.Body (CompileResult, RunResult)

28import Yoga.Helpers ((?||))

17import Yoga.Helpers ((?||))

29−import Yoga.InlineCode.Component as InlineCode

30−import Yoga.Theme.Styles (useTheme)

31−import Yoga.Theme.Syntax (mkHighlighterTheme)

33complete ∷ Array (Array Segment) -> Boolean

19complete ∷ Array (Array Segment) -> Boolean

34complete arr = foldl f true (join arr)

20complete arr = foldl f true (join arr)

@@ -52,8 +38,8 @@ getResult = case _ of

52 ExpectedResult r -> Just r

38 ExpectedResult r -> Just r

53 _ -> Nothing

39 _ -> Nothing

55−findResult ∷ Array Segment -> String

41+findResult ∷ Array Segment -> Maybe String

56−findResult = fromMaybe' (\_ -> unsafeCrashWith "Even teachers make mistakes") <<< A.findMap getResult

42+findResult = A.findMap getResult

58toCode ∷ Array (Array Segment) -> String

44toCode ∷ Array (Array Segment) -> String

59toCode lines = intercalate "\n" mapped

45toCode lines = intercalate "\n" mapped

@@ -112,7 +98,9 @@ smooshFillers = foldl smooshOuter []

112 [ Filler f ], Just { init, last: [ Filler prev ] } -> A.snoc init [ Filler (prev <> "\n" <> f) ]

98 [ Filler f ], Just { init, last: [ Filler prev ] } -> A.snoc init [ Filler (prev <> "\n" <> f) ]

113 _, _ -> A.snoc acc segs

99 _, _ -> A.snoc acc segs

114

100

101+parseSegments ∷ String -> Maybe (Array (Array Segment))

115−parseSegments code = segments

102+parseSegments code = result $> segments

116 where

103 where

117 lines = split (Pattern "\n") code

104 lines = split (Pattern "\n") code

118 segments = smooshFillers (lines <#> \line -> rawSegments line <#> toSegment)

105 segments = smooshFillers (lines <#> \line -> rawSegments line <#> toSegment)

106+ result = findResult (join segments)

components/src/Yoga/FillInTheGaps/Stories.purs+2−1

@@ -7,13 +7,14 @@ import Storybook.Decorator.FullScreen (fullScreenDecorator)

7import Storybook.React (Storybook, add, addDecorator, storiesOf)

8import Yoga.FillInTheGaps.Component as FillInTheGaps

9import Yoga.FillInTheGaps.Logic (parseSegments)

10+import Yoga.Helpers ((?||))

11stories ∷ Effect Storybook

12stories ∷ Effect Storybook

12stories = do

13stories = do

13 storiesOf "FillInTheGaps" do

14 storiesOf "FillInTheGaps" do

14 addDecorator fullScreenDecorator

15 addDecorator fullScreenDecorator

15 add "The FillInTheGaps" (FillInTheGaps.makeComponent)

16 add "The FillInTheGaps" (FillInTheGaps.makeComponent)

16− [ { initialSegments: parseSegments codeWithHoles, update: pure (pure unit) }

17+ [ { initialSegments: parseSegments codeWithHoles ?|| [], update: pure (pure unit) }

17 ]

18 ]

19codeWithHoles =

20codeWithHoles =