Format recommendation pages

_config.yml

@@ -58,6 +58,33 @@ collections:
     permalink: /providers/:name
     sort_by: order
 
+defaults:
+  - scope:
+      path: ""
+      type: "devices"
+    values:
+      layout: recommendation
+  - scope:
+      path: ""
+      type: "browsers"
+    values:
+      layout: recommendation
+  - scope:
+      path: ""
+      type: "software"
+    values:
+      layout: recommendation
+  - scope:
+      path: ""
+      type: "os"
+    values:
+      layout: recommendation
+  - scope:
+      path: ""
+      type: "providers"
+    values:
+      layout: recommendation
+
 # Build settings
 markdown: kramdown
 plugins:

_includes/blog-card.html

@@ -0,0 +1,11 @@
+<div class="col-6">
+  <a href="{{ post.url | prepend: site.baseurl }}" class="text-decoration-none">
+    <div class="card bg-secondary" {%- if post.cover -%} style="background-image: {{ post.color | default: "linear-gradient(to bottom, rgba(40, 50, 63, 0.3), rgba(40, 50, 63, 0.9))" }}, url(/assets/img/blog/{{ post.cover }}); background-size: cover; background-position: center;"{%- endif -%}>
+      <div class="card-body d-flex flex-column align-self-end" style="min-height: 300px;">
+        <h2 class="card-title mt-auto text-light">{{ post.title }}</h2>
+        <p class="card-text text-light">{{ post.excerpt }} <strong>Continue Reading...</strong></p>
+        <p class="card-text"><small class="text-light">{{ post.author }} - {{ post.date | date: "%b %-d, %Y" }}</small></p>
+      </div>
+    </div>
+  </a>
+</div>

_includes/downloads.html

@@ -0,0 +1,15 @@
+<h2 class="pt-3">Downloads</h2>
+
+<ul class="list-unstyled">
+<li><h3 class="h5 pt-3">Desktop/PC</h3><ul class="list-unstyled">
+  {% if page.platform_win %}<li><a href="{{ page.platform_win }}" class="text-secondary"><i class="fab fa-windows fa-fw"></i> Download for Windows</a></li>{% endif %}
+  {% if page.platform_mac %}<li><a href="{{ page.platform_mac }}" class="text-secondary"><i class="fab fa-app-store fa-fw"></i> Download for macOS</a></li>{% endif %}
+  {% if page.platform_linux %}<li><a href="{{ page.platform_linux }}" class="text-secondary"><i class="fab fa-linux fa-fw"></i> Download for Linux</a></li>{% endif %}
+  {% if page.platform_bsd %}<li><a href="{{ page.platform_bsd }}" class="text-secondary"><i class="fab fa-freebsd fa-fw"></i> Download for FreeBSD</a></li>{% endif %}
+</ul></li>
+<li><h3 class="h5 pt-3">Mobile</h3><ul class="list-unstyled">
+  {% if page.platform_android %}<li><a href="{{ page.platform_android }}" class="text-secondary"><i class="fab fa-google-play fa-fw"></i> Download for Android</a></li>{% endif %}
+  {% if page.platform_fdroid %}<li><a href="{{ page.platform_fdroid }}" class="text-secondary"><i class="fab fa-android fa-fw"></i> Download for Android (F-Droid)</a></li>{% endif %}
+  {% if page.platform_ios %}<li><a href="{{ page.platform_ios }}" class="text-secondary"><i class="fab fa-app-store-ios fa-fw"></i> Download for iOS</a></li>{% endif %}
+</ul></li>
+</ul>

_includes/recommendation-1.html

@@ -8,7 +8,7 @@
         <h2>{{ post.name }}</h2>
         {% if post.info %} <p class="badge badge-info"><i class="fad fa-info-circle"></i> {{ post.info }}</p>{% endif %}
         {% if post.warning %} <p class="badge badge-warning"><i class="fad fa-exclamation-triangle"></i> {{ post.warning }}</p>{% endif %}
