Merge pull request #99 from offen/development

update index and blog overview, add article

homepage/content/articles/0010-milestone-1.md

@@ -2,14 +2,10 @@ title: Laying the foundation for fair web analytics
 description: Our milestone 1 achievements include extensible architecture, a localization option and an improved server structure.
 date: 2019-12-12
 slug: laying-foundation-for-fair-web-analytics
-sitemap_priority: 0.7
+sitemap_priority: 0.6
-sm_image_url: /theme/images/offen-blog-0010-milestone1.jpg
+image_url: /theme/images/offen-blog-0010-milestone1.jpg
+author: Hendrik Niefeld
 
-<figure class="larger-image mb5">
-<img alt="Milestone 1 - Laying the foundation for fair web analytics" src="/theme/images/offen-blog-0010-milestone1.jpg"/>
-</figure>
-
-###### 12 Dec 2019, Hendrik Niefeld
 # Episode One — Laying the foundation for fair web analytics
 
 Milestone 1 is completed. This is what we've achieved in the last six weeks.

homepage/content/articles/0020-untold-roads.md

@@ -3,13 +3,9 @@ description: Onboarding users onto a product that is still in development needs
 date: 2020-01-19
 slug: untold-roads-versioning-early-stage-software
 sitemap_priority: 0.7
-sm_image_url: /theme/images/offen-blog-0020-untoldRoads.jpg
+image_url: /theme/images/offen-blog-0020-untoldRoads.jpg
+author: Frederik Ring
 
-<figure class="larger-image mb5">
-<img alt="Untold roads" src="/theme/images/offen-blog-0020-untoldRoads.jpg"/>
-</figure>
-
-###### 19 Jan 2020, Frederik Ring
 # Untold roads to v1.0
 
 After a lot of experimenting, taking detours and having unanticipated revelations while building the foundation for Offen over the last months, the state of the project is starting to settle, and we are eager to get ready for users to install our software, and use it for transparently collecting usage statistics for their websites and applications.

homepage/content/articles/0030-milestone-2.md

@@ -2,14 +2,10 @@ title: Collecting data securely
 description: Our key milestone 2 features are user consent, improved crypto implementation and an extended set of stats.
 date: 2020-01-31
 slug: collecting-data-securely
-sitemap_priority: 0.7
+sitemap_priority: 0.6
-sm_image_url: /theme/images/offen-blog-0030-milestone-2.jpg
+image_url: /theme/images/offen-blog-0030-milestone-2.jpg
+author: Hendrik Niefeld
 
-<figure class="larger-image mb5">
-<img alt="Milestone 2 - Collecting data securely" src="/theme/images/offen-blog-0030-milestone-2.jpg"/>
-</figure>
-
-###### 31 Jan 2020, Hendrik Niefeld
 # Episode Two  — Collecting data securely
 
 We finished milestone 2. Here is what we' ve been doing for the last 8 weeks.

homepage/content/articles/0040-test-offen-today.md

@@ -3,13 +3,9 @@ description: Help us take a step forward. Download or deploy Offen today and giv
 date: 2020-03-04
 slug: test-offen-today
 sitemap_priority: 0.7
-sm_image_url: /theme/images/offen-blog-0040-test-offen-today.jpg
+image_url: /theme/images/offen-blog-0040-test-offen-today.jpg
+author: Hendrik Niefeld
 
-<figure class="larger-image mb5">
-<img alt="Test Offen today" src="/theme/images/offen-blog-0040-test-offen-today.jpg"/>
-</figure>
-
-###### 04 Mar 2020, Hendrik Niefeld
 # Test Offen today
 
 We’re excited to present our first version that is officially ready for testing.

homepage/content/articles/0050-milestone-3.md

@@ -2,14 +2,10 @@ title: Displaying data
 description: Our milestone 3 achievements include an improved UX, a Heroku deploy option and full Safari support.
 date: 2020-04-13
 slug: displaying-data
-sitemap_priority: 0.7
+sitemap_priority: 0.6
-sm_image_url: /theme/images/offen-blog-0050-milestone-3.jpg
+image_url: /theme/images/offen-blog-0050-milestone-3.jpg
+author: Frederik Ring
 
