Dev

.circleci/config.yml

@@ -47,7 +47,7 @@ jobs:
               docker push "${DOCKER_REGISTRY}/${DOCKER_NAMESPACE}/${CIRCLE_PROJECT_REPONAME}:latest"
           name: "Build and Deploy Website Docker Image"
     working_directory: ~/repo
-  build_package:
+  build_internal_package:
     docker:
       - image: cdssnc/track-web-build:0.1.0
     working_directory: /opt/apps/track-web
@@ -58,12 +58,25 @@ jobs:
       - store_artifacts:
           path: /opt/apps/track-web/track-web.tar.gz
           destination: track-web.tar.gz
-
+  build_external_package:
+    docker:
+      - image: cdssnc/track-web-build:0.1.0
+    working_directory: /opt/apps/track-web-public
+    steps:
+      - checkout
+      - run:
+          command: sh deploy/build-env-public.sh
+      - store_artifacts:
+          path: /opt/apps/track-web-public/track-web-public.tar.gz
+          destination: track-web-public.tar.gz
 workflows:
   version: 2
   tracker:
     jobs:
       - track_web
-      - build_package:
+      - build_internal_package:
+         requires:
+            - track_web
+      - build_external_package:
          requires:
             - track_web

deploy/build-env-public.sh

@@ -0,0 +1,9 @@
+WORKDIR=${1:-"/opt/apps/track-web-public"}
+mkdir -p $WORKDIR
+cd $WORKDIR
+python3 -m venv .venv
+. .venv/bin/activate
+pip install --upgrade pip
+pip install -r requirements.txt
+tar -czvf track-web-public.tar.gz .venv track
+rm -rf .venv

requirements.txt

@@ -1,6 +1,6 @@
 flask==0.12.4
 gunicorn==19.6.0
-pyyaml==3.12
+pyyaml==3.13
 python-slugify==1.2.1
 Flask-PyMongo==0.5.1
 flask-compress==1.4.0

setup.py

