| Safe Haskell | Safe-Inferred |
|---|---|
| Language | Haskell2010 |
Yesod.Core.Widget
Description
Widgets combine HTML with JS and CSS dependencies with a unique identifier generator, allowing you to create truly modular HTML components.
Synopsis
- type WidgetT site (m :: Type -> Type) = WidgetFor site
- data WidgetFor site a
- data PageContent url = PageContent {}
- whamlet :: QuasiQuoter
- whamletFile :: FilePath -> Q Exp
- ihamletToRepHtml :: (MonadHandler m, RenderMessage (HandlerSite m) message) => HtmlUrlI18n message (Route (HandlerSite m)) -> m Html
- ihamletToHtml :: (MonadHandler m, RenderMessage (HandlerSite m) message) => HtmlUrlI18n message (Route (HandlerSite m)) -> m Html
- class ToWidget site a where
- toWidget :: (MonadWidget m, HandlerSite m ~ site) => a -> m ()
- class ToWidgetHead site a where
- toWidgetHead :: (MonadWidget m, HandlerSite m ~ site) => a -> m ()
- class ToWidgetBody site a where
- toWidgetBody :: (MonadWidget m, HandlerSite m ~ site) => a -> m ()
- class ToWidgetMedia site a where
- toWidgetMedia :: (MonadWidget m, HandlerSite m ~ site) => Text -> a -> m ()
- setTitle :: MonadWidget m => Html -> m ()
- setTitleI :: (MonadWidget m, RenderMessage (HandlerSite m) msg) => msg -> m ()
- setDescription :: MonadWidget m => Text -> m ()
- setDescriptionI :: (MonadWidget m, RenderMessage (HandlerSite m) msg) => msg -> m ()
- setDescriptionIdemp :: MonadWidget m => Text -> m ()
- setDescriptionIdempI :: (MonadWidget m, RenderMessage (HandlerSite m) msg) => msg -> m ()
- setOGType :: MonadWidget m => Text -> m ()
- setOGImage :: MonadWidget m => Text -> m ()
- addStylesheet :: MonadWidget m => Route (HandlerSite m) -> m ()
- addStylesheetAttrs :: MonadWidget m => Route (HandlerSite m) -> [(Text, Text)] -> m ()
- addStylesheetRemote :: MonadWidget m => Text -> m ()
- addStylesheetRemoteAttrs :: MonadWidget m => Text -> [(Text, Text)] -> m ()
- addStylesheetEither :: MonadWidget m => Either (Route (HandlerSite m)) Text -> m ()
- newtype CssBuilder = CssBuilder {}
- addScript :: MonadWidget m => Route (HandlerSite m) -> m ()
- addScriptAttrs :: MonadWidget m => Route (HandlerSite m) -> [(Text, Text)] -> m ()
- addScriptRemote :: MonadWidget m => Text -> m ()
- addScriptRemoteAttrs :: MonadWidget m => Text -> [(Text, Text)] -> m ()
- addScriptEither :: MonadWidget m => Either (Route (HandlerSite m)) Text -> m ()
- handlerToWidget :: HandlerFor site a -> WidgetFor site a
- whamletFileWithSettings :: HamletSettings -> FilePath -> Q Exp
- asWidgetT :: WidgetT site m () -> WidgetT site m ()
Datatype
data WidgetFor site a Source #
A generic widget, allowing specification of both the subsite and master
site datatypes. While this is simply a WriterT, we define a newtype for
better error messages.
Instances
data PageContent url Source #
Content for a web page. By providing this datatype, we can easily create generic site templates, which would have the type signature:
PageContent url -> HtmlUrl url
Constructors
| PageContent | |
Special Hamlet quasiquoter/TH for Widgets
ihamletToRepHtml :: (MonadHandler m, RenderMessage (HandlerSite m) message) => HtmlUrlI18n message (Route (HandlerSite m)) -> m Html Source #
ihamletToHtml :: (MonadHandler m, RenderMessage (HandlerSite m) message) => HtmlUrlI18n message (Route (HandlerSite m)) -> m Html Source #
Convert to Widget
class ToWidget site a where Source #
Methods
toWidget :: (MonadWidget m, HandlerSite m ~ site) => a -> m () Source #
Instances
class ToWidgetHead site a where Source #
Methods
toWidgetHead :: (MonadWidget m, HandlerSite m ~ site) => a -> m () Source #
Instances
class ToWidgetBody site a where Source #
Methods
toWidgetBody :: (MonadWidget m, HandlerSite m ~ site) => a -> m () Source #
Instances
| ToWidgetBody site Html Source # | |
Defined in Yesod.Core.Widget Methods toWidgetBody :: (MonadWidget m, HandlerSite m ~ site) => Html -> m () Source # | |
| ToWidgetBody site Javascript Source # | |
Defined in Yesod.Core.Widget Methods toWidgetBody :: (MonadWidget m, HandlerSite m ~ site) => Javascript -> m () Source # | |
| render ~ RY site => ToWidgetBody site (render -> Html) Source # | |
Defined in Yesod.Core.Widget Methods toWidgetBody :: (MonadWidget m, HandlerSite m ~ site) => (render -> Html) -> m () Source # | |
| render ~ RY site => ToWidgetBody site (render -> Javascript) Source # | |
Defined in Yesod.Core.Widget Methods toWidgetBody :: (MonadWidget m, HandlerSite m ~ site) => (render -> Javascript) -> m () Source # | |
class ToWidgetMedia site a where Source #
Allows adding some CSS to the page with a specific media type.
Since 1.2
Methods
Arguments
| :: (MonadWidget m, HandlerSite m ~ site) | |
| => Text | media value |
| -> a | |
| -> m () |
Add the given content to the page, but only for the given media type.
Since 1.2
Instances
| ToWidgetMedia site Css Source # | |
Defined in Yesod.Core.Widget Methods toWidgetMedia :: (MonadWidget m, HandlerSite m ~ site) => Text -> Css -> m () Source # | |
| ToWidgetMedia site CssBuilder Source # | |
Defined in Yesod.Core.Widget Methods toWidgetMedia :: (MonadWidget m, HandlerSite m ~ site) => Text -> CssBuilder -> m () Source # | |
| render ~ RY site => ToWidgetMedia site (render -> Css) Source # | |
Defined in Yesod.Core.Widget Methods toWidgetMedia :: (MonadWidget m, HandlerSite m ~ site) => Text -> (render -> Css) -> m () Source # | |
| render ~ RY site => ToWidgetMedia site (render -> CssBuilder) Source # | |
Defined in Yesod.Core.Widget Methods toWidgetMedia :: (MonadWidget m, HandlerSite m ~ site) => Text -> (render -> CssBuilder) -> m () Source # | |
Creating
Head of page
setTitle :: MonadWidget m => Html -> m () Source #
Set the page title.
Calling setTitle or setTitleI multiple times overrides previously set
values.
SEO Notes:
- Title tags are the second most important on-page factor for SEO, after content
- Every page should have a unique title tag
- Start your title tag with your main targeted keyword
- Don't stuff your keywords
- Google typically shows 55-64 characters, so aim to keep your title length under 60 characters
setTitleI :: (MonadWidget m, RenderMessage (HandlerSite m) msg) => msg -> m () Source #
Set the localised page title.
n.b. See comments for setTitle
setDescription :: MonadWidget m => Text -> m () Source #
Warning: setDescription is not idempotent; we recommend setDescriptionIdemp insteadMultiple calls to setDescription will insert multiple meta tags in the page head.If you want an idempotent function, use setDescriptionIdemp - but if you do, you may need to change your layout to include pageDescription.
Add description meta tag to the head of the page
Google does not use the description tag as a ranking signal, but the contents of this tag will likely affect your click-through rate since it shows up in search results.
The average length of the description shown in Google's search results is about 160 characters on desktop, and about 130 characters on mobile, at time of writing.
Source: https://www.advancedwebranking.com/blog/meta-tags-important-in-seo/
Since: 1.6.18
setDescriptionI :: (MonadWidget m, RenderMessage (HandlerSite m) msg) => msg -> m () Source #
Warning: setDescriptionI is not idempotent; we recommend setDescriptionIdempI insteadMultiple calls to setDescriptionI will insert multiple meta tags in the page head.If you want an idempotent function, use setDescriptionIdempI - but if you do, you may need to change your layout to include pageDescription.
Add translated description meta tag to the head of the page
n.b. See comments for setDescription.
Since: 1.6.18
setDescriptionIdemp :: MonadWidget m => Text -> m () Source #
Add description meta tag to the head of the page
Google does not use the description tag as a ranking signal, but the contents of this tag will likely affect your click-through rate since it shows up in search results.
The average length of the description shown in Google's search results is about 160 characters on desktop, and about 130 characters on mobile, at time of writing.
Unlike setDescription, this version is *idempotent* - calling it multiple
times will result in only a single description meta tag in the head.
Source: https://www.advancedwebranking.com/blog/meta-tags-important-in-seo/
Since: 1.6.23
setDescriptionIdempI :: (MonadWidget m, RenderMessage (HandlerSite m) msg) => msg -> m () Source #
Add translated description meta tag to the head of the page
n.b. See comments for setDescriptionIdemp.
Unlike setDescriptionI, this version is *idempotent* - calling it multiple
times will result in only a single description meta tag in the head.
Since: 1.6.23
setOGType :: MonadWidget m => Text -> m () Source #
Add OpenGraph type meta tag to the head of the page
See all available OG types here: https://ogp.me/#types
Since: 1.6.18
setOGImage :: MonadWidget m => Text -> m () Source #
Add OpenGraph image meta tag to the head of the page
Best practices:
- Use custom images for shareable pages, e.g., homepage, articles, etc.
- Use your logo or any other branded image for the rest of your pages.
- Use images with a 1.91:1 ratio and minimum recommended dimensions of 1200x630 for optimal clarity across all devices.
Source: https://ahrefs.com/blog/open-graph-meta-tags/
Since: 1.6.18
CSS
addStylesheet :: MonadWidget m => Route (HandlerSite m) -> m () Source #
Link to the specified local stylesheet.
addStylesheetAttrs :: MonadWidget m => Route (HandlerSite m) -> [(Text, Text)] -> m () Source #
Link to the specified local stylesheet.
addStylesheetRemote :: MonadWidget m => Text -> m () Source #
Link to the specified remote stylesheet.
addStylesheetRemoteAttrs :: MonadWidget m => Text -> [(Text, Text)] -> m () Source #
Link to the specified remote stylesheet.
addStylesheetEither :: MonadWidget m => Either (Route (HandlerSite m)) Text -> m () Source #
newtype CssBuilder Source #
Newtype wrapper allowing injection of arbitrary content into CSS.
Usage:
toWidget $ CssBuilder "p { color: red }"Since: 1.1.3
Constructors
| CssBuilder | |
Fields | |
Instances
Javascript
addScript :: MonadWidget m => Route (HandlerSite m) -> m () Source #
Link to the specified local script.
addScriptAttrs :: MonadWidget m => Route (HandlerSite m) -> [(Text, Text)] -> m () Source #
Link to the specified local script.
addScriptRemote :: MonadWidget m => Text -> m () Source #
Link to the specified remote script.
addScriptRemoteAttrs :: MonadWidget m => Text -> [(Text, Text)] -> m () Source #
Link to the specified remote script.
addScriptEither :: MonadWidget m => Either (Route (HandlerSite m)) Text -> m () Source #
Subsites
handlerToWidget :: HandlerFor site a -> WidgetFor site a Source #
Internal
whamletFileWithSettings :: HamletSettings -> FilePath -> Q Exp Source #