blog: Refactor the index page

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/Makefile.am b/Makefile.am
index 9ebe2409cd59436f429812c731181d5ec07a4991..c13a9f9d410a0a29e5a0be721cea988ba72268e1 100644 (file)
--- a/Makefile.am
+++ b/Makefile.am
@@ -186,7 +186,8 @@ templates_blog_messagesdir = $(templates_blogdir)/messages
 
 templates_blog_modules_DATA = \
        src/templates/blog/modules/history-navigation.html \
-       src/templates/blog/modules/list.html
+       src/templates/blog/modules/list.html \
+       src/templates/blog/modules/tag.html
 
 templates_blog_modulesdir = $(templates_blogdir)/modules
 

diff --git a/src/backend/blog.py b/src/backend/blog.py
index 597b6308e454c52cba7d1d46cba081163169d85e..1f3ee13e92ee5a3de6c94947f52806801907a925 100644 (file)
--- a/src/backend/blog.py
+++ b/src/backend/blog.py
@@ -307,7 +307,7 @@ class Post(misc.Object):
 
        @property
        def excerpt(self):
-               paragraphs = self.plaintext.split("\n\n")
+               paragraphs = self.text.replace("\r", "").split("\n\n")
 
                excerpt = []
 

diff --git a/src/templates/blog/index.html b/src/templates/blog/index.html
index 71d165301b4df04531e9a2524cd60045d2f8ae49..2f336fbed9b0aeac60be55c1160be45e9b5521dd 100644 (file)
--- a/src/templates/blog/index.html
+++ b/src/templates/blog/index.html
@@ -13,27 +13,20 @@
 {% end %}
 
 {% block container %}
-       <section class="hero is-primary">
+       <section class="hero is-medium">
                <div class="hero-body">
                        <div class="container">
-                               <nav class="breadcrumb" aria-label="breadcrumbs">
-                                       <ul>
-                                               <li>
-                                                       <a href="/">{{ _("Home") }}</a>
-                                               </li>
-                                               <li class="is-active">
-                                                       <a href="#" aria-current="page">{{ _("Blog") }}</a>
-                                               </li>
-                                       </ul>
-                               </nav>
+                               <h1 class="title">
+                                       IPFire <span class="has-text-primary">Blog</span>
+                               </h1>
 
-                               <h1 class="title">{{ _("IPFire Blog") }}</h1>
-
-                               {% if q %}
-                                       <h6 class="subtitle">
+                               <h5 class="subtitle is-5">
+                                       {% if q %}
                                                {{ _("Search Results for '%s'") % q }}
-                                       </h6>
-                               {% end %}
+                                       {% else %}
+                                               Releases, security updates, and stories from the IPFire community
+                                       {% end %}
+                               </h5>
                        </div>
                </div>
        </section>
@@ -41,35 +34,17 @@
        <section class="section">
                <div class="container">
                        <div class="columns">
-                               <div class="column is-8">
-                                       {% if latest_post %}
-                                               <div class="notification">
-                                                       <h4 class="title is-4">
-                                                               <a href="/blog/{{ latest_post.slug }}">
-                                                                       {{ _("Latest: %s") % latest_post.title }}
-                                                               </a>
-                                                       </h4>
-
-                                                       <div class="content">
-                                                               {{ latest_post.excerpt }}
-                                                       </div>
-
-                                                       <p>
-                                                               <a href="/blog/{{ latest_post.slug }}">{{ _("Read More") }}</a>
-                                                       </p>
-                                               </div>
-                                       {% end %}
-
+                               <div class="column">
                                        {% if q and not posts %}
                                                <div class="notification">
                                                        {{ _("No Results Found For '%s'") % q }}
                                                </div>
                                        {% end %}
 
-                                       {% module BlogList(posts, relative=True) %}
+                                       {% module BlogList(posts, latest=latest_post) %}
                                </div>
 
