Add embedded mode for shared links

Co-authored-by: aymanterra <[email protected]> Co-authored-by: Brad Kane <[email protected]>
plausible · Mar 10, 2021 · ece4ead · ece4ead
1 parent 0ceb539
commit ece4ead
Show file tree

Hide file tree

Showing 14 changed files with 278 additions and 200 deletions.
diff --git a/.github/workflows/elixir.yml b/.github/workflows/elixir.yml
@@ -41,7 +41,7 @@ jobs:
         uses: marocchino/tool-versions-action@v1
         id: versions
       - name: Set up Elixir
-        uses: actions/setup-elixir@v1
+        uses: erlef/setup-elixir@v1
         with:
           elixir-version: ${{steps.versions.outputs.elixir}}
           otp-version: ${{ steps.versions.outputs.erlang}}

diff --git a/assets/css/app.css b/assets/css/app.css
@@ -8,19 +8,19 @@
 @import "flatpickr.css";
 
 .button {
-  @apply bg-indigo-600 border border-transparent rounded-md py-2 px-4 inline-flex justify-center text-sm leading-5 font-medium text-white transition hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
+  @apply inline-flex justify-center px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md leading-5 transition hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
 }
 
 .button-outline {
-  @apply bg-transparent border border-indigo-600 text-indigo-600;
+  @apply text-indigo-600 bg-transparent border border-indigo-600;
 }
 
 .button-sm {
-  @apply text-sm py-2 px-4;
+  @apply px-4 py-2 text-sm;
 }
 
 .button-md {
-  @apply py-2 px-4;
+  @apply px-4 py-2;
 }
 
 html {
@@ -38,7 +38,7 @@ button:disabled {
 }
 
 blockquote {
-  @apply my-4 py-2 px-4 border-l-4 border-gray-500;
+  @apply px-4 py-2 my-4 border-l-4 border-gray-500;
 }
 
 @screen xl {
@@ -273,11 +273,12 @@ blockquote {
 }
 
 .fullwidth-shadow::before {
-  @apply h-full absolute top-0 bg-gray-50 w-screen dark:bg-gray-850;
+  @apply absolute top-0 w-screen h-full;
   box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.06);
   content: "";
   z-index: -1;
   left: calc(-1 * calc(50vw - 50%));
+  background-color: inherit;
 }
 
 .dark .fullwidth-shadow::before {

diff --git a/assets/js/app.js b/assets/js/app.js
@@ -90,3 +90,15 @@ function showChangelogNotification(el) {
     })
   }
 }
