Fix up Notes Pages (2factorauth#3242)

* Remove generic text to move to Secondary layout itself * move generic header to layout * remove duplicate header text * remove duplicate header text * remove duplicate header text * remove duplicate header text * Merged layouts and made the notes overview page dynamically show the available notes * defaults for title of page * set defaults that make sense * Fix SEO so tags indicate the URL you're actually linking to * Use the dynamic tag where possible. Help with debugging forked copies. * missed one * compressed the schwab logo * Updates based on PR Feedback * Small revision to fix issue with additional self-referencing link being shown.
jelastic · Dec 7, 2018 · 469a03b · 469a03b
1 parent 32cfc4e
commit 469a03b
Show file tree

Hide file tree

Showing 11 changed files with 57 additions and 102 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -3,18 +3,18 @@
 <head>
   <meta http-equiv='Content-Security-Policy' content="script-src 'self' https://ajax.cloudflare.com https://code.jquery.com https://cdnjs.cloudflare.com; style-src 'self' 'unsafe-inline' data: https://fonts.googleapis.com https://cdnjs.cloudflare.com; font-src 'self' data: https://fonts.gstatic.com https://cdnjs.cloudflare.com; img-src 'self';">
   <meta charset="UTF-8">
-  <meta name="description" content="{{ site.description }}">
+  <meta name="description" content="{{ page.description | default: site.description }}">
   <meta name="author" content="{{ site.author }}">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/png" href="/img/logo.png"/>
 
-  <meta property="og:title" content="{{ site.title }}">
+  <meta property="og:title" content="{{ page.title | default: site.title }}">
   <meta property="og:type" content="website">
   <meta property="og:image" content="{{ site.url }}/{{ site.img }}">
-  <meta property="og:url" content="{{ site.url }}">
-  <meta property="og:description" content="{{ page.description }}">
+  <meta property="og:url" content="{{ page.url | prepend: site.url }}">
+  <meta property="og:description" content="{{ page.description | default: site.description }}">
 
-  <title>{{ site.title }}</title>
+  <title>{{ page.title | default: site.title }}</title>
 
   <!-- Google Fonts should not use SRI hashes as the CSS served dynamically changes depending on browser -->
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700">

diff --git a/_layouts/secondary.html b/_layouts/secondary.html
@@ -3,18 +3,18 @@
 <head>
   <meta http-equiv='Content-Security-Policy' content="script-src 'self' https://ajax.cloudflare.com https://code.jquery.com https://cdnjs.cloudflare.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://cdnjs.cloudflare.com; font-src 'self' data: https://fonts.gstatic.com https://cdnjs.cloudflare.com; img-src 'self';">
   <meta charset="UTF-8">
-  <meta name="description" content="{{ site.description }}">
+  <meta name="description" content="{{ page.description | default: site.description }}">
   <meta name="author" content="{{ site.author }}">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/png" href="/img/logo.png"/>
 
-  <meta property="og:title" content="{{ site.title }}">
+  <meta property="og:title" content="{{ page.title | default: site.title }}">
   <meta property="og:type" content="website">
   <meta property="og:image" content="{{ site.url }}/{{ site.img }}">
-  <meta property="og:url" content="{{ site.url }}">
-  <meta property="og:description" content="{{ page.description }}">
+  <meta property="og:url" content="{{ page.url | prepend: site.url }}">
+  <meta property="og:description" content="{{ page.description | default: site.description }}">
 
-  <title>{{ site.title }}</title>
+  <title>{{ page.title | default: site.title }}</title>
 
   <!-- Google Fonts should not use SRI hashes as the CSS served dynamically changes depending on browser -->
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700">
@@ -38,6 +38,17 @@
     </a>
   </div>
 </div>
+{%- if page.dir == '/notes/' and page.name == 'index.html' -%}
+  <div id="note-header" class="ui center aligned icon header">
+    <i class="circular file outline icon"></i>
+    <h2>Notes</h2>
+  </div>
+{%- else -%}
+  <div class="ui center aligned icon header">
+    <i class="circular mobile alternate icon"></i>
+    <h2>Two Factor Auth (2FA)</h2>
+  </div>
+{%- endif -%}
 
 {{ content }}
 

diff --git a/index.html b/index.html
@@ -21,14 +21,14 @@ <h1>It looks like you have JavaScript disabled!</h1>
       <p>
         Without JavaScript, this page probably won't work very well.
         For more information, or if you would like to talk to us about this,
-        please take a look at our <a href="https://github.com/2factorauth/twofactorauth">
+        please take a look at our <a href="{{ site.repo }}">
         GitHub repository</a>.
       </p>
     </div>
   </div>
 </noscript>
 
-<a href="https://github.com/2factorauth/twofactorauth" class="github-corner" aria-label="View source on Github">
+<a href="{{ site.repo }}" class="github-corner" aria-label="View source on Github">
   <svg viewBox="0 0 250 250">
     <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" class="octo-triangle"></path>
     <path
@@ -49,7 +49,7 @@ <h2>Two Factor Auth (2FA)</h2>
   </div>
   <div class="sub header">
     Add your own favorite site by submitting a pull request on the
-    <a href="https://github.com/2factorauth/twofactorauth">GitHub repo</a>.
+    <a href="{{ site.repo }}">GitHub repo</a>.
   </div>
   <div id="search-wrapper" class="sub header">
     <label for="jets-search">

diff --git a/notes/chase.html b/notes/chase.html
@@ -1,14 +1,9 @@
 ---
 layout: secondary
+company: Chase
+img: chase.svg
 ---
-
-<div class="ui center aligned icon header">
-    <i class="circular mobile alternate icon"></i>
-
-    <h2>Two Factor Auth (2FA)</h2>
-</div>
-
-<div class="ui very padded vertical segment teal">
+<div class="ui very padded segment teal">
     <h2 class="ui header">
         Chase
         <div class="sub header">Info regarding Chase 2FA.</div>
@@ -31,7 +26,7 @@ <h2 class="ui header">
     <p>
 </div>
 
-<div class="ui very padded vertical segment teal">
+<div class="ui very padded segment teal">
     <h2 class="ui header">
         How to Change the Registered Contact Info on Your Account
     </h2>

diff --git a/notes/fidelity.html b/notes/fidelity.html
@@ -1,14 +1,9 @@
 ---
 layout: secondary
+company: Fidelity Investments
+img: fidelity.png
 ---
-
-<div class="ui center aligned icon header">
-    <i class="circular mobile alternate icon"></i>
-
-    <h2>Two Factor Auth (2FA)</h2>
-</div>
-
-<div class="ui very padded vertical segment teal">
+<div class="ui very padded segment teal">
     <h2 class="ui header">
         Fidelity Investments
         <div class="sub header">Info regarding Fidelity's 2FA.</div>
@@ -50,7 +45,7 @@ <h2 class="ui header">
     </div>
 </div>
 
-<div class="ui very padded vertical segment teal">
+<div class="ui very padded segment teal">
     <h2 class="ui header">
         How to Setup 2FA for Fidelity
     </h2>

diff --git a/notes/gree.html b/notes/gree.html
@@ -1,14 +1,9 @@
 ---
 layout: secondary
+company: GREE
+img: gree.png
 ---
-
-<div class="ui center aligned icon header">
-    <i class="circular mobile alternate icon"></i>
-
-    <h2>Two Factor Auth (2FA)</h2>
-</div>
-
-<div class="ui very padded vertical segment teal">
+<div class="ui very padded segment teal">
     <h2 class="ui header">
         GREE
         <div class="sub header">Info regarding GREE 2FA.</div>
@@ -24,7 +19,7 @@ <h2 class="ui header">
     </p>
 </div>
 
-<div class="ui very padded vertical segment teal">
+<div class="ui very padded segment teal">
     <h2 class="ui header">
         How to Setup 2FA for GREE
     </h2>

diff --git a/notes/img/schwab.png b/notes/img/schwab.png
diff --git a/notes/index.html b/notes/index.html
@@ -1,60 +1,29 @@
 ---
 layout: secondary
 ---
-
-<div id="note-header" class="ui center aligned icon header">
-  <i class="circular file outline icon"></i>
-
-  <h2>Notes</h2>
-</div>
-
 <div class="ui stackable grid container">
   <div class="three column row">
+{%- assign row_count = 0 -%}
+{%- for related_page in site.pages -%}
+  {%- if related_page.layout == 'secondary' and related_page.name != 'index.html' -%}
+    {%- assign row_count = row_count | plus: 1 -%}
     <div class="column">
       <div class="ui card">
-        <a class="image" href="/notes/chase">
-          <img src="img/chase.svg" alt="Chase">
-        </a>
-
-        <div class="content">
-          <a class="header" href="/notes/chase">Chase</a>
-        </div>
-      </div>
-    </div>
-    <div class="column">
-      <div class="ui card">
-        <a class="image" href="/notes/fidelity">
-          <img src="img/fidelity.png" alt="Fidelity">
+        <a class="image" href="{{related_page.url}}">
+          <img src="img/{{related_page.img}}" alt="{{related_page.company}}">
         </a>
 
         <div class="content">
-          <a class="header" href="/notes/fidelity">Fidelity Investments</a>
+          <a class="header" href="{{related_page.url}}">{{related_page.company}}</a>
         </div>
       </div>
     </div>
+  {%- endif -%} 
+  {%- if row_count == 3 -%}
+    {%- assign row_count = 0 -%}
   </div>
   <div class="three column row">
-    <div class="column">
-      <div class="ui card">
-        <a class="image" href="/notes/gree">
-          <img src="img/gree.png" alt="GREE">
-        </a>
-
-        <div class="content">
-          <a class="header" href="/notes/gree">GREE</a>
-        </div>
-      </div>
-    </div>
-    <div class="column">
-      <div class="ui card">
-        <a class="image" href="/notes/internetbs">
-          <img src="img/internetbs.png" alt="Internet.bs">
-        </a>
-
-        <div class="content">
-          <a class="header" href="/notes/internetbs">Internet.bs</a>
-        </div>
-      </div>
-    </div>
+  {%- endif -%}
+{%- endfor -%}    
   </div>
 </div>
diff --git a/notes/internetbs.html b/notes/internetbs.html
@@ -1,14 +1,9 @@
 ---
 layout: secondary
+company: Internet.bs
+img: internetbs.png
 ---
-
-<div class="ui center aligned icon header">
-    <i class="circular mobile alternate icon"></i>
-
-    <h2>Two Factor Auth (2FA)</h2>
-</div>
-
-<div class="ui very padded vertical segment teal">
+<div class="ui very padded segment teal">
     <h2 class="ui header">
         Internet.bs
         <div class="sub header">Info regarding Internet.bs's 2FA.</div>
@@ -24,7 +19,7 @@ <h2 class="ui header">
     </p>
 </div>
 
-<div class="ui very padded vertical segment teal">
+<div class="ui very padded segment teal">
     <h2 class="ui header">
         How to Setup 2FA for Internet.bs
     </h2>

diff --git a/notes/schwab.html b/notes/schwab.html
@@ -1,14 +1,9 @@
 ---
 layout: secondary
+company: Schwab
+img: schwab.png
 ---
-
-<div class="ui center aligned icon header">
-    <i class="circular mobile alternate icon"></i>
-
-    <h2>Two Factor Auth (2FA)</h2>
-</div>
-
-<div class="ui very padded vertical segment teal">
+<div class="ui very padded segment teal">
     <h2 class="ui header">
         Charles Schwab
         <div class="sub header">Info regarding Schwab's 2FA</div>
@@ -21,7 +16,7 @@ <h2 class="ui header">
     </p>
 </div>
 
-<div class="ui very padded vertical segment teal">
+<div class="ui very padded segment teal">
     <h2 class="ui header">
         How to Setup 2FA for Schwab
     </h2>

diff --git a/providers.html b/providers.html
@@ -15,7 +15,7 @@ <h2>Two Factor Auth (2FA)</h2>
     </div>
     <div id="{{ first.id }}" class="sub header">
         Add your own favorite site by submitting a pull request on the
-        <a href="https://github.com/2factorauth/twofactorauth">GitHub repo</a>.
+        <a href="{{ site.repo }}">GitHub repo</a>.
     </div>
 </div>