- Add new contacts. Should ask for name, email, phone number, address.
- List all contacts.(Display it prettily)
- Search all contacts and display if the search key matches anything (name/email/phone number/address). Display a serial number beside each search result.
- Edit a contact based on the serial number above.
- Delete a contact based on the serial number above.
This is a bit advanced than the previous one you did.
- Here's the directory structure.
|- posts
|- 2013-12-31-new-year-resolutions.html
|- 2014-01-01-my-greatest-new-year-party.html
.... (any number of files with yyyy-mm-dd-some-file.html)
|- pages
|- about.html
|- contact.html
... any number of files with file.html(other than index.html)
|- layouts
|- page.html
|- post.html
|- index.html
- Posts are those files in the "posts" directory. Pages are those files in the "pages" directory.
- After you run the generator, it should generate the following directory structure in a new folder called "site".
site
|- 2013
| |- 12
| |- 31
| |- new-year-resolutions
| |- index.html
|- 2014
| |- 01
| |- 01
| |- greatest-new-year-party
| |- index.html
... any number of yyyy/mm/dd/file-slug/index.html
|- about
|- index.html
|- contact
|- index.html
... any number of files (other than index.html)
|- index.html
- As seen above, posts will have their file names in the
yyyy-mm-dd-post-slug.html
format. You need to create directoriesyyyy/mm/dd/post-slug/
and create a new fileindex.html
in the directory with the content of the post. - Similarly, pages will have their file names in the
page.html
format. You need to create a directorypage/
and create a new fileindex.html
with the content of the page. - Layouts can contain several files with
file.html
as their filename. Theindex.html
in layouts folder is special. - Post files can have the following format:
Title=New Year Resolutions
Date=2013-12-31
Layout=post
...any number of key=value lines
---
I'll do all of these things
<ul>
<li>One</li>
<li>Two</li>
</ul>
- You should then generate the post using the "post.html" layout file. If the Layout=site, you should generate the post using the "site.html" layout file. If none is given, default to "post.html". If Date is not given, generate a date based on the file name (from yyyy-mm-dd-post-slug.html). If no title is given, generate a title based on the file name by removing the hyphens and capitalizing every word.
e.g. If the content of the 2014-01-01-greatest-new-year-party.html is
Other=Some
---
Had my greatest new year party last night.
Even though this file has none of title,date,layout, it should get Title = Greatest New Year Party Date = 2014-01-01 Layout = post.html
-
You should generate a new field called
prettydate
to display a better date output. Ifdate=2014-01-01
,prettydate=1st Jan, 2014
. -
You should also generate a new extra field called "Url" that will be the relative url for that page or post. eg.
2014-01-01-greatest-new-year-party
will correspond to/2014/01/01/greatest-new-year-party/
. Note noindex.html
in the end. Similar for pages.about.html will correspond to
about/. Note, both of the urls end in
/`. -
Similar for pages. Except, the default layout will be "page.html". And it won't have date field.
new-contact.html
will be Title=New Contact. -
Layouts can contain {{title}}{{date}}{{prettydate}} fields to insert. Same as previous excercise.
-
The index.html can contain some extra placeholders. For example,
<nav>
<ul>
{#each pages}
<li><a href="{{url}}">{{title}}</li>
{/each}
</ul>
</nav>
<main>
{#each posts}
<li><a href="{{url}}">{{date}} - {{title}}</li>
{/each}
</main>
Bonus points if you develop tags
functionality. Posts will have Tags=ruby,code
. You will generate a directory called tags and use a layout file called tag.html
to generate a tag/index.html
for every tag. And in the "post.html" layout file you should be able to do:
<ul class="tags">
{#each tags}
<li><a href="{{url}}">{{name}}</a></li>
{/each}
</ul>