139 lines
5.6 KiB
Text
139 lines
5.6 KiB
Text
<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}>
|
|
|
|
<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>
|