diff options
Diffstat (limited to 'templates/homepage.hamlet')
| -rw-r--r-- | templates/homepage.hamlet | 139 |
1 files changed, 139 insertions, 0 deletions
diff --git a/templates/homepage.hamlet b/templates/homepage.hamlet new file mode 100644 index 0000000..fb79965 --- /dev/null +++ b/templates/homepage.hamlet | |||
| @@ -0,0 +1,139 @@ | |||
| 1 | <div .masthead> | ||
| 2 | <div .container> | ||
| 3 | <div .row> | ||
| 4 | <h1 .header> | ||
| 5 | Yesod—a modern framework for blazing fast websites | ||
| 6 | <h2> | ||
| 7 | Fast, stable & spiced with great community | ||
| 8 | <a href="http://www.yesodweb.com/book/" .btn.btn-info.btn-lg> | ||
| 9 | Read the Book | ||
| 10 | |||
| 11 | <div .container> | ||
| 12 | <!-- Starting | ||
| 13 | ================================================== --> | ||
| 14 | <div .bs-docs-section> | ||
| 15 | <div .row> | ||
| 16 | <div .col-lg-12> | ||
| 17 | <div .page-header> | ||
| 18 | <h1 #start>Starting | ||
| 19 | |||
| 20 | <p> | ||
| 21 | Now that you have a working project you should use the | ||
| 22 | <a href=http://www.yesodweb.com/book/>Yesod book</a> to learn more. | ||
| 23 | <p> | ||
| 24 | You can also use this scaffolded site to explore some concepts, and best practices. | ||
| 25 | |||
| 26 | <ul .list-group> | ||
| 27 | |||
| 28 | <li .list-group-item> | ||
| 29 | This page was generated by the <tt>#{handlerName}</tt> handler in | ||
| 30 | <tt>Handler/Home.hs</tt>. | ||
| 31 | |||
| 32 | <li .list-group-item> | ||
| 33 | The <tt>#{handlerName}</tt> handler is set to generate your | ||
| 34 | site's home screen in Routes file | ||
| 35 | <tt>config/routes | ||
| 36 | |||
| 37 | <li .list-group-item> | ||
| 38 | We can link to other handlers, like the <a href="@{ProfileR}">Profile</a>. | ||
| 39 | Try it out as an anonymous user and see the access denied. | ||
| 40 | Then, try to <a href="@{AuthR LoginR}">login</a> with the dummy authentication added | ||
| 41 | while in development. | ||
| 42 | |||
| 43 | <li .list-group-item> | ||
| 44 | The HTML you are seeing now is actually composed by a number of <em>widgets</em>, # | ||
| 45 | most of them are brought together by the <tt>defaultLayout</tt> function which # | ||
| 46 | is defined in the <tt>Foundation.hs</tt> module, and used by <tt>#{handlerName}</tt>. # | ||
| 47 | All the files for templates and wigdets are in <tt>templates</tt>. | ||
| 48 | |||
| 49 | <li .list-group-item> | ||
| 50 | A Widget's Html, Css and Javascript are separated in three files with the | ||
| 51 | <tt>.hamlet</tt>, <tt>.lucius</tt> and <tt>.julius</tt> extensions. | ||
| 52 | |||
| 53 | <li .list-group-item ##{aDomId}> | ||
| 54 | If you had javascript enabled then you wouldn't be seeing this. | ||
| 55 | |||
| 56 | <hr> | ||
| 57 | |||
| 58 | <!-- Forms | ||
| 59 | ================================================== --> | ||
| 60 | <div .bs-docs-section> | ||
| 61 | <div .row> | ||
| 62 | <div .col-lg-12> | ||
| 63 | <div .page-header> | ||
| 64 | <h1 #forms>Forms | ||
| 65 | |||
| 66 | <p> | ||
| 67 | This is an example of a form. Read the | ||
| 68 | <a href="http://www.yesodweb.com/book/forms">Forms chapter</a> # | ||
| 69 | on the yesod book to learn more about them. | ||
| 70 | |||
| 71 | <div .row> | ||
| 72 | <div .col-lg-6> | ||
| 73 | <div .bs-callout bs-callout-info well> | ||
| 74 | <form .form-horizontal method=post action=@{HomeR}#forms enctype=#{formEnctype}> | ||
| 75 | ^{formWidget} | ||
| 76 | |||
| 77 | <button .btn.btn-primary type="submit"> | ||
| 78 | Upload it! | ||
| 79 | |||
| 80 | |||
| 81 | <div .col-lg-4.col-lg-offset-1> | ||
| 82 | <div .bs-callout.bs-callout-info.upload-response> | ||
| 83 | |||
| 84 | $maybe (FileForm info con) <- submission | ||
| 85 | Your file type is <em>#{fileContentType info}</em>. You say it has: <em>#{con}</em> | ||
| 86 | |||
| 87 | $nothing | ||
| 88 | File upload result will be here... | ||
| 89 | |||
| 90 | |||
| 91 | <hr> | ||
| 92 | |||
| 93 | <!-- JSON | ||
| 94 | ================================================== --> | ||
| 95 | <div .bs-docs-section> | ||
| 96 | <div .row> | ||
| 97 | <div .col-lg-12> | ||
| 98 | <div .page-header> | ||
| 99 | <h1 #json>JSON | ||
| 100 | |||
| 101 | <p> | ||
| 102 | Yesod has JSON support baked-in. | ||
| 103 | The form below makes an AJAX request with Javascript, | ||
| 104 | then updates the page with your submission. | ||
| 105 | (see <tt>Handler/Comment.hs</tt>, <tt>templates/homepage.julius</tt>, | ||
| 106 | and <tt>Handler/Home.hs</tt> for the implementation). | ||
| 107 | |||
| 108 | <div .row> | ||
| 109 | <div .col-lg-6> | ||
| 110 | <div .bs-callout.bs-callout-info.well> | ||
| 111 | <form .form-horizontal ##{commentFormId}> | ||
| 112 | <div .field> | ||
| 113 | <textarea rows="2" ##{commentTextareaId} placeholder="Your comment here..." required></textarea> | ||
| 114 | |||
| 115 | <button .btn.btn-primary type=submit> | ||
| 116 | Create comment | ||
| 117 | |||
| 118 | <div .col-lg-4.col-lg-offset-1> | ||
| 119 | <div .bs-callout.bs-callout-info> | ||
| 120 | <small> | ||
| 121 | Your comments will appear here. You can also open the | ||
| 122 | console log to see the raw response from the server. | ||
| 123 | <ul ##{commentListId}> | ||
| 124 | |||
| 125 | <hr> | ||
| 126 | |||
| 127 | <!-- Testing | ||
| 128 | ================================================== --> | ||
| 129 | <div .bs-docs-section> | ||
| 130 | <div .row> | ||
| 131 | <div .col-lg-12> | ||
| 132 | <div .page-header> | ||
| 133 | <h1 #test>Testing | ||
| 134 | |||
| 135 | <p> | ||
| 136 | And last but not least, Testing. In <tt>test/Spec.hs</tt> you will find a # | ||
| 137 | test suite that performs tests on this page. | ||
| 138 | <p> | ||
| 139 | You can run your tests by doing: <code>stack test</code> | ||