web-view 0.2.0 → 0.2.2

raw patch · 5 files changed

+42/−14 lines, 5 filesdep −http-api-data

Dependencies removed: http-api-data

Files

• README.md +5/−5
• example/Main.hs +22/−6
• src/Web/View.hs +13/−0
• src/Web/View/Layout.hs +1/−1
• web-view.cabal +1/−2

@@ -7,7 +7,7 @@  ### Write Haskell instead of CSS -Type-safe utility functions to style html+Type-safe utility functions to generate styled HTML.  ```haskell myPage = col (gap 10) $ do@@ -15,7 +15,7 @@   button (border 1) "Click Me" ``` -Re-use styles as Haskell functions instead of naming CSS classes.+Leverage the full power of Haskell functions for reuse, instead of relying on CSS.  ```haskell header = bold@@ -40,7 +40,7 @@   row section "Top Bar"   row grow $ do     col section "Left Sidebar"-    col section "Main Content"+    col (section . grow) "Main Content"     col section "Right Sidebar"   row section "Bottom Bar"   where section = 'border' 1@@ -76,7 +76,7 @@ ----------  View Documentation on [Hackage][hackage]-* https://hackage.haskell.org/package/web-view-0.2.0+* https://hackage.haskell.org/package/web-view  View on Github * https://github.com/seanhess/web-view@@ -84,4 +84,4 @@ View [Examples](https://github.com/seanhess/web-view/blob/main/example/Main.hs)  -[hackage]: https://hackage.haskell.org/package/web-view-0.2.0+[hackage]: https://hackage.haskell.org/package/web-view

@@ -16,12 +16,27 @@   Warp.run 3010 app  -simple :: View c ()-simple = col (gap 10) $ do+buttons :: View c ()+buttons = col (gap 10 . pad 20) $ do   el (bold . fontSize 32) "My page"-  button (border 1) "Click Me" +  row (gap 10) $ do+    button (btn Primary) "Do Something"+    button (btn Secondary) "Cancel" +  --+  button' Secondary "Another Example"+ where+  -- Make style functions to encourage reuse+  btn c = bg c . hover (bg (light c)) . color White . rounded 3 . pad 15+  light Primary = PrimaryLight+  light Secondary = SecondaryLight+  light _ = Gray++  -- alternatively, we can make View functions+  button' c = button (btn c)++ responsive :: View c () responsive = do   layout (big flexRow) $ do@@ -41,8 +56,8 @@         el_ "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"         el_ "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"         el_ "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"-        el_ "Sed ut erspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"         el_ "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"+        el_ "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"  where   sidebar = width 250 . flexCol   topbar = height 100 . flexRow@@ -68,6 +83,7 @@ examples :: View c () examples = col (pad 20 . gap 15) $ do   el (bold . fontSize 24) "Layout"+  link "Buttons"   link "Responsive"   link "Holy Grail"  where@@ -80,7 +96,7 @@ app req respond = do   case pathInfo req of     [] -> view examples-    ["simple"] -> view simple+    ["buttons"] -> view buttons     ["responsive"] -> view responsive     ["holygrail"] -> view holygrail     _ -> notFound@@ -127,4 +143,4 @@   colorValue Error = "#F3D8DA"   colorValue Warning = "#FDF3D1"   colorValue Secondary = "#5CADDB"-  colorValue SecondaryLight = "#8CFDAB"+  colorValue SecondaryLight = "#6CBDEB"

@@ -149,6 +149,19 @@ >   <div class='bold fs-32'>My page</div> >   <button class='brd-1'>Click Me</button> > </div>++Leverage the full power of Haskell functions for reuse, instead of relying on CSS.++> header = bold+> h1 = header . fontSize 32+> h2 = header . fontSize 24+> page = gap 10+>+> myView = col page $ do+>   el h1 "My Page"+> ...++This approach is inspired by Tailwindcss' [Utility Classes](https://tailwindcss.com/docs/utility-first) -}  

@@ -18,7 +18,7 @@   'row' section "Top Bar"   'row' 'grow' $ do     'col' section "Left Sidebar"-    'col' section "Main Content"+    'col' (section . 'grow') "Main Content"     'col' section "Right Sidebar"   'row' section "Bottom Bar"   where section = 'border' 1

@@ -5,7 +5,7 @@ -- see: https://github.com/sol/hpack  name:           web-view-version:        0.2.0+version:        0.2.2 synopsis:       Type-safe HTML and CSS with intuitive layouts and composable styles. description:    Type-safe HTML and CSS with intuitive layouts and composable styles. Inspired by Tailwindcss and Elm-UI . See documentation for the @Web.View@ module below category:       Web@@ -78,7 +78,6 @@     , containers >=0.6 && <1     , effectful ==2.3.*     , file-embed >=0.0.10 && <0.1-    , http-api-data ==0.6.*     , http-types >=0.12.3 && <0.13     , string-interpolate >=0.3.2 && <0.4     , text >=1.2 && <3