-<figure class="larger-image mb5">
-<img alt="Milestone 3 - Displaying data" src="/theme/images/offen-blog-0050-milestone-3.jpg"/>
-</figure>
-
-###### 14 Apr 2020, Frederik Ring
 # Episode Three  — Displaying data
 
 In the middle of strange times Milestone 3 - "Displaying Data" - is done. This means we focused on how we aggregate and display the data Offen collects in a way that operators can use it to improve their services and users can understand what is being collected and what it means for their privacy.

homepage/content/articles/0060-milestone-4.md

@@ -2,16 +2,11 @@ title: Managing data
 description: Milestone 4 comes with enhanced account management, UX improvements and an updated demo version.
 date: 2020-06-09
 slug: managing-data
-sitemap_priority: 0.7
+sitemap_priority: 0.6
-sm_image_url: /theme/images/offen-blog-0060-milestone-4.jpg
+image_url: /theme/images/offen-blog-0060-milestone-4.jpg
+image_caption: <a class="link b dim moon-gray" target="_blank" href="https://www.flickr.com/photos/wocintechchat/25926651781/in/album-72157664006621903/">Photo</a> by WOCinTechChat / <a class="link b dim moon-gray" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>
+author: Frederik Ring
 
-<figure class="larger-image mb5">
-<img alt="Milestone 4 - Managing data" src="/theme/images/offen-blog-0060-milestone-4.jpg"/>
-</figure>
-
-##### [Photo](https://www.flickr.com/photos/wocintechchat/25926651781/in/album-72157664006621903/){: target="_blank"} by WOCinTechChat / [CC BY 3.0](https://creativecommons.org/licenses/by/3.0/){: target="_blank"}
-
-###### 09 Jun 2020, Frederik Ring
 # Episode Four  — Managing data
 
 Milestone 4 - "Managing data" - has been an important one for us. Finishing it means Offen is now close to being feature complete in the scope of our initial plans, and we can start transitioning into a Beta state, meaning we can finally offer a stable product for users to use in production environments.

homepage/content/articles/0070-budget.md

@@ -3,13 +3,8 @@ description: Here are some real world options for hosting Offen on a budget. Let
 date: 2020-06-30
 slug: hosting-offen-on-budget
 sitemap_priority: 0.7
-sm_image_url: /theme/images/offen-blog-0070-budget.jpg
+image_url: /theme/images/offen-blog-0070-budget.jpg
-
+author: Frederik Ring
-<figure class="larger-image mb5">
-<img alt="Hosting on a budget" src="/theme/images/offen-blog-0070-budget.jpg"/>
-</figure>
-
-###### 30 Jun 2020, Frederik Ring
 
 # Hosting Offen on a budget
 

homepage/content/articles/0080-beta.md

