mirror of
https://github.com/harivansh-afk/Austens-Wedding-Guide.git
synced 2026-04-16 20:01:23 +00:00
navbar improvements
This commit is contained in:
parent
8e8d41eab4
commit
e06beffcac
2 changed files with 255 additions and 771 deletions
|
|
@ -1,8 +1,8 @@
|
||||||
# Technical Documentation - Austen's Wedding Guide
|
# Technical Documentation - ENGL 2502: Jane Austen
|
||||||
|
|
||||||
## Project Overview
|
## Project Overview
|
||||||
|
|
||||||
A React-based web application that serves as a modern wedding guide themed around Jane Austen's works. The project combines literary analysis with interactive features, presenting Austen's insights in a contemporary context.
|
A React-based academic web application focused on analyzing Jane Austen's works, themes, and their modern relevance. The project combines literary analysis with interactive features to provide deep insights into Austen's novels and their contemporary interpretations.
|
||||||
|
|
||||||
## Tech Stack
|
## Tech Stack
|
||||||
|
|
||||||
|
|
@ -20,789 +20,248 @@ src/
|
||||||
├── components/
|
├── components/
|
||||||
│ ├── ui/ # Shadcn UI components
|
│ ├── ui/ # Shadcn UI components
|
||||||
│ ├── layout/ # Layout components
|
│ ├── layout/ # Layout components
|
||||||
│ ├── vendor/ # Vendor-specific components
|
│ ├── analysis/ # Analysis components
|
||||||
|
│ │ ├── NovelAnalysis.tsx
|
||||||
|
│ │ ├── CharacterAnalysis.tsx
|
||||||
|
│ │ └── ThemeAnalysis.tsx
|
||||||
│ ├── timeline/ # Timeline components
|
│ ├── timeline/ # Timeline components
|
||||||
│ │ ├── InteractiveTimeline.tsx
|
│ │ ├── InteractiveTimeline.tsx
|
||||||
│ │ └── SocialClassView.tsx
|
│ │ └── SocialClassView.tsx
|
||||||
│ ├── BlogPost.tsx # Blog post component
|
│ ├── network/ # Character network components
|
||||||
│ ├── CommentSection.tsx
|
│ │ ├── NetworkGraph.tsx
|
||||||
|
│ │ └── RelationshipView.tsx
|
||||||
│ ├── ErrorBoundary.tsx
|
│ ├── ErrorBoundary.tsx
|
||||||
│ ├── Footer.tsx
|
│ ├── Footer.tsx
|
||||||
│ ├── Layout.tsx
|
│ ├── Layout.tsx
|
||||||
│ ├── LoadingSpinner.tsx
|
│ ├── LoadingSpinner.tsx
|
||||||
│ ├── Navbar.tsx
|
│ ├── Navbar.tsx
|
||||||
│ ├── Pagination.tsx
|
│ ├── Pagination.tsx
|
||||||
│ ├── QuoteDisplay.tsx
|
|
||||||
│ ├── ShareButtons.tsx
|
|
||||||
│ └── theme-provider.tsx
|
│ └── theme-provider.tsx
|
||||||
│
|
│
|
||||||
├── data/
|
├── data/
|
||||||
│ ├── blog-posts.ts # Character blog content
|
│ ├── novels/ # Novel-specific content
|
||||||
│ ├── quotes.ts # Austen quotes
|
│ │ ├── northanger-abbey.ts
|
||||||
│ ├── quiz.ts # Character quiz data
|
│ │ ├── sense-and-sensibility.ts
|
||||||
│ ├── success-stories.ts
|
│ │ ├── pride-and-prejudice.ts
|
||||||
│ ├── literary-analysis.ts # Literary analysis data
|
│ │ └── mansfield-park.ts
|
||||||
│ ├── comparative-analysis.ts # Comparative analysis data
|
│ ├── analysis/ # Analysis data
|
||||||
│ └── vendors.ts
|
│ │ ├── themes.ts
|
||||||
|
│ │ ├── characters.ts
|
||||||
|
│ │ └── social-class.ts
|
||||||
|
│ ├── contemporary/ # Modern retellings data
|
||||||
|
│ │ ├── pride.ts # Pride by Ibi Zoboi
|
||||||
|
│ │ └── longbourn.ts # Longbourn by Jo Baker
|
||||||
|
│ └── timeline.ts # Chronological data
|
||||||
│
|
│
|
||||||
├── pages/
|
├── pages/
|
||||||
│ ├── BlogPost/
|
│ ├── novels/ # Individual novel pages
|
||||||
│ ├── Analysis.tsx # Literary analysis page
|
│ │ ├── NorthangerAbbey.tsx
|
||||||
│ ├── Blogs.tsx
|
│ │ ├── SenseAndSensibility.tsx
|
||||||
│ ├── Home.tsx
|
│ │ ├── PrideAndPrejudice.tsx
|
||||||
│ ├── MarketCalculator.tsx
|
│ │ └── MansfieldPark.tsx
|
||||||
│ ├── Quiz.tsx
|
│ ├── Analysis.tsx # Literary analysis page
|
||||||
│ ├── Stories.tsx
|
│ ├── Characters.tsx # Character studies
|
||||||
│ ├── SuccessStories.tsx
|
│ ├── Contemporary.tsx # Modern retellings
|
||||||
│ ├── ComparativeAnalysis.tsx # Comparative analysis page
|
│ ├── Network.tsx # Character network
|
||||||
│ └── Vendors.tsx
|
│ ├── Timeline.tsx # Interactive timeline
|
||||||
|
│ └── SocialClass.tsx # Social class analysis
|
||||||
```
|
```
|
||||||
|
|
||||||
## Routing Structure
|
## Navigation Structure
|
||||||
|
|
||||||
The application uses React Router for navigation with the following route structure:
|
The application uses a new academically-focused navigation structure:
|
||||||
|
|
||||||
```typescript
|
### Primary Navigation
|
||||||
<Routes>
|
|
||||||
<Route path="/" element={<Home />} />
|
|
||||||
<Route path="/blogs" element={<Blogs />} />
|
|
||||||
<Route path="/blogs/:id" element={<BlogPost />} />
|
|
||||||
<Route path="/quiz" element={<Quiz />} />
|
|
||||||
<Route path="/vendors" element={<Vendors />} />
|
|
||||||
<Route path="/success-stories" element={<SuccessStories />} />
|
|
||||||
<Route path="/market-calculator" element={<MarketCalculator />} />
|
|
||||||
<Route path="/analysis" element={<Analysis />} />
|
|
||||||
<Route path="/comparative" element={<ComparativeAnalysis />} />
|
|
||||||
<Route path="/network" element={<NetworkVisualization />} />
|
|
||||||
</Routes>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Navigation Updates
|
- Literary Analysis
|
||||||
|
- Novel Studies
|
||||||
|
- Character Studies
|
||||||
|
|
||||||
- Main navigation in `Navbar.tsx` includes:
|
### Course Novels (Norton Critical Editions)
|
||||||
- Primary navigation group with consistent button styling
|
|
||||||
- Secondary navigation group for analysis features
|
|
||||||
- Visual separation between groups using border
|
|
||||||
- All buttons styled with sage color scheme
|
|
||||||
- Home page features:
|
|
||||||
- Literary Analysis card in featured sections
|
|
||||||
- Direct link to analysis content
|
|
||||||
- Layout structure:
|
|
||||||
- MainLayout component wraps all pages
|
|
||||||
- Consistent header with navigation
|
|
||||||
- Footer with copyright and quote
|
|
||||||
|
|
||||||
### Route Integration
|
- Northanger Abbey (ed. Fraiman)
|
||||||
|
- Sense and Sensibility (ed. Hershinow)
|
||||||
|
- Pride and Prejudice (ed. Davidson)
|
||||||
|
- Mansfield Park (ed. Johnson)
|
||||||
|
|
||||||
- Analysis page is directly accessible via `/analysis`
|
### Modern Analysis
|
||||||
- Comparative analysis accessible via `/comparative`
|
|
||||||
- Character network visualization via `/network`
|
- Contemporary Retellings
|
||||||
- Integrated into main navigation flow
|
- Social Class Analysis
|
||||||
- Maintains consistent layout and styling
|
- Character Network
|
||||||
- Proper error handling and loading states
|
- Timeline
|
||||||
|
|
||||||
## Key Features
|
## Key Features
|
||||||
|
|
||||||
### 1. Content Management
|
### 1. Novel Analysis
|
||||||
|
|
||||||
- Data is stored in TypeScript files with strong typing
|
- Detailed analysis of each course novel
|
||||||
- Content is organized by characters and themes
|
- Integration with Norton Critical Edition content
|
||||||
- Modular content structure for easy updates
|
- Theme exploration and character development
|
||||||
- **New: Comprehensive literary analysis data structure with detailed novel analysis**
|
- Social commentary analysis
|
||||||
|
|
||||||
### 2. UI Components
|
### 2. Interactive Features
|
||||||
|
|
||||||
- Custom components built on Shadcn/UI
|
- Character relationship network visualization
|
||||||
- Responsive design using Tailwind CSS
|
- Chronological timeline of works and adaptations
|
||||||
- Consistent theme using custom color palette:
|
- Social class analysis tools
|
||||||
- Sage
|
- Comparative analysis features
|
||||||
- Cream
|
|
||||||
- Rose
|
|
||||||
- **New: Interactive novel selector and tabbed analysis interface**
|
|
||||||
|
|
||||||
### 3. Interactive Features
|
### 3. Modern Interpretations
|
||||||
|
|
||||||
- Character quiz with result mapping
|
- Analysis of contemporary retellings
|
||||||
- Blog comment system
|
- Comparative studies with original works
|
||||||
- Share functionality
|
- Social class dynamics in modern context
|
||||||
- Pagination for content lists
|
- Character archetype analysis
|
||||||
- Market calculator
|
|
||||||
- **New: Interactive timeline with multiple views**
|
|
||||||
- **New: Literary analysis with themed tabs and novel selection**
|
|
||||||
- **New: Comparative analysis for cross-novel exploration**
|
|
||||||
- **New: Character network visualization**
|
|
||||||
|
|
||||||
### 4. Performance Considerations
|
### 4. Academic Tools
|
||||||
|
|
||||||
- Component-based architecture for better code splitting
|
- Citation integration
|
||||||
- Error boundaries for graceful error handling
|
- Critical essay references
|
||||||
- Loading states for better UX
|
- Thematic analysis frameworks
|
||||||
- Client-side routing for smooth navigation
|
- Character development tracking
|
||||||
|
|
||||||
|
## UI Components
|
||||||
|
|
||||||
|
### Navigation Components
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
interface NavItem {
|
||||||
|
name: string;
|
||||||
|
path: string;
|
||||||
|
description?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface NovelItem extends NavItem {
|
||||||
|
edition: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ModernItem extends NavItem {
|
||||||
|
description: string;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Analysis Components
|
||||||
|
|
||||||
|
- Novel selector with edition information
|
||||||
|
- Theme exploration interface
|
||||||
|
- Character relationship visualization
|
||||||
|
- Social class analysis tools
|
||||||
|
|
||||||
## Styling
|
## Styling
|
||||||
|
|
||||||
The project uses a combination of:
|
The project maintains its elegant aesthetic while emphasizing academic content:
|
||||||
|
|
||||||
- Tailwind CSS for utility-first styling
|
- Clean, scholarly design
|
||||||
- Custom components from Shadcn/UI
|
- Consistent typography using Cormorant and Lato
|
||||||
- Custom theme variables for consistent branding
|
- Sage and cream color scheme
|
||||||
- Responsive design patterns
|
- Responsive layout with mobile-first approach
|
||||||
- **New: Scrollable content areas with consistent styling**
|
|
||||||
- **New: Themed cards and tabs for analysis content**
|
|
||||||
|
|
||||||
## Typography
|
## Typography
|
||||||
|
|
||||||
- Headings: Cormorant font family
|
- Headings: Cormorant font family
|
||||||
- Body: Lato font family
|
- Body: Lato font family
|
||||||
- Consistent text sizing using Tailwind's scale
|
- Academic emphasis with proper hierarchical structure
|
||||||
|
|
||||||
## Component Architecture
|
|
||||||
|
|
||||||
### Layout Components
|
|
||||||
|
|
||||||
- `Layout.tsx`: Main layout wrapper
|
|
||||||
- `Navbar.tsx`: Navigation header
|
|
||||||
- `Footer.tsx`: Site footer
|
|
||||||
- `ErrorBoundary.tsx`: Error handling wrapper
|
|
||||||
|
|
||||||
### Content Components
|
|
||||||
|
|
||||||
- `BlogPost.tsx`: Blog post display
|
|
||||||
- `QuoteDisplay.tsx`: Quote formatting
|
|
||||||
- `CommentSection.tsx`: User comments
|
|
||||||
- `ShareButtons.tsx`: Social sharing
|
|
||||||
- **New: Analysis.tsx**: Literary analysis with novel selection and tabbed content
|
|
||||||
|
|
||||||
### UI Components
|
|
||||||
|
|
||||||
Extensive UI component library including:
|
|
||||||
|
|
||||||
- Buttons
|
|
||||||
- Cards
|
|
||||||
- Forms
|
|
||||||
- Modals
|
|
||||||
- Navigation menus
|
|
||||||
- Tables
|
|
||||||
- Toast notifications
|
|
||||||
- **New: Select dropdown for novel selection**
|
|
||||||
- **New: Tabs for content organization**
|
|
||||||
- **New: ScrollArea for content sections**
|
|
||||||
|
|
||||||
## Data Structure
|
|
||||||
|
|
||||||
### Blog Posts
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
interface BlogPost {
|
|
||||||
id: string;
|
|
||||||
title: string;
|
|
||||||
author: string;
|
|
||||||
authorImage: string;
|
|
||||||
date: string;
|
|
||||||
content: string[];
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Quiz System
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
interface QuizQuestion {
|
|
||||||
id: string;
|
|
||||||
question: string;
|
|
||||||
options: QuizOption[];
|
|
||||||
}
|
|
||||||
|
|
||||||
interface QuizResult {
|
|
||||||
character: string;
|
|
||||||
quote: string;
|
|
||||||
description: string;
|
|
||||||
book: string;
|
|
||||||
matchAdvice: string;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Literary Analysis
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
// Novel Analysis Structure
|
|
||||||
interface NovelAnalysis {
|
|
||||||
title: string;
|
|
||||||
publicationYear: number;
|
|
||||||
mainThemes: ThematicElement[];
|
|
||||||
characterAnalysis: CharacterAnalysis[];
|
|
||||||
socialCommentary: SocialCommentary[];
|
|
||||||
literaryDevices: LiteraryDevice[];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Theme Analysis
|
|
||||||
interface ThematicElement {
|
|
||||||
theme: string;
|
|
||||||
description: string;
|
|
||||||
examples: {
|
|
||||||
quote: string;
|
|
||||||
source: string;
|
|
||||||
analysis: string;
|
|
||||||
}[];
|
|
||||||
significance: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Available Novels
|
|
||||||
const novelAnalyses = {
|
|
||||||
prideAndPrejudice: NovelAnalysis;
|
|
||||||
northangerAbbey: NovelAnalysis;
|
|
||||||
senseAndSensibility: NovelAnalysis;
|
|
||||||
mansfieldPark: NovelAnalysis;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Pages and Components
|
|
||||||
|
|
||||||
### Analysis Page
|
|
||||||
|
|
||||||
- Path: `/analysis`
|
|
||||||
- Features:
|
|
||||||
- Novel selector dropdown
|
|
||||||
- Tabbed interface for different analysis aspects
|
|
||||||
- Scrollable content areas
|
|
||||||
- Themed styling
|
|
||||||
- Content Sections:
|
|
||||||
- Themes
|
|
||||||
- Characters
|
|
||||||
- Social Commentary
|
|
||||||
- Literary Devices
|
|
||||||
|
|
||||||
### Data Organization
|
|
||||||
|
|
||||||
- `src/data/literary-analysis.ts`: Contains structured analysis data for all novels
|
|
||||||
- Pride and Prejudice
|
|
||||||
- Northanger Abbey
|
|
||||||
- Sense and Sensibility
|
|
||||||
- Mansfield Park
|
|
||||||
- Each novel includes:
|
|
||||||
- Main themes with examples and significance
|
|
||||||
- Character analysis with development and key quotes
|
|
||||||
- Social commentary with modern relevance
|
|
||||||
- Literary devices with examples and effects
|
|
||||||
|
|
||||||
## Best Practices
|
## Best Practices
|
||||||
|
|
||||||
1. TypeScript for type safety
|
1. Academic Focus
|
||||||
2. Component-based architecture
|
|
||||||
3. Consistent file naming
|
- Content-first approach
|
||||||
4. Modular CSS with Tailwind
|
- Integration of course materials
|
||||||
5. Error handling with boundaries
|
- Proper citation and sourcing
|
||||||
6. Loading state management
|
- Critical analysis emphasis
|
||||||
7. Responsive design patterns
|
|
||||||
8. **New: Structured content organization**
|
2. Technical Implementation
|
||||||
9. **New: Interactive content navigation**
|
|
||||||
|
- TypeScript for type safety
|
||||||
|
- Component-based architecture
|
||||||
|
- Responsive design
|
||||||
|
- Performance optimization
|
||||||
|
|
||||||
|
3. User Experience
|
||||||
|
- Clear navigation structure
|
||||||
|
- Academic resource organization
|
||||||
|
- Interactive learning tools
|
||||||
|
- Mobile-friendly layout
|
||||||
|
|
||||||
## Future Considerations
|
## Future Considerations
|
||||||
|
|
||||||
1. Content expansion opportunities
|
1. Enhanced Academic Features
|
||||||
2. Performance optimization
|
|
||||||
3. Accessibility improvements
|
- Integration with additional critical editions
|
||||||
4. SEO optimization
|
- Expanded analysis tools
|
||||||
5. Content management system integration
|
- Citation management system
|
||||||
6. **New: Additional novel analysis features**
|
- Academic resource linking
|
||||||
7. **New: Comparative analysis tools**
|
|
||||||
|
2. Content Expansion
|
||||||
|
|
||||||
|
- Additional novel analysis
|
||||||
|
- More contemporary retellings
|
||||||
|
- Extended character studies
|
||||||
|
- Thematic deep dives
|
||||||
|
|
||||||
|
3. Technical Improvements
|
||||||
|
|
||||||
|
- Performance optimization
|
||||||
|
- Accessibility enhancements
|
||||||
|
- Mobile experience refinement
|
||||||
|
- Search functionality
|
||||||
|
|
||||||
|
4. Academic Integration
|
||||||
|
- Course material alignment
|
||||||
|
- Research tool integration
|
||||||
|
- Citation format options
|
||||||
|
- Study guide features
|
||||||
|
|
||||||
## Character Network Feature
|
## Character Network Feature
|
||||||
|
|
||||||
### Interactive Graph Component
|
The character network visualization maintains its technical implementation while focusing on academic analysis:
|
||||||
|
|
||||||
The character network visualization is implemented using a force-directed graph with the following features:
|
|
||||||
|
|
||||||
```typescript
|
```typescript
|
||||||
interface CharacterNode {
|
interface CharacterNode {
|
||||||
id: string;
|
id: string;
|
||||||
name: string;
|
name: string;
|
||||||
novel: string;
|
novel: string;
|
||||||
class: string;
|
socialClass: string;
|
||||||
type: "protagonist" | "antagonist" | "supporting";
|
relationships: Relationship[];
|
||||||
|
criticalAnalysis: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface GraphConfig {
|
interface Relationship {
|
||||||
nodeRelSize: number;
|
type: string;
|
||||||
nodeVal: number;
|
target: string;
|
||||||
width: number;
|
description: string;
|
||||||
height: number;
|
textualEvidence: string;
|
||||||
staticGraph: boolean;
|
|
||||||
enableNodeDrag: boolean;
|
|
||||||
enableZoom: boolean;
|
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Key Features
|
|
||||||
|
|
||||||
1. **Static Node Positioning**
|
|
||||||
|
|
||||||
- Nodes are arranged in a circular layout
|
|
||||||
- Fixed positions prevent unwanted movement
|
|
||||||
- Calculated using mathematical formulas for even distribution
|
|
||||||
|
|
||||||
2. **Interaction Handling**
|
|
||||||
|
|
||||||
- Single-click node selection
|
|
||||||
- Debounced click handling (300ms)
|
|
||||||
- Click processing state management
|
|
||||||
- Cleanup of timeouts on unmount
|
|
||||||
|
|
||||||
3. **Visual Configuration**
|
|
||||||
|
|
||||||
- Node colors based on character type:
|
|
||||||
- Protagonist: Green (#4CAF50)
|
|
||||||
- Antagonist: Red (#f44336)
|
|
||||||
- Supporting: Blue (#2196F3)
|
|
||||||
- Node size: 8 units (nodeRelSize)
|
|
||||||
- Link width: 2 units
|
|
||||||
- Link opacity: 0.6
|
|
||||||
|
|
||||||
4. **Performance Optimizations**
|
|
||||||
|
|
||||||
- Disabled force simulation cooldown
|
|
||||||
- Zero warmup ticks
|
|
||||||
- Removed hover effects and tooltips
|
|
||||||
- Static graph configuration
|
|
||||||
|
|
||||||
5. **UI Components**
|
|
||||||
- Main graph container (600x600px)
|
|
||||||
- Right-side information panel (300px width)
|
|
||||||
- Smooth transitions for panel visibility
|
|
||||||
- Responsive layout with flex container
|
|
||||||
|
|
||||||
### Implementation Details
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
// Node Click Handler
|
|
||||||
const handleNodeClick = useCallback(
|
|
||||||
(node) => {
|
|
||||||
if (!node || isProcessingClick) return;
|
|
||||||
setIsProcessingClick(true);
|
|
||||||
setSelectedNode(node);
|
|
||||||
onNodeSelect(node);
|
|
||||||
// Reset after 300ms
|
|
||||||
clickTimeoutRef.current = setTimeout(() => {
|
|
||||||
setIsProcessingClick(false);
|
|
||||||
}, 300);
|
|
||||||
},
|
|
||||||
[onNodeSelect, isProcessingClick]
|
|
||||||
);
|
|
||||||
|
|
||||||
// Graph Configuration
|
|
||||||
const graphConfig = {
|
|
||||||
staticGraph: true,
|
|
||||||
enableNodeDrag: false,
|
|
||||||
enableZoom: true,
|
|
||||||
minZoom: 0.5,
|
|
||||||
maxZoom: 2.5,
|
|
||||||
cooldownTime: 0,
|
|
||||||
warmupTicks: 0,
|
|
||||||
nodeLabel: null,
|
|
||||||
enableNodeHover: false,
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
### Styling
|
|
||||||
|
|
||||||
The component uses a flex layout with the following structure:
|
|
||||||
|
|
||||||
```css
|
|
||||||
// Container
|
|
||||||
{
|
|
||||||
display: flex;
|
|
||||||
gap: 20px;
|
|
||||||
width: 100%;
|
|
||||||
maxwidth: 1000px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Graph Container
|
|
||||||
{
|
|
||||||
width: 600px;
|
|
||||||
height: 600px;
|
|
||||||
border: 1px solid #eee;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Information Panel
|
|
||||||
{
|
|
||||||
width: 300px;
|
|
||||||
padding: 20px;
|
|
||||||
backgroundcolor: #fff;
|
|
||||||
border: 1px solid #eee;
|
|
||||||
borderradius: 4px;
|
|
||||||
transition: opacity 0.2s ease-in-out;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Best Practices
|
|
||||||
|
|
||||||
1. **State Management**
|
|
||||||
|
|
||||||
- Use of React hooks for state
|
|
||||||
- Proper cleanup of timeouts
|
|
||||||
- Controlled component updates
|
|
||||||
|
|
||||||
2. **Performance**
|
|
||||||
|
|
||||||
- Debounced click handling
|
|
||||||
- Static node positioning
|
|
||||||
- Minimal re-renders
|
|
||||||
|
|
||||||
3. **User Experience**
|
|
||||||
|
|
||||||
- Smooth transitions
|
|
||||||
- Clear visual feedback
|
|
||||||
- Responsive layout
|
|
||||||
|
|
||||||
4. **Code Organization**
|
|
||||||
- Modular component structure
|
|
||||||
- Clear configuration objects
|
|
||||||
- Type-safe interfaces
|
|
||||||
|
|
||||||
## Timeline Feature
|
## Timeline Feature
|
||||||
|
|
||||||
### Interactive Timeline Component
|
The timeline now emphasizes literary chronology and analysis:
|
||||||
|
|
||||||
The timeline visualization is implemented with a modern, flowing layout that displays events chronologically with the following features:
|
|
||||||
|
|
||||||
```typescript
|
```typescript
|
||||||
interface TimelineEvent {
|
interface TimelineEvent {
|
||||||
year: number;
|
year: number;
|
||||||
type: "works" | "context" | "legacy" | "adaptations";
|
type: "publication" | "writing" | "context" | "adaptation";
|
||||||
title: string;
|
title: string;
|
||||||
description: string;
|
description: string;
|
||||||
novel?: string;
|
criticalContext: string;
|
||||||
significance?: string;
|
literarySignificance: string;
|
||||||
}
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
events: TimelineEvent[];
|
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Key Features
|
## Social Class Analysis
|
||||||
|
|
||||||
1. **Event Display**
|
Enhanced focus on academic analysis of class dynamics:
|
||||||
|
|
||||||
- Vertical flowing layout with connected events
|
|
||||||
- Events positioned horizontally based on year
|
|
||||||
- Clean card design with type-based color coding
|
|
||||||
- Connected events with vertical lines
|
|
||||||
|
|
||||||
2. **Time Scale**
|
|
||||||
|
|
||||||
- Sticky year markers at the top
|
|
||||||
- Automatic year range calculation
|
|
||||||
- Visual period indicators
|
|
||||||
- Smooth scrolling behavior
|
|
||||||
|
|
||||||
3. **Event Types**
|
|
||||||
|
|
||||||
- Works: Publications and writings
|
|
||||||
- Context: Historical events
|
|
||||||
- Legacy: Impact and influence
|
|
||||||
- Adaptations: Modern interpretations
|
|
||||||
|
|
||||||
4. **Visual Design**
|
|
||||||
|
|
||||||
- Clean, modern card layout
|
|
||||||
- Type-based color coding:
|
|
||||||
- Works: Blue (#2196F3)
|
|
||||||
- Context: Purple (#9C27B0)
|
|
||||||
- Legacy: Green (#4CAF50)
|
|
||||||
- Subtle shadows and transitions
|
|
||||||
- Responsive container sizing
|
|
||||||
|
|
||||||
5. **Interaction**
|
|
||||||
- Smooth horizontal scrolling
|
|
||||||
- Event selection with visual feedback
|
|
||||||
- Automatic scrolling to selected events
|
|
||||||
- Hover effects on cards and dots
|
|
||||||
|
|
||||||
### Implementation Details
|
|
||||||
|
|
||||||
```typescript
|
```typescript
|
||||||
// Color Scheme
|
interface SocialClassAnalysis {
|
||||||
const getEventColor = (type: string) => {
|
|
||||||
switch (type) {
|
|
||||||
case "works":
|
|
||||||
return { background: "#E3F2FD", border: "#2196F3" };
|
|
||||||
case "context":
|
|
||||||
return { background: "#F3E5F5", border: "#9C27B0" };
|
|
||||||
case "legacy":
|
|
||||||
return { background: "#E8F5E9", border: "#4CAF50" };
|
|
||||||
default:
|
|
||||||
return { background: "#FAFAFA", border: "#9E9E9E" };
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Event Click Handler
|
|
||||||
const handleEventClick = (event: TimelineEvent) => {
|
|
||||||
setSelectedEvent(event);
|
|
||||||
// Scroll event into view with smooth animation
|
|
||||||
if (timelineRef.current) {
|
|
||||||
const position = ((event.year - actualMinYear) / timeSpan) * 100;
|
|
||||||
const timelineWidth = timelineRef.current.clientWidth;
|
|
||||||
const totalWidth = timelineRef.current.scrollWidth;
|
|
||||||
const scrollPosition = (position / 100) * totalWidth - timelineWidth / 2;
|
|
||||||
|
|
||||||
timelineRef.current.scrollTo({
|
|
||||||
left: scrollPosition,
|
|
||||||
behavior: "smooth",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
### Styling
|
|
||||||
|
|
||||||
The timeline uses a combination of Material-UI and custom styling:
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
// Container Styling
|
|
||||||
{
|
|
||||||
position: 'relative',
|
|
||||||
height: 600,
|
|
||||||
bgcolor: '#FFFFFF',
|
|
||||||
borderRadius: 2,
|
|
||||||
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
|
|
||||||
overflow: 'hidden'
|
|
||||||
}
|
|
||||||
|
|
||||||
// Event Card Styling
|
|
||||||
{
|
|
||||||
p: 2,
|
|
||||||
minWidth: 240,
|
|
||||||
maxWidth: 320,
|
|
||||||
borderLeft: `3px solid ${colors.border}`,
|
|
||||||
borderRadius: '4px',
|
|
||||||
transition: 'all 0.2s ease',
|
|
||||||
bgcolor: isSelected ? colors.background : '#FFFFFF',
|
|
||||||
boxShadow: '0 2px 4px rgba(0,0,0,0.05)'
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Best Practices
|
|
||||||
|
|
||||||
1. **Performance**
|
|
||||||
|
|
||||||
- Efficient event positioning
|
|
||||||
- Smooth scrolling behavior
|
|
||||||
- Optimized re-renders
|
|
||||||
- Proper cleanup of event listeners
|
|
||||||
|
|
||||||
2. **User Experience**
|
|
||||||
|
|
||||||
- Clear visual hierarchy
|
|
||||||
- Smooth transitions
|
|
||||||
- Intuitive navigation
|
|
||||||
- Responsive design
|
|
||||||
|
|
||||||
3. **Code Organization**
|
|
||||||
|
|
||||||
- Modular component structure
|
|
||||||
- Clear type definitions
|
|
||||||
- Reusable styling
|
|
||||||
- Consistent naming conventions
|
|
||||||
|
|
||||||
4. **Accessibility**
|
|
||||||
- Keyboard navigation support
|
|
||||||
- ARIA labels for interactive elements
|
|
||||||
- Color contrast compliance
|
|
||||||
- Focus management
|
|
||||||
|
|
||||||
## Social Class Feature
|
|
||||||
|
|
||||||
### Social Class Analysis Component
|
|
||||||
|
|
||||||
The social class analysis feature provides an in-depth examination of class dynamics in Austen's works with the following structure:
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
interface SocialClass {
|
|
||||||
name: string;
|
|
||||||
description: string;
|
|
||||||
incomeRange: string;
|
|
||||||
modernEquivalent: string;
|
|
||||||
characteristics: string[];
|
|
||||||
examples: {
|
|
||||||
character: string;
|
|
||||||
novel: string;
|
|
||||||
context: string;
|
|
||||||
}[];
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Character {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
novel: string;
|
novel: string;
|
||||||
socialClass: "upper" | "middle" | "working";
|
class: string;
|
||||||
occupation?: string;
|
characteristics: string[];
|
||||||
annualIncome?: string;
|
textualEvidence: string[];
|
||||||
modernEquivalent?: string;
|
modernParallels: string[];
|
||||||
description: string;
|
criticalPerspectives: string[];
|
||||||
relationships: string[];
|
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Key Features
|
|
||||||
|
|
||||||
1. **Interactive Social Pyramid**
|
|
||||||
|
|
||||||
- Visual representation of class hierarchy
|
|
||||||
- Hover tooltips with class information
|
|
||||||
- Smooth transitions and animations
|
|
||||||
- Income ranges and modern equivalents
|
|
||||||
|
|
||||||
2. **Character Examples**
|
|
||||||
|
|
||||||
- Grid layout of character cards
|
|
||||||
- Class-based categorization
|
|
||||||
- Income and occupation details
|
|
||||||
- Modern equivalent values
|
|
||||||
- Character relationships
|
|
||||||
|
|
||||||
3. **Comparative Analysis**
|
|
||||||
|
|
||||||
- Character comparison dialog
|
|
||||||
- Side-by-side analysis
|
|
||||||
- Social mobility examination
|
|
||||||
- Economic context
|
|
||||||
|
|
||||||
4. **Content Organization**
|
|
||||||
|
|
||||||
- Expandable sections by novel
|
|
||||||
- Detailed character studies
|
|
||||||
- Modern retellings analysis
|
|
||||||
- Critical insights
|
|
||||||
|
|
||||||
5. **Visual Design**
|
|
||||||
- Clean, academic layout
|
|
||||||
- Consistent typography
|
|
||||||
- Color-coded class indicators
|
|
||||||
- Responsive grid system
|
|
||||||
|
|
||||||
### Implementation Details
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
// Social Class View Structure
|
|
||||||
const SocialClassView = () => {
|
|
||||||
const [selectedCharacter, setSelectedCharacter] = useState<Character | null>(
|
|
||||||
null
|
|
||||||
);
|
|
||||||
const [comparisonCharacter, setComparisonCharacter] =
|
|
||||||
useState<Character | null>(null);
|
|
||||||
const [dialogOpen, setDialogOpen] = useState(false);
|
|
||||||
|
|
||||||
// Character comparison handling
|
|
||||||
const handleCharacterClick = (character: Character) => {
|
|
||||||
if (!selectedCharacter) {
|
|
||||||
setSelectedCharacter(character);
|
|
||||||
} else if (selectedCharacter.id !== character.id) {
|
|
||||||
setComparisonCharacter(character);
|
|
||||||
setDialogOpen(true);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
// Social Pyramid Styling
|
|
||||||
const pyramidStyles = {
|
|
||||||
position: "relative",
|
|
||||||
height: 300,
|
|
||||||
"& .pyramid-level": {
|
|
||||||
position: "absolute",
|
|
||||||
left: "50%",
|
|
||||||
transform: "translateX(-50%)",
|
|
||||||
transition: "all 0.2s",
|
|
||||||
"&:hover": {
|
|
||||||
transform: "translateX(-50%) scale(1.02)",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
### Content Structure
|
|
||||||
|
|
||||||
1. **Pride and Prejudice Analysis**
|
|
||||||
|
|
||||||
- Upper Class Examples
|
|
||||||
- Mr. Darcy (£10,000 per year)
|
|
||||||
- Lady Catherine de Bourgh
|
|
||||||
- Middle & Lower Classes
|
|
||||||
- The Bennet Family
|
|
||||||
- Servants (via Longbourn)
|
|
||||||
|
|
||||||
2. **Mansfield Park Analysis**
|
|
||||||
|
|
||||||
- The Privileged Circle
|
|
||||||
- The Bertram Family
|
|
||||||
- Mary and Henry Crawford
|
|
||||||
- The Dependent Relations
|
|
||||||
- Fanny Price
|
|
||||||
- The Price Family
|
|
||||||
|
|
||||||
3. **Modern Retellings**
|
|
||||||
- Pride by Ibi Zoboi
|
|
||||||
- Zuri Benitez
|
|
||||||
- Darius Darcy
|
|
||||||
- Longbourn's Legacy
|
|
||||||
- Servant Perspectives
|
|
||||||
- Class Intersections
|
|
||||||
|
|
||||||
### Integration
|
|
||||||
|
|
||||||
1. **Routing**
|
|
||||||
|
|
||||||
- Dedicated `/social-class` route
|
|
||||||
- Integration with main navigation
|
|
||||||
- Error boundary protection
|
|
||||||
- Loading state handling
|
|
||||||
|
|
||||||
2. **Navigation**
|
|
||||||
|
|
||||||
- Added to academic section
|
|
||||||
- Consistent button styling
|
|
||||||
- Clear visual grouping
|
|
||||||
- Smooth transitions
|
|
||||||
|
|
||||||
3. **Data Management**
|
|
||||||
|
|
||||||
- TypeScript interfaces
|
|
||||||
- Structured content
|
|
||||||
- Modern equivalents
|
|
||||||
- Character relationships
|
|
||||||
|
|
||||||
4. **UI Components**
|
|
||||||
- Accordion sections
|
|
||||||
- Material-UI integration
|
|
||||||
- Responsive grid layout
|
|
||||||
- Interactive elements
|
|
||||||
|
|
||||||
### Best Practices
|
|
||||||
|
|
||||||
1. **Content Organization**
|
|
||||||
|
|
||||||
- Clear hierarchical structure
|
|
||||||
- Detailed character analysis
|
|
||||||
- Historical context
|
|
||||||
- Modern relevance
|
|
||||||
|
|
||||||
2. **User Experience**
|
|
||||||
|
|
||||||
- Intuitive navigation
|
|
||||||
- Interactive comparisons
|
|
||||||
- Visual hierarchy
|
|
||||||
- Responsive design
|
|
||||||
|
|
||||||
3. **Performance**
|
|
||||||
|
|
||||||
- Efficient state management
|
|
||||||
- Optimized rendering
|
|
||||||
- Smooth transitions
|
|
||||||
- Proper cleanup
|
|
||||||
|
|
||||||
4. **Accessibility**
|
|
||||||
- ARIA labels
|
|
||||||
- Keyboard navigation
|
|
||||||
- Color contrast
|
|
||||||
- Focus management
|
|
||||||
|
|
|
||||||
|
|
@ -1,81 +1,106 @@
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import { Feather } from 'lucide-react';
|
import { Feather, Menu, X } from 'lucide-react';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
|
const navItems = [
|
||||||
|
{ name: 'Character Blogs', path: '/blogs' },
|
||||||
|
{ name: 'Bride Quiz', path: '/quiz' },
|
||||||
|
{ name: 'Vendors', path: '/vendors' },
|
||||||
|
{ name: 'Success Stories', path: '/success-stories' },
|
||||||
|
{ name: 'Market Value', path: '/market-calculator' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const analysisItems = [
|
||||||
|
{ name: 'Literary Analysis', path: '/analysis' },
|
||||||
|
{ name: 'Character Network', path: '/network' },
|
||||||
|
{ name: 'Timeline', path: '/timeline' },
|
||||||
|
{ name: 'Social Class', path: '/social-class' },
|
||||||
|
];
|
||||||
|
|
||||||
const Navbar = () => {
|
const Navbar = () => {
|
||||||
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header className="border-b bg-cream-50">
|
<header className="sticky top-0 z-50 w-full border-b bg-cream-50/80 backdrop-blur-sm">
|
||||||
<div className="container mx-auto px-4">
|
<div className="container mx-auto px-4">
|
||||||
<div className="flex h-16 items-center justify-between">
|
<div className="flex h-16 items-center justify-between">
|
||||||
|
{/* Logo */}
|
||||||
<Link to="/" className="flex items-center space-x-2">
|
<Link to="/" className="flex items-center space-x-2">
|
||||||
<Feather className="h-6 w-6 text-sage-700" />
|
<Feather className="h-6 w-6 text-sage-700" />
|
||||||
<span className="font-cormorant text-xl text-sage-900">Austen's Wedding Guide</span>
|
<span className="font-cormorant text-xl text-sage-900">Austen's Wedding Guide</span>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
<nav className="flex items-center">
|
{/* Mobile menu button */}
|
||||||
<div className="flex items-center space-x-2 mr-6">
|
<button
|
||||||
<Link
|
onClick={() => setIsOpen(!isOpen)}
|
||||||
to="/blogs"
|
className="lg:hidden rounded-md p-2 text-sage-700 hover:bg-sage-100"
|
||||||
className="bg-sage-100 text-sage-700 hover:bg-sage-200 px-4 py-2 rounded-md transition-colors"
|
>
|
||||||
>
|
{isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
|
||||||
Character Blogs
|
</button>
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
to="/quiz"
|
|
||||||
className="bg-sage-100 text-sage-700 hover:bg-sage-200 px-4 py-2 rounded-md transition-colors"
|
|
||||||
>
|
|
||||||
Bride Quiz
|
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
to="/vendors"
|
|
||||||
className="bg-sage-100 text-sage-700 hover:bg-sage-200 px-4 py-2 rounded-md transition-colors"
|
|
||||||
>
|
|
||||||
Vendors
|
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
to="/success-stories"
|
|
||||||
className="bg-sage-100 text-sage-700 hover:bg-sage-200 px-4 py-2 rounded-md transition-colors"
|
|
||||||
>
|
|
||||||
Success Stories
|
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
to="/market-calculator"
|
|
||||||
className="bg-sage-100 text-sage-700 hover:bg-sage-200 px-4 py-2 rounded-md transition-colors"
|
|
||||||
>
|
|
||||||
Market Value
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center space-x-2 border-l border-sage-200 pl-6">
|
{/* Desktop Navigation */}
|
||||||
<Link
|
<nav className="hidden lg:flex lg:items-center lg:space-x-1">
|
||||||
to="/analysis"
|
<div className="flex items-center space-x-1">
|
||||||
className="bg-sage-100 text-sage-700 hover:bg-sage-200 px-4 py-2 rounded-md transition-colors"
|
{navItems.map((item) => (
|
||||||
>
|
<Link
|
||||||
Literary Analysis
|
key={item.path}
|
||||||
</Link>
|
to={item.path}
|
||||||
<Link
|
className="px-3 py-2 text-sm font-medium text-sage-700 hover:bg-sage-100 rounded-md transition-colors"
|
||||||
to="/network"
|
>
|
||||||
className="bg-sage-100 text-sage-700 hover:bg-sage-200 px-4 py-2 rounded-md transition-colors"
|
{item.name}
|
||||||
>
|
</Link>
|
||||||
Character Network
|
))}
|
||||||
</Link>
|
</div>
|
||||||
<Link
|
<div className="h-6 mx-4 w-px bg-sage-200" />
|
||||||
to="/timeline"
|
<div className="flex items-center space-x-1">
|
||||||
className="bg-sage-100 text-sage-700 hover:bg-sage-200 px-4 py-2 rounded-md transition-colors"
|
{analysisItems.map((item) => (
|
||||||
>
|
<Link
|
||||||
Timeline
|
key={item.path}
|
||||||
</Link>
|
to={item.path}
|
||||||
<Link
|
className="px-3 py-2 text-sm font-medium text-sage-700 hover:bg-sage-100 rounded-md transition-colors"
|
||||||
to="/social-class"
|
>
|
||||||
className="bg-sage-100 text-sage-700 hover:bg-sage-200 px-4 py-2 rounded-md transition-colors"
|
{item.name}
|
||||||
>
|
</Link>
|
||||||
Social Class
|
))}
|
||||||
</Link>
|
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile Navigation */}
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'lg:hidden',
|
||||||
|
isOpen ? 'block border-t border-sage-200' : 'hidden'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="space-y-1 px-2 pb-3 pt-2">
|
||||||
|
{navItems.map((item) => (
|
||||||
|
<Link
|
||||||
|
key={item.path}
|
||||||
|
to={item.path}
|
||||||
|
className="block px-3 py-2 text-base font-medium text-sage-700 hover:bg-sage-100 rounded-md transition-colors"
|
||||||
|
onClick={() => setIsOpen(false)}
|
||||||
|
>
|
||||||
|
{item.name}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
<div className="my-2 h-px bg-sage-200" />
|
||||||
|
{analysisItems.map((item) => (
|
||||||
|
<Link
|
||||||
|
key={item.path}
|
||||||
|
to={item.path}
|
||||||
|
className="block px-3 py-2 text-base font-medium text-sage-700 hover:bg-sage-100 rounded-md transition-colors"
|
||||||
|
onClick={() => setIsOpen(false)}
|
||||||
|
>
|
||||||
|
{item.name}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
export default Navbar;
|
export default Navbar;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue