Merge branch 'main' into refactor-print-section

Author: Deven14125

package.json

@@ -75,6 +75,7 @@
   "dependencies": {
     "@docsearch/react": "^4.6.0",
     "@react-spring/web": "^10.0.3",
+    "clsx": "^2.1.1",
     "path-browserify": "^1.0.1",
     "prop-types": "^15.8.1",
     "react": "^19.2.4",
@@ -84,6 +85,7 @@
     "react-router-dom": "^7.13.1",
     "react-tiny-popover": "^8.1.6",
     "react-use": "^17.6.0",
+    "tailwind-merge": "^3.5.0",
     "webpack-pwa-manifest": "^4.3.0",
     "workbox-window": "^7.4.0"
   },

src/components/CodeBlockWithCopy/CodeBlockWithCopy.jsx

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 import { useEffect, useRef, useState } from "react";
-import "./CodeBlockWithCopy.scss";
+import { cn } from "../../utilities/cn.mjs";
 
 export default function CodeBlockWithCopy({ children }) {
   const preRef = useRef(null);
@@ -115,10 +115,22 @@ export default function CodeBlockWithCopy({ children }) {
   );
 
   return (
-    <div className="code-block-wrapper">
+    <div className="code-block-wrapper relative mb-6 group">
       <button
         onClick={handleCopy}
-        className={`copy-button ${copyStatus}`}
+        className={cn(
+          "copy-button",
+          "absolute top-2 right-2 z-10 px-[0.7rem] py-[0.4rem] rounded-[0.35rem] border-none cursor-pointer text-xs font-medium text-slate-200",
+          "opacity-0 group-hover:opacity-100",
+          "transition-[background-color,transform,opacity] duration-200",
+          "active:scale-95",
+          "focus-visible:outline-none focus-visible:opacity-100",
+          copyStatus === "copied"
+            ? "bg-green-600 hover:bg-green-700"
+            : copyStatus === "error"
+              ? "bg-red-500 hover:bg-red-700"
+              : "bg-[#175d96] hover:bg-[#2f85d0]",
+        )}
         aria-label="Copy code to clipboard"
       >
         {copyStatus === "copied"

src/components/CodeBlockWithCopy/CodeBlockWithCopy.scss

@@ -12,7 +12,6 @@ import { placeholderString } from "../Placeholder/Placeholder.jsx";
 import AdjacentPages from "./AdjacentPages.jsx";
 
 // Load Styling
-import "./Page.scss";
 
 export default function Page(props) {
   const {
@@ -117,7 +116,10 @@ export default function Page(props) {
     );
   }
   return (
-    <main id="main-content" className="page">
+    <main
+      id="main-content"
+      className="flex-auto relative overflow-x-hidden py-[1.5em] px-[1em] md:flex-[3] md:p-[1.5em]"
+    >
       <Markdown>
         <h1>{title}</h1>
         {rest.date && pathname.startsWith("/blog/") && !isBlogIndex && (
@@ -136,19 +138,34 @@ export default function Page(props) {
         <div id="md-content">{contentRender}</div>
 
         {rest.url === "/blog/" && (
-          <div className="blog-list">
+          <div className="mt-8">
             {(props.pages || [])
               .filter((post) => post.url !== "/blog/")
               .map((post) => (
-                <div key={post.url} className="blog-post-item">
-                  <h2>
-                    <Link to={post.url}>{post.title}</Link>
+                <div
+                  key={post.url}
+                  className="mb-[3rem] pb-[2rem] border-b border-gray-100 last:border-b-0 dark:border-gray-800"
+                >
+                  <h2 className="mt-0 mb-[0.5rem] text-[1.8rem] font-bold leading-[1.2]">
+                    <Link
+                      to={post.url}
+                      className="text-blue-800 no-underline hover:text-blue-400 dark:!text-[#9ab3c0] dark:hover:!text-blue-200"
+                    >
+                      {post.title}
+                    </Link>
                   </h2>
                   {post.date && (
-                    <div className="blog-post-date">{post.date}</div>
+                    <div className="text-gray-500 text-[1.2rem] font-semibold mt-[0.25rem] mb-[1rem] italic dark:text-[#bbb]">
+                      {post.date}
+                    </div>
                   )}
-                  <p>{post.teaser}</p>
-                  <Link to={post.url} className="read-more">
+                  <p className="text-gray-600 leading-[1.4] mb-[1rem] dark:text-gray-200">
+                    {post.teaser}
+                  </p>
+                  <Link
+                    to={post.url}
+                    className="text-blue-400 font-semibold no-underline hover:underline dark:text-blue-200"
+                  >
                     Read More &rarr;
                   </Link>
                 </div>

src/components/Page/Page.jsx

@@ -39,20 +39,14 @@ export default function Print(props) {
         fill="#175d96"
       />
       <a
-        className="sidebar-item__title flex flex-nowrap items-center"
+        className="sidebar-item__title flex items-center flex-nowrap"
         href={printUrl}
         rel="nofollow noopener noreferrer"
         title="Print"
         target="_blank"
       >
         Print Section
-        <img
-          className="h-20 mr-0.5"
-          src={icon}
-          width={27}
-          height={20}
-          alt="Printer Icon"
-        />
+        <img src={icon} alt="Printer Icon" className="h-[20px] w-[27px]" />
       </a>
     </div>
   );

src/components/Page/Page.scss

@@ -7,6 +7,8 @@
   flex-wrap: wrap;
   font-size: 15px;
   margin: 0.6em 0;
+  align-items: center;
+  min-height: 40px;
 
   &__toggle {
     flex: 0 0 auto;
@@ -25,14 +27,20 @@
     background: none;
     border: none;
     padding: 0;
-    display: flex;
+    display: inline-flex;
     align-items: center;
+    justify-content: center;
+    min-width: 40px;
+    min-height: 40px;
   }
 
   &__title {
     flex: 1 1 auto;
     color: getColor(elephant);
     max-width: 85%;
+    min-height: 40px;
+    display: inline-flex;
+    align-items: center;
     @include control-overflow;
     &.active {
       font-weight: 600;