@@ -0,0 +1,31 @@
+title: Let's build a web that is privacy friendly and fair
+description: What does the term 'privacy friendly' actually stand for? Mostly it's just about technical issues that don't tackle the underlying problem.
+date: 2020-07-06
+slug: privacy-friendly-and-fair-web
+sitemap_priority: 0.7
+image_url: /theme/images/offen-blog-0080-beta.jpg
+author: Hendrik Niefeld
+
+# Let's build a web that is privacy friendly and fair
+
+Terms such as 'privacy protection', 'privacy-first', 'privacy-focused' or 'privacy friendly' have been a major talking point for quite some time now.  
+The field of web analytics is no exception. Here these terms are used to describe *alternative, privacy-oriented approaches* and appear regularly in blog posts, readme files and tweets. Projects like Matomo, Simple Analytics, Plausible or GoatCounter use them very gladly and in large letters.
+
+But what do these 'privacy' terms actually stand for? What associations do they trigger in operators who have a legitimate interest in knowing how their web applications are used?
+
+It often seems that developers of analytics tools only really want to communicate technical peculiarities with them. There is the 'we do not use cookies' approach and the 'essential cookies only' solution. Sometimes authors use these terms to summarize statements such as 'we're not selling your data' or 'this is GDPR compliant'.
+
+However, operators are given the impression that installing the respective software does something really great for their users. Whether it is that annoying banners are waived or that data will not be disclosed to third parties. And by the way, the 'GDPR problem' is also solved and there is no need to worry about legal action. What more could you want?
+
+We as Offen are convinced that all these 'privacy friendly' approaches are an improvement, but they are still not enough to create a web that is  better. For this, most of these solutions simply *lack the necessary degree of fairness.*
+
+Users continue to be unaware what kind of data is collected and how it is being used. They still cannot access or delete it. This leaves them in the dark about their situation and does not help to reduce the latent distrust against web operators. A problem that GDPR also addresses explicitly under the headline 'Rights of the data subject'.
+
+This is why we develop a fair and open web analytics tool that finally treats *operators and users as equal parties.*  
+Usage data is only collected after opt in. If users choose to opt in, they have full access to their data and can also delete it. The collected data is presented to the user with explanations that describe why a particular metric is relevant and what the privacy implications are.  
+At the same time essential metrics give operators the chance to gain valuable insights. They can improve their services without violating the privacy of their users.
+
+By the way, Offen is in beta phase now. [Please take a look and give it a try.](/try-demo/)
+
+We believe it is time to go one step further. This is how we want to support a web that is *privacy friendly and fair at last.* Are you as enthusiastic about it as we are?  
+Drop us a [tweet](https://twitter.com/hioffen){: target="_blank"} or [email](mailto:hioffen@posteo.de){: target="_blank"} and feel invited to work together to drive this idea forward.

homepage/pelicanconf.py

@@ -70,16 +70,17 @@ DECORATE_CONTENT = {
     'h3 a': ['link', 'b', 'dim'],
     'h4 a': ['link', 'b', 'dim'],
     'h5 a': ['normal', 'moon-gray'],
+    'li a': ['link', 'b', 'dim'],
     'a:not([data-button])': ['gray'],
     'h1': ['f2', 'normal', 'lh-title', 'mt3', 'ma0', 'mb3'],
     'h2': ['f25', 'normal', 'lh-title', 'mt4', 'ma0', 'mb3'],
     'h3': ['f5', 'normal', 'mt5', 'ma0', 'mb3', '.cclr-fnt-black-mid'],
-    'h4': ['f5', 'b', 'mt4', 'ma0', 'mb1'], # text over button
+    'h4': ['f5', 'normal', 'mt4', 'ma0', 'mb1'], # text over button
-    'h5': ['f7', 'normal', 'ma0', 'nt5', 'mb5', 'moon-gray'], # image credits
+    'h5': ['f5', 'normal', 'mt2', 'ma0', 'mb1'], # not used
-    'h6': ['f5', 'lh-solid', 'normal', 'ma0', 'light-silver'], # date
+    'h6': ['f5', 'lh-solid', 'normal', 'ma0', 'light-silver'], # not used
     'p': ['ma0', 'pb3'],
     'blockquote': ['f5', 'i', 'ma0', 'ml4-ns', 'ml3'],
-    'hr': ['mt5', 'mb3', 'b--black-05'],
+    'hr': ['mt5', 'mb3', 'b--black-05']
 }
 
 DOCS_URL = 'https://docs.offen.dev'

homepage/theme/static/css/fix.css

@@ -348,6 +348,7 @@ i {
 pre {
 	overflow-x: auto;
 	padding: 3rem 2rem 3rem 2rem;
+	margin: 0 0 3rem 0;
 	color: #39352A;
 	background-color: #EEEEEE;
 }

homepage/theme/templates/archives.html

@@ -16,9 +16,12 @@
       <div class="mw7 center pt5 pb5 ph3 ph5-ns bg-white">
           <figure class="larger-image mb4">
             <a href="{{ article.slug }}">
-              <img alt="{{ article.title }}" src="{{ article.sm_image_url }}"/>
+              <img alt="{{ article.title }}" src="{{ article.image_url }}"/>
             </a>
           </figure>
+          <h6 class="f5 lh-solid normal ma0 light-silver">
+            {{ article.date | strftime('%d %b %Y') }}{% if article.modified %}(article.updated {{ article.modified | strftime('%d %b %Y') }}){% endif %}, {{ article.author }}
+          </h6>
           <h1 class="f2 normal lh-title mt3 ma0 mb3 light-silver">
             <a href="{{ article.slug }}" class="link b dim gray">{{ article.title }}</a>
           </h1>

homepage/theme/templates/article.html

@@ -3,8 +3,12 @@
 {% set title = article.title + " | Offen" %}
 {% set description = article.description %}
 {% set href = article.save_as.replace('index.html', '') %}
-{% set sm_image_url = article.sm_image_url %}
+{% set image_url = article.image_url %}
+{% set image_caption = article.image_caption %}
 {% set no_stats = article.no_stats %}
 {% set template = article.template %}
 {% set content = article.content %}
+{% set date = article.date %}
+{% set author = article.author %}
+{% set modified = article.modified %}
 {% set cta_1 = 'true' %}

homepage/theme/templates/base.html

@@ -15,7 +15,7 @@
   <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 }}{{ sm_image_url or '/theme/images/offen-logo-social-media.jpg' }}">
