From 544d60c70222c4997c331b6ce31aac31d2e848f1 Mon Sep 17 00:00:00 2001
From: Bradlee Speice <bradlee@speice.io>
Date: Sat, 4 Jan 2025 11:13:14 -0500
Subject: [PATCH] Fix list keys, div height units

---
 .../3-log-density/FlameColor.tsx              |  2 +-
 src/theme/BlogSidebar/Content/index.tsx       | 27 +++++++++----------
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/blog/2024-11-15-playing-with-fire/3-log-density/FlameColor.tsx b/blog/2024-11-15-playing-with-fire/3-log-density/FlameColor.tsx
index 2040b0b..b622ef3 100644
--- a/blog/2024-11-15-playing-with-fire/3-log-density/FlameColor.tsx
+++ b/blog/2024-11-15-playing-with-fire/3-log-density/FlameColor.tsx
@@ -55,7 +55,7 @@ export const PaletteBar: React.FC<PaletteBarProps> = ({ height, palette, childre
 
   return (
     <>
-      <div ref={sizingRef} style={{ width: "100%", height }}>
+      <div ref={sizingRef} style={{ width: "100%", height: `${height}px` }}>
         {width > 0 ? <canvas ref={canvasRef} width={width} height={height} style={canvasStyle} /> : null}
       </div>
       {children}
diff --git a/src/theme/BlogSidebar/Content/index.tsx b/src/theme/BlogSidebar/Content/index.tsx
index 2ebf4a9..b801c5c 100644
--- a/src/theme/BlogSidebar/Content/index.tsx
+++ b/src/theme/BlogSidebar/Content/index.tsx
@@ -19,8 +19,8 @@ function BlogSidebarGroup({ title, headingType, children }: { title: string, hea
 }
 
 function groupBySeries(items: BlogSidebarItem[], ListComponent: Props["ListComponent"]) {
-  var returnItems = [];
-  var seriesItems: BlogSidebarItem[] = [];
+  let returnItems = [];
+  let seriesItems: BlogSidebarItem[] = [];
 
   function flushSeries() {
     if (seriesItems.length === 0) {
@@ -41,13 +41,13 @@ function groupBySeries(items: BlogSidebarItem[], ListComponent: Props["ListCompo
     // but for a series, we want to show ascending order
     seriesItems = seriesItems.reverse();
 
-    returnItems.push(<>
-      <BlogSidebarGroup title={seriesTitle} headingType='h4'>
-        <ul>
+    returnItems.push(
+      <BlogSidebarGroup key={seriesTitle} title={seriesTitle} headingType='h4'>
+        <div role="group" style={{paddingInlineStart: "1.5em"}}>
           <ListComponent items={seriesItems} />
-        </ul>
+        </div>
       </BlogSidebarGroup>
-    </>);
+    );
 
     seriesItems = [];
   }
@@ -61,7 +61,7 @@ function groupBySeries(items: BlogSidebarItem[], ListComponent: Props["ListCompo
 
     flushSeries();
 
-    returnItems.push(<ListComponent items={[item]} />);
+    returnItems.push(<ListComponent key={item.permalink} items={[item]} />);
   }
 
   flushSeries();
@@ -69,8 +69,8 @@ function groupBySeries(items: BlogSidebarItem[], ListComponent: Props["ListCompo
 }
 
 function groupByYear(items: BlogSidebarItem[], ListComponent: Props["ListComponent"]) {
-  var returnItems = [];
-  var yearItems: BlogSidebarItem[] = [];
+  let returnItems = [];
+  let yearItems: BlogSidebarItem[] = [];
 
   function flushSeries() {
     if (yearItems.length === 0) {
@@ -80,11 +80,11 @@ function groupByYear(items: BlogSidebarItem[], ListComponent: Props["ListCompone
     const yearTitle = new Date(yearItems[0].date).getFullYear();
     const yearItemsGrouped = groupBySeries(yearItems, ListComponent);
 
-    returnItems.push(<>
-      <BlogSidebarGroup title={String(yearTitle)} headingType='h3'>
+    returnItems.push(
+      <BlogSidebarGroup key={yearTitle} title={String(yearTitle)} headingType='h3'>
         {yearItemsGrouped}
       </BlogSidebarGroup>
-    </>);
+    );
 
     yearItems = [];
   }
@@ -111,7 +111,6 @@ function groupByYear(items: BlogSidebarItem[], ListComponent: Props["ListCompone
 
 function BlogSidebarContent({
   items,
-  yearGroupHeadingClassName,
   ListComponent,
 }: Props): ReactNode {
   return groupByYear(items, ListComponent);