-                               <div class="column is-4">
+                               <div class="column is-one-quarter">
                                        {# Show a button to sign up for anonymous users #}
                                        {% if not current_user %}
                                                <div class="block">

diff --git a/src/templates/blog/modules/history-navigation.html b/src/templates/blog/modules/history-navigation.html
index 0d82502c0095b5e8251b674866dc54860e4a28f8..fce3dee296bcde6b699c4805022bd6a45b40048e 100644 (file)
--- a/src/templates/blog/modules/history-navigation.html
+++ b/src/templates/blog/modules/history-navigation.html
@@ -1,13 +1,23 @@
-<div class="level">
-       <div class="level-left">
-               <div class="level-item">
-                       {{ _("Archive") }}
-               </div>
+<div class="dropdown is-up">
+       <div class="dropdown-trigger">
+               <button class="button" aria-haspopup="true" aria-controls="blog-archive">
+                       <span>
+                               {{ _("Archive") }}
+                       </span>
+
+                       <span class="icon is-small">
+                               <i class="fas fa-angle-up" aria-hidden="true"></i>
+                       </span>
+               </button>
+       </div>
 
-               {% for year in years %}
-                       <div class="level-item">
-                               <a href="/blog/years/{{ year }}">{{ year }}</a>
-                       </div>
-               {% end %}
+       <div class="dropdown-menu" id="blog-archive" role="menu">
+               <div class="dropdown-content">
+                       {% for year in years %}
+                               <a href="/blog/years/{{ year }}" class="dropdown-item">
+                                       {{ year }}
+                               </a>
+                       {% end %}
+               </div>
        </div>
 </div>

diff --git a/src/templates/blog/modules/list.html b/src/templates/blog/modules/list.html
index 33ba7bf8649ae0418386ea2d9356137c70a9c888..99e8fa66c532ffc06f20fe27b3625d28e33dbecc 100644 (file)
--- a/src/templates/blog/modules/list.html
+++ b/src/templates/blog/modules/list.html
@@ -1,23 +1,80 @@
 {% for post in posts %}
-       <p>
-               <h5 class="title is-5">
-                       <a {% if "lightningwirelabs.com" in post.tags %}class="has-text-lwl"{% end %} href="/blog/{{ post.slug }}">
-                               {{ post.title }}
-                       </a>
-               </h5>
-
-               <h6 class="subtitle is-6">
-                       {% if post.published_at %}
-                               {{ locale.format_date(post.published_at, shorter=True, relative=relative) }}
-                       {% elif post.created_at %}
-                               {{ _("Created %s") % locale.format_date(post.created_at, shorter=True, relative=True) }}
-                       {% end %}
+       {# Highlight the latest post #}
+       {% set highlighted = (post == latest) %}
 
-                       {% if "lightningwirelabs.com" in post.tags %}
-                               <span class="has-text-lwl">{{ _("by Lightning Wire Labs") }}</span>
-                       {% elif show_author and post.author %}
-                               <a href="/users/{{ post.author.uid }}">{{ _("by %s") % post.author }}</a>
+       <article class="media">
+               <div class="media-content">
+                       {% if highlighted %}
+                               <p class="heading has-text-primary">
+                                       {{ _("Latest Post") }}
+                               </p>
+                       {% else %}
+                               {% module BlogTag(post) %}
                        {% end %}
-               </h6>
-       </p>
+
+                       <div class="level">
+                               <div class="level-left">
+                                       <div class="level-item">
+                                               <p class="title {% if highlighted %}is-3{% else %}is-4{% end %}">
+                                                       <a {% if "lightningwirelabs.com" in post.tags %}class="has-text-lwl"{% end %} href="/blog/{{ post.slug }}">
+                                                               {{ post.title }}
+                                                       </a>
+                                               </p>
+                                       </div>
+                               </div>
+
+                               {% if not highlighted and post.published_at %}
+                                       <div class="level-right">
+                                               <div class="level-item has-text-grey">
+                                                       <small>
+                                                               {{ locale.format_date(post.published_at, shorter=True, relative=False) }}
+                                                       </small>
+                                               </div>
+                                       </div>
+                               {% end %}
+                       </div>
+
+                       <div class="content">
+                               {% module Markdown(post.excerpt) %}
+                       </div>
+
+                       <div class="level">
+                               <div class="level-left">
+                                       <div class="level-item">
+                                               <small>
+                                                       {% if "lightningwirelabs.com" in post.tags %}
+                                                               <span class="has-text-lwl">
+                                                                       {{ _("by Lightning Wire Labs") }}
+                                                               </span>
+                                                       {% elif show_author and post.author %}
+                                                               <span class="icon-text">
+                                                                       <span class="icon">
+                                                                               {% module Avatar(post.author, size=24) %}
+                                                                       </span>
+
+                                                                       <a href="/users/{{ post.author.uid }}">
+                                                                               {{ post.author }}
+                                                                       </a>
+                                                               </span>
+                                                       {% end %}
+                                               </small>
+                                       </div>
+
+                                       {% if highlighted %}
+                                               {% if post.published_at %}
+                                                       <div class="level-item">
+                                                               <small>
+                                                                       {{ locale.format_date(post.published_at, shorter=True, relative=True) }}
+                                                               </small>
+                                                       </div>
+                                               {% end %}
+
+                                               <div class="level-item">
+                                                       {% module BlogTag(post) %}
+                                               </div>
+                                       {% end %}
+                               </div>
+                       </div>
+               </div>
+       </article>
 {% end %}

diff --git a/src/templates/blog/modules/tag.html b/src/templates/blog/modules/tag.html
new file mode 100644 (file)
index 0000000..4da796d
--- /dev/null
+++ b/src/templates/blog/modules/tag.html
@@ -0,0 +1,19 @@
+<div class="tags">
+       {% if "release" in post.tags %}
+               <span class="tag is-success">
+                       {{ _("Release") }}
+               </span>
+       {% elif "testing" in post.tags %}
+               <span class="tag is-warning">
+                       {{ _("Testing") }}
+               </span>
+       {% elif "security" in post.tags %}
+               <span class="tag is-danger">
+                       {{ _("Security") }}
+               </span>
+       {% elif "community" in post.tags %}
+               <span class="tag is-info">
+                       {{ _("Community") }}
+               </span>
+       {% end %}
+</div>

diff --git a/src/web/__init__.py b/src/web/__init__.py
index c89b1efbae89a6f7b5f3156b1ed7abde7c89e378..2397379bc7a3332256871945e1821f5a9e9a1d80 100644 (file)
--- a/src/web/__init__.py
+++ b/src/web/__init__.py
@@ -78,6 +78,7 @@ class Application(tornado.web.Application):
                                # Blog
                                "BlogHistoryNavigation": blog.HistoryNavigationModule,
                                "BlogList"             : blog.ListModule,
+                               "BlogTag"              : blog.TagModule,
 
                                # Boot
                                "BootMenuConfig"       : boot.MenuConfigModule,

diff --git a/src/web/blog.py b/src/web/blog.py
index 9c2bb07189f86878585f977d75226b2882576d0b..453de7d27d45da4bc6bdfec8071a6c05fdefab97 100644 (file)
--- a/src/web/blog.py
+++ b/src/web/blog.py
@@ -24,7 +24,8 @@ class IndexHandler(base.AnalyticsMixin, base.BaseHandler):
                        posts = self.backend.blog.get_newest(limit=10)
 
                        # Extract the latest post
-                       latest_post = posts.pop(0)
+                       if posts:
+                               latest_post = posts[0]
 
                self.render("blog/index.html", q=q, posts=posts, latest_post=latest_post)
 
@@ -237,6 +238,11 @@ class HistoryNavigationModule(ui_modules.UIModule):
 
 
 class ListModule(ui_modules.UIModule):
-       def render(self, posts, relative=False, show_author=True):
+       def render(self, posts, latest=None, show_author=True):
                return self.render_string("blog/modules/list.html",
-                       posts=posts, relative=relative, show_author=show_author)
+                       posts=posts, latest=latest, show_author=show_author)
+
+
+class TagModule(ui_modules.UIModule):
+       def render(self, post):
+               return self.render_string("blog/modules/tag.html", post=post)