Update Wire's metadata warning to increase clarity #1172

Merged
nitrohorse merged 6 commits from update-wire-metadata-warning into master 2019-08-18 14:13:20 +00:00
2 changed files with 220 additions and 54 deletions

View File

@ -2,88 +2,254 @@
<div class="card-header text-white bg-secondary">
<h3 class="h5">
{% if include.badges %}
<span class="mr-2">{{include.title}}</span>
{% assign badges = include.badges | replace:", ", "," | split:"," %}
{% for badge in badges %}
{% assign badge_data = badge | split:":" %}
{% assign color = badge_data[0] %}
{% assign text = badge_data[1] %}
{% assign tooltip = badge_data[2] | default: false %}
{% assign help_icon = '<i class="far fa-question-circle"></i>' %}
<span class="badge badge-{{color}}" {% if tooltip %} data-toggle="tooltip" title="{{ tooltip }}">{{text}} {{ help_icon
}}
{% else %}
>{{text}}
{% endif %}
</span>
{% endfor %}
<span class="mr-2">{{ include.title }}</span>
{% assign badges = include.badges | split:"|" %}
{% for badge in badges %}
{% assign badge_data = badge | split:":" %}
{% assign color = badge_data[0] %}
{% assign text = badge_data[1] %}
{% assign tooltip = badge_data[2] | default: false %}
{% assign help_icon = '<i class="far fa-question-circle"></i>' %}
<span
class="badge badge-{{color}}"
{% if tooltip %}
data-toggle="tooltip"
title="{{ tooltip }}"
> {{text}} {{ help_icon }}
{% else %}
> {{text}}
{% endif %}
nitrohorse commented 2019-08-18 01:28:39 +00:00 (Migrated from github.com)
Review

Updated to "|"

Updated to "|"
Review

I am somewhat surprised that works, seeing as Liquid uses "|"s internally. There's even one in that line in particular 😆

I am somewhat surprised that works, seeing as Liquid uses "|"s internally. There's even one in that line in particular 😆
nitrohorse commented 2019-08-18 02:30:07 +00:00 (Migrated from github.com)
Review

Oh really? I missed that lol. Great that’s probably a bug I created...

Oh really? I missed that lol. Great that’s probably a bug I created...
Review

Idk, it appears to function.

Idk, it appears to function.
nitrohorse commented 2019-08-18 04:55:21 +00:00 (Migrated from github.com)
Review

Ah I must have mis-understood -- I didn't realize we're using a module called Liquid lol! Yeah, then this is alright since the | is within quotes so it's treated simply as a string 😄

Ah I must have mis-understood -- I didn't realize we're using a module called _Liquid_ lol! Yeah, then this is alright since the | is within quotes so it's treated simply as a string :smile:
</span>
{% endfor %}
{% else %}
{{include.title}}
{{ include.title }}
{% endif %}
nitrohorse commented 2019-08-17 18:08:00 +00:00 (Migrated from github.com)
Review

@JonahAragon is it alright to change the delimiter in labels to a different character other than ,?

@JonahAragon is it alright to change the delimiter in labels to a different character other than `,`?
nitrohorse commented 2019-08-17 18:08:43 +00:00 (Migrated from github.com)
Review

Maybe something not used normally like | would be better than ;.

Maybe something not used normally like `|` would be better than `;`.
blacklight447 commented 2019-08-17 18:08:46 +00:00 (Migrated from github.com)
Review

I wouldn't see any reason why not.

I wouldn't see any reason why not.
Review

You can change it to whatever, but you will need to update everything that uses the labels functionality to match. You should also change the badges delimiter to match, since it uses the same syntax as labels.

You can change it to whatever, but you will need to update everything that uses the labels functionality to match. You should also change the badges delimiter to match, since it uses the same syntax as labels.
nitrohorse commented 2019-08-17 19:53:37 +00:00 (Migrated from github.com)
Review

