Fix deploy failure and add mobile table of contents

.nvmrc

@@ -1 +1 @@
-v18
+20

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18-alpine
+FROM node:20-alpine
 
 COPY . /app
 

package.json

@@ -28,7 +28,7 @@
 		"typescript": "^5.2.2"
 	},
 	"engines": {
-		"node": ">=18.0.0",
+		"node": ">=20.0.0",
 		"pnpm": ">=8.0.0"
 	}
 }

packages/blog-starter-kit/themes/enterprise/components/post-toc.tsx

@@ -1,6 +1,12 @@
+import { useState } from 'react';
 import Link from 'next/link';
+import { List } from 'react-feather';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { PostFullFragment } from '../generated/graphql';
 import { useAppContext } from './contexts/appContext';
+import { Button } from './button';
+import CloseSVG from './icons/svgs/CloseSVG';
+import CustomScrollArea from './scroll-area';
 
 type TableOfContentsItem = PostFullFragment['features']['tableOfContents']['items'][number];
 
@@ -29,9 +35,11 @@ const mapTableOfContentItems = (toc: TableOfContentsItem[]) => {
 const Toc = ({
 	data,
 	parentId,
+	onNavigate,
 }: {
 	data: TableOfContentsItem[];
 	parentId: TableOfContentsItem['parentId'];
+	onNavigate?: () => void;
 }) => {
 	const children = data.filter((item) => item.parentId === parentId);
 	if (children.length === 0) return null;
@@ -41,21 +49,21 @@ const Toc = ({
 				<li key={item.id}>
 					<a
 						href={`#heading-${item.slug}`}
+						onClick={onNavigate}
 						className="hover:text-primary-600 hover:bg-primary-50 dark:hover:text-primary-500 text-sm font-light dark:hover:bg-neutral-800"
 					>
 						{item.title}
 					</a>
 
-					<Toc data={data} parentId={item.id} />
+					<Toc data={data} parentId={item.id} onNavigate={onNavigate} />
 				</li>
 			))}
 		</ul>
 	);
 };
 
-export const PostTOC = () => {
+const TagsList = () => {
 	const { post } = useAppContext();
-
 	if (!post) return null;
 
 	const tagsList = post.tags?.map((tag) => (
@@ -69,15 +77,81 @@ export const PostTOC = () => {
 		</li>
 	));
 
+	return (
+		<div className="mb-12 w-full text-slate-600 dark:text-neutral-300">
+			<ul className="flex flex-row flex-wrap items-center gap-2">{tagsList}</ul>
+		</div>
+	);
+};
+
+export const PostTOC = () => {
+	const { post } = useAppContext();
+
+	if (!post) return null;
+
 	return (
 		<div className="sticky top-24 w-full">
 			<div className="mx-auto w-full max-w-screen-md rounded-lg text-base leading-snug dark:border-neutral-800 dark:text-neutral-50 md:text-lg">
-				<div className="mb-12 w-full text-slate-600 dark:text-neutral-300">
-					<ul className="flex flex-row flex-wrap items-center gap-2">{tagsList}</ul>
-				</div>
+				<TagsList />
 				<h2 className="text-md font-bold md:text-lg">On this page</h2>
 				<Toc parentId={null} data={mapTableOfContentItems(post.features.tableOfContents.items)} />
 			</div>
 		</div>
 	);
 };
+
+export const PostTOCMobile = () => {
+	const { post } = useAppContext();
+	const [isOpen, setIsOpen] = useState(false);
+
+	if (!post) return null;
+
+	const closeModal = () => setIsOpen(false);
+
+	return (
+		<div className="lg:hidden">
+			<Button
+				type="outline"
+				label="Table of contents"
+				icon={<List className="h-4 w-4" />}
+				onClick={() => setIsOpen(true)}
+			/>
+			{isOpen && (
+				<DialogPrimitive.Root open>
+					<DialogPrimitive.Portal>
+						<DialogPrimitive.Overlay
+							onClick={closeModal}
+							className="fixed inset-0 z-50 bg-slate-900 opacity-50 transition-opacity duration-300 ease-out dark:bg-slate-600"
+						/>
+						<DialogPrimitive.Content
+							onEscapeKeyDown={closeModal}
+							className="fixed bottom-0 left-0 right-0 z-50 flex max-h-[80vh] w-full flex-col overflow-hidden rounded-b-none rounded-t-lg border-slate-200 bg-white text-slate-700 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-50 md:bottom-50 md:left-50 md:w-96 md:-translate-x-1/2 md:translate-y-1/2 md:rounded-xl lg:w-108 xl:w-116"
+						>
+							<DialogPrimitive.DialogTitle className="w-full px-6 py-4 text-lg font-semibold">
+								On this page
+							</DialogPrimitive.DialogTitle>
+							<DialogPrimitive.Close className="absolute right-2 top-4 text-slate-900 dark:text-slate-50" asChild>
+								<Button
+									type="outline"
+									label=""
+									icon={<CloseSVG className="h-5 w-5 fill-current" />}
+									className="rounded-xl !border-transparent !px-3 !py-2 hover:bg-neutral-800 dark:text-white"
+									onClick={closeModal}
+								/>
+							</DialogPrimitive.Close>
+							<CustomScrollArea>
+								<div className="px-6 pb-8">
+									<Toc
+										parentId={null}
+										data={mapTableOfContentItems(post.features.tableOfContents.items)}
+										onNavigate={closeModal}
+									/>
+								</div>
+							</CustomScrollArea>
+						</DialogPrimitive.Content>
+					</DialogPrimitive.Portal>
+				</DialogPrimitive.Root>
+			)}
+		</div>
+	);
+};

packages/blog-starter-kit/themes/enterprise/pages/[slug].tsx

@@ -29,7 +29,7 @@ import { useEffect, useState } from 'react';
 import { resizeImage } from '@starter-kit/utils/image';
 import { triggerCustomWidgetEmbed } from '@starter-kit/utils/trigger-custom-widget-embed';
 import { CoverImage } from '../components/cover-image';
-import { PostTOC } from '../components/post-toc';
+import { PostTOC, PostTOCMobile } from '../components/post-toc';
 
 const AboutAuthor = dynamic(() => import('../components/about-author'), { ssr: false });
 const Subscribe = dynamic(() => import('../components/subscribe').then((mod) => mod.Subscribe));
@@ -136,6 +136,12 @@ const Post = ({ publication, post }: PostProps) => {
 					author={post.author}
 					readTimeInMinutes={post.readTimeInMinutes}
 				/>
+				{post.features.tableOfContents.isEnabled &&
+					post.features?.tableOfContents?.items?.length > 0 && (
+						<div className="mt-6 px-2 md:px-0">
+							<PostTOCMobile />
+						</div>
+					)}
 				<div className="mt-12 flex w-full gap-8 lg:justify-between">
 					<div className="flex flex-1 flex-col gap-6">
 						{post.subtitle && (