feat: refine post layout and share button components

denmette · denmette · commit 8088d9d31861 · 2025-12-30T14:11:42.000+01:00
- Improved post layout styling for better structure and responsiveness
- Organized tags section with clearer headings and styling adjustments
- Enhanced share buttons layout and streamlined URL handling
diff --git a/themes/custom/layouts/partials/share-buttons.html b/themes/custom/layouts/partials/share-buttons.html
@@ -1,29 +1,28 @@
-{{- $url := .Permalink | urlquery -}}
-{{- $title := .Title | urlquery -}}
+{{- $url := .Permalink -}}
 
 <section>
   <nav aria-label="Deel dit artikel">
     <ul class="flex items-center gap-2">
       <li>
         <a
-          class="inline-flex h-10 w-10 items-center justify-center rounded-full text-slate-400 transition-colors hover:text-moss focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-moss/70 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-50 dark:text-slate-500 dark:hover:text-mustard dark:focus-visible:ring-moss/70 dark:focus-visible:ring-offset-slate-950 motion-reduce:transition-none"
-          href="https://www.linkedin.com/sharing/share-offsite/?url={{ $url }}"
-          target="_blank"
-          rel="noopener noreferrer"
-          aria-label="Deel op LinkedIn"
-          title="Delen op LinkedIn"
+                class="inline-flex h-10 w-10 items-center justify-center rounded-full text-slate-400 transition-colors hover:text-moss focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-moss/70 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-50 dark:text-slate-500 dark:hover:text-mustard dark:focus-visible:ring-moss/70 dark:focus-visible:ring-offset-slate-950 motion-reduce:transition-none"
+                href="https://www.linkedin.com/sharing/share-offsite/?url={{ $url | urlquery }}"
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="Deel op LinkedIn"
+                title="Delen op LinkedIn"
         >
           <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-5 w-5 stroke-current"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.25"
-            stroke-linecap="round"
-            stroke-linejoin="round"
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="h-5 w-5 stroke-current"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.25"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
           >
             <path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" />
             <path d="M8 11l0 5" />
@@ -33,52 +32,54 @@
           </svg>
         </a>
       </li>
+
       <li>
         <a
-          class="inline-flex h-10 w-10 items-center justify-center rounded-full text-slate-400 transition-colors hover:text-moss focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-moss/70 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-50 dark:text-slate-500 dark:hover:text-mustard dark:focus-visible:ring-moss/70 dark:focus-visible:ring-offset-slate-950 motion-reduce:transition-none"
-          href="https://twitter.com/intent/tweet?text={{ $title }}&url={{ $url }}"
-          target="_blank"
-          rel="noopener noreferrer"
-          aria-label="Deel op X"
-          title="Delen op X"
+                class="inline-flex h-10 w-10 items-center justify-center rounded-full text-slate-400 transition-colors hover:text-moss focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-moss/70 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-50 dark:text-slate-500 dark:hover:text-mustard dark:focus-visible:ring-moss/70 dark:focus-visible:ring-offset-slate-950 motion-reduce:transition-none"
+                href="https://twitter.com/intent/tweet?url={{ $url | urlquery }}"
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="Deel op X"
+                title="Delen op X"
         >
           <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-5 w-5 stroke-current"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.25"
-            stroke-linecap="round"
-            stroke-linejoin="round"
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="h-5 w-5 stroke-current"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.25"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
           >
             <path d="M4 4l11.733 16h4.267l-11.733 -16z" />
             <path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772" />
           </svg>
         </a>
       </li>
+
       <li>
         <a
-          class="inline-flex h-10 w-10 items-center justify-center rounded-full text-slate-400 transition-colors hover:text-moss focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-moss/70 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-50 dark:text-slate-500 dark:hover:text-mustard dark:focus-visible:ring-moss/70 dark:focus-visible:ring-offset-slate-950 motion-reduce:transition-none"
-          href="https://bsky.app/intent/compose?text={{ $title }}%20{{ $url }}"
-          target="_blank"
-          rel="noopener noreferrer"
-          aria-label="Deel op Bluesky"
-          title="Delen op Bluesky"
+                class="inline-flex h-10 w-10 items-center justify-center rounded-full text-slate-400 transition-colors hover:text-moss focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-moss/70 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-50 dark:text-slate-500 dark:hover:text-mustard dark:focus-visible:ring-moss/70 dark:focus-visible:ring-offset-slate-950 motion-reduce:transition-none"
+                href="https://bsky.app/intent/compose?text={{ $url | urlquery }}"
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="Deel op Bluesky"
+                title="Delen op Bluesky"
         >
           <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-5 w-5 stroke-current"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.25"
