added general notes reference app; bug 868525

mkt/ecosystem/templates/ecosystem/build_reference.html

@@ -72,6 +72,16 @@
           hunt down an alien bug and destroy it.
         {% endtrans -%}
       </p>
+      <h2>
+        <a href="{{ url('ecosystem.apps_documentation', page='generalnotes') }}">
+          {{- _('General Notes') }}</a>
+      </h2>
+      <p>
+        {%- trans %}
+          General Notes is a simple note app that allows you to sync local
+          and remote content.
+        {% endtrans -%}
+      </p>
     </article>
   </div>
 {% endblock %}

mkt/ecosystem/templates/ecosystem/macros.html

@@ -122,6 +122,14 @@
                      {% endif %}>
                     {{- _('Webfighter') }}</a>
                 </li>
+                <li>
+                  <a href="{{ url('ecosystem.apps_documentation',
+                     page='generalnotes') }}"
+                     {%- if section == 'generalnotes' %}
+                     class="selected"
+                     {% endif %}>
+                    {{- _('General Notes') }}</a>
+                </li>
               </ol>
             </li>
             <li>

mkt/ecosystem/templates/ecosystem/reference_apps/generalnotes.html

@@ -0,0 +1,131 @@
+{% extends 'ecosystem/reference_apps/app.html' %}
+{% from "ecosystem/macros.html" import navigation,
+        third_party_lib, web_api with context %}
+
+{% block title %}
+  {{ hub_page_title() }} | {{ _('General Notes') }}
+{% endblock %}
+
+{% block reference_title %}{{ _('General Notes') }}{% endblock %}
+
+{% block screenshots %}
+  <img class="current-screenshot"
+       src="{{ media('img/ecosystem/reference-apps/notes1.jpg') }}">
+  <ul id="screenshots">
+    <li>
+      <img src="{{ media('img/ecosystem/reference-apps/notes1.jpg') }}"
+           title="{{ _('Note Listing') }}"
+           alt="{{ _('Note Listing') }}">
+    </li>
+    <li>
+      <img src="{{ media('img/ecosystem/reference-apps/notes2.jpg') }}"
+           title="{{ _('Writing a New Note') }}"
+           alt="{{ _('Writing a New Note') }}">
+    </li>
+    <li>
+      <img src="{{ media('img/ecosystem/reference-apps/notes3.jpg') }}"
+           title="{{ _('Local Notes') }}"
+           alt="{{ _('Local Notes') }}">
+    </li>
+  </ul>
+{% endblock %}
+
+{% block app_description %}
+  <section>
+    {% trans walkthrough_link='https://hacks.mozilla.org/2013/05/building-a-notes-app-with-indexeddb-redis-and-node-js' %}
+      General Notes is a simple note app that allows you to sync local and
+      remote content.
+      <a href="{{ walkthrough_link }}"
+         class="walkthrough">
+         Read the full developer walkthrough
+      </a>
+    {% endtrans %}
+  </section>
+{% endblock %}
+
+{% block app_web_apis %}
+  <section>
+    <h2>{{ _('Web API Usage') }}</h2>
+    <ul>
+      <li>
+        {{ web_api('indexed_db') }}
+        <p>
+          {% trans %}
+            Stores local and remote notes on the client side.
+          {% endtrans %}
+        </p>
+      </li>
+      <li>
+        {{ web_api('appcache') }}
+        <p>
+          {% trans %}
+            Enables the page and functionality to work offline.
+          {% endtrans %}
+        </p>
+      </li>
+    </ul>
+  </section>
+{% endblock %}
+
+{% block app_third_party %}
+  <section>
+    <h2>{{ _('Third-party Libraries') }}</h2>
+    <ul>
+      <li>
+        {{ third_party_lib('node') }}
+        <p>
+          {% trans %}
+            Both server and client code are written in JavaScript.
+          {% endtrans %}
+        </p>
+      </li>
+      <li>
+        {{ third_party_lib('redis') }}
+        <p>
+          {% trans %}
+            A key-value store that contains all the server notes.
+          {% endtrans %}
+        </p>
+      </li>
+      <li>
+        {{ third_party_lib('jquery') }}
+        <p>
+          {% trans %}
+            Uses jQuery to simplify common tasks such as DOM manipulation.
+          {% endtrans %}
+        </p>
+      </li>
+      <li>
+        {{ third_party_lib('requirejs') }}
+        <p>
+          {% trans %}
+            Uses RequireJS to split JavaScript code into more easily
+            maintainable modules.
+          {% endtrans %}
+        </p>
+      </li>
+    </ul>
+  </section>
+{% endblock %}
+
+{% block app_code %}
+  <a href="https://github.com/ednapiranha/generalnotes/"
+     class="app-source button">{{ _('View Source') }}</a>
+  <a href="https://github.com/ednapiranha/generalnotes/archive/master.zip"
+     class="app-source button">{{ _('Download') }}</a>
+{% endblock %}
+
+{% block app_summary %}
+  <div class="summary">
+    {# L10N: This is the difficulty level of the app. #}
+    <h4>{{ _('Difficulty:') }} <span>{{ _('Medium') }}</span></h4>
+  </div>
+  <div class="summary">
+    <h4>{{ _('Code Breakdown') }}:</h4>
+    <ol>
+      <li>{{ _('81%') }} JavaScript</li>
+      <li>{{ _('14%') }} CSS</li>
+      <li>{{ _('5%') }} HTML</li>
+    </ol>
+  </div>
+{% endblock %}

mkt/ecosystem/views.py

@@ -494,7 +494,7 @@ def apps_documentation(request, page=None):
     """Page template for all reference apps."""
 
     if page not in ('chrono', 'face_value', 'podcasts', 'roller',
-                    'webfighter'):
+                    'webfighter', 'generalnotes'):
         raise Http404
 
     third_party_libs = {