Share to X button and post layout changes/fixes

app/views/components/share-buttons.pug

@@ -1,9 +1,23 @@
+mixin renderXShareButton (shareUrl, shareMsg)
+  a(href=`https://twitter.com/intent/tweet?url=${encodeURIComponent(shareUrl)}&text=${encodeURIComponent(shareMsg)}`).uk-button.share-button.share-to-x.uk-border-rounded
+    div(uk-grid).uk-grid-small.uk-flex-middle
+      .uk-width-auto
+        <svg aria-label="Twitter" focusable="false" height="20" role="img" viewBox="0 0 1200 1227" width="20" xmlns="http://www.w3.org/2000/svg">
+          <g>
+            <path fill="white" d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"></path>
+          </g>
+        </svg>
+      .uk-width-auto
+        span(class="uk-visible@s", style="line-height: 1;") Share #[span(class="uk-visible@l") to X]
+
 mixin renderGabShareButton (shareUrl, shareMsg)
   a(href=`https://gab.com/compose?url=${shareUrl}&text=${shareMsg}`, target="_blank", rel="noopener noreferrer").uk-button.share-button.share-to-gab.uk-border-rounded
-    span(style="color: white;")
-      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20px" height="20px" viewBox="0 4 20 30" xml:space="preserve">
-        <g>
-          <path fill="white" d="M13.8,7.6h-2.4v0.7V9l-0.4-0.3C10.2,7.8,9,7.2,7.7,7.2c-0.2,0-0.4,0-0.4,0c-0.1,0-0.3,0-0.5,0c-5.6,0.3-8.7,7.2-5.4,12.1c2.3,3.4,7.1,4.1,9.7,1.5l0.3-0.3l0,0.7c0,1-0.1,1.5-0.4,2.2c-1,2.4-4.1,3-6.8,1.3c-0.2-0.1-0.4-0.2-0.4-0.2c-0.1,0.1-1.9,3.5-1.9,3.6c0,0.1,0.5,0.4,0.8,0.6c2.2,1.4,5.6,1.7,8.3,0.8c2.7-0.9,4.5-3.2,5-6.4c0.2-1.1,0.2-0.8,0.2-8.4l0-7.1H13.8z M9.7,17.6c-2.2,1.2-4.9-0.4-4.9-2.9C4.8,12.6,7,11,9,11.6C11.8,12.4,12.3,16.1,9.7,17.6z"></path>
-        </g>
-      </svg>
-    span(class="uk-visible@s") Share #[span(class="uk-visible@l") to Gab]
+    div(uk-grid).uk-grid-small
+      .uk-width-auto
+        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20px" height="20px" viewBox="0 4 20 30" xml:space="preserve">
+          <g>
+            <path fill="white" d="M13.8,7.6h-2.4v0.7V9l-0.4-0.3C10.2,7.8,9,7.2,7.7,7.2c-0.2,0-0.4,0-0.4,0c-0.1,0-0.3,0-0.5,0c-5.6,0.3-8.7,7.2-5.4,12.1c2.3,3.4,7.1,4.1,9.7,1.5l0.3-0.3l0,0.7c0,1-0.1,1.5-0.4,2.2c-1,2.4-4.1,3-6.8,1.3c-0.2-0.1-0.4-0.2-0.4-0.2c-0.1,0.1-1.9,3.5-1.9,3.6c0,0.1,0.5,0.4,0.8,0.6c2.2,1.4,5.6,1.7,8.3,0.8c2.7-0.9,4.5-3.2,5-6.4c0.2-1.1,0.2-0.8,0.2-8.4l0-7.1H13.8z M9.7,17.6c-2.2,1.2-4.9-0.4-4.9-2.9C4.8,12.6,7,11,9,11.6C11.8,12.4,12.3,16.1,9.7,17.6z"></path>
+          </g>
+        </svg>
+      .uk-width-auto
+        span(class="uk-visible@s", style="line-height: 1;") Share #[span(class="uk-visible@l") to Gab]

app/views/post/view.pug

@@ -6,6 +6,8 @@ block content-header
       img(src=`/image/${post.image._id}`, style="max-height: 420px; object-fit: cover; object-position: center center;").responsive
 
 block content
+  -
+    var postUrl = `https://${site.domainKey}/post/${post.slug}`;
 
   include ../components/share-buttons
 
@@ -16,23 +18,16 @@ block content
 
   article(dtp-post-id= post._id).content-block
     .uk-margin
-      h1.article-title= post.title
-
-      .uk-margin
-        .uk-text-lead= post.summary
-
       div(uk-grid)
         .uk-width-auto
