ccatto · ccatto · Jul 30, 2024 · Jun 13, 2024 · Jun 13, 2024 · Jun 18, 2024
diff --git a/README.md b/README.md
@@ -37,7 +37,10 @@ Current node version is 20.9.0 as of March 26th 2024;
 * test git actions
 * 007 top footer; nav accordions; 2 new doc pages remove array item & nextjs port.
 
-* 008 5.22.24 hotfix to handleCloseAll with code nav; 
+* 008 5.22.24 hotfix to handleCloseAll with code nav;
+
+* 009 6.13.24 Updates
+
 * 1st update in June 2024. 2nd small
 
 - using @next/third-parties for GA4.

diff --git a/app/(public)/code/css-styles/flexbox/page.tsx b/app/(public)/code/css-styles/flexbox/page.tsx
@@ -0,0 +1,145 @@
+import { Metadata } from 'next';
+import JumbotronCattoFlexible from '@/app/components/JumbotronCattoFlexible/JumbotronCattoFlexible';
+import CommandPromptDisplay from '@/app/components/Utils/CommandPromptDisplay/CommandPromptDisplay';
+import SyntaxHighlightingReactCatto from '@/app/components/Utils/SyntaxHighlightingReactCatto/SyntaxHighlightingReactCatto';
+const codeBlock =
+  "<div className='flex w-full bg-pink-400'>\n  <div className='bg-orange-300 text-black'>Div 1</div>\n  <div className='bg-blue-400 text-black'>2nd Div</div>\n  <div className='bg-green-400 text-black'>3rd div</div>\n</div>";
+const codeBlock2 =
+  "<div className='flex w-full'>\n  <div className='flex-1 bg-orange-300 text-black'>Div 1</div>\n  <div className='flex-1 bg-blue-400 text-black'>2nd Div</div>\n  <div className='flex-1 bg-green-400 text-black'>3rd div</div>\n</div>";
+const codeBlock3 =
+  "<div className='flex flex-col w-full'>\n  <div className='flex-1 bg-orange-300 text-black'>Div 1</div>\n  <div className='flex-1 bg-blue-400 text-black'>2nd Div</div>\n  <div className='flex-1 bg-green-400 text-black'>3rd div</div>\n</div>";
+const codeBlock4 =
+  "<div className='flex flex-col w-full'>\n  <div className='flex-[10%] bg-orange-300 text-black'>Div 1</div>\n  <div className='flex-[80%] bg-blue-400 text-black'>2nd Div</div>\n  <div className='flex-[10%] bg-green-400 text-black'>3rd div</div>\n</div>";
+const codeBlock5 =
+  "<div className='flex flex-col w-full'>\n  <div className='flex-1 bg-orange-300 text-black'>Div 1</div>\n  <div className='flex-1 bg-blue-400 text-black'>2nd Div</div>\n  <div className='flex-1 bg-green-400 text-black'>3rd div</div>\n</div>";
+const codeBlock5a =
+  "<div className='flex justify-center h-20 w-96 bg-orange-300 text-black'>\n  justify-center(horizontally)\n</div>";
+const codeBlock5b =
+  '<div className="flex items-center h-20 w-96 bg-orange-300 text-black">\n  items-center(vertically)\n</div>';
+const codeBlock5c =
+  '<div className="flex justify-end h-20 w-96 bg-orange-300 text-black">\n  justify-content: flex-end\n</div>';
+const codeBlock6 =
+  "<div className='flex flex-col w-full'>\n  <div className='flex-1 bg-orange-300 text-black'>Div 1</div>\n  <div className='flex-1 bg-blue-400 text-black'>2nd Div</div>\n  <div className='flex-1 bg-green-400 text-black'>3rd div</div>\n</div>";
+
+export const metadata: Metadata = {
+  title: 'Chris Catto Code CSS-Styles Flexbox',
+  description: 'Chris Catto Code CSS-Styles Flexbox',
+};
+
+// possible CSS Color theme #1e43ff
+export default function Page() {
+  return (
+    <div className="flex h-full w-full flex-col flex-nowrap ">
+      <div className="flex-[20]">
+        <JumbotronCattoFlexible
+          title="CSS-Styles Flexbox"
+          description="The CSS3 Flexbox is a layout that allows responsive elements within a container to be automatically arranged depending on viewport size."
+        />
+      </div>
+      <hr className="p-0" />
+
+      <div className="flex-[80] p-2 dark:bg-gray-700">
+        <h2 className="mb-4 inline-block text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white">
+          Flexbox examples to learn by doing; please note we will be utlizing
+          TailwindCSS classes.
+        </h2>
+        <h4>For these next code examples we have a container & 3 children</h4>
+        <hr className="m-5 mx-auto my-4 h-1 w-48 rounded border-0 bg-blue-100 dark:bg-blue-700 md:my-10" />
+        <h6>Ex. 1: only the container has the display:flex</h6>
+        <p>
+          So as we see the the children are now on the same row not all stacked
+          if we didn't use the flex attributes.
+        </p>
+        <br />
+        <div className="flex w-full bg-pink-400">
+          <div className="bg-orange-300 text-black">Div 1</div>
+          <div className="bg-blue-400 text-black">2nd Div</div>
+          <div className="bg-green-400 text-black">3rd div</div>
+        </div>
+        <SyntaxHighlightingReactCatto codeString={codeBlock} />
+        <hr className="m-5 mx-auto my-4 h-1 w-48 rounded border-0 bg-blue-100 dark:bg-blue-700 md:my-10" />
+        <h6>
+          Ex. 2: Container has the display:flex && children have flex-1
+          specifically: flex: 1 1 0%
+        </h6>
+        <br />
+        <div className="flex w-full">
+          <div className="flex-1 bg-orange-300 text-black">Div 1</div>
+          <div className="flex-1 bg-blue-400 text-black">2nd Div</div>
+          <div className="flex-1 bg-green-400 text-black">3rd div</div>
+        </div>
+        <SyntaxHighlightingReactCatto codeString={codeBlock2} />
+        <hr className="m-5 mx-auto my-4 h-1 w-48 rounded border-0 bg-blue-100 dark:bg-blue-700 md:my-10" />
+        <h6>
+          Ex. 3: Let's take a look at flex-direction column. Adding the
+          flex-direction: column; will make the children div's to stack
+        </h6>
+        <br />
+        <div className="flex w-full flex-col">
+          <div className="flex-1 bg-orange-300 text-black">Div 1</div>
+          <div className="flex-1 bg-blue-400 text-black">2nd Div</div>
+          <div className="flex-1 bg-green-400 text-black">3rd div</div>
+        </div>
+        <SyntaxHighlightingReactCatto codeString={codeBlock3} />
+        <hr className="m-5 mx-auto my-4 h-1 w-48 rounded border-0 bg-blue-100 dark:bg-blue-700 md:my-10" />
+        <h6>
+          Ex. 4: Let's take a look at flex with percent inside a child. Instead
+          of just flex-1 we can use a percent:
+        </h6>
+        <br />
+        <div className="flex w-full">
+          <div className="flex-[10%] bg-orange-300 text-black">Div 1</div>
+          <div className="flex-[80%] bg-blue-400 text-black">2nd Div</div>
+          <div className="flex-[10%] bg-green-400 text-black">3rd div</div>
+        </div>
+        <SyntaxHighlightingReactCatto codeString={codeBlock4} />
+        <hr className="m-5 mx-auto my-4 h-1 w-48 rounded border-0 bg-blue-100 dark:bg-blue-700 md:my-10" />
+        <h6>
+          Ex. 5: Let's take a look aligning. Adding the justify-content: center;
+          will align horizontally & items-center will align vertically:
+        </h6>
+        <br />
+        <p>Simple justify-center example</p>
+        <br />
+        <div className="flex h-20 w-96 justify-center bg-orange-300 text-black">
+          justify-center(horizontally)
+        </div>
+        <SyntaxHighlightingReactCatto codeString={codeBlock5a} />
+        <br />
+        <p>Simple align-items: center; example</p>
+        <br />
+        <div className="flex h-20 w-96 items-center bg-orange-300 text-black">
+          items-center(vertically)
+        </div>
+        <SyntaxHighlightingReactCatto codeString={codeBlock5b} />
+        <p>Simple justify-content: flex-end; to right justify</p>
+        <br />
+        <div className="flex h-20 w-96 justify-end bg-orange-300 text-black">
+          justify-content: flex-end
+        </div>
+        <SyntaxHighlightingReactCatto codeString={codeBlock5c} />
+        <hr className="m-5 mx-auto my-4 h-1 w-48 rounded border-0 bg-blue-100 dark:bg-blue-700 md:my-10" />
+        <h6>
+          Ex. 6: Let's take a look aligning & centering in a nested flexbox.
+          Adding the flex-direction: column; will make the children div's to
+          stack
+        </h6>
+        <br />
+        <div className="flex h-20 w-full">
+          <div className="flex-1 bg-orange-300 text-black">
+            <div className="flex h-full justify-center">Div 1</div>
+          </div>
+          <div className="flex-1 bg-blue-400 text-black">
+            <div className="flex h-full items-center">2nd Div</div>
+          </div>
+          <div className="flex-1 items-center justify-center bg-green-400 text-black">
+            <div className="flex h-full items-center justify-center">
+              3rd Div
+            </div>
+          </div>
+        </div>
+        <SyntaxHighlightingReactCatto codeString={codeBlock5} />
+      </div>
+    </div>
+  );
+}
diff --git a/app/(public)/code/css-styles/layout.tsx b/app/(public)/code/css-styles/layout.tsx
@@ -0,0 +1,23 @@
+import React, { ReactNode, useState } from 'react';
+import JSNavDrawerCatto from '@/app/components/JavaScript/JSNavDrawerCatto/JSNavDrawerCatto';
+import CSSSideNavLinkList from '@/app/components/AtomicDesign/molecules/CSSSideNavLinkList/CSSSideNavLinkList';
+
+type LayoutProps = {
+  children: ReactNode;
+};
+
+const CSSLayout = ({ children }: LayoutProps) => {
+  return (
+    <>
+      <div className="flex min-h-[calc(100vh-27rem)]">
+        <aside className="h-full lg:flex-[20]">
+          <CSSSideNavLinkList />
+        </aside>
+        <article className="h-full lg:flex-[80]">{children}</article>
+      </div>
+      <hr className="m-3" />
+    </>
+  );
+};
+
+export default CSSLayout;
diff --git a/app/(public)/code/css-styles/page.tsx b/app/(public)/code/css-styles/page.tsx
@@ -1,4 +1,5 @@
 import { Metadata } from 'next';
