Skip to content

Commit 5bb876e

Browse files
agjohnsonagjohnson
authored
Fix blog templates (#201)
* Fix blog templates We did an original pass at the blog templates, but they needed clean up, fixes, and a better structure. I jumped in here so we could at least start experimenting with putting all our website content in one place. This won't be super usable until we decide to do something with our newsletter integration though. Some changes included here: - Clean up the article display template - Add category and tags to the display template - Clean up the listing template - Add category to the list template - Use a macro for article cards on listing page, instead of repeating content - Add category and tag listing templates, for linking to category pages and tag listing pages from the individual blog posts - Fix the RSS/Atom feeds, only output one item per feed to make our newletter integration work - Replace the default image with a generated SVG for now I'll put up a draft PR with some blog posts so this PR is more reviewable. * Lint and rebuild * Avoid html validate errors on blog posts
1 parent 610bdbe commit 5bb876e

File tree

11 files changed

+173
-136
lines changed

11 files changed

+173
-136
lines changed

‎.htmlvalidateignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,5 @@
11
# Unfinished pages
22
output/company/index.html
3+
4+
# Can have docutils output included, which includes lots of errors
5+
output/blog/**/*.html

‎content/images/posts/default.jpg‎

-1.88 MB
Binary file not shown.

‎content/images/posts/default.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎content/images/posts/test.jpg‎

-1.88 MB
Binary file not shown.

‎pelicanconf.py‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,10 @@
4141
PLUGINS = ['related_posts', 'jinja2content', 'readthedocs_theme.plugins.html_directive']
4242

4343
# Feed (RSS/Atom) settings
44+
FEED_DOMAIN = SITEURL
45+
FEED_RSS = FEED_RSS_URL = "blog/feed.rss"
46+
FEED_ATOM = FEED_ATOM_URL = "blog/atom.xml"
47+
FEED_MAX_ITEMS = 1
4448
FEED_ALL_ATOM = None
4549
CATEGORY_FEED_ATOM = None
4650
TRANSLATION_FEED_ATOM = None
@@ -69,8 +73,8 @@
6973
INDEX_SAVE_AS = 'blog/index.html'
7074
# URLs to skip, we don't use these templates yet, and probably don't need them.
7175
AUTHOR_URL = AUTHOR_SAVE_AS = ''
72-
CATEGORY_URL = CATEGORY_SAVE_AS = ''
73-
TAG_URL = TAG_SAVE_AS = ''
76+
CATEGORY_URL = CATEGORY_SAVE_AS = 'blog/category/{slug}.html'
77+
TAG_URL = TAG_SAVE_AS = 'blog/tag/{slug}.html'
7478
ARCHIVES_SAVE_AS = ''
7579
AUTHORS_SAVE_AS = ''
7680
CATEGORIES_SAVE_AS = ''

‎readthedocs_theme/static/css/site.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎readthedocs_theme/templates/article.html‎

Lines changed: 58 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,75 @@
11
{% extends "base.html" %}
22
{% block html_lang %}{{ article.lang }}{% endblock %}
33

4-
54
{% block title %}{{ article.title|striptags }} - {{ SITENAME }}{% endblock %}
65

7-
86
{% block content %}
7+
<section>
8+
<div class="ui very padded text container">
9+
10+
<div class="ui breadcrumb">
11+
<a class="section" href="/">Home</a>
12+
<div class="divider"> / </div>
13+
<a class="section" href="/blog/">Blog</a>
14+
<div class="divider"> / </div>
15+
{% if article.category %}
16+
<a class="section" href="/blog/category/{{ article.category.slug }}.html">{{ article.category }}</a>
17+
<div class="divider"> / </div>
18+
{% endif %}
19+
<div class="active section">{{ article.title }}</div>
20+
</div>
921

10-
11-
<!-- Article -->
12-
<section class="ui vertical segment padded" id="article">
13-
14-
<div class="ui container">
15-
<div class="ui grid centered">
16-
<div class="column twelve wide computer fourteen wide tablet sixteen wide mobile">
17-
18-
19-
<h1 class="ui header">
20-
<span class="ui header">{{ article.title }}</span>
21-
</h1>
22-
23-
<div class="ui basic vertical segment clearing">
24-
<div class="ui fitted divider"></div>
25-
<div class="ui basic vertical segment left floated">{% for author in article.authors %}{{ author }}{% if not loop.last %}, {% endif %}{% endfor %}</div>
26-
<div class="ui basic vertical segment right floated"><time datetime="{{ article.date.isoformat() }}">{{ article.locale_date }}</time></div>
27-
</div>
28-
29-
<img class="ui fluid image" src="{{ article.image or '/images/posts/default.jpg' }}" alt="{{ article.image_credit }}">
30-
{% if article.image and article.image_credit %}
31-
<div class="ui basic vertical segment center aligned">
32-
<p class="ui"><i>{{ article.image_credit}}</i></p>
22+
<div class="ui medium header">
23+
{{ article.title }}
24+
</div>
25+
26+
<div class="ui text menu">
27+
<time class="item" datetime="{{ article.date.isoformat() }}">{{ article.locale_date }}</time>
28+
29+
{% if article.tags %}
30+
<div class="item">
31+
<div class="ui dropdown" data-module="dropdown">
32+
<i class="fas fa-tag icon"></i>
33+
<i class="fas fa-caret-down icon"></i>
34+
<div class="menu">
35+
<div class="header">Tagged</div>
36+
{% for tag in article.tags %}
37+
<a class="item" href="/blog/tag/{{ tag.slug }}.html">
38+
<i class="fas fa-tag icon"></i>
39+
{{ tag }}
40+
</a>
41+
{% endfor %}
42+
</div>
3343
</div>
34-
{% endif %}
44+
</div>
45+
{% endif %}
3546

36-
<div class="ui basic vertical segment padded">
37-
{{ article.content }}
47+
<div class="right menu">
48+
<div class="item">
49+
{% for author in article.authors %}{{ author }}{% if not loop.last %}, {% endif %}{% endfor %}
3850
</div>
51+
</div>
52+
</div>
53+
54+
<div class="ui divider"></div>
3955

56+
<img class="ui big rounded centered image" src="{{ article.image or '/images/posts/default.svg' }}" alt="{{ article.image_credit }}">
57+
{% if article.image and article.image_credit %}
58+
<div class="ui basic center aligned segment">
59+
<p><i>{{ article.image_credit}}</i></p>
4060
</div>
61+
{% endif %}
4162

63+
<div class="ui basic padded docutils segment">
64+
{{ article.content }}
4265
</div>
43-
</div>
4466

45-
</section>
67+
<div class="ui basic paddded center aligned segment">
68+
<a href="/blog/" class="ui primary basic button">
69+
See more posts from our blog
70+
</a>
71+
</div>
4672

73+
</div>
74+
</section>
4775
{% endblock content %}

‎readthedocs_theme/templates/category.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{% extends "index.html" %}
2+
3+
{% block content_breadcrumbs %}
4+
<div class="ui breadcrumb">
5+
<a class="section" href="/">Home</a>
6+
<div class="divider"> / </div>
7+
<a class="section" href="/blog/">Blog</a>
8+
<div class="divider"> / </div>
9+
<div class="active section">{{ category }}</div>
10+
</div>
11+
{% endblock content_breadcrumbs %}
12+
13+
{% block content_title %}
14+
<div class="ui header">
15+
Blog posts filed under: {{ category }}
16+
</div>
17+
{% endblock %}

‎readthedocs_theme/templates/index.html‎

Lines changed: 67 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,107 +1,90 @@
11
{% extends "base.html" %}
22
{# This is the blog index, not the home page template #}
33

4+
{#
5+
In order to split up the rows into multiple sizes (2 column and 3 column) we
6+
use this macro for the redundant card definitions.
7+
#}
8+
{% macro article_card(article) %}
9+
<a class="ui card" href="/{{ article.url }}">
10+
<div class="image">
11+
<img src="{{ article.image or '/images/posts/default.svg'}}" alt="{{ article.image_credit }}">
12+
</div>
13+
<div class="content">
14+
<div class="header">{{ article.title }}</div>
15+
<div class="meta">
16+
<span class="date"><time datetime="{{ article.date.isoformat() }}">{{ article.locale_date }}</time></span>
17+
</div>
18+
<div class="description">
19+
{% if article.description %}
20+
{{ article.description|striptags|escape }}
21+
{% else %}
22+
{{ article.summary|striptags|escape }}
23+
{% endif %}
24+
</div>
25+
</div>
26+
<div class="extra content">
27+
<div class="right floated">
28+
{% for author in article.authors %}{{ author }}{% if not loop.last %}, {% endif %}{% endfor %}
29+
</div>
30+
<div class="left">
31+
{% if article.category %}
32+
<span class="ui secondary label">
33+
{{ article.category }}
34+
</span>
35+
{% endif %}
36+
</div>
37+
</div>
38+
</a>
39+
{% endmacro %}
440

541
{% block content %}
642

7-
<!-- Intro -->
8-
<section class="ui vertical segment" id="blog-intro">
9-
<div class="ui container">
10-
<div class="ui segment basic">
43+
<section>
44+
<div class="ui very padded container">
1145

12-
{% block content_title %}
13-
<div class="ui basic vertical big segment">
14-
<h1 class="ui header">
15-
<span class="ui header">Read the Docs Blog</span>
16-
</h1>
17-
<p>
18-
This is where we post all the week to week progress updates and announcements.
19-
</p>
20-
</div>
21-
{% endblock %}
46+
{% block content_breadcrumbs %}
47+
<div class="ui breadcrumb">
48+
<a class="section" href="/">Home</a>
49+
<div class="divider"> / </div>
50+
<div class="active section">Blog</div>
51+
</div>
52+
{% endblock content_breadcrumbs %}
2253

23-
</div>
54+
{% block content_title %}
55+
<div class="ui header">
56+
Latest blog posts
57+
</div>
58+
{% endblock content_title %}
2459
</div>
2560
</section>
2661

62+
<section>
63+
<div class="ui very padded container">
2764

28-
<section class="ui vertical segment" id="articles-list">
29-
<div class="ui container">
30-
<div class="ui segment basic">
31-
32-
<!-- Latest 2 articles -->
33-
<div class="ui two cards stackable">
34-
{% for article in articles_page.object_list %}
35-
{% if not articles_previous_page and loop.index <= 2 %}
36-
<a class="ui card" href="/{{ article.url }}">
37-
<div class="image">
38-
<img src="{{ article.image or '/images/posts/default.jpg'}}" alt="{{ article.image_credit }}">
39-
</div>
40-
<div class="content">
41-
<div class="header">{{ article.title }}</div>
42-
<div class="meta">
43-
<span class="date"><time datetime="{{ article.date.isoformat() }}">{{ article.locale_date }}</time></span>
44-
</div>
45-
<div class="description">
46-
{% if article.description %}
47-
{{ article.description|striptags|escape }}
48-
{% else %}
49-
{{ article.summary|striptags|escape }}
50-
{% endif %}
51-
</div>
52-
</div>
53-
<div class="extra content">
54-
<div>
55-
{% for author in article.authors %}{{ author }}{% if not loop.last %}, {% endif %}{% endfor %}
56-
</div>
57-
</div>
58-
</a>
59-
{% endif %}
60-
{% endfor %}
61-
</div>
62-
63-
<!-- Articles list -->
64-
<div class="ui three cards stackable">
65-
{% for article in articles_page.object_list %}
66-
{% if articles_previous_page or not loop.index <= 2 %}
67-
<a class="ui card" href="/{{ article.url }}">
68-
<div class="image">
69-
<img src="{{ article.image or '/images/posts/default.jpg' }}" alt="{{ article.image_credit }}">
70-
</div>
71-
<div class="content">
72-
<div class="header">{{ article.title }}</div>
73-
<div class="meta">
74-
<span class="date"><time datetime="{{ article.date.isoformat() }}">{{ article.locale_date }}</time></span>
75-
</div>
76-
<div class="description">
77-
{% if article.description %}
78-
{{ article.description|striptags|escape }}
79-
{% else %}
80-
{{ article.summary|striptags|escape }}
81-
{% endif %}
82-
</div>
83-
</div>
84-
<div class="extra content">
85-
<div>
86-
{% for author in article.authors %}{{ author }}{% if not loop.last %}, {% endif %}{% endfor %}
87-
</div>
88-
</div>
89-
</a>
90-
{% endif %}
91-
{% endfor %}
92-
</div>
65+
{# Latest two posts are large, use 2 columns #}
66+
<div class="ui two cards stackable">
67+
{% for article in articles_page.object_list[0:2] %}
68+
{{ article_card(article) }}
69+
{% endfor %}
70+
</div>
9371

72+
{# The remaining blog posts are smaller, use 3 columns #}
73+
<div class="ui three cards stackable">
74+
{% for article in articles_page.object_list[2:] %}
75+
{{ article_card(article) }}
76+
{% endfor %}
9477
</div>
78+
9579
</div>
9680
</section>
97-
98-
<section class="ui vertical segment">
99-
<div class="ui container">
81+
82+
<section>
83+
<div class="ui very padded container">
10084
{% if articles_page.has_other_pages() %}
10185
{% include 'includes/pagination.html' %}
10286
{% endif %}
10387
</div>
10488
</section>
10589

106-
10790
{% endblock content %}

‎readthedocs_theme/templates/tag.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{% extends "index.html" %}
2+
3+
{% block content_breadcrumbs %}
4+
<div class="ui breadcrumb">
5+
<a class="section" href="/">Home</a>
6+
<div class="divider"> / </div>
7+
<a class="section" href="/blog/">Blog</a>
8+
<div class="divider"> / </div>
9+
<div class="active section">Tag: {{ tag }}</div>
10+
</div>
11+
{% endblock content_breadcrumbs %}
12+
13+
{% block content_title %}
14+
<div class="ui header">
15+
Blog posts tagged: {{ tag }}
16+
</div>
17+
{% endblock %}

0 commit comments

Comments
 (0)