-          +renderGabShareButton(`https://${site.domainKey}/post/${post.slug}`, `${post.title} - ${post.summary}`)
-      if Array.isArray(post.tags) && (post.tags.length > 0)
-        +renderSectionTitle('Post tags')
-        div(uk-grid).uk-grid-small
-          each tag in post.tags
-            -
-             var tagSlug;
-             tagSlug = tag.replace(" ", "_")
-            a(href=`/post/tag/${tagSlug}`).uk-display-block.uk-link-reset.uk-margin-small= tag
-          
+          +renderXShareButton(postUrl, post.title)
+        .uk-width-auto
+          +renderGabShareButton(postUrl, `${post.title} - ${post.summary}`)
+
+    .uk-margin
+      h1.article-title= post.title
+      .uk-text-lead= post.summary
+
     .uk-margin
       .uk-article-meta
         div(uk-grid).uk-grid-small.uk-flex-top
@@ -71,12 +66,21 @@ block content
         .uk-article-meta This post was updated on 
           uk-text-small(data-dtp-timestamp= post.updated)
           
-    
   .content-block
     .uk-margin
       +renderSectionTitle('Post author')
     +renderPostAuthorCredit(post.author)
 
+  .content-block
+    if Array.isArray(post.tags) && (post.tags.length > 0)
+      .uk-margin
+        +renderSectionTitle('Post tags')
+      div(uk-grid).uk-grid-small
+        each tag in post.tags
+          - var tagSlug = tag.replace(" ", "_")
+          a(href=`/post/tag/${tagSlug}`)
+            label.post-tag= tag
+
   if user && post.flags.enableComments && user.permissions.canComment
     .content-block
       .uk-margin

client/less/site/button.less

@@ -35,6 +35,15 @@ a.dtp-link-button {
       color: white;
     }
   }
+  &.share-to-x {
+    background: @brand-color-x;
+    color: #ffffff;
+
+    &:hover {
+      background: darken(@brand-color-x, 5%);
+      color: #ffffff;
+    }
+  }
 }
 
 button.dtp-payment-method {

client/less/site/post-tag.less

@@ -0,0 +1,6 @@
+label.post-tag {
+  padding: 6px 8px;
+  border-radius: 4px;
+  background: @post-tag-background-color;
+  color: @post-tag-color;
+}

client/less/site/uikit-theme.dtp-dark.less

@@ -37,6 +37,13 @@
 @global-border:                                 #4a4a4a;
 @global-inverse-color:                          #e8e8e8;
 
+//
+// Post tags
+//
+
+@post-tag-background-color:                     #0a63c9;
+@post-tag-color:                                #ffffff;
+
 //
 // Inverse
 //

client/less/site/uikit-theme.dtp-light.less

@@ -32,4 +32,7 @@
 @internal-form-datalist-image:                    "/uikit/images/backgrounds/form-datalist.svg";
 @internal-form-radio-image:                       "/uikit/images/backgrounds/form-radio.svg";
 @internal-form-checkbox-image:                    "/uikit/images/backgrounds/form-checkbox.svg";
-@internal-form-checkbox-indeterminate-image:      "/uikit/images/backgrounds/form-checkbox-indeterminate.svg";
+@internal-form-checkbox-indeterminate-image:      "/uikit/images/backgrounds/form-checkbox-indeterminate.svg";
+
+@post-tag-background-color:                     #1a1a1a;
+@post-tag-color:                                #e8e8e8;

client/less/site/variables.less

@@ -1,4 +1,5 @@
 @site-brand-color: #d01a2a;
 @brand-color-gab: #00d178;
+@brand-color-x: #000000;
 
 @site-navbar-height: 64px;

client/less/style.common.less

@@ -17,6 +17,7 @@
 @import "site/form.less";
 @import "site/kiosk.less";
 @import "site/markdown.less";
+@import "site/post-tag.less";
 @import "site/section.less";
 @import "site/sidebar.less";
 @import "site/site.less";

static/offline.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Shing.tv | Offline</title>
+
+    <style type="text/css">
+      html, body {
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+    </style>
+  </head>
+
+  <body>
+    <div class="container">
+      <section>
+        <img src="/static/img/header.png" class="responsive" alt="Digital Telepresence Platform"/>
+        <p>Shing.tv as you know it has been closed for at least two weeks. Meeting less than 50% of the funding goal means this site won't be here for at least 50% of a month. Because we're taking advantage of this time to make some pretty radical changes to the site and the services provided.</p>
+
+        <p>This <a href="https://twitter.com/dtp_llc/status/1741661171294323022">thread on X</a> describes what's happening, and this is a fine time to follow us on X to keep up with the progress as we go.</p>
+
+      </section>
+    </div>
+  </body>
+
+</html>