+  <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' %}
@@ -74,8 +74,25 @@
     </div>
       {% block content %}
         <div class="w-100 mt5-ns gray">
-          <div class="mw7 center pt5 pb5 ph3 ph5-ns bg-white">
+          <div class="mw7 center pb5 bg-white">
-            {{ content }}
+            {% if image_url %}
+              <figure class="ma0">
+                <img alt="{{ title }}" src="{{ image_url }}"/>
+                {% if image_caption %}
+                  <figcaption class="ph3 ph5-ns f7 normal moon-gray">
+                    {{ image_caption }}
+                  </figcaption>
+                {% endif %}
+              </figure>
+            {% endif %}
+            <div class="ph3 ph5-ns pt5">
+              {% if date and author %}
+                <h6 class="f5 lh-solid normal ma0 light-silver">
+                  {{ date | strftime('%d %b %Y') }}{% if modified %}(updated {{ modified | strftime('%d %b %Y') }}){% endif %}, {{ author }}
+                </h6>
+              {% endif %}
+              {{ content }}
+            </div>
           </div>
         </div>
       {% endblock %}

homepage/theme/templates/getstarted.html

@@ -31,10 +31,6 @@
         <a class="w-100 w5-ns tc b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid mb6 white cclr-bg-black-mid" href="{{ HEROKU_DIRECT_URL }}" target="_blank" rel="noopener">Deploy to Heroku</a>
       </div>
 
-      <p class="tc ma0 mb4 mh5-ns gray">
-        Be aware that things can still contain issues and that the upgrade path may be broken with upcoming releases.
-      </p>
-
       <hr class="ma0 mb5 b--black-05">
 
       <h3 class="f25 normal ma0 mb5">

homepage/theme/templates/index.html

@@ -516,7 +516,7 @@
                         <td class="wx-table-a truncate pv2 pl2 pr1"></td>
                         <td class="wx-table-b truncate pv2 pl2 pr1 gray">Google Analytics</td>
                         <td class="wx-table-b truncate pv2 pl2 pr1 gray">Matomo On-Premise</td>
-                        <td class="wx-table-c truncate pv2 pl2 pr1 gray">Fathom</td>
+                        <td class="wx-table-c truncate pv2 pl2 pr1 gray">Plausible</td>
                         <td class="wx-table-d truncate pv2 pl2 pr1">Offen</td>
                       </tr>
 
@@ -558,7 +558,7 @@
                         </td>
                         <td class="truncate pv2 pl2 pr1">
                           <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-                          <circle cx="7.5" cy="7.5" r="7.5" fill="#CCCCCC"/>
+                          <circle cx="7.5" cy="7.5" r="7.5" fill="#F7BF08"/>
                           </svg>
                         </td>
                         <td class="wx-table-d truncate pv2 pl2 pr1">

homepage/theme/templates/page.html

@@ -3,7 +3,7 @@
 {% set title = page.title %}
 {% set description = page.description %}
 {% set href = page.save_as.replace('index.html', '') %}
-{% set sm_image_url = page.sm_image_url %}
+{% set image_url = page.image_url %}
 {% set no_stats = page.no_stats %}
 {% set template = page.template %}
 {% set content = page.content %}