Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support for CSS and custom index.html #3

Closed
andrevdm opened this issue Jul 6, 2019 · 2 comments
Closed

Support for CSS and custom index.html #3

andrevdm opened this issue Jul 6, 2019 · 2 comments

Comments

@andrevdm
Copy link
Contributor

andrevdm commented Jul 6, 2019 •
edited
Loading

Unless I'm missing something, I don't think there is a simple way to use a custom CSS file. I suspect most people will want to do this. Also it may be useful to make it easy to replace the default index.html.

I know you can run websocketApp but that seems like a lot of work just to get a CSS.

If you are happy with the approach I will submit a PR that is working nicely locally. What I've done is the following

Replica: replica.hs

app :: forall st.
     (Request -> IO (Maybe Response))
  -> B.ByteString
  -> ConnectionOptions
  -> st
  -> (st -> IO (Maybe (V.HTML, st, Event -> IO ())))
  -> Application
app handler title options initial step
  = ...

    backupApp :: Application
    backupApp request respond =
      handler request >>= \case
        Nothing -> respond $ responseLBS status200 [("content-type", "text/html")] indexBS
        Just response -> respond response

The chage is that app is passed a handler that can intercept and respond to requests. In backupApp

concur-replica: Run.hs

runCustom :: (W.Request -> IO (Maybe W.Response)) -> Int -> T.Text -> ConnectionOptions -> Widget HTML a -> IO ()
runCustom handler port title connectionOptions widget
  = W.run port
  $ R.app handler (TE.encodeUtf8 title) connectionOptions (step widget) stepWidget

runDefault then passes a const $ pure Nothing as the handler

Using it looks like this

main :: IO ()
main = Cr.runCustom handler 8080 "test1" Wsc.defaultConnectionOptions $ do
  myWidget

  where
    handler req = do
      case W.rawPathInfo req of
        "/" -> pure . Just $ indexHtml
        "/site.css" -> pure . Just $ siteCss
        _ -> pure . Just $ indexHtml

    indexHtml = W.responseLBS status200 [("content-type", "text/html")] "index.html with /site.css and clientDriver"
    siteCss = W.responseLBS status200 [("content-type", "text/css")] "blablabla"

I think it makes sense for the handler to be IO... so that the user could load the file of disk etc

Let me know if you are interested and I'll submit a PR to both projects
@andrevdm
Copy link
Contributor Author

andrevdm commented Jul 7, 2019

I did not show the clientDriver being loaded above. Just for clarity this is my full index.html now

    index = "<meta charset=\"utf-8\"> \n\
            \ <!doctype html> \n\
            \ <html> \n\
            \ <head> \n\
            \   <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui\"> \n\
            \   <link rel=\"shortcut icon\" href=\"favicon.ico\"> \n\
            \   <link rel=\"stylesheet\" type=\"text/css\" href=\"site.css\"> \n\
            \   <title>Replica Example</title> \n\
            \ </head> \n\
            \ <body> \n\
            \ <script language=\"javascript\"> \n"
            <>
            BSL.fromStrict clientDriver
            <>
            " </script> \n\
            \ </body> \n\
            \ </html>"

@andrevdm andrevdm mentioned this issue Jul 8, 2019
Merged
@andrevdm
Copy link
Contributor Author

Closed as discussed in pkamenarsky/replica#6. Wai middleware seems like a better route

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@andrevdm