added social and custom links

Author: code-gio

package-lock.json

@@ -18,7 +18,7 @@
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
 		"@tailwindcss/typography": "^0.5.15",
 		"autoprefixer": "^10.4.20",
-		"bits-ui": "^1.0.0-next.72",
+		"bits-ui": "^1.0.0-next.74",
 		"clsx": "^2.1.1",
 		"lucide-svelte": "^0.468.0",
 		"mode-watcher": "^0.5.0",

package.json

@@ -1,113 +1,63 @@
 ---
-slug: docs
-title: Welcome to Svelte Firekit
-description: a comprehensive library integrating SvelteKit and Firebase for building robust micro SaaS applications.
+title: Welcome to YourDocs
+description: A modern documentation template built with Svelte 5, MDSvex, and Tailwind CSS.
 ---
 
-## Introduction to Svelte Firekit
+# Build beautiful documentation with ease
 
-Svelte Firekit is a powerful Firebase toolkit for SvelteKit applications, providing a comprehensive set of utilities, stores, and components for seamless Firebase integration. Whether you're building a micro SaaS, web application, or any Firebase-powered project, Svelte Firekit streamlines your development process.
+A modern documentation template built with Svelte 5, MDSvex, and Tailwind CSS. Featuring a beautiful design system powered by shadcn/ui, complete with dark mode support and full customization options.
 
-## Installation
+## Quick Start
 
 ```bash
-npm install firebase svelte-firekit
+# Install via npm
+npm install your-package-name
+
+# Install via pnpm
+pnpm add your-package-name
+
+# Install via yarn
+yarn add your-package-name
 ```
 
-## Configuration
+## Key Features
 
-Svelte Firekit automatically manages your Firebase configuration through environment variables. Create a `.env` file in your project root with the following variables:
+### Component Library
+Built on top of shadcn/ui, this template offers a comprehensive set of accessible components with complete documentation. Each component is carefully crafted to be both beautiful and functional.
 
-```env
-PUBLIC_FIREBASE_API_KEY=your_api_key
-PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
-PUBLIC_FIREBASE_PROJECT_ID=your_project_id
-PUBLIC_FIREBASE_STORAGE_BUCKET=your_storage_bucket
-PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
-PUBLIC_FIREBASE_APP_ID=your_app_id
-PUBLIC_FIREBASE_MEASUREMENT_ID=your_measurement_id
-```
+### Type-Safe Development
+Fully typed with TypeScript, providing excellent IDE support and a reliable development experience. Get instant feedback and catch errors before they happen.
 
-The configuration is automatically handled by Firekit - no manual setup required. If any required environment variables are missing, Firekit will throw a helpful error indicating which variables need to be set.
+### Complete Customization
+Make it yours with:
+- Custom themes and color schemes
+- Flexible layout options
+- Customizable components
+- Brand integration
+- Dark mode support
 
-## Usage Example
+### Modern Tech Stack
+- **Svelte 5** for optimal performance
+- **MDSvex** for enhanced markdown
+- **TailwindCSS** for styling
+- **shadcn/ui** for UI components
+- **TypeScript** for type safety
 
-Here's a simple example showing how to display the current user's name:
+## Getting Started
 
-```svelte
-<script>
-  import { firekitUser } from 'svelte-firekit';
-</script>
+Choose the guide that works best for you:
 
-Hello {firekitUser.displayName}
-```
+- [Installation Guide](/docs/installation) - Get up and running quickly
+- [Component Library](/docs/components) - Explore available components
+- [Customization](/docs/customization) - Learn how to make it your own
+- [Examples](/docs/examples) - See real-world usage
+
+## Community and Support
 
