mirror of
https://github.com/offen/website.git
synced 2024-12-23 21:30:22 +01:00
387 lines
19 KiB
HTML
387 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
{% block head %}
|
|
<head>
|
|
<title>
|
|
{% block title %}{{ title }}{% endblock %}
|
|
</title>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' *.offen.dev platform.twitter.com; frame-src 'self' *.offen.dev platform.twitter.com; style-src 'self' 'unsafe-inline'">
|
|
<meta name="referrer" content="origin">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
|
|
<meta name="description" content="{{ description }}">
|
|
<meta property="og:site_name" content="{{ SITENAME }}">
|
|
<meta property="og:locale" content="{{ DEFAULT_LANG }}">
|
|
<meta property="og:title" content="{{ title }}">
|
|
<meta property="og:description" content="{{ description }}">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="{{ SITEURL }}/{{ href }}">
|
|
<meta property="og:image" content="{{ SITEURL }}{{ image_url or '/theme/images/offen-logo-social-media.jpg' }}">
|
|
<meta name="twitter:image:alt" content="Offen logo">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
{% if template != 'archives' %}
|
|
<link rel="canonical" href="{{ SITEURL }}/{{ href }}">
|
|
{% endif %}
|
|
<link rel="shortcut icon" type="image/x-icon" href="/theme/images/favicon.ico">
|
|
{% assets filters="postcss", output="css/style.min.css", "css/tachyons.min.css", "css/fix.css", "css/fonts.css" %}
|
|
<link rel="stylesheet" href="/{{ ASSET_URL }}">
|
|
{% endassets %}
|
|
<link rel="preload" href="/theme/fonts/rubik-v9-latin-regular.woff2" as="font" crossorigin>
|
|
<link rel="preload" href="/theme/fonts/rubik-v9-latin-500.woff2" as="font" crossorigin>
|
|
{% if OFFEN_ACCOUNT_ID and not no_stats %}
|
|
<script async src="https://offen.offen.dev/script.js" data-account-id="{{ OFFEN_ACCOUNT_ID }}"></script>
|
|
{% endif %}
|
|
<link rel="alternate" type="application/rss+xml" title="RSS" href="/feeds/all.rss.xml">
|
|
<link rel="alternate" type="application/atom+xml" title="Atom" href="/feeds/all.atom.xml">
|
|
</head>
|
|
{% endblock %}
|
|
<body class="{{ template }} f5 rubik lh-copy cclr-fnt-black-mid cclr-bg-black-mid no-js">
|
|
<script>
|
|
document.body.classList.remove('no-js')
|
|
</script>
|
|
<div class="cclr-bg-white-dark">
|
|
<div class="menu w-100 cclr-bg-yellow-mid">
|
|
<section class="nav-bar">
|
|
<div class="nav-container">
|
|
<div class="icon flex">
|
|
<a class="link dim" href="/"><img src="/theme/images/offen-icon-white.svg" alt="Offen logo" width="37" height="40" class="logo"></a>
|
|
<header>
|
|
<a class="link dim" href="/"><p class="fLogo normal ma0 ml2 white">Offen</p></a>
|
|
</header>
|
|
</div>
|
|
{% if not funnel %}
|
|
<nav id="navigation">
|
|
<div class="nav-mobile">
|
|
<span id="nav-toggle">
|
|
<span></span>
|
|
</span>
|
|
</div>
|
|
<ul class="nav-list">
|
|
{% if not index %}
|
|
<li>
|
|
<a class="b link dim cclr-fnt-black-mid" href="/">Summary</a>
|
|
</li>
|
|
{% endif %}
|
|
<li>
|
|
<a class="b link dim cclr-fnt-black-mid" href="/blog/">Blog</a>
|
|
</li>
|
|
<li>
|
|
<a class="b link dim cclr-fnt-black-mid" href="/about/">About</a>
|
|
</li>
|
|
<li>
|
|
<a class="b link dim cclr-fnt-black-mid" href="{{ GITHUB_REPO }}" rel="noopener" target="_blank">GitHub</a>
|
|
</li>
|
|
<li>
|
|
<a class="b link dim cclr-fnt-black-mid" href="{{ DOCS_URL }}" rel="noopener" target="_blank">Docs</a>
|
|
</li>
|
|
<li>
|
|
<a class="b link dim" href="/get-started/">Get started</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
{% endif %}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
{% block content %}{% endblock %}
|
|
|
|
<footer>
|
|
{% if funnel %}
|
|
<footer class="w-100 cclr-bg-mint-mid ph4 pb4">
|
|
<div id="bg-pattern">
|
|
<div class="flex flex-row-l flex-column w-100-l mw6-m center-m pt4 pb6">
|
|
<div class="w-25-l mt3 mr3 cclr-fnt-black-mid">
|
|
<p class="ma0">
|
|
<a class="b link dim cclr-fnt-black-mid" href="/">Offen</a>
|
|
</p>
|
|
<p class="ma0">Fair Web Analytics</p>
|
|
</div>
|
|
<div class="w-25-l mt3 mr3">
|
|
</div>
|
|
<div class="w-25-l mt3 mr3">
|
|
</div>
|
|
<div class="w-25-l mt3 tr-l">
|
|
{{ BUILD_DATE | strftime('%B %Y') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
{% block outro %}
|
|
<div class="w-100 cclr-bg-yellow-mid">
|
|
<div class="pt3 pb4 bg-pattern">
|
|
<div class="mw8 center">
|
|
|
|
{% if bottom_cta == 'index' %}
|
|
<div class="flex flex-wrap justify-center tc ph3 pv5">
|
|
<div class="ph4-ns cclr-bg-yellow-mid">
|
|
<h2 class="f3 ma0 mb3 lh-title">
|
|
<a class="b link dim cclr-fnt-black-mid" href="/">How do fair web analytics work?</a>
|
|
</h2>
|
|
<a class="b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="/" rel="noopener">Open summary</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if bottom_cta == 'blog' %}
|
|
<div class="flex flex-wrap justify-center tc ph3 pv5">
|
|
<div class="ph4-ns cclr-bg-yellow-mid">
|
|
<h2 class="f3 ma0 mb3 lh-title">
|
|
<a class="b link dim cclr-fnt-black-mid" href="/blog/">Continue reading</a>
|
|
</h2>
|
|
<a class="b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="/blog/" rel="noopener">See all blog posts</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if bottom_cta == 'protocol' %}
|
|
<div class="ph3 ph0-m pv5">
|
|
<h2 class="f3 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid">
|
|
Also on our blog
|
|
</h2>
|
|
<div class="mw7 center flex flex-wrap ph5-ns">
|
|
<div class="w-100 w-50-l">
|
|
<figure class="ma0 pr3-l mb3 mb0-l">
|
|
<a href="/blog/offen-protocol/">
|
|
<img alt="Introducing the Offen Protocol" src="/theme/images/offen-blog-0210-offen-protocol.jpg">
|
|
</a>
|
|
</figure>
|
|
</div>
|
|
<div class="w-100 w-50-l cclr-bg-yellow-mid">
|
|
<div class="pl3-l">
|
|
<h3 class="f3 normal lh-title ma0 mb2">
|
|
<a href="/blog/offen-protocol/" class="link b dim cclr-fnt-black-mid">Introducing the Offen Protocol</a>
|
|
</h3>
|
|
<p class="ma0">
|
|
A new vocabulary for software that aims to handle usage data in a transparent manner. <a href="/blog/offen-protocol/" class="link b dim cclr-fnt-black-mid">Read more</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if bottom_cta == 'disclose' %}
|
|
<div class="ph3 ph0-m pv5">
|
|
<h2 class="f3 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid">
|
|
Also on our blog
|
|
</h2>
|
|
<div class="mw7 center flex flex-wrap ph5-ns">
|
|
<div class="w-100 w-50-l">
|
|
<figure class="ma0 pr3-l mb3 mb0-l">
|
|
<a href="/blog/analytics-txt/">
|
|
<img alt="Disclose what you collect" src="/theme/images/offen-blog-0180-analyticstxt.jpg">
|
|
</a>
|
|
</figure>
|
|
</div>
|
|
<div class="w-100 w-50-l cclr-bg-yellow-mid">
|
|
<div class="pl3-l">
|
|
<h3 class="f3 normal lh-title ma0 mb2">
|
|
<a href="/blog/analytics-txt/" class="link b dim cclr-fnt-black-mid">Disclose what you collect</a>
|
|
</h3>
|
|
<p class="ma0">
|
|
Why we drafted a standard that allows you to disclose information about your use of analytics software and user tracking. <a href="/blog/analytics-txt/" class="link b dim cclr-fnt-black-mid">Read more</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if bottom_cta == 'cookie' %}
|
|
<div class="ph3 ph0-m pv5">
|
|
<h2 class="f3 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid">
|
|
Also on our blog
|
|
</h2>
|
|
<div class="mw7 center flex flex-wrap ph5-ns">
|
|
<div class="w-100 w-50-l">
|
|
<figure class="ma0 pr3-l mb3 mb0-l">
|
|
<a href="/blog/privacy-cookies/">
|
|
<img alt="Privacy focus? Consider the cookies" src="/theme/images/offen-blog-0140-privacy-cookies.jpg">
|
|
</a>
|
|
</figure>
|
|
</div>
|
|
<div class="w-100 w-50-l cclr-bg-yellow-mid">
|
|
<div class="pl3-l">
|
|
<h3 class="f3 normal lh-title ma0 mb2">
|
|
<a href="/blog/privacy-cookies/" class="link b dim cclr-fnt-black-mid">Privacy focus? Consider the cookie</a>
|
|
</h3>
|
|
<p class="ma0">
|
|
Using cookies does not necessarily equal tracking your users. Learn how you can use cookies to respect the privacy of your users. <a href="/blog/privacy-cookies/" class="link b dim cclr-fnt-black-mid">Read more</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if bottom_cta == 'quality' %}
|
|
<div class="ph3 ph0-m pv5">
|
|
<h2 class="f3 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid">
|
|
Also on our blog
|
|
</h2>
|
|
<div class="mw7 center flex flex-wrap ph5-ns">
|
|
<div class="w-100 w-50-l">
|
|
<figure class="ma0 pr3-l mb3 mb0-l">
|
|
<a href="/blog/opt-in-quality/">
|
|
<img alt="Opt-in for quality insights" src="/theme/images/offen-blog-0120-opt-in-quality.jpg">
|
|
</a>
|
|
</figure>
|
|
</div>
|
|
<div class="w-100 w-50-l cclr-bg-yellow-mid">
|
|
<div class="pl3-l">
|
|
<h3 class="f3 normal lh-title ma0 mb2">
|
|
<a href="/blog/opt-in-quality/" class="link b dim cclr-fnt-black-mid">Opt-in for quality insights</a>
|
|
</h3>
|
|
<p class="ma0">
|
|
Collecting data only with user consent has a less obvious implication: the quality of insights from web analytics increases. <a href="/blog/opt-in-quality/" class="link b dim cclr-fnt-black-mid">Read more</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if bottom_cta == 'matomo' %}
|
|
<div class="ph3 ph0-m pv5">
|
|
<h2 class="f3 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid">
|
|
Also on our blog
|
|
</h2>
|
|
<div class="mw7 center flex flex-wrap ph5-ns">
|
|
<div class="w-100 w-50-l">
|
|
<figure class="ma0 pr3-l mb3 mb0-l">
|
|
<a href="/blog/matomo-alternative/">
|
|
<img alt="Why Offen is a valid Matomo alternative" src="/theme/images/offen-blog-0100-Matomo.jpg">
|
|
</a>
|
|
</figure>
|
|
</div>
|
|
<div class="w-100 w-50-l cclr-bg-yellow-mid">
|
|
<div class="pl3-l">
|
|
<h3 class="f3 normal lh-title ma0 mb2">
|
|
<a href="/blog/matomo-alternative/" class="link b dim cclr-fnt-black-mid">Why Offen is a valid Matomo alternative</a>
|
|
</h3>
|
|
<p class="ma0">
|
|
This brief comparison of both tools gives you a first insight into the field of fair and lightweight web analytics. <a href="/blog/matomo-alternative/" class="link b dim cclr-fnt-black-mid">Read more</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if bottom_cta == 'fair' %}
|
|
<div class="ph3 ph0-m pv5">
|
|
<h2 class="f3 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid">
|
|
Also on our blog
|
|
</h2>
|
|
<div class="mw7 center flex flex-wrap ph5-ns">
|
|
<div class="w-100 w-50-l">
|
|
<figure class="ma0 pr3-l mb3 mb0-l">
|
|
<a href="/blog/privacy-friendly-and-fair-web/">
|
|
<img alt="Let's build a web that is privacy friendly and fair" src="/theme/images/offen-blog-0080-beta.jpg">
|
|
</a>
|
|
</figure>
|
|
</div>
|
|
<div class="w-100 w-50-l cclr-bg-yellow-mid">
|
|
<div class="pl3-l">
|
|
<h3 class="f3 normal lh-title ma0 mb2">
|
|
<a href="/blog/privacy-friendly-and-fair-web/" class="link b dim cclr-fnt-black-mid">Let's build a web that is privacy friendly and fair</a>
|
|
</h3>
|
|
<p class="ma0">
|
|
What does the term 'privacy friendly' actually stand for? Mostly it's just about technical issues that don't tackle the underlying problem. <a href="/blog/privacy-friendly-and-fair-web/" class="link b dim cclr-fnt-black-mid">Read more</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if bottom_cta == 'budget' %}
|
|
<div class="ph3 ph0-m pv5">
|
|
<h2 class="f3 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid">
|
|
Also on our blog
|
|
</h2>
|
|
<div class="mw7 center flex flex-wrap ph5-ns">
|
|
<div class="w-100 w-50-l">
|
|
<figure class="ma0 pr3-l mb3 mb0-l">
|
|
<a href="/blog/hosting-offen-on-budget/">
|
|
<img alt="Hosting Offen on a budget" src="/theme/images/offen-blog-0070-budget.jpg">
|
|
</a>
|
|
</figure>
|
|
</div>
|
|
<div class="w-100 w-50-l cclr-bg-yellow-mid">
|
|
<div class="pl3-l">
|
|
<h3 class="f3 normal lh-title ma0 mb2">
|
|
<a href="/blog/hosting-offen-on-budget/" class="link b dim cclr-fnt-black-mid">Hosting Offen on a budget</a>
|
|
</h3>
|
|
<p class="ma0">
|
|
Here are some real world options for hosting Offen on a budget. Let's compare how they relate in terms of ease of deployment, performance and pricing. <a href="/blog/hosting-offen-on-budget/" class="link b dim cclr-fnt-black-mid">Read more</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
<div class="w-100 cclr-bg-black-mid gray ph4 pb4">
|
|
<div class="flex flex-row-l flex-column w-100-l mw6-m center-m pt4 pb6">
|
|
<div class="w-25-l mt3 mr3 cclr-fnt-yellow-mid">
|
|
<p class="ma0">
|
|
<a class="b link dim cclr-fnt-yellow-mid" href="/">Offen</a>
|
|
</p>
|
|
<p class="ma0">Fair Web Analytics</p>
|
|
</div>
|
|
<div class="w-25-l mt3 mr3">
|
|
<p class="ma0">
|
|
<a class="link b dim gray" href="mailto:{{ CONTACT_EMAIL }}">{{CONTACT_EMAIL}}</a>
|
|
</p>
|
|
<p class="ma0">
|
|
<a class="link b dim gray" target="_blank" href="/theme/{{ PGP_KEY_FILE }}">PGP Key</a>
|
|
</p>
|
|
<p class="ma0 mt2">
|
|
<a class="link b dim gray" href="/blog/">Blog</a>
|
|
</p>
|
|
<p class="ma0">
|
|
<a class="link b dim gray" href="{{ DOCS_URL }}" rel="noopener" target="_blank">Docs</a>
|
|
</p>
|
|
<p class="ma0">
|
|
<a class="link b dim gray" href="{{ GITHUB_REPO }}" rel="noopener" target="_blank">GitHub</a>
|
|
</p>
|
|
</div>
|
|
<div class="w-25-l mt3 mr3">
|
|
<p class="ma0">
|
|
<a class="link b dim gray" href="{{ PATREON_URL }}" rel="noopener" target="_blank">Patreon</a>
|
|
</p>
|
|
<p class="ma0">
|
|
<a class="link b dim gray" href="{{ MASTODON_URL }}" rel="noopener" target="_blank">Mastodon</a>
|
|
</p>
|
|
<p class="ma0 mt2">
|
|
<a class="link b dim gray" href="/legal-privacy/">Legal & Privacy</a>
|
|
</p>
|
|
<p class="ma0">
|
|
<a class="link b dim gray" href="{{ OFFEN_AUDITORIUM_URL }}" rel="noopener" target="_blank">Access your usage data</a>
|
|
</p>
|
|
</div>
|
|
<div class="w-25-l mt3 tr-l">
|
|
{{ BUILD_DATE | strftime('%B %Y') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</footer>
|
|
</div>
|
|
{% block scripts %}
|
|
{% assets filters="rjsmin", output="scripts/packed.js", "scripts/menu.js", "scripts/fade.js" %}
|
|
<script src="/{{ ASSET_URL }}"></script>
|
|
{% endassets %}
|
|
{% endblock %}
|
|
</body>
|
|
</html>
|