feat(website): bookmark floating panel.

Author: samchon

website/mdx-components-blog.jsx

@@ -11,38 +11,64 @@ export function useMDXComponents(components) {
 
   return {
     ...blogComponents,
-    wrapper({ children, metadata }) {
+    wrapper({ children, metadata, toc }) {
       const date = formatDate(metadata?.date);
       const tags = metadata?.tags ?? [];
+      const filteredToc = Array.isArray(toc) ? toc.filter((item) => item.depth <= 3) : [];
+      const hasToc = filteredToc.length > 0;
 
       return (
         <>
-          {metadata?.ogImage ? (
-            <img
-              src={metadata.ogImage}
-              alt={metadata.title ?? "Blog cover image"}
-              className="typia-blog-hero"
-            />
-          ) : null}
-          <h1>{metadata?.title}</h1>
-          <div className="typia-blog-meta">
-            {date ? <time dateTime={date.toISOString()}>{date.toLocaleDateString()}</time> : null}
-            {metadata?.author ? <span>{metadata.author}</span> : null}
-            {metadata?.devtoUrl ? (
-              <a href={metadata.devtoUrl} target="_blank" rel="noreferrer">
-                Original on DEV
-              </a>
+          <div className={hasToc ? "typia-blog-post-layout" : undefined}>
+            <div className="typia-blog-post-main">
+              {metadata?.ogImage ? (
+                <img
+                  src={metadata.ogImage}
+                  alt={metadata.title ?? "Blog cover image"}
+                  className="typia-blog-hero"
+                />
+              ) : null}
+              <h1>{metadata?.title}</h1>
+              <div className="typia-blog-meta">
+                {date ? (
+                  <time dateTime={date.toISOString()}>{date.toLocaleDateString()}</time>
+                ) : null}
+                {metadata?.author ? <span>{metadata.author}</span> : null}
+                {metadata?.devtoUrl ? (
+                  <a href={metadata.devtoUrl} target="_blank" rel="noreferrer">
+                    Original on DEV
+                  </a>
+                ) : null}
+              </div>
+              {tags.length ? (
+                <div className="typia-blog-tags">
+                  {tags.map((tag) => (
+                    <span key={tag}>#{tag}</span>
+                  ))}
+                </div>
+              ) : null}
+              {children}
+              <GiscusComments />
+            </div>
+            {hasToc ? (
+              <aside className="typia-blog-toc" aria-label="Table of contents">
+                <div className="typia-blog-toc-inner">
+                  <div className="typia-blog-toc-title">On This Page</div>
+                  <nav>
+                    {filteredToc.map((item) => (
+                      <a
+                        key={item.id}
+                        href={`#${item.id}`}
+                        className={`typia-blog-toc-link typia-blog-toc-depth-${item.depth}`}
+                      >
+                        {item.value}
+                      </a>
+                    ))}
+                  </nav>
+                </div>
+              </aside>
             ) : null}
           </div>
-          {tags.length ? (
-            <div className="typia-blog-tags">
-              {tags.map((tag) => (
-                <span key={tag}>#{tag}</span>
-              ))}
-            </div>
-          ) : null}
-          {children}
-          <GiscusComments />
         </>
       );
     },

website/src/app/blog/blog.css

@@ -124,3 +124,91 @@
   padding-top: 2rem;
   border-top: 1px solid rgba(127, 127, 127, 0.18);
 }
+
+.typia-blog-post-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 260px;
+  gap: 2.5rem;
+  align-items: start;
+}
+
+.typia-blog-post-main {
+  min-width: 0;
+}
+
+.typia-blog-toc {
+  position: sticky;
+  top: 5.5rem;
+  align-self: start;
+  max-height: calc(100vh - 7rem);
+  overflow: auto;
+}
+
+.typia-blog-toc-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  padding-left: 1rem;
+  border-left: 1px solid rgba(127, 127, 127, 0.18);
+}
+
+.typia-blog-toc-title {
+  font-size: 0.82rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: rgb(115 115 115);
+}
+
+.dark .typia-blog-toc-title {
+  color: rgb(165 165 165);
+}
+
+.typia-blog-toc-link {
+  display: block;
+  color: rgb(90 90 90);
+  text-decoration: none;
+  line-height: 1.45;
+  font-size: 0.95rem;
+}
+
+.dark .typia-blog-toc-link {
+  color: rgb(175 175 175);
+}
+
+.typia-blog-toc-link:hover {
+  color: inherit;
+}
+
+.typia-blog-toc-depth-3 {
+  padding-left: 0.85rem;
+  font-size: 0.9rem;
+}
+
+.typia-blog-toc-depth-4,
+.typia-blog-toc-depth-5,
+.typia-blog-toc-depth-6 {
+  padding-left: 1.5rem;
+  font-size: 0.86rem;
+}
+
+@media (max-width: 1024px) {
+  .typia-blog-post-layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .typia-blog-toc {
+    position: static;
+    top: auto;
+    max-height: none;
+    overflow: visible;
+  }
+
+  .typia-blog-toc-inner {
+    position: static;
+    margin-top: 1rem;
+    padding: 1rem 0 0;
+    border-left: 0;
+    border-top: 1px solid rgba(127, 127, 127, 0.18);
+  }
+}