Add flowbite library and update references in prep for rendering rela…

…ted and on this page content

package.json

@@ -29,6 +29,7 @@
     "async-retry": "^1.3.3",
     "axios": "^1.6.0",
     "exif-be-gone": "^1.3.2",
+    "flowbite": "^2.2.0",
     "glightbox": "^3.2.0",
     "katex": "^0.16.9",
     "mermaid": "^10.6.0",

src/components/NotionBlocks.astro

@@ -31,9 +31,10 @@ export interface Props {
 	isRoot?: boolean;
 	level?: number;
 	headings?: interfaces.Block[];
+  renderChildren?: boolean
 }
 
-const { blocks: rawBlocks, isRoot = false, level = 1, headings: rawHeadings = [] } = Astro.props;
+const { blocks: rawBlocks, isRoot = false, level = 1, headings: rawHeadings = [], renderChildren=true } = Astro.props;
 
 const blocks = rawBlocks.reduce((arr, block: interfaces.Block, i: number) => {
 	const isBulletedListItem = block.Type === "bulleted_list_item";
@@ -109,15 +110,15 @@ const bookmarkURLMap = await buildURLToHTMLMap(bookmarkURLs);
 	blocks.map((block: interfaces.Block) => {
 		switch (block.Type) {
 			case "paragraph":
-				return <Paragraph block={block} headings={headings} />;
+				return <Paragraph block={block} headings={headings} renderChildren={renderChildren}/>;
 			case "heading_1":
-				return <Heading1 block={block} headings={headings} />;
+				return <Heading1 block={block} headings={headings} renderChildren={renderChildren}/>;
 			case "heading_2":
-				return <Heading2 block={block} headings={headings} />;
+				return <Heading2 block={block} headings={headings} renderChildren={renderChildren}/>;
 			case "heading_3":
-				return <Heading3 block={block} headings={headings} />;
+				return <Heading3 block={block} headings={headings} renderChildren={renderChildren}/>;
 			case "table_of_contents":
-				return <TableOfContents block={block} headings={headings} />;
+				return <TableOfContents block={block} headings={headings}/>;
 			case "image":
 				return <NImage block={block}/>;
 			case "video":
@@ -127,13 +128,13 @@ const bookmarkURLMap = await buildURLToHTMLMap(bookmarkURLs);
 			case "code":
 				return <NCode block={block} />;
 			case "quote":
-				return <Quote block={block} headings={headings} />;
+				return <Quote block={block} headings={headings} renderChildren={renderChildren}/>;
 			case "equation":
 				return <Equation block={block} />;
 			case "callout":
-				return <Callout block={block} headings={headings} />;
+				return <Callout block={block} headings={headings} renderChildren={renderChildren}/>;
 			case "embed":
-				return <Embed block={block} urlMap={bookmarkURLMap} />;
+				return <Embed block={block} urlMap={bookmarkURLMap}  />;
 			case "bookmark":
 			case "link_preview":
 				return <Bookmark block={block} urlMap={bookmarkURLMap} />;
@@ -142,17 +143,17 @@ const bookmarkURLMap = await buildURLToHTMLMap(bookmarkURLs);
 			case "table":
 				return <Table block={block} />;
 			case "column_list":
-				return <ColumnList block={block} headings={headings} />;
+				return <ColumnList block={block} headings={headings}renderChildren={renderChildren} />;
 			case "bulleted_list":
-				return <BulletedListItems block={block} headings={headings} />;
+				return <BulletedListItems block={block} headings={headings} renderChildren={renderChildren}/>;
 			case "numbered_list":
-				return <NumberedListItems block={block} level={level} headings={headings} />;
+				return <NumberedListItems block={block} level={level} headings={headings} renderChildren={renderChildren}/>;
 			case "to_do_list":
-				return <ToDo block={block} headings={headings} />;
+				return <ToDo block={block} headings={headings} renderChildren={renderChildren}/>;
 			case "synced_block":
-				return <SyncedBlock block={block} headings={headings} />;
+				return <SyncedBlock block={block} headings={headings} renderChildren={renderChildren}/>;
 			case "toggle":
-				return <Toggle block={block} headings={headings} />;
+				return <Toggle block={block} headings={headings} renderChildren={renderChildren}/>;
 			case "file":
 				return <File block={block} />;
 			case "link_to_page":

src/components/blog/ExternalLinksInThisPage.astro

@@ -0,0 +1,13 @@
+---
+import { getReferencesInPage } from '@/lib/blog-helpers';
+import type { Post } from '@/lib/interfaces';
+interface Props {
+	post: Post;
+}
+const { post } = Astro.props;
+
+const allReferencesInPage = getReferencesInPage(post.PageId);
+const filteredReferences = allReferencesInPage.filter(ref => ref.external_hrefs.length > 0 || ref.direct_nonmedia_link);
+
+---
+

src/components/blog/LinksToThisPage.astro

@@ -0,0 +1,7 @@
+---
+interface Props {
+	post: Post;
+}
+const { post } = Astro.props;
+
+---

src/components/blog/MediaLinksInThisPage.astro

@@ -0,0 +1,7 @@
+---
+interface Props {
+	post: Post;
+}
+const { post } = Astro.props;
+
+---

src/components/blog/NBlocksPopover.astro

@@ -0,0 +1,23 @@
+---
+import type { Block } from '@/lib/interfaces';
+import NotionBlocks from '../NotionBlocks.astro';
+interface Props {
+	block: Block;
+  linkedTo: string;
+  popoverSpanText: string;
+  popoverTitle?: string
+}
+const { block, linkedTo, popoverSpanText, popoverTitle="" } = Astro.props;
+
+---
+  <span class="flex items-center text-sm">{popoverSpanText}<button data-popover-target="popover-description" data-popover-placement="bottom-end" type="button"><svg class="w-4 h-4 ms-2 text-gray-400 hover:text-gray-500" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg><span class="sr-only">Show information</span></button></span>
+  <div data-popover id="popover-description" role="tooltip" class="absolute z-10 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 w-72 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400">
+      <div class="p-3 space-y-2">
+          {popoverTitle && <h3 class="font-semibold text-gray-900 dark:text-white">{popoverTitle}</h3>}
+          <NotionBlocks blocks={[block]}/>
+          <a href={linkedTo} class="flex items-center font-medium text-blue-600 dark:text-blue-500 dark:hover:text-blue-600 hover:text-blue-700 hover:underline">Read more <svg class="w-2 h-2 ms-1.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
+    </svg></a>
+      </div>
+      <div data-popper-arrow></div>
+  </div>

src/components/blog/ReferencesSection.astro

@@ -0,0 +1,17 @@
+---
+import { REFERENCES } from "@/constants";
+import InternalLinksInThisPage from "./SiteLinksInThisPage.astro";
+import LinksToThisPage from "./LinksToThisPage.astro";
+import ExternalLinksInThisPage from "./ExternalLinksInThisPage.astro";
+import MediaLinksInThisPage from "./MediaLinksInThisPage.astro";
+import type { Post } from "@/lib/interfaces";
+
+interface Props {
+	post: Post;
+}
+const { post } = Astro.props;
+---
+{REFERENCES && REFERENCES["LINKS_TO_THIS_PAGE"] && <LinksToThisPage post={post}/>}
+{REFERENCES && REFERENCES["SITE_LINKS_IN_PAGE"] && <InternalLinksInThisPage post={post}/>}
+{REFERENCES && REFERENCES["EXTERNAL_LINKS_IN_PAGE"] && <ExternalLinksInThisPage post={post}/>}
+{REFERENCES && REFERENCES["MEDIA_AND_FILE_LINKS_IN_THIS_PAGE"] && <MediaLinksInThisPage post={post}/>}

src/components/blog/SiteLinksInThisPage.astro

@@ -0,0 +1,12 @@
+---
+import { getReferencesInPage } from '@/lib/blog-helpers';
+import type { Post } from '@/lib/interfaces';
+interface Props {
+	post: Post;
+}
+const { post } = Astro.props;
+
+const allReferencesInPage = getReferencesInPage(post.PageId);
+const filteredReferences = allReferencesInPage.filter(ref => ref.other_pages.length > 0 || ref.link_to_pageid );
+
+---

src/components/notion-blocks/BulletedListItems.astro

@@ -5,22 +5,23 @@ import RichText from "./RichText.astro";
 import NotionBlocks from "../NotionBlocks.astro";
 
 export interface Props {
-	block: interfaces.Block;
-	headings: interfaces.Block[];
+  block: interfaces.Block;
+  headings: interfaces.Block[];
+  renderChildren?: boolean; // Make this optional
 }
 
-const { block, headings } = Astro.props;
+const { block, headings, renderChildren = true } = Astro.props;
 ---
 
-<ul class="list-outside list-disc space-y-1 pl-6">
+<ul class="list-outside list-disc space-y-1 pl-6" id={block.Id}>
 	{
 		block.ListItems.filter((b: interfaces.Block) => b.Type === "bulleted_list_item").map(
 			(b: interfaces.Block) => (
-				<li class={convertToTailwindColor(b.BulletedListItem.Color)}>
+				<li class={convertToTailwindColor(b.BulletedListItem.Color)} id={b.Id}>
 					{b.BulletedListItem.RichTexts.map((richText: interfaces.RichText) => (
-						<RichText richText={richText} blockID={block.Id} />
+						<RichText richText={richText} blockID={b.Id} />
 					))}
-					{b.HasChildren && (
+					{b.HasChildren && renderChildren && (
 						<NotionBlocks blocks={b.BulletedListItem.Children} headings={headings} />
 					)}
 				</li>

src/components/notion-blocks/Callout.astro

@@ -5,13 +5,14 @@ import RichText from "./RichText.astro";
 import NotionBlocks from "../NotionBlocks.astro";
 
 export interface Props {
-	block: interfaces.Block;
-	headings: interfaces.Block[];
+  block: interfaces.Block;
+  headings: interfaces.Block[];
+  renderChildren?: boolean; // Make this optional
 }
 
-const { block, headings } = Astro.props;
+const { block, headings, renderChildren = true } = Astro.props;
 ---
-<div class={`flex my-2 mx-auto py-4 px-3 w-full leading-6 rounded border ${convertToTailwindColor(block.Callout.Color)} ${convertToTailwindColorForBorder(block.Callout.Color)}`}>
+<div class={`callout flex my-2 mx-auto py-4 px-3 w-full leading-6 rounded border ${convertToTailwindColor(block.Callout.Color)} ${convertToTailwindColorForBorder(block.Callout.Color)}`} id={block.Id}>
     <div class="m-0 leading-6 mr-2">
         {
             block.Callout.Icon.Type === "emoji" ? (
@@ -27,6 +28,6 @@ const { block, headings } = Astro.props;
                 <RichText richText={richText}  blockID={block.Id} />
             ))
         }
-        {block.Callout.Children && <NotionBlocks blocks={block.Callout.Children} headings={headings} />}
+        {block.Callout.Children && renderChildren && <NotionBlocks blocks={block.Callout.Children} headings={headings} />}
     </div>
 </div>

src/components/notion-blocks/ColumnList.astro

@@ -3,18 +3,19 @@ import * as interfaces from '../../lib/interfaces.ts'
 import NotionBlocks from '../NotionBlocks.astro'
 
 export interface Props {
-  block: interfaces.Block
-  headings: interfaces.Block[]
+  block: interfaces.Block;
+  headings: interfaces.Block[];
+  renderChildren?: boolean; // Make this optional
 }
 
-const { block, headings } = Astro.props
+const { block, headings, renderChildren = true } = Astro.props;
 ---
 
 <div class="flex flex-wrap w-full mx-auto my-4 gap-x-4 md:flex-nowrap">
   {
     block.ColumnList.Columns.map((column: interfaces.Column) => (
-      <div  class="flex-1 min-w-[180px] w-[180px] md:w-auto">
-        <NotionBlocks blocks={column.Children} headings={headings} />
+      <div  class="ncolumns flex-1 min-w-[180px] w-[180px] md:w-auto">
+        <NotionBlocks blocks={column.Children} headings={headings} renderChildren={renderChildren}/>
       </div>
     ))
   }

src/components/notion-blocks/Equation.astro

@@ -10,7 +10,7 @@ const { block } = Astro.props;
 ---
 
 <div
-	class="equation text-center"
+	class="equation text-center" id={block.Id}
 	set:html={katex.renderToString(block.Equation.Expression, {
 		throwOnError: false,
 	})}

src/components/notion-blocks/File.astro

@@ -20,7 +20,7 @@ try {
 const filename = decodeURIComponent(url.pathname.split("/").slice(-1)[0]);
 ---
 
-<div class="file">
+<div class="file" id={block.Id}>
 	{
 		url && (
 			<div>

src/components/notion-blocks/Heading1.astro

@@ -5,11 +5,12 @@ import RichText from "./RichText.astro";
 import NotionBlocks from "../NotionBlocks.astro";
 
 export interface Props {
-	block: interfaces.Block;
-	headings: interfaces.Block[];
+  block: interfaces.Block;
+  headings: interfaces.Block[];
+  renderChildren?: boolean; // Make this optional
 }
 
-const { block, headings } = Astro.props;
+const { block, headings, renderChildren = true } = Astro.props;
 
 const id = buildHeadingId(block.Heading1);
 ---
@@ -47,7 +48,7 @@ const id = buildHeadingId(block.Heading1);
 				</a>
 			</summary>
 			<div class="pl-10">
-				{block.Heading1.Children && (
+				{block.Heading1.Children && renderChildren && (
 					<NotionBlocks blocks={block.Heading1.Children} headings={headings} />
 				)}
 			</div>

src/components/notion-blocks/Heading2.astro

@@ -5,11 +5,12 @@ import RichText from "./RichText.astro";
 import NotionBlocks from "../NotionBlocks.astro";
 
 export interface Props {
-	block: interfaces.Block;
-	headings: interfaces.Block[];
+  block: interfaces.Block;
+  headings: interfaces.Block[];
+  renderChildren?: boolean; // Make this optional
 }
 
-const { block, headings } = Astro.props;
+const { block, headings, renderChildren = true } = Astro.props;
 
 const id = buildHeadingId(block.Heading2);
 ---
@@ -48,7 +49,7 @@ const id = buildHeadingId(block.Heading2);
 				</a>
 			</summary>
 			<div class="pl-10">
-				{block.Heading2.Children && (
+				{block.Heading2.Children && renderChildren && (
 					<NotionBlocks blocks={block.Heading2.Children} headings={headings} />
 				)}
 			</div>

src/components/notion-blocks/Heading3.astro

@@ -5,11 +5,12 @@ import RichText from "./RichText.astro";
 import NotionBlocks from "../NotionBlocks.astro";
 
 export interface Props {
-	block: interfaces.Block;
-	headings: interfaces.Block[];
+  block: interfaces.Block;
+  headings: interfaces.Block[];
+  renderChildren?: boolean; // Make this optional
 }
 
-const { block, headings } = Astro.props;
+const { block, headings, renderChildren = true } = Astro.props;
 
 const id = buildHeadingId(block.Heading3);
 ---
@@ -47,7 +48,7 @@ const id = buildHeadingId(block.Heading3);
 				</a>
 			</summary>
 			<div class="pl-10">
-				{block.Heading3.Children && (
+				{block.Heading3.Children && renderChildren && (
 					<NotionBlocks blocks={block.Heading3.Children} headings={headings} />
 				)}
 			</div>