From 73fbbad0cc9b0aa92f19f4758de874aabc6f664d Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sat, 20 Jan 2018 20:30:49 -0800
Subject: [PATCH] improve SSR hiding

---
 routes/_components/HiddenFromSSR.html   | 13 ++++++++
 routes/_components/NotLoggedInHome.html | 40 ++++++++++++-------------
 routes/federated.html                   | 14 +++++----
 routes/local.html                       | 14 +++++----
 routes/notifications.html               | 14 +++++----
 templates/2xx.html                      |  2 +-
 6 files changed, 60 insertions(+), 37 deletions(-)
 create mode 100644 routes/_components/HiddenFromSSR.html

diff --git a/routes/_components/HiddenFromSSR.html b/routes/_components/HiddenFromSSR.html
new file mode 100644
index 0000000..ed75a9f
--- /dev/null
+++ b/routes/_components/HiddenFromSSR.html
@@ -0,0 +1,13 @@
+<div class="{{hidden ? 'hidden' : ''}}">
+  <slot></slot>
+</div>
+<script>
+  export default {
+    data: () => ({
+      hidden: true
+    }),
+    oncreate () {
+      this.set({hidden: !process.browser})
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/routes/_components/NotLoggedInHome.html b/routes/_components/NotLoggedInHome.html
index 075b906..f0026af 100644
--- a/routes/_components/NotLoggedInHome.html
+++ b/routes/_components/NotLoggedInHome.html
@@ -1,18 +1,20 @@
-<FreeTextLayout>
-  <div class="not-logged-in-home {{hidden ? 'hidden' : ''}}">
-    <div class="banner">
-      <svg aria-hidden="true" class="logo">
-        <use xlink:href="#pinafore-logo" />
-      </svg>
-      <h1>Pinafore</h1>
+<HiddenFromSSR>
+  <FreeTextLayout>
+    <div class="not-logged-in-home">
+      <div class="banner">
+        <svg aria-hidden="true" class="logo">
+          <use xlink:href="#pinafore-logo" />
+        </svg>
+        <h1>Pinafore</h1>
+      </div>
+      <p>Pinafore is a web client for <a rel="noopener" target="_blank" href="https://joinmastodon.org">Mastodon</a>, optimized for speed and simplicity.</p>
+
+      <p>To get started, <a href="/settings/instances/add">log in to an instance</a>.</p>
+
+      <p>Don't have an instance? <a rel="noopener" target="_blank" href="https://joinmastodon.org">Join Mastodon!</a></p>
     </div>
-    <p>Pinafore is a web client for <a rel="noopener" target="_blank" href="https://joinmastodon.org">Mastodon</a>, optimized for speed and simplicity.</p>
-
-    <p>To get started, <a href="/settings/instances/add">log in to an instance</a>.</p>
-
-    <p>Don't have an instance? <a rel="noopener" target="_blank" href="https://joinmastodon.org">Join Mastodon!</a></p>
-  </div>
-</FreeTextLayout>
+  </FreeTextLayout>
+</HiddenFromSSR>
 <style>
   .not-logged-in-home {
     margin: 10px;
@@ -43,16 +45,12 @@
 </style>
 <script>
   import FreeTextLayout from './FreeTextLayout.html'
+  import HiddenFromSSR from './HiddenFromSSR.html'
 
   export default {
     components: {
-      FreeTextLayout
-    },
-    data: () => ({
-      hidden: true
-    }),
-    oncreate: function () {
-      this.set({hidden: !process.browser})
+      FreeTextLayout,
+      HiddenFromSSR
     }
   }
 </script>
\ No newline at end of file
diff --git a/routes/federated.html b/routes/federated.html
index fa54348..87bd820 100644
--- a/routes/federated.html
+++ b/routes/federated.html
@@ -6,11 +6,13 @@
   {{#if $isUserLoggedIn}}
   <LazyTimeline timeline='federated' />
   {{else}}
-  <FreeTextLayout>
-    <h1>Federated</h1>
+  <HiddenFromSSR>
+    <FreeTextLayout>
+      <h1>Federated</h1>
 
-    <p>Your federated timeline will appear here when logged in.</p>
-  </FreeTextLayout>
+      <p>Your federated timeline will appear here when logged in.</p>
+    </FreeTextLayout>
+  </HiddenFromSSR>
   {{/if}}
 </Layout>
 
@@ -19,13 +21,15 @@
   import LazyTimeline from './_components/LazyTimeline.html'
   import FreeTextLayout from './_components/FreeTextLayout.html'
   import { store } from './_utils/store.js'
+  import HiddenFromSSR from './_components/HiddenFromSSR'
 
   export default {
     store: () => store,
     components: {
       Layout,
       LazyTimeline,
-      FreeTextLayout
+      FreeTextLayout,
+      HiddenFromSSR
     }
   }
 </script>
\ No newline at end of file
diff --git a/routes/local.html b/routes/local.html
index 2adcf30..9893f35 100644
--- a/routes/local.html
+++ b/routes/local.html
@@ -6,11 +6,13 @@
   {{#if $isUserLoggedIn}}
   <LazyTimeline timeline='local' />
   {{else}}
-  <FreeTextLayout>
-    <h1>Local</h1>
+  <HiddenFromSSR>
+    <FreeTextLayout>
+      <h1>Local</h1>
 
-    <p>Your local timeline will appear here when logged in.</p>
-  </FreeTextLayout>
+      <p>Your local timeline will appear here when logged in.</p>
+    </FreeTextLayout>
+  </HiddenFromSSR>
   {{/if}}
 </Layout>
 
@@ -19,13 +21,15 @@
   import LazyTimeline from './_components/LazyTimeline.html'
   import FreeTextLayout from './_components/FreeTextLayout.html'
   import { store } from './_utils/store.js'
+  import HiddenFromSSR from './_components/HiddenFromSSR'
 
   export default {
     store: () => store,
     components: {
       Layout,
       LazyTimeline,
-      FreeTextLayout
+      FreeTextLayout,
+      HiddenFromSSR
     }
   }
 </script>
\ No newline at end of file
diff --git a/routes/notifications.html b/routes/notifications.html
index 6a621e6..f6f978e 100644
--- a/routes/notifications.html
+++ b/routes/notifications.html
@@ -3,21 +3,25 @@
 </:Head>
 
 <Layout page='notifications'>
-  <FreeTextLayout>
-    <h1>Notifications</h1>
+  <HiddenFromSSR>
+    <FreeTextLayout>
+      <h1>Notifications</h1>
 
-    <p>Your notifications will appear here when logged in.</p>
-  </FreeTextLayout>
+      <p>Your notifications will appear here when logged in.</p>
+    </FreeTextLayout>
+  </HiddenFromSSR>
 </Layout>
 
 <script>
   import Layout from './_components/Layout.html';
   import FreeTextLayout from './_components/FreeTextLayout.html'
+  import HiddenFromSSR from './_components/HiddenFromSSR'
 
   export default {
     components: {
       Layout,
-      FreeTextLayout
+      FreeTextLayout,
+      HiddenFromSSR
     },
   };
 </script>
\ No newline at end of file
diff --git a/templates/2xx.html b/templates/2xx.html
index b0bf2b8..0048107 100644
--- a/templates/2xx.html
+++ b/templates/2xx.html
@@ -18,7 +18,7 @@ body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-o
 
 	<noscript>
 		<style>
-			.not-logged-in-home.hidden {
+			.hidden {
 				opacity: 1;
 			}
 		</style>