From 7c253d3fee18ff79c1fd446126bc577cb2658456 Mon Sep 17 00:00:00 2001
From: Reorx <novoreorx@gmail.com>
Date: Wed, 18 May 2022 13:46:15 +0800
Subject: [PATCH] new shortcode: social-quote-tweet; enhance h2, h3 margin

---
 assets/css/common/post-single.css          | 47 ++++++++++++++++------
 layouts/partials/social_links.html         |  2 +-
 layouts/shortcodes/social-quote-tweet.html | 16 ++++++++
 3 files changed, 52 insertions(+), 13 deletions(-)
 create mode 100644 layouts/shortcodes/social-quote-tweet.html

diff --git a/assets/css/common/post-single.css b/assets/css/common/post-single.css
index 1448e9a..bed37fa 100644
--- a/assets/css/common/post-single.css
+++ b/assets/css/common/post-single.css
@@ -34,12 +34,14 @@
     color: var(--content);
 }
 
-.post-content h3,
 .post-content h4,
 .post-content h5,
 .post-content h6 {
     margin: 24px 0 16px;
 }
+.post-content h3 {
+    margin: 32px 0 24px;
+}
 
 .post-content h1 {
     margin: 40px auto 32px;
@@ -47,7 +49,7 @@
 }
 
 .post-content h2 {
-    margin: 32px auto 24px;
+    margin: 40px auto 32px;
     font-size: 32px;
 }
 
@@ -243,7 +245,7 @@ h6:hover .anchor {
     margin: 0 3px;
     padding: 4px 5px;
     border-radius: 3px;
-    font-size: 16px;
+    font-size: .95em;
 }
 .post-content pre code {
     /* reset inline code */
@@ -492,26 +494,47 @@ h6:hover .anchor {
 
 .social-links {
     margin: calc(var(--content-gap) * 2) 0;
-    background-color: var(--code-bg);
-    border-left: 3px solid var(--twitter-color);
+}
+.social-quote {
     padding: 1em;
 }
-.social-links .title {
+.social-quote.tweet {
+    background-color: var(--code-bg);
+    border-left: 3px solid var(--twitter-color);
+}
+.social-quote.tweet svg {
+    color: var(--twitter-color);
+}
+.social-quote .title {
     margin-bottom: .5em;
     font-weight: 500;
 }
-
-.social-links blockquote {
-    font-size: .8em;
-    margin: 0 0 0 1em;
+.social-quote .title svg {
+    width: 20px;
+    height: 20px;
+    vertical-align: text-bottom;
 }
-.social-links blockquote a {
+.social-quote .title span {
+    margin-inline-start: .5em;
+}
+
+.social-quote p > a {
+    margin-inline-start: .5em;
+}
+.social-quote blockquote {
+    font-size: .8em;
+    /* reset for .post-content blockquote */
+    margin: 0 0 0 0;
+    padding: 0;
+    border-inline-start: 0;
+}
+.social-quote blockquote a {
     font-weight: 500;
     color: var(--primary);
     box-shadow: var(--link-underline-shadow);
     transition: var(--link-transition);
 }
-.social-links blockquote > a:hover {
+.social-quote blockquote > a:hover {
     color: var(--twitter-color);
     box-shadow: 0 2px 0 var(--twitter-color);
 }
diff --git a/layouts/partials/social_links.html b/layouts/partials/social_links.html
index 3dba7e1..5eaee1c 100644
--- a/layouts/partials/social_links.html
+++ b/layouts/partials/social_links.html
@@ -1,7 +1,7 @@
 <div class="social-links">
   {{ with .Params.socialLinks.twitter }}
     {{ if (and .id .user) }}
-    <div class="tweet-container">
+    <div class="tweet social-quote">
       <div class="title">
         Discuss on twitter
       </div>
diff --git a/layouts/shortcodes/social-quote-tweet.html b/layouts/shortcodes/social-quote-tweet.html
new file mode 100644
index 0000000..d8b21ca
--- /dev/null
+++ b/layouts/shortcodes/social-quote-tweet.html
@@ -0,0 +1,16 @@
+<div class="tweet social-quote">
+  <div class="title">
+    {{ safeHTML (index $.Site.Data.svg "twitter-simple") }}
+    {{ with .Inner }}<span>{{ . }}</span>{{ end }}
+  </div>
+  {{ $user := .Get "user" }}
+  {{ $id := .Get "id" }}
+  {{ $dnt := true }}
+  {{- .Inner -}}{{/* not required, only to not break Obsidian highlight by adding `/` before `>` */}}
+
+  {{- $url := printf "https://twitter.com/%v/status/%v" $user $id -}}
+  {{- $query := querify "url" $url "dnt" $dnt -}}
+  {{- $request := printf "https://publish.twitter.com/oembed?%s" $query -}}
+  {{- $json := getJSON $request -}}
+  {{- replaceRE "<script.+/script>" "" $json.html | safeHTML -}}
+</div>