@@ -20,7 +20,7 @@
     install_requires=[
         'flask==0.12.4',
         'gunicorn==19.6.0',
-        'pyyaml==3.12',
+        'pyyaml==3.13',
         'python-slugify==1.2.1',
         'pymongo==3.7.0',
         'Flask-PyMongo==0.5.1',

track/config.py

@@ -20,6 +20,8 @@ class Config:
     def init_app(app):
         pass
 
+
+
 class ProductionConfig(Config):
 
     CACHE_TYPE = "filesystem"

track/helpers.py

@@ -1,6 +1,7 @@
 import pkg_resources
 import yaml
 import datetime
+import os
 from track import models
 from track.data import FIELD_MAPPING
 from babel.dates import format_date
@@ -56,3 +57,7 @@ def percent(num, denom):
     @app.template_filter("percent_not")
     def percent_not(num, denom):
         return (100 - round((num / denom) * 100))
+
+    @app.template_filter("fetch_env")
+    def fetch_env(value):
+        return os.getenv(value)

track/static/js/dataTables.downloads.js

@@ -36,9 +36,7 @@ $.fn.dataTable.Download = function ( inst ) {
     if (drawnOnce) return;
 
     var elem = "" +
-      "<a onClick=\"gtag('event', 'download', { event_category: 'Download / Télécharger', event_action: 'Download / Télécharger CSV'});\" class=\"text-https-blue hover:text-black font-bold\" href=\"" + csv + "\" download>" +
-        text +
-      "</a>";
+      "<a class=\"text-https-blue hover:text-black font-bold\" href=\"" + csv + "\" download>" + text +"</a>";
 
     container.html(elem);
     drawnOnce = true;

track/static/js/https/domains.js

@@ -287,7 +287,7 @@ $(function () {
     // determines whether remote fetching has to happen
     var fetch = !(loneDomain(row));
 
-    return n(row.domain) + "<div class=\"mt-2\">" + l("", "#", showHideText(true, row), "onclick=\"return false\" data-fetch=\"" + fetch + "\" data-domain=\"" + row.domain + "\"") + "</div>";
+    return n(row.domain) + "<div class=\"mt-2\">" + l("", "#", showHideText(true, row), "data-fetch=\"" + fetch + "\" data-domain=\"" + row.domain + "\"") + "</div>";
   };
 
   var showHideText = function(show, row) {
@@ -369,9 +369,7 @@ $(function () {
   };
 
   var l = function(base_domain, href, text, extra) {
-    // if base domain is provided, CSV download, so track with gtag
-    if(base_domain != "") return "<a onClick=\"gtag('event', 'download', { event_category: 'Download / Télécharger', event_action: 'Download / Télécharger CSV " + base_domain + "'});\" href=\"" + href + "\" target=\"blank\" " + extra + ">" + text + "</a>";
-
+
     return "<a href=\"" + href + "\" target=\"blank\" " + extra + ">" + text + "</a>";
   };
 

track/static/js/https/donuts.js

@@ -0,0 +1,75 @@
+function generate_chart() {
+    var chart = d3.select('.compliant');
+    var width = chart.attr("data-width");
+    if (width == null)
+        width = calculate_width();
+    width = parseInt(width);
+    var height = width * 1.2;
+    var radius = Math.min(width, height) / 2;
+    var color = d3.scale.ordinal()
+        .range(["#0071e1", "#888888"]);
+    var arc = d3.svg.arc()
+        .outerRadius(radius)
+        .innerRadius(radius - 40);
+    var pie = d3.layout.pie()
+        .value(function (d) {
+        return d.value;
+    })
+        .sort(null);
+    chart = chart
+        .append('svg')
+        .attr("width", width)
+        .attr("height", height)
+        .append("g")
+        .attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")");
+    d3.json("/data/reports/https.json", function (error, data) {
+        // calculate % client-side
+        var compliant = Math.round((data.enforces / data.eligible) * 100);
+        // just abort and leave it blank if something's wrong
+        // (instead of showing "NaN%" visually)
+        if (isNaN(compliant))
+            return;
+        var pie_data = [
+            {status: 'active', value: compliant},
+            {status: 'inactive', value: (100-compliant)},
+        ]
+        var g = chart.selectAll(".arc")
+            .data(pie(pie_data))
+            .enter().append("g")
+            .attr("class", "arc");
+        g.append("path")
+            .style("fill", function(d) {
+            return color(d.data.status);
+        })
+            .transition().delay(function(d, i) {
+            return i *400;
+        }).duration(400)
+            .attrTween('d', function(d) {
+            var i = d3.interpolate(d.startAngle+ 0.1, d.endAngle);
+            return function(t) {
+                d.endAngle = i(t);
+                return arc(d);
+            }
+        });
+        g.append("text")
+            .attr("text-anchor", "middle")
+            .attr("class", "text-5xl font-bold")
+            .attr("dy", "0.4em")
+            .attr("fill", "black")
+            .text(function(d){
+                return "" + pie_data[0].value + "%";
+        });
+    });
+};
+
+function calculate_width() {
+    var window_width = $(window).width();
+
+    if(window_width < 769)
+        return 250;
+    else
+        return 287;
+}
+
+generate_chart();
+

track/static/js/https/organizations.js

@@ -86,8 +86,8 @@ $(document).ready(function () {
 
     var link = function(link_text) {
       return "" +
-        "<a onClick=\"gtag('event', 'Search', { event_category: 'Search / Rechercher', event_action: 'Search / Rechercher " + row["name_" + language] + "'});\" href=\"/" + language + "/" + text.domains[language] + "/#" +
-          QueryString.stringify({q: row["name_" + language]}) + "\">" +
+        "<a href=\"/" + language + "/" + text.domains[language] + "/#" +
+          QueryString.stringify({q: row["name_" + language]}) + "\" data-domain=\""+data+"\">" +
            link_text +
         "</a>";
     }

track/static/js/tables.js

@@ -63,6 +63,12 @@ var Tables = {
       Utils.updatePagination();
     });
 
+    table.on("page.dt",function(){
+      /* scroll page to top of table on page change */
+      var top = $(".dataTable").offset().top;
+      $("html, body").animate({ scrollTop: top }, "slow");
+    });
+
     return table;
   },
 

track/templates/en/index.html

@@ -10,32 +10,34 @@
 
 <section id="main-content" class="flex-1 bg-https-light-gray py-6">
 
-	<div class="flex flex-col lg:flex-row mx-auto items-center sm:w-4/5 xl:w-3/5">
-		<div class="flex-1 lg:mr-8 lg:pr-8 mb-4 lg:mb-0">
-			<h1 class="text-4xl sm:text-5xl mb-6">Track web security compliance</h1>
-			<h2 class="text-3xl mb-2">Making government websites more secure</h2>
-			<p class="text-xl">Canadians rely on the Government of Canada to provide secure digital services. A <a class="text-https-blue hover:text-black"
-				 href="https://www.canada.ca/en/treasury-board-secretariat/services/information-technology/policy-implementation-notices/implementing-https-secure-web-connections-itpin.html">new
-					policy notice</a> guides government websites to adopt good web security practices. Track how government sites are
-				becoming more secure.</p>
-
-			<div class="flex">
-				<p class="text-xl mt-2 lg:mt-6"><a href="/en/domains/" class="text-https-blue hover:text-black">Check a government
-						website</a></p>
-				<object class="ml-2 lg:mt-4" type="image/svg+xml" tabindex="-1" aria-hidden="true" role="none" data="/static/images/cta-arrow.svg"></object>
-			</div>
+		<div class="flex flex-col lg:flex-row mx-auto items-center sm:w-4/5 xl:w-3/5">
+			<div class="flex-1 lg:mr-8 lg:pr-8 mb-4 lg:mb-0">
+				<h1 class="text-4xl sm:text-5xl mb-6">Track web security compliance</h1>
+				<h2 class="text-3xl mb-2">Making government websites more secure</h2>
+				<p class="text-xl">Canadians rely on the Government of Canada to provide secure digital services. A <a class="text-https-blue hover:text-black" href="https://www.canada.ca/en/treasury-board-secretariat/services/information-technology/policy-implementation-notices/implementing-https-secure-web-connections-itpin.html">new policy notice</a> guides government websites to adopt good web security practices. Track how government sites are becoming more secure.</p>
 
-		</div>
+              {%  if request.headers.get("app-type","internal") == "internal"  %}
+
+				<div class="flex">
+					<p class="text-xl mt-2 lg:mt-6"><a href="/en/domains/" class="text-https-blue hover:text-black">Check a government website</a></p>
+					<object class="ml-2 lg:mt-4" type="image/svg+xml" tabindex="-1" aria-hidden="true" role="none" data="/static/images/cta-arrow.svg"></object>
+				</div>
+
+              {%  endif %}
 
-		<div class="flex-inline flex-col text-center mx-auto">
-			<div class="compliant"></div>
-			<h3 style="display:none" class="domains-text font-bold text-xl sm:text-2xl">Domains that <br> enforce HTTPS</h3>
+			</div>
+
+			<div class="flex-inline flex-col text-center mx-auto">
+				<div class="compliant"></div>
+				<h3 class="font-bold text-xl sm:text-2xl">Domains that <br> enforce HTTPS</h3>
+			</div>
 		</div>
-	</div>
 
 </section>
 
-{% include 'includes/donut.html' %}
 
+
+
+<script src="/static/js/https/donuts.js?{{ now() | date("%Y%m%j%H%M%S") }}"></script>
 <script src="/static/js/https/organizations.js?{{ now() | date("%Y%m%j%H%M%S") }}"></script>
-{% endblock %}
+{% endblock %}

track/templates/en/layout-en.html

@@ -4,15 +4,21 @@
 <head>
 
 	<title>{% block title %}{% endblock title %}</title>
-	
+
 	{% include 'includes/head.html' %}
 
 	<meta name="description" content="{% block description %}{% endblock description %}">
 
 </head>
 
 <body class="flex flex-1 flex-col min-h-screen">
-
+{% set GTM_key = "GOOGLE_TAG_MANAGER" | fetch_env() %}
+{% if GTM_key %}
+<!-- Google Tag Manager (noscript) -->
+<noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ GTM_key }}"
+height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+<!-- End Google Tag Manager (noscript) -->
+{% endif %}
 	<header role="banner" id="header">
 
 		<!-- Beta bar -->
@@ -40,7 +46,7 @@ <h2 class="sr-only">Language selection</h2>
 
 
 	     <!-- Navigation -->
-
+  {%  if request.headers.get("app-type","internal") == "internal"  %}
 	     <nav class="bg-white border-b border-https-dark-gray">
 			<div class="container mx-auto flex">
 				<div class="{{ self.pageid_fr() | site_title(false) }}">
@@ -64,6 +70,9 @@ <h2 class="py-6 text-base sm:text-lg hidden md:block"><a class="text-grey-darkes
 		        </div>
 		    </div>
 		</nav>
+{% endif %}
+
+
 
 	     <nav id="menu-content" class="shadow-md">
 		    <ul class="list-reset ml-4 mr-2 mt-4 font-normal">
@@ -75,6 +84,8 @@ <h2 class="py-6 text-base sm:text-lg hidden md:block"><a class="text-grey-darkes
 		    </ul>
 		</nav>
 
+
+
 	</header>
 
 	<main class="flex flex-auto">

track/templates/fr/index.html

@@ -16,10 +16,12 @@ <h1 class="text-4xl sm:text-5xl mb-6">Suivre la conformité en matière de sécu
 				<h2 class="text-3xl mb-2">Rendre les sites gouvernementaux plus sécuritaires</h2>
 				<p class="text-xl">Les Canadiens s'attendent à ce que le gouvernement du Canada leur offre des services en ligne sécurisés. Un <a class="text-https-blue hover:text-black " href="https://www.canada.ca/fr/secretariat-conseil-tresor/services/technologie-information/avis-mise-oeuvre-politique/mise-oeuvre-https-connexions-web-securisees-ampti.html">nouvel avis de politique</a> vise à assurer que les sites gouvernementaux soient conformes aux bonnes pratiques en matière de sécurité Web. Voyez comment les sites gouvernementaux deviennent plus sécuritaires.</p>
 
+                {%  if request.headers.get("app-type","public") == "internal"  %}
 				<div class="flex">
 					<p class="text-xl mt-2 lg:mt-6"><a href="/fr/domaines/" class="text-https-blue hover:text-black ">Vérifier la conformité d’un site gouvernemental</a></p>
 					<object class="ml-2 lg:mt-4" type="image/svg+xml" tabindex="-1" role="img" aria-hidden="true" data="/static/images/cta-arrow.svg"></object>
 				</div>
+                {% endif %}
 
 			</div>
 
@@ -31,7 +33,6 @@ <h3 class=" text-xl sm:text-2xl">Domaines qui excécutent <br>  le protocole HTT
 
 </section>
 
-{% include 'includes/donut.html' %}
-
+<script src="/static/js/https/donuts.js?{{ now() | date("%Y%m%j%H%M%S") }}"></script>
 <script src="/static/js/https/organizations.js?{{ now() | date("%Y%m%j%H%M%S") }}"></script>
 {% endblock %}

track/templates/fr/layout-fr.html

@@ -12,6 +12,13 @@
 </head>
 
 <body class="flex flex-1 flex-col min-h-screen">
+{% set GTM_key = "GOOGLE_TAG_MANAGER" | fetch_env() %}
+{% if GTM_key %}
+<!-- Google Tag Manager (noscript) -->
+<noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ GTM_key }}"
+height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+<!-- End Google Tag Manager (noscript) -->
+{% endif %}
 
 	<header role="banner" id="header">
 
