WIP

src/app/_components/Form/FormCombobox.tsx

@@ -69,7 +69,7 @@ export function FormCombobox<Value extends OptionType = OptionType>({
 
           <ComboboxOptions
             transition
-            className="absolute z-10 mt-2 w-[var(--input-width)] rounded-lg border border-brand-100 bg-brand-800 py-2 text-brand-100 transition duration-100 ease-in focus:brand-outline empty:invisible data-[leave]:data-[closed]:opacity-0"
+            className="absolute z-10 mt-2 max-h-96 w-[var(--input-width)] overflow-scroll rounded-lg border border-brand-100 bg-brand-800 py-2 text-brand-100 transition duration-100 ease-in focus:brand-outline empty:invisible data-[leave]:data-[closed]:opacity-0"
           >
             {({ option }) => (
               <ComboboxOption

src/app/ecosystem-explorer/page.tsx

@@ -70,6 +70,11 @@ const categoryData = getCategoryDataFromDirectory(
 const { categoryOptions, validCategoryIds } =
   getCategorySettingsFromMap(categoryData)
 
+const cta = {
+  text: 'Submit Or Update Your Project',
+  href: PATHS.ECOSYSTEM_EXPLORER_PROJECT_FORM.path,
+}
+
 export default function EcosystemExplorer({ searchParams }: Props) {
   const { searchQuery, searchResults } = useSearch({
     searchParams,
@@ -104,10 +109,7 @@ export default function EcosystemExplorer({ searchParams }: Props) {
         title={header.title}
         description={header.description}
         image={graphicsData.ecosystem}
-        cta={{
-          text: 'Submit Your Project',
-          href: PATHS.ECOSYSTEM_EXPLORER_PROJECT_FORM.path,
-        }}
+        cta={cta}
       />
 
       <PageSection
@@ -207,10 +209,7 @@ export default function EcosystemExplorer({ searchParams }: Props) {
       <CTASection
         title="Become Part of the Expanding Ecosystem"
         description="If you’re building on Filecoin and don’t see your project or want to edit your listing, share your details."
-        cta={{
-          text: 'Submit Your Project',
-          href: PATHS.ECOSYSTEM_EXPLORER_PROJECT_FORM.path,
-        }}
+        cta={cta}
       />
     </PageLayout>
   )

src/app/ecosystem-explorer/project-form/actions/buildMarkdownTemplate.ts

@@ -0,0 +1,44 @@
+'use server'
+
+import { encrypt } from '@/utils/encryption'
+
+import type { FormattedFormData } from '../utils/formatFormData'
+import { getEcosystemMarkdownTemplate } from '../utils/getEcosystemMarkdownTemplate'
+
+type Timestamps = {
+  createdOn: Date
+  updatedOn: Date
+  publishedOn: Date
+}
+
+type MarkdownTemplateParams = {
+  formattedData: FormattedFormData
+  imagePath: string
+  timestamps: Timestamps
+}
+
+export async function buildMarkdownTemplate({
+  formattedData,
+  imagePath,
+  timestamps,
+}: MarkdownTemplateParams) {
+  return getEcosystemMarkdownTemplate({
+    encryptedEmail: encrypt(formattedData.email),
+    encryptedName: encrypt(formattedData.name),
+    projectName: formattedData.projectName,
+    imagePath,
+    category: formattedData.category,
+    subcategories: formattedData.subcategories,
+    tech: formattedData.tech,
+    shortDescription: formattedData.shortDescription,
+    longDescription: formattedData.longDescription,
+    yearJoined: formattedData.yearJoinedISO,
+    websiteUrl: formattedData.websiteUrl,
+    youtubeUrl: formattedData.youtubeEmbedUrl,
+    githubUrl: formattedData.githubUrl,
+    xUrl: formattedData.xUrl,
+    createdOn: timestamps.createdOn.toISOString(),
+    updatedOn: timestamps.updatedOn.toISOString(),
+    publishedOn: timestamps.publishedOn.toISOString(),
+  })
+}

src/app/ecosystem-explorer/project-form/services/github/utils/pathUtils.ts → src/app/ecosystem-explorer/project-form/actions/getFolderPaths.ts

@@ -1,6 +1,6 @@
-import { z } from 'zod'
+'use server'
 
-import { ECOSYSTEM_PROJECTS_DIRECTORY_PATH } from '@/constants/paths'
+import { z } from 'zod'
 
 import configJson from '@/data/cmsConfigSchema.json'
 
@@ -9,12 +9,11 @@ const pathConfigSchema = z.object({
   public_folder: z.string(),
 })
 
-export function getFolderPaths() {
+export async function getFolderPaths() {
   const { media_folder, public_folder } = pathConfigSchema.parse(configJson)
 
   return {
-    mediaFolder: media_folder,
-    publicFolder: public_folder,
-    ecosystemFolder: ECOSYSTEM_PROJECTS_DIRECTORY_PATH,
+    publicAssetsFolder: media_folder, // public/assets/images
+    assetsFolder: public_folder, // assets/images
   } as const
 }

src/app/ecosystem-explorer/project-form/actions/submitProjectToGithub.ts

@@ -1,115 +1,114 @@
 'use server'
 
-import slugify from 'slugify'
+import { ECOSYSTEM_PROJECTS_DIRECTORY_PATH } from '@/constants/paths'
 
 import { getTodayISO } from '@/utils/dateUtils'
-import { encrypt } from '@/utils/encryption'
 
 import { createBlob } from '../services/github/api/createBlob'
 import { createCommit } from '../services/github/api/createCommit'
 import { createPR } from '../services/github/api/createPr'
 import { createTreeBlobs } from '../services/github/api/createTreeBlobs'
 import { getLatestCommitOnMain } from '../services/github/api/getLatestCommitOnMain'
-import type { AllowedImageFormats } from '../services/github/utils/fileUtils'
-import {
-  getMarkdownTemplate,
-  type MarkdownTemplateParams,
-} from '../services/github/utils/markdownUtils'
-import { getFolderPaths } from '../services/github/utils/pathUtils'
-
-export type ProjectData = {
-  name: string
-  email: string
-  timestampISO: string
-  yearJoinedISO: string
-  projectName: MarkdownTemplateParams['projectName']
-  category: MarkdownTemplateParams['category']
-  subcategories: MarkdownTemplateParams['subcategories']
-  tech: MarkdownTemplateParams['tech']
-  shortDescription: MarkdownTemplateParams['shortDescription']
-  longDescription: MarkdownTemplateParams['longDescription']
-  websiteUrl: MarkdownTemplateParams['websiteUrl']
-  youtubeEmbedUrl: MarkdownTemplateParams['youtubeUrl']
-  githubUrl: MarkdownTemplateParams['githubUrl']
-  xUrl: MarkdownTemplateParams['xUrl']
-}
-
-type ProjectLogo = {
-  base64: string
-  format: AllowedImageFormats
-}
+import type { FormattedLogo } from '../utils/fileUtils'
 
 type SubmitProjectParams = {
-  data: ProjectData
-  logo: ProjectLogo
+  slug: string
+  markdownTemplate: string
+  logo?: {
+    path: string
+    base64: FormattedLogo['base64']
+  }
 }
 
 export async function submitProjectToGithub({
-  data,
+  slug,
+  markdownTemplate,
   logo,
 }: SubmitProjectParams) {
-  const { mediaFolder, ecosystemFolder, publicFolder } = getFolderPaths()
   const todayISO = getTodayISO()
-
-  const slug = slugify(data.projectName, {
-    lower: true,
-    strict: true,
-  })
-
   const branchName = `ecosystem-submission/${slug}-${todayISO}`
 
-  const markdownTemplate = getMarkdownTemplate({
-    encryptedEmail: encrypt(data.email),
-    encryptedName: encrypt(data.name),
-    projectName: data.projectName,
-    imagePath: `${publicFolder}/${slug}.${logo.format}`,
-    category: data.category,
-    subcategories: data.subcategories,
-    tech: data.tech,
-    shortDescription: data.shortDescription,
-    longDescription: data.longDescription,
-    yearJoined: data.yearJoinedISO,
-    websiteUrl: data.websiteUrl,
-    youtubeUrl: data.youtubeEmbedUrl,
-    githubUrl: data.githubUrl,
-    xUrl: data.xUrl,
-    createdOn: data.timestampISO,
-    updatedOn: data.timestampISO,
-    publishedOn: data.timestampISO,
-  })
+  const markdownBlob = await createBlob(markdownTemplate, 'utf-8')
+  const treeBlobs = [
+    {
+      path: `${ECOSYSTEM_PROJECTS_DIRECTORY_PATH}/${slug}.md`,
+      sha: markdownBlob.sha,
+    },
+  ]
+
+  if (logo) {
+    const imageBlob = await createBlob(logo.base64, 'base64')
+    treeBlobs.push({
+      sha: imageBlob.sha,
+      path: logo.path,
+    })
+  }
 
   const latestCommitOnMain = await getLatestCommitOnMain()
 
-  const [markdownBlob, imageBlob] = await Promise.all([
-    createBlob(markdownTemplate, 'utf-8'),
-    createBlob(logo.base64, 'base64'),
-  ])
-
   const newTree = await createTreeBlobs({
     baseTreeSha: latestCommitOnMain.commit.tree.sha,
-    newBlobs: [
-      {
-        path: `${mediaFolder}/${slug}.${logo.format}`,
-        sha: imageBlob.sha,
-      },
-      {
-        path: `${ecosystemFolder}/${slug}.md`,
-        sha: markdownBlob.sha,
-      },
-    ],
+    newBlobs: treeBlobs,
   })
 
   const newCommit = await createCommit({
     parentCommitSha: latestCommitOnMain.sha,
     treeSha: newTree.sha,
-    message: `Ecosystem Project Form Submission: ${data.projectName}`,
+    message: `Ecosystem Project Form Submission: ${slug}`,
   })
 
   const newPullRequest = await createPR({
-    title: `Ecosystem Project Form Submission: ${data.projectName}`,
+    title: `Ecosystem Project Form Submission: ${slug}`,
     commitSha: newCommit.sha,
     branchName,
   })
 
   return newPullRequest
 }
+
+// const markdownTemplate = getEcosystemMarkdownTemplate({
+//   encryptedEmail: encrypt(data.email),
+//   encryptedName: encrypt(data.name),
+//   projectName: projectName,
+//   imagePath: `${assetsFolder}/${slug}.${formattedLogo.format}`,
+//   category: data.category,
+//   subcategories: data.subcategories,
+//   tech: data.tech,
+//   shortDescription: data.shortDescription,
+//   longDescription: data.longDescription,
+//   yearJoined: data.yearJoinedISO,
+//   websiteUrl: data.websiteUrl,
+//   youtubeUrl: data.youtubeEmbedUrl,
+//   githubUrl: data.githubUrl,
+//   xUrl: data.xUrl,
+//   createdOn: data.timestampISO,
+//   updatedOn: data.timestampISO,
+//   publishedOn: data.timestampISO,
+// })
+
+// import {
+//   getEcosystemMarkdownTemplate,
+//   type MarkdownTemplateParams,
+// } from '../utils/getEcosystemMarkdownTemplate'
+
+// type ProjectData = {
+//   name: string
+//   email: string
+//   timestampISO: string
+//   yearJoinedISO: string
+//   projectName: MarkdownTemplateParams['projectName']
+//   category: MarkdownTemplateParams['category']
+//   subcategories: MarkdownTemplateParams['subcategories']
+//   tech: MarkdownTemplateParams['tech']
+//   shortDescription: MarkdownTemplateParams['shortDescription']
+//   longDescription: MarkdownTemplateParams['longDescription']
+//   websiteUrl: MarkdownTemplateParams['websiteUrl']
+//   youtubeEmbedUrl: MarkdownTemplateParams['youtubeUrl']
+//   githubUrl: MarkdownTemplateParams['githubUrl']
+//   xUrl: MarkdownTemplateParams['xUrl']
+// }
+
+// type ProjectLogo = {
+//   base64: string
+//   format: AllowedImageFormats
+// }

src/app/ecosystem-explorer/project-form/components/CreateForm.tsx

@@ -13,16 +13,13 @@ export function CreateForm() {
     getInitialFormData(),
   )
 
-  const { createProject } = useSubmitEcosystemProjectForm()
+  const { create } = useSubmitEcosystemProjectForm()
 
   if (!initialFormData) {
     return
   }
 
   return (
-    <EcosystemProjectForm
-      initial={{ formData: initialFormData }}
-      onSubmit={createProject}
-    />
+    <EcosystemProjectForm initialFormData={initialFormData} onSubmit={create} />
   )
 }