+
+const embedButton = document.getElementById('generate-embed')
+
+if (embedButton) {
+  embedButton.addEventListener('click', function(e) {
+    const embedCode = document.getElementById('embed-code')
+    const embedLink = new URL(document.getElementById('embed-link').value)
+    embedLink.searchParams.set('embed', 'true')
+
+    embedCode.value = `<iframe id="plausible-embed" src="${embedLink.toString()}" width="100%" height="1700px" scrolling="no"></iframe>`
+  })
+}
diff --git a/assets/js/dashboard/historical.js b/assets/js/dashboard/historical.js
@@ -16,20 +16,21 @@ class Historical extends React.Component {
   renderConversions() {
     if (this.props.site.hasGoals) {
       return (
-        <div className="w-full block md:flex items-start justify-between mt-6">
+        <div className="items-start justify-between block w-full mt-6 md:flex">
           <Conversions site={this.props.site} query={this.props.query} />
         </div>
       )
     }
   }
 
   render() {
+    const extraStyle = this.props.site.background ? {backgroundColor: this.props.site.background} : {}
     return (
       <div className="mb-12">
         <div id="stats-container-top"></div>
-        <div className={`sticky top-0 bg-gray-50 dark:bg-gray-850 sm:py-3 py-1 z-9 ${this.props.stuck ? 'z-10 fullwidth-shadow' : ''}`}>
-          <div className="w-full sm:flex items-center">
-            <div className="w-full flex items-center mb-2 sm:mb-0">
+        <div className={`sticky top-0 bg-gray-50 dark:bg-gray-850 sm:py-3 py-1 z-9 ${this.props.stuck ? 'z-10 fullwidth-shadow' : ''}`} style={extraStyle}>
+          <div className="items-center w-full sm:flex">
+            <div className="flex items-center w-full mb-2 sm:mb-0">
               <SiteSwitcher site={this.props.site} loggedIn={this.props.loggedIn} />
               <CurrentVisitors timer={this.props.timer} site={this.props.site} query={this.props.query} />
               <Filters query={this.props.query} history={this.props.history} />
@@ -38,11 +39,11 @@ class Historical extends React.Component {
           </div>
         </div>
         <VisitorGraph site={this.props.site} query={this.props.query} />
-        <div className="w-full block md:flex items-start justify-between">
+        <div className="items-start justify-between block w-full md:flex">
           <Sources site={this.props.site} query={this.props.query} />
           <Pages site={this.props.site} query={this.props.query} />
         </div>
-        <div className="w-full block md:flex items-start justify-between">
+        <div className="items-start justify-between block w-full md:flex">
           <Countries site={this.props.site} query={this.props.query} />
           <Devices site={this.props.site} query={this.props.query} />
         </div>

diff --git a/assets/js/dashboard/mount.js b/assets/js/dashboard/mount.js
@@ -13,7 +13,8 @@ if (container) {
     domain: container.dataset.domain,
     offset: container.dataset.offset,
     hasGoals: container.dataset.hasGoals === 'true',
-    insertedAt: container.dataset.insertedAt
+    insertedAt: container.dataset.insertedAt,
+    background: container.dataset.background
   }
 
   const loggedIn = container.dataset.loggedIn === 'true'

diff --git a/lib/plausible_web/controllers/stats_controller.ex b/lib/plausible_web/controllers/stats_controller.ex
@@ -74,6 +74,7 @@ defmodule PlausibleWeb.StatsController do
           _e ->
             conn
             |> assign(:skip_plausible_tracking, true)
+            |> delete_resp_header("x-frame-options")
             |> render("shared_link_password.html",
               link: shared_link,
               layout: {PlausibleWeb.LayoutView, "focus.html"}
@@ -112,6 +113,7 @@ defmodule PlausibleWeb.StatsController do
       else
         conn
         |> assign(:skip_plausible_tracking, true)
+        |> delete_resp_header("x-frame-options")
         |> render("shared_link_password.html",
           link: shared_link,
           error: "Incorrect password. Please try again.",
@@ -127,13 +129,17 @@ defmodule PlausibleWeb.StatsController do
     conn
     |> assign(:skip_plausible_tracking, true)
     |> put_resp_header("x-robots-tag", "noindex")
+    |> delete_resp_header("x-frame-options")
     |> render("stats.html",
       site: shared_link.site,
       has_goals: Plausible.Sites.has_goals?(shared_link.site),
       title: "Plausible · " <> shared_link.site.domain,
       offer_email_report: false,
       demo: false,
-      shared_link_auth: shared_link.slug
+      shared_link_auth: shared_link.slug,
+      embedded: conn.params["embed"] == "true",
+      theme: conn.params["theme"],
+      background: conn.params["background"]
     )
   end
 

diff --git a/lib/plausible_web/templates/layout/_embedded_footer.html.eex b/lib/plausible_web/templates/layout/_embedded_footer.html.eex
@@ -0,0 +1,13 @@
+<div class="mt-4 bg-gray-800 dark:bg-gray-800">
+  <div class="container px-4 py-2 sm:px-6 lg:px-8">
+    <div class="xl:grid xl:grid-cols-3 xl:gap-8">
+      <div class="col-start-2 xl:my-0">
+        <a href="https://plausible.io" class="text-center">
+          <span class="text-xs text-gray-100">Powered by</span>
+          <img src="/images/icon/plausible_logo_sm.png" class="inline-block w-4 ml-1" />
+          <span class="text-xs font-semibold tracking-wider text-gray-300 leading-5">Plausible Analytics</span>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/lib/plausible_web/templates/layout/_footer.html.eex b/lib/plausible_web/templates/layout/_footer.html.eex
@@ -1,12 +1,12 @@
-<div class="bg-gray-800 dark:bg-gray-800 mt-12">
-  <div class="container py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
+<div class="mt-24 bg-gray-800 dark:bg-gray-800">
+  <div class="container px-4 py-12 sm:px-6 lg:py-16 lg:px-8">
     <div class="xl:grid xl:grid-cols-3 xl:gap-8">
       <div class="my-8 xl:my-0">
-        <h4 class="leading-5 font-semibold tracking-wider text-gray-300">
+        <h4 class="font-semibold tracking-wider text-gray-300 leading-5">
           <img src="/images/icon/plausible_logo_sm.png" class="inline-block w-6 mr-1" />
           Plausible Analytics
         </h4>
-        <p class="mt-4 text-gray-400 text-base leading-6">
+        <p class="mt-4 text-base text-gray-400 leading-6">
         <%= if !Application.get_env(:plausible, :is_selfhost) do %>
           Made and hosted in the EU <span class="text-lg">🇪🇺</span><br />
         <% end %>
@@ -15,8 +15,8 @@
         </p>
         <%= if Application.get_env(:plausible, :is_selfhost) do %>
           <div class="mt-4">
-            <a href="https://github.com/sponsors/plausible" class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-gray-50 bg-gray-700 hover:bg-gray-600 focus:outline-none focus:ring-2  focus:ring-gray-500">
-              <svg class="-ml-1 mr-2 w-5 h-5 text-pink-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
+            <a href="https://github.com/sponsors/plausible" class="inline-flex items-center px-4 py-2 text-sm font-medium bg-gray-700 border border-transparent shadow-sm rounded-md text-gray-50 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500">
+              <svg class="w-5 h-5 mr-2 -ml-1 text-pink-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
               Sponsor @plausible
             </a>
           </div>
@@ -25,44 +25,44 @@
       <div class="grid grid-cols-2 gap-8 xl:col-span-2">
         <div class="md:grid md:grid-cols-2 md:gap-8">
           <div>
-            <h4 class="text-sm leading-5 font-semibold tracking-wider text-gray-400 uppercase">
+            <h4 class="text-sm font-semibold tracking-wider text-gray-400 uppercase leading-5">
               Why Plausible?
             </h4>
             <ul class="mt-4">
               <li>
-                <a href="https://plausible.io/simple-web-analytics" class="text-base leading-6 text-gray-300 hover:text-white">
+                <a href="https://plausible.io/simple-web-analytics" class="text-base text-gray-300 leading-6 hover:text-white">
                   Simple metrics
                 </a>
               </li>
               <li class="mt-4">
-                <a href="https://plausible.io/lightweight-web-analytics" class="text-base leading-6 text-gray-300 hover:text-white">
+                <a href="https://plausible.io/lightweight-web-analytics" class="text-base text-gray-300 leading-6 hover:text-white">
                   Lightweight script
                 </a>
               </li>
               <li class="mt-4">
-                <a href="https://plausible.io/privacy-focused-web-analytics" class="text-base leading-6 text-gray-300 hover:text-white">
+                <a href="https://plausible.io/privacy-focused-web-analytics" class="text-base text-gray-300 leading-6 hover:text-white">
                   Privacy focused
                 </a>
               </li>
               <li class="mt-4">
-                <a href="https://plausible.io/open-source-website-analytics" class="text-base leading-6 text-gray-300 hover:text-white">
+                <a href="https://plausible.io/open-source-website-analytics" class="text-base text-gray-300 leading-6 hover:text-white">
                   Open source
                 </a>
               </li>
             </ul>
           </div>
           <div class="mt-12 md:mt-0">
-            <h4 class="text-sm leading-5 font-semibold tracking-wider text-gray-400 uppercase">
+            <h4 class="text-sm font-semibold tracking-wider text-gray-400 uppercase leading-5">
               Comparisons
             </h4>
             <ul class="mt-4">
               <li>
-                <a href="https://plausible.io/vs-google-analytics" class="text-base leading-6 text-gray-300 hover:text-white">
+                <a href="https://plausible.io/vs-google-analytics" class="text-base text-gray-300 leading-6 hover:text-white">
                   vs Google Analytics
                 </a>
               </li>
               <li class="mt-4">
-                <a href="https://plausible.io/vs-matomo" class="text-base leading-6 text-gray-300 hover:text-white">
+                <a href="https://plausible.io/vs-matomo" class="text-base text-gray-300 leading-6 hover:text-white">
                   vs Matomo
                 </a>
               </li>
@@ -72,74 +72,74 @@
         </div>
         <div class="md:grid md:grid-cols-2 md:gap-8">
           <div class="mt-12 md:mt-0">
-            <h4 class="text-sm leading-5 font-semibold tracking-wider text-gray-400 uppercase">
+            <h4 class="text-sm font-semibold tracking-wider text-gray-400 uppercase leading-5">
               Community
             </h4>
             <ul class="mt-4">
               <li>
-                <a href="https://plausible.io/blog" class="text-base leading-6 text-gray-300 hover:text-white">
+                <a href="https://plausible.io/blog" class="text-base text-gray-300 leading-6 hover:text-white">
                   Blog
                 </a>
               </li>
             <li class="mt-4">
-                <a target="_blank" href="https://docs.plausible.io/" class="text-base leading-6 text-gray-300 hover:text-white">
+                <a target="_blank" href="https://docs.plausible.io/" class="text-base text-gray-300 leading-6 hover:text-white">
                   Documentation
                 </a>
               </li>
               <li class="mt-4">
-                <a target="_blank" href="https://github.com/plausible/analytics" class="text-base leading-6 text-gray-300 hover:text-white">
+                <a target="_blank" href="https://github.com/plausible/analytics" class="text-base text-gray-300 leading-6 hover:text-white">
                   GitHub
                 </a>
               </li>
               <li class="mt-4">
-                <a target="_blank" href="https://plausible.io/forum" class="text-base leading-6 text-gray-300 hover:text-white">
+                <a target="_blank" href="https://plausible.io/forum" class="text-base text-gray-300 leading-6 hover:text-white">
                   Forum
                 </a>
               </li>
               <li class="mt-4">
-                <a target="_blank" href="https://twitter.com/plausiblehq" class="text-base leading-6 text-gray-300 hover:text-white">
+                <a target="_blank" href="https://twitter.com/plausiblehq" class="text-base text-gray-300 leading-6 hover:text-white">
                   Twitter
                 </a>
               </li>
               <li class="mt-4">
-                <a target="_blank" href="https://fosstodon.org/@plausible" class="text-base leading-6 text-gray-300 hover:text-white">
+                <a target="_blank" href="https://fosstodon.org/@plausible" class="text-base text-gray-300 leading-6 hover:text-white">
                   Mastodon
                 </a>
               </li>
             </ul>
           </div>
           <div>
-            <h4 class="text-sm leading-5 font-semibold tracking-wider text-gray-400 uppercase">
+            <h4 class="text-sm font-semibold tracking-wider text-gray-400 uppercase leading-5">
               Company
             </h4>
             <ul class="mt-4">
               <li class="mt-4">
-                <a href="https://plausible.io/about" class="text-base leading-6 text-gray-300 hover:text-white">
+                <a href="https://plausible.io/about" class="text-base text-gray-300 leading-6 hover:text-white">
                   About
                 </a>
               </li>
               <li class="mt-4">
-                <a href="https://plausible.io/status" class="text-base leading-6 text-gray-300 hover:text-white">
+                <a href="https://plausible.io/status" class="text-base text-gray-300 leading-6 hover:text-white">
                   Status
                 </a>
               </li>
               <li class="mt-4">
-                <a href="https://plausible.io/contact" class="text-base leading-6 text-gray-300 hover:text-white">
+                <a href="https://plausible.io/contact" class="text-base text-gray-300 leading-6 hover:text-white">
                   Contact
                 </a>
               </li>
               <li class="mt-4">
-                <a href="https://plausible.io/privacy" class="text-base leading-6 text-gray-300 hover:text-white">
+                <a href="https://plausible.io/privacy" class="text-base text-gray-300 leading-6 hover:text-white">
                   Privacy
                 </a>
               </li>
               <li class="mt-4">
-                <a href="https://plausible.io/data-policy" class="text-base leading-6 text-gray-300 hover:text-white">
+                <a href="https://plausible.io/data-policy" class="text-base text-gray-300 leading-6 hover:text-white">
                   Data policy
                 </a>
               </li>
               <li class="mt-4">
-                <a href="https://plausible.io/imprint" class="text-base leading-6 text-gray-300 hover:text-white">
+                <a href="https://plausible.io/imprint" class="text-base text-gray-300 leading-6 hover:text-white">
                   Imprint
                 </a>
               </li>