Okay, that's a good catch. I'll update the badges delimiter to match + validate this doesn't break anything.

Okay, that's a good catch. I'll update the badges delimiter to match + validate this doesn't break anything.
nitrohorse commented 2019-08-17 23:38:23 +00:00 (Migrated from github.com)
Review

Alright, so I went through the repo's code and couldn't find any place where multiple badges or labels are being used in a v2 card aside from Wire. So I think we're fine with making the cardv2 delimiter change without breaking anything.

Alright, so I went through the repo's code and couldn't find any place where multiple badges or labels are being used in a v2 card aside from Wire. So I think we're fine with making the cardv2 delimiter change without breaking anything.
nitrohorse commented 2019-08-17 23:56:18 +00:00 (Migrated from github.com)
Review

I've also updated the formatting of cardv2.html to make editing and reading a bit more easier for future contributors.

I've also updated the formatting of `cardv2.html` to make editing and reading a bit more easier for future contributors.
Review

Maybe Wire was the one I was thinking of, I knew I had seen one with two labels recently lol

Maybe Wire was the one I was thinking of, I knew I had seen one with two labels recently lol
</h3>
</div>
<div class="card-body">
<p class="card-text">
<img src="{{include.image}}" height="120" width="120" class="panel-pic" alt="{{include.title}}">
{{include.description}}
<img
src="{{include.image}}"
height="120"
width="120"
class="panel-pic"
alt="{{include.title}}"
>
{{ include.description }}
{% if include.labels %}
{% assign labels = include.labels | replace:", ", "," | split:"," %}
{% for label in labels %}
{% assign label_data = label | split:":" %}
{% assign color = label_data[0] %}
{% assign text = label_data[1] %}
{% assign tooltip = label_data[2] | default: false %}
{% assign help_icon = '<i class="far fa-question-circle"></i>' %}
<span class="badge badge-{{color}}" {% if tooltip %} data-toggle="tooltip" title="{{ tooltip }}">{{text}} {{ help_icon
}}
{% else %}
>{{text}}
{% endif %}
</span>
{% endfor %}
{% assign labels = include.labels | split:"|" %}
{% for label in labels %}
{% assign label_data = label | split:":" %}
{% assign color = label_data[0] %}
{% assign text = label_data[1] %}
{% assign tooltip = label_data[2] | default: false %}
{% assign help_icon = '<i class="far fa-question-circle"></i>' %}
<span
class="badge badge-{{color}}"
{% if tooltip %}
data-toggle="tooltip"
title="{{ tooltip }}"
> {{text}} {{ help_icon }}
{% else %}
> {{text}}
{% endif %}
</span>
{% endfor %}
{% endif %}
</p>
<div class="d-flex justify-content-between flex-column flex-md-row align-items-start align-items-md-center">
<div class="flex-shrink-0 mr-2">
<a href="{{include.website}}" class="btn btn-primary mt-1"><i class="fas fa-external-link-alt fa-fw"></i> Website</a>
<a
href="{{include.website}}"
class="btn btn-primary mt-1">
<i class="fas fa-external-link-alt fa-fw"></i>
Website
</a>
{% if include.forum %}
<a href="{{include.forum}}" class="btn btn-success mt-1"><i class="fab fa-discourse fa-fw"></i> Forum</a>
<a
href="{{include.forum}}"
class="btn btn-success mt-1">
<i class="fab fa-discourse fa-fw"></i>
Forum
</a>
{% endif %}
{% if include.tor %}
<a data-toggle="tooltip" data-placement="bottom" data-original-title="Requires specific software to access: torproject.org" href="{{include.tor}}"><img class="mt-2" alt="Tor" src="/assets/img/layout/tor.png" width="35" height="35"></a>
<a
data-toggle="tooltip"
data-placement="bottom"
data-original-title="Requires specific software to access: torproject.org"
href="{{include.tor}}">
<img
class="mt-2"
alt="Tor"
src="/assets/img/layout/tor.png"
width="35"
height="35">
</a>
{% endif %}
</div>
<div class="mt-2">
{% if include.windows %}{% if include.windows != "" %}<a href="{{ include.windows }}"><i class="fab fa-windows fa-2x fa-fw d-inline pr-1"></i></a>{% else %}<i class="fab fa-windows fa-2x fa-fw d-inline pr-1"></i>{% endif %}{% endif %}
{% if include.mac %}{% if include.mac != "" %}<a href="{{ include.mac }}"><i class="fab fa-apple fa-2x fa-fw d-inline pr-1"></i></a>{% else %}<i class="fab fa-apple fa-2x fa-fw d-inline pr-1"></i>{% endif %}{% endif %}
{% if include.linux %}{% if include.linux != "" %}<a href="{{ include.linux }}"><i class="fab fa-linux fa-2x fa-fw d-inline pr-1"></i></a>{% else %}<i class="fab fa-linux fa-2x fa-fw d-inline pr-1"></i>{% endif %}{% endif %}
{% if include.bsd %}{% if include.bsd != "" %}<a href="{{ include.bsd }}"><i class="fab fa-freebsd fa-2x fa-fw d-inline pr-1"></i></a>{% else %}<i class="fab fa-freebsd fa-2x fa-fw d-inline pr-1"></i>{% endif %}{% endif %}
{% if include.windows %}
{% if include.windows != "" %}
<a href="{{ include.windows }}">
<i class="fab fa-windows fa-2x fa-fw d-inline pr-1"></i>
</a>
nitrohorse commented 2019-08-17 18:56:31 +00:00 (Migrated from github.com)
Review

