Start styling the npm pages

gratipay · Oct 20, 2016 · 96d89b9 · 96d89b9
1 parent 35b5cbb
commit 96d89b9
Show file tree

Hide file tree

Showing 5 changed files with 211 additions and 8 deletions.
diff --git a/scss/pages/on-npm-foo.scss b/scss/pages/on-npm-foo.scss
@@ -0,0 +1,2 @@
+#on-npm-foo {
+}
diff --git a/www/assets/gratipay.css.spt b/www/assets/gratipay.css.spt
@@ -67,5 +67,6 @@
 @import "scss/pages/giving";
 @import "scss/pages/settings";
 @import "scss/pages/on-confirm";
+@import "scss/pages/on-npm-foo";
 @import "scss/pages/search";
 @import "scss/pages/hall-of-fame";
diff --git a/www/assets/npm-n.png b/www/assets/npm-n.png
diff --git a/www/assets/npm-wombat-typing.svg b/www/assets/npm-wombat-typing.svg
diff --git a/www/on/npm/%package/index.html.spt b/www/on/npm/%package/index.html.spt
@@ -7,15 +7,21 @@ package_name = request.path['package']
 r = requests.get('https://registry.npmjs.com/{}'.format(package_name))
 if r.status_code != 200:
     raise Response(r.status_code)
-readme = markdown.render(r.json()['readme'])
-title = package_name
-suppress_sidebar = True
+package = r.json()
+readme = markdown.render(package['readme'])
+banner = package_name
+page_id = "on-npm-foo"
 [---]
 {% extends "templates/base.html" %}
-{% block content %}
-
-{{ readme }}
-
-No it's not.
 
+{% block banner %}
+<a class="elsewhere" href="https://npmjs.com/package/{{ package['name'] }}">
+    <div class="avatar">
+        <img src="{{ website.asset('npm-wombat-typing.svg') }}" class="avatar">
+        <img class="platform" src="{{ website.asset('npm-n.png') }}" />
+    </div>
+    {{ super () }}
+</a>
 {% endblock %}
+
+{% block content %}{{ readme }}{% endblock %}