Add feed how-to article

_layouts/default.html

@@ -66,7 +66,6 @@
 	{% endif %}
 
 	{% if page.description %}
-
 		<meta name="og:description" content="{{ page.description }}" />
 		<meta name="description" content="{{ page.description }}" />
 	{% endif %}

_layouts/post.html

@@ -23,7 +23,8 @@ layout: default
 					{% assign thumbnail_url = thumbnail_url | replace: ".", "_full." %}
 				{% endif %}
 				<div class="image is-16by9">
-					<img src="{{ thumbnail_url }}" alt="{{ thumbnail.caption }}" />
+					<img src="{{ thumbnail_url }}" loading="lazy"
+						alt="{{ thumbnail.caption }}" />
 				</div>
 			{% endif %}
 
@@ -69,13 +70,13 @@ layout: default
 			{{ l.index.likeWhatYouSee | default: en.likeWhatYouSee }}
 		</p>
 		<div class="buttons is-justify-content-center">
-			<a class="button is-firefox is-large utm-link" href="{{ site.firefox }}&utm_content=bottombtn">
+			<a class="button is-firefox is-large utm-link" href="{{ site.firefox }}&utm_content=post">
 				<span class="icon">
 					<i class="fab fa-firefox-browser"></i>
 				</span>
 				<span>{{ l.index.firefox | default: en.firefox }}</span>
 			</a>
-			<a class="button is-chrome is-large utm-link" href="{{ site.chrome }}&utm_content=bottombtn">
+			<a class="button is-chrome is-large utm-link" href="{{ site.chrome }}&utm_content=post">
 				<span class="icon">
 					<i class="fab fa-chrome"></i>
 				</span>

_posts/2022-07-23-rss-atom-feed-in-new-tab.md

@@ -0,0 +1,96 @@
+---
+title: How to add Atom/RSS feeds to your New Tab page
+author: rubenwardy
+layout: post
+description: >-
+  This article will tell you how you can add an Atom, RSS, or JSON feed to your
+  New Tab page using Renewed Tab.
+images:
+  cover:
+    path: howto-feeds/cover.png
+  sources:
+    path: howto-feeds/sources.png
+    caption: Sources table in the Edit Feed dialog
+  filter:
+    path: howto-feeds/filter.png
+    caption: Filter table in the Edit Feed dialog
+  icons:
+    path: howto-feeds/icons.png
+    caption: >-
+      The two places where feed icons can appear. Left is combined,
+      right are tabs.
+---
+
+
+This article will tell you how you can add an Atom, RSS, or JSON feed to your
+New Tab page using Renewed Tab. Multiple feeds can be shown using tabs or
+combined into a single list, ordered by post-creation time. It supports article
+images and feed icons.
+
+
+### Add the Feed widget
+
+Unlock Renewed Tab by clicking the pencil icon, click "+ Add Widget", and then
+click Feed. There will now be a new Feed widget on your page. You can now hover
+over the widget to move and resize it.
+
+
+### Edit sources
+
+The next step is to add sources to the widget. Whilst in Edit mode, hover
+over the widget and click the pencil. This will open an Edit Feed dialog modal.
+
+{% include figure.html img=page.images.sources %}
+
+The sources table has a row per feed you are subscribing to.
+If you don't want BBC News, delete it now by clicking the trash icon.
+
+To add a new row, click one of the [+ Add]. The button above adds a row to the
+top, the button below to the bottom.
+
+The URL field needs to be URLs to an Atom/RSS/JSON feed, it can't be a URL to a
+standard web page. Not all websites offer feeds, but you can try searching for
+the website's name plus "RSS" or "Atom". We plan to add support for automatic
+feed detection in the future.
+
+Renewed Tab has a collection of popular feeds available, you can click an empty
+URL field to see them in a dropdown.
+
+
+### Filtering Articles
+
+You can filter articles based on whether they have or don't have a search
+phrase. This is especially useful when you want to hide a particular topic.
+
+To hide articles that contain the word "football", add a new row with "Hide" and
+text as "football". To only show articles that contain the word football, use
+"Show" instead.
+
+Search text is case-insensitive.
+
+{% include figure.html img=page.images.filter %}
+
+
+### Other Options
+
+"Combine sources into single tab" will show all the feed sources in one list,
+rather than giving each its own tab.
+
+"Show images" will show images for each article. Note that this does not work
+with all sources due to missing information.
+
+"Use icons from websites (favicons)" will show icons in tabs if sources are
+separate, or icons in a list if combined. Does nothing if the above two options
+are both enabled.
+
+"Open links in new tab" will open articles in a new tab when clicked. This is
+the same as ctrl+clicking or middle-clicking a link.
+
+{% include figure.html img=page.images.icons %}
+
+
+### Conclusion
+
+Renewed Tab has a simple but flexible feed widget, allowing you to keep up to
+date with the news and your favourite websites. If you need any help or have
+any requests, don't hesitate to [get involved](/get_involved/).