Add oembed info to /tweets, new icon for TTT in the page header.

public/tweets/index.html

@@ -1,15 +1,37 @@
 ---
 title: "Trans Twitter Topics"
+description: "A collection of the best twitter threads on transgender and gender dysphoria topics."
 ---
 {{#extend "layout"}}
 
+  {{#content "meta"}}
+  <meta property="og:title" content="{{meta.title}}{{#if meta.subtitle}}, {{meta.subtitle}}{{/if}}">
+  <meta property="og:description" content="{{meta.description}}">
+  {{#if titlecard}}<meta property="og:image" content="https://{{page.domain}}{{rev titlecard}}">{{/if}}
+  <meta property="og:url" content="https://{{page.domain}}{{url}}">
+  <meta name="twitter:title" content="{{meta.title}}{{#if meta.subtitle}}, {{meta.subtitle}}{{/if}}">
+  <meta name="twitter:description" content="{{meta.description}}">
+  {{#if titlecard}}
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:image" content="https://{{page.domain}}{{rev titlecard}}">
+  {{/if}}
+  <link rel="canonical" href="{{#if canonical}}{{canonical}}{{else}}https://{{page.domain}}{{url}}{{/if}}">
+  {{/content}}
+
   {{#content "bodyClass"}}page ttt{{/content}}
 
   {{#content "body"}}
 
+    <!-- <h1>Trans Twitter Topics</h1> -->
+    <div class="disclaimer"><div class="container" style="text-align: center">
+      <h1>Trans Twitter Topics</h1>
+      <strong>A collection of the best Twitter threads on transgender and gender dysphoria topics.</strong>
+      <p>Have a thread that you think belongs here? <a href="https://twitter.com/TwippingVanilla">Send it my way</a>.</p>
+    </div></div>
+
     <section class="ttt-grid">
 
-    {{#each posts}}
+    {{#each posts}}{{#unless draft}}
     <div class="ttt-post {{#if flags.bordered}} bordered{{/if}}">
       <div class="ttt-head">
         <div class="ttt-tags">{{#each meta.tags}}<a href="#{{@key}}" class="ttt-tag">{{this}}</a>{{/each}}</div>
@@ -17,7 +39,7 @@ title: "Trans Twitter Topics"
       </div>
       <div class="ttt-wrap">{{{this.content}}}</div>
     </div>
-    {{/each}}
+    {{/unless}}{{/each}}
 
     </section>
   {{/content}}

scss/_header.scss

@@ -173,6 +173,10 @@ header {
   font-size: 0.8rem;
   font-weight: 300;
 
+  .container {
+    max-width: 600px;
+  }
+
   .strong {
     display: block;
     font-weight: 600;

scss/_page.scss

@@ -6,8 +6,11 @@ body.page {
 
   header {
     background: $gray-800;
+
+    @media (min-width: 500px) {
       &.active { background: white; }
     }
+  }
 
 }
 

scss/_tweet.scss

@@ -143,7 +143,7 @@
     font-size: 0.95em;
     margin-top: 0.4em;
     margin-bottom: 0.75em;
-    background: rgba(#ddd, 0.1);
+    background: rgba($gray-500, 0.1);
 
     > a {
       color: inherit;
@@ -166,6 +166,14 @@
     p:last-child {
       margin-bottom: 0;
     }
+
+    &.missing {
+      background: rgba($gray-500, 0.4);
+      padding: 3px 10px;
+      width: 300px;
+      color: $gray-500;
+      border-color: rgba($gray-500, 0.4);
+    }
   }
 
   .tweet-entities {
@@ -324,6 +332,7 @@
   &.hide-reply .tweet-text a.mention:first-child { display: none; }
   &.hide-mentions .tweet-text a.mention { display: none; }
   &.hide-hashtags .tweet-text a.hashtag { display: none; }
+  &.hide-quoted .tweet-quoted { display: none; }
 
   &.collapse:not(.grid-row) {
     .tweet-item {

templates/layout.hbs

@@ -63,7 +63,7 @@
           <ul class="top-nav-inner">
             <!-- <li><a href="/glossary" class="top-nav-item">Glossary</a></li> -->
             <li><a href="/gdb/" class="top-nav-item dropdown-toggle" id="nav-gdb" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">The Gender Dysphoria Bible</a>{{import '/public/_gdb-menu'}}</li>
-            <li><a href="/tweets/" class="top-nav-item">Trans Twitter</a></li>
+            <li><a href="/tweets/" class="top-nav-item" title="Trans Twitter Topics"><img src="/images/transtwitter.png" width="24" height="24" alt=""></a></li>
             <li class="break"></li>
             <li><a href="https://github.com/GenderDysphoria/GenderDysphoria.fyi/issues" class="top-nav-item">{{icon 'brands/github'}}</a></li>
             <li><a href="https://patreon.com/curvyandtrans" class="top-nav-item" title="Patreon">{{icon 'brands/patreon'}}</a></li>

templates/page.hbs

@@ -11,7 +11,8 @@
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:image" content="https://{{page.domain}}{{rev titlecard}}">
   {{/if}}
-  <link rel="canonical" href="{{#if canonical}}{{canonical}}{{else}}https://{{page.domain}}{{url}}{{/if}}">{{/content}}
+  <link rel="canonical" href="{{#if canonical}}{{canonical}}{{else}}https://{{page.domain}}{{url}}{{/if}}">
+  {{/content}}
 
   {{#append 'post-header'}}
     {{#if meta.preBody}}{{import meta.preBody}}{{/if}}

templates/tweet.hbs

@@ -27,9 +27,13 @@
         </a>
         <div class="tweet-quoted-text">{{{html}}}</div>
       </div>
+      {{else}}
+      <div class="tweet-quoted missing">Quoted Tweet Unavailable</div>
       {{/with}}{{/if}}
       <div class="tweet-quoted-text">{{{html}}}</div>
     </div>
+    {{else}}
+    <div class="tweet-quoted missing">Quoted Tweet Unavailable</div>
     {{/with}}{{/if}}
     <div class="tweet-text">{{{html}}}</div>
     {{#any extended_entities.media entities.media}}