-        {{ post.excerpt | markdownify }}
+        {{ post.short | markdownify }}
         <p>
         {% if post.platform_win %}<a href="{{ post.platform_win }}" class="text-secondary"><i class="fab fa-windows fa-fw h2"></i></a>{% endif %}
         {% if post.platform_mac %}<a href="{{ post.platform_mac }}" class="text-secondary"><i class="fab fa-apple fa-fw h2"></i></a>{% endif %}

_layouts/recommendation.html

@@ -0,0 +1,8 @@
+---
+layout: default
+---
+<div class="container my-5">
+  <h1>{{ page.title }}</h1>
+  {{ content }}
+  {% include footer.html %}
+</div>

blog.html

@@ -7,17 +7,7 @@ permalink: /blog/
 <div class="blog mt-5">
   <div class="row">
   {% for post in site.posts %}
-    <div class="col-6">
+    {% include blog-card.html %}
-      <a href="{{ post.url | prepend: site.baseurl }}" class="text-decoration-none">
-        <div class="card bg-secondary" {%- if post.cover -%} style="background-image: {{ post.color | default: "linear-gradient(to bottom, rgba(40, 50, 63, 0.3), rgba(40, 50, 63, 0.9))" }}, url(/assets/img/blog/{{ post.cover }}); background-size: cover; background-position: center;"{%- endif -%}>
-          <div class="card-body d-flex flex-column align-self-end" style="min-height: 300px;">
-            <h2 class="card-title mt-auto text-light">{{ post.title }}</h2>
-            <p class="card-text text-light">{{ post.excerpt }} <strong>Continue Reading...</strong></p>
-            <p class="card-text"><small class="text-light">{{ post.author }} - {{ post.date | date: "%b %-d, %Y" }}</small></p>
-          </div>
-        </div>
-      </a>
-    </div>
   {% endfor %}
   </div>
 </div>

collections/_browsers/firefox.html

@@ -0,0 +1,42 @@
+---
+name: Firefox
+logo: /assets/img/browsers/firefox-logo.svg
+short: "**Firefox** is a fast, reliable, open-source, privacy-respecting browser developed by Mozilla. Unlike Google Chrome, Firefox won’t track your data and send it to various companies. Firefox also allows you to simply install a number of add-ons that will improve your privacy online."
+website: 'https://firefox.com/'
+privacy_policy: 'https://www.mozilla.org/en-US/privacy/firefox/'
+platform_win: 'https://www.mozilla.org/firefox/windows/'
+platform_mac: 'https://www.mozilla.org/firefox/mac/'
+platform_linux: 'https://www.mozilla.org/firefox/linux/'
+platform_bsd: 'https://www.freshports.org/www/firefox'
+platform_android: 'https://play.google.com/store/apps/details?id=org.mozilla.firefox'
+platform_fdroid: 'https://f-droid.org/en/packages/org.mozilla.fennec_fdroid/'
+platform_ios: 'https://apps.apple.com/us/app/firefox-private-safe-browser/id989804926'
+source: 'https://hg.mozilla.org/mozilla-central/'
+order: 1
+---
+
+<div class="row my-5">
+  <div class="col-2 d-none d-lg-block">
+    <img src="{{ page.logo }}" alt="{{ page.name }} logo" class="w-100">
+  </div>
+  <div class="col-lg-10 col-12">
+    <p class="mt-2"><strong>Firefox</strong> is a fast, reliable, open-source, privacy-respecting browser developed by Mozilla.</p>
+    <p>Unlike Google Chrome, Firefox won’t track your data and send it to various companies. Firefox also allows you to simply install a number of add-ons that will improve your privacy online.</p>
+    <a href="{{ page.website }}" class="btn btn-primary mt-2">Visit {{ page.website | remove:'https://' | split:'/' | first }}</a>
+  </div>
+</div>
+
+{% include downloads.html %}
+
+<h2 class="pt-3">Source Code</h2>
+
+<p>Mozilla publishes the source code for the Firefox browser at <a href="{{ page.source }}">{{ page.source }}</a>.</p>
+
+<h2 class="pt-3">Related Content</h2>
+
+{% assign blog1 = site.posts | where:"title","Firefox Privacy: Tips and Tricks for Better Browsing" %}
+{% for post in blog1 %}
+<div class="row">
+  {% include blog-card.html %}
+</div>
+{% endfor %}