@@ -38,7 +45,7 @@ <h2 class="sr-only">Sélection de la langue</h2>
 	    </section>
 
 	    <!-- Navigation -->
-
+  {%  if request.headers.get("app-type","internal") == "internal"  %}
 	    <nav class="bg-white border-b border-https-dark-gray">
 			<div class="container mx-auto flex">
 				<div class="{{ self.pageid_en() | site_title(false) }} flex-none">
@@ -62,7 +69,7 @@ <h2 class="mr-8 py-6 text-base sm:text-lg hidden md:block"><a class="text-grey-d
 		        </div>
 		    </div>
 		</nav>
-
+  {% endif %}
 	    <nav id="menu-content" class="shadow-md">
 		    <ul class="list-reset ml-4 mr-2 mt-4">
 		    	<li class="{{ self.pageid_en() | site_title(true) }} block py-4 border-b border-https-dark-gray sm:block md:hidden"><a tabindex="-1" class="text-xl text-https-blue no-underline hover:underline" href="/fr/index/">Suivre la conformité en matière de sécurité Web</a></li>

track/templates/includes/en/beta-bar.html

@@ -1 +1,8 @@
-<div class="bg-grey-darkest py-1 text-xs sm:block md:block lg:block xl:block"></div>
+<section class="bg-grey-darkest py-4 text-xs sm:block md:block lg:block xl:block">
+    <div class="container mx-auto text-white flex items-center">
+        <span class="flex-initial">
+            <span class="beta-badge py-2 px-2 font-bold rounded uppercase mr-4">Beta</span>
+        </span>
+        <span class="flex-1">This is a new service, we are constantly improving.</span>
+    </div>
+</section>