Merge pull request harvard-lil#21 from rebeccacremona/preview-h2o

Preview H2O blog too
bensteinberg · Dec 9, 2022 · e1b0eb9 · e1b0eb9
2 parents 8f92efb + 7ff3538
commit e1b0eb9
Show file tree

Hide file tree

Showing 7 changed files with 692 additions and 11 deletions.
diff --git a/app.py b/app.py
@@ -97,6 +97,7 @@ def slugify(text, delim=u'-'):
 @app.route('/', methods=['GET', 'POST'])
 @login_required
 def landing():
+    site = 'h2o' if request.cookies.get('site') == 'h2o' else 'lil'
     if request.method == 'POST':
         r = requests.get('https://raw.githubusercontent.com/harvard-lil/website-static/develop/app/_data/people.yaml')
         authors = sorted(safe_load(r.text).keys())
@@ -112,10 +113,16 @@ def landing():
                 'heading': 'Download Post',
                 'authors': authors,
                 'excerpt_type': excerpt_type,
-                'excerpt': excerpt
+                'excerpt': excerpt,
+                'github_url': 'https://github.com/harvard-lil/website-static/tree/develop/app/_posts' if site == 'lil' else 'https://github.com/harvard-lil/h2o-static/tree/develop/app/_posts'
             }
         )
-    return render_template('generator/preview.html', context={'heading': 'Preview Blog Post'})
+
+    return render_template('generator/preview.html', context={
+        'scaffold': f'generator/{site}-scaffold.html',
+        'toggle': 'H2O' if site == 'lil' else 'LIL',
+        'index_url': 'https://lil.law.harvard.edu/blog' if site == 'lil' else 'https://about.opencasebook.org/blog/'
+    })
 
 
 @app.route('/download', methods=['POST'])

diff --git a/static/assets/css/h2o-main.css b/static/assets/css/h2o-main.css
diff --git a/static/css/triangle.css b/static/css/triangle.css
@@ -0,0 +1,38 @@
+#triangle-topright {
+  width: 0;
+  height: 0;
+  border-top: 150px solid black;
+  border-left: 150px solid transparent;
+  z-index: 9998;
+}
+
+#triangle-topright, #toggle-site-preview {
+  position: absolute;
+  color: white;
+  right: 0;
+}
+
+#toggle-site-preview {
+  transform: rotate(45deg);
+  z-index: 9999;
+}
+
+#toggle-site-preview {
+  font-family: sans-serif;
+  line-height: 20px;
+  transform-origin: -10% 100%;
+}
+
+/*html.h2o #toggle-site-preview {
+  transform-origin: -10% 50%;
+}
+
+html.h2o #toggle-site-preview {
+  transform-origin: -10% 50%;
+}*/
+
+#toggle-site-preview:hover, #toggle-site-preview:focus {
+  cursor: pointer;
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+}
diff --git a/templates/generator/download.html b/templates/generator/download.html
@@ -53,7 +53,7 @@
     <div style="margin-top: 25px; margin-bottom: 25px; border: 1px solid #eee; padding-top: 25px;">
      <ol>
        <li>Download your post's markdown file</li>
-       <li>Upload it to <a href="https://github.com/harvard-lil/website-static/tree/develop/app/_posts">https://github.com/harvard-lil/website-static/tree/develop/app/_posts</a>. (Drag and drop is easiest!)</li>
+       <li>Upload it to <a href="{{ context['github_url'] }}">{{ context['github_url'] }}</a>. (Drag and drop is easiest!)</li>
        <li>Pick the "<a href="https://github.com/blog/2105-upload-files-to-your-repositories" target="_blank">create new branch and make a pull request</a>" option <br> (rather than the "commit to the 'develop").</li>
      </ol>
     </div>

