Adding author names in title of the main page (#239)

* adding author title

* adding author config variable

* correcting the config variable

* adding grammar when multiple names

* added documentation

* author font size

* changed config to mainpage_author_fontsize

* checking config keys

docs/configure.md

@@ -102,6 +102,22 @@ html_theme_options = {
 }
 ```
 
+## Add authors to your documentation
+
+If you'd like to add a list of authors to your documentation, you can do so with the following configuration:
+
+```python
+html_theme_options = {
+    ...
+    "authors": [
+        {"name": "author1", "url": "bio-link1"},
+        {"name": "author2", "url": "bio-link2"},
+    ]
+}
+```
+
+Authors with there bio links will be displayed just below the title of the page.
+
 ## Use plugins to add/extend features
 
 If you want some extra features in your documentation website or modify an existing one, you can add a list of plugins

src/quantecon_book_theme/assets/scripts/index.js

@@ -376,6 +376,41 @@ document.addEventListener("DOMContentLoaded", function () {
     );
   })();
 
+  /**
+   * Add authors to the heading of toc page
+   */
+  (function () {
+    const authors = document.getElementsByClassName(
+      "qe-page__header-authors",
+    )[0];
+    const fontSize = authors.getAttribute("font-size");
+    const h1 = document.querySelector(".main-index h1");
+
+    // check if its the main toc page
+    if (!h1) {
+      return;
+    }
+    // creating a p tag for styling and author links
+    const newParagraph = document.createElement("p");
+    newParagraph.setAttribute("id", "qe-page-author-links");
+    newParagraph.setAttribute(
+      "style",
+      fontSize ? `font-size: ${fontSize}px` : "",
+    );
+
+    //check if there are authors
+    const isAuthor =
+      authors &&
+      ((authors.querySelectorAll("a").length &&
+        authors.querySelectorAll("a")[0].innerText !== "") ||
+        authors.innerText !== "");
+    if (isAuthor) {
+      newParagraph.innerHTML = authors.innerHTML;
+    }
+    // insert p tag after h1, even if no authors for styling
+    h1.insertAdjacentElement("afterend", newParagraph);
+  })();
+
   // Intersection Observer for hiding 'Back To Top' when overlapping margins
   const Margin = document.getElementsByClassName("margin");
   const figCaption = document.querySelectorAll(

src/quantecon_book_theme/assets/styles/index.scss

@@ -303,6 +303,10 @@ h1 {
   font-weight: 900;
   font-size: 3rem;
   margin: 0 0 1rem 0;
+  p {
+    margin: 0.25rem 0 0;
+    font-size: 0.9rem;
+  }
 }
 
 h2 {
@@ -753,10 +757,14 @@ tt {
 
 .main-index {
   h1 {
+    font-weight: 700;
+    margin-bottom: 0px;
+    padding: 0 0 1rem 0;
+  }
+  #qe-page-author-links {
     border-bottom: 5px solid #0072bc;
     margin: 0 0 2rem 0;
     padding: 0 0 1rem 0;
-    font-weight: 700;
   }
 }
 

src/quantecon_book_theme/theme/quantecon_book_theme/layout.html

@@ -148,8 +148,23 @@
                         <p class="qe-page__header-subheading">{{ pagetitle | e }}</p>
 
                     </div>
+                    <!-- length 2, since its a string and empty dict has length 2 - {} -->
+                    {%- if theme_authors | length > 0 %}
+                        <p class="qe-page__header-authors" font-size="{{theme_mainpage_author_fontsize}}">
+                            {% for author in theme_authors %}
+                                {% if loop.last and theme_authors|length >= 2 %}
+                                    and <a href="{{ author.url }}" target="_blank"><span>{{ author.name }}</span></a>
+                                {% elif loop.first and theme_authors|length <= 2 %}
+                                    <a href="{{ author.url }}" target="_blank"><span>{{ author.name }}</span></a>
+                                {% else %}
+                                    <a href="{{ author.url }}" target="_blank"><span>{{ author.name }}</span></a>,
+                                {% endif %}
+                            {% endfor %}
+                        </p>
+                    {%- else %}
+                        <p class="qe-page__header-authors" font-size="{{theme_mainpage_author_fontsize}}">{{ author }}</p>
+                    {%- endif %}
 
-                    <p class="qe-page__header-authors">{{ author }}</p>
 
                 </div> <!-- .page__header -->
 

src/quantecon_book_theme/theme/quantecon_book_theme/theme.conf

@@ -29,3 +29,5 @@ twitter_logo_url =
 og_logo_url =
 persistent_sidebar = False
 dark_logo =
+authors =
+mainpage_author_fontsize = 18