From 30a8f58f510fe96ba0b2090636f474c7cf468c90 Mon Sep 17 00:00:00 2001
From: Pranay Prakash <pranay@windsor.io>
Date: Thu, 4 Feb 2021 15:12:04 -0800
Subject: [PATCH] Fix top bar on mobile and remove Notion branding

This PR fixes the top bar on mobile by
1. Removing the "three dots" menu that lets you duplicate the page or log into notion. (it's now `div.notion-topbar-mobile > div:nth-child(5)`)
2. Adding some padding to the dark mode slider, which was flush with the screen.

It now looks like this (can be seen on https://sayhurro.com)

It also removes some notion branding:
1. "@NotionHQ" from twitter:site
2. "Notion" from og:site_name
3. When sharing a link, it removes the default notion "og:image" and "twitter:image"

We could use a new PR to add a for input to let people use their own hosted og:image instead or simply deleting the notion image. On https://sayhurro.com, I've modified my script to use an image hosted directly through notion
---
 src/code.js | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/code.js b/src/code.js
index 3b20856..ab56332 100644
--- a/src/code.js
+++ b/src/code.js
@@ -175,8 +175,16 @@ ${slugs
         || element.getAttribute('name') === 'twitter:url') {
         element.setAttribute('content', MY_DOMAIN);
       }
-      if (element.getAttribute('name') === 'apple-itunes-app') {
-        element.remove();
+      if (element.getAttribute('name') === 'apple-itunes-app'
+          || element.getAttribute('name') === 'twitter:site'
+          || element.getAttribute('property') === 'og:site_name') {
+          element.remove();
+      }
+      if ((element.getAttribute('name') === 'twitter:image'
+          || element.getAttribute('property') === 'og:image')
+          && element.getAttribute('content') === 'https://www.notion.so/images/meta/default.png') {
+          // TODO: update content based on input field for the sharing image
+          element.remove();
       }
     }
   }
@@ -194,8 +202,10 @@ ${slugs
       div.notion-topbar > div > div:nth-child(4) { display: none !important; }
       div.notion-topbar > div > div:nth-child(5) { display: none !important; }
       div.notion-topbar > div > div:nth-child(6) { display: none !important; }
+      div.notion-topbar-mobile > div:nth-child(1) { padding: 0px 10px !important; }
       div.notion-topbar-mobile > div:nth-child(3) { display: none !important; }
       div.notion-topbar-mobile > div:nth-child(4) { display: none !important; }
+      div.notion-topbar-mobile > div:nth-child(5) { display: none !important; }
       div.notion-topbar > div > div:nth-child(1n).toggle-mode { display: block !important; }
       div.notion-topbar-mobile > div:nth-child(1n).toggle-mode { display: block !important; }
       </style>\`, {