Merge pull request #4 from PostHog/james-charles-edits

added more alternatives and their detail, made it clearer this lists …

package.json

@@ -15,6 +15,7 @@
     "clean": "gatsby clean"
   },
   "dependencies": {
+    "14": "^3.1.6",
     "gatsby": "^4.5.3",
     "gatsby-plugin-breakpoints": "^1.3.6",
     "gatsby-plugin-google-fonts": "^1.0.1",

src/pages/austria.js

@@ -28,7 +28,7 @@ const Body = () => {
         rel="noopener noreferrer"
         target="_blank"
         href="https://gdprhub.eu/index.php?title=DSB_(Austria)_-_2021-0.586.257_(D155.027)"
-        className="inline-flex justify-between space-x-1 items-center text-[14px] font-bold p-[10px] rounded border border-white border-opacity-50 w-full sm:w-auto"
+        className="inline-flex justify-between space-x-1 items-center text-[14px] text-white font-bold p-[10px] rounded border border-white border-opacity-50 hover:border-opacity-75 w-full sm:w-auto"
       >
         <span>Read more on GDPRhub</span>
         <img className="opacity-50 transform rotate-[135deg]" src={arrow} />

src/pages/google-analytics-alternatives.js

@@ -46,45 +46,77 @@ const tableData = [
     company: "PostHog",
     url: "https://posthog.com",
     description:
-      "Product analytics with session recording, feature flags, heatmaps",
-    openSource: true,
+      "Website analytics, product analytics, experimentation, session recording, feature flags, plugins, warehouse-compatible",
+    permissiveOpenSource: true,
+    copyleftOpenSource: false,
+    cloudHosting: true,
+    selfHosting: true,
+  },
+  {
+    company: "Fathom",
+    url: "https://usefathom.com/",
+    description: "Website analytics",
+    permissiveOpenSource: true,
+    copyleftOpenSource: false,
     cloudHosting: true,
     selfHosting: true,
   },
   {
     company: "Plausible",
     url: "https://plausible.io/",
-    description: "Google Analytics alternative",
-    openSource: true,
+    description: "Website analytics",
+    permissiveOpenSource: false,
+    copyleftOpenSource: true,
     cloudHosting: true,
     selfHosting: true,
   },
   {
-    company: "Fathom",
-    url: "https://usefathom.com/",
+    company: "Matomo",
+    url: "https://matomo.org/",
     description: "Website analytics",
-    openSource: false,
+    permissiveOpenSource: false,
+    copyleftOpenSource: true,
+    cloudHosting: true,
+    selfHosting: true,
+  },
+  {
+    company: "Open Web Analytics",
+    url: "https://openwebanalytics.com/",
+    description: "Website analytics, session recording",
+    permissiveOpenSource: false,
+    copyleftOpenSource: true,
+    cloudHosting: false,
+    selfHosting: true,
+  },
+  {
+    company: "Countly",
+    url: "https://count.ly/",
+    description: "Website analytics, product analytics, experimentation, plugins",
+    permissiveOpenSource: false,
+    copyleftOpenSource: false,
     cloudHosting: true,
-    selfHosting: false,
+    selfHosting: true,
   },
 ];
 
 const Extra = () => {
   return (
     <>
-      <table>
+      <table className="max-w-full">
         <tr className="sm:table-row hidden">
           <th></th>
           <th></th>
-          <th>Open source</th>
-          <th>Cloud hosting</th>
-          <th>Self hosting</th>
+          <th><span className="opacity-50">Open source (</span><a href="https://opensource.org/faq#permissive" className="text-sm border-b border-dashed border-white border-opacity-50 font-normal">Permissive</a><span className="opacity-50">)</span></th>
+          <th><span className="opacity-50">Open source (</span><a href="https://opensource.org/faq#copyleft" className="text-sm border-b border-dashed border-white border-opacity-50 font-normal">Copyleft</a><span className="opacity-50">)</span></th>
+          <th><span className="opacity-50">Cloud hosting</span></th>
+          <th><span className="opacity-50">Self hosting</span></th>
         </tr>
         {tableData.map(
           ({
             company,
             description,
-            openSource,
+            permissiveOpenSource,
+            copyleftOpenSource,
             cloudHosting,
             selfHosting,
             url,
@@ -95,13 +127,19 @@ const Extra = () => {
                   <a href={url}>{company}</a>
                 </td>
                 <td className="w-[270px]">
-                  <p>{description}</p>
+                  <p className="text-sm text-white text-opacity-75">{description}</p>
+                </td>
+                <td className="sm:table-cell flex justify-between">
+                  <span className="sm:hidden inline-block opacity-50 font-medium">
+                    Permissive open source
+                  </span>{" "}
+                  {permissiveOpenSource && <Check />}
                 </td>
                 <td className="sm:table-cell flex justify-between">
                   <span className="sm:hidden inline-block opacity-50 font-medium">
-                    Open source
+                    Copyleft open source
                   </span>{" "}
-                  {openSource && <Check />}
+                  {copyleftOpenSource && <Check />}
                 </td>
                 <td className="sm:table-cell flex justify-between">
                   <span className="sm:hidden inline-block opacity-50 font-medium">

src/pages/index.js

@@ -37,7 +37,7 @@ const Image = () => {
 
         <span>
           Select a country in <strong className="text-[#FF5F5F]">red</strong> to
-          read details about Google Analytics legality
+          see rulings concerning Google Analytics legality
         </span>
       </figcaption>
     </figure>
@@ -56,14 +56,16 @@ const Body = () => {
         may now be illegal.
       </p>
       <p>
-        The best solution is to use an analytics provider that keeps data on
-        your own infrastructure.
+        The safest solution is to use an analytics provider that keeps data on
+        your own infrastructure. If you stick with GA - learn about <a href="https://support.google.com/analytics/topic/2919631?hl=en&ref_topic=1008008">their data privacy settings</a>.
       </p>
+      <p>More rulings are expected in 2022. We'll add them, or <a href="https://github.com/PostHog/isgoogleanalyticsillegal.com">submit a PR</a>.</p>
+
       <Link
         rel="noopener noreferrer"
         target="_blank"
         to="/google-analytics-alternatives"
-        className="inline-flex justify-between space-x-1 items-center text-[14px] font-bold p-[10px] rounded border border-white border-opacity-50 w-full sm:w-auto"
+        className="inline-flex justify-between space-x-1 items-center text-[14px] text-white font-bold p-[10px] rounded border border-white border-opacity-50 hover:border-opacity-75 w-full sm:w-auto"
       >
         <span>See Google Analytics alternatives</span>
       </Link>

src/pages/netherlands.js

@@ -28,7 +28,7 @@ const Body = () => {
         rel="noopener noreferrer"
         target="_blank"
         href="https://tweakers.net/nieuws/192020/autoriteit-persoonsgegevens-waarschuwt-voor-mogelijk-verbod-op-google-analytics.html"
-        className="inline-flex justify-between space-x-1 items-center text-[14px] font-bold p-[10px] rounded border border-white border-opacity-50 w-full sm:w-auto"
+        className="inline-flex justify-between space-x-1 items-center text-[14px] font-bold p-[10px] text-white rounded border border-white border-opacity-50 hover:border-opacity-75 w-full sm:w-auto"
       >
         <span>Read more on Tweakers.net</span>
         <img className="opacity-50 transform rotate-[135deg]" src={arrow} />

src/styles/global.css

@@ -15,16 +15,13 @@ li {
 
 a {
   @apply inline-block;
+  color: #F9BD2B;
 }
 
 table {
   @apply max-w-[960px] w-full text-[14px] font-medium;
 }
 
-table th {
-  @apply opacity-50 font-medium;
-}
-
 table a {
   @apply text-[17px] text-[#FF7636] font-bold;
 }
@@ -48,6 +45,10 @@ table p {
   @apply first-letter:float-left first-letter:text-[56px] first-letter:leading-[.9] first-letter:font-bold;
 }
 
+.blue-link {
+  color:blue;
+}
+
 @keyframes ticker {
   0% {
     transform: translate3d(0, 0, 0);