diff --git a/templates/generator/h2o-scaffold.html b/templates/generator/h2o-scaffold.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en" class="h2o">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>LIL Preview</title>
+    <link rel="stylesheet" href="/static/assets/css/h2o-main.css">
+    <link rel="stylesheet" href="/static/css/triangle.css">
+  </head>
+  <body class="blog">
+
+    {% block toggle_site %}
+    {% endblock toggle_site %}
+
+    <header class="blog-header">
+        <a href="#main" class="skip-link">Skip to main content</a>
+        <a href="#footer" class="skip-link">Skip to footer</a>
+        <div class="main-header">
+            <a class="blog-header-logo" href="/blog/">H2O Blog</a>
+        </div>
+    </header>
+
+    <main>
+      <p id="main" tabindex="-1" class="sr-only">Main Content</p>
+      <div class="post-index-container">
+
+        <article class="post-index-post">
+          <div class="post-header">
+            <time class="post-date" datetime="2016-04-04T00:00:00+00:00">April 4, 2016</time>
+            <h1 id="post-title" class="post-title" contenteditable></h1>
+            <div class="post-author">By <a href="https://lil.law.harvard.edu/about/#joe-yacoboski">Joe Yacoboski</a></div>
+          </div>
+          <div class="post-content">
+            <br>
+            {% block post %}
+            {% endblock post %}
+          </div>
+          <br>
+        </article>
+
+      </div>
+    </main>
+
+    <footer id="footer">
+      <div class="footer-wrapper">
+        <div class="footer-links">
+          <ul>
+            <li><a href="https://opencasebook.org/">Home</a></li>
+            <li><a href="/blog/">Blog</a></li>
+            <li><a href="https://opencasebook.org/pages/terms-of-service">Terms of Service</a></li>
+            <li><a href="https://opencasebook.org/pages/privacy-policy">Privacy Policy</a></li>
+            <li><a href="https://accessibility.huit.harvard.edu/digital-accessibility-policy">Accessibility</a></li>
+            <li><a href="https://opencasebook.org/pages/about">About</a></li>
+            <li><a href="/">Help Guide</a></li>
+            <li><a href="mailto:lil@law.harvard.edu?subject=Contact%20re%20H2O">Contact</a></li>
+          </ul>
+        </div>
+        <div class="footer-copyright">
+        </div>
+      </div>
+    </footer>
+
+    {% block scripts %}
+    {% endblock scripts %}
+
+  </body>
+</html>
diff --git a/templates/generator/lil-scaffold.html b/templates/generator/lil-scaffold.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="lil">
 
   <head>
     <meta charset="utf-8">
@@ -11,10 +11,12 @@
     <link rel="apple-touch-icon" href="/static/assets/images/apple-touch-icon.png">
     <link rel="stylesheet" href="/static/assets/css/main.css">
     <link rel="stylesheet" href="/static/assets/css/blog.css">
+    <link rel="stylesheet" href="/static/css/triangle.css">
   </head>
 
   <body class="post">
-
+    {% block toggle_site %}
+    {% endblock toggle_site %}
     <header>
       <nav>
         <ul>

diff --git a/templates/generator/preview.html b/templates/generator/preview.html
@@ -1,9 +1,9 @@
-{% extends "generator/lil-scaffold.html" %}
+{% extends context['scaffold'] %}
 
-{% block css %}
-  {{ super() }}
-  <link rel="stylesheet" href="{{ url_for('static', filename='css/simplemde.min.css')}}">
-{% endblock css %}
+{% block toggle_site %}
+  <div id="triangle-topright"></div>
+  <div id="toggle-site-preview" role="button" tabindex="0">Preview {{ context['toggle']}}</div>
+{% endblock toggle_site %}
 
 {% block post %}
   <div id="lil-preview-target" class="post-content" itemprop="articleBody">
@@ -31,7 +31,7 @@
     <p>You can enter any text you want into the editor, including HTML (audio/video embed tags...even script tags), and it will be rendered during preview as-is. So if you are tempted to paste in random javascript you find on the web, think twice.</p>
 
     <h3 id="post-excerpt">Post Excerpt</h3>
-    You can configure how much of your post will appear on the <a href="https://lil.law.harvard.edu/blog">blog's index page</a>.
+    You can configure how much of your post will appear on the <a href="{{ context['index_url'] }}">blog's index page</a>.
 
     The default is to show a "read more" link after the first paragraph.
 
@@ -65,6 +65,28 @@ <h3>Videos</h3>
 {% block scripts %}
   <script>
 
+    function toggle_site() {
+      console.log(document.cookie);
+      if (document.cookie.includes("site=h2o")) {
+        document.cookie = "site=lil; samesite=lax"
+      } else {
+        document.cookie = "site=h2o; samesite=lax"
+      }
+      document.location.reload()
+    }
+
+
+    const site_toggler = document.getElementById('toggle-site-preview');
+    site_toggler.onclick = toggle_site
+    // Make this div behave like a button:
+    // - activates when the spacebar  or enter is pressed
+    // - the browser should not scroll
+    site_toggler.addEventListener('keypress', function(e){
+      if (e.key == ' ' || e.key == 'Enter') {
+        e.preventDefault(); this.click();
+      }
+    }, false);
+
     function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'none')