mirror of
				https://github.com/bspeice/speice.io
				synced 2025-11-03 18:10:32 -05:00 
			
		
		
		
	Fix list keys, div height units
This commit is contained in:
		@ -55,7 +55,7 @@ export const PaletteBar: React.FC<PaletteBarProps> = ({ height, palette, childre
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
  return (
 | 
					  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}
 | 
					        {width > 0 ? <canvas ref={canvasRef} width={width} height={height} style={canvasStyle} /> : null}
 | 
				
			||||||
      </div>
 | 
					      </div>
 | 
				
			||||||
      {children}
 | 
					      {children}
 | 
				
			||||||
 | 
				
			|||||||
@ -19,8 +19,8 @@ function BlogSidebarGroup({ title, headingType, children }: { title: string, hea
 | 
				
			|||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
function groupBySeries(items: BlogSidebarItem[], ListComponent: Props["ListComponent"]) {
 | 
					function groupBySeries(items: BlogSidebarItem[], ListComponent: Props["ListComponent"]) {
 | 
				
			||||||
  var returnItems = [];
 | 
					  let returnItems = [];
 | 
				
			||||||
  var seriesItems: BlogSidebarItem[] = [];
 | 
					  let seriesItems: BlogSidebarItem[] = [];
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  function flushSeries() {
 | 
					  function flushSeries() {
 | 
				
			||||||
    if (seriesItems.length === 0) {
 | 
					    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
 | 
					    // but for a series, we want to show ascending order
 | 
				
			||||||
    seriesItems = seriesItems.reverse();
 | 
					    seriesItems = seriesItems.reverse();
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    returnItems.push(<>
 | 
					    returnItems.push(
 | 
				
			||||||
      <BlogSidebarGroup title={seriesTitle} headingType='h4'>
 | 
					      <BlogSidebarGroup key={seriesTitle} title={seriesTitle} headingType='h4'>
 | 
				
			||||||
        <ul>
 | 
					        <div role="group" style={{paddingInlineStart: "1.5em"}}>
 | 
				
			||||||
          <ListComponent items={seriesItems} />
 | 
					          <ListComponent items={seriesItems} />
 | 
				
			||||||
        </ul>
 | 
					        </div>
 | 
				
			||||||
      </BlogSidebarGroup>
 | 
					      </BlogSidebarGroup>
 | 
				
			||||||
    </>);
 | 
					    );
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    seriesItems = [];
 | 
					    seriesItems = [];
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
@ -61,7 +61,7 @@ function groupBySeries(items: BlogSidebarItem[], ListComponent: Props["ListCompo
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
    flushSeries();
 | 
					    flushSeries();
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    returnItems.push(<ListComponent items={[item]} />);
 | 
					    returnItems.push(<ListComponent key={item.permalink} items={[item]} />);
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  flushSeries();
 | 
					  flushSeries();
 | 
				
			||||||
@ -69,8 +69,8 @@ function groupBySeries(items: BlogSidebarItem[], ListComponent: Props["ListCompo
 | 
				
			|||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
function groupByYear(items: BlogSidebarItem[], ListComponent: Props["ListComponent"]) {
 | 
					function groupByYear(items: BlogSidebarItem[], ListComponent: Props["ListComponent"]) {
 | 
				
			||||||
  var returnItems = [];
 | 
					  let returnItems = [];
 | 
				
			||||||
  var yearItems: BlogSidebarItem[] = [];
 | 
					  let yearItems: BlogSidebarItem[] = [];
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  function flushSeries() {
 | 
					  function flushSeries() {
 | 
				
			||||||
    if (yearItems.length === 0) {
 | 
					    if (yearItems.length === 0) {
 | 
				
			||||||
@ -80,11 +80,11 @@ function groupByYear(items: BlogSidebarItem[], ListComponent: Props["ListCompone
 | 
				
			|||||||
    const yearTitle = new Date(yearItems[0].date).getFullYear();
 | 
					    const yearTitle = new Date(yearItems[0].date).getFullYear();
 | 
				
			||||||
    const yearItemsGrouped = groupBySeries(yearItems, ListComponent);
 | 
					    const yearItemsGrouped = groupBySeries(yearItems, ListComponent);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    returnItems.push(<>
 | 
					    returnItems.push(
 | 
				
			||||||
      <BlogSidebarGroup title={String(yearTitle)} headingType='h3'>
 | 
					      <BlogSidebarGroup key={yearTitle} title={String(yearTitle)} headingType='h3'>
 | 
				
			||||||
        {yearItemsGrouped}
 | 
					        {yearItemsGrouped}
 | 
				
			||||||
      </BlogSidebarGroup>
 | 
					      </BlogSidebarGroup>
 | 
				
			||||||
    </>);
 | 
					    );
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    yearItems = [];
 | 
					    yearItems = [];
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
@ -111,7 +111,6 @@ function groupByYear(items: BlogSidebarItem[], ListComponent: Props["ListCompone
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
function BlogSidebarContent({
 | 
					function BlogSidebarContent({
 | 
				
			||||||
  items,
 | 
					  items,
 | 
				
			||||||
  yearGroupHeadingClassName,
 | 
					 | 
				
			||||||
  ListComponent,
 | 
					  ListComponent,
 | 
				
			||||||
}: Props): ReactNode {
 | 
					}: Props): ReactNode {
 | 
				
			||||||
  return groupByYear(items, ListComponent);
 | 
					  return groupByYear(items, ListComponent);
 | 
				
			||||||
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user