Skip to content

feat:add the frontend UI #6

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

Open
ErickGichuki wants to merge 2 commits into
base: 3-twitter-clone
Choose a base branch
from
Open

feat:add the frontend UI #6

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7573cc1
feat:add the frontend UI with reflex
Mar 6, 2025
9c61f59
fix:fix the frontend
Mar 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 10 additions & 30 deletions frontend/src/Frontend.hs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@

module Frontend where

import Control.Lens ((^.))
import Control.Monad
import qualified Data.Text as T
import qualified Data.Text.Encoding as T
import Language.Javascript.JSaddle (liftJSM, js, js1, jsg)
Expand All @@ -21,38 +19,20 @@ import Reflex.Dom.Core
import Common.Api
import Common.Route


-- This runs in a monad that can be run on the client or the server.
-- To run code in a pure client or pure server context, use one of the
-- `prerender` functions.
frontend :: Frontend (R FrontendRoute)
frontend = Frontend
{ _frontend_head = do
el "title" $ text "Obelisk Minimal Example"
el "title" $ text "Twitter"
elAttr "script" ("type" =: "application/javascript" <> "src" =: $(static "lib.js")) blank
elAttr "link" ("href" =: $(static "main.css") <> "type" =: "text/css" <> "rel" =: "stylesheet") blank
elAttr "script" ("src" =: "https://cdn.tailwindcss.com") blank
, _frontend_body = do
el "h1" $ text "Welcome to Obelisk!"
el "p" $ text $ T.pack commonStuff

-- `prerender` and `prerender_` let you choose a widget to run on the server
-- during prerendering and a different widget to run on the client with
-- JavaScript. The following will generate a `blank` widget on the server and
-- print "Hello, World!" on the client.
prerender_ blank $ liftJSM $ void
$ jsg ("window" :: T.Text)
^. js ("skeleton_lib" :: T.Text)
^. js1 ("log" :: T.Text) ("Hello, World!" :: T.Text)
elClass "nav" "bg-blue-600 text-white p-4 flex justify-between items-center" $ do
elClass "h1" "text-xl font-bold" $ text "Twitter Clone"
elClass "div" "flex space-x-4" $ do
elAttr "a" ("href" =: "/" <> "aria-label" =: "Go to Home page") $ text "Home"
elAttr "a" ("href" =: "/profile" <> "aria-label" =: "Go to Profile page") $ text "Profile"
elAttr "a" ("href" =: "/tweets" <> "aria-label" =: "Go to Tweets page") $ text "Tweets"
elClass "div" "max-w-7xl text-center py-7 font-bold text-2xl text-gray-800" $ do
el "p" $ text "Welcome! Sign up with us today!!"

elAttr "img" ("src" =: $(static "obelisk.jpg")) blank
el "div" $ do
let
cfg = "common/example"
path = "config/" <> cfg
getConfig cfg >>= \case
Nothing -> text $ "No config file found in " <> path
Just bytes -> case T.decodeUtf8' bytes of
Left ue -> text $ "Couldn't decode " <> path <> " : " <> T.pack (show ue)
Right s -> text s
return ()
}