yesod-myblog/templates/homepage.hamlet

<div .masthead>
    <div .container>
        <div .row>
            <h1 .header>
                Yesod—a modern framework for blazing fast websites
            <h2>
                Fast, stable & spiced with great community
            <a href="http://www.yesodweb.com/book/" .btn.btn-info.btn-lg>
                Read the Book

<div .container>
    <!-- Starting
        ================================================== -->
    <div .bs-docs-section>
        <div .row>
            <div .col-lg-12>
                <div .page-header>
                    <h1 #start>Starting

                    <p>
                        Now that you have a working project you should use the
                        <a href=http://www.yesodweb.com/book/>Yesod book</a> to learn more.
                    <p>
                        You can also use this scaffolded site to explore some concepts, and best practices.

                    <ul .list-group>

                        <li .list-group-item>
                            This page was generated by the <tt>#{handlerName}</tt> handler in
                            <tt>Handler/Home.hs</tt>.

                        <li .list-group-item>
                            The <tt>#{handlerName}</tt> handler is set to generate your
                            site's home screen in Routes file
                            <tt>config/routes

                        <li .list-group-item>
                            We can link to other handlers, like the <a href="@{ProfileR}">Profile</a>.
                            Try it out as an anonymous user and see the access denied.
                            Then, try to <a href="@{AuthR LoginR}">login</a> with the dummy authentication added
                            while in development.

                        <li .list-group-item>
                            The HTML you are seeing now is actually composed by a number of <em>widgets</em>, #
                            most of them are brought together by the <tt>defaultLayout</tt> function which #
                            is defined in the <tt>Foundation.hs</tt> module, and used by <tt>#{handlerName}</tt>. #
                            All the files for templates and wigdets are in <tt>templates</tt>.

                        <li .list-group-item>
                            A Widget's Html, Css and Javascript are separated in three files with the
                            <tt>.hamlet</tt>, <tt>.lucius</tt> and <tt>.julius</tt> extensions.

                        <li .list-group-item ##{aDomId}>
                            If you had javascript enabled then you wouldn't be seeing this.

    <hr>

    <!-- Forms
        ================================================== -->
    <div .bs-docs-section>
        <div .row>
            <div .col-lg-12>
                <div .page-header>
                    <h1 #forms>Forms

                    <p>
                        This is an example of a form. Read the
                        <a href="http://www.yesodweb.com/book/forms">Forms chapter</a> #
                        on the yesod book to learn more about them.

        <div .row>
            <div .col-lg-6>
                <div .bs-callout bs-callout-info well>
                    <form .form-horizontal method=post action=@{HomeR}#forms enctype=#{formEnctype}>
                        ^{formWidget}

                        <button .btn.btn-primary type="submit">
                            Upload it!


            <div .col-lg-4.col-lg-offset-1>
                <div .bs-callout.bs-callout-info.upload-response>

                    $maybe (FileForm info con) <- submission
                        Your file type is <em>#{fileContentType info}</em>. You say it has: <em>#{con}</em>

                    $nothing
                        File upload result will be here...


    <hr>

    <!-- JSON
        ================================================== -->
    <div .bs-docs-section>
        <div .row>
            <div .col-lg-12>
                <div .page-header>
                    <h1 #json>JSON

                    <p>
                        Yesod has JSON support baked-in.
                        The form below makes an AJAX request with Javascript,
                        then updates the page with your submission.
                        (see <tt>Handler/Comment.hs</tt>, <tt>templates/homepage.julius</tt>,
                        and <tt>Handler/Home.hs</tt> for the implementation).

        <div .row>
            <div .col-lg-6>
                <div .bs-callout.bs-callout-info.well>
                    <form .form-horizontal ##{commentFormId}>
                        <div .field>
                            <textarea rows="2" ##{commentTextareaId} placeholder="Your comment here..." required></textarea>

                        <button .btn.btn-primary type=submit>
                           Create comment

           <div .col-lg-4.col-lg-offset-1>
               <div .bs-callout.bs-callout-info>
                   <small>
                       Your comments will appear here. You can also open the
                       console log to see the raw response from the server.
                   <ul ##{commentListId}>
                       $forall comment <- allComments
                           <li>#{commentMessage $ entityVal comment}

    <hr>

    <!-- Testing
       ================================================== -->
    <div .bs-docs-section>
       <div .row>
           <div .col-lg-12>
               <div .page-header>
                   <h1 #test>Testing

                   <p>
                       And last but not least, Testing. In <tt>test/Spec.hs</tt> you will find a #
                       test suite that performs tests on this page.
                   <p>
                       You can run your tests by doing: <code>stack test</code>