urpanels-ui-pack 0.0.2

package/dist/sections/FeaturedGalleryGrid/README.md

@@ -0,0 +1,270 @@
+# FeaturedGalleryGrid Component
+
+Framework-agnostic featured gallery grid component extracted from turk-cin-dernek-website project.
+
+## Features
+
+- ✅ Asymmetric grid layout (2:1 ratio)
+- ✅ Large featured image on left
+- ✅ 3 smaller images stacked on right
+- ✅ Responsive design (stacks on mobile)
+- ✅ Hover scale animations
+- ✅ Image overlays with gradient
+- ✅ Text labels on images
+- ✅ Framework-agnostic click handlers
+- ✅ Custom image resolver support
+- ✅ Placeholder fallback images
+
+## Layout Preview
+
+```
+┌─────────────────┬────────┐
+│                 │  IMG1  │
+│   FEATURED      ├────────┤
+│     IMAGE       │  IMG2  │
+│    (Large)      ├────────┤
+│                 │  IMG3  │
+└─────────────────┴────────┘
+```
+
+## Usage
+
+```svelte
+<script>
+  import { FeaturedGalleryGrid } from '@urga-panel/urPanels-ui-pack/sections';
+
+  const featuredItem = {
+    image: '/images/featured.jpg',
+    alt: 'Featured Event',
+    text: 'Ambassador Visit to China',
+    href: '/events/ambassador-visit'
+  };
+
+  const smallItems = [
+    {
+      image: '/images/event1.jpg',
+      alt: 'Chinese Dance',
+      text: 'Chinese Dance Performance',
+      href: '/events/dance'
+    },
+    {
+      image: '/images/event2.jpg',
+      alt: 'MADO Representative',
+      text: 'MADO Regional Representative',
+      href: '/events/mado'
+    },
+    {
+      image: '/images/event3.jpg',
+      alt: 'University Visit',
+      text: 'Northwest University',
+      href: '/events/university'
+    }
+  ];
+
+  function handleItemClick(href: string) {
+    window.location.href = href;
+  }
+</script>
+
+<FeaturedGalleryGrid 
+  {featuredItem}
+  {smallItems}
+  onItemClick={handleItemClick}
+/>
+```
+
+## Props
+
+### `featuredItem` (required)
+Type: `GalleryItem`
+
+Large featured image on the left side:
+```typescript
+interface GalleryItem {
+  image: string;      // Image URL
+  alt: string;        // Alt text for accessibility
+  text?: string;      // Optional overlay text
+  href?: string;      // Optional link destination
+}
+```
+
+### `smallItems` (required)
+Type: `GalleryItem[]`
+
+Array of 3 smaller images for the right column. If more than 3 items provided, only first 3 are displayed.
+
+### `onItemClick` (optional)
+Type: `(href: string) => void`
+
+Click handler for all gallery items. Receives the `href` from the clicked item.
+
+### `imageResolver` (optional)
+Type: `(path: string) => string`  
+Default: `(path) => path`
+
+Function to transform/resolve image paths (e.g., add CDN prefix).
+
+### `placeholderImage` (optional)
+Type: `string`  
+Default: `'https://placehold.co/800x500'`
+
+Fallback image URL when item image is empty or invalid.
+
+## Examples
+
+### With SvelteKit Navigation
+
+```svelte
+<script lang="ts">
+  import { FeaturedGalleryGrid } from '@urga-panel/urPanels-ui-pack/sections';
+  import { goto } from '$app/navigation';
+  import { localizedPath, locale } from '$lib/i18n';
+
+  export let data;
+
+  const featuredItem = {
+    image: data.indexData?.gallery?.left?.image ?? '',
+    alt: data.indexData?.gallery?.left?.alt ?? 'Featured',
+    text: data.indexData?.gallery?.left?.text,
+    href: data.indexData?.gallery?.left?.href
+  };
+
+  const smallItems = data.indexData?.gallery?.right ?? [];
+
+  function handleItemClick(href: string) {
+    if (href.startsWith('http')) {
+      window.location.href = href;
+    } else {
+      goto(localizedPath(href, $locale));
+    }
+  }
+</script>
+
+<FeaturedGalleryGrid 
+  {featuredItem}
+  {smallItems}
+  onItemClick={handleItemClick}
+/>
+```
+
+### With CDN Image Resolver
+
+```svelte
+<script>
+  const imageResolver = (path) => {
+    if (!path) return 'https://placehold.co/800x500';
+    if (path.startsWith('http')) return path;
+    return `https://cdn.example.com${path}`;
+  };
+</script>
+
+<FeaturedGalleryGrid 
+  {featuredItem}
+  {smallItems}
+  {imageResolver}
+/>
+```
+
+### With Custom Placeholder
+
+```svelte
+<FeaturedGalleryGrid 
+  {featuredItem}
+  {smallItems}
+  placeholderImage="/default-event-image.jpg"
+/>
+```
+
+### Static Content (No Click Handlers)
+
+```svelte
+<script>
+  const featuredItem = {
+    image: '/gallery/main.jpg',
+    alt: 'Main Gallery Image',
+    text: 'Photo Gallery 2024'
+  };
+
+  const smallItems = [
+    { image: '/gallery/1.jpg', alt: 'Gallery 1' },
+    { image: '/gallery/2.jpg', alt: 'Gallery 2' },
+    { image: '/gallery/3.jpg', alt: 'Gallery 3' }
+  ];
+</script>
+
+<!-- Without onItemClick, items use default href behavior -->
+<FeaturedGalleryGrid {featuredItem} {smallItems} />
+```
+
+## Styling
+
+Component uses Tailwind-like utility classes with scoped CSS fallbacks. Key styles:
+
+- **Grid**: 1 column (mobile), 3 columns (md+)
+- **Featured Image**: Spans 2 columns, max-height 600px
+- **Small Images**: Max-height 200px each
+- **Container**: Max-width 1280px
+- **Spacing**: 4px gap on desktop, 16px on mobile
+- **Hover Effects**: 
+  - Featured: scale(1.01)
+  - Small: scale(1.05)
+
+## Layout Behavior
+
+### Desktop (md+)
+```
+┌──────────────────┬─────────┐
+│                  │  Item1  │
+│    Featured      ├─────────┤
+│    (col-span-2)  │  Item2  │
+│                  ├─────────┤
+│                  │  Item3  │
+└──────────────────┴─────────┘
+```
+
+### Mobile
+```
+┌──────────────────┐
+│    Featured      │
+├──────────────────┤
+│     Item 1       │
+├──────────────────┤
+│     Item 2       │
+├──────────────────┤
+│     Item 3       │
+└──────────────────┘
+```
+
+## Image Overlay
+
+All images have:
+- Gradient overlay: `from-black/50 via-black/20 to-transparent`
+- Text positioned at bottom with padding
+- White text with drop-shadow for readability
+- Pointer-events disabled on text to allow image clicks
+
+## Accessibility
+
+- ✅ Semantic `<a>` elements with proper `href`
+- ✅ Alt text on all images
+- ✅ Keyboard navigation support
+- ✅ Proper heading hierarchy (`<h3>` for featured, `<h4>` for small)
+- ✅ Visual hover feedback
+
+## Browser Support
+
+Works in all modern browsers with CSS Grid and Flexbox support.
+
+## Max Items
+
+Component automatically limits `smallItems` to first 3 items using `.slice(0, 3)`.
+
+## Performance
+
+- Images lazy-load by default (browser native)
+- Transform animations use GPU acceleration
+- Gradient overlays use CSS, not extra DOM elements
+
+## Version
+
+Component extracted from turk-cin-dernek-website (January 2025).

package/dist/sections/FeaturedGalleryGrid/index.d.ts

@@ -0,0 +1,2 @@
+export { default as FeaturedGalleryGrid } from './FeaturedGalleryGrid.svelte';
+export type { GalleryItem } from './FeaturedGalleryGrid.svelte';

package/dist/sections/FeaturedGalleryGrid/index.js

@@ -0,0 +1 @@
+export { default as FeaturedGalleryGrid } from './FeaturedGalleryGrid.svelte';

package/dist/sections/HeroCarousel/HeroCarousel.svelte

@@ -0,0 +1,318 @@
+<script lang="ts">
+	import emblaCarouselSvelte from 'embla-carousel-svelte';
+	import Autoplay from 'embla-carousel-autoplay';
+
+	interface HeroItem {
+		id?: string;
+		title: string;
+		summary?: string;
+		slug?: string;
+		featuredImage?: string;
+		images?: string[];
+		type?: string;
+		content?: string;
+		customStyles?: string; // CSS için ayrı field
+	}
+
+	interface Props {
+		heroItems?: HeroItem[];
+		onSlugClick?: (slug: string) => void;
+		imageResolver?: (url: string | undefined) => string;
+		locale?: string;
+		translations?: {
+			readMore: string;
+		};
+	}
+
+	let { 
+		heroItems = [], 
+		onSlugClick,
+		imageResolver = (url) => url || '',
+		locale = 'tr',
+		translations = { readMore: 'Devamını Oku' }
+	}: Props = $props();
+
+	let emblaApi: any = $state(null);
+	let currentSlide = $state(0);
+	let totalSlides = $derived(heroItems.length);
+
+	// Autoplay plugin options
+	const autoplayOptions = {
+		delay: 4000,
+		stopOnInteraction: false,
+		stopOnMouseEnter: true,
+	};
+
+	function onInit(event: CustomEvent): void {
+		emblaApi = event.detail;
+		emblaApi.on('select', () => {
+			currentSlide = emblaApi.selectedScrollSnap();
+		});
+	}
+
+	function goToSlide(index: number): void {
+		if (emblaApi) {
+			emblaApi.scrollTo(index);
+		}
+	}
+
+	function handleSlugClick(slug: string | undefined, e: MouseEvent): void {
+		if (slug && onSlugClick) {
+			e.preventDefault();
+			onSlugClick(slug);
+		}
+	}
+
+	// HTML content'ten style tag'lerini ayıklayıp temizle
+	function extractAndCleanHTML(htmlContent: string): { html: string; styles: string } {
+		if (!htmlContent) return { html: '', styles: '' };
+		
+		const styleRegex = /<style[^>]*>([\s\S]*?)<\/style>/gi;
+		let styles = '';
+		let matches;
+		
+		// Tüm style tag'lerini bul ve topla
+		while ((matches = styleRegex.exec(htmlContent)) !== null) {
+			styles += matches[1] + '\n';
+		}
+		
+		// HTML'den style tag'lerini kaldır
+		const cleanHTML = htmlContent.replace(styleRegex, '');
+		
+		return { html: cleanHTML, styles };
+	}
+
+	// Style'ları slide-specific yap (scope'la)
+	function scopeStyles(styles: string, slideIndex: number): string {
+		if (!styles) return '';
+		
+		const scopeClass = `.hero-slide-${slideIndex}`;
+		let result = '';
+		
+		// Media query pattern'i
+		const mediaQueryRegex = /@media[^{]+\{([\s\S]+?)\}\s*\}/g;
+		let lastIndex = 0;
+		let match;
+		
+		// Media query'leri bul ve işle
+		while ((match = mediaQueryRegex.exec(styles)) !== null) {
+			// Media query'den önceki normal kuralları ekle
+			const beforeMedia = styles.substring(lastIndex, match.index);
+			if (beforeMedia.trim()) {
+				result += scopeNormalCSS(beforeMedia, scopeClass);
+			}
+			
+			// Media query'yi işle
+			const mediaRule = match[0];
+			const mediaCondition = mediaRule.substring(0, mediaRule.indexOf('{') + 1);
+			const mediaContent = match[1];
+			
+			// Media query içindeki kuralları scope'la
+			const scopedMediaContent = scopeNormalCSS(mediaContent, scopeClass);
+			result += `${mediaCondition}\n${scopedMediaContent}\n}\n`;
+			
+			lastIndex = mediaQueryRegex.lastIndex;
+		}
+		
+		// Kalan normal kuralları ekle
+		const afterMedia = styles.substring(lastIndex);
+		if (afterMedia.trim()) {
+			result += scopeNormalCSS(afterMedia, scopeClass);
+		}
+		
+		return result;
+	}
+	
+	// Normal CSS kurallarını scope'la
+	function scopeNormalCSS(css: string, scopeClass: string): string {
+		if (!css.trim()) return '';
+		
+		// Satır satır işle
+		const lines = css.split('\n');
+		let result = '';
+		let inRule = false;
+		let currentSelector = '';
+		let currentRules = '';
+		
+		for (let line of lines) {
+			const trimmed = line.trim();
+			
+			// Boş satırları atla
+			if (!trimmed) continue;
+			
+			// Selector başlangıcı
+			if (trimmed.includes('{')) {
+				const parts = trimmed.split('{');
+				currentSelector = parts[0].trim();
+				currentRules = parts[1] || '';
+				inRule = true;
+				
+				// @ ile başlamıyorsa scope'la
+				if (!currentSelector.startsWith('@')) {
+					const scopedSelector = `${scopeClass} ${currentSelector}`;
+					result += `${scopedSelector} { ${currentRules}\n`;
+				} else {
+					result += `${currentSelector} { ${currentRules}\n`;
+				}
+			}
+			// Kural devam ediyor
+			else if (inRule && !trimmed.includes('}')) {
+				result += `${trimmed}\n`;
+			}
+			// Kural bitiyor
+			else if (trimmed.includes('}')) {
+				const beforeClose = trimmed.split('}')[0];
+				if (beforeClose.trim()) {
+					result += `${beforeClose}\n`;
+				}
+				result += '}\n';
+				inRule = false;
+				currentSelector = '';
+				currentRules = '';
+			}
+		}
+		
+		return result;
+	}
+
+	// Her item için style ve HTML'i hazırla
+	let processedItems = $derived(
+		heroItems.map((item, index) => {
+			if (item.type === 'html' && item.content) {
+				const { html, styles } = extractAndCleanHTML(item.content);
+				return {
+					...item,
+					cleanContent: html,
+					extractedStyles: scopeStyles(item.customStyles || styles, index)
+				};
+			}
+			return { 
+				...item, 
+				cleanContent: item.content, 
+				extractedStyles: item.customStyles ? scopeStyles(item.customStyles, index) : '' 
+			};
+		})
+	);
+
+	// Tüm slide'ların style'larını birleştir
+	let allStyles = $derived(
+		processedItems
+			.map(item => item.extractedStyles)
+			.filter(Boolean)
+			.join('\n')
+	);
+</script>
+
+<!-- Style'ları head'e ekle -->
+<svelte:head>
+	{#if allStyles}
+		{@html `<style>${allStyles}</style>`}
+	{/if}
+</svelte:head>
+
+<section class="relative text-white overflow-hidden">
+	<div 
+		class="embla"
+		use:emblaCarouselSvelte={{ 
+			options: { loop: true },
+			plugins: [Autoplay(autoplayOptions)]
+		}}
+		onemblaInit={onInit}
+	>
+		<div class="embla__container">
+			<!-- Dynamic Slides from heroItems -->
+			{#each processedItems as item, index}
+				<div class="embla__slide hero-slide-{index} relative min-h-[600px] flex items-center">
+					<div class="absolute inset-0 overflow-hidden">
+						{#if item.featuredImage || (item.images && item.images[0])}
+							<img 
+								src={imageResolver(item.featuredImage || item.images?.[0])} 
+								alt={item.title}
+								class="w-full h-full object-cover"
+							/>
+						{:else}
+							<div class="w-full h-full bg-gradient-to-br from-gray-800 to-gray-900"></div>
+						{/if}
+						<div class="absolute inset-0 bg-gradient-to-b from-gray-900/60 via-gray-900/50 to-gray-900/60"></div>
+					</div>
+					
+					{#if item.type === 'html'}
+						<!-- HTML Content (full width) -->
+						<div class="hero-html-content">
+							{@html item.cleanContent}
+						</div>
+					{:else}
+						<!-- Standard Content -->
+						<div class="container mx-auto px-4 relative z-10">
+							<div class="max-w-4xl mx-auto text-center">
+								<h2 class="text-4xl md:text-6xl font-bold mb-6">
+									{item.title}
+								</h2>
+								{#if item.summary}
+									<p class="text-xl md:text-2xl text-gray-200 mb-8">
+										{item.summary}
+									</p>
+								{/if}
+								{#if item.slug}
+									<a 
+										href={onSlugClick ? '#' : `/makaleler/${item.slug}`}
+										onclick={(e) => handleSlugClick(item.slug, e)}
+										class="inline-flex items-center bg-white text-primary-900 px-8 py-4 rounded-lg hover:bg-primary-50 transition-colors font-semibold text-lg"
+									>
+										{translations.readMore}
+										<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+										</svg>
+									</a>
+								{/if}
+							</div>
+						</div>
+					{/if}
+				</div>
+			{/each}
+		</div>
+	</div>
+
+	<!-- Navigation Dots -->
+	{#if totalSlides > 1}
+		<div class="absolute bottom-8 left-1/2 -translate-x-1/2 z-20 flex gap-3">
+			{#each Array(totalSlides) as _, index}
+				<button
+					type="button"
+					onclick={() => goToSlide(index)}
+					class="w-3 h-3 rounded-full transition-all duration-300 {currentSlide === index 
+						? 'bg-white scale-125' 
+						: 'bg-white/50 hover:bg-white/75'}"
+					aria-label="Slide {index + 1}'e git"
+				></button>
+			{/each}
+		</div>
+	{/if}
+</section>
+
+<style>
+	.embla {
+		overflow: hidden;
+	}
+	
+	.embla__container {
+		display: flex;
+	}
+	
+	.embla__slide {
+		flex: 0 0 100%;
+		min-width: 0;
+	}
+	
+	.hero-html-content :global(*) {
+		/* HTML içeriği için global stiller zaten inline gelecek */
+	}
+
+	.hero-html-content {
+		width: 100%;
+	}
+
+	.hero-html-content :global(> *) {
+		width: 100%;
+	}
+</style>

package/dist/sections/HeroCarousel/HeroCarousel.svelte.d.ts

@@ -0,0 +1,23 @@
+interface HeroItem {
+    id?: string;
+    title: string;
+    summary?: string;
+    slug?: string;
+    featuredImage?: string;
+    images?: string[];
+    type?: string;
+    content?: string;
+    customStyles?: string;
+}
+interface Props {
+    heroItems?: HeroItem[];
+    onSlugClick?: (slug: string) => void;
+    imageResolver?: (url: string | undefined) => string;
+    locale?: string;
+    translations?: {
+        readMore: string;
+    };
+}
+declare const HeroCarousel: import("svelte").Component<Props, {}, "">;
+type HeroCarousel = ReturnType<typeof HeroCarousel>;
+export default HeroCarousel;

package/dist/sections/HeroCarousel/index.d.ts

@@ -0,0 +1 @@
+export { default as HeroCarousel } from './HeroCarousel.svelte';

package/dist/sections/HeroCarousel/index.js

@@ -0,0 +1 @@
+export { default as HeroCarousel } from './HeroCarousel.svelte';

package/dist/sections/index.d.ts

@@ -0,0 +1,5 @@
+export { HeroCarousel } from './HeroCarousel';
+export { ArticlesGrid } from './ArticlesGrid';
+export type { Article } from './ArticlesGrid';
+export { FeaturedGalleryGrid } from './FeaturedGalleryGrid';
+export type { GalleryItem } from './FeaturedGalleryGrid';

package/dist/sections/index.js

@@ -0,0 +1,3 @@
+export { HeroCarousel } from './HeroCarousel';
+export { ArticlesGrid } from './ArticlesGrid';
+export { FeaturedGalleryGrid } from './FeaturedGalleryGrid';

package/dist/utils/translations.svelte.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Translations Helper for urpanels-template-kurs
+ *
+ * Usage:
+ * 1. Import in view: import { t } from '../../utils/translations.svelte';
+ * 2. Use t('students.title') to get translations
+ *
+ * Note: Translations are loaded by layout and stored in window.__urpanels_translations
+ * This module reads from window for cross-module compatibility
+ */
+declare global {
+    interface Window {
+        __urpanels_translations: Record<string, any>;
+        __urpanels_language: string;
+        __urpanels_translations_loaded: boolean;
+    }
+}
+/**
+ * Get translation by key
+ * Supports nested keys with dot notation (e.g., 'students.title')
+ *
+ * @param key - Translation key (dot notation for nested)
+ * @param fallback - Fallback value if key not found (defaults to key itself)
+ * @param params - Optional parameters for interpolation (e.g., { count: 5 })
+ * @returns Translated string or fallback
+ *
+ * @example
+ * t('common.save') // Returns "Kaydet" or "Save"
+ * t('students.title') // Returns "Öğrenciler" or "Students"
+ * t('validation.minLength', undefined, { min: 3 }) // Returns "En az 3 karakter olmalıdır"
+ */
+export declare function t(key: string, fallback?: string, params?: Record<string, any>): string;
+export declare function getCurrentLanguage(): string;
+export declare function isTranslationsLoaded(): boolean;
+export declare function getAllTranslations(): Record<string, any>;
+export declare function initTranslations(_apiFront?: any, _settings?: any): Promise<void>;
+export declare function changeLanguage(_apiFront?: any, _language?: string): Promise<void>;