-            stroke-linecap="round"
-            stroke-linejoin="round"
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="h-5 w-5 stroke-current"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.25"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
           >
             <path d="M6.335 5.144c-1.654 -1.199 -4.335 -2.127 -4.335 .826c0 .59 .35 4.953 .556 5.661c.713 2.463 3.13 2.75 5.444 2.369c-4.045 .665 -4.889 3.208 -2.667 5.41c1.03 1.018 1.913 1.59 2.667 1.59c2 0 3.134 -2.769 3.5 -3.5c.333 -.667 .5 -1.167 .5 -1.5c0 .333 .167 .833 .5 1.5c.366 .731 1.5 3.5 3.5 3.5c.754 0 1.637 -.571 2.667 -1.59c2.222 -2.203 1.378 -4.746 -2.667 -5.41c2.314 .38 4.73 .094 5.444 -2.369c.206 -.708 .556 -5.072 .556 -5.661c0 -2.953 -2.68 -2.025 -4.335 -.826c-2.293 1.662 -4.76 5.048 -5.665 6.856c-.905 -1.808 -3.372 -5.194 -5.665 -6.856z" />
           </svg>
diff --git a/themes/custom/layouts/posts/single.html b/themes/custom/layouts/posts/single.html
@@ -17,31 +17,37 @@ <h1 class="text-2xl font-semibold text-slate-900 dark:text-slate-100">{{ .Title
       <div class="prose prose-slate prose-a:text-moss prose-a:no-underline prose-a:underline-offset-4 hover:prose-a:text-moss hover:prose-a:underline dark:prose-invert dark:prose-a:text-mustard dark:hover:prose-a:text-mustard dark:hover:prose-a:underline">
         {{ .Content }}
       </div>
-      <div class="border-t border-slate-200 pt-4 dark:border-slate-800">
-        {{- $terms := .GetTerms "tags" -}}
-        {{- if gt (len $terms) 0 -}}
-        <ul class="flex flex-wrap gap-2">
-          {{- range $terms -}}
-          <li>
-            <a class="inline-flex items-center rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-semibold text-slate-700 hover:border-moss hover:text-moss focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-moss dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:border-mustard dark:hover:text-mustard dark:focus-visible:outline-moss" href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
-          </li>
+      <div class="flex flex-col gap-4 border-t border-slate-200 pt-4 dark:border-slate-800 md:flex-row md:items-start md:justify-between">
+        <div class="md:flex-1">
+          <p class="text-xs font-semibold uppercase tracking-widest text-slate-500 dark:text-slate-400">Onderwerpen</p>
+          {{- $terms := .GetTerms "tags" -}}
+          {{- if gt (len $terms) 0 -}}
+          <ul class="mt-2 flex flex-wrap gap-2">
+            {{- range $terms -}}
+            <li>
+              <a class="inline-flex items-center rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-semibold text-slate-700 hover:border-moss hover:text-moss focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-moss dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:border-mustard dark:hover:text-mustard dark:focus-visible:outline-moss" href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
+            </li>
+            {{- end -}}
+          </ul>
+          {{- else -}}
+          {{- with .Params.tags -}}
+          {{- if gt (len .) 0 -}}
+          <ul class="mt-2 flex flex-wrap gap-2">
+            {{- range . -}}
+            <li>
+              <a class="inline-flex items-center rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-semibold text-slate-700 hover:border-moss hover:text-moss focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-moss dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:border-mustard dark:hover:text-mustard dark:focus-visible:outline-moss" href="{{ (printf "/tags/%s/" . | urlize) | relURL }}">{{ . }}</a>
+            </li>
+            {{- end -}}
+          </ul>
           {{- end -}}
-        </ul>
-        {{- else -}}
-        {{- with .Params.tags -}}
-        {{- if gt (len .) 0 -}}
-        <ul class="flex flex-wrap gap-2">
-          {{- range . -}}
-          <li>
-            <a class="inline-flex items-center rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-semibold text-slate-700 hover:border-moss hover:text-moss focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-moss dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:border-mustard dark:hover:text-mustard dark:focus-visible:outline-moss" href="{{ (printf "/tags/%s/" . | urlize) | relURL }}">{{ . }}</a>
-          </li>
           {{- end -}}
-        </ul>
-        {{- end -}}
-        {{- end -}}
-        {{- end -}}
-        <div class="mt-3">
-          {{ partial "share-buttons.html" . }}
+          {{- end -}}
+        </div>
+        <div class="md:shrink-0 md:ml-6">
+          <p class="text-xs font-semibold uppercase tracking-widest text-slate-500 dark:text-slate-400">Delen</p>
+          <div class="mt-2">
+            {{ partial "share-buttons.html" . }}
+          </div>
         </div>
       </div>
     </div>
