Test MDX Content

This is a test MDX file with proper frontmatter. It should now appear in your resources collection.

🎯 Relative Path Solution for Imagetools

✅ NEW: Relative Paths with Custom Wrappers

🔄 Two Images Side by Side (50% each)

🔄 Original: Public Paths (Still Work)

Different Format Generation

Quality Optimization

Interactive Image Gallery

🆕 Glob Pattern Gallery - Auto-load from Directory!

Manual Images (Original Method)

🆕 Glob Pattern Support:

Manual Usage:

import RelativeImage from "@polymech/astro-base/components/RelativeImage.astro";
<RelativeImage src="./my-image.jpg" alt="My image" width={400} />

FileTree Component Example

🆕 Auto-Generated FileTree with Glob Patterns!

No more manually typing out file structures! Just like RelativeGallery, FileTree now supports glob patterns with clickable file links:

• Directoryresources/

  • Directorycassandra/

    • example.spec.ts
    • home.mdx
    • motion.mdx
    • operator.mdx
    • process.mdx
    • profiles.mdx
    • signalplots.mdx
  • Directoryinfo/

    • about.mdx
    • contact.mdx
    • cookies.md
  • Directoryinternal/

    • astro-development.mdx
    • collections.mdx
    • FileTree.mdx
    • Masonry.mdx
    • sidebar.mdx
    • test.mdx
    • web-performance.md
• config.ts

Specific Directory Structure (with custom URL prefix)

• No files found matching pattern: ../components/**/*
  Searched in: C:/Users/zx/Desktop/polymech/site2/src/content/components

VS Code Integration Example

• No files found matching pattern: ../src/components/polymech/**/*.{ts,astro}
  Searched in: C:/Users/zx/Desktop/polymech/site2/src/content/src/components/polymech

🆕 Thumbnail View (Windows Explorer Style)

Perfect for browsing images and visual files with modern, subtle link styling (no more aggressive blue!):

Large Thumbnails for Detailed Preview

Small Thumbnails for Compact View

Debug example with current directory images and proper icons:

Mixed content with folders and files:

For comparison, here’s a tree view of the same files:

• No files found matching pattern: ./*.jpg
  Searched in: C:/Users/zx/Desktop/polymech/site2/src/content/es

Debug Example - Non-existent Path

This will show the “No files found” message with absolute path:

• No files found matching pattern: ./another-missing-dir/**/*.png
  Searched in: C:/Users/zx/Desktop/polymech/site2/src/content/es/another-missing-dir

Manual FileTree (Original Method)

Here’s an example of the FileTree component with manual structure:

• Directorypublic/

  • Directoryimages/

    • logo.svg
    • hero.jpg
  • favicon.ico
• Directorysrc/

  • Directorycomponents/

    • Header.astro Important component
    • Footer.astro
    • Navigation.astro
  • Directorylayouts/

    • Layout.astro
  • Directorypages/

    • index.astro
    • about.astro
    • Directoryblog/

      • […slug].astro
  • Directorystyles/

    • global.css
• astro.config.mjs
• package.json
• README.md

Advanced FileTree Features

• Directorysrc/

  • Directorycomponents/

    • Directoryui/

      • Button.tsx React component
      • Input.vue Vue component
      • Modal.svelte Svelte component
    • Directorylayouts/

      • BaseLayout.astro
      • BlogLayout.astro
  • Directoryutils/

    • helpers.ts
    • constants.js
  • Directorytypes/

    • index.d.ts TypeScript definitions
  • …
• Directorytests/

  • Directoryunit/

    • components.test.ts
  • Directorye2e/

    • homepage.spec.ts
• Directorydocs/

  • getting-started.md Start here!
  • api-reference.md
• Directory.github/

  • Directoryworkflows/

    • ci.yml
• package.json
• tsconfig.json

More Glob Examples

Show just the current directory:

• No files found matching pattern: ./*
  Searched in: C:/Users/zx/Desktop/polymech/site2/src/content/es

Show all TypeScript files in the project:

• Directoryresources/

  • Directorycassandra/

    • example.spec.ts
• config.ts

Show configuration files only:

FileTree Usage Examples

// Tree view (default) - hierarchical structure
<FileTree glob="../src/**/*.astro" maxDepth={3} />

// Thumbnail view - Windows Explorer style grid
<FileTree 
  glob="../public/images/**/*.{jpg,png,gif}" 
  view="thumbs"
  thumbSize="medium"
/>

// Large thumbnails for detailed preview
<FileTree 
  glob="../assets/**/*.{jpg,png}" 
  view="thumbs"
  thumbSize="large"
  maxDepth={2}
/>

// Small thumbnails for compact display
<FileTree 
  glob="../gallery/**/*" 
  view="thumbs"
  thumbSize="small"
  linkFiles={false}
/>

// Custom URL prefix for GitHub integration
<FileTree 
  glob="../**/*.ts" 
  urlPrefix="https://github.com/username/repo/blob/main"
  maxDepth={3} 
/>

// VS Code integration - files open in editor
<FileTree 
  glob="../**/*.astro" 
  urlPrefix="vscode://file"
  maxDepth={2} 
/>

// Disable links if you just want display
<FileTree 
  glob="../**/*" 
  linkFiles={false}
  maxDepth={2} 
/>

// Show hidden files with custom dev server URL
<FileTree 
  glob="../**/*" 
  showHidden={true} 
  urlPrefix="http://localhost:3000"
  maxDepth={2} 
/>

// Manual structure (original way - no links)
<FileTree>
- src/
  - components/
    - Header.astro
</FileTree>

View Modes:

• Tree View (view="tree"): Traditional hierarchical file tree with folders and files
• Thumbnail View (view="thumbs"): Grid layout like Windows Explorer with image previews

Thumbnail Sizes:

• Small (thumbSize="small"): 80px thumbnails for compact display
• Medium (thumbSize="medium"): 120px thumbnails (default)
• Large (thumbSize="large"): 160px thumbnails for detailed preview

Link Types Supported:

• Default: file:// protocol for local file system
• VS Code: vscode://file/ for opening in VS Code
• GitHub: https://github.com/user/repo/blob/main/ for web viewing
• Custom: Any URL prefix you provide
• Disabled: Set linkFiles={false} for display only

Breadcrumb Navigation

The Resources collection now includes automatic breadcrumb navigation!

Features:

• Auto-generated: Breadcrumbs are automatically created based on your URL path
• Smart labeling: Uses your page title for the current page, formatted directory names for paths
• Accessible: Full ARIA support with proper labels and navigation structure
• Responsive: Mobile-friendly design that adapts to smaller screens
• Customizable: Easy to disable per page or customize styling

Usage:

Enable breadcrumbs (default behavior):

---
title: "My Page Title"
# Breadcrumbs will show automatically
---

Disable breadcrumbs for a specific page:

---
title: "My Page Title" 
breadcrumb: false
---

Example Breadcrumb Path:

For a page at /resources/guides/getting-started/, the breadcrumb would show:

Home / Resources / Guides / Getting Started

The breadcrumb component is reusable and can be easily integrated into other collection layouts as needed.

🆕 Sidebar Autogenerated Nodes with Sorting

The sidebar now supports configurable sorting for autogenerated nodes! By default, all autogenerated sidebar sections use alphabetical sorting.

Available Sort Functions:

1. 'alphabetical' (Default): Sorts items alphabetically by label, with files before groups
2. 'date': Sorts by pubDate frontmatter field (newest first), fallback to alphabetical
3. 'custom': Use your own custom sorting function

Configuration Examples:

Basic Alphabetical Sorting (Default)

// src/config/sidebar.ts
export const sidebarConfig: SidebarGroup[] = [
  {
    label: 'Resources',
    autogenerate: { 
      directory: 'resources',
      collapsed: false,
      sortBy: 'alphabetical'  // This is the default
    },
  },
];

Date-based Sorting (Newest First)

{
  label: 'Blog Posts',
  autogenerate: { 
    directory: 'blog',
    collapsed: false,
    sortBy: 'date'  // Requires pubDate in frontmatter
  },
}

Custom Sorting Function

{
  label: 'Custom Sorted',
  autogenerate: { 
    directory: 'docs',
    collapsed: false,
    sortBy: 'custom',
    customSort: (a, b) => {
      // Custom logic here - example: prioritize certain files
      if (a.label.startsWith('Getting Started')) return -1;
      if (b.label.startsWith('Getting Started')) return 1;
      return a.label.localeCompare(b.label);
    }
  },
}

Features:

• Hierarchical sorting: Applies to both files and subdirectories
• Files before groups: Files always appear before subdirectory groups in alphabetical mode
• Fallback support: Date sorting falls back to alphabetical when no dates are available
• Deep nesting: Sorting applies recursively to all nested levels
• Type safety: Full TypeScript support with proper type definitions

Migration:

Existing configurations will continue to work unchanged - alphabetical sorting is now the explicit default instead of being hardcoded.

Mermaid Diagrams

Now we have full support for Mermaid diagrams in MDX! Here are some examples:

Flowchart Example

Sequence Diagram

Git Flow Diagram

Class Diagram

State Diagram

Project Timeline