collections/_browsers/firefox.md

@@ -1,16 +0,0 @@
----
-name: Firefox
-logo: /assets/img/browsers/firefox-logo.svg
-short: Firefox is fast, reliable, open-source, and respects your privacy.
-website: 'https://firefox.com/'
-privacy_policy: 'https://www.mozilla.org/en-US/privacy/firefox/'
-platform_win: 'https://www.mozilla.org/firefox/windows/'
-platform_mac: 'https://www.mozilla.org/firefox/mac/'
-platform_linux: 'https://www.mozilla.org/firefox/linux/'
-platform_bsd: 'https://www.freshports.org/www/firefox'
-source: 'https://hg.mozilla.org/mozilla-central/'
-order: 1
----
-**Firefox** is a fast, reliable, open-source, privacy-respecting browser developed by Mozilla.
-
-Unlike Google Chrome, Firefox won’t track your data and send it to various companies. Firefox also allows you to simply install a number of add-ons that will improve your privacy online.<!--MORE-->

collections/_browsers/tor-browser.md

@@ -2,14 +2,18 @@
 name: Tor Browser
 info: Provides Anonymity
 logo: /assets/img/browsers/tor-logo.svg
-short: Tor Browser is your choice if you need an extra layer of anonymity.
+short: "**Tor Browser** is your choice if you need an extra layer of anonymity. It’s a modified version of Firefox ESR, which comes with pre-installed privacy add-ons, encryption, and an advanced proxy. [How does Tor work?](https://write.privacytools.io/my-thoughts-on-security/slicing-onions-part-1-myth-busting-tor)"
 website: 'https://www.torproject.org/'
 website_tor: 'http://expyuzz4wqqyqhjn.onion/'
 privacy_policy: 'https://support.torproject.org/tbb/tbb-3/'
 platform_win: 'https://www.torproject.org/download/'
 platform_mac: 'https://www.torproject.org/download/'
 platform_linux: 'https://www.torproject.org/download/'
+platform_android: 'https://play.google.com/store/apps/details?id=org.torproject.torbrowser'
+platform_fdroid: 'https://guardianproject.info/fdroid/'
 source: 'https://trac.torproject.org/projects/tor'
 order: 2
 ---
 Tor Browser is your choice if you need an extra layer of anonymity. It's a modified version of Firefox ESR, which comes with pre-installed privacy add-ons, encryption, and an advanced proxy. [How does Tor work?](https://write.privacytools.io/my-thoughts-on-security/slicing-onions-part-1-myth-busting-tor)
+
+{% include downloads.html %}

collections/_evergreen/browsers.html

@@ -4,7 +4,7 @@ title: Browser Recommendations
 ---
 
 <p class="lead">
-  These are our current web browser recommendations and some tweaks you can use to preserve your privacy.
+  These are our current web browser recommendations, settings, and add-ons you can use to preserve your privacy.
 </p>
 
 {% assign firefox = site.browsers | where:"name","Firefox" %}

index.html

@@ -127,17 +127,7 @@ layout: default
   </div>
   <div class="row">
   {% for post in site.posts limit:2 %}
-    <div class="col-6">
+    {% include blog-card.html %}
-      <a href="{{ post.url | prepend: site.baseurl }}" class="text-decoration-none">
-        <div class="card bg-secondary" {%- if post.cover -%} style="background-image: {{ post.color | default: "linear-gradient(to bottom, rgba(40, 50, 63, 0.3), rgba(40, 50, 63, 0.9))" }}, url(/assets/img/blog/{{ post.cover }}); background-size: cover; background-position: center;"{%- endif -%}>
-          <div class="card-body d-flex flex-column align-self-end" style="min-height: 300px;">
-            <h2 class="card-title mt-auto text-light">{{ post.title }}</h2>
-            <p class="card-text text-light">{{ post.excerpt }} <strong>Continue Reading...</strong></p>
-            <p class="card-text"><small class="text-light">{{ post.author }} - {{ post.date | date: "%b %-d, %Y" }}</small></p>
-          </div>
-        </div>
-      </a>
-    </div>
   {% endfor %}
   </div>
   <div class="row my-3">