feat: allow customisation of social share & connect (#2)

wayjam · Feb 23, 2025 · 81530b0 · 81530b0
1 parent ecedd47
commit 81530b0
Show file tree

Hide file tree

Showing 6 changed files with 165 additions and 81 deletions.
diff --git a/exampleSite/hugo.yaml b/exampleSite/hugo.yaml
@@ -103,14 +103,40 @@ params:
 
   # Social links
   social:
-    twitter: 'Your Twitter username'
-    github: 'Your GitHub username'
-    linkedin: 'Your LinkedIn username'
-    disableShareByType:
-      - not-exist
+    twitter: 'Your_Twitter_username'
+    github: 'Your_GitHub_username'
+    linkedin: 'Your_LinkedIn_username'
+    whatsapp: 'Your_WhatsApp_username'
+
+    share:
+      disabled: false
+      disableByType: # content type
+        - not-exist
+      platforms: # available inherit platform: [redidit, x, facebook, google, telegram]
+        - name: reddit # inherit platform just need the name
+        - name: x
+        - name: facebook
+        # - name: telegram # disable the inherit platform
+        - name: linkedin
+        - name: whatsapp
+
+        # All Params
+        # {permalink}: Permalink of current entry, eg: "http://localhost/hugo-theme-fluidity/posts/markdown-syntax/".
+        # {title}: Title of current entry, eg: "Markdown Syntax".
+        # {description}: Description of current entry, eg: "Sample article showcasing basic Markdown syntax and formatting for HTML elements.".
+        # {via}: The X(Twitter) username which configured at site params, eg: "elonmusk".
+        # {user}: The account username of current platform(match).
+        - name: FullExample # This is a custom platform
+          urlPattern: "https://example.com?link={permalink}&title={title}&tags={tags}&description={description}&via={via}&user={user}"
+    connect:
+      platforms: # available inherit platform: [github, x, linkedin, whatsapp]
+        - github
+        - x
+        # - linkedin # disable the inherit platform
+        - whatsapp
 
   articleMetadata:
-    position: header # Can be either header, sidebar or none.
+    position: header # Can be either [header, sidebar, none].
 
   # Table of contents
   toc:

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -1,6 +1,7 @@
 {{- define "main" -}}
   {{- $metadataPosition := lower (default "header" .Site.Params.articleMetadata.position) -}}
 
+
   <div class="container mt-1 mx-auto px-2 py-2 md:px-2 md:py-4 lg:px-4 lg:py-8 min-h-screen">
     <!-- Article Header -->
     <header class="md:mb-4 lg:mb-8">
@@ -43,6 +44,7 @@ <h1 class="fluidity-page-title text-4xl group mb-2 md:mb-4 lg:mb-8">
           {{- partial "article-metadata" . -}}
         {{- end -}}
 
+
         <div
           class="sticky top-4 rounded-xl p-4
                     relative overflow-hidden
@@ -54,7 +56,10 @@ <h1 class="fluidity-page-title text-4xl group mb-2 md:mb-4 lg:mb-8">
                     transition-all duration-300 ease-out">
           {{- $enableToc := and (gt .WordCount 400) (and (not (eq .Params.toc false)) (not .Site.Params.toc.disabled)) -}}
           {{- $enableToc = not (eq .TableOfContents "<nav id=\"TableOfContents\"></nav>") -}}
-          {{- $enableShare := not (in .Site.Params.social.disableShareByType .Type) -}}
+          {{- $enableShare := false -}}
+          {{ if and (isset .Site.Params "social") (isset .Site.Params.social "share") }}
+            {{ $enableShare = and (not .Site.Params.social.share.disabled) (not (in .Site.Params.social.share.disableByType .Type)) }}
+          {{ end }}
 
           {{- if and $enableToc -}}
             <div class="relative">

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -69,16 +69,8 @@ <h3 class="text-lg sm:text-xl font-semibold text-neutral-900 dark:text-neutral-5
           {{- i18n "connect" | strings.Title -}}
         </h3>
         <ul class="space-y-2">
-          {{- partial "inline/footer/connect-item.html" (dict "icon" "rss" "title" "RSS Feed" "url" ("index.xml" | relURL)) -}}
-          {{- with .Site.Params.social.twitter -}}
-            {{- partial "inline/footer/connect-item.html" (dict "icon" "xcom" "title" "X.com" "url" (printf "https://x.com/%s" .)) -}}
-          {{- end -}}
-          {{- with .Site.Params.social.github -}}
-            {{- partial "inline/footer/connect-item.html" (dict "icon" "github" "title" "GitHub" "url" (printf "https://github.com/%s" .)) -}}
-          {{- end -}}
-          {{- with .Site.Params.social.linkedin -}}
-            {{- partial "inline/footer/connect-item.html" (dict "icon" "linkedin" "title" "LinkedIn" "url" (printf "https://linkedin.com/in/%s" .)) -}}
-          {{- end -}}
+          {{- partial "inline/connect/item.html" (dict "icon" "rss" "title" "RSS Feed" "url" ("index.xml" | relURL)) -}}
+          {{- partial "utils/social-connect.html" . -}}
         </ul>
       </div>
     </div>
@@ -124,22 +116,3 @@ <h3 class="text-lg sm:text-xl font-semibold text-neutral-900 dark:text-neutral-5
     </div>
   </div>
 </div>
-
-{{- define "partials/inline/footer/connect-item.html" -}}
-  {{- $item := . -}}
-  <li>
-    <a
-      href="{{ $item.url }}"
-      target="_blank"
-      rel="noopener noreferrer"
-      class="group flex items-center gap-2 
-            text-slate-600 hover:text-sky-600 
-            dark:text-slate-300 dark:hover:text-sky-300 
-            transition-all duration-300 ease-in-out">
-      <span class="transform group-hover:scale-110 transition-transform duration-300">
-        {{- partial "utils/icon" (dict "icon" $item.icon) -}}
-      </span>
-      <span class="transform group-hover:translate-x-1 transition-transform duration-300">{{ $item.title }}</span>
-    </a>
-  </li>
-{{- end -}}
diff --git a/layouts/partials/utils/icon.html b/layouts/partials/utils/icon.html
@@ -90,6 +90,10 @@
     <path
       d="M18.3362 18.339H15.6707V14.1622C15.6707 13.1662 15.6505 11.8845 14.2817 11.8845C12.892 11.8845 12.6797 12.9683 12.6797 14.0887V18.339H10.0142V9.75H12.5747V10.9207H12.6092C12.967 10.2457 13.837 9.53325 15.1367 9.53325C17.8375 9.53325 18.337 11.3108 18.337 13.6245V18.339H18.3362ZM7.00373 8.57475C6.14573 8.57475 5.45648 7.88025 5.45648 7.026C5.45648 6.1725 6.14648 5.47875 7.00373 5.47875C7.85873 5.47875 8.55173 6.1725 8.55173 7.026C8.55173 7.88025 7.85798 8.57475 7.00373 8.57475ZM8.34023 18.339H5.66723V9.75H8.34023V18.339ZM19.6697 3H4.32923C3.59498 3 3.00098 3.5805 3.00098 4.29675V19.7033C3.00098 20.4202 3.59498 21 4.32923 21H19.6675C20.401 21 21.001 20.4202 21.001 19.7033V4.29675C21.001 3.5805 20.401 3 19.6675 3H19.6697Z"></path>
   {{- end -}}
+  {{- with (eq $icon "whatsapp") -}}
+    <path
+      d="M12.001 2C17.5238 2 22.001 6.47715 22.001 12C22.001 17.5228 17.5238 22 12.001 22C10.1671 22 8.44851 21.5064 6.97086 20.6447L2.00516 22L3.35712 17.0315C2.49494 15.5536 2.00098 13.8345 2.00098 12C2.00098 6.47715 6.47813 2 12.001 2ZM8.59339 7.30019L8.39232 7.30833C8.26293 7.31742 8.13607 7.34902 8.02057 7.40811C7.93392 7.45244 7.85348 7.51651 7.72709 7.63586C7.60774 7.74855 7.53857 7.84697 7.46569 7.94186C7.09599 8.4232 6.89729 9.01405 6.90098 9.62098C6.90299 10.1116 7.03043 10.5884 7.23169 11.0336C7.63982 11.9364 8.31288 12.8908 9.20194 13.7759C9.4155 13.9885 9.62473 14.2034 9.85034 14.402C10.9538 15.3736 12.2688 16.0742 13.6907 16.4482C13.6907 16.4482 14.2507 16.5342 14.2589 16.5347C14.4444 16.5447 14.6296 16.5313 14.8153 16.5218C15.1066 16.5068 15.391 16.428 15.6484 16.2909C15.8139 16.2028 15.8922 16.159 16.0311 16.0714C16.0311 16.0714 16.0737 16.0426 16.1559 15.9814C16.2909 15.8808 16.3743 15.81 16.4866 15.6934C16.5694 15.6074 16.6406 15.5058 16.6956 15.3913C16.7738 15.2281 16.8525 14.9166 16.8838 14.6579C16.9077 14.4603 16.9005 14.3523 16.8979 14.2854C16.8936 14.1778 16.8047 14.0671 16.7073 14.0201L16.1258 13.7587C16.1258 13.7587 15.2563 13.3803 14.7245 13.1377C14.6691 13.1124 14.6085 13.1007 14.5476 13.097C14.4142 13.0888 14.2647 13.1236 14.1696 13.2238C14.1646 13.2218 14.0984 13.279 13.3749 14.1555C13.335 14.2032 13.2415 14.3069 13.0798 14.2972C13.0554 14.2955 13.0311 14.292 13.0074 14.2858C12.9419 14.2685 12.8781 14.2457 12.8157 14.2193C12.692 14.1668 12.6486 14.1469 12.5641 14.1105C11.9868 13.8583 11.457 13.5209 10.9887 13.108C10.8631 12.9974 10.7463 12.8783 10.6259 12.7616C10.2057 12.3543 9.86169 11.9211 9.60577 11.4938C9.5918 11.4705 9.57027 11.4368 9.54708 11.3991C9.50521 11.331 9.45903 11.25 9.44455 11.1944C9.40738 11.0473 9.50599 10.9291 9.50599 10.9291C9.50599 10.9291 9.74939 10.663 9.86248 10.5183C9.97128 10.379 10.0652 10.2428 10.125 10.1457C10.2428 9.95633 10.2801 9.76062 10.2182 9.60963C9.93764 8.92565 9.64818 8.24536 9.34986 7.56894C9.29098 7.43545 9.11585 7.33846 8.95659 7.32007C8.90265 7.31384 8.84875 7.30758 8.79459 7.30402C8.66053 7.29748 8.5262 7.29892 8.39232 7.30833L8.59339 7.30019Z"></path>
+  {{- end -}}
   {{- with (eq $icon "search") -}}
     <path
       d="M4.5 10C4.5 6.96243 6.96243 4.5 10 4.5C13.0376 4.5 15.5 6.96243 15.5 10C15.5 13.0376 13.0376 15.5 10 15.5C6.96243 15.5 4.5 13.0376 4.5 10ZM10 3C6.13401 3 3 6.13401 3 10C3 13.866 6.13401 17 10 17C11.6628 17 13.1902 16.4202 14.3911 15.4518L19.7197 20.7803C20.0126 21.0732 20.4874 21.0732 20.7803 20.7803C21.0732 20.4874 21.0732 20.0126 20.7803 19.7197L15.4518 14.3911C16.4202 13.1902 17 11.6628 17 10C17 6.13401 13.866 3 10 3Z" />

diff --git a/layouts/partials/utils/share.html b/layouts/partials/utils/share.html
@@ -1,58 +1,92 @@
 <!-- Share component -->
 <div id="share">
-  <h2 class="text-lg font-medium text-neutral-800 dark:text-neutral-200 mb-4">
-    {{- i18n "shareWith" | strings.Title -}}
-  </h2>
-  <div class="flex flex-wrap justify-between gap-1 items-center space-y-1">
-    {{- $tag_list := "" -}}
-    {{- with .Params.Tags -}}
-      {{- $tag_list = delimit . "," -}}
-    {{- end -}}
-    {{- partial "inline/share/item.html"
-      (dict
-        "Name" "Reddit"
-        "Icon" "reddit"
-        "Title" .Title
-        "URL" (fmt.Print "https://reddit.com/submit?url=" .Permalink "&title=" .Title ))
-    -}}
-    {{- partial "inline/share/item.html"
-      (dict
-        "Name" "X.com"
-        "Icon" "twitter"
-        "Title" .Title
-        "URL" (fmt.Print "https://x.com/intent/tweet/?text=" .Title "&url= " .Permalink "&hashtags=" $tag_list))
-    -}}
-    {{- partial "inline/share/item.html"
-      (dict
-        "Name" "Facebook"
-        "Icon" "facebook"
-        "Title" .Title
-        "URL" (fmt.Print "https://facebook.com/sharer/sharer.php?u= " .Permalink ))
-    -}}
-    {{- partial "inline/share/item.html"
-      (dict
-        "Name" "Google"
-        "Icon" "google"
-        "Title" .Title
-        "URL" (fmt.Print "https://www.google.com/bookmarks/mark?op=edit&bkmk=" .Permalink "&title=" .Title ))
-    -}}
-    {{- partial "inline/share/item.html"
-      (dict
-        "Name" "Telegram"
-        "Icon" "telegram"
-        "Title" .Title
-        "URL" (fmt.Print "https://telegram.me/share/url?url=" .Permalink "&text=" .Title ))
-    -}}
-  </div>
+  {{- if not (or .Site.Params.social.share.disabled (in .Site.Params.social.share.disableByType .Type)) -}}
+    <h2 class="text-lg font-medium text-neutral-800 dark:text-neutral-200 mb-4">
+      {{- i18n "shareWith" | strings.Title -}}
+    </h2>
+    <div class="flex flex-wrap justify-between gap-1 items-center space-y-1">
+      {{- $entry := . -}}
+
+      {{/* Define default social platforms */}}
+      {{- $defaultPlatforms := dict
+        "reddit" (dict "name" "Reddit" "urlPattern" "https://reddit.com/submit?url={permalink}&title={title}")
+        "x" (dict "name" "X.com" "urlPattern" "https://x.com/intent/tweet/?text={title}&url={permalink}&hashtags={tags}")
+        "facebook" (dict "name" "Facebook" "urlPattern" "https://facebook.com/sharer/sharer.php?u={permalink}")
+        "telegram" (dict "name" "Telegram" "urlPattern" "https://t.me/share/url?url={permalink}&text={title}")
+        "linkedin" (dict "name" "Linkedin" "urlPattern" "https://www.linkedin.com/shareArticle?url={permalink}&title={title}")
+        "whatsapp" (dict "name" "WhatsApp" "urlPattern" "https://wa.me/?text={permalink} {title}")
+      -}}
+
+      {{- $tagList := "" -}}
+      {{- with .Params.Tags -}}
+        {{- $tagList = delimit . "," -}}
+      {{- end -}}
+
+      {{/* Render configured platforms */}}
+      {{- range .Site.Params.social.share.platforms -}}
+        {{- $platformName := .name | lower -}}
+        {{- $urlPattern := .urlPattern -}}
+        {{- $name := .name | title -}}
+
+        {{/* Handle inherit platform */}}
+        {{- with index $defaultPlatforms $platformName -}}
+          {{- if not $urlPattern -}}
+            {{- $urlPattern = .urlPattern -}}
+          {{- end -}}
+          {{- $name = .name -}}
+        {{- end -}}
+
+        {{- $url := partial "inline/share/generate_share_url.html" (dict
+          "pattern" $urlPattern
+          "permalink" $entry.Permalink
+          "title" $entry.Title
+          "tags" $tagList
+          "description" ($entry.Description | default $entry.Title)
+          "via" ($entry.Site.Params.social.twitter | default "")
+          "user" (index $entry.Site.Params.social $platformName | default "")
+          )
+        -}}
+
+        {{- partial "inline/share/item.html" (dict
+          "Name" $name
+          "Title" $entry.Title
+          "URL" $url )
+        -}}
+      {{- end -}}
+    </div>
+  {{- end -}}
 </div>
 
+{{/* Function to replace named parameters in URL template */}}
+{{- define "partials/inline/share/generate_share_url.html" -}}
+  {{- $url := .pattern -}}
+
+  {{/* Define available params(placeholders) */}}
+  {{- $availableParams := dict
+    "permalink" (.permalink | urlquery | safeURL )
+    "title" (.title | urlquery)
+    "tags" (.tags | urlquery)
+    "description" (.description | urlquery)
+    "via" (.via | urlquery)
+    "user" (.user | urlquery)
+  -}}
+
+  {{/* Replace each {param} with its value */}}
+  {{- range $key, $value := $availableParams -}}
+    {{- $pattern := printf "{%s}" $key -}}
+    {{- $url = replace $url $pattern $value -}}
+  {{- end -}}
+
+  {{- return $url -}}
+{{- end -}}
+
 {{- define "partials/inline/share/item.html" -}}
   <a
     href="{{- .URL -}}"
     target="_blank"
     rel="noopener noreferrer"
     class="inline px-2 py-1 rounded-lg
-    text-sm font-medium
+      text-sm font-medium
       bg-white/60 dark:bg-neutral-800/60
       text-neutral-700 dark:text-neutral-300
       border border-neutral-200/50 dark:border-neutral-700/50

diff --git a/layouts/partials/utils/social-connect.html b/layouts/partials/utils/social-connect.html
@@ -0,0 +1,42 @@
+{{- with .Site.Params.social -}}
+  {{- $social := . -}}
+  {{- with .connect -}}
+    {{- $supportPlatforms := dict
+      "github" (dict "icon" "github" "title" "Github" "config" $social.github "urlFormat" "https://github.com/%s")
+      "x" (dict "icon" "xcom" "title" "X.com" "config" $social.twitter "urlFormat" "https://x.com/%s")
+      "linkedin" (dict "icon" "linkedin" "title" "LinkedIn" "config" $social.linkedin "urlFormat" "https://linkedin.com/in/%s")
+      "whatsapp" (dict "icon" "whatsapp" "title" "WhatsApp" "config" $social.whatsapp "urlFormat" (print "https://wa.me/%s?text=Hi, I am contacting you from " site.Title))
+    }}
+
+    {{- range .platforms -}}
+      {{- $platformName := . | lower -}}
+      {{- with index $supportPlatforms $platformName -}}
+        {{- if .config -}}
+          {{- $url := printf .urlFormat .config -}}
+          {{- partial "inline/connect/item.html" (dict "icon" .icon "title" .title "url" $url) -}}
+        {{- end -}}
+      {{- end -}}
+
+    {{- end -}}
+  {{- end -}}
+
+{{- end -}}
+
+{{- define "partials/inline/connect/item.html" -}}
+  {{- $item := . -}}
+  <li>
+    <a
+      href="{{ $item.url }}"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="group flex items-center gap-2 
+            text-slate-600 hover:text-sky-600 
+            dark:text-slate-300 dark:hover:text-sky-300 
+            transition-all duration-300 ease-in-out">
+      <span class="transform group-hover:scale-110 transition-transform duration-300">
+        {{- partial "utils/icon" (dict "icon" $item.icon) -}}
+      </span>
+      <span class="transform group-hover:translate-x-1 transition-transform duration-300">{{ $item.title }}</span>
+    </a>
+  </li>
+{{- end -}}