Skip to content

Instantly share code, notes, and snippets.

@abdulsattar
Last active January 3, 2016 02:29
Show Gist options
  • Save abdulsattar/8395681 to your computer and use it in GitHub Desktop.
Save abdulsattar/8395681 to your computer and use it in GitHub Desktop.

Contact Manager

  1. Add new contacts. Should ask for name, email, phone number, address.
  2. List all contacts.(Display it prettily)
  3. Search all contacts and display if the search key matches anything (name/email/phone number/address). Display a serial number beside each search result.
  4. Edit a contact based on the serial number above.
  5. Delete a contact based on the serial number above.

Site Generator

This is a bit advanced than the previous one you did.

  1. 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
  1. Posts are those files in the "posts" directory. Pages are those files in the "pages" directory.
  2. 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
  1. As seen above, posts will have their file names in the yyyy-mm-dd-post-slug.html format. You need to create directories yyyy/mm/dd/post-slug/ and create a new file index.html in the directory with the content of the post.
  2. Similarly, pages will have their file names in the page.html format. You need to create a directory page/ and create a new file index.html with the content of the page.
  3. Layouts can contain several files with file.html as their filename. The index.html in layouts folder is special.
  4. 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>
  1. 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

  1. You should generate a new field called prettydate to display a better date output. If date=2014-01-01, prettydate=1st Jan, 2014.

  2. 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 no index.html in the end. Similar for pages. about.html will correspond to about/. Note, both of the urls end in /`.

  3. 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.

  4. Layouts can contain {{title}}{{date}}{{prettydate}} fields to insert. Same as previous excercise.

  5. 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment