refactor: clean up catalog→plots rename across frontend, backend, docs

Revert retro UI additions on plots page (man-page header, comment dividers,
statusline, $-prompt search, box-drawing card headers, cat-style code
reveal). Keep the catalog→plots route rename and make it fully consistent:

- Backend: /seo-proxy/catalog → /seo-proxy/plots, /og/catalog.png →
  /og/plots.png, sitemap now includes /plots and /specs, analytics
  page key catalog → plots; new /seo-proxy/specs endpoint.
- Frontend: rename CatalogPage.tsx → PlotsPage.tsx (and test),
  CATALOG_SIZES → SPECS_SIZES (now correctly reflects its only caller,
  SpecsListPage), catalog_rotate event → plot_rotate, CatalogSpec →
  SpecListItem, catalogSpecs → specList, catalogRef → plotsRef.
- SpecsListPage was incorrectly self-identifying as /plots after the
  rename (title, h1, canonical, trackPageview all said plots). Fix to
  use /specs consistently.
- Docs: update seo.md, api.md, plausible.md, contributing.md.
  Brand-voice "catalogue" in brand.md / hero copy left intentionally.

Frontend tests: 350/350 pass. Backend tests: 183/183 pass. tsc clean.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: MarkusNeusinger

api/analytics.py

@@ -148,7 +148,7 @@ def track_og_image(
 
     Args:
         request: FastAPI request for headers
-        page: Page type ('home', 'catalog', 'spec_overview', 'spec_detail')
+        page: Page type ('home', 'plots', 'spec_overview', 'spec_detail')
         spec: Spec ID (optional)
         library: Library ID (optional)
         filters: Query params for filtered home page (e.g., {'lib': 'plotly', 'dom': 'statistics'})
@@ -160,8 +160,8 @@ def track_og_image(
     # Build URL based on page type
     if page == "home":
         url = "https://anyplot.ai/"
-    elif page == "catalog":
-        url = "https://anyplot.ai/catalog"
+    elif page == "plots":
+        url = "https://anyplot.ai/plots"
     elif spec is not None and library:
         url = f"https://anyplot.ai/python/{spec}/{library}"
     elif spec is not None:

api/routers/og_images.py

@@ -50,10 +50,10 @@ async def get_home_og_image(request: Request) -> Response:
     )
 
 
-@router.get("/catalog.png")
-async def get_catalog_og_image(request: Request) -> Response:
-    """OG image for catalog page with tracking."""
-    track_og_image(request, page="catalog")
+@router.get("/plots.png")
+async def get_plots_og_image(request: Request) -> Response:
+    """OG image for plots page with tracking."""
+    track_og_image(request, page="plots")
 
     return Response(
         content=_get_static_og_image(), media_type="image/png", headers={"Cache-Control": "public, max-age=86400"}

api/routers/seo.py

@@ -28,7 +28,8 @@ def _build_sitemap_xml(specs: list) -> str:
         '<?xml version="1.0" encoding="UTF-8"?>',
         '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">',
         "  <url><loc>https://anyplot.ai/</loc></url>",
-        "  <url><loc>https://anyplot.ai/catalog</loc></url>",
+        "  <url><loc>https://anyplot.ai/plots</loc></url>",
+        "  <url><loc>https://anyplot.ai/specs</loc></url>",
         "  <url><loc>https://anyplot.ai/mcp</loc></url>",
         "  <url><loc>https://anyplot.ai/legal</loc></url>",
         "  <url><loc>https://anyplot.ai/stats</loc></url>",
@@ -83,7 +84,7 @@ async def _refresh_sitemap() -> str:
 
 # Route through API for tracking (was: anyplot.ai/og-image.png)
 DEFAULT_HOME_IMAGE = "https://api.anyplot.ai/og/home.png"
-DEFAULT_CATALOG_IMAGE = "https://api.anyplot.ai/og/catalog.png"
+DEFAULT_PLOTS_IMAGE = "https://api.anyplot.ai/og/plots.png"
 DEFAULT_DESCRIPTION = "library-agnostic, ai-powered plotting."
 
 
@@ -103,7 +104,7 @@ async def get_sitemap(db: AsyncSession | None = Depends(optional_db)):
     """
     Generate dynamic XML sitemap for SEO.
 
-    Includes root, catalog page, and all specs with implementations.
+    Includes root, plots/specs pages, and all specs with implementations.
     """
     if db is None:
         return Response(content=_STATIC_SITEMAP, media_type="application/xml")
@@ -143,15 +144,28 @@ async def seo_home(request: Request):
     )
 
 
-@router.get("/seo-proxy/catalog")
-async def seo_catalog():
-    """Bot-optimized catalog page with correct og:tags."""
+@router.get("/seo-proxy/plots")
+async def seo_plots():
+    """Bot-optimized plots page with correct og:tags."""
     return HTMLResponse(
         BOT_HTML_TEMPLATE.format(
-            title="Catalog | anyplot.ai",
-            description="Browse all Python plotting specifications alphabetically. Find matplotlib, seaborn, plotly, bokeh, altair examples.",
-            image=DEFAULT_CATALOG_IMAGE,
-            url="https://anyplot.ai/catalog",
+            title="plots | anyplot.ai",
+            description="Browse and filter Python visualization examples across 9 libraries: matplotlib, seaborn, plotly, bokeh, altair, plotnine, pygal, highcharts, lets-plot.",
+            image=DEFAULT_PLOTS_IMAGE,
+            url="https://anyplot.ai/plots",
+        )
+    )
+
+
+@router.get("/seo-proxy/specs")
+async def seo_specs():
+    """Bot-optimized specs page with correct og:tags."""
+    return HTMLResponse(
+        BOT_HTML_TEMPLATE.format(
+            title="specs | anyplot.ai",
+            description="Browse all Python plotting specifications alphabetically.",
+            image=DEFAULT_PLOTS_IMAGE,
+            url="https://anyplot.ai/specs",
         )
     )
 

app/src/components/CodeHighlighter.tsx

@@ -50,23 +50,13 @@ export default function CodeHighlighter({ code }: CodeHighlighterProps) {
     <SyntaxHighlighter
       language="python"
       style={okabeItoDark}
-      showLineNumbers
-      lineNumberStyle={{
-        color: '#4A4A44',
-        fontSize: '0.75rem',
-        minWidth: '2.5em',
-        paddingRight: '1em',
-        borderRight: '1px solid rgba(255,255,255,0.06)',
-        marginRight: '1em',
-        userSelect: 'none',
-      }}
       customStyle={{
         margin: 0,
         padding: '28px 32px',
         fontSize: '0.85rem',
         fontFamily: typography.fontFamily,
         background: '#0E0E0C',
-        borderRadius: '0 0 12px 12px',
+        borderRadius: '12px',
         lineHeight: 1.7,
       }}
     >

app/src/components/FilterBar.tsx

@@ -339,20 +339,19 @@ export function FilterBar({
           position: { xs: 'static', md: 'relative' },
         }}
       >
-        {/* Editor statusline - absolute left (desktop only) */}
+        {/* Progress counter - absolute left (desktop only) */}
         {!isMobile && currentTotal > 0 && (
           <Typography
             sx={{
               position: 'absolute',
               left: 0,
               fontFamily: typography.fontFamily,
-              fontSize: '10px',
+              fontSize: fontSize.sm,
               color: semanticColors.mutedText,
               whiteSpace: 'nowrap',
-              letterSpacing: '0.04em',
             }}
           >
-            plots:{currentTotal}  showing:{displayedCount}  ·  {scrollPercent}%  ·  python
+            {scrollPercent}% · {currentTotal}
           </Typography>
         )}
         {/* Toolbar actions - absolute right (desktop only) */}
@@ -451,33 +450,17 @@ export function FilterBar({
             '&:focus': isSearchExpanded ? {} : { outline: `2px solid ${colors.primary}`, outlineOffset: 2 },
           }}
         >
-          {isSearchExpanded ? (
-            <Box
-              component="span"
+          <Tooltip title={isSearchExpanded ? '' : 'search'}>
+            <SearchIcon
+              className="search-icon"
               sx={{
-                fontFamily: typography.fontFamily,
-                fontSize: fontSize.base,
-                color: colors.primary,
-                fontWeight: 700,
+                color: colors.gray[500],
+                fontSize: isSearchExpanded ? '1rem' : '1.25rem',
+                transition: 'all 0.2s ease',
                 flexShrink: 0,
-                lineHeight: 1,
               }}
-            >
-              $
-            </Box>
-          ) : (
-            <Tooltip title="search">
-              <SearchIcon
-                className="search-icon"
-                sx={{
-                  color: colors.gray[500],
-                  fontSize: '1.25rem',
-                  transition: 'all 0.2s ease',
-                  flexShrink: 0,
-                }}
-              />
-            </Tooltip>
-          )}
+            />
+          </Tooltip>
           <label htmlFor="filter-search" style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden', clip: 'rect(0,0,0,0)' }}>
             {selectedCategory ? `Search ${FILTER_LABELS[selectedCategory]}` : 'Search filters'}
           </label>
@@ -486,7 +469,7 @@ export function FilterBar({
             id="filter-search"
             name="filter-search"
             inputProps={{ 'aria-label': selectedCategory ? `Search ${FILTER_LABELS[selectedCategory]}` : 'Search filters' }}
-            placeholder={selectedCategory ? FILTER_LABELS[selectedCategory] : 'grep plots/'}
+            placeholder={selectedCategory ? FILTER_LABELS[selectedCategory] : ''}
             value={searchQuery}
             onChange={(e) => {
               setSearchQuery(e.target.value);
@@ -553,13 +536,12 @@ export function FilterBar({
             <Typography
               sx={{
                 fontFamily: typography.fontFamily,
-                fontSize: '10px',
+                fontSize: fontSize.sm,
                 color: semanticColors.mutedText,
                 whiteSpace: 'nowrap',
-                letterSpacing: '0.04em',
               }}
             >
-              {currentTotal} plots · {scrollPercent}%
+              {scrollPercent}% · {currentTotal}
             </Typography>
           ) : (
             <Box />

app/src/components/ImageCard.tsx

@@ -152,24 +152,6 @@ export const ImageCard = memo(function ImageCard({
           },
         }}
       >
-        {/* Box-drawing style header */}
-        <Box sx={{
-          fontFamily: typography.fontFamily,
-          fontSize: '9px',
-          color: 'var(--ink-muted)',
-          opacity: 0.4,
-          px: 1.5,
-          py: 0.5,
-          display: 'flex',
-          justifyContent: 'space-between',
-          letterSpacing: '0.02em',
-          borderBottom: '1px solid var(--rule)',
-          transition: 'opacity 0.2s',
-          '.MuiCard-root:hover &': { opacity: 0.7 },
-        }}>
-          <span>┌ {image.spec_id}</span>
-          <span>{image.library} ┐</span>
-        </Box>
         <Box component="picture" sx={{ display: 'contents' }}>
           <source
             type="image/webp"

app/src/components/SpecTabs.tsx

@@ -346,30 +346,11 @@ export function SpecTabs({
                 {copied ? <CheckIcon color="success" /> : <ContentCopyIcon fontSize="small" />}
               </IconButton>
             </Tooltip>
-            {/* cat-style terminal header */}
-            <Box sx={{
-              fontFamily: typography.fontFamily,
-              fontSize: '11px',
-              color: '#6E6D66',
-              bgcolor: '#0E0E0C',
-              px: '32px',
-              pt: 2,
-              pb: 0,
-              borderRadius: '12px 12px 0 0',
-              letterSpacing: '0.04em',
-            }}>
-              <Box component="span" sx={{ color: '#009E73' }}>$</Box> cat {specId}/{libraryId}.py
-              <Box sx={{
-                mt: 1,
-                borderBottom: '1px solid rgba(255,255,255,0.06)',
-              }} />
-            </Box>
             <Box
               sx={{
                 bgcolor: colors.background,
                 p: 3,
-                pt: 0,
-                borderRadius: '0 0 12px 12px',
+                borderRadius: 1,
               }}
             >
               {highlightedCode}

app/src/pages/HomePage.test.tsx

@@ -99,7 +99,7 @@ describe('HomePage', () => {
     expect(screen.getByTestId('science')).toBeInTheDocument();
   });
 
-  it('renders catalog components (filterbar, grid, footer)', () => {
+  it('renders plots components (filterbar, grid, footer)', () => {
     render(<HomePage />);
     expect(screen.getByTestId('filterbar')).toBeInTheDocument();
     expect(screen.getByTestId('images-grid')).toBeInTheDocument();

app/src/pages/HomePage.tsx

@@ -94,7 +94,7 @@ export function HomePage() {
 
   // Refs
   const searchInputRef = useRef<HTMLInputElement>(null);
-  const catalogRef = useRef<HTMLDivElement>(null);
+  const plotsRef = useRef<HTMLDivElement>(null);
 
   const noFilters = isFiltersEmpty(activeFilters);
 
@@ -148,13 +148,13 @@ export function HomePage() {
     (library: string) => {
       handleAddFilter('lib', library);
       setTimeout(() => {
-        catalogRef.current?.scrollIntoView({ behavior: 'smooth' });
+        plotsRef.current?.scrollIntoView({ behavior: 'smooth' });
       }, 100);
     },
     [handleAddFilter]
   );
 
-  // catalogRef used for library card clicks to scroll to grid
+  // plotsRef used for library card clicks to scroll to grid
 
   // Global keyboard shortcuts
   useEffect(() => {
@@ -215,8 +215,8 @@ export function HomePage() {
         </Alert>
       )}
 
-      {/* Catalog section — always visible */}
-      <Box ref={catalogRef}>
+      {/* Plots section — always visible */}
+      <Box ref={plotsRef}>
         <FilterBar
           activeFilters={activeFilters}
           filterCounts={filterCounts}

app/src/pages/CatalogPage.test.tsx app/src/pages/PlotsPage.test.tsxapp/src/pages/CatalogPage.test.tsx renamed to app/src/pages/PlotsPage.test.tsx

@@ -51,26 +51,26 @@ vi.mock('../components/Footer', () => ({
   Footer: () => <div data-testid="footer">Footer</div>,
 }));
 
-import { CatalogPage } from './CatalogPage';
+import { PlotsPage } from './PlotsPage';
 
-describe('CatalogPage', () => {
+describe('PlotsPage', () => {
   beforeEach(() => {
     vi.clearAllMocks();
   });
 
   it('renders FilterBar and ImagesGrid', () => {
-    render(<CatalogPage />);
+    render(<PlotsPage />);
     expect(screen.getByTestId('filterbar')).toBeInTheDocument();
     expect(screen.getByTestId('images-grid')).toBeInTheDocument();
   });
 
   it('renders footer', () => {
-    render(<CatalogPage />);
+    render(<PlotsPage />);
     expect(screen.getByTestId('footer')).toBeInTheDocument();
   });
 
   it('renders Helmet for SEO', () => {
-    render(<CatalogPage />);
+    render(<PlotsPage />);
     expect(screen.getByTestId('helmet')).toBeInTheDocument();
   });
 });