+import Link from 'next/link';
 import JumbotronCattoFlexible from '@/app/components/JumbotronCattoFlexible/JumbotronCattoFlexible';
 // import SideNavGitCatto from '@/app/components/SideNavGitCatto/SideNavGitCatto'
 // import Image from 'next/image'
@@ -22,7 +23,7 @@ export default function Page() {
           <ul className="space-y-2 font-medium">
             <li>
               <a
-                href="/code/css-styles/overview"
+                href="/code/css-styles/flexbox"
                 className="group flex items-center rounded-lg p-2 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white"
               >
                 <svg
@@ -37,10 +38,34 @@ export default function Page() {
                     d="M6,9 C6.55228,9 7,9.44772 7,10 L7,14 C7,14.5523 6.55228,15 6,15 L2,15 C1.44772,15 1,14.5523 1,14 L1,10 C1,9.44772 1.44772,9 2,9 L6,9 Z M14,13 C14.5523,13 15,13.4477 15,14 C15,14.5523 14.5523,15 14,15 L10,15 C9.44772,15 9,14.5523 9,14 C9,13.4477 9.44772,13 10,13 L14,13 Z M5,11 L3,11 L3,13 L5,13 L5,11 Z M14,9 C14.5523,9 15,9.44772 15,10 C15,10.5523 14.5523,11 14,11 L10,11 C9.44772,11 9,10.5523 9,10 C9,9.44772 9.44772,9 10,9 L14,9 Z M6,1 C6.55228,1 7,1.44772 7,2 L7,6 C7,6.55228 6.55228,7 6,7 L2,7 C1.44772,7 1,6.55228 1,6 L1,2 C1,1.44772 1.44772,1 2,1 L6,1 Z M14,5 C14.5523,5 15,5.44772 15,6 C15,6.51283143 14.613973,6.93550653 14.1166239,6.9932722 L14,7 L10,7 C9.44772,7 9,6.55228 9,6 C9,5.48716857 9.38604429,5.06449347 9.88337975,5.0067278 L10,5 L14,5 Z M5,3 L3,3 L3,5 L5,5 L5,3 Z M14,1 C14.5523,1 15,1.44772 15,2 C15,2.55228 14.5523,3 14,3 L10,3 C9.44772,3 9,2.55228 9,2 C9,1.44772 9.44772,1 10,1 L14,1 Z"
                   />
                 </svg>
-                <span className="ms-3">Next.js Overview</span>
+                <span className="ms-3">CSS Flexbox</span>
               </a>
             </li>
             <li>
+              <Link
+                href="https://web.dev/learn/css/"
+                target="_blank"
+                className="group flex items-center rounded-lg p-2 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white"
+              >
+                <svg
+                  className="h-5 w-5 flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 "
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="currentColor"
+                  viewBox="0 0 18 21"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M6,9 C6.55228,9 7,9.44772 7,10 L7,14 C7,14.5523 6.55228,15 6,15 L2,15 C1.44772,15 1,14.5523 1,14 L1,10 C1,9.44772 1.44772,9 2,9 L6,9 Z M14,13 C14.5523,13 15,13.4477 15,14 C15,14.5523 14.5523,15 14,15 L10,15 C9.44772,15 9,14.5523 9,14 C9,13.4477 9.44772,13 10,13 L14,13 Z M5,11 L3,11 L3,13 L5,13 L5,11 Z M14,9 C14.5523,9 15,9.44772 15,10 C15,10.5523 14.5523,11 14,11 L10,11 C9.44772,11 9,10.5523 9,10 C9,9.44772 9.44772,9 10,9 L14,9 Z M6,1 C6.55228,1 7,1.44772 7,2 L7,6 C7,6.55228 6.55228,7 6,7 L2,7 C1.44772,7 1,6.55228 1,6 L1,2 C1,1.44772 1.44772,1 2,1 L6,1 Z M14,5 C14.5523,5 15,5.44772 15,6 C15,6.51283143 14.613973,6.93550653 14.1166239,6.9932722 L14,7 L10,7 C9.44772,7 9,6.55228 9,6 C9,5.48716857 9.38604429,5.06449347 9.88337975,5.0067278 L10,5 L14,5 Z M5,3 L3,3 L3,5 L5,5 L5,3 Z M14,1 C14.5523,1 15,1.44772 15,2 C15,2.55228 14.5523,3 14,3 L10,3 C9.44772,3 9,2.55228 9,2 C9,1.44772 9.44772,1 10,1 L14,1 Z"
+                  />
+                </svg>
+                <span className="ms-3">
+                  This is a great CSS Tutorial page on web.dev/learn/css
+                </span>
+              </Link>
+            </li>
+
+            {/* <li>
               <a
                 href="/code/css-styles/fundamentals"
                 className="group flex items-center rounded-lg  p-2 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white"
@@ -86,7 +111,7 @@ export default function Page() {
                   </a>
                 </li>
               </ul>
-            </li>
+            </li> */}
           </ul>
         </div>
         {/* <hr className="m-3" /> */}

diff --git a/app/(public)/code/javascript/frameworks/nextjs/react-hook-form/page.tsx b/app/(public)/code/javascript/frameworks/nextjs/react-hook-form/page.tsx
@@ -17,7 +17,7 @@ export const metadata: Metadata = {
 const page = () => {
   const codeBlock = 'npm install react-hook-form';
   const codeBlock2 =
-    "import { SubmitHandler, useForm } from 'react-hook-form';";
+    "import { SubmitHandler, useForm } from 'react-hook-form';\n import { z } from 'zod';\nimport { zodResolver } from '@hookform/resolvers/zod';";
   const codeBlock3 =
     'const schema = z.object({\n  email: z.string().min(3),\n  password: z.string().min(3),\n});\ntype FormFields = z.infer<typeof schema>;';
   const codeBlock4 =
@@ -188,6 +188,9 @@ const page = () => {
                           <SyntaxHighlightingReactCatto
                             codeString={codeBlock}
                           />
+                          <div className="indent-4">
+                            Also at the top we need to add 'use client'.
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -209,7 +212,7 @@ const page = () => {
                             />
                             <p className="mt-2">
                               While we are doing this lets also import the
-                              SubmitHandler function
+                              SubmitHandler function & Zod
                             </p>
                           </div>
                         </div>

diff --git a/app/(public)/code/mac-environment-setup/page.tsx b/app/(public)/code/mac-environment-setup/page.tsx
@@ -18,6 +18,7 @@ export default function Page() {
     'https://emgithub.com/iframe.html?target=https%3A%2F%2Fgithub.com%2Fccatto%2Fgists%2Fblob%2Fmain%2Fstripe-webhook.ts&style=a11y-dark&type=code&showBorder=on&showLineNumbers=on&showFileMeta=on&showFullPath=on&showCopy=on';
   const codeBlock = "const CapacitorConfig = {\n    webDir: 'out',";
   const codeBlock2 = 'const nextConfig = {\n  output: export';
+  const codeBlock3 = 'export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")" \n[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm \n\nexport PATH=/opt/homebrew/bin:$PATH \nexport NVM_DIR="$HOME/.nvm" \n[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm \n[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion';
 
   return (
     <>
@@ -126,6 +127,16 @@ export default function Page() {
                       </div>
                     </div>
                   </li>
+                  <li>
+                    <div
+                      className="w-full rounded-lg border border-green-300 bg-green-50 p-4 text-slate-200 dark:border-green-800 dark:bg-gray-800 dark:text-slate-200"
+                      role="alert"
+                    >
+                      <div className="flex items-center justify-between">
+                        <h3 className="font-medium">8. .zshrc configuration</h3>
+                      </div>
+                    </div>
+                  </li>
                 </ol>
               </div>
               <hr className="m-5 mx-auto my-4 h-1 w-48 rounded border-0 bg-gray-100 dark:bg-gray-700 md:my-10" />
@@ -364,6 +375,27 @@ export default function Page() {
                       </div>
                     </div>
                   </li>
+                  <li>
+                    <div
+                      className="w-full rounded-lg border border-green-300 bg-green-50 p-4 text-slate-200 dark:border-green-800 dark:bg-gray-800 dark:text-slate-200"
+                      role="alert"
+                    >
+                      <div className="flex flex-wrap items-center lg:flex-nowrap">
+                        <h3 className="mb-3 font-medium lg:mb-0 lg:basis-1/4">
+                          8. .zshrc file configuration
+                        </h3>
+                        <div className="w-full rounded-2xl bg-slate-600 p-2 lg:ml-5 lg:basis-3/4">
+                          <div className=" indent-4">
+                            The .zshrc file configuration is essential for Z-Shell scripting. In our directory of Macintosh HD > Users > userName we have (if not there we can create) a file named .zshrc. All files starting with a dot are "hidden" and we can view hidden files in finder by pressing cmd+shift+. So opening the file to me I like to simply use the app TextEdit (others use vim or text editing methods). Then here are some important lines we can add to our .zshrc
+                            </div>
+                            <SyntaxHighlightingReactCatto
+                              codeString={codeBlock3}
+                            />
+
+                        </div>
+                      </div>
+                    </div>
+                  </li>
                 </ol>
                 <hr className="m-5 mx-auto my-4 h-1 w-48 rounded border-0 bg-gray-100 dark:bg-gray-700 md:my-10" />
                 <div className="flex w-full justify-center pb-4">

diff --git a/app/api/contact/route.ts b/app/api/contact/route.ts
@@ -1,5 +1,3 @@
-// app/api/hello.js
-
 import { PrismaClient } from '@prisma/client';
 
 const prisma = new PrismaClient();