Changelog (#399)

* feat: add changelog feature and update site navigation

- Introduced a new Changelog page with pagination and detailed entry views.
- Added components for displaying changelog entries, pagination, and entry details.
- Updated site navigation to include a link to the new Changelog page.
- Enhanced localization for changelog-related texts in marketing.json.

* refactor: enhance Changelog page layout and entry display

- Increased the number of changelog entries displayed per page from 2 to 20 for better visibility.
- Improved the layout of the Changelog page by adjusting the container styles and removing unnecessary divs.
- Updated the ChangelogEntry component to enhance the visual presentation of entries, including a new date badge with an icon.
- Refined the CSS styles for Markdoc headings to improve typography and spacing.

* refactor: enhance Changelog page functionality and layout

- Increased the number of changelog entries displayed per page from 20 to 50 for improved user experience.
- Updated ChangelogEntry component to make the highlight prop optional and refined the layout for better visual clarity.
- Adjusted styles in ChangelogHeader and ChangelogPagination components for a more cohesive design.
- Removed unnecessary order fields from changelog markdown files to streamline content management.

* feat: enhance Changelog entry navigation and data loading

- Refactored ChangelogEntry page to load previous and next entries for improved navigation.
- Introduced ChangelogNavigation component to facilitate navigation between changelog entries.
- Updated ChangelogDetail component to display navigation links and entry details.
- Enhanced data fetching logic to retrieve all changelog entries alongside the current entry.
- Added localization keys for navigation text in marketing.json.

* Update package dependencies and enhance documentation layout

- Upgraded various packages including @turbo/gen and turbo to version 2.6.0, and react-hook-form to version 7.66.0.
- Updated lucide-react to version 0.552.0 across multiple packages.
- Refactored documentation layout components for improved styling and structure.
- Removed deprecated loading components and adjusted navigation elements for better user experience.
- Added placeholder notes in changelog entries for clarity.

packages/cms/keystatic/src/keystatic-client.ts

@@ -290,7 +290,7 @@ class KeystaticClient implements CmsClient {
       publishedAt: publishedAt.toISOString(),
       content: html as string,
       image: item.entry.image ?? undefined,
-      status: item.entry.status,
+      status: item.entry.status as Cms.ContentItemStatus,
       collapsible: item.entry.collapsible,
       collapsed: item.entry.collapsed,
       categories:
@@ -344,7 +344,7 @@ class KeystaticClient implements CmsClient {
       publishedAt: publishedAt.toISOString(),
       content: html as string,
       image: item.entry.image ?? undefined,
-      status: item.entry.status,
+      status: item.entry.status as Cms.ContentItemStatus,
       categories:
         (item.entry.categories ?? []).map((item) => {
           return {

packages/cms/keystatic/src/keystatic.config.ts

@@ -43,6 +43,10 @@ export type DocumentationEntryProps = Entry<
   (typeof keyStaticConfig)['collections']['documentation']
 >;
 
+export type ChangelogEntryProps = Entry<
+  (typeof keyStaticConfig)['collections']['changelog']
+>;
+
 function createKeyStaticConfig(path = '') {
   if (path && !path.endsWith('/')) {
     path += '/';
@@ -62,6 +66,19 @@ function createKeyStaticConfig(path = '') {
 }
 
 function getKeystaticCollections(path: string) {
+  const statusOptions = [
+    { label: 'Draft', value: 'draft' },
+    { label: 'Published', value: 'published' },
+    { label: 'Review', value: 'review' },
+    { label: 'Pending', value: 'pending' },
+  ];
+
+  const imageField = fields.image({
+    label: 'Image',
+    directory: 'public/site/images',
+    publicPath: '/site/images',
+  });
+
   return {
     posts: collection({
       label: 'Posts',
@@ -74,11 +91,7 @@ function getKeystaticCollections(path: string) {
           label: 'Label',
           validation: { isRequired: false },
         }),
-        image: fields.image({
-          label: 'Image',
-          directory: 'public/site/images',
-          publicPath: '/site/images',
-        }),
+        image: imageField,
         categories: fields.array(fields.text({ label: 'Category' })),
         tags: fields.array(fields.text({ label: 'Tag' })),
         description: fields.text({ label: 'Description' }),
@@ -93,12 +106,7 @@ function getKeystaticCollections(path: string) {
         status: fields.select({
           defaultValue: 'draft',
           label: 'Status',
-          options: [
-            { label: 'Draft', value: 'draft' },
-            { label: 'Published', value: 'published' },
-            { label: 'Review', value: 'review' },
-            { label: 'Pending', value: 'pending' },
-          ],
+          options: statusOptions,
         }),
       },
     }),
@@ -114,11 +122,7 @@ function getKeystaticCollections(path: string) {
           validation: { isRequired: false },
         }),
         content: getContentField(),
-        image: fields.image({
-          label: 'Image',
-          directory: 'public/site/images',
-          publicPath: '/site/images',
-        }),
+        image: imageField,
         description: fields.text({ label: 'Description' }),
         publishedAt: fields.date({ label: 'Published At' }),
         order: fields.number({ label: 'Order' }),
@@ -132,12 +136,7 @@ function getKeystaticCollections(path: string) {
         status: fields.select({
           defaultValue: 'draft',
           label: 'Status',
-          options: [
-            { label: 'Draft', value: 'draft' },
-            { label: 'Published', value: 'published' },
-            { label: 'Review', value: 'review' },
-            { label: 'Pending', value: 'pending' },
-          ],
+          options: statusOptions,
         }),
         collapsible: fields.checkbox({
           label: 'Collapsible',
@@ -149,5 +148,34 @@ function getKeystaticCollections(path: string) {
         }),
       },
     }),
+    changelog: collection({
+      label: 'Changelog',
+      slugField: 'title',
+      path: `${path}changelog/*`,
+      format: { contentField: 'content' },
+      schema: {
+        title: fields.slug({ name: { label: 'Title' } }),
+        description: fields.text({
+          label: 'Description',
+          multiline: true,
+        }),
+        image: imageField,
+        categories: fields.array(fields.text({ label: 'Category' })),
+        tags: fields.array(fields.text({ label: 'Tag' })),
+        publishedAt: fields.date({ label: 'Published At' }),
+        parent: fields.relationship({
+          label: 'Parent',
+          collection: 'changelog',
+        }),
+        language: fields.text({ label: 'Language' }),
+        order: fields.number({ label: 'Order' }),
+        content: getContentField(),
+        status: fields.select({
+          defaultValue: 'draft',
+          label: 'Status',
+          options: statusOptions,
+        }),
+      },
+    }),
   };
 }