✨ Recipe Block

components/blocks/Blocks.tsx

@@ -29,6 +29,7 @@ import { TinaBanner } from './TinaBanner';
 import { HighlightsSection } from './HighlightsSection';
 import { SpacerComponent } from './Spacer';
 import { CarouselFeatureBlock } from './CarouselFeature';
+import RecipeBlock from './Recipe';
 
 export const Blocks = ({
   blocks,
@@ -82,6 +83,10 @@ export const Blocks = ({
         return (
           <ColumnsBlock key={`block-${index}`} data={block} index={index} />
         );
+      case 'PageBlocksRecipeBlock':
+        return (
+          <RecipeBlock data={block}/>
+        )
       case 'PageBlocksShowcase':
         return (
           <ShowcaseItemsBlock

components/blocks/Recipe.template.ts

@@ -0,0 +1,56 @@
+export const RecipeBlock = {
+  name: 'recipeBlock',
+  label: 'Recipe Block',
+  fields: [
+    {
+      name: 'title',
+      label: 'Heading Title',
+      type: 'string',
+    },
+    {
+      name: 'description',
+      label: 'Description',
+      type: 'string',
+    },
+    {
+      name: 'codeblock',
+      label: 'Code Block',
+      type: 'rich-text',
+    },
+    {
+      name: 'instruction',
+      label: 'Instruction',
+      type: 'object',
+      list: true,
+      ui: {
+        itemProps: (item) => {
+          return { label: item?.header }
+        },
+      },
+      fields: [
+        {
+          name: 'header',
+          label: 'Header',
+          type: 'string',
+        },
+        {
+          name: 'itemDescription',
+          label: 'Item Description',
+          type: 'string',
+        },
+        {
+          name: 'codeLineStart',
+          label: 'Code Line Start',
+          type: 'number',
+          description: 'Please note that if you enter negative values, it will highlight from 0 to your end number'
+        },
+        {
+          name: 'codeLineEnd',
+          label: 'Code Line End',
+          type: 'number',
+          description: 'Please note that highlighting will not work if your end number is > than your start number'
+        }
+      ],
+    },
+  ],
+};

components/blocks/Recipe.tsx

@@ -0,0 +1,200 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { FaChevronCircleDown } from 'react-icons/fa';
+import { TinaMarkdown } from 'tinacms/dist/rich-text';
+import { customHighlightCSS } from '../styles/RecipeCSS';
+import { CodeToolbar } from '../ui/recipeComponent/RecipeCodeToolBar';
+import CodeBlockWithHighlightLines from '../ui/recipeComponent/RecipeCodeBlockWithHighlight';
+
+export const RecipeBlock = ({ data }) => {
+  const { title, description, codeblock, instruction } = data;
+
+  const [highlightLines, setHighlightLines] = useState('');
+  const [clickedInstruction, setClickedInstruction] = useState<number | null>(
+    null
+  );
+  //LHSheight is the height used for the instructions block when the screen is >= 1024px 
+  const [LHSheight, setLHSheight] = useState<string | null>(null);
+  const [CodeBlockWidth, setCodeBlockWidth] = useState<string | null>(null);
+  const [isBottomOfInstructions, setIsBottomOfInstructions] =
+    useState<boolean>(false);
+
+  const codeblockRef = useRef<HTMLDivElement>(null);
+  const instructionBlockRefs = useRef<HTMLDivElement>(null); //the entire instructions container
+  const instructionRefs = useRef<(HTMLDivElement | null)[]>([]); //list of individual objects in the instruction block
+
+  useEffect(() => {
+    const style = document.createElement('style');
+    style.textContent = customHighlightCSS;
+    document.head.appendChild(style);
+
+    return () => {
+      document.head.removeChild(style);
+    };
+  }, [highlightLines]);
+
+  useEffect(() => {
+    setLHSheight(`${codeblockRef.current?.offsetHeight}`);
+    setCodeBlockWidth(`${codeblockRef.current?.offsetWidth}`);
+  });
+
+  const checkIfBottom = (event: React.UIEvent<HTMLDivElement>) => {
+    const { scrollHeight, scrollTop, clientHeight } = event.currentTarget;
+    setIsBottomOfInstructions(scrollHeight - scrollTop <= clientHeight + 10);
+  };
+
+  const handleInstructionClick = (
+    index: number,
+    codeLineStart?: number,
+    codeLineEnd?: number
+  ) => {
+    setHighlightLines(`${codeLineStart}-${codeLineEnd}`);
+    setClickedInstruction(index === clickedInstruction ? null : index);
+
+    const linePixelheight = 24;
+    const linePixelBuffer = 15; // gives the moving logic some breathing room
+
+    if (codeblockRef.current) {
+      codeblockRef.current.scrollTo({
+        top: linePixelheight * codeLineStart - linePixelBuffer,
+        behavior: 'smooth',
+      });
+    }
+
+    if (window.innerWidth < 1024 && instructionRefs.current[index]) {
+      instructionRefs.current[index].scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+      });
+    }
+  };
+
+  const handleDownArrowClick = () => {
+    const lastInstruction =
+      instructionRefs.current[instructionRefs.current.length - 1];
+    if (lastInstruction) {
+      lastInstruction.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+      });
+    }
+  };
+
+  //height used for the instructions container when the screen is < 1024px. Maintains 1:2 ratio of instruction to code
+  const smAndMbHeight = LHSheight ? `${Number(LHSheight) / 2}px` : null;
+
+  const calculateInstructionsHeight = () => {
+    return instructionRefs.current.reduce((total, ref) => {
+      return total + (ref?.offsetHeight || 0);
+    }, 0);
+  };
+
+  const checkIfScrollable = () => {
+    if (typeof window !== 'undefined' && window.innerWidth < 1024) {
+      return (
+        calculateInstructionsHeight() >= parseInt(smAndMbHeight || '0', 10) //this is necessary because the smAndMbHeight actually has a 'px' suffix, parseInt will remove it
+      );
+    } else {
+      return calculateInstructionsHeight() > parseInt(LHSheight || '0', 10);
+    }
+  };
+
+
+  return (
+    <div className="recipe-block-container mt-20 relative">
+      <div className="title-description px-10">
+        <h2 className="font-tuner text-orange-500 text-2xl">
+          {title || 'Default Title'}
+        </h2>
+        <p className="font-light py-2 text-base">
+          {description || 'Default Description'}
+        </p>
+      </div>
+
+      <div className="content-wrapper flex flex-col lg:flex-row px-10 items-stretch">
+        <div
+          className="instructions bg-gray-800 relative lg:w-1/3 max-h-50vh flex-shrink-0 flex-grow rounded-tl-xl rounded-br-xl lg:rounded-br-none rounded-tr-xl lg:rounded-tr-none lg:rounded-bl-xl flex flex-col"
+          ref={instructionBlockRefs}
+          style={{
+            height:
+              typeof window !== 'undefined' && window.innerWidth >= 1024
+                ? `${LHSheight}px`
+                : `${smAndMbHeight}`,
+          }}
+        >
+          <div className={`${isBottomOfInstructions ? 'hidden' : ''}`}>
+            <div
+              className={`absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black opacity-60 lg:rounded-bl-xl pointer-events-none `}
+            ></div>
+            <FaChevronCircleDown
+              onClick={handleDownArrowClick}
+              className={`absolute bottom-4 left-1/2 transform -translate-x-1/2 w-7 h-7 text-xl text-white cursor-pointer shadow-md
+                ${checkIfScrollable() ? '' : 'hidden'}`}
+            />
+          </div>
+
+          <div
+            className="overflow-auto rounded-tl-xl rounded-bl-xl rounded-tr-xl lg:rounded-tr-none"
+            onScroll={checkIfBottom}
+          >
+            {instruction?.map((inst, idx) => (
+              <div
+                key={idx}
+                ref={(el) => (instructionRefs.current[idx] = el)}
+                className={`instruction-item cursor-pointer p-4 border-gray-700 border-y bg-gray-800 text-white 
+                ${clickedInstruction === idx ? 'bg-slate-600' : ''} `}
+                onClick={() =>
+                  handleInstructionClick(
+                    idx,
+                    inst.codeLineStart,
+                    inst.codeLineEnd
+                  )
+                }
+              >
+                <h5 className="font-tuner">{`${idx + 1}. ${
+                  inst.header || 'Default Header'
+                }`}</h5>
+                <div
+                  className={`overflow-auto transition-all ease-in-out ${
+                    clickedInstruction === idx
+                      ? 'duration-500 max-h-full opacity-100'
+                      : 'duration-0 max-h-0 opacity-0'
+                  }`}
+                >
+                  <span className="mt-2">
+                    {inst.itemDescription || 'Default Item Description'}
+                  </span>
+                </div>
+              </div>
+            )) || <p>No instructions available.</p>}
+          </div>
+        </div>
+
+        <div
+          ref={codeblockRef}
+          className="codeblock bg-gray-800 lg:w-2/3 max-h-50vh overflow-auto lg:rounded-tr-xl rounded-bl-xl lg:rounded-bl-none rounded-br-xl "
+        >
+          {codeblock ? (
+            <div>
+              <TinaMarkdown
+                key={highlightLines}
+                content={codeblock}
+                components={{
+                  code_block: (props) => (
+                    <CodeBlockWithHighlightLines
+                      {...props}
+                      highlightLines={highlightLines}
+                    />
+                  ),
+                }}
+              />
+            </div>
+          ) : (
+            <p>No code block available.</p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RecipeBlock;

components/styles/RecipeCSS.ts

@@ -0,0 +1,43 @@
+// Custom CSS to override PrismJS themes
+export const customHighlightCSS = `
+  :not(pre) > code[class*="language-"],
+  pre[class*="language-"] {
+    color: white;
+    background: #111827; 
+  }
+
+  pre[class*="language-"] > code[class*="language-"] {
+    position: relative;
+  }
+
+  pre[class*="language-"]{
+    padding: 0.5rem;
+  }
+
+  .line-numbers-rows > span:before {
+    content: counter(linenumber);
+    color: #9FFCEF; 
+    display: block;
+    padding-right: 0.8em;
+    text-align: right;
+  }
+
+  .line-highlight {
+    background: rgba(71, 85, 105, 0.25);
+  }
+
+  .line-numbers .line-numbers-rows {
+    border-right: 1px solid #6B7280;
+  }
+
+  pre[class*="language-"] {
+    padding: 1em;
+    margin: 0 0 0.5em 0; 
+    overflow: auto;
+  }
+
+  pre[class*="language-"] ::selection {
+    background: white; 
+    color: black; 
+  }
+`;