includio-cms 0.0.30 → 0.0.32

package/dist/admin/client/entry/entry-page.svelte

@@ -13,6 +13,8 @@
 	{#await entryQuery}
 		Loading...
 	{:then entry}
-		<Entry {entry} />
+		{#if entry}
+			<Entry {entry} />
+		{/if}
 	{/await}
 {/key}

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

@@ -13,11 +13,7 @@
 	import FileField from './file-field.svelte';
 	import NumberField from './number-field.svelte';
 	import SeoField from './seo-field.svelte';
-	import UrlField from './url-field.svelte';
 	import RelationField from './relation-field.svelte';
-	import { urlFieldDataSchema } from '../../../schemas/field/url.js';
-	import { getAtPath, setAtPath } from '../../utils/objectPath.js';
-	import { onMount } from 'svelte';
 	import UrlFieldWrapper from './url-field-wrapper.svelte';
 
 	type Props = {

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/admin/components/fields/url-field-wrapper.svelte

@@ -42,12 +42,6 @@
 	let fieldValid = $state(false);
 </script>
 
-<svelte:boundary>
-	{#snippet pending()}
-		Loading...
-	{/snippet}
-
-	{#if fieldValid}
-		<UrlFieldComponent {form} {field} path={path as FormPathLeaves<T, UrlFieldData>} {...props} />
-	{/if}
-</svelte:boundary>
+{#if fieldValid}
+	<UrlFieldComponent {form} {field} path={path as FormPathLeaves<T, UrlFieldData>} {...props} />
+{/if}

package/dist/admin/components/media/media-library.svelte

@@ -23,16 +23,15 @@
 	let { selected = $bindable([]), multiple = false, accept }: Props = $props();
 
 	let currentFile: MediaFile | null = $state(null);
-
 	let selectedFolder = $state<string | null>(null);
 
-	const filesQuery = $derived(
-		remotes.getMediaFiles({
-			data: { folderId: selectedFolder || undefined, mimeTypes: accept?.split(',') }
-		})
-	);
+	async function fetchFiles(folderId: string | null, accept: string | undefined) {
+		return await remotes.getMediaFiles({
+			data: { folderId: folderId || undefined, mimeTypes: accept?.split(',') }
+		});
+	}
 
-	let files = $derived(filesQuery.current);
+	let files = $derived(await fetchFiles(selectedFolder, accept));
 
 	let folders = $derived(await remotes.getMediaFolders());
 
@@ -40,7 +39,7 @@
 		if (currentFile) {
 			await remotes.deleteMediaFile(currentFile.id);
 			toast.success('File deleted');
-			filesQuery.refresh();
+			files = await fetchFiles(selectedFolder, accept);
 			currentFile = null;
 		}
 	}
@@ -48,18 +47,8 @@
 	onMount(() => {
 		if (Array.isArray(selected)) {
 			selected = selected.filter((id) => !id.startsWith('/uploads'));
-			if (files) {
-				currentFile = files.find((file) => file.id === selected[0]) || null;
-			}
 		} else if (typeof selected === 'string') {
 			selected = selected.startsWith('/uploads') ? '' : selected;
-			if (files) {
-				currentFile = files.find((file) => file.id === selected) || null;
-			}
-		} else {
-			if (files) {
-				currentFile = files[0];
-			}
 		}
 	});
 </script>
@@ -94,52 +83,44 @@
 		</div>
 
 		<div>
-			{#await filesQuery}
-				<div class="text-center text-gray-500">Loading...</div>
-			{:then files}
-				{#if !files.length}
-					<div class="text-center text-gray-500">No files found</div>
-				{/if}
-
-				<div class="grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] gap-2">
-					{#each files as file}
-						<button
-							type="button"
-							class="block aspect-square overflow-hidden rounded-2xl border p-1 {selected.includes(
-								file.id
-							)
-								? 'outline-primary outline-4'
-								: ''}"
-							onclick={() => {
-								currentFile = file;
-								if (multiple && Array.isArray(selected)) {
-									selected = selected.includes(file.id)
-										? selected.filter((id) => id !== file.id)
-										: [...selected, file.id];
-								} else {
-									selected = file.id;
-								}
-							}}
-						>
-							{#if file.type === 'image'}
-								<img
-									class="pointer-events-none h-full w-full object-contain"
-									src={file.url}
-									alt={file.name}
-								/>
-							{:else if file.type === 'video'}
-								<img
-									class="pointer-events-none h-full w-full object-contain"
-									src={file.thumbnailUrl}
-									alt={file.name}
-								/>
-							{:else}
-								<Pdf class="pointer-events-none h-full w-full  object-contain" />
-							{/if}
-						</button>
-					{/each}
-				</div>
-			{/await}
+			<div class="grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] gap-2">
+				{#each files as file}
+					<button
+						type="button"
+						class="block aspect-square overflow-hidden rounded-2xl border p-1 {selected.includes(
+							file.id
+						)
+							? 'outline-primary outline-4'
+							: ''}"
+						onclick={() => {
+							currentFile = file;
+							if (multiple && Array.isArray(selected)) {
+								selected = selected.includes(file.id)
+									? selected.filter((id) => id !== file.id)
+									: [...selected, file.id];
+							} else {
+								selected = file.id;
+							}
+						}}
+					>
+						{#if file.type === 'image'}
+							<img
+								class="pointer-events-none h-full w-full object-contain"
+								src={file.url}
+								alt={file.name}
+							/>
+						{:else if file.type === 'video'}
+							<img
+								class="pointer-events-none h-full w-full object-contain"
+								src={file.thumbnailUrl}
+								alt={file.name}
+							/>
+						{:else}
+							<Pdf class="pointer-events-none h-full w-full  object-contain" />
+						{/if}
+					</button>
+				{/each}
+			</div>
 		</div>
 	</div>
 
@@ -147,8 +128,12 @@
 		<Item.Content class="h-full">
 			{#if currentFile}
 				<div class="flex items-center justify-end border-b px-6 py-3">
-					<Button size="sm" class="mr-2.5" variant="destructive" onclick={deleteFileCommand}
-						>Delete</Button
+					<Button
+						type="button"
+						size="sm"
+						class="mr-2.5"
+						variant="destructive"
+						onclick={deleteFileCommand}>Delete</Button
 					>
 				</div>
 				<div class="space-y-6 p-6">

package/dist/components/ui/dialog/dialog-content.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from "bits-ui";
-	import XIcon from "@lucide/svelte/icons/x";
-	import type { Snippet } from "svelte";
-	import * as Dialog from "./index.js";
-	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import XIcon from '@lucide/svelte/icons/x';
+	import type { Snippet } from 'svelte';
+	import * as Dialog from './index.js';
+	import { cn, type WithoutChildrenOrChild } from '../../../utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -25,7 +25,7 @@
 		bind:ref
 		data-slot="dialog-content"
 		class={cn(
-			"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+			'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
 			className
 		)}
 		{...restProps}
@@ -33,7 +33,7 @@
 		{@render children?.()}
 		{#if showCloseButton}
 			<DialogPrimitive.Close
-				class="ring-offset-background focus:ring-ring rounded-xs focus:outline-hidden absolute end-4 top-4 opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+				class="ring-offset-background focus:ring-ring absolute end-4 top-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
 			>
 				<XIcon />
 				<span class="sr-only">Close</span>

package/dist/components/ui/dialog/dialog-content.svelte.d.ts

@@ -1,6 +1,6 @@
-import { Dialog as DialogPrimitive } from "bits-ui";
-import type { Snippet } from "svelte";
-import { type WithoutChildrenOrChild } from "../../../utils.js";
+import { Dialog as DialogPrimitive } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import { type WithoutChildrenOrChild } from '../../../utils.js';
 type $$ComponentProps = WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
     portalProps?: DialogPrimitive.PortalProps;
     children: Snippet;

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.30",
+	"version": "0.0.32",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -144,7 +144,8 @@
 		"typescript": "^5.0.0",
 		"typescript-eslint": "^8.20.0",
 		"vite": "^7.0.4",
-		"vitest": "^3.2.3"
+		"vitest": "^3.2.3",
+		"drizzle-orm": "^0.40.0"
 	},
 	"keywords": [
 		"svelte"
@@ -153,21 +154,17 @@
 		"@inlang/paraglide-js": "^2.0.0",
 		"@internationalized/date": "^3.8.2",
 		"@lucide/svelte": "^0.544.0",
-		"@node-rs/argon2": "^2.0.2",
 		"@oslojs/crypto": "^1.0.1",
 		"@oslojs/encoding": "^1.1.0",
 		"@tabler/icons-svelte": "^3.34.0",
-		"@tanstack/svelte-query": "^5.82.0",
-		"@tanstack/svelte-query-devtools": "^5.84.0",
 		"@tanstack/table-core": "^8.21.3",
 		"@tiptap/core": "^3.4.4",
 		"@tiptap/extension-bubble-menu": "^3.4.4",
 		"@tiptap/pm": "^3.4.4",
 		"@tiptap/starter-kit": "^3.4.4",
 		"arctic": "^3.7.0",
-		"bits-ui": "^2.11.0",
+		"bits-ui": "^2.11.5",
 		"dotenv": "^16.5.0",
-		"drizzle-orm": "^0.40.0",
 		"fast-glob": "^3.3.3",
 		"fluent-ffmpeg": "^2.1.3",
 		"mode-watcher": "^1.0.8",