Merge pull request #128 from offen/development

update blog ctas and menu links

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

@@ -5,7 +5,7 @@ slug: displaying-data
 sitemap_priority: 0.6
 image_url: /theme/images/offen-blog-0050-milestone-3.jpg
 author: Frederik Ring
-bottom_cta: blog
+bottom_cta: matomo
 
 # Episode Three — Displaying data
 
@@ -30,7 +30,7 @@ The Auditorium is where both users and operators access and manage usage data. O
 
 The user facing Auditorium is now annotated with explanations for each metric and also explains analytics-specific terms and answers frequently asked questions. This has been implemented in [PR 339](https://github.com/offen/offen/pull/339).
 
-<img class="screencast mt3 mb2" alt="browser setup" src="/theme/images/offen-blog-0050-explainer.gif"/> 
+<img class="screencast mt3 mb2" alt="browser setup" src="/theme/images/offen-blog-0050-explainer.gif"/>
 
 In addition to that we added new metrics and improved the overall user experience for both users and operators alike. Relevant PRs are [331](https://github.com/offen/offen/pull/331), [328](https://github.com/offen/offen/pull/328), [327](https://github.com/offen/offen/pull/327), [324](https://github.com/offen/offen/pull/324), [319](https://github.com/offen/offen/pull/319), [317](https://github.com/offen/offen/pull/317), [291](https://github.com/offen/offen/pull/291)
 
@@ -42,7 +42,7 @@ Operators that are using Offen to improve their services are likely to work in t
 
 The command line can seem daunting when you don't use it regularly. This is why we added an in-browser setup screen for Offen. Instead of performing the initial setup using the `offen setup` command from the CLI, operators who prefer to do so can now use their browser to navigate to the `/setup` URL of their installation and perform the initial setup there. We hope this helps us gaining further traction with semi-technical users that want to use privacy friendly tools. This has been implemented in [PR 299](https://github.com/offen/offen/pull/299).
 
-<img class="screencast mt3 mb2" alt="browser setup" src="/theme/images/offen-blog-0050-browserSetup.gif"/> 
+<img class="screencast mt3 mb2" alt="browser setup" src="/theme/images/offen-blog-0050-browserSetup.gif"/>
 
 ### Goodbye, Choo
 
@@ -67,7 +67,7 @@ Offen generates client side keys for encrypting data for each user. At the end o
 
 Self hosted software is a great fit for privacy focused software like Offen. Yet, it can seem daunting to non-technical users and make them stick to established SaaS solutions longer than needed. This is why we put a lot of effort into finding easy "1-click" options to deploy an Offen instance. In Milestone 3 we have created a 1-click solution for deploying Offen to Heroku: [https://github.com/offen/heroku](https://github.com/offen/heroku). Using free resources only, people interested in running Offen can now deploy a production ready instance to Heroku in less than 1 minute. We hope this encourages website operator to consider self-hosted software and Offen as a real option. Required changes for this were implemented in [PR 287](https://github.com/offen/offen/pull/287).
 
-<img class="screencast mt3 mb2" alt="browser setup" src="/theme/images/offen-blog-0050_oneClickDeploy.gif"/> 
+<img class="screencast mt3 mb2" alt="browser setup" src="/theme/images/offen-blog-0050_oneClickDeploy.gif"/>
 
 To offer even more options we are also looking into building a 1-click option for other platforms like YunoHost and DigitalOcean very soon.
 

homepage/content/articles/0120-opt-in-quality.md

@@ -5,7 +5,7 @@ slug: opt-in-quality
 sitemap_priority: 0.7
 image_url: /theme/images/offen-blog-0120-opt-in-quality.jpg
 author: Hendrik Niefeld
-bottom_cta: budget
+bottom_cta: matomo
 
 # Opt in for quality insights
 

homepage/content/pages/about.md

@@ -1,7 +1,7 @@
 title: About | Offen
 description: Who we are, who supports us and how you can can get in touch.
 slug: about
-bottom_cta: fair
+bottom_cta: matomo
 
 ## About
 

homepage/content/pages/deep-dive.md

@@ -2,7 +2,7 @@ title: Deep dive | Offen
 description: What do users know about their data? How can they access it? Do operators benefit from a careful handling of user data? Does Offen work in accordance with GDPR?
 slug: deep-dive
 sitemap_priority: 0.7
-bottom_cta: budget
+bottom_cta: quality
 
 ## Deep dive
 

homepage/content/pages/legal-notice.md

@@ -2,7 +2,7 @@ title: Legal Notice | Offen
 description: Information in accordance with Section 5 TMG
 slug: legal-notice
 exclude_from_sitemap: true
-bottom_cta: fair
+bottom_cta: quality
 
 ## Legal Notice
 
@@ -15,5 +15,8 @@ Torfstr. 22
 E-Mail: [hioffen@posteo.de](mailto:hioffen@posteo.de)  
 Internet address: [www.offen.dev](https://www.offen.dev/)
 
+### License
+The content of this website itself is licensed under the [Creative Commons Attribution 4.0 International (CC BY 4.0) License](https://creativecommons.org/licenses/by/4.0/){: target="_blank"}, and the underlying source code used to format and display that content is licensed under the [GNU Affero General Public License v3.0](https://github.com/offen/website/blob/development/LICENSE){: target="_blank"}.
+
 ### Graphics and Image Sources
 NLNet Logo [https://nlnet.nl/logo/](https://nlnet.nl/logo/){: target="_blank"}

homepage/pelicanconf.py

@@ -83,7 +83,6 @@ DECORATE_CONTENT = {
     'hr': ['mt5', 'mb3', 'b--black-05']
 }
 
-DOCS_URL = 'https://docs.offen.dev'
 GITHUB_REPO = 'https://github.com/offen/offen'
 ROADMAP = 'https://github.com/offen/offen/projects/1'
 CONTACT_EMAIL = 'hioffen@posteo.de'
@@ -98,7 +97,11 @@ HEROKU_DIRECT_URL = 'https://heroku.com/deploy?template=https://github.com/offen
 UBERSPACE_DIRECT_URL = 'https://lab.uberspace.de/guide_offen.html'
 YUNOHOST_DIRECT_URL = 'https://github.com/offen/offen_ynh'
 OFFEN_AUDITORIUM_URL = 'https://offen.offen.dev/auditorium/'
+DOCS_URL_CAMPAIGN_TOP = 'https://docs.offen.dev/?utm_campaign=top'
+DOCS_URL_CAMPAIGN_BOTTOM = 'https://docs.offen.dev/?utm_campaign=bottom'
 DOCS_GETSTARTED_URL = 'https://docs.offen.dev/running-offen/'
+DOCS_GETSTARTED_URL_CAMPAIGN = 'https://docs.offen.dev/running-offen/?utm_campaign=get-started'
 DOCS_TRYDEMO_URL = 'https://docs.offen.dev/running-offen/test-drive/'
+DOCS_TRYDEMO_URL_CAMPAIGN = 'https://docs.offen.dev/running-offen/test-drive/?utm_campaign=try-demo'
 
 OFFEN_ACCOUNT_ID = os.environ.get('OFFEN_ACCOUNT_ID', None)

homepage/theme/templates/base.html

@@ -66,7 +66,7 @@
                   <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>
+                  <a class="b link dim cclr-fnt-black-mid" href="{{ DOCS_URL_CAMPAIGN_TOP }}" rel="noopener" target="_blank">Docs</a>
                 </li>
                 <li>
                   <a class="b link dim" href="/get-started/">Get started</a>
@@ -129,6 +129,60 @@
                   </div>
                   {% endif %}
 
+                  {% if bottom_cta == 'quality' %}
+                  <div class="ph3 ph0-m pv5">
+                    <h2 class="f26 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="f26 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="f26 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid">
@@ -148,7 +202,7 @@
                             <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>
+                            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>
@@ -175,7 +229,7 @@
                             <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>
+                            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>
@@ -207,7 +261,7 @@
                 <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>
+                <a class="link b dim gray" href="{{ DOCS_URL_CAMPAIGN_BOTTOM }}" 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>

homepage/theme/templates/getstarted.html

@@ -52,7 +52,7 @@
         <p class="lh-title ma0 mb2 gray">
           Details on how to<br> install and run Offen
         </p>
-        <a class="w-100 w5-ns tc b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid mb5 cclr-fnt-black-mid" href="{{ DOCS_GETSTARTED_URL }}" target="_blank" rel="noopener">Open Docs</a>
+        <a class="w-100 w5-ns tc b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid mb5 cclr-fnt-black-mid" href="{{ DOCS_GETSTARTED_URL_CAMPAIGN }}" target="_blank" rel="noopener">Open Docs</a>
       </div>
 
     </div>

homepage/theme/templates/trydemo.html

@@ -45,7 +45,7 @@
         <p class="lh-title tc ma0 mb2 gray">
           Details on how to<br> install and run Offen
         </p>
-        <a class="w-100 w5-ns tc b link dim ph4 pv2 dib b--solid bw2 mb5 cclr-brd-black-mid cclr-fnt-black-mid" href="{{ DOCS_TRYDEMO_URL }}" rel="noopener" target="_blank">Open Docs</a>
+        <a class="w-100 w5-ns tc b link dim ph4 pv2 dib b--solid bw2 mb5 cclr-brd-black-mid cclr-fnt-black-mid" href="{{ DOCS_TRYDEMO_URL_CAMPAIGN }}" rel="noopener" target="_blank">Open Docs</a>
       </div>
 
       <div class="flex flex-column items-center">