includio-cms 0.0.31 → 0.0.32

package/dist/admin/components/fields/relation-field.svelte

@@ -14,13 +14,14 @@
 	import Button, { buttonVariants } from '../../../components/ui/button/button.svelte';
 	import { getCollectionEntryLabel } from '../../utils/entryLabel.js';
 	import { getContentLanguage } from '../../state/content-language.svelte.js';
-	import { tick } from 'svelte';
+	import { onMount, tick } from 'svelte';
 	import { useId } from 'bits-ui';
 	import * as Popover from '../../../components/ui/popover/index.js';
 	import * as Command from '../../../components/ui/command/index.js';
 	import { cn } from '../../../utils.js';
 	import Selector from '@tabler/icons-svelte/icons/selector';
 	import Check from '@tabler/icons-svelte/icons/check';
+	import type { CollectionConfigWithType } from '../../../types/collections.js';
 
 	const remotes = getRemotes();
 
@@ -32,19 +33,32 @@
 
 	let { field, form, path, ...props }: Props = $props();
 
-	let collectionConfig = await remotes.getCollection(field.collection);
-
 	const { value } = formFieldProxy(form, path) satisfies FormFieldProxy<RelationFieldData>;
 
-	async function getOptionsQuery(): Promise<{ label: string; value: string }[]> {
+	let options = $state<{ label: string; value: string }[]>([]);
+	let collectionConfig = $state<CollectionConfigWithType | null>(null);
+
+	async function getCollectionConfig() {
+		collectionConfig = await remotes.getCollection(field.collection);
+
+		return collectionConfig;
+	}
+
+	async function getOptionsQuery(config: CollectionConfigWithType) {
 		const entries = await remotes.getRawCollectionEntries(field.collection);
 
-		return entries.map((entry) => ({
-			label: getCollectionEntryLabel(entry, collectionConfig, getContentLanguage()),
+		options = entries.map((entry) => ({
+			label: getCollectionEntryLabel(entry, config, getContentLanguage()),
 			value: entry.id
 		}));
 	}
 
+	onMount(() => {
+		getCollectionConfig().then((config) => {
+			getOptionsQuery(config);
+		});
+	});
+
 	let open = $state(false);
 
 	// We want to refocus the trigger button when the user selects
@@ -59,7 +73,7 @@
 	const triggerId = useId();
 </script>
 
-{#await getOptionsQuery() then options}
+{#if options.length > 0 && collectionConfig}
 	<Popover.Root bind:open>
 		<Popover.Trigger
 			id={triggerId}
@@ -102,4 +116,4 @@
 			</Command.Root>
 		</Popover.Content>
 	</Popover.Root>
-{/await}
+{/if}

package/dist/admin/components/fields/relation-field.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { RelationFieldData, RelationField } from '../../../types/fields.js';
 import { type FormPathLeaves, type SuperForm } from 'sveltekit-superforms';
-declare function $$render<T extends Record<string, unknown>>(): Promise<{
+declare function $$render<T extends Record<string, unknown>>(): {
     props: {
         field: RelationField;
         form: SuperForm<T>;
@@ -10,13 +10,13 @@ declare function $$render<T extends Record<string, unknown>>(): Promise<{
     bindings: "";
     slots: {};
     events: {};
-}>;
+};
 declare class __sveltets_Render<T extends Record<string, unknown>> {
-    props(): Awaited<ReturnType<typeof $$render<T>>>['props'];
-    events(): Awaited<ReturnType<typeof $$render<T>>>['events'];
-    slots(): Awaited<ReturnType<typeof $$render<T>>>['slots'];
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "";
-    exports(): Promise<{}>;
+    exports(): {};
 }
 interface $$IsomorphicComponent {
     new <T extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {

package/dist/admin/components/fields/seo-field.svelte

@@ -13,6 +13,7 @@
 	import { joinPath } from '../../utils/objectPath.js';
 	import type {
 		Field,
+		ImageField,
 		ObjectFieldData,
 		SeoField,
 		SeoFieldData,
@@ -29,8 +30,6 @@
 
 	let { field, form, path, ...props }: Props = $props();
 
-	// const { value } = formFieldProxy(form, path) satisfies FormFieldProxy<SeoFieldData | undefined>;
-
 	const slugField: TextField = {
 		type: 'text',
 		slug: 'slug',
@@ -38,6 +37,13 @@
 		required: true
 	};
 
+	const canonicalUrlField: TextField = {
+		type: 'text',
+		slug: 'canonicalUrl',
+		label: 'Canonical Url',
+		required: false
+	};
+
 	const titleField: TextField = {
 		type: 'text',
 		slug: 'title',
@@ -53,7 +59,38 @@
 		multiline: true
 	};
 
-	const fields: Field[] = [slugField, titleField, descriptionField];
+	const keyWordsField: TextField = {
+		type: 'text',
+		slug: 'keywords',
+		label: 'Keywords',
+		required: false,
+		multiline: true
+	};
+
+	const ogImageField: ImageField = {
+		type: 'image',
+		slug: 'ogImage',
+		label: 'Open Graph Image',
+		required: false
+	};
+
+	const customCodeField: TextField = {
+		type: 'text',
+		slug: 'customCode',
+		label: 'Custom Code',
+		required: false,
+		multiline: true
+	};
+
+	const fields: Field[] = [
+		slugField,
+		canonicalUrlField,
+		titleField,
+		descriptionField,
+		keyWordsField,
+		ogImageField,
+		customCodeField
+	];
 </script>
 
 <Item.Root variant="outline">

package/dist/core/fields/fieldSchemaToTs.js

@@ -87,8 +87,12 @@ export function generateZodSchemaFromField(field, languages, options = {
         case 'seo': {
             return z.object({
                 slug: z.object(Object.fromEntries(languages.map((lang) => [lang, z.string()]))),
+                canonicalUrl: z.object(Object.fromEntries(languages.map((lang) => [lang, z.string().optional()]))),
                 title: z.object(Object.fromEntries(languages.map((lang) => [lang, z.string()]))),
-                description: z.object(Object.fromEntries(languages.map((lang) => [lang, z.string()])))
+                description: z.object(Object.fromEntries(languages.map((lang) => [lang, z.string()]))),
+                keywords: z.object(Object.fromEntries(languages.map((lang) => [lang, z.string().optional()]))),
+                ogImage: z.string(),
+                customCode: z.object(Object.fromEntries(languages.map((lang) => [lang, z.string().optional()])))
             });
         }
         case 'url': {

package/dist/core/server/generator/fields.js

@@ -47,8 +47,12 @@ function getFieldTypeAsString(field) {
         case 'seo':
             return `{
 				slug?: string;
+				canonicalUrl?: string;
 				title?: string;
 				description?: string;
+				ogImage?: string;
+				keywords?: string;
+				customCode?: string;
 			}`;
         case 'url':
             return 'string';
@@ -58,6 +62,6 @@ function getFieldTypeAsString(field) {
 }
 export function generateTsTypeFromFields(fields) {
     return `{
-    ${fields.map((f) => `  ${f.slug}${f.required ? '' : '?'}: ${getFieldTypeAsString(f)}`).join(';\n')};
+    ${fields.map((f) => `  ${f.slug}${f.required || f.type === 'seo' ? '' : '?'}: ${getFieldTypeAsString(f)}`).join(';\n')};
   }`;
 }

package/dist/sveltekit/components/image.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
 	import type { MediaFile } from '../../types/media.js';
+	import type { HTMLImgAttributes } from 'svelte/elements';
 
-	type Props = {
-		class?: string;
+	type Props = HTMLImgAttributes & {
 		data: MediaFile;
 	};
 
-	let { class: className = undefined, data }: Props = $props();
+	let { class: className = undefined, data, ...restProps }: Props = $props();
 </script>
 
 <img
@@ -16,4 +16,5 @@
 	width={data.width}
 	height={data.height}
 	loading="lazy"
+	{...restProps}
 />

package/dist/sveltekit/components/image.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { MediaFile } from '../../types/media.js';
-type Props = {
-    class?: string;
+import type { HTMLImgAttributes } from 'svelte/elements';
+type Props = HTMLImgAttributes & {
     data: MediaFile;
 };
 declare const Image: import("svelte").Component<Props, {}, "">;

package/dist/sveltekit/components/seo.svelte

@@ -1,10 +1,7 @@
 <script lang="ts">
-	type Props = {
-		title?: string;
-		description?: string;
-	};
+	import type { SeoFieldData } from '../../types/fields.js';
 
-	let { title, description }: Props = $props();
+	let { title, description, keywords, ogImage, customCode, canonicalUrl }: SeoFieldData = $props();
 </script>
 
 <svelte:head>
@@ -15,4 +12,23 @@
 	{#if description}
 		<meta name="description" content={description} />
 	{/if}
+	{#if keywords}
+		<meta name="keywords" content={keywords} />
+	{/if}
+	{#if canonicalUrl}
+		<link rel="canonical" href={canonicalUrl} />
+	{/if}
+	{#if title}
+		<meta property="og:title" content={title} />
+	{/if}
+	{#if description}
+		<meta property="og:description" content={description} />
+	{/if}
+	{#if ogImage}
+		<meta property="og:image" content={ogImage} />
+		<meta name="twitter:card" content="summary_large_image" />
+	{/if}
+	{#if customCode}
+		{@html customCode}
+	{/if}
 </svelte:head>

package/dist/sveltekit/components/seo.svelte.d.ts

@@ -1,7 +1,4 @@
-type Props = {
-    title?: string;
-    description?: string;
-};
-declare const Seo: import("svelte").Component<Props, {}, "">;
+import type { SeoFieldData } from '../../types/fields.js';
+declare const Seo: import("svelte").Component<SeoFieldData, {}, "">;
 type Seo = ReturnType<typeof Seo>;
 export default Seo;

package/dist/types/fields.d.ts

@@ -122,9 +122,13 @@ export interface SeoField extends BaseField {
     type: 'seo';
 }
 export interface SeoFieldData {
-    slug: Record<string, string>;
-    title: Record<string, string>;
-    description: Record<string, string>;
+    slug: string;
+    canonicalUrl?: string;
+    title: string;
+    description?: string;
+    ogImage?: string;
+    keywords?: string;
+    customCode?: string;
 }
 export interface UrlField extends BaseField {
     type: 'url';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "includio-cms",
-	"version": "0.0.31",
+	"version": "0.0.32",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",