Format recommendation pages

This commit is contained in:
Jonah Aragon 2020-05-12 15:13:53 -05:00
parent 03dd56bf59
commit 9057b89261
No known key found for this signature in database
GPG Key ID: 6A957C9A9A9429F7
11 changed files with 112 additions and 41 deletions

View File

@ -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:

11
_includes/blog-card.html Normal file
View File

@ -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>

15
_includes/downloads.html Normal file
View File

@ -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>

View File

@ -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 %}

View File

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

View File

@ -7,17 +7,7 @@ permalink: /blog/
<div class="blog mt-5">
<div class="row">
{% for post in site.posts %}
<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>
{% include blog-card.html %}
{% endfor %}
</div>
</div>

View File

@ -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 wont 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 wont 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 %}

View File

@ -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 wont 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-->

View File

@ -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. Its 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 %}

View File

@ -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" %}

View File

@ -127,17 +127,7 @@ layout: default
</div>
<div class="row">
{% for post in site.posts limit:2 %}
<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>
{% include blog-card.html %}
{% endfor %}
</div>
<div class="row my-3">