Skip to content

Commit 5b288c7

Browse files
gminngminn
authored
feat(mad): add top posts section to homepage and aside (#601)
### Summary Readers can now see the most popular posts on the homepage. Additionally, navigation is now available in the sidebar to jump to the latest or top posts. A few changes accompanied this feature: - Remove events and sandbox demo from sidebar to make room for new nav - Replace Try Memfault with Explore Memfault in the footer "About Memfault" with a link to the sandbox. Most readers are more likely to look at the sandbox than fill out a form - Add "by memfault" section to the aside in the post page Improvements for the future: - Add more cover images for posts -- you'll notice that some of the older popular posts have them and they look awesome! - Make a separate page for top posts. Currently this only exisits on the homepage - Scrape cloudflare dynamically for top posts instead of the current static list ### Test Plan - [x] Check blog links in new Top Posts section work - [x] Check links in aside work in homepage - [x] Check links in aside work in post page
1 parent 67fb575 commit 5b288c7

File tree

7 files changed

+104
-43
lines changed

7 files changed

+104
-43
lines changed

‎_data/top_posts.yml‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Top Posts List
2+
# Add post filenames here (without .md extension) to mark them as top posts
3+
# Ordered by publication date (oldest to newest)
4+
posts:
5+
- "2019-07-09-get-the-most-out-of-the-linker-map-file"
6+
- "2019-08-13-how-to-write-a-bootloader-from-scratch"
7+
- "2019-09-04-arm-cortex-m-exceptions-and-nvic"
8+
- "2019-10-08-unit-testing-basics"
9+
- "2019-10-22-best-and-worst-gcc-clang-compiler-flags"
10+
- "2019-10-30-cortex-m-rtos-context-switching"
11+
- "2019-11-20-cortex-m-hardfault-debug"
12+
- "2020-02-18-firmware-watchdog-best-practices"
13+
- "2020-03-23-intro-to-renode"
14+
- "2023-08-09-a-modern-c-dev-env"

‎_includes/by-memfault.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<div class="memfault-info-wrapper">
2+
<p>
3+
<img class="mf-icon" src="{% img_url memfault-logo.png %}" />
4+
Brought to you with <span style="font-size: 10px;">❤️</span> by Memfault.
5+
<br/>
6+
<a href="https://memfault.com/">
7+
Learn more
8+
<img class="chevron-icon" src="{% img_url chevron-right.svg %}" />
9+
</a>
10+
</p>
11+
</div>

‎_includes/posts-nav.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<div class="memfault-info-wrapper">
2+
<h3 class="">Latest Blog Posts</h3>
3+
<p>See the latest content from the Interrupt community.</p>
4+
<p>
5+
<a href="{{ '/' | relative_url }}#latest-blog-posts">
6+
View latest blog posts
7+
<img class="chevron-icon" src="{% img_url chevron-right.svg %}" />
8+
</a>
9+
</p>
10+
</div>
11+
12+
<div class="memfault-info-wrapper">
13+
<h3 class="">Top Blog Posts</h3>
14+
<p>Read the posts that readers love the most.</p>
15+
<p>
16+
<a href="{{ '/' | relative_url }}#top-blog-posts">
17+
View top blog posts
18+
<img class="chevron-icon" src="{% img_url chevron-right.svg %}" />
19+
</a>
20+
</p>
21+
</div>

‎_includes/share-buttons.html‎

Lines changed: 0 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -10,44 +10,6 @@
1010
{% assign pagetitle = page.title | url_encode %}
1111
{% endif %}
1212

13-
<div class="memfault-info-wrapper">
14-
<h3 class="">Embedded Events</h3>
15-
<p>Discover embedded events online and around the world or share your own.</p>
16-
{% for event in site.data.featured_events.events %}
17-
<p>
18-
<a href="{{ event.link }}">{{ event.name }}</a>
19-
</p>
20-
{% endfor %}
21-
<p>
22-
<a href="{{ '/events' | relative_url }}">
23-
View all events
24-
<img class="chevron-icon" src="{% img_url chevron-right.svg %}" />
25-
</a>
26-
</p>
27-
</div>
28-
29-
<div class="memfault-info-wrapper">
30-
<h3 class="">Sandbox Demo</h3>
31-
<p>Explore Memfault firsthand with real data, guided product tours, and no SDK integration needed!</p>
32-
<p>
33-
<a href="https://demo.memfault.com/demo/start?utm_campaign=Sandbox&utm_source=Interrupt&utm_medium=side%20bar">
34-
Try the Sandbox
35-
<img class="chevron-icon" src="/img/chevron-right.svg">
36-
</a>
37-
</p>
38-
</div>
39-
40-
<div class="memfault-info-wrapper">
41-
<p>
42-
<img class="mf-icon" src="{% img_url memfault-logo.png %}" />
43-
Brought to you with <span style="font-size: 10px;">❤️</span> by Memfault.
44-
<br/>
45-
<a href="https://memfault.com/">
46-
Learn more
47-
<img class="chevron-icon" src="{% img_url chevron-right.svg %}" />
48-
</a>
49-
</p>
50-
</div>
5113
<div class="share-buttons-wrapper">
5214
<h3>Share on: </h3>
5315
<div id="share-buttons">

‎_layouts/homepage.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@ <h3 class="header">by <a href="https://memfault.com">Memfault</a></h3>
3434
<aside>
3535
{% include search.html %}
3636
{% include subscribe.html %}
37+
{% include posts-nav.html %}
38+
{% include by-memfault.html %}
3739
{% include share-buttons.html %}
3840
</aside>
3941
</div>

‎_layouts/split-view.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@
3131
<aside>
3232
{% include search.html %}
3333
{% include subscribe.html %}
34+
{% include posts-nav.html %}
35+
{% include by-memfault.html %}
3436
{% include share-buttons.html %}
3537
</aside>
3638
</div>

‎index.html‎

Lines changed: 54 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -110,8 +110,8 @@
110110
</li>
111111
</ul>
112112

113-
<h2 class="home-header-2">
114-
<a href="{{ '/blog' | relative_url }}">
113+
<h2 class="home-header-2" id="latest-blog-posts">
114+
<a href="{{ '/' | relative_url }}#latest-blog-posts">
115115
Latest Blog Posts
116116
</a>
117117
</h2>
@@ -122,6 +122,13 @@ <h2 class="home-header-2">
122122

123123
{% for post in posts %}
124124
<li class="post">
125+
{% if post.image and post.image != '/img/interrupt-cover-1200px.png' %}
126+
<div class="post-image">
127+
<a href="{{ post.url | relative_url }}">
128+
<img src="{{ post.image | relative_url }}" alt="{{ post.title }}">
129+
</a>
130+
</div>
131+
{% endif %}
125132
<h2><a href="{{ post.url | relative_url }}">{{ post.title }}</a></h2>
126133
<div class="by-line">
127134
<time datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date_to_string }}</time>
@@ -147,13 +154,55 @@ <h2><a href="{{ post.url | relative_url }}">{{ post.title }}</a></h2>
147154
<img class="chevron-icon" src="{% img_url chevron-right-white.svg %}" />
148155
</a>
149156