-The `firekitUser` store provides access to the current user's information and authentication state.
-
-## Core Features
-
-### 🔥 Firebase Integration
-- Zero-config Firebase setup through environment variables
-- Automatic initialization and app management
-- Built-in error handling and connection state management
-- Type-safe configuration management
-
-### 🔐 Authentication
-- Complete authentication system with built-in components
-- Support for multiple authentication providers:
-  - Email/Password
-  - Google
-  - GitHub
-  - Custom providers
-- User state management and persistence through `firekitUser` store
-
-### 📚 Firestore Integration
-- Reactive data stores for real-time updates
-- Simplified CRUD operations
-- Batch operations and transactions
-- Type-safe document references
-- Automatic data serialization/deserialization
-
-### 📦 Storage Management
-- File upload and download utilities
-- Progress tracking and status updates
-- Storage security rules helpers
-- Image optimization utilities
-
-### ⚡ Server-Side Rendering
-- Full SSR compatibility
-- Hydration support
-- Server-side data fetching
-- SEO-friendly rendering
-
-### 🎯 Type Safety
-- Built with TypeScript
-- Complete type definitions
-- Intelligent autocomplete
-- Runtime type checking
-- Type-safe Firestore operations
-
-## Why Svelte Firekit?
-
-- **Zero Configuration**: Automatic Firebase setup through environment variables
-- **Type Safety**: Full TypeScript support with built-in type checking
-- **Rapid Development**: Get your Firebase-powered SvelteKit application up and running in minutes
-- **Best Practices**: Built following Firebase and SvelteKit best practices
-- **Production Ready**: Battle-tested in production environments
-- **Active Community**: Regular updates and active community support
-- **Extensible**: Easy to customize and extend for your specific needs
-
-## Next Steps
-
-- Check out our [Getting Started](/getting-started) guide
-- Explore the [API Reference](/api)
-- View [Examples](/examples)
-- Join our [Community](/community)
-
-## Contributing
-
-We welcome contributions! Please see our [Contributing Guide](/contributing) for more details.
+- [GitHub Repository](https://github.com/yourusername/project)
+- [Documentation](https://your-docs-site.com)
+- [Examples](https://your-docs-site.com/examples)
 
 ## License
 
-Svelte Firekit is released under the MIT License. See the [LICENSE](/license) file for more details.
+Released under the MIT License. Feel free to use this template for your own projects.

src/content/auth/auth.md

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { features } from '$lib/config';
+</script>
+
+<div class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
+	<div class="grid items-center gap-12 sm:grid-cols-2 lg:grid-cols-4">
+		{#each features as feature}
+			<!-- Feature Block -->
+			<div class="text-center">
+				<div
+					class="mx-auto flex size-12 items-center justify-center rounded-full border border-gray-200 bg-gray-50 dark:border-neutral-700 dark:bg-neutral-800"
+				>
+					<feature.icon class="size-5 shrink-0 text-gray-600 dark:text-neutral-400" />
+				</div>
+				<div class="mt-3">
+					<h3 class="text-lg font-semibold text-gray-800 dark:text-white">
+						{feature.title}
+					</h3>
+					<p class="mt-1 text-gray-600 dark:text-neutral-400">
+						{feature.description}
+					</p>
+				</div>
+			</div>
+			<!-- End Feature Block -->
+		{/each}
+	</div>
+</div>

src/content/index.md

@@ -0,0 +1,32 @@
+<script>
+	import { navItems, siteConfig } from '$lib/config';
+	import SocialMedia from '../social-media.svelte';
+</script>
+
+<footer class="mx-auto mt-auto w-full max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8">
+	<div class="grid grid-cols-1 items-center gap-5 md:grid-cols-3">
+		<div>
+			<a href="/">
+				<img src={siteConfig.logo} alt={siteConfig.title} class="h-6 dark:hidden" />
+				<img src={siteConfig.logoDark} alt={siteConfig.title} class="hidden h-6 dark:block" />
+			</a>
+		</div>
+
+		<ul class="text-center">
+			{#each navItems as item}
+				<li
+					class="relative inline-block pe-8 before:absolute before:end-3 before:top-1/2 before:-translate-y-1/2 before:text-gray-300 before:content-['/'] last:pe-0 last-of-type:before:hidden dark:before:text-neutral-600"
+				>
+					<a
+						class="inline-flex gap-x-2 text-sm text-gray-500 hover:text-gray-800 focus:text-gray-800 focus:outline-none dark:text-neutral-500 dark:hover:text-neutral-200 dark:focus:text-neutral-200"
+						href={item.href}
+					>
+						{item.title}
+					</a>
+				</li>
+			{/each}
+		</ul>
+
+		<SocialMedia />
+	</div>
+</footer>