From b6bc21e0895b5e2accbf5cb81a04b39e979afd6e Mon Sep 17 00:00:00 2001 From: devandapaige Date: Wed, 12 Nov 2025 14:22:48 -0500 Subject: [PATCH] search feature --- README.md | 73 +++- package-lock.json | 6 +- public/feed.xml | 2 +- src/app/resources/page.tsx | 446 +-------------------- src/components/blog/BlogContent.tsx | 150 +++++-- src/components/resources/ResourcesList.tsx | 201 ++++++++++ src/lib/resources.ts | 178 ++++++++ src/types/resources.ts | 16 + 8 files changed, 591 insertions(+), 481 deletions(-) create mode 100644 src/components/resources/ResourcesList.tsx create mode 100644 src/lib/resources.ts create mode 100644 src/types/resources.ts diff --git a/README.md b/README.md index 31cc848..d9a6071 100644 --- a/README.md +++ b/README.md @@ -103,6 +103,8 @@ This approach allows for more complex user interactions and immediate feedback t - Professional experience showcase - Local craft services section - MDX-based blog system with RSC support +- **Blog search functionality** - Search blog posts by title, description, and tags +- **Resources search functionality** - Search free resources by title, description, and features - Vibe Coding Cheatsheet - Professional TailwindCSS showcase & developer resource (Freebie) - Sourdough Corner - Local craft baking resource and guide (Freebie) - Enhanced error handling with user feedback @@ -148,7 +150,20 @@ Your content here... ``` -4. RSS Feed: +4. Search Functionality: + +The blog includes a powerful search feature that allows users to find posts by: +- **Title** - Search through post titles +- **Description** - Search through post descriptions +- **Tags** - Search through post tags + +The search works seamlessly with the existing tag filter system, allowing users to combine tag filtering with text search. Search queries are synced with the URL, making search results shareable. The search interface includes: +- Real-time filtering as you type +- Result count display +- Clear button to reset search +- "No results" messaging when no posts match + +5. RSS Feed: The blog includes an RSS feed for subscribers to stay updated with new posts. The feed is available at `/feed.xml` and includes: - Full post content @@ -327,6 +342,55 @@ The project uses the following environment variables: - `NEXT_PUBLIC_HOTJAR_ID` - Hotjar tracking ID - Additional environment variables can be added in `.env.local` +## Resources Page + +The resources page (`/resources`) provides a comprehensive collection of free resources for digital wellness, automation, and neurodivergent-friendly tech solutions. + +### Resource Management + +Resources are managed through structured data in `src/lib/resources.ts` using TypeScript types defined in `src/types/resources.ts`. Each resource includes: +- Title and subtitle +- Description +- Features list +- Links to full resource pages +- Download links (where applicable) +- Visual styling (border colors, emojis) + +### Search Functionality + +The resources page includes a search feature that filters resources by: +- **Title** - Search through resource titles +- **Subtitle** - Search through resource subtitles +- **Description** - Search through resource descriptions +- **Features** - Search through resource feature lists + +The search interface provides: +- Real-time filtering as you type +- Result count display +- Clear button to reset search +- "No results" messaging when no resources match +- Maintains existing styling and layout + +### Adding New Resources + +To add a new resource, update the `freeResources` array in `src/lib/resources.ts`: + +```typescript +{ + id: 'unique-resource-id', + title: 'Resource Title', + subtitle: 'Resource Subtitle', + description: 'Resource description...', + emoji: '🎯', + features: ['Feature 1', 'Feature 2'], + href: '/resource-page', + downloadHref: '/path/to/download.pdf', // Optional + downloadLabel: 'Download PDF', // Optional + borderColor: 'green' | 'purple', + type: 'free', +} +``` + ## Sections 1. Hero - Introduction and primary CTAs @@ -335,9 +399,10 @@ The project uses the following environment variables: 4. Experience - Professional background 5. Contact - Booking options and rates 6. Newsletter - Industry insights signup -7. Blog - Technical articles and resources -8. Vibe Coding Cheatsheet - Professional TailwindCSS showcase & developer resource (Freebie) -9. Sourdough Corner - Local craft baking resource and guide (Freebie) +7. Blog - Technical articles and resources with search functionality +8. Resources - Free resources hub with search functionality +9. Vibe Coding Cheatsheet - Professional TailwindCSS showcase & developer resource (Freebie) +10. Sourdough Corner - Local craft baking resource and guide (Freebie) ## Code Standards diff --git a/package-lock.json b/package-lock.json index b781342..6d28a29 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3725,9 +3725,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001721", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001721.tgz", - "integrity": "sha512-cOuvmUVtKrtEaoKiO0rSc29jcjwMwX5tOHDy4MgVFEWiUXj4uBMJkwI8MDySkgXidpMiHUcviogAvFi4pA2hDQ==", + "version": "1.0.30001754", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001754.tgz", + "integrity": "sha512-x6OeBXueoAceOmotzx3PO4Zpt4rzpeIFsSr6AAePTZxSkXiYDUmpypEl7e2+8NCd9bD7bXjqyef8CJYPC1jfxg==", "funding": [ { "type": "opencollective", diff --git a/public/feed.xml b/public/feed.xml index dea0e08..37cd51b 100644 --- a/public/feed.xml +++ b/public/feed.xml @@ -5,7 +5,7 @@ https://pythonessprogrammer.com Thoughts on technology, accessibility, and the human experience. en - Sun, 09 Nov 2025 21:33:11 GMT + Wed, 12 Nov 2025 19:19:37 GMT diff --git a/src/app/resources/page.tsx b/src/app/resources/page.tsx index e293657..d0c8aca 100644 --- a/src/app/resources/page.tsx +++ b/src/app/resources/page.tsx @@ -1,5 +1,7 @@ import Link from 'next/link' import { Metadata } from 'next' +import ResourcesList from '@/components/resources/ResourcesList' +import { freeResources } from '@/lib/resources' export const metadata: Metadata = { title: 'Resources | Pythoness Programmer', @@ -36,449 +38,7 @@ export default function ResourcesPage() {

-
- {/* Digital Spring Cleaning */} -
-
-
- 🌱 -
-
-

Digital Spring Cleaning

-

GRIT Framework Toolkit

-
-
-

- A comprehensive 4-page worksheet designed to help you refresh your digital life using the GRIT framework - (Passion, Perseverance, Growth, Resilience). Perfect for monthly or quarterly reflection. -

-
-
- - Digital Spring Cleaning Worksheet (PDF) -
-
- - Interactive Canva Template -
-
- - NAA Framework Guide (Notice, Adjust, Acknowledge) -
-
-
- - View Full Resource - - - Download PDF - -
-
- - {/* Mindful Automation */} -
-
-
- ⚙️ -
-
-

Mindful Automation

-

Y.O.U. Framework System

-
-
-

- Learn to build automation systems that work with your unique brain patterns. The Y.O.U. Framework - (Your Brain, Optimize Energy, Understand Maintenance) creates sustainable, brain-friendly workflows. -

-
-
- - Y.O.U. Framework Guide (PDF) -
-
- - Error-Proofing Worksheet -
-
- - Weekly Deep Dive Resources -
-
-
- - View Full Resource - - - Download PDF - -
-
- - {/* Neuroinclusive Design */} -
-
-
- 🧠 -
-
-

Neuroinclusive Design

-

June 2025 Deep Dive

-
-
-

- Learn how designing for neurodivergent users creates better experiences for everyone—moving beyond - accommodation to proactive inclusion with practical principles and tools. -

-
-
- - Four Core Design Principles -
-
- - Five-Minute Accessibility Check -
-
- - Weekly Deep Dives & Newsletter Links -
-
- - Explore Neuroinclusive Design - -
- - {/* Tech Boundaries */} -
-
-
- ⚡ -
-
-

Tech Boundaries

-

July 2025 Deep Dive

-
-
-

- Small boundaries, big energy gains—learn to create digital systems that work with your brain, - not against it. Transform tech overwhelm into creative fuel. -

-
-
- - Three Core Boundary Pillars -
-
- - PARA Method & Energy-Aware Automation -
-
- - Weekly Deep Dives & Newsletter Links -
-
- - Explore Tech Boundaries - -
- - {/* Vibe Coding Cheatsheet */} -
-
-
- 💻 -
-
-

Vibe Coding Cheatsheet

-

Interactive Developer Resource

-
-
-

- A professional showcase of TailwindCSS techniques with interactive features. Perfect for developers - looking to level up their styling game with copy-to-clipboard functionality. -

-
-
- - Interactive TailwindCSS Examples -
-
- - Copy-to-Clipboard Functionality -
-
- - Professional Development Patterns -
-
- - Explore Cheatsheet - -
- - {/* Password Security Guide */} -
-
-
- 🔐 -
-
-

Password Security Guide

-

Complete User Guide

-
-
-

- Your complete guide to password security and two-factor authentication. Learn how to manage dozens of - passwords without losing your mind, choose the right password manager, and set up 2FA without anxiety. -

-
-
- - 30-Day Password Security Roadmap -
-
- - Password Manager Comparison & Recommendations -
-
- - Two-Factor Authentication Setup Guide -
-
- - Priority-Based Account Security Strategy -
-
- - Explore Password Guide - -
- - {/* Privacy Pleasure */} -
-
-
- 🛡️ -
-
-

Privacy Pleasure

-

4-Week Journey to Digital Independence

-
-
-

- Building digital independence (slowly) in a world where billionaires monetize every click. A complete guide to password security, VPN protection, secure communication, and building your complete privacy system. -

-
-
- - Week 1: Password Foundation -
-
- - Week 2: ISP & VPN Protection -
-
- - Week 3: Secure Communication & File Sharing -
-
- - Week 4: Your Complete System -
-
- - Explore Privacy Pleasure - -
- - {/* AI Myth-Busting */} -
-
-
- 🧠 -
-
-

AI Myth-Busting

-

Critical Thinking Toolkit

-
-
-

- From the Wooden Snake's wisdom to bullshit detection: understand what AI actually is, what it isn't, - and how to use it responsibly in our tech-power-government era. -

-
-
- - Three Core AI Myths Debunked -
-
- - Critical Thinking Framework -
-
- - Free AI Learning Resources -
-
- - Explore AI Myth-Busting - -
- - {/* Digital Accessibility Legal Guide */} -
-
-
- ⚖️ -
-
-

Digital Accessibility Legal Guide

-

Starting Point for Business Owners

-
-
-

- Essential starting guide to digital accessibility laws, compliance requirements, and practical implementation - for business owners. Legal framework, risk management, and actionable first steps. -

-
-
- - Four Simple Tests You Can Do Right Now -
-
- - 90-Day Implementation Plan -
-
- - Legal Framework & Compliance Requirements -
-
- - Free Testing Tools & Resources -
-
- - Explore Accessibility Guide - -
- - {/* Back to Basics */} -
-
-
- 🏗️ -
-
-

Back to Basics

-

Digital Organization & AI-Ready Workflows

-
-
-

- Master the fundamental tech skills that make AI tools actually useful instead of frustrating. - Build the foundation that supports your creativity with the Wooden Snake's wisdom. -

-
-
- - The 3-Folder Rule for Digital Organization -
-
- - Creative Workflow Revolution -
-
- - Data Flow from Chaos to Conscious -
-
- - Basic Automation That Serves Creativity -
-
- - Explore Back to Basics - -
- - {/* Sourdough Corner */} -
-
-
- 🍞 -
-
-

Sourdough Corner

-

Craft Baking Resources

-
-
-

- Comprehensive sourdough baking guide with recipes, techniques, and Amanda's favorite tools. - Perfect for beginners and experienced bakers alike. -

-
-
- - Starter Creation & Maintenance -
-
- - Lazy Double Batch Recipe -
-
- - Tool Recommendations & Resources -
-
- - Explore Sourdough Guide - -
-
+ {/* Podcast & Newsletter Section */} diff --git a/src/components/blog/BlogContent.tsx b/src/components/blog/BlogContent.tsx index eb33ba0..37074e5 100644 --- a/src/components/blog/BlogContent.tsx +++ b/src/components/blog/BlogContent.tsx @@ -53,50 +53,140 @@ export function BlogContent({ posts }: BlogContentProps) { const searchParams = useSearchParams() const router = useRouter() const initialTag = searchParams.get('tag') + const initialSearch = searchParams.get('search') || '' const [selectedTag, setSelectedTag] = useState(initialTag) + const [searchQuery, setSearchQuery] = useState(initialSearch) - // Keep URL in sync with selectedTag + // Keep URL in sync with selectedTag and searchQuery useEffect(() => { + const params = new URLSearchParams() if (selectedTag) { - router.replace(`?tag=${encodeURIComponent(selectedTag)}`) - } else { - router.replace('?') + params.set('tag', selectedTag) } - }, [selectedTag, router]) + if (searchQuery) { + params.set('search', searchQuery) + } + const queryString = params.toString() + router.replace(queryString ? `?${queryString}` : '?') + }, [selectedTag, searchQuery, router]) - const filteredPosts = selectedTag - ? posts.filter(post => post.frontmatter.tags.includes(selectedTag)) - : posts + // Filter posts by tag and search query + const filteredPosts = posts.filter(post => { + // Filter by tag if selected + if (selectedTag && !post.frontmatter.tags.includes(selectedTag)) { + return false + } + + // Filter by search query if provided + if (searchQuery.trim()) { + const query = searchQuery.toLowerCase().trim() + const searchableText = [ + post.frontmatter.title, + post.frontmatter.description, + ...post.frontmatter.tags, + ].join(' ').toLowerCase() + + return searchableText.includes(query) + } + + return true + }) return ( <> + {/* Search Input */} +
+
+ setSearchQuery(e.target.value)} + className="w-full px-4 py-3 pl-12 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:border-transparent" + /> + + + + + {searchQuery && ( + + )} +
+ {searchQuery && ( +

+ Found {filteredPosts.length} {filteredPosts.length === 1 ? 'post' : 'posts'} matching "{searchQuery}" +

+ )} +
+ -
- {filteredPosts.map((post) => ( -
-

- - {post.frontmatter.title} - -

-
- - • - {post.frontmatter.author} -
-

{post.frontmatter.description}

-
- {post.frontmatter.tags.map((tag) => ( - - ))} -
-
- ))} -
+ {filteredPosts.length === 0 ? ( +
+

No posts found

+

+ {searchQuery || selectedTag + ? 'Try adjusting your search or filter criteria' + : 'No blog posts available'} +

+
+ ) : ( +
+ {filteredPosts.map((post) => ( +
+

+ + {post.frontmatter.title} + +

+
+ + • + {post.frontmatter.author} +
+

{post.frontmatter.description}

+
+ {post.frontmatter.tags.map((tag) => ( + + ))} +
+
+ ))} +
+ )} diff --git a/src/components/resources/ResourcesList.tsx b/src/components/resources/ResourcesList.tsx new file mode 100644 index 0000000..c9d4a83 --- /dev/null +++ b/src/components/resources/ResourcesList.tsx @@ -0,0 +1,201 @@ +'use client' + +import { useState, useMemo } from 'react' +import Link from 'next/link' +import { Resource } from '@/types/resources' + +interface ResourcesListProps { + resources: Resource[] +} + +export default function ResourcesList({ resources }: ResourcesListProps) { + const [searchQuery, setSearchQuery] = useState('') + + // Filter resources based on search query + const filteredResources = useMemo(() => { + if (!searchQuery.trim()) { + return resources + } + + const query = searchQuery.toLowerCase().trim() + return resources.filter(resource => { + const searchableText = [ + resource.title, + resource.subtitle, + resource.description, + ...resource.features, + ].join(' ').toLowerCase() + + return searchableText.includes(query) + }) + }, [resources, searchQuery]) + + return ( + <> + {/* Search Input */} +
+
+ setSearchQuery(e.target.value)} + className="w-full px-4 py-3 pl-12 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:border-transparent" + /> + + + + + {searchQuery && ( + + )} +
+ {searchQuery && ( +

+ Found {filteredResources.length} {filteredResources.length === 1 ? 'resource' : 'resources'} matching "{searchQuery}" +

+ )} +
+ + {/* Resources Grid */} + {filteredResources.length === 0 ? ( +
+

No resources found

+

+ {searchQuery + ? 'Try adjusting your search criteria' + : 'No resources available'} +

+
+ ) : ( +
+ {filteredResources.map((resource) => ( +
+
+
+ {resource.emoji} +
+
+

+ {resource.title} +

+

+ {resource.subtitle} +

+
+
+

+ {resource.description} +

+
+ {resource.features.map((feature, index) => ( +
+ + {feature} +
+ ))} +
+
+ + View Full Resource + + {resource.downloadHref && ( + + {resource.downloadLabel || 'Download PDF'} + + )} +
+
+ ))} +
+ )} + + ) +} + diff --git a/src/lib/resources.ts b/src/lib/resources.ts new file mode 100644 index 0000000..4d011c9 --- /dev/null +++ b/src/lib/resources.ts @@ -0,0 +1,178 @@ +import { Resource } from '@/types/resources' + +export const freeResources: Resource[] = [ + { + id: 'digital-spring-cleaning', + title: 'Digital Spring Cleaning', + subtitle: 'GRIT Framework Toolkit', + description: 'A comprehensive 4-page worksheet designed to help you refresh your digital life using the GRIT framework (Passion, Perseverance, Growth, Resilience). Perfect for monthly or quarterly reflection.', + emoji: '🌱', + features: [ + 'Digital Spring Cleaning Worksheet (PDF)', + 'Interactive Canva Template', + 'NAA Framework Guide (Notice, Adjust, Acknowledge)', + ], + href: '/digital-spring-cleaning', + downloadHref: '/digital-spring-cleaning/digitalspringcleaningWorksheet.pdf', + downloadLabel: 'Download PDF', + borderColor: 'green', + type: 'free', + }, + { + id: 'mindful-automation', + title: 'Mindful Automation', + subtitle: 'Y.O.U. Framework System', + description: 'Learn to build automation systems that work with your unique brain patterns. The Y.O.U. Framework (Your Brain, Optimize Energy, Understand Maintenance) creates sustainable, brain-friendly workflows.', + emoji: '⚙️', + features: [ + 'Y.O.U. Framework Guide (PDF)', + 'Error-Proofing Worksheet', + 'Weekly Deep Dive Resources', + ], + href: '/mindful-automation', + downloadHref: '/mindful-automation/youframework.pdf', + downloadLabel: 'Download PDF', + borderColor: 'green', + type: 'free', + }, + { + id: 'neuroinclusive-design', + title: 'Neuroinclusive Design', + subtitle: 'June 2025 Deep Dive', + description: 'Learn how designing for neurodivergent users creates better experiences for everyone—moving beyond accommodation to proactive inclusion with practical principles and tools.', + emoji: '🧠', + features: [ + 'Four Core Design Principles', + 'Five-Minute Accessibility Check', + 'Weekly Deep Dives & Newsletter Links', + ], + href: '/neuroinclusive-design', + borderColor: 'green', + type: 'free', + }, + { + id: 'tech-boundaries', + title: 'Tech Boundaries', + subtitle: 'July 2025 Deep Dive', + description: 'Small boundaries, big energy gains—learn to create digital systems that work with your brain, not against it. Transform tech overwhelm into creative fuel.', + emoji: '⚡', + features: [ + 'Three Core Boundary Pillars', + 'PARA Method & Energy-Aware Automation', + 'Weekly Deep Dives & Newsletter Links', + ], + href: '/tech-boundaries', + borderColor: 'green', + type: 'free', + }, + { + id: 'vibe-coding-cheatsheet', + title: 'Vibe Coding Cheatsheet', + subtitle: 'Interactive Developer Resource', + description: 'A professional showcase of TailwindCSS techniques with interactive features. Perfect for developers looking to level up their styling game with copy-to-clipboard functionality.', + emoji: '💻', + features: [ + 'Interactive TailwindCSS Examples', + 'Copy-to-Clipboard Functionality', + 'Professional Development Patterns', + ], + href: '/vibe-coding-cheatsheet', + borderColor: 'green', + type: 'free', + }, + { + id: 'password-security', + title: 'Password Security Guide', + subtitle: 'Complete User Guide', + description: 'Your complete guide to password security and two-factor authentication. Learn how to manage dozens of passwords without losing your mind, choose the right password manager, and set up 2FA without anxiety.', + emoji: '🔐', + features: [ + '30-Day Password Security Roadmap', + 'Password Manager Comparison & Recommendations', + 'Two-Factor Authentication Setup Guide', + 'Priority-Based Account Security Strategy', + ], + href: '/passwords', + borderColor: 'purple', + type: 'free', + }, + { + id: 'privacy-pleasure', + title: 'Privacy Pleasure', + subtitle: '4-Week Journey to Digital Independence', + description: 'Building digital independence (slowly) in a world where billionaires monetize every click. A complete guide to password security, VPN protection, secure communication, and building your complete privacy system.', + emoji: '🛡️', + features: [ + 'Week 1: Password Foundation', + 'Week 2: ISP & VPN Protection', + 'Week 3: Secure Communication & File Sharing', + 'Week 4: Your Complete System', + ], + href: '/privacy-pleasure', + borderColor: 'green', + type: 'free', + }, + { + id: 'ai-mythbusting', + title: 'AI Myth-Busting', + subtitle: 'Critical Thinking Toolkit', + description: "From the Wooden Snake's wisdom to bullshit detection: understand what AI actually is, what it isn't, and how to use it responsibly in our tech-power-government era.", + emoji: '🧠', + features: [ + 'Three Core AI Myths Debunked', + 'Critical Thinking Framework', + 'Free AI Learning Resources', + ], + href: '/ai-mythbusting', + borderColor: 'purple', + type: 'free', + }, + { + id: 'accessibility', + title: 'Digital Accessibility Legal Guide', + subtitle: 'Starting Point for Business Owners', + description: 'Essential starting guide to digital accessibility laws, compliance requirements, and practical implementation for business owners. Legal framework, risk management, and actionable first steps.', + emoji: '⚖️', + features: [ + 'Four Simple Tests You Can Do Right Now', + '90-Day Implementation Plan', + 'Legal Framework & Compliance Requirements', + 'Free Testing Tools & Resources', + ], + href: '/accessibility', + borderColor: 'purple', + type: 'free', + }, + { + id: 'back-to-basics', + title: 'Back to Basics', + subtitle: 'Digital Organization & AI-Ready Workflows', + description: "Master the fundamental tech skills that make AI tools actually useful instead of frustrating. Build the foundation that supports your creativity with the Wooden Snake's wisdom.", + emoji: '🏗️', + features: [ + 'The 3-Folder Rule for Digital Organization', + 'Creative Workflow Revolution', + 'Data Flow from Chaos to Conscious', + 'Basic Automation That Serves Creativity', + ], + href: '/back-to-basics', + borderColor: 'green', + type: 'free', + }, + { + id: 'sourdough', + title: 'Sourdough Corner', + subtitle: 'Craft Baking Resources', + description: "Comprehensive sourdough baking guide with recipes, techniques, and Amanda's favorite tools. Perfect for beginners and experienced bakers alike.", + emoji: '🍞', + features: [ + 'Starter Creation & Maintenance', + 'Lazy Double Batch Recipe', + 'Tool Recommendations & Resources', + ], + href: '/sourdough', + borderColor: 'green', + type: 'free', + }, +] + diff --git a/src/types/resources.ts b/src/types/resources.ts new file mode 100644 index 0000000..c8fad2b --- /dev/null +++ b/src/types/resources.ts @@ -0,0 +1,16 @@ +export type ResourceType = 'free' | 'premium' + +export interface Resource { + id: string + title: string + subtitle: string + description: string + emoji: string + features: string[] + href: string + downloadHref?: string + downloadLabel?: string + borderColor: 'green' | 'purple' + type: ResourceType +} +