-
-
Notifications
You must be signed in to change notification settings - Fork 31
/
affiliates.html
127 lines (115 loc) · 4.44 KB
/
affiliates.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
---
layout: page
title: Techlore Tools & Affiliates
permalink: /affiliates
description: "A curated list of trusted resources and partner organizations that offer software and services to help you safeguard your online security and freedom."
---
{% include variables.html %}
{% include c_sub-hero.html title=page.title perex=page.description %}
<section>
<div class="container">
{%- include c_box-header.html title="Privacy & Security Tools" -%}
<p>Privacy & security tools we use and/or feel comfortable recommending with affiliate plans.</p>
<div class="message">
<div class="message-body">
{% assign resourcesUrl = site.data._en.navigation.mainNav.resources.url | relative_url %}
{{ t.affiliates.desc | replace: "[[resources]]", resourcesUrl }}
</div>
</div>
{% comment %}TODO: DRY --> Component. The same as "knowledgebase"{% endcomment %}
<div class="affiliates">
{% assign affiliatesTools = site.data._en.affiliates.tools %}
{%- for tool in affiliatesTools -%}
{% assign slugifiedName = tool.name | slugify %}
<div class="affiliates__item is-align-items-center media is-gap-2 anchor" id="{{ slugifiedName }}">
<figure class="py-2 is-align-items-center is-flex is-justify-content-center">
<img
src="{% link /assets/affiliates/icons/{{slugifiedName}}.svg %}"
class="affiliates__logo"
alt="Logo - {{ tool.name }}"
loading="lazy"
{% if tool.whiteIcon %}data-apply-light-theme-filter{% endif %}
>
</figure>
<div class="affiliates__content media-content is-flex is-flex-direction-column is-align-items-flex-start">
<h4 class="affiliates__title is-flex is-flex-direction-column mb-0">
{{ tool.name }}
<div class="affiliates__anchor">
<a href="{{ slugifiedName | prepend: "#" }}" class="anchor__hash">#</a>
</div>
</h4>
{% if tool.type %}
<small>{{ tool.type }}</small>
{% endif %}
</div>
{% if tool.buttons.size > 0 %}
<div class="affiliates__buttons buttons">
{% for button in tool.buttons %}
{% assign classes = "" %}
{% if button.affil %}
{% assign classes = "is-warning is-gap-1.5" %}
{% endif %}
<a href="{{ button.url }}" class="button {{ classes }}" target="_blank">
{% if button.affil %}
{% include e_render-svg-icon.html icon="link" dimension=25 inline=true %}
{% endif %}
{{ button.text }}
</a>
{% endfor %}
</div>
{% endif %}
</div>
{%- endfor -%}
</div>
</div>
</section>
<section>
<div class="container">
{%- include c_box-header.html title="Production Tools" -%}
<p>Several services & products we use at Techlore to produce our content & manage our projects.</p>
<div class="affiliates">
{% assign affiliatesProduction = site.data._en.affiliates.production %}
{%- for product in affiliatesProduction -%}
{% assign slugifiedName = product.name | slugify %}
<div class="affiliates__item is-align-items-center media is-gap-2 anchor" id="{{ slugifiedName }}">
<figure class="py-2 is-align-items-center is-flex is-justify-content-center">
<img
src="{% link /assets/affiliates/icons/{{slugifiedName}}.svg %}"
class="affiliates__logo"
alt="Logo - {{ product.name }}"
loading="lazy"
{% if product.whiteIcon %}data-apply-light-theme-filter{% endif %}
>
</figure>
<div class="affiliates__content media-content is-flex is-flex-direction-column is-align-items-flex-start">
<h4 class="affiliates__title is-flex is-flex-direction-column mb-0">
{{ product.name }}
<div class="affiliates__anchor">
<a href="{{ slugifiedName | prepend: "#" }}" class="anchor__hash">#</a>
</div>
</h4>
{% if product.type %}
<small>{{ product.type }}</small>
{% endif %}
</div>
{% if product.buttons.size > 0 %}
<div class="affiliates__buttons buttons">
{% for button in product.buttons %}
{% assign classes = "" %}
{% if button.affil %}
{% assign classes = "is-warning is-gap-1.5" %}
{% endif %}
<a href="{{ button.url }}" class="button {{ classes }}" target="_blank">
{% if button.affil %}
{% include e_render-svg-icon.html icon="link" dimension=25 inline=true %}
{% endif %}
{{ button.text }}
</a>
{% endfor %}
</div>
{% endif %}
</div>
{%- endfor -%}
</div>
</div>
</section>