feat: security fixes, performance optimizations, accessibility improvements, and cleanup

.gitignore

@@ -1,5 +1,7 @@
 # Dependencies
 node_modules
+pnpm-lock.yaml
+yarn.lock
 
 # Build outputs
 dist

CONTRIBUTING.md

@@ -1,9 +1,30 @@
+# Contributing to FolioLab
+
+Thank you for your interest in contributing!
+
+## Getting Started
+
+1. Install dependencies:
+```bash
 npm install
 ```
 
 2. Set up environment variables:
-Create a `.env` file with the required GitHub OAuth credentials.
+Create a `.env` file with the required GitHub OAuth credentials (see `.env.example`).
 
 3. Start the development server:
 ```bash
-npm run dev
+npm run dev
+```
+
+## Running Tests
+
+```bash
+npm run test:run
+```
+
+## Building
+
+```bash
+npm run build
+```

client/src/App.tsx

@@ -1,3 +1,4 @@
+import DataSourcesPage from "@/pages/data-sources";
 import { Switch, Route } from "wouter";
 import { queryClient } from "./lib/queryClient";
 import { QueryClientProvider } from "@tanstack/react-query";
@@ -24,6 +25,7 @@ function Router() {
         <Route path="/wizard" component={DataWizard} />
         <Route path="/select-items" component={SelectItems} />
         <Route path="/preview" component={PortfolioPreview} />
+        <Route path="/data-sources" component={DataSourcesPage} />
         <Route component={NotFound} />
       </Switch>
     </>

client/src/pages/data-sources.tsx

@@ -278,6 +278,7 @@ export default function DataSourcesPage() {
           <button
             onClick={() => setLocation(hasGitHubToken ? '/repos' : '/')}
             className="text-gray-600 hover:text-gray-900 mb-4 flex items-center gap-2"
+            aria-label={hasGitHubToken ? 'Back to GitHub Repos' : 'Back to Home'}
           >
             ← {hasGitHubToken ? 'Back to GitHub Repos' : 'Back to Home'}
           </button>
@@ -327,6 +328,7 @@ export default function DataSourcesPage() {
               <button
                 onClick={() => setActiveSource(null)}
                 className="text-gray-500 hover:text-gray-700"
+                aria-label="Close form"
               >
                 ✕
               </button>
@@ -375,6 +377,7 @@ export default function DataSourcesPage() {
               <button
                 onClick={() => setActiveSource(null)}
                 className="text-gray-500 hover:text-gray-700"
+                aria-label="Close form"
               >
                 ✕
               </button>
@@ -414,6 +417,7 @@ export default function DataSourcesPage() {
               <button
                 onClick={() => setActiveSource(null)}
                 className="text-gray-500 hover:text-gray-700"
+                aria-label="Close form"
               >
                 ✕
               </button>
@@ -465,6 +469,7 @@ export default function DataSourcesPage() {
               <button
                 onClick={() => setActiveSource(null)}
                 className="text-gray-500 hover:text-gray-700"
+                aria-label="Close form"
               >
                 ✕
               </button>
@@ -516,6 +521,7 @@ export default function DataSourcesPage() {
               <button
                 onClick={() => setActiveSource(null)}
                 className="text-gray-500 hover:text-gray-700"
+                aria-label="Close form"
               >
                 ✕
               </button>
@@ -614,6 +620,7 @@ export default function DataSourcesPage() {
             <button
               onClick={() => setLocation('/repos')}
               className="bg-white border-2 border-gray-300 text-gray-700 py-3 px-8 rounded-lg hover:bg-gray-50 transition-all shadow-lg"
+              aria-label="Back to GitHub Selection"
             >
               ← Back to GitHub Selection
             </button>

client/src/pages/home.tsx

@@ -1,6 +1,12 @@
 import { Link } from "wouter";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
 import { Github, Shield, Globe, FileQuestion, Mail, Info, Database } from "lucide-react";
 import { clearAllData } from "@/lib/queryClient";
 import { clearStorage } from "@/lib/storage";
@@ -103,34 +109,49 @@ export default function Home() {
             <div className="mt-20">
               <h2 className="text-3xl font-bold mb-8">Frequently Asked Questions</h2>
               <div className="grid gap-6 text-left">
-                <div>
-                  <h3 className="font-semibold mb-2">How does it work?</h3>
-                  <p className="text-muted-foreground">
-                    Import content from GitHub, GitLab, Bitbucket, Medium, your blog, or add custom content.
-                    Select what you want to showcase, and we'll generate beautiful summaries using AI.
-                    Deploy your portfolio with one click to GitHub Pages or Vercel.
-                  </p>
-                </div>
-                <div>
-                  <h3 className="font-semibold mb-2">What sources can I use?</h3>
-                  <p className="text-muted-foreground">
-                    You can import from GitHub (OAuth), GitLab (personal access token), Bitbucket (app password),
-                    Medium (username), any blog RSS feed, or create custom free-form content. Mix and match
-                    as many sources as you like!
-                  </p>
-                </div>
-                <div>
-                  <h3 className="font-semibold mb-2">Is it free to use?</h3>
-                  <p className="text-muted-foreground">
-                    FolioLab is open-source and free to use. 
-                  </p>
-                </div>
-                <div>
-                  <h3 className="font-semibold mb-2">What data do you collect?</h3>
-                  <p className="text-muted-foreground">
-                    We don't store any of your data.
-                  </p>
-                </div>
+                <Accordion type="single" collapsible className="w-full">
+                  <AccordionItem value="item-1">
+                    <AccordionTrigger className="text-lg font-semibold">
+                      How does it work?
+                    </AccordionTrigger>
+                    <AccordionContent className="text-muted-foreground text-base">
+                      Import content from GitHub, GitLab, Bitbucket, Medium, your
+                      blog, or add custom content. Select what you want to showcase,
+                      and we'll generate beautiful summaries using AI. Deploy your
+                      portfolio with one click to GitHub Pages or Vercel.
+                    </AccordionContent>
+                  </AccordionItem>
+
+                  <AccordionItem value="item-2">
+                    <AccordionTrigger className="text-lg font-semibold">
+                      What sources can I use?
+                    </AccordionTrigger>
+                    <AccordionContent className="text-muted-foreground text-base">
+                      You can import from GitHub (OAuth), GitLab (personal access
+                      token), Bitbucket (app password), Medium (username), any blog
+                      RSS feed, or create custom free-form content. Mix and match as
+                      many sources as you like!
+                    </AccordionContent>
+                  </AccordionItem>
+
+                  <AccordionItem value="item-3">
+                    <AccordionTrigger className="text-lg font-semibold">
+                      Is it free to use?
+                    </AccordionTrigger>
+                    <AccordionContent className="text-muted-foreground text-base">
+                      FolioLab is open-source and free to use.
+                    </AccordionContent>
+                  </AccordionItem>
+
+                  <AccordionItem value="item-4">
+                    <AccordionTrigger className="text-lg font-semibold">
+                      What data do you collect?
+                    </AccordionTrigger>
+                    <AccordionContent className="text-muted-foreground text-base">
+                      We don't store any of your data.
+                    </AccordionContent>
+                  </AccordionItem>
+                </Accordion>
               </div>
             </div>
 

client/src/pages/portfolio-preview.tsx

@@ -525,6 +525,7 @@ export default function PortfolioPreview() {
                           variant="ghost"
                           className="absolute top-0 right-0 opacity-0 group-hover:opacity-100 transition-opacity"
                           onClick={() => startEditingItemTitle(item.id, getItemTitle(item))}
+                          aria-label="Edit item title"
                         >
                           <Edit2 className="h-4 w-4" />
                         </Button>
@@ -539,7 +540,7 @@ export default function PortfolioPreview() {
                     </span>
                   )}
                   {item.url && (
-                    <Button variant="outline" size="icon" asChild>
+                    <Button variant="outline" size="icon" asChild aria-label="View item">
                       <a
                         href={item.url}
                         target="_blank"
@@ -594,6 +595,7 @@ export default function PortfolioPreview() {
                           size="sm"
                           variant="ghost"
                           onClick={() => startEditingItem(item.id, getItemSummary(item))}
+                          aria-label="Edit item summary"
                         >
                           <Edit2 className="h-4 w-4" />
                         </Button>
@@ -603,6 +605,7 @@ export default function PortfolioPreview() {
                           onClick={() => deleteItem(item.id)}
                           className="text-red-500 hover:text-red-700"
                           title="Remove from portfolio"
+                          aria-label="Remove from portfolio"
                         >
                           <Trash2 className="h-4 w-4" />
                         </Button>
@@ -761,6 +764,7 @@ export default function PortfolioPreview() {
                     variant="ghost"
                     className="absolute top-0 right-0 opacity-0 group-hover:opacity-100 transition-opacity"
                     onClick={startEditingTitle}
+                    aria-label="Edit portfolio title"
                   >
                     <Edit2 className="h-4 w-4" />
                   </Button>
@@ -806,6 +810,7 @@ export default function PortfolioPreview() {
                     variant="ghost"
                     className="absolute top-0 right-0 opacity-0 group-hover:opacity-100 transition-opacity"
                     onClick={startEditingIntro}
+                    aria-label="Edit introduction"
                   >
                     <Edit2 className="h-4 w-4" />
                   </Button>
@@ -882,6 +887,7 @@ export default function PortfolioPreview() {
                     variant="ghost"
                     className="absolute top-0 right-0 opacity-0 group-hover:opacity-100 transition-opacity"
                     onClick={startEditingSkills}
+                    aria-label="Edit skills"
                   >
                     <Edit2 className="h-4 w-4" />
                   </Button>
@@ -941,6 +947,7 @@ export default function PortfolioPreview() {
                     variant="ghost"
                     className="absolute top-0 right-0 opacity-0 group-hover:opacity-100 transition-opacity"
                     onClick={startEditingInterests}
+                    aria-label="Edit interests"
                   >
                     <Edit2 className="h-4 w-4" />
                   </Button>
@@ -1056,6 +1063,7 @@ export default function PortfolioPreview() {
                                     variant="ghost"
                                     className="absolute top-0 right-0 opacity-0 group-hover:opacity-100 transition-opacity"
                                     onClick={() => startEditingItemTitle(item.id, getItemTitle(item))}
+                                    aria-label="Edit item title"
                                   >
                                     <Edit2 className="h-4 w-4" />
                                   </Button>
@@ -1070,7 +1078,7 @@ export default function PortfolioPreview() {
                               </span>
                             )}
                             {item.url && (
-                              <Button variant="outline" size="icon" asChild>
+                              <Button variant="outline" size="icon" asChild aria-label="View item">
                                 <a
                                   href={item.url}
                                   target="_blank"
@@ -1125,6 +1133,7 @@ export default function PortfolioPreview() {
                                     size="sm"
                                     variant="ghost"
                                     onClick={() => startEditingItem(item.id, getItemSummary(item))}
+                                    aria-label="Edit item summary"
                                   >
                                     <Edit2 className="h-4 w-4" />
                                   </Button>
@@ -1134,6 +1143,7 @@ export default function PortfolioPreview() {
                                     onClick={() => deleteItem(item.id)}
                                     className="text-red-500 hover:text-red-700"
                                     title="Remove from portfolio"
+                                    aria-label="Remove from portfolio"
                                   >
                                     <Trash2 className="h-4 w-4" />
                                   </Button>

client/src/pages/repo-select.tsx

@@ -8,7 +8,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { Input } from "@/components/ui/input";
 import { apiRequest, queryClient } from "@/lib/queryClient";
 import { Repository } from "@shared/schema";
-import { Search, ExternalLink } from "lucide-react";
+import { Search, ExternalLink, X } from "lucide-react";
 import { useToast } from "@/hooks/use-toast";
 import { toggleRepositorySelection, saveRepositories, getRepositories, getGitHubToken } from "@/lib/storage";
 import { AnalysisProgress } from "@/components/analysis-progress";
@@ -273,8 +273,21 @@ export default function RepoSelect() {
                   setSearchQuery(e.target.value);
                   setCurrentPage(1);
                 }}
-                className="pl-9"
+                className="pl-9 pr-9"
               />
+              {searchQuery && (
+                <button
+                  type="button"
+                  onClick={() => {
+                    setSearchQuery("");
+                    setCurrentPage(1);
+                  }}
+                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-muted-foreground hover:text-foreground p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-ring"
+                  aria-label="Clear search"
+                >
+                  <X className="h-4 w-4" />
+                </button>
+              )}
             </div>
             <div className="flex items-center gap-4">
               <div className="flex items-center gap-2">
@@ -471,8 +484,9 @@ export default function RepoSelect() {
                             onClick={() => repo.id && toggleRepo({ id: repo.id, selected: false })}
                             className="ml-2 h-6 w-6 p-0 text-muted-foreground hover:text-destructive"
                             title="Remove from selection"
+                            aria-label={`Remove ${repo.displayName || repo.name} from selection`}
                           >
-                            ×
+                            <X className="h-4 w-4" />
                           </Button>
                         </div>
                       </CardHeader>