feat(core): support dynamic function and field placeholders in collection path (#340)

.changeset/configurable-collection-path.md

@@ -0,0 +1,5 @@
+---
+'@keystatic/core': minor
+---
+
+Support configurable collection paths via dynamic functions and field placeholders (e.g. `path: ({ locale }) => \`src/content/blog/${locale}/*\`` or `path: 'src/content/blog/{locale}/*'`)

packages/keystatic/src/app/CollectionPage.tsx

@@ -54,9 +54,10 @@ import {
   getCollectionFormat,
   getCollectionItemPath,
   getCollectionPath,
+  getCollectionPathInfo,
+  getSlugFieldSlug,
   getEntriesInCollectionWithTreeKey,
   getEntryDataFilepath,
-  getSlugGlobForCollection,
   isLocalConfig,
 } from './utils';
 import { notFound } from './not-found';
@@ -356,7 +357,7 @@ function CollectionTable(
           ] as const;
         })
       );
-      const glob = getSlugGlobForCollection(props.config, props.collection);
+      const pathInfo = getCollectionPathInfo(props.config, props.collection);
       const rootSchema = { kind: 'object' as const, fields: collection.schema };
       const parsedEntries = new Map<string, Record<string, unknown>>();
       for (const [slug, dataFile] of entries) {
@@ -385,8 +386,8 @@ function CollectionTable(
                     );
                   }
                   return schema.reader.parseWithSlug(value, {
-                    slug,
-                    glob,
+                    slug: getSlugFieldSlug(pathInfo, slug),
+                    glob: pathInfo.glob,
                   });
                 }
               }

packages/keystatic/src/app/ItemPage.tsx