Good catch! I’m going to put the “wip” label on this and verify. 🙏🏼

Good catch! I’m going to put the “wip” label on this and verify. 🙏🏼
Review

Yeah, most likely going to break existing labels. I'd also like to see badges changed to use the same syntax: https://github.com/privacytoolsIO/privacytools.io/pull/1172/files#diff-8f1346aae81a8f63f53e2815d9f6582eR4-R22

Yeah, most likely going to break existing labels. I'd also like to see `badges` changed to use the same syntax: https://github.com/privacytoolsIO/privacytools.io/pull/1172/files#diff-8f1346aae81a8f63f53e2815d9f6582eR4-R22
{% else %}
<i class="fab fa-windows fa-2x fa-fw d-inline pr-1"></i>
{% endif %}
{% endif %}
{% if include.firefox %}{% if include.firefox != "" %}<a href="{{ include.firefox }}"><i class="fab fa-firefox fa-2x fa-fw d-inline pr-1"></i></a>{% else %}<i class="fab fa-firefox fa-2x fa-fw d-inline pr-1"></i>{% endif %}{% endif %}
{% if include.chrome %}{% if include.chrome != "" %}<a href="{{ include.chrome }}"><i class="fab fa-chrome fa-2x fa-fw d-inline pr-1"></i></a>{% else %}<i class="fab fa-chrome fa-2x fa-fw d-inline pr-1"></i>{% endif %}{% endif %}
{% if include.safari %}{% if include.safari != "" %}<a href="{{ include.safari }}"><i class="fab fa-safari fa-2x fa-fw d-inline pr-1"></i></a>{% else %}<i class="fab fa-safari fa-2x fa-fw d-inline pr-1"></i>{% endif %}{% endif %}
{% if include.opera %}{% if include.opera != "" %}<a href="{{ include.opera }}"><i class="fab fa-opera fa-2x fa-fw d-inline pr-1"></i></a>{% else %}<i class="fab fa-opera fa-2x fa-fw d-inline pr-1"></i>{% endif %}{% endif %}
{% if include.edge %}{% if include.edge != "" %}<a href="{{ include.edge }}"><i class="fab fa-edge fa-2x fa-fw d-inline pr-1"></i></a>{% else %}<i class="fab fa-edge fa-2x fa-fw d-inline pr-1"></i>{% endif %}{% endif %}
{% if include.mac %}
{% if include.mac != "" %}
<a href="{{ include.mac }}">
<i class="fab fa-apple fa-2x fa-fw d-inline pr-1"></i>
</a>
{% else %}
<i class="fab fa-apple fa-2x fa-fw d-inline pr-1"></i>
{% endif %}
{% endif %}
{% if include.android %}{% if include.android != "" %}<a href="{{ include.android }}"><i class="fab fa-android fa-2x fa-fw d-inline pr-1"></i></a>{% else %}<i class="fab fa-android fa-2x fa-fw d-inline pr-1"></i>{% endif %}{% endif %}
{% if include.ios %}{% if include.ios != "" %}<a href="{{ include.ios }}"><i class="fab fa-app-store-ios fa-2x fa-fw d-inline pr-1"></i></a>{% else %}<i class="fab fa-app-store-ios fa-2x fa-fw d-inline pr-1"></i>{% endif %}{% endif %}
{% if include.fire %}{% if include.fire != "" %}<a href="{{ include.fire }}"><i class="fas fa-fire fa-2x fa-fw d-inline pr-1"></i></a>{% else %}<i class="fas fa-fire fa-2x fa-fw d-inline pr-1"></i>{% endif %}{% endif %}
{% if include.linux %}
{% if include.linux != "" %}
<a href="{{ include.linux }}">
<i class="fab fa-linux fa-2x fa-fw d-inline pr-1"></i>
</a>
{% else %}
<i class="fab fa-linux fa-2x fa-fw d-inline pr-1"></i>
{% endif %}
{% endif %}
{% if include.web %}{% if include.web != "" %}<a href="{{ include.web }}"><i class="fas fa-desktop fa-2x fa-fw d-inline pr-1"></i></a>{% else %}<i class="fas fa-desktop fa-2x fa-fw d-inline pr-1"></i>{% endif %}{% endif %}
{% if include.bsd %}
{% if include.bsd != "" %}
<a href="{{ include.bsd }}">
<i class="fab fa-freebsd fa-2x fa-fw d-inline pr-1"></i>
</a>
{% else %}
<i class="fab fa-freebsd fa-2x fa-fw d-inline pr-1"></i>
{% endif %}
{% endif %}
{% if include.firefox %}
{% if include.firefox != "" %}
<a href="{{ include.firefox }}">
<i class="fab fa-firefox fa-2x fa-fw d-inline pr-1"></i>
</a>
{% else %}
<i class="fab fa-firefox fa-2x fa-fw d-inline pr-1"></i>
{% endif %}
{% endif %}
{% if include.chrome %}
{% if include.chrome != "" %}
<a href="{{ include.chrome }}">
<i class="fab fa-chrome fa-2x fa-fw d-inline pr-1"></i>
</a>
{% else %}
<i class="fab fa-chrome fa-2x fa-fw d-inline pr-1"></i>
{% endif %}
{% endif %}
{% if include.safari %}
{% if include.safari != "" %}
<a href="{{ include.safari }}">
<i class="fab fa-safari fa-2x fa-fw d-inline pr-1"></i>
</a>
{% else %}
<i class="fab fa-safari fa-2x fa-fw d-inline pr-1"></i>
{% endif %}
{% endif %}
{% if include.opera %}
{% if include.opera != "" %}
<a href="{{ include.opera }}">
<i class="fab fa-opera fa-2x fa-fw d-inline pr-1"></i>
</a>
{% else %}
<i class="fab fa-opera fa-2x fa-fw d-inline pr-1"></i>
{% endif %}
{% endif %}
{% if include.edge %}
{% if include.edge != "" %}
<a href="{{ include.edge }}">
<i class="fab fa-edge fa-2x fa-fw d-inline pr-1"></i>
</a>
{% else %}
<i class="fab fa-edge fa-2x fa-fw d-inline pr-1"></i>
{% endif %}
{% endif %}
{% if include.android %}
{% if include.android != "" %}
<a href="{{ include.android }}">
<i class="fab fa-android fa-2x fa-fw d-inline pr-1"></i>
</a>
{% else %}
<i class="fab fa-android fa-2x fa-fw d-inline pr-1"></i>
{% endif %}
{% endif %}
{% if include.ios %}
{% if include.ios != "" %}
<a href="{{ include.ios }}">
<i class="fab fa-app-store-ios fa-2x fa-fw d-inline pr-1"></i>
</a>
{% else %}
<i class="fab fa-app-store-ios fa-2x fa-fw d-inline pr-1"></i>
{% endif %}
{% endif %}
{% if include.fire %}
{% if include.fire != "" %}
<a href="{{ include.fire }}">
<i class="fas fa-fire fa-2x fa-fw d-inline pr-1"></i>
</a>
{% else %}
<i class="fas fa-fire fa-2x fa-fw d-inline pr-1"></i>
{% endif %}
{% endif %}
{% if include.web %}
{% if include.web != "" %}
<a href="{{ include.web }}">
<i class="fas fa-desktop fa-2x fa-fw d-inline pr-1"></i>
</a>
{% else %}
<i class="fas fa-desktop fa-2x fa-fw d-inline pr-1"></i>
{% endif %}
{% endif %}
{{include.icon1}}
{{include.icon2}}
{{include.icon3}}
{% if include.github %}<a href="{{include.github}}"><i class="fab fa-github fa-2x fa-fw d-inline"></i></a>{% endif %}
{% if include.gitlab %}<a href="{{include.gitlab}}"><i class="fab fa-gitlab fa-2x fa-fw d-inline"></i></a>{% endif %}
{% if include.git %}<a href="{{include.git}}"><i class="fab fa-git-square fa-2x fa-fw d-inline"></i></a>{% endif %}
{% if include.source %}<a href="{{include.source}}"><i class="fas fa-code-branch fa-2x fa-fw d-inline"></i></a>{% endif %}
{% if include.github %}
<a href="{{include.github}}">
<i class="fab fa-github fa-2x fa-fw d-inline"></i>
</a>
{% endif %}
{% if include.gitlab %}
<a href="{{include.gitlab}}">
<i class="fab fa-gitlab fa-2x fa-fw d-inline"></i>
</a>
{% endif %}
{% if include.git %}
<a href="{{include.git}}">
<i class="fab fa-git-square fa-2x fa-fw d-inline"></i>
</a>
{% endif %}
{% if include.source %}
<a href="{{include.source}}">
<i class="fas fa-code-branch fa-2x fa-fw d-inline"></i>
</a>
{% endif %}
</div>
</div>
</div>
</div>
<br>

View File

@ -23,7 +23,7 @@ ios=""
title="Wire"
image="/assets/img/tools/wire.png"
description="A free software End-to-End Encrypted chatting application that supports instant messaging, voice, and video calls. Full source code is available."
labels="warning:<a href=//www.vice.com/en_us/article/gvzw5x/secure-messaging-app-wire-stores-everyone-youve-ever-contacted-in-plain-text>Warning</a>:Wire stores metadata such as list of your connections/conversations in plaintext (= not encrypted).,success:VoIP"
labels="warning:<a href=//www.vice.com/en_us/article/gvzw5x/secure-messaging-app-wire-stores-everyone-youve-ever-contacted-in-plain-text>Warning</a>:Wire stores some plaintext metadata about its users on their servers. This data includes profile names, profile pictures, usernames, and users' lists of connections and conversations.|success:VoIP"
website="https://wire.com/"
forum="https://forum.privacytools.io/t/discussion-wire/750"
github="https://github.com/wireapp/"