@functionalcms/svelte-components 5.5.10 → 5.6.0

package/dist/components/blog/BlogList.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import { Gallery, type ImgType } from "flowbite-svelte";
+	import type { BlogPost } from "./Post";
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		posts: BlogPost[];
+		columns?: number;
+		gap?: number;
+		renderItem?: Snippet<[item: ImgType]>;
+	}
+	let {
+		posts,
+		columns = 2,
+		gap = 4,
+		renderItem = undefined,
+	}: Props = $props();
+
+	let gridColukmns = $derived(`grid-cols-${columns} gap-${gap} `);
+
+	function formatDate(dateString: string) {
+		const date = new Date(dateString);
+		return date.toLocaleDateString("pl-PL", {
+			year: "numeric",
+			month: "long",
+			day: "numeric",
+		});
+	}
+</script>
+
+{#snippet defaultRender(post)}
+	<article
+		class="border rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow"
+	>
+		{#if post.image}
+			<img
+				src={post.image}
+				alt={post.title}
+				class="w-full h-48 object-cover"
+			/>
+		{/if}
+
+		<div class="p-6">
+			<div class="text-sm text-gray-600 mb-2">
+				{formatDate(post.date)} · {post.author}
+			</div>
+
+			<h2 class="text-2xl font-bold mb-3">
+				<a
+					href="/blog/{post.slug}"
+					class="hover:text-blue-600 transition-colors"
+				>
+					{post.title}
+				</a>
+			</h2>
+
+			<p class="text-gray-700 mb-4">{post.description}</p>
+
+			<div class="flex flex-wrap gap-2 mb-4">
+				{#each post.tags as tag}
+					<span class="text-xs bg-gray-200 px-2 py-1 rounded"
+						>{tag}</span
+					>
+				{/each}
+			</div>
+
+			<a
+				href="/blog/{post.slug}"
+				class="text-blue-600 hover:text-blue-800 font-medium"
+			>
+				Czytaj więcej →
+			</a>
+		</div>
+	</article>
+{/snippet}
+
+<Gallery class={gridColukmns} items={posts} let:item>
+	{#snippet figure(item)}
+		{#if renderItem}
+			{@render renderItem(item)}
+		{:else}
+			{@render defaultRender(item)}
+		{/if}
+	{/snippet}
+</Gallery>

package/dist/components/blog/BlogList.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BlogListProps = typeof __propDef.props;
+export type BlogListEvents = typeof __propDef.events;
+export type BlogListSlots = typeof __propDef.slots;
+export default class BlogList extends SvelteComponentTyped<BlogListProps, BlogListEvents, BlogListSlots> {
+}
+export {};

package/dist/components/blog/BlogTagList.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { Gallery, type ImgType } from "flowbite-svelte";
+    import type { BlogPost } from "./Post";
+    import type { Snippet } from "svelte";
+    import { getTags } from "./blogService";
+
+    interface Props {
+        posts: BlogPost[];
+        renderItem?: Snippet<[item: ImgType]>;
+    }
+    let { posts, renderItem = undefined }: Props = $props();
+
+    let tags = $derived(getTags());
+    console.log(tags)
+</script>
+
+Tag list
+<!-- 
+<Gallery class={gridColukmns} items={posts} let:item>
+	{#snippet figure(item)}
+		{#if renderItem}
+			{@render renderItem(item)}
+		{:else}
+			{@render defaultRender(item)}
+		{/if}
+	{/snippet}
+</Gallery> -->

package/dist/components/blog/BlogTagList.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BlogTagListProps = typeof __propDef.props;
+export type BlogTagListEvents = typeof __propDef.events;
+export type BlogTagListSlots = typeof __propDef.slots;
+export default class BlogTagList extends SvelteComponentTyped<BlogTagListProps, BlogTagListEvents, BlogTagListSlots> {
+}
+export {};

package/dist/components/blog/Post.d.ts

@@ -0,0 +1,9 @@
+export type BlogPost = {
+    slug: string;
+    title: string;
+    description: string;
+    date: string;
+    author: string;
+    tags: string[];
+    image: string;
+};

package/dist/components/blog/Post.js

@@ -0,0 +1 @@
+export {};

package/dist/components/blog/blogService.d.ts

@@ -0,0 +1,3 @@
+import type { BlogPost } from "./Post";
+export declare const getPosts: () => Array<BlogPost>;
+export declare const getTags: () => Record<string, number>;

package/dist/components/blog/blogService.js

@@ -0,0 +1,36 @@
+export const getPosts = () => {
+    const postFiles = import.meta.glob('/src/posts/*.md', { eager: true });
+    const posts = Object.entries(postFiles).map(([path, post]) => {
+        const slug = path.split('/').pop()?.replace('.md', '') || '';
+        const { metadata } = post;
+        return {
+            slug,
+            title: metadata.title,
+            description: metadata.description,
+            date: metadata.date,
+            author: metadata.author,
+            tags: metadata.tags,
+            image: metadata.image
+        };
+    });
+    // Sort by date descending
+    posts.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+    return posts;
+};
+export const getTags = () => {
+    let posts = getPosts();
+    let tags = posts
+        .reduce((acc, post) => {
+        post
+            .tags
+            .forEach(tag => {
+            if (acc[tag] == undefined) {
+                acc[tag] = 0;
+            }
+            ;
+            acc[tag]++;
+        });
+        return acc;
+    }, {});
+    return tags;
+};

package/dist/index.d.ts

@@ -18,3 +18,7 @@ export { type Icons, SolidIcons, OutlinedIcons } from './components/icons.js';
 export { default as Icon } from './components/Icon.svelte';
 export * from "flowbite-svelte";
 export { hashString } from './utils/stringHash.js';
+export { default as BlogList } from './components/blog/BlogList.svelte';
+export { type BlogPost } from './components/blog/Post.js';
+export { type getTags } from './components/blog/blogService.js';
+export { getPosts } from './components/blog/blogService.js';

package/dist/index.js

@@ -17,3 +17,7 @@ export { SolidIcons, OutlinedIcons } from './components/icons.js';
 export { default as Icon } from './components/Icon.svelte';
 export * from "flowbite-svelte";
 export { hashString } from './utils/stringHash.js';
+export { default as BlogList } from './components/blog/BlogList.svelte';
+export {} from './components/blog/Post.js';
+export {} from './components/blog/blogService.js';
+export { getPosts } from './components/blog/blogService.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "5.5.10",
+	"version": "5.6.0",
 	"license": "MIT",
 	"watch": {
 		"build": {
@@ -32,7 +32,7 @@
 			"svelte": "./dist/index-server.js"
 		},
 		"./css/functional.css": "./css/functional.css",
-		"./package.json": "./package.json" 
+		"./package.json": "./package.json"
 	},
 	"files": [
 		"dist",
@@ -61,6 +61,7 @@
 		"flowbite": "^4.0.1",
 		"flowbite-svelte": "^1.31.0",
 		"flowbite-svelte-icons": "^3.1.0",
+		"mdsvex": "^0.12.7",
 		"oauth4webapi": "^3.8.5",
 		"tailwindcss": "^4.2.2"
 	},