view.ejs

<article class="package">
  <div class="details">
    <header>
      <section class="row">
        <section class="sixcol">
          <h1 class="row">
            <%= package.name %> / <%= package.version %>
            <% if (package.modified) { %>
            <small data-date="<%= package.modified.full %>">
              last updated <%= package.modified.ago %>
            </small>
            <% } %>

            <% if (package.created) { %>
            <small data-date="<%= package.created.full %>">
              created on <%= package.created.human %>
            </small>
            <% } %>
          </h1>

          <aside class="row">
            <div class="part">
              <% if (package.licenses) { %>
              <% package.licenses.forEach(function (license) { %>
              <% var info = licenses(license) %>
              <% if (info && info.url) { %><a href="<%= info.url %>" title="<%= info.full %>" target="_blank"><% } %>
              <strong><%= license %></strong>
              <% if (info && info.url) { %></a><% } %>
              <% }) %>
              <% } else { %>
              <strong>Unknown</strong>
              <% } %>
            </div>

            <div class="part">
              <s class="shift ss-icon ss-standard ss-star"></s>
              <%= (package.starred || []).length %>
            </div>

            <% if ('github' in locals && github) { %>
            <div class="part">
              <a class="stargazers" href="https://github.com/<%= package.github.user %>/<%= package.github.repo %>/stargazers" target="_blank">
                <s class="shift ss-icon ss-social-circle ss-octocat"></s>
                <%= github.stargazers_count || 0 %>
              </a>
            </div>
            <% } %>

            <% if (package.homepage || package.bugs) { %>
            <div class="part">
              <% if (package.homepage) { %>
              <a class="shift ss-icon ss-standard ss-home" href="<%= package.homepage.url %>" rel="nofollow" target="_blank"></a>
              <% } %>

              <% if (package.bugs) { %>
              <a class="shift ss-icon ss-standard ss-alert" href="<%= package.bugs.url %>" rel="nofollow" target="_blank"></a>
              <% } %>
            </div>
            <% } %>

          </aside>
        </section>

        <section class="sixcol last utility">
          <div class="row">
            <h3 class="twocol">Install</h3>
            <pre class="tencol last">npm install --save <%= package.name %></pre>
          </div>

          <% if (package.github) { %>
          <div class="row">
            <h3 class="twocol">Clone</h3>
            <pre class="tencol last">git clone git@github.com:<%= package.github.user %>/<%= package.github.repo %>.git</pre>
          </div>
          <% } %>
        </section>
      </section>
    </header>

    <section class="properties row">
      <div class="sixcol dependencies">
        <h2>
          <s class="ss-icon ss-standard ss-grid"></s>
          dependencies
          <% if (shrinkwrap.length > 5) { %>
          <small class="right">
            <% var url = dependenciesPagelet ? dependenciesPagelet +'/'+ package.name : '#/more-dependencies' %>
            <a href="<%= url %>" class="show-all" data-text="show less">
              show all <%= shrinkwrap.length %>
            </a>
          </small>
          <% } %>
        </h2>
        <% if (shrinkwrap.length) { var sub = false; %>
        <table class="more">
          <tbody>
            <% shrinkwrap.forEach(function (dependency, index) { %>
            <% if (dependenciesPagelet && (index >= 5 || dependency.depth !== 0)) return; %>
            <tr class="<%= index >= 5 ? ' gone' : '' %>">
              <td class="type">
                <% if (!index) { %>
                <abbr title="The module's main dependencies">main</abbr>
                <% } else if (dependency.depth !== 0 && !sub) { sub = true; %>
                <abbr title="Dependencies of dependencies">sub</abbr>
                <% } %>
              </td>
              <td>
                <s class="status<%= !(dependency.licenses || []).length ? ' missing' : '' %>">
                </s>
              </td>
              <td class="name">
                <a href="/package/<%= dependency.name %>"><%= dependency.name %></a>
              </td>
              <td class="version"><%= dependency.version %></td>
              <td class="license right">
                <% if (dependency.licenses) { %>
                  <%-
                    !(dependency.licenses || []).length ? 'Unknown' : dependency.licenses.map(function (license) {
                      var info = licenses(license);
                      return info && info.url
                        ? '<a href="'+ info.url +'" title="'+ info.full +'" target="_blank">'+ license +'</a>'
                        : license;
                    }).join(', ')
                  %>
                <% } else { %>
                  Unknown
                <% } %>
              </td>
            </tr>
            <% }) %>
          </tbody>
        </table>
        <% } else { %>
        <p class="row">No dependencies listed.</p>
        <% } %>
      </div>

      <div class="sixcol maintainers last">
        <h2>
          <s class="ss-icon ss-standard ss-users"></s>
          maintainers
          <% if (package.maintainers.length > 4) { %>
          <small class="right">
            <a href="#/more-maintainers" class="show-all" data-text="show less">
              +<%= package.maintainers.length - 4 %> more
            </a>
          </small>
          <% } %>
        </h2>
        <% if (package.maintainers.length) { %>
        <% package.maintainers.forEach(function (maintainer, index) { %>
        <div class="maintainer sixcol<%= index >= 4 ? ' gone' : '' %><%= index % 2 ? ' last' : '' %>">
          <% if (maintainer.gravatar) { %>
          <img src="<%= maintainer.gravatar %>?s=120" alt="<%= maintainer.name %>" class="gravatar">
          <% } %>
          <strong class="name"><%= maintainer.name %></strong>
        </div>
        <% });} else { %>
        <p class="row">No maintainers listed.</p>
        <% } %>
      </div>

      <div class="sixcol versions">
        <h2>
          <s class="ss-icon ss-standard ss-layers"></s>
          versions
          <% var n = Object.keys(package.releases).length; if (n > 5) { %>
          <small class="right">
            <a href="#/more-releases" class="show-all" data-text="show less">
              <%= n %> total
            </a>
          </small>
          <% } %>
        </h2>
        <% if (package.time && n) { %>
        <table class="more">
          <tbody>
            <% Object.keys(package.releases).forEach(function (version, i) { %>
            <tr class="<%= i >= 5 ? 'gone' : '' %>">
              <td class="version"><%= version %></td>
              <td class="date">
                <%= (package.time[version] || {}).ago || 'unknown' %>
              </td>
              <td class="releaser right">
                <%= (package.releases[version] || {}).name || 'anonymous' %>
              </td>
            </tr>
            <% }); %>
          </tbody>
        </table>
        <% } %>
      </div>
      
      <div class="sixcol downloads last">
        <div data-pagelet="sparklet" class="graph"></div>

        <%= stats.downloads %> Downloads yesterday.
      </div>
    </section>
  </div>

  <% if ('readme' in locals) { %>
  <section class="readme">
    <article class="row markdown">
      <div class="twocol last right icon">
        <h3>readme</h3>
        <s class="ss-icon ss-standard ss-file"></s>
      </div>
      <%- readme %>
    </article>
  </section>
  <% } %>
</article>

<!--
@TODO table of contents generation?
@TODO twitter and other profile information
@TODO description, current version, gravatar, release date.
-->