Added author box & prev next navigation (#130,#232)

.gitignore

@@ -2,3 +2,5 @@ env/
 *.log
 *.pyc
 **/.DS_Store
+src/templates/en/2019/chapters/
+src/templates/ja/2019/chapters/

src/.gitignore

@@ -1,4 +1,6 @@
 .idea/
 .vscode/
 venv
-env
+env
+src/templates/en/2019/chapters/*
+src/templates/ja/2019/chapters/*

src/config/2019.json

@@ -190,6 +190,58 @@
         "authors",
         "developers"
       ]
+    },
+    "tomayac": {
+      "name": "Tomas",
+      "tagline": "Web Almanac PM",
+      "github": "rviscomi",
+      "teams": [
+        "authors",
+        "developers"
+      ]
+    },
+    "jeffposnick": {
+      "name": "Jeff Posnick",
+      "tagline": "Web Almanac PM",
+      "github": "rviscomi",
+      "twitter": "rick_viscomi",
+      "teams": [
+        "authors",
+        "developers"
+      ]
+    },
+    "addyosmani": {
+      "name": "Addy Osmani",
+      "tagline": "Developer Advocate Google",
+      "gravatar": "[email protected]",
+      "github": "rviscomi",
+      "twitter": "rick_viscomi",
+      "teams": [
+        "authors",
+        "developers"
+      ]
+    },
+    "housseindjirdeh": {
+      "name": "Jeff Posnick",
+      "tagline": "Developer Advocate Google",
+      "gravatar": "[email protected]",
+      "github": "rviscomi",
+      "twitter": "rick_viscomi",
+      "teams": [
+        "authors",
+        "developers"
+      ]
+    },
+    "mathiasbynens": {
+      "name": "Mathias Bynens",
+      "tagline": "Web Almanac PM",
+      "gravatar": "[email protected]",
+      "github": "rviscomi",
+      "twitter": "rick_viscomi",
+      "teams": [
+        "authors",
+        "developers"
+      ]
     }
   }
 }

src/content/en/2019/markup.md

@@ -1,3 +1,11 @@
+---
+part_number: I
+chapter_number: 3
+title: Markup
+description: Markup
+hero_image: ''
+authors: [rviscomi, zeman]
+---
 (( chapter image ))
 
 In 2005, Ian "Hixie" Hickson posted [some analysis of markup data](https://web.archive.org/web/20060203035414/http://code.google.com/webstats/index.html)  building upon various previous work. Much of this work aimed to investigate class names to see if there were common informal semantics that were being adopted by developers which it might make sense to standardize upon.  Some of this research helped inform new elements in HTML5.

src/generate_chapters.py

@@ -4,6 +4,8 @@
 from mistune_contrib.toc import TocMixin
 import yaml
 from visualisation_lexer import VisualisationLexer
+import config as config_util
+import jinja2
 
 class TocRenderer(TocMixin, mistune.Renderer):
 
@@ -71,7 +73,6 @@ def generate_chapters():
                 print('\n Generating chapter: %s, %s, %s' % (chapter, year, language))
 
                 (metadata, body, tochtml) = parse_file(chapter_file)
-
                 write_template(language, year, chapter, metadata, body, tochtml)
 
 
@@ -96,6 +97,19 @@ def parse_file(chapter_file):
     tochtml=toc.render_toc(level=2)
     return (metadata, body, tochtml)
 
+def generate_author_html(lang,year, metadata):
+    config = config_util.get_config(year)
+    authors = []
+    for userid in metadata['authors']:
+        author = config['contributors'].get(userid)
+        if author is not None:
+            authors.append(author)  
+
+    return jinja2.Environment(
+        loader=jinja2.FileSystemLoader('templates')
+    ).get_template('%s/%s/chapter_author.html' % (lang, year)).render(authors=authors)
+
+
 def write_template(language, year, chapter, metadata, body, tochtml):
     template_path = 'templates/%s/%s/chapter.html' % (language, year)
 
@@ -104,8 +118,11 @@ def write_template(language, year, chapter, metadata, body, tochtml):
 
     path = 'templates/%s/%s/chapters/%s.html' % (language, year, chapter)
 
+
+    authors = generate_author_html(language, year, metadata)
+    prevnext = generate_prevnext_html(language, year, metadata['chapter_number'])
     with open(path, 'w') as file_to_write:
-        file_to_write.write(template.format(body=body, metadata=metadata,toc=tochtml))
+        file_to_write.write(template.format(body=body, metadata=metadata, toc=tochtml, authors=authors, prevnext=prevnext))
         print(' - Output file size: %s' % size_of(file_to_write.tell()))
 
 
@@ -117,4 +134,27 @@ def size_of(num, suffix='B'):
     return "%.1f%s%s" % (num, 'Yi', suffix)
 
 
-generate_chapters()
+def generate_prevnext_html(lang,year,chapter_no):
+    config = config_util.get_config(year)
+    chapter_no = str(chapter_no)
+    prev_chapter = False
+    next_chapter = False
+    found =  False
+
+    for part in config['outline']:
+        for chapter in part['chapters']:
+            if found:
+                next_chapter = chapter
+                break
+            elif chapter['chapter'] == chapter_no:
+                found = True
+            else:
+                prev_chapter = chapter
+        if(found):
+            break
+
+    return jinja2.Environment(
+        loader=jinja2.FileSystemLoader('templates')
+    ).get_template('%s/%s/chapter_prevnext.html' % (lang, year)).render(lang=lang, year=year, prev_chapter=prev_chapter,next_chapter=next_chapter)
+
+generate_chapters()

src/static/css/page.css

@@ -132,6 +132,104 @@
   border: 1px solid #1A2B490A;
 }
 
+.authors h4{
+  padding: 16px 0;
+}
+.authors,.authors h4{
+  border-bottom: 1px solid #1A2B490A;
+}
+.authors ul{
+  margin:16px 0;
+  padding:0;
+}
+
+.authors li::before{
+  content:none;
+  width: 0;
+  margin-left: 0;
+}
+
+.authors li{
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  margin-top: 32px;
+  overflow: visible;
+  display: grid;
+  grid-template-areas: 'avatar info';
+  grid-template-columns: 76px auto;
+}
+.authors .name{
+  font-size: 24px;
+}
+
+.authors .tagline{
+  font-size: 18px;
+}
+
+.authors .avatar{
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+}
+
+.authors .social img{
+  width: 24px;
+  height: 24px;
+  display: inline-block;
+  margin-left: 16px;
+  vertical-align: middle;
+}
+
+#chapter-navigation{
+  padding:50px 36px;
+  border:1px solid #1A2B490A;
+  margin: 20px 0;
+}
+
+#chapter-navigation>a{
+  color:#1A2B49;
+  width:50%;
+  display:inline-block;
+  position:relative;
+}
+
+#chapter-navigation span{
+  display:block;
+}
+
+#chapter-navigation .chapter-no{
+  font-size:22px;
+  font-weight:bold;
+  font-style: italic
+}
+
+#chapter-navigation .chapter-title{
+  font-size:18px;
+}
+
+#chapter-navigation .arrow{
+  font-size:24px;
+  top:12px;
+}
+
+#previous-chapter .arrow{
+  transform: rotate(-90deg);
+  position:absolute;
+  left:-24px;
+}
+
+#next-chapter{
+  text-align:right;
+  float:right;
+}
+
+#next-chapter .arrow{
+  transform: rotate(90deg);
+  position:absolute;
+  right:-24px;
+}
+
 @media (max-width: 900px) {
   .main {
     padding: 0;

src/templates/en/2019/chapter.html

@@ -22,7 +22,16 @@ <h2 class="header-mobile">Index</h2>
         </nav>
  <section class="content">
     {body}
+    <div class="authors">
+        <h4>Authors :</h4>
+        <ul>
+                {authors}
+        </ul>
+    </div>
+
  </section>
+ {prevnext}
 </article>
+
 {{% endblock %}}
 

src/templates/en/2019/chapter_author.html

@@ -0,0 +1,24 @@
+{% for author in authors %}
+    <li>
+        <img class="avatar" alt="Author name" src="{{ author.avatar_url }}">
+        <div class="info">
+            <span class="name">{{ author.name }}</span>
+            {% if author.twitter or author.github %}
+                <span class="social">
+                {% if author.twitter %}
+                <a class="twitter" href="https://twitter.com/{{ author.twitter }}"><img src="/static/images/twitter.png" alt="@{{ author.twitter }} on Twitter"></a>
+                {% endif %}
+                {% if author.github %}
+                <a class="github" href="https://github.com/{{ author.github }}"><img src="/static/images/github.png" alt="{{ author.github }}@ on GitHub"></a>
+                {% endif %}
+                </span>
+            {% endif %}
+            {% if author.tagline %}
+                <div class="tagline">
+                    {{ author.tagline }}
+                </div>
+            {% endif %}
+        </div>
+
+    </li>
+{% endfor %}

src/templates/en/2019/chapter_prevnext.html

@@ -0,0 +1,25 @@
+<nav id="chapter-navigation">
+    {% if prev_chapter %}
+        <a id="previous-chapter" href="/{{lang}}/{{year}}/{{prev_chapter['title'].lower().replace(' ', '-').replace('/', '')}}">
+            <span class="arrow">&#8963;</span>
+            <span class="chapter-no">
+                Chapter {{ prev_chapter['chapter'] }}
+            </span>
+            <span class="chapter-title">
+                {{ prev_chapter['title'] }}
+            </span>
+        </a>
+    {% endif %}
+
+    {% if next_chapter %}
+        <a id="next-chapter" href="/{{lang}}/{{year}}/{{next_chapter['title'].lower().replace(' ', '-').replace('/', '')}}">
+                <span class="arrow">&#8963;</span>
+                <span class="chapter-no">
+                    Chapter {{ next_chapter['chapter'] }}
+                </span>
+                <span class="chapter-title">
+                    {{ next_chapter['title'] }}
+                </span>
+        </a>
+    {% endif %}
+</nav>

src/templates/ja/2019/chapter_author.html

@@ -0,0 +1,24 @@
+{% for author in authors %}
+    <li>
+        <img class="avatar" alt="Author name" src="{{ author.avatar_url }}">
+        <div class="info">
+            <span class="name">{{ author.name }}</span>
+            {% if author.twitter or author.github %}
+                <span class="social">
+                {% if author.twitter %}
+                <a class="twitter" href="https://twitter.com/{{ author.twitter }}"><img src="/static/images/twitter.png" alt="@{{ author.twitter }} on Twitter"></a>
+                {% endif %}
+                {% if author.github %}
+                <a class="github" href="https://github.com/{{ author.github }}"><img src="/static/images/github.png" alt="{{ author.github }}@ on GitHub"></a>
+                {% endif %}
+                </span>
+            {% endif %}
+            {% if author.tagline %}
+                <div class="tagline">
+                    {{ author.tagline }}
+                </div>
+            {% endif %}
+        </div>
+
+    </li>
+{% endfor %}

src/templates/ja/2019/chapter_prevnext.html

@@ -0,0 +1,25 @@
+<nav id="chapter-navigation">
+        {% if prev_chapter %}
+            <a id="previous-chapter" href="/{{lang}}/{{year}}/{{prev_chapter['title'].lower().replace(' ', '-').replace('/', '')}}">
+                <span class="arrow">&#8963;</span>
+                <span class="chapter-no">
+                    Chapter {{ prev_chapter['chapter'] }}
+                </span>
+                <span class="chapter-title">
+                    {{ prev_chapter['title'] }}
+                </span>
+            </a>
+        {% endif %}
+
+        {% if next_chapter %}
+            <a id="next-chapter" href="/{{lang}}/{{year}}/{{next_chapter['title'].lower().replace(' ', '-').replace('/', '')}}">
+                    <span class="arrow">&#8963;</span>
+                    <span class="chapter-no">
+                        Chapter {{ next_chapter['chapter'] }}
+                    </span>
+                    <span class="chapter-title">
+                        {{ next_chapter['title'] }}
+                    </span>
+            </a>
+        {% endif %}
+    </nav>