Fixing landingkit errors (#5)

* Fixing the conflict for the variable names * update props for the relevant components * fixing the error with 'windows not defined' * Updating tina-lock for the props changes * moving out the post pages on root * Adding props for the homepage * fixing prop key issues for the fragments * fixing the path for the posts * removing the nested post component * Adding workflow to publish the npm package * update readme for new path of the helloworld component * Replacing master to main * updating the notes for the publishing the package * Updating the package version
SSWConsulting · Feb 24, 2025 · 4e59833 · 4e59833
1 parent 67239ad
commit 4e59833
Show file tree

Hide file tree

Showing 13 changed files with 92 additions and 46 deletions.
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -0,0 +1,33 @@
+name: Publish npm Package
+
+on:
+  workflow_dispatch:
+  release:
+    types: [published]
+
+jobs:
+  publish-gpr:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
+        with:
+          package_json_file: package.json
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+          registry-url: "https://registry.npmjs.org"
+          cache: "pnpm"
+
+      - name: 📦️ Install dependencies
+        run: pnpm install --no-frozen-lockfile
+
+      - name: 🏗️ Build
+        run: |
+          pnpm build
+
+      - name: 🚀️ Publish to NPM
+        run: pnpm publish --no-git-checks --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/README.md b/README.md
@@ -49,30 +49,30 @@ export default defineConfig({
                 templates: [
                   // include the schema definitions for the components you want to use
                   breadcrumbBlock(
-                    "https://github.com/SSWConsulting/SSW.TinaCMS.LandingKit/blob/master/tina-starter/public/tina/previews/breadcrumbs.jpg?raw=true"
+                    "https://github.com/SSWConsulting/SSW.TinaCMS.LandingKit/blob/main/tina-starter/public/tina/previews/breadcrumbs.jpg?raw=true"
                   ),
                   logoCarouselBlock(
-                    "https://github.com/SSWConsulting/SSW.TinaCMS.LandingKit/blob/master/tina-starter/public/tina/previews/logo-carousel.png?raw=true?raw=true"
+                    "https://github.com/SSWConsulting/SSW.TinaCMS.LandingKit/blob/main/tina-starter/public/tina/previews/logo-carousel.png?raw=true?raw=true"
                   ),
                   buttonBlock({
                     icons: AntIcons,
                     previewSrc:
-                      "https://github.com/SSWConsulting/SSW.TinaCMS.LandingKit/blob/master/tina-starter/public/tina/previews/button.png?raw=true",
+                      "https://github.com/SSWConsulting/SSW.TinaCMS.LandingKit/blob/main/tina-starter/public/tina/previews/button.png?raw=true",
                   }),
                   cardCarouselBlock({
                     icons: AntIcons,
                     previewSrc:
-                      "https://github.com/SSWConsulting/SSW.TinaCMS.LandingKit/blob/master/tina-starter/public/tina/previews/card-carousel.jpg?raw=true",
+                      "https://github.com/SSWConsulting/SSW.TinaCMS.LandingKit/blob/main/tina-starter/public/tina/previews/card-carousel.jpg?raw=true",
                   }),
                   imageTextBlock({
                     icons: AntIcons,
                     previewSrc:
-                      "https://github.com/SSWConsulting/SSW.TinaCMS.LandingKit/blob/master/tina-starter/public/tina/previews/image-text-block.png?raw=true",
+                      "https://github.com/SSWConsulting/SSW.TinaCMS.LandingKit/blob/main/tina-starter/public/tina/previews/image-text-block.png?raw=true",
                   }),
                   accordionBlock({
                     icons: AntIcons,
                     previewSrc:
-                      "https://github.com/SSWConsulting/SSW.TinaCMS.LandingKit/blob/master/tina-starter/public/tina/previews/accordion.png?raw=true",
+                      "https://github.com/SSWConsulting/SSW.TinaCMS.LandingKit/blob/main/tina-starter/public/tina/previews/accordion.png?raw=true",
                   }),
                 ],
               },
@@ -292,7 +292,7 @@ config file.
 - navigate to the root of the test project `cd tina-starter`
 - link test project with the component package by running `pnpm link --global ssw-tinacms-landingkit`
 - install all dependencies and run the project by running `pnpm i` and then `pnpm dev`
-- check you can view the components at `http://localhost:3000/admin/index.html#/~/posts/explore/HelloWorld`
+- check you can view the components at `http://localhost:3000/` or `http://localhost:3000/admin#/~` 
 
 #### Testing Customizations
 
@@ -303,11 +303,9 @@ config file.
 
 - Update the version number in `package.json` using [Semver](https://semver.org/)
   - This should indicate whether the change MAJOR, MINOR, or a PATCH
-- Merge any new changes into the `master` branch to prevent snowflake npm publications
+- Merge any new changes into the `main` branch to prevent snowflake npm publications
   - **Note**: you do not need to merge changes to `/dist` into main
-- rebuild the package with your changes by running `pnpm build`
-- run `npm publish --public`
-- when prompted to log into npm Navigate to **Keeper** and use the one time authentication code
+- Publish a GitHub release with the same version number as the one you incremented in the file package.json at https://github.com/SSWConsulting/SSW.TinaCMS.LandingKit/releases/new
 
 ## License
 

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "ssw-tinacms-landingkit",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "A set of high quality react components, and compatible TinaCMS schema definitions.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/src/components/accordion.tsx b/src/components/accordion.tsx
@@ -46,12 +46,12 @@ const Accordion = ({ data, icons, callbackFunctions }) => {
             {data.heading}
           </h2>
         )}
-        {data.body && (
+        {data.accordionBody && (
           <p
             className="py-2 text-base font-light text-gray-300"
-            data-tina-field={tinaField(data, "body")}
+            data-tina-field={tinaField(data, "accordionBody")}
           >
-            {data.body}
+            {data.accordionBody}
           </p>
         )}
       </section>

diff --git a/src/components/breadcrumbs.tsx b/src/components/breadcrumbs.tsx
@@ -118,21 +118,22 @@ const Breadcrumbs: FC<
   const { data } = props;
 
   useEffect(() => {
-    if (window?.location?.pathname) {
+    if (typeof window !== "undefined" && window.location.pathname) {
       const paths = window.location.pathname
-        .split('/')
-        .filter((path) => path !== '');
+        .split("/")
+        .filter((path) => path !== "");
+
       const links = getLinks({
-        paths: paths,
-        data: data,
+        paths,
+        data,
         firstNode: data?.firstBreadcrumb,
         finalNode: data.finalBreadcrumb,
         finalNodePlaceholder: data.finalNodePlaceholder,
         breadcrumbReplacements: data?.breadcrumbReplacements,
       });
       setLinks(links);
     }
-  }, [window, data]);
+  }, [data]);
   const [links, setLinks] = React.useState<React.ReactNode[]>([]);
   const textColor = props?.textColor ?? 'text-[#cccccc]';
   const separatorColor = props?.separatorColor ?? 'stroke-[#cccccc]';

diff --git a/src/components/card-carousel/card-carousel.tsx b/src/components/card-carousel/card-carousel.tsx
@@ -36,7 +36,7 @@ type CardCarouselData = {
   callbackFunctions?: Record<string, () => void>;
   isStacked?: boolean | null;
   heading?: string | null;
-  body?: string | null;
+  cardBlockBody?: string | null;
   buttons?: (Button | null)[] | null;
   categoryGroup?: (CategoryGroup | null)[] | null;
   cardStyle?: CardOptions | null;
@@ -85,15 +85,15 @@ const CardCarouselContents = ({ data }: { data: CardCarouselData }) => {
             {data.heading}
           </h2>
         )}
-        {data.body && (
+        {data.cardBlockBody && (
           <p
             className='m-auto max-w-4xl py-2 text-base font-light text-gray-300'
-            data-tina-field={tinaField(data, 'body')}>
-            {data.body}
+            data-tina-field={tinaField(data, 'cardBlockBody')}>
+            {data.cardBlockBody}
           </p>
         )}
-        {data.buttons?.length > 0 && (
-          <div className={'mb-4 mt-2 flex justify-center gap-3'}>
+       {data.buttons?.length > 0 && (
+          <div className="mb-4 mt-2 flex justify-center gap-3">
             {data.buttons?.map((button, index) => {
               const onClick =
                 button.callbackFunction &&
@@ -103,8 +103,7 @@ const CardCarouselContents = ({ data }: { data: CardCarouselData }) => {
                   : {};
               const buttonElement = (
                 <Button
-                  className='text-base'
-                  key={`image-text-button-${index}`}
+                  className="text-base"
                   icons={icons}
                   callbackFunctions={callbackFunctions}
                   data={button}
@@ -116,7 +115,7 @@ const CardCarouselContents = ({ data }: { data: CardCarouselData }) => {
                   {buttonElement}
                 </Link>
               ) : (
-                <>{buttonElement}</>
+                <div key={`button-${index}`}>{buttonElement}</div> 
               );
             })}
           </div>

diff --git a/src/components/logo-carousel.tsx b/src/components/logo-carousel.tsx
@@ -3,6 +3,7 @@ import { ReactElement } from 'react';
 import { tinaField } from 'tinacms/dist/react';
 import { Marquee } from '../internal/shadcn/marquee';
 import { cn } from '../internal/shadcn/utils';
+import React from 'react';
 
 type Logo = {
   logo?: string | null;
@@ -76,7 +77,7 @@ export default function LogoCarousel(props: {
                 };
 
                 return (
-                  <>
+                  <React.Fragment key={`logo-fragment-${index}`}>
                     {logo.logo ? (
                       <Wrapper key={`logo-${index}`}>
                         <Image
@@ -92,7 +93,7 @@ export default function LogoCarousel(props: {
                     ) : (
                       <Wrapper className='bg-white' />
                     )}
-                  </>
+                  </React.Fragment>
                 );
               })}
           </div>

diff --git a/src/schemas/accordion.schema.tsx b/src/schemas/accordion.schema.tsx
@@ -18,7 +18,7 @@ const accordionBlock = ({
       previewSrc: previewSrc,
       defaultItem: {
         heading: "Lorem Ipsum",
-        body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+        accordionBody: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
         accordionItems: [
           {
             label: "Lorem",
@@ -83,7 +83,7 @@ const accordionBlock = ({
       {
         type: "string",
         label: "Body",
-        name: "body",
+        name: "accordionBody",
         description: "Flavour text under the block title.",
       },
       tabletTextAlignmentFieldSchema as TinaField,

diff --git a/src/schemas/card-carousel.schema.tsx b/src/schemas/card-carousel.schema.tsx
@@ -113,7 +113,7 @@ const defaultCardBlock = {
   isStacked: false,
   heading: "Lorem Ipsum",
   isH1: false,
-  body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  cardBlockBody: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
   buttonRow: [
     {
       buttonText: "Lorem",
@@ -167,7 +167,7 @@ export const cardCarouselBlock = ({
       {
         type: "string",
         label: "Body",
-        name: "body",
+        name: "cardBlockBody",
         description: "Flavour text under the block title.",
         ui: {
           component: "textarea",

diff --git a/...sts/explore/[...filename]/client-page.tsx → tina-starter/app/client-page.tsx b/...sts/explore/[...filename]/client-page.tsx → tina-starter/app/client-page.tsx
@@ -10,10 +10,7 @@ import {
   ImageTextBlock,
   LogoCarousel,
 } from "ssw-tinacms-landingkit";
-import type {
-  PostBlocks,
-  PostQuery,
-} from "../../../../tina/__generated__/types";
+import type { PostBlocks, PostQuery } from "../tina/__generated__/types";
 
 interface ClientPageProps {
   query: string;
@@ -52,14 +49,15 @@ const Blocks = ({ blocks }: BlocksProps) => {
   if (!blocks) return <></>;
   return (
     <>
-      {blocks.map((block) => {
+      {blocks.map((block, index) => {
         if (!block) {
           return <></>;
         }
         switch (block.__typename) {
           case "PostBlocksBreadcrumbs":
             return (
               <Breadcrumbs
+                key={`PostBlocksBreadcrumbs-${index}`}
                 data={{
                   ...block,
                   //URL segment mapping is configured outside of the schema
@@ -74,10 +72,17 @@ const Blocks = ({ blocks }: BlocksProps) => {
               />
             );
           case "PostBlocksLogoCarousel":
-            return <LogoCarousel repeat={10} data={block} />;
+            return (
+              <LogoCarousel
+                key={`PostBlocksLogoCarousel-${index}`}
+                repeat={10}
+                data={block}
+              />
+            );
           case "PostBlocksCardCarousel":
             return (
               <CardCarousel
+                key={`PostBlocksCardCarousel-${index}`}
                 icons={AntIcons}
                 callbackFunctions={callbackFunctions}
                 data={block}
@@ -86,6 +91,7 @@ const Blocks = ({ blocks }: BlocksProps) => {
           case "PostBlocksButton":
             return (
               <Button
+                key={`PostBlocksButton-${index}`}
                 icons={AntIcons}
                 callbackFunctions={callbackFunctions}
                 data={block}
@@ -94,6 +100,7 @@ const Blocks = ({ blocks }: BlocksProps) => {
           case "PostBlocksImageTextBlock":
             return (
               <ImageTextBlock
+                key={`PostBlocksImageTextBlock-${index}`}
                 icons={AntIcons}
                 callbackFunctions={callbackFunctions}
                 data={block}
@@ -102,6 +109,7 @@ const Blocks = ({ blocks }: BlocksProps) => {
           case "PostBlocksAccordion":
             return (
               <Accordion
+                key={`PostBlocksAccordion-${index}`}
                 icons={AntIcons}
                 callbackFunctions={callbackFunctions}
                 data={block}

diff --git a/.../app/posts/explore/[...filename]/page.tsx → tina-starter/app/page.tsx b/.../app/posts/explore/[...filename]/page.tsx → tina-starter/app/page.tsx
@@ -1,4 +1,4 @@
-import client from "../../../../tina/__generated__/client";
+import client from "../tina/__generated__/client";
 import Post from "./client-page";
 
 export async function generateStaticParams() {
@@ -17,8 +17,12 @@ export default async function PostPage({
   params: { filename: string[] };
 }) {
 
+  let filename = params.filename;
+  if (!filename) {
+    filename = ["HelloWorld"];
+  }
   const data = await client.queries.post({
-    relativePath: `${params.filename}.md`,
+    relativePath: `${filename}.md`,
   });
 
   return (

diff --git a/tina-starter/tina/collections/post.tsx b/tina-starter/tina/collections/post.tsx
@@ -45,7 +45,9 @@ const blogPosts = {
   ],
   ui: {
     router: ({ document }) => {
-      return `/posts/explore/${document._sys.filename}`;
+      if (document._sys.filename === "HelloWorld") {
+        return "/";
+      }
     },
   },
 };

diff --git a/tina-starter/tina/tina-lock.json b/tina-starter/tina/tina-lock.json