cleaned up some leftovers
This commit is contained in:
6
index.js
6
index.js
@@ -484,7 +484,11 @@ async function main() {
|
|||||||
await runCommand("git", ["add", "."], rootDir);
|
await runCommand("git", ["add", "."], rootDir);
|
||||||
await runCommand(
|
await runCommand(
|
||||||
"git",
|
"git",
|
||||||
["commit", "-m", "Initiated from Sanity template :rocket:"],
|
[
|
||||||
|
"commit",
|
||||||
|
"-m",
|
||||||
|
"Initiated from vaporvee's Sanity template :rocket:",
|
||||||
|
],
|
||||||
rootDir,
|
rootDir,
|
||||||
);
|
);
|
||||||
await runCommand("git", ["branch", "-M", "main"], rootDir);
|
await runCommand("git", ["branch", "-M", "main"], rootDir);
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@vaporvee/template-sanity",
|
"name": "@vaporvee/template-sanity",
|
||||||
"version": "2.2.0",
|
"version": "2.2.1",
|
||||||
"publishConfig": {
|
"publishConfig": {
|
||||||
"access": "restricted",
|
"access": "restricted",
|
||||||
"registry": "https://git.vaporvee.com/api/packages/vaporvee/npm"
|
"registry": "https://git.vaporvee.com/api/packages/vaporvee/npm"
|
||||||
|
|||||||
@@ -1,121 +0,0 @@
|
|||||||
# Navbar Integration Complete ✅
|
|
||||||
|
|
||||||
This document summarizes the completed integration between the Sanity navbar schema and the SvelteKit frontend component.
|
|
||||||
|
|
||||||
## What Was Implemented
|
|
||||||
|
|
||||||
### 1. Navigation Data Service (`src/lib/navigation.ts`)
|
|
||||||
- ✅ Fetches navbar documents from Sanity
|
|
||||||
- ✅ Processes different sublink types (auto, tag, manual)
|
|
||||||
- ✅ Resolves internal links using the link helper
|
|
||||||
- ✅ Implements 5-minute caching for performance
|
|
||||||
- ✅ Provides fallback navigation when no document exists
|
|
||||||
- ✅ Uses generated TypeScript types for type safety
|
|
||||||
|
|
||||||
### 2. Updated Layout Integration
|
|
||||||
- ✅ Modified `+layout.server.ts` to load navigation data
|
|
||||||
- ✅ Updated `+layout.svelte` to pass navigation to navbar component
|
|
||||||
- ✅ Added proper TypeScript return types
|
|
||||||
- ✅ Server-side rendering for better SEO and performance
|
|
||||||
|
|
||||||
### 3. Enhanced Navbar Component
|
|
||||||
- ✅ Removed hardcoded navigation items
|
|
||||||
- ✅ Uses dynamic data from Sanity
|
|
||||||
- ✅ Handles empty/undefined navigation gracefully
|
|
||||||
- ✅ Maintains all existing UI functionality (mobile menu, animations, etc.)
|
|
||||||
- ✅ Supports nested submenus from Sanity schema
|
|
||||||
|
|
||||||
### 4. Link Processing Integration
|
|
||||||
- ✅ Uses existing `deconstructLink` helper for all link types
|
|
||||||
- ✅ Supports static, external, email, phone, and internal links
|
|
||||||
- ✅ Resolves internal page references to proper URLs
|
|
||||||
- ✅ Handles different page types (custom, blog) correctly
|
|
||||||
|
|
||||||
## Schema Features Implemented
|
|
||||||
|
|
||||||
### Main Navigation Links
|
|
||||||
- ✅ Text and link fields
|
|
||||||
- ✅ All link types supported via link helper
|
|
||||||
- ✅ Optional sublinks array
|
|
||||||
|
|
||||||
### Auto Sublinks
|
|
||||||
- ✅ Fetches 5 most recent pages by type (custom/blog)
|
|
||||||
- ✅ Automatic URL generation based on page type
|
|
||||||
- ✅ Proper GROQ query with ordering and limits
|
|
||||||
|
|
||||||
### Tag-based Sublinks
|
|
||||||
- ✅ Filters pages by selected tag reference
|
|
||||||
- ✅ Configurable page type for tag filtering
|
|
||||||
- ✅ Automatic page fetching and URL generation
|
|
||||||
|
|
||||||
### Manual Sublinks
|
|
||||||
- ✅ Custom text and link configuration
|
|
||||||
- ✅ Full link helper integration
|
|
||||||
- ✅ Fallback handling for invalid links
|
|
||||||
|
|
||||||
## Performance Features
|
|
||||||
|
|
||||||
### Caching System
|
|
||||||
- ✅ 5-minute in-memory cache
|
|
||||||
- ✅ Reduces database queries on each page load
|
|
||||||
- ✅ Automatic cache invalidation
|
|
||||||
- ✅ Development-friendly cache clearing
|
|
||||||
|
|
||||||
### Server-Side Processing
|
|
||||||
- ✅ All link resolution happens server-side
|
|
||||||
- ✅ Better SEO with pre-rendered navigation
|
|
||||||
- ✅ Faster client-side hydration
|
|
||||||
- ✅ Reduced client-side JavaScript
|
|
||||||
|
|
||||||
## Developer Experience
|
|
||||||
|
|
||||||
### Type Safety
|
|
||||||
- ✅ Generated TypeScript types from Sanity schema
|
|
||||||
- ✅ Proper interface definitions for navigation items
|
|
||||||
- ✅ Type-safe data flow from Sanity to component
|
|
||||||
- ✅ IntelliSense support throughout the stack
|
|
||||||
|
|
||||||
### Error Handling
|
|
||||||
- ✅ Graceful degradation when Sanity is unavailable
|
|
||||||
- ✅ Console logging for debugging
|
|
||||||
- ✅ Fallback navigation for empty documents
|
|
||||||
- ✅ Safe handling of missing or invalid data
|
|
||||||
|
|
||||||
### Setup Tools
|
|
||||||
- ✅ Automated setup script (`scripts/setup-navbar.js`)
|
|
||||||
- ✅ Package.json script integration
|
|
||||||
- ✅ Comprehensive documentation
|
|
||||||
- ✅ Environment variable configuration
|
|
||||||
|
|
||||||
## File Changes Summary
|
|
||||||
|
|
||||||
### New Files Created
|
|
||||||
- `src/lib/navigation.ts` - Navigation data service
|
|
||||||
- `scripts/setup-navbar.js` - Initial document creation script
|
|
||||||
- `NAVBAR_INTEGRATION.md` - Technical documentation
|
|
||||||
- `NAVBAR_SETUP.md` - User setup guide
|
|
||||||
- `INTEGRATION_COMPLETE.md` - This summary
|
|
||||||
|
|
||||||
### Modified Files
|
|
||||||
- `+layout.server.ts` - Added navigation data loading
|
|
||||||
- `+layout.svelte` - Pass navigation to navbar component
|
|
||||||
- `navbar.svelte` - Use dynamic data instead of hardcoded
|
|
||||||
- `package.json` - Added setup script and dependencies
|
|
||||||
|
|
||||||
### Generated Files
|
|
||||||
- `sanity.types.ts` - Updated with Navbar type definitions
|
|
||||||
|
|
||||||
## Usage Examples
|
|
||||||
|
|
||||||
### Basic Setup
|
|
||||||
```bash
|
|
||||||
# Generate types
|
|
||||||
cd apps/studio && bun run generate
|
|
||||||
|
|
||||||
# Create navbar document
|
|
||||||
SANITY_PROJECT_ID=your-id SANITY_TOKEN=your-token bun run setup:navbar
|
|
||||||
```
|
|
||||||
|
|
||||||
### Component Usage
|
|
||||||
```svelte
|
|
||||||
<!-- Navigation is automatically loaded an
|
|
||||||
@@ -1,98 +0,0 @@
|
|||||||
# SvelteKit Routing Guide
|
|
||||||
|
|
||||||
This guide explains how the dynamic routing system works in this Sanity + SvelteKit template, including URL patterns and content management.
|
|
||||||
|
|
||||||
## URL Structure
|
|
||||||
|
|
||||||
The template uses the following URL patterns:
|
|
||||||
|
|
||||||
### Custom Pages
|
|
||||||
- **Pattern**: `/{slug}`
|
|
||||||
- **Example**: `/about`, `/contact`, `/services`
|
|
||||||
- **Content Type**: `custom` pages from Sanity
|
|
||||||
- **Route File**: `src/routes/[slug]/+page.svelte`
|
|
||||||
|
|
||||||
### Blog Posts
|
|
||||||
- **Pattern**: `/blog/{slug}`
|
|
||||||
- **Example**: `/blog/my-first-post`, `/blog/web-development-tips`
|
|
||||||
- **Content Type**: `blog` posts from Sanity
|
|
||||||
- **Route File**: `src/routes/blog/[slug]/+page.svelte`
|
|
||||||
|
|
||||||
### Blog Index
|
|
||||||
- **Pattern**: `/blog`
|
|
||||||
- **Shows**: List of all blog posts
|
|
||||||
- **Route File**: `src/routes/blog/+page.svelte`
|
|
||||||
|
|
||||||
## File Structure
|
|
||||||
|
|
||||||
```
|
|
||||||
src/routes/
|
|
||||||
├── [slug]/ # Custom pages at root level
|
|
||||||
│ ├── +page.server.ts # Server-side data loading
|
|
||||||
│ └── +page.svelte # Custom page component
|
|
||||||
├── blog/
|
|
||||||
│ ├── +page.server.ts # Blog index server load
|
|
||||||
│ ├── +page.svelte # Blog index component
|
|
||||||
│ └── [slug]/ # Individual blog posts
|
|
||||||
│ ├── +page.server.ts # Blog post server load
|
|
||||||
│ └── +page.svelte # Blog post component
|
|
||||||
├── +layout.server.ts # Global layout data
|
|
||||||
└── +layout.svelte # Global layout component
|
|
||||||
```
|
|
||||||
|
|
||||||
## How It Works
|
|
||||||
|
|
||||||
### 1. URL Resolution Order
|
|
||||||
|
|
||||||
SvelteKit resolves URLs in this order:
|
|
||||||
1. **Exact routes** (e.g., `/blog`)
|
|
||||||
2. **Parameterized routes** (e.g., `/blog/[slug]`, `/[slug]`)
|
|
||||||
|
|
||||||
This means:
|
|
||||||
- `/blog` → Blog index page
|
|
||||||
- `/blog/some-post` → Blog post page
|
|
||||||
- `/about` → Custom page (if exists)
|
|
||||||
- `/nonexistent` → 404 error
|
|
||||||
|
|
||||||
### 2. Data Loading Flow
|
|
||||||
|
|
||||||
#### Custom Pages (`/[slug]`)
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
// +page.server.ts
|
|
||||||
const CUSTOM_QUERY = `*[_type == "custom" && slug.current == $slug][0]`;
|
|
||||||
const custom = await serverClient.fetch(CUSTOM_QUERY, { slug });
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Blog Posts (`/blog/[slug]`)
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
// +page.server.ts
|
|
||||||
const BLOG_QUERY = `*[_type == "blog" && slug.current == $slug][0]`;
|
|
||||||
const blog = await serverClient.fetch(BLOG_QUERY, { slug });
|
|
||||||
```
|
|
||||||
|
|
||||||
### 3. Content Types
|
|
||||||
|
|
||||||
#### Custom Page Schema
|
|
||||||
```typescript
|
|
||||||
type Custom = {
|
|
||||||
_id: string;
|
|
||||||
_type: 'custom';
|
|
||||||
title?: string;
|
|
||||||
slug?: Slug;
|
|
||||||
tags?: Array<string>;
|
|
||||||
publishedAt?: string;
|
|
||||||
body?: BlockContent;
|
|
||||||
seoTitle?: string;
|
|
||||||
seoDescription?: string;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Blog Post Schema
|
|
||||||
```typescript
|
|
||||||
type Blog = {
|
|
||||||
_id: string;
|
|
||||||
_type: 'blog';
|
|
||||||
title?: string;
|
|
||||||
slug
|
|
||||||
Reference in New Issue
Block a user