67d76a3 · rowtype-yoga/purescript-next-website

git.iko.soy/rowtype-yoga/purescript-next-website

Fix theme toggle and add pages

commit67d76a368bf0665c85b19f753e824d1f67e7bfa6 authorsigma-andex <77549848+sigma-andex@users.noreply.github.com> dateMon 29 Aug 2022, 07:14 (4 years ago) parentc5629d7

9 files changed+101−40

compare with main

unifiedsplit

pages/getting-started.js+1 pages/try.js+1 src/Components/Navigation.purs+26−23 src/Main.purs−10 src/Pages/App.purs+6−4 src/Pages/GettingStarted.purs+32 src/Pages/Packages.purs+1−1 src/Pages/Try.purs+32 src/Themes.purs+2−2

pages/getting-started.jsnew file+1

@@ -0,0 +1 @@

1+export { mkGettingStarted as default, getServerSideProps } from "../output/Pages.GettingStarted/index.js";

pages/try.jsnew file+1

@@ -0,0 +1 @@

1+export { mkTry as default, getServerSideProps } from "../output/Pages.Try/index.js";

src/Components/Navigation.purs+26−23

@@ -1,8 +1,7 @@

11module Components.Navigation

22 ( isDarkDefault_

33 , navigation

4− )

5− where

4+ ) where

76import Prelude

87import Web.HTML.HTMLElement

@@ -13,9 +12,10 @@ import Data.Traversable (for_, traverse, traverse_)

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

1413import Debug (spy)

1514import Effect (Effect)

15+import Effect.Uncurried (runEffectFn1)

1616import Next.Router (useRouter)

1717import Next.Router as Router

18−import NextUI.NextUI (switch, useTheme)

18+import NextUI.NextUI (switch, useNextTheme, useTheme)

1919import NextUI.NextUI as NextUI

2020import React.Basic.DOM (css)

2121import React.Basic.DOM.Events (targetChecked)

@@ -32,6 +32,7 @@ import Web.HTML (window)

3232import Web.HTML.HTMLDocument (toDocument)

3333import Web.HTML.HTMLDocument as Doc

3434import Web.HTML.Window (document)

35+

3536-- radial-gradient(20rem 20rem at left 15rem top 20rem, rgba(30, 144, 255,0.5) 0% 10%,#0000 90% 90%),

3637mkBackgroundImage isDark =

3738 if isDark then

@@ -44,29 +45,29 @@ mkBackgroundImage isDark =

4445 radial-gradient(25rem 25rem at left 15rem top 20rem, rgba(32, 178, 170, 0.25) 0% 10%,#0000 90% 90%),

4546 radial-gradient(45rem 45rem at left 70rem top 40rem, rgba(30, 144, 255, 0.25) 0% 10%,#0000 70% 80%);

4647 """

48+

4749foreign import isDarkDefault_ :: Effect Boolean

4850

4951navigation :: Component Unit

5052navigation = do

5153 component "Navbar" \_props -> React.do

5254

53− { theme } <- useTheme

55+ { theme, isDark } <- useTheme

56+ { setTheme } <- useNextTheme

5457 router <- useRouter

5558 let

5659 dispatchRoute = Router.push router

57− isDarkPreference /\ setIsDarkPreference <- useState' true

58− isDark /\ setDark <- useState' isDarkPreference

59− _ <- useEffectOnce do

60− isDarkDefault <- isDarkDefault_

61− setIsDarkPreference $ spy "Setting isDarkDefault " isDarkDefault

62− pure mempty

60+ currentRoute = Router.route router

61+

62+ setDark false = setTheme "light"

63+ setDark true = setTheme "dark"

64+

6365 _ <- useEffect [ isDark ] do

6466 w <- window

6567 htmlDocument <- document w

6668 maybeElem <- htmlDocument # toDocument # documentElement

6769 case maybeElem of

6870 Just el -> do

69− (DOMEL.setAttribute "class" if (spy "isDark" $ isDark) then "dark-theme" else "light-theme") el

7071 bodyElem <- runMaybeT do

7172 body <- MaybeT $ Doc.body htmlDocument

7273 pure $ toElement body

@@ -80,31 +81,33 @@ navigation = do

8081 }

8182 $ icon siPurescript { style: css { color: getColorValue theme "neutral" }, size: "3rem" }

8283 , el NextUI.navbarContent { hideIn: "xs" } $ map (mkLink theme)

83− [ { onClick: dispatchRoute "/packages", title: "Getting started" }

84− , { onClick: dispatchRoute "/packages", title: "Try Purescript" }

85− , { onClick: dispatchRoute "/packages", title: "Packages" }

84+ [ { onClick: dispatchRoute "/getting-started", title: "Getting started", isActive: currentRoute == "/getting-started" }

85+ , { onClick: dispatchRoute "/try", title: "Try", isActive: currentRoute == "/try" }

86+ , { onClick: dispatchRoute "/packages", title: "Packages", isActive: currentRoute == "/packages" }

8687 ]

8788 , el NextUI.navbarContent {}

8889 [ el NextUI.navbarLink

8990 { href: "https://purescript.org/chat"

9091 }

91− $ icon siDiscord { style: css { color: spy "color value" $ getColorValue theme "neutral" }, size: "1.5rem" }

92+ $ icon siDiscord { style: css { color: getColorValue theme "neutral" }, size: "1.5rem" }

9293 , el NextUI.navbarLink

9394 { href: "https://discourse.purescript.org/"

9495 , target: "_blank"

9596 }

96− $ icon siDiscourse { style: css { color: spy "color value" $ getColorValue theme "neutral" }, size: "1.5rem" }

97+ $ icon siDiscourse { style: css { color: getColorValue theme "neutral" }, size: "1.5rem" }

9798 , el NextUI.navbarLink

9899 { href: "https://github.com/purescript/purescript"

99100 , target: "_blank"

100101 }

101− $ icon siGithub { style: css { color: spy "color value" $ getColorValue theme "neutral" }, size: "1.5rem" }

102+ $ icon siGithub { style: css { color: getColorValue theme "neutral" }, size: "1.5rem" }

102103 , el switch { checked: isDark, onChange: handler targetChecked $ traverse_ setDark } ""

103104 ]

104105 ]

105− where

106− mkLink theme { onClick, title } =

107− el NextUI.navbarLink

108− { onClick

109− }

110− $ el NextUI.text { size: "$xl", color: getColorValue theme "neutral" } title

106+ where

107+ mkLink theme { onClick, title, isActive } =

108+ el NextUI.navbarLink

109+ { onClick

110+ , isActive

111+ , variant: "underline"

112+ }

113+ $ el NextUI.text { size: "$xl", color: getColorValue theme "neutral" } title

src/Main.pursdeleted−10

@@ -1,10 +0,0 @@

1−module Main where

2−

3−import Prelude

4−

5−import Effect (Effect)

6−import Effect.Console (log)

7−

8−main :: Effect Unit

9−main = do

10− log "🍝"

src/Pages/App.purs+6−4

@@ -23,7 +23,6 @@ type AppProps props =

2323 , pageProps :: props

2424 }

2525

26−

2726mkApp :: forall props. Effect (EffectFn1 (AppProps props) React.JSX)

2827mkApp = do

2928 context /\ settingsProvider <- mkSettingsProvider

@@ -40,10 +39,13 @@ mkApp = do

4039 $ el nextThemesProvider

4140 { defaultTheme: "system"

4241 , attribute: "class"

42+ , storageKey: "theme"

4343 , value: { dark: (unsafeCoerce dark).className, light: (unsafeCoerce light).className }

4444 }

4545 $ el nextUIProvider {}

46− [ loading unit

47− , nav unit

48− , el NextUI.container { css: css { height: "80vh" } } $ component props.pageProps

46+ [ nav unit

47+ , el NextUI.container { css: css { height: "80vh" } }

48+ [ loading unit

49+ , component props.pageProps

50+ ]

4951 ]

src/Pages/GettingStarted.pursnew file+32

@@ -0,0 +1,32 @@

1+module Pages.GettingStarted

2+ (

3+ -- getServerSideProps

4+ -- ,

5+ mkGettingStarted

6+ ) where

8+import Prelude

10+import Components.Page as Page

11+import NextUI.NextUI as NextUI

12+import React.Basic.DOM.Simplified.Generated as R

13+import React.Util (el)

14+

15+type Props =

16+ { header :: String

17+ }

18+

19+

20+mkGettingStarted :: Page.Component Props

21+mkGettingStarted = do

22+

23+ Page.component "GettingStarted" \env props -> React.do

24+ pure $ el NextUI.container {} $

25+ [ el NextUI.row {} $ R.h1' "Getting Started"

26+ ]

27+

28+-- getServerSideProps :: forall ctx. EffectFn1 ctx (Promise { props :: Props })

29+-- getServerSideProps =

30+-- mkEffectFn1 $ fromAff

31+-- <<< map { props: _ }

32+-- <<< fetchData

src/Pages/Packages.purs+1−1

@@ -149,7 +149,7 @@ mkPackages = do

149149 pure $ el NextUI.container {} $

150150 [ el NextUI.row {} $ R.h1' "Packages"

151151 , el NextUI.row {} $ el NextUI.input

152− { initialValue: spy "searchInput" state.searchInput

152+ { initialValue: state.searchInput

153153 , clearable: true

154154 , bordered: true

155155 , contentLeft: icon_ tbSearch

src/Pages/Try.pursnew file+32

@@ -0,0 +1,32 @@

1+module Pages.Try

2+ (

3+ -- getServerSideProps

4+ -- ,

5+ mkTry

6+ ) where

8+import Prelude

10+import Components.Page as Page

11+import NextUI.NextUI as NextUI

12+import React.Basic.DOM.Simplified.Generated as R

13+import React.Util (el)

14+

15+type Props =

16+ { header :: String

17+ }

18+

19+

20+mkTry :: Page.Component Props

21+mkTry = do

22+

23+ Page.component "Try Purescript" \env props -> React.do

24+ pure $ el NextUI.container {} $

25+ [ el NextUI.row {} $ R.h1' "Getting Started"

26+ ]

27+

28+-- getServerSideProps :: forall ctx. EffectFn1 ctx (Promise { props :: Props })

29+-- getServerSideProps =

30+-- mkEffectFn1 $ fromAff

31+-- <<< map { props: _ }

32+-- <<< fetchData

src/Themes.purs+2−2

@@ -45,11 +45,11 @@ mkLight = createTheme

4545 , primaryLightHover: "$purple300"

4646 , primaryLightActive: "$blue400"

4747 , primaryLightContrast: "$blue600"

48− , primary: "$blue200"

48+ , primary: "$black200"

4949 , primaryBorder: "$blue300"

5050 , primaryBorderHover: "$blue600"

5151 , primarySolidHover: "$blue400"

52− , primarySolidContrast: "$blue600"

52+ , primarySolidContrast: "$black100"

5353 , primaryShadow: "$blue500"

5454 , gradient: "linear-gradient(112deg, $blue100 -25%, $pink500 -10%, $purple500 80%)"

5555 , link: "$black100"