150-
<h2 class="home-header-2">
157+
<h2 class="home-header-2" id="top-blog-posts">
158+
<a href="{{ '/' | relative_url }}#top-blog-posts">
159+
Top Blog Posts
160+
</a>
161+
</h2>
162+
<ul id="posts">
163+
{% assign top_posts = "" | split: "" %}
164+
{% for post in site.posts %}
165+
{% assign post_filename = post.path | split: "/" | last | split: "." | first %}
166+
{% if site.data.top_posts.posts contains post_filename %}
167+
{% assign top_posts = top_posts | push: post %}
168+
{% endif %}
169+
{% endfor %}
170+
{% assign top_posts = top_posts | limit: 6 %}
171+
{% for post in top_posts %}
172+
<li class="post">
173+
{% if post.image and post.image != '/img/interrupt-cover-1200px.png' %}
174+
<div class="post-image">
175+
<a href="{{ post.url | relative_url }}">
176+
<img src="{{ post.image | relative_url }}" alt="{{ post.title }}">
177+
</a>
178+
</div>
179+
{% endif %}
180+
<h2><a href="{{ post.url | relative_url }}">{{ post.title }}</a></h2>
181+
<div class="by-line">
182+
<time datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date_to_string }}</time>
183+
{% assign author = site.data.authors[post.author] %}
184+
{% assign author_key = post.author %}
185+
{% if author %}
186+
<span>by <a href="{{ '/authors/' | append:author_key | relative_url }}">{{ author.name }}</a></span>
187+
{% endif %}
188+
</div>
189+
<p>{{ post.excerpt }}</p>
190+
</li>
191+
{% endfor %}
192+
</ul>
193+
194+
<a href="{{ '/blog' | relative_url }}" class="home-show-more">
195+
View all posts
196+
<img class="chevron-icon" src="{% img_url chevron-right-white.svg %}" />
197+
</a>
198+
199+
<h2 class="home-header-2" id="about-memfault">
151200
About Memfault
152201
</h2>
153202
<p>
154203
Memfault is the first cloud-based observability platform for connected device debugging, monitoring, and updating, which brings the efficiencies and innovation of software development to hardware processes. Recognizing that any connected device team could benefit from what they were building, François Baldassari, Chris Coleman, and Tyler Hoffman founded Memfault in 2018 with the help of colleagues from Pebble.
155-
<a href="https://memfault.com/signup">
156-
Try Memfault
204+
<a href="https://demo.memfault.com/demo/start?utm_campaign=Sandbox&utm_source=Interrupt&utm_medium=side%20bar">
205+
Explore Memfault
157206
<svg class="svg-icon slack">
158207
<use xlink:href="{% img_url main-icons.svg#arrow-right %}"></use>
159208
</svg>

0 commit comments

Comments
 (0)