Ability to show list of latest news on the index page.

diff --git a/css/m-components.css b/css/m-components.css
index 64cf7f47d3e609e6ae456d9682e6ca254c585ff5..76f605affdbdae6b58911260297a186c13967902 100644 (file)
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -515,6 +515,21 @@ article#m-jumbo.m-inverted > header a:hover, article#m-jumbo.m-inverted > header
   color: #0f0f0f;
 }
 
+/* News list on landing pages */
+.m-landing-news h3 a {
+  color: var(--color);
+  text-decoration: none;
+  text-transform: var(--nav-heading-case);
+}
+.m-landing-news h3 a:hover, .m-landing-news h3 a:hover, .m-landing-news h3 a:focus, .m-landing-news h3 a:active {
+  color: var(--article-heading-color);
+}
+.m-landing-news time {
+  display: inline-block;
+  margin-left: 1rem;
+  float: right;
+}
+
 /* Article pagination */
 .m-article-pagination {
   text-align: center;

diff --git a/doc/css/page-layout.rst b/doc/css/page-layout.rst
index e8b84756923f2a8e6e73a6b34d557074d64bc5b2..968170414fa81a350033f4ae26a9edaa75049092 100644 (file)
--- a/doc/css/page-layout.rst
+++ b/doc/css/page-layout.rst
@@ -698,3 +698,44 @@ and save vertical space. For a tag cloud, mark the :html:`<ul>` with
             </ul>
           </div>
         </nav>
+
+`News list on index page`_
+--------------------------
+
+Sometimes you may want just a small list of news items tucked to the bottom of
+an index page that's otherwise full of other content. Mark a block with
+:css:`.m-landing-news` and put a list of articles in it. The :html:`<h3>` can
+be used to link to the blog front page; if you use the :html:`<time>` tag for
+specifying article dates, it will be aligned to the right. Example:
+
+.. code-figure::
+
+    .. code:: html
+
+        <div class="m-row">
+          <div class="m-col-m-8 m-push-m-2">
+            <div class="m-landing-news m-note m-default">
+              <h3><a href="#">Latest news on our blog &raquo;</a></h3>
+              <ul class="m-unstyled">
+                <li><time class="m-text m-dim" datetime="2018-01-16T00:00:00+00:00">Jan 16, 2018</time><a href="article2.html">The latest article</a></li>
+                <li><time class="m-text m-dim" datetime="2017-12-09T00:00:00+00:00">Dec 09, 2017</time><a href="article.html">A slightly older article</a></li>
+              </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+
+    .. raw:: html
+
+        <div class="m-row">
+          <div class="m-col-m-8 m-push-m-2">
+            <div class="m-landing-news m-note m-default">
+              <h3><a href="#">Latest news on our blog &raquo;</a></h3>
+              <ul class="m-unstyled">
+                <li><time class="m-text m-dim" datetime="2018-01-16T00:00:00+00:00">Jan 16, 2018</time><a href="article2.html">The latest article</a></li>
+                <li><time class="m-text m-dim" datetime="2017-12-09T00:00:00+00:00">Dec 09, 2017</time><a href="article.html">A slightly older article</a></li>
+              </ul>
+              </div>
+            </div>
+          </div>
+        </div>

diff --git a/doc/pelican/theme.rst b/doc/pelican/theme.rst
index 7baca8a951092157214b2375d1ea8547043774d3..dcaa5a03861d5270ae3d5cb493c2eb3830e3f593 100644 (file)
--- a/doc/pelican/theme.rst
+++ b/doc/pelican/theme.rst
@@ -495,6 +495,26 @@ above:
     both :rst:`:landing:` and :rst:`:header:` is present, :rst:`:header:` is
     ignored. However, it works as expected if just :rst:`:cover:` is present.
 
+`News on index page`_
+---------------------
+
+If you override the index page to a custom landing page, by default you lose
+the list of latest articles. That might cause the website to appear stale when
+you update just the blog. In order to fix that, it's possible to show a block
+with latest articles on the index page using the :py:`M_NEWS_ON_INDEX` setting.
+It's a tuple of :py:`(title, count)` where :py:`title` is the block header
+title that acts as a link to :py:`M_BLOG_URL` and :py:`count` is the max number
+of articles shown. Example configuration:
+
+.. code:: py
+
+    M_NEWS_ON_INDEX = ("Latest news on our blog", 3)
+
+.. note-success::
+
+    You can see how this block looks on the Magnum Engine main page:
+    http://magnum.graphics
+
 `(Social) meta tags for pages`_
 -------------------------------
 

diff --git a/pelican-theme/templates/page.html b/pelican-theme/templates/page.html
index 70972616bdf0aca7ec5282500a75aa3e65d649da..3250ace9cc2618061fa40c937eff683267fd948c 100644 (file)
--- a/pelican-theme/templates/page.html
+++ b/pelican-theme/templates/page.html
@@ -110,6 +110,20 @@
         {% endif %}
       </div>
     </div>
+    {% if page.save_as == 'index.html' and not page.url and M_NEWS_ON_INDEX %}
+    <div class="m-row">
+      <div class="m-col-l-8 m-push-l-2">
+        <div><div class="m-note m-default m-landing-news">
+          <h3><a href="{{ M_BLOG_URL|format_siteurl|e }}">{{ M_NEWS_ON_INDEX[0]|e }} &raquo;</a></h3>
+          <ul class="m-unstyled">
+            {% for article in articles[0:M_NEWS_ON_INDEX[1]] %}
+            <li><time class="m-text m-dim" datetime="{{ article.date.isoformat() }}">{{ article.locale_date }}</time><a href="{{ article.url }}">{{ article.title|e }}</a></li>
+            {% endfor %}
+          </ul>
+        </div>
+      </div></div>
+    </div>
+    {% endif %}
   </div>
 </article>
 {% if page.footer %}

diff --git a/pelican-theme/test/__init__.py b/pelican-theme/test/__init__.py
index 0106bf020455b735326595b7fbb7326533e20cfe..935e4285fb0f09dcbcc65c4a87140c1be06bf7b4 100644 (file)
--- a/pelican-theme/test/__init__.py
+++ b/pelican-theme/test/__init__.py
@@ -105,8 +105,8 @@ class BlogTestCase(BaseTestCase):
             'DATE_FORMATS': {'en': ('en_US.UTF-8', '%b %d, %Y')},
             'M_FINE_PRINT': None,
             'M_DISABLE_SOCIAL_META_TAGS': True,
-            'PAGE_PATHS': ['pages'], # doesn't exist
-            'ARTICLE_PATHS': ['.'],
+            'PAGE_PATHS': ['pages'], # doesn't exist, usually
+            'ARTICLE_PATHS': [''],
             'AUTHOR_SAVE_AS': 'author-{slug}.html',
             'AUTHOR_URL': 'author-{slug}.html',
             'CATEGORY_SAVE_AS': 'category-{slug}.html',

diff --git a/pelican-theme/test/blog_news_on_index/article.rst b/pelican-theme/test/blog_news_on_index/article.rst
new file mode 100644 (file)
index 0000000..ea8d0b9
--- /dev/null
+++ b/pelican-theme/test/blog_news_on_index/article.rst
@@ -0,0 +1,4 @@
+An article
+##########
+
+:date: 2017-12-09

diff --git a/pelican-theme/test/blog_news_on_index/article2.rst b/pelican-theme/test/blog_news_on_index/article2.rst
new file mode 100644 (file)
index 0000000..9d50d4a
--- /dev/null
+++ b/pelican-theme/test/blog_news_on_index/article2.rst
@@ -0,0 +1,4 @@
+Article with an especially elongated headline so it blows all the shit up in a totally bad way
+##############################################################################################
+
+:date: 2018-01-16

diff --git a/pelican-theme/test/blog_news_on_index/article3.rst b/pelican-theme/test/blog_news_on_index/article3.rst
new file mode 100644 (file)
index 0000000..75c7756
--- /dev/null
+++ b/pelican-theme/test/blog_news_on_index/article3.rst
@@ -0,0 +1,4 @@
+Article that's not shown
+########################
+
+:date: 2014-02-14

diff --git a/pelican-theme/test/blog_news_on_index/index.html b/pelican-theme/test/blog_news_on_index/index.html
new file mode 100644 (file)
index 0000000..2a094bf
--- /dev/null
+++ b/pelican-theme/test/blog_news_on_index/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Main page | A Pelican Blog</title>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,600i" />
+  <link rel="stylesheet" href="static/m-dark.css" />
+  <link rel="canonical" href="./" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+</head>
+<body>
+<header><nav id="navigation">
+  <div class="m-container">
+    <div class="m-row">
+      <a href="./" id="m-navbar-brand" class="m-col-t-9 m-col-m-none m-left-m">A Pelican Blog</a>
+    </div>
+  </div>
+</nav></header>
+<main>
+<article>
+  <div class="m-container m-container-inflatable">
+    <div class="m-row">
+      <div class="m-col-l-10 m-push-l-1">
+        <h1>Main page</h1>
+      </div>
+    </div>
+    <div class="m-row">
+      <div class="m-col-l-8 m-push-l-2">
+        <div><div class="m-note m-default m-landing-news">
+          <h3><a href="http://our.blog/">Latest rants on our blog &raquo;</a></h3>
+          <ul class="m-unstyled">
+            <li><time class="m-text m-dim" datetime="2018-01-16T00:00:00+00:00">Jan 16, 2018</time><a href="article2.html">Article with an especially elongated headline so it blows all the shit up in a totally bad way</a></li>
+            <li><time class="m-text m-dim" datetime="2017-12-09T00:00:00+00:00">Dec 09, 2017</time><a href="article.html">An article</a></li>
+          </ul>
+        </div>
+      </div></div>
+    </div>
+  </div>
+</article>
+</main>
+</body>
+</html>

diff --git a/pelican-theme/test/blog_news_on_index/pages/index.rst b/pelican-theme/test/blog_news_on_index/pages/index.rst
new file mode 100644 (file)
index 0000000..8253076
--- /dev/null
+++ b/pelican-theme/test/blog_news_on_index/pages/index.rst
@@ -0,0 +1,5 @@
+Main page
+#########
+
+:save_as: index.html
+:url:

diff --git a/pelican-theme/test/test_blog.py b/pelican-theme/test/test_blog.py
index 4fede2a821c029e2d67772d7624b66241b1250b1..bc50131c1ef6a920e16eb1adfecbb11d35b3c15f 100644 (file)
--- a/pelican-theme/test/test_blog.py
+++ b/pelican-theme/test/test_blog.py
@@ -525,3 +525,15 @@ class GlobalFavicon(BlogTestCase):
         })
 
         self.assertEqual(*self.actual_expected_contents('index.html'))
+
+class NewsOnIndex(BlogTestCase):
+    def __init__(self, *args, **kwargs):
+        super().__init__(__file__, 'news_on_index', *args, **kwargs)
+
+    def test(self):
+        self.run_pelican({
+            'M_BLOG_URL': 'http://our.blog/',
+            'M_NEWS_ON_INDEX': ("Latest rants on our blog", 2)
+        })
+
+        self.assertEqual(*self.actual_expected_contents('index.html'))