@@ -76,6 +76,7 @@ import {
   getCollection,
   getCollectionFormat,
   getCollectionItemPath,
+  getCollectionPathInfo,
   getRepoUrl,
   getSlugFromState,
   isGitHubConfig,
@@ -148,7 +149,7 @@ function ItemPageInner(
     : undefined;
   const { push, replace } = router;
 
-  const slugInfo = useSlugFieldInfo(collection, itemSlug);
+  const slugInfo = useSlugFieldInfo(collection, itemSlug, props.state);
 
   const [deleteResult, deleteItem, resetDeleteItem] = useDeleteItem({
     initialFiles: props.initialFiles,
@@ -198,10 +199,15 @@ function ItemPageInner(
   });
 
   const onPaste = useEventCallback(async () => {
-    const entry = await getPastedEntry(formatInfo, collectionConfig.schema, {
-      field: collectionConfig.slugField,
-      slug: getSlugFromState(collectionConfig, props.state),
-    });
+    const entry = await getPastedEntry(
+      formatInfo,
+      collectionConfig.schema,
+      {
+        field: collectionConfig.slugField,
+        slug: getSlugFromState(collectionConfig, props.state),
+      },
+      getCollectionPathInfo(config, collection)
+    );
     if (entry) {
       setValueToPreviewProps(entry, props.previewProps);
       toastQueue.positive('Entry pasted', {
@@ -418,6 +424,7 @@ function LocalItemPage(
     schema,
     state,
     slugField: collectionConfig.slugField,
+    path: collectionConfig.path,
   });
 
   const slug = getSlugFromState(collectionConfig, state);
@@ -503,6 +510,7 @@ function CollabItemPage(props: ItemPageProps & { map: Y.Map<any> }) {
     schema,
     state,
     slugField: collectionConfig.slugField,
+    path: collectionConfig.path,
   });
 
   const futureBasePath = getCollectionItemPath(config, collection, slug);
@@ -873,6 +881,7 @@ function ItemPageOuterWrapper(props: ItemPageWrapperProps) {
             format: getCollectionFormat(props.config, props.collection),
             schema: collectionConfig.schema,
             slug: { field: collectionConfig.slugField, slug: stored.slug },
+            pathInfo: getCollectionPathInfo(props.config, props.collection),
           },
           stored.files
         );
@@ -895,6 +904,7 @@ function ItemPageOuterWrapper(props: ItemPageWrapperProps) {
     schema: collectionConfig.schema,
     format,
     slug: slugInfo,
+    pathInfo: getCollectionPathInfo(props.config, props.collection),
   });
 
   const currentBranch = useCurrentBranch();

packages/keystatic/src/app/create-item.tsx

@@ -40,6 +40,7 @@ import { useYJsValue } from './useYJsValue';
 import {
   getCollectionFormat,
   getCollectionItemPath,
+  getCollectionPathInfo,
   getSlugFromState,
   isGitHubConfig,
   useShowRestoredDraftMessage,
@@ -96,6 +97,7 @@ function CreateItemWrapper(props: {
           format,
           schema: collectionConfig.schema,
           slug: { field: collectionConfig.slugField, slug: stored.slug },
+          pathInfo: getCollectionPathInfo(props.config, props.collection),
         },
         stored.files
       );
@@ -133,8 +135,8 @@ function CreateItemWrapper(props: {
     schema: collectionConfig.schema,
     format,
     slug,
+    pathInfo: getCollectionPathInfo(props.config, props.collection),
   });
-
   const duplicateInitalState =
     isFromTemplate &&
     itemData.kind === 'loaded' &&
@@ -297,6 +299,7 @@ function CreateItemLocal(props: {
     schema,
     state,
     slugField: collectionConfig.slugField,
+    path: collectionConfig.path,
   });
   const hasCreated =
     createResult.kind === 'updated' || createResult.kind === 'loading';
@@ -446,7 +449,7 @@ function CreateItemInner(props: {
     createResult.kind === 'updated' || createResult.kind === 'loading'
       ? props.slug
       : undefined;
-  const slugInfo = useSlugFieldInfo(props.collection, currentSlug);
+  const slugInfo = useSlugFieldInfo(props.collection, currentSlug, props.state);
 
   const onCreate = async () => {
     if (createResult.kind === 'loading') return;
@@ -469,10 +472,15 @@ function CreateItemInner(props: {
   };
 
   const onPaste = async () => {
-    const entry = await getPastedEntry(formatInfo, collectionConfig.schema, {
-      field: collectionConfig.slugField,
-      slug: getSlugFromState(collectionConfig, props.state),
-    });
+    const entry = await getPastedEntry(
+      formatInfo,
+      collectionConfig.schema,
+      {
+        field: collectionConfig.slugField,
+        slug: getSlugFromState(collectionConfig, props.state),
+      },
+      getCollectionPathInfo(config, props.collection)
+    );
     if (entry) {
       setValueToPreviewProps(entry, props.previewProps);
       toastQueue.positive('Entry pasted', {

packages/keystatic/src/app/entry-clipboard.ts

@@ -3,7 +3,7 @@ import { toastQueue } from '@keystar/ui/toast';
 import { ComponentSchema } from '../form/api';
 import { serializeEntryToFiles } from './updating';
 import { parseEntry } from './useItemData';
-import { FormatInfo, getEntryDataFilepath } from './utils';
+import { CollectionPathInfo, FormatInfo, getEntryDataFilepath } from './utils';
 import * as s from 'superstruct';
 
 const keystaticEntryAttributeSchema = s.type({
@@ -22,7 +22,8 @@ function parseEntryFromHtml(
   html: string,
   format: FormatInfo,
   schema: Record<string, ComponentSchema>,
-  slugField: string | undefined
+  slugField: string | undefined,
+  pathInfo: CollectionPathInfo | undefined
 ) {
   const parsedHtml = new DOMParser().parseFromString(html, 'text/html');
   const pre = parsedHtml.querySelector('pre');
@@ -42,6 +43,7 @@ function parseEntryFromHtml(
           ? { field: slugField, slug: entryInfo.slug ?? '' }
           : undefined,
         requireFrontmatter: true,
+        pathInfo,
       },
       files
     ).initialState;
@@ -52,12 +54,20 @@ function parseEntryFromPlaintext(
   bytes: Uint8Array,
   format: FormatInfo,
   schema: Record<string, ComponentSchema>,
-  slugInfo: { field: string; slug: string } | undefined
+  slugInfo: { field: string; slug: string } | undefined,
+  pathInfo: CollectionPathInfo | undefined
 ) {
   try {
     const dirpath = slugInfo?.slug ?? 'entry';
     return parseEntry(
-      { dirpath, format, schema, slug: slugInfo, requireFrontmatter: true },
+      {
+        dirpath,
+        format,
+        schema,
+        slug: slugInfo,
+        requireFrontmatter: true,
+        pathInfo,
+      },
       new Map([[getEntryDataFilepath(dirpath, format), bytes]])
     ).initialState;
   } catch {}
@@ -66,7 +76,8 @@ function parseEntryFromPlaintext(
 export async function getPastedEntry(
   format: FormatInfo,
   schema: Record<string, ComponentSchema>,
-  slugInfo: { field: string; slug: string } | undefined
+  slugInfo: { field: string; slug: string } | undefined,
+  pathInfo?: CollectionPathInfo
 ) {
   let clipboardItems: ClipboardItem[];
   try {
@@ -88,7 +99,13 @@ export async function getPastedEntry(
     if (item.types.includes('text/html')) {
       const html = await item.getType('text/html');
       const text = await html.text();
-      const entry = parseEntryFromHtml(text, format, schema, slugInfo?.field);
+      const entry = parseEntryFromHtml(
+        text,
+        format,
+        schema,
+        slugInfo?.field,
+        pathInfo
+      );
       if (entry) {
         return entry;
       }
@@ -100,7 +117,8 @@ export async function getPastedEntry(
         new Uint8Array(text),
         format,
         schema,
-        slugInfo
+        slugInfo,
+        pathInfo
       );
       if (entry) {
         return entry;