From 28cf7b5e83eefdebb0a355bb56162e9d829633ba Mon Sep 17 00:00:00 2001
From: Flancian <0@flancia.org>
Date: Sun, 20 Dec 2020 18:12:09 +0100
Subject: [PATCH] Add hypothes.is built into the Agora.

---
 app/static/css/screen-dark.css |  6 ++++++
 app/templates/base.html        | 13 ++++++++++---
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/app/static/css/screen-dark.css b/app/static/css/screen-dark.css
index 5938d61..fb1b354 100644
--- a/app/static/css/screen-dark.css
+++ b/app/static/css/screen-dark.css
@@ -93,3 +93,9 @@ h2              { font-size: 1.2em; }
     margin-bottom: 10px; 
     border-radius: 10px;
 }
+
+
+/* hypothes.is 
+    This totally doesn't work, at all, and I have no idea why :) 
+*/
+.annotator-frame { margin-top: 4.5em }
diff --git a/app/templates/base.html b/app/templates/base.html
index 92b3fac..8671130 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -25,6 +25,15 @@
 	    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Merriweather:300,700,700italic,300italic|Open+Sans:700,400" />
 	    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/screen-dark.css')}}" id="theme-link" />
     <script type=text/javascript src="{{url_for('static', filename='js/main.js')}}"></script>
+    <!-- considering this way of integrating hypothesis, although I like "standard" (sidebar) mode.
+    <script type="application/json" class="js-hypothesis-config">
+          {
+              "externalContainerSelector": ".node",
+          }
+    </script>
+    -->
+    <script async src="https://hypothes.is/embed.js"></script>
+    <script src="https://hypothes.is/embed.js" async></script>
 	</head>
 	<span align=left>
 		<a href="/"><img src="/static/img/agora.png" class="logo" style="vertical-align: top" width="19" height="19"></a> |
@@ -35,9 +44,7 @@
 		| <a href="/users">users</a>
 		| <a href="/latest">latest</a>
 		| <a href="/search">search</a>
-	</span>
-	<span style="vertical-align: bottom; float:right">
-		<a href="#" style="text-decoration: none;" class="theme-toggle">🌙</a>
+        | <a href="#" style="text-decoration: none;" class="theme-toggle">🌙</a>
 		| <a href="/node/agora-help" style="text-decoration: none;" class="help-button">ℹ️</a>
 	</span>
     <br />