Plus Site - Block organization and glob queries

[endigo9740]

Describe the feature in detail (code, mocks, or screenshots encouraged)

This will be a two parter:

Repo Block Organization

The free/premium repos need the Blocks section update to handle our scalable structure for long term support.

/blocks
    /marketing
        /hero-sections
            /react
                block-1.tsx
            /svelte
                block-1.svelte
        /...
    /applications
        /...
    /ecommerce
        /...
/...

Vite Glob Queries

We'll use Vite's import.meta.glob to "query" against directories, get counts, and retrieve the components and code to display.

1. Sections with file count

Glob everything at build time, then derive counts from the key paths at runtime:

const svelteBlocks = import.meta.glob('/blocks/**/*.svelte');

const sections: Record<string, number> = {};
for (const path of Object.keys(svelteBlocks)) {
  // path: /blocks/marketing/hero-sections/svelte/block-1.svelte
  const [, , category, section] = path.split('/');
  const key = `${category}/${section}`;
  sections[key] = (sections[key] ?? 0) + 1;
}
// { 'marketing/hero-sections': 3, 'applications/dashboards': 2, ... }

2. Query all blocks for a given framework

Glob all frameworks at build time, filter by framework param at runtime:

const allBlocks = import.meta.glob('/blocks/**/{react,svelte}/**/*.{tsx,svelte}');

function getBlocks(category: string, section: string, framework: string) {
  const prefix = `/blocks/${category}/${section}/${framework}/`;
  return Object.fromEntries(
    Object.entries(allBlocks).filter(([path]) => path.startsWith(prefix))
  );
}

Vite resolves the glob at build time, so the filter is just a runtime key lookup on a flat object — fast and fully tree-shakeable.

3. Single query or two for Svelte preview + framework code view

Two globs — you need them to be distinct because the two purposes require different import modes:

// For rendering: normal module imports (gives you Svelte component constructors)
const previewComponents = import.meta.glob('/blocks/**/svelte/*.svelte');

// For code display: raw string imports (all frameworks)
const rawCode = import.meta.glob('/blocks/**/*.{svelte,tsx,jsx,vue}', {
  query: '?raw',
  import: 'default',
});

You can't reuse a ?raw glob for rendering — it gives you a string, not a component. The two globs share the same path keys for .svelte files, so cross-referencing them is trivial.

4. ?raw for source code

Yes, exactly right. The Vite idiomatic form:

const rawCode = import.meta.glob('/blocks/**/*.svelte', {
  query: '?raw',
  import: 'default', // the raw string is the default export
});

// Usage (lazy-loaded)
const code = await rawCode['/blocks/marketing/hero-sections/svelte/block-1.svelte']();
// code is the full source string

The inline form also works for one-offs: import src from './block-1.svelte?raw'

---

Summary: the two-glob pattern

// Build-time: eager for counts/routing, lazy for actual loading
const svelteComponents = import.meta.glob('/blocks/**/svelte/*.svelte');
const allRawSource     = import.meta.glob('/blocks/**/*.{svelte,tsx,jsx,vue}', {
  query: '?raw', import: 'default',
});

Everything else — section lists, counts, framework filtering — is just key manipulation on those two objects.

Provide relevant links, wireframes, prototypes, or additional information.

No response

[endigo9740]

@Hugos68 here's our requirements.

Views

We'll have two views for displaying Block-related information

1. Browse Page (the top level view)

• Categories (applications, marketing, ecommerce) - represented as sections w/ header text labels
• Subcategories (heros, breadcrumbs, etc) - the list of block groupings under each category

2. Details Page

• The page that displays the actual blocks for that subcategory.
• If I tap heros, then this page would show me X many hero block variations

This is modeled after most Blocks sections for competitors:

• Tailwind Plus: https://tailwindcss.com/plus/ui-blocks
• Flowbite: https://flowbite.com/blocks/
• Etc

Visualized:

Browse Page

• Should allow some subdivision through categories. Typically see these as: applications, marketing, ecommerce
• Should display cards for each subcategory; this includes
  • A Lucide icon (maybe custom image/SVG later)
  • Name of the subcategory (ex: heros)
  • Count of the blocks contained within (note: may differ per framework; totals free + premium)
• Tapping a subcategory should take you to the details view.

NOTE: there may be some benefit to a Framework Picker on this view too if components and counts vary per each

Details View

• Should contain the subcategory name (ex: Heros) and description in the header
• Should provide a list of the available blocks for that subcategory (hero 1, hero 2, etc)
• Free blocks are listed first, premium blocks after
• For Free blocks, use the Preview component to show rendered component + code
• For Premium blocks, show only the obfuscated visual preview and a "locked" button; no code until Plus unlocked
• Note the Preview can always show the Svelte component, as I don't think we can render React within a SvelteKit project
• So a framework picker on the page changes ONLY the code view (.svelte vs .tsx)
• Limit the available framework list to frameworks the block is provided for (don't show Astro if .astro isn't present)

Meta Information

• The meta.json in the root of each block contains the Subcategory Lucide Icon string; then we match this with a blocks-icons.ts mapping within the Plus site codebase
• The meta.json contains the description to show on the Details View, in the <PageHeader>
• The meta.json ONLY exists in the Free repo, so it's co-located with the blocks (managed in one place). Doing so means it's open source for contributors to view/maintain. We do not need to replicate in the Premium repo, as this would be redundant.

NOTE: we don't need "descriptions" per block. We'll keep this simple and stripped down like Tailwind Plus. Just a page of examples.