community/templates/outreach-story.html

{% include 'breadcrumb.html' %}
{% set share_url = this.path|url(alt=this.alt,external=true) %}
{% set share_text = _("Find out how Tor helps internet users like {} reclaim their privacy and anonymity.").format(this.title) %}
<meta property="og:url" content="{{ share_url }}" />
<meta property="og:type" content="article" />
<meta property="og:title" content="{{ share_title }}" />
<meta property="og:description" content="{{ share_text }}" />
<meta property="og:image" content="{{ this.attachments.images.get('portrait.png')|url(external=true) }}" />
<div class="container">
  <div class="row py-5">
    <div class="col-lg-3 px-3">
      <img class="story-portrait mb-4" src="{{ this.attachments.images.get('portrait.png')|url }}" />
      <div class="row mb-2" id="share-story-links">
        <a class="col-auto pt-0 pb-2 copy-link" href="#"><i class="fas fa-link"></i><span>Copy link</span></a>
        <a class="col-auto pt-0 pb-2" target="blank" rel="noreferrer" href="http://www.facebook.com/share.php?u={{ share_url|urlencode }}"><i class="fab fa-facebook"></i><span>Facebook</span></a>
        <a class="col-auto pt-0 pb-2" target="blank" rel="noreferrer" href="https://twitter.com/intent/tweet?url={{ share_url|urlencode }}&text={{ share_text|urlencode }}"><i class="fab fa-twitter"></i><span>Twitter</span></a>
        <a class="col-auto pt-0 pb-2 mastodon-share" target="blank" rel="noreferrer" href="https://mastodonshare.com/?url={{ share_url|urlencode }}&text={{ share_text|urlencode }}"><i class="fab fa-mastodon"></i><span>Mastodon</span></a>
      </div>
    </div>
    <div class="col-lg-9" id="story-full">
      {{ this.body }}
      <p class="font-italic">{{ _("{} is a pseudonym. This is an anonymous story submitted by a Tor user.").format(this.title) }}</p>
      {%- for cat in this.category %}
      <a class="btn btn-outline-primary small mt-3" href="../#{{ cat }}">{{ _(bag('story-categories')[cat].title) }}</a>
      {%- endfor %}
    </div>
  </div>
</div>
<script type="text/javascript">
// copy current page link to clipboard
const copy_link = document.querySelector('.copy-link');
copy_link.addEventListener('click', (e) => {
  e.preventDefault();
  let url = '{{ share_url }}'
  navigator.clipboard.writeText(url).then(function() {});
});
// share to Mastodon, prompt for user's instance
const mastodon_link = document.querySelector('.mastodon-share');
mastodon_link.addEventListener('click', (e) => {
  let instance = window.prompt(
    'Please enter your Mastodon instance',
    'mastodon.social'
  );
  if (!instance) {
    e.preventDefault();
  } else {
    mastodon_link.href = 'https://' + instance + '/share?url={{ share_url|urlencode }}&text={{ share_text|urlencode }} ';
  }
});
</script>