feat: Enhance sidebar and content layouts

This commit improves the layout and functionality of the sidebar and content areas:

- Added og-preview component to sidebar
- Adjusted TOC container height
- Modified styles for og-preview component
- Modified row layout for better content alignment

Author: neural-loop

assets/scss/components/_og-preview.scss

@@ -1,5 +1,5 @@
 .og-preview-wrapper {
-  @apply relative max-w-sm mx-auto p-2 lg:max-w-xs;
+  @apply relative max-w-sm mx-auto lg:max-w-xs;
 }
 
 .og-preview-container {
@@ -15,7 +15,7 @@
       @apply opacity-100;
     }
     .sharing-runner {
-      @apply translate-y-full;
+      @apply opacity-0;
     }
   }
 }
@@ -63,7 +63,7 @@
 }
 
 .sharing-runner {
-  @apply absolute bottom-0 left-0 right-0 h-10 flex items-center justify-between px-4 transition-transform duration-300 ease-in-out z-[3];
+  @apply absolute bottom-0 left-0 right-0 h-10 flex items-center justify-between px-4 transition-all duration-300 ease-in-out z-[3] opacity-100;
   background: rgba(0,0,0, 0.7);
   backdrop-filter: blur(3px);
   color: white;
@@ -97,6 +97,6 @@
      opacity: 1;
   }
   .sharing-runner {
-     transform: translateY(100%);
+     @apply opacity-0;
   }
 }

layouts/blog/single.html

@@ -2,7 +2,7 @@
 {{ partial "page-header" . }}
 <section class="section pt-6">
   <div class="container">
-    <div class="row">
+    <div class="row lg:items-stretch">
       <article class="{{ if gt (len .TableOfContents) 80 }}lg:col-8{{ else }}lg:col-10 mx-auto{{ end }}">
         {{ $image:= .Params.image }}
         {{ if $image }}

layouts/neuromorphic-hardware/single.html

@@ -2,7 +2,7 @@
 {{ partial "page-header" . }}
 <section class="section pt-6">
   <div class="container">
-    <div class="row">
+    <div class="row lg:items-stretch">
       <div>
         <div class="content-panel p-6 shadow-lg">
           {{ partial "hardware/product-info" .Page }}

layouts/neuromorphic-software/single.html

@@ -2,7 +2,7 @@
   {{ partial "page-header" . }}
   <section class="section pt-6">
     <div class="container">
-      <div class="row lg:gx-8">
+      <div class="row lg:gx-8 lg:items-stretch">
         {{/* Main Content Column */}}
         <div class="lg:col-8">
           <article class="content mb-10">

layouts/partials/components/sidebar-toc-shared.html

@@ -1,14 +1,18 @@
 {{ if gt (len .TableOfContents) 80 }}
 <aside class="lg:col-4 hidden lg:block">
-  <div class="sticky top-24">
+  <div class="">
+      {{ partial "components/og-preview.html" . }}
+</div>
+  <div class="sticky top-24 space-y-6">
+    {{/* Table of Contents Section */}}
     <div class="px-3 pt-5 pb-5 content-panel">
       <div class="pb-3">
         <strong class="text-xl">Table of Contents</strong>
       </div>
-      <div id="tableOfContentContainer" class="max-h-[calc(100vh-12rem)] overflow-y-auto">
+      <div id="tableOfContentContainer" class="max-h-[calc(100vh-28rem)] overflow-y-auto">
         {{ .TableOfContents }}
       </div>
     </div>
   </div>
 </aside>
-{{ end }}
+{{ end }}

layouts/shortcodes/toc.html

@@ -8,4 +8,4 @@
     {{ end }}
   </summary>
   {{ .Page.TableOfContents }}
-</details>
+</details>