Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add Starter template menu in homepage #884

Merged
merged 5 commits into from
Dec 24, 2024

Conversation

thecodacus
Copy link
Collaborator

@thecodacus thecodacus commented Dec 23, 2024

Add Starter Templates Component

Overview

This PR introduces a new Starter Templates feature that allows users to quickly initialize projects with various popular frameworks. The implementation adds a grid of framework icons at the bottom of the chat interface when no conversation is started.

Key Changes

1. New Starter Templates Component

  • Added StarterTemplates.tsx component to display framework options
  • Integrated framework icons and templates configuration
  • Enhanced BaseChat component to include the new templates section

2. Templates Configuration

  • Added new template type definitions
  • Implemented comprehensive list of starter templates including:
    • Astro, Next.js, Qwik, Remix
    • SvelteKit, Vue, React, Angular
    • And more framework options

Technical Details

Adding New Templates

To add a new template, update the STARTER_TEMPLATES array in constants.ts:

// Add new template to STARTER_TEMPLATES array
export const STARTER_TEMPLATES: Template[] = [
  {
    name: 'my-new-template',              // Unique identifier
    label: 'My New Template',             // Display name
    description: 'Template description',   // Brief description
    githubRepo: 'username/repo-name',     // GitHub repository path
    tags: ['tag1', 'tag2'],              // Optional tags for filtering
    icon: 'i-bolt:framework-name',        // Icon class (must match SVG filename)
  },
  // ... existing templates
];

Requirements:

  • Add corresponding SVG icon in /icons directory
  • Icon filename must match the framework name used in the icon class
  • GitHub repository must be public and contain template code
  • Template should include basic project setup and README

StarterTemplates Component

Key implementation snippet:

const FrameworkLink: React.FC<FrameworkLinkProps> = ({ template }) => (
  <a
    href={`/git?url=https://github.com/${template.githubRepo}.git`}
    className="items-center justify-center"
  >
    <div className={`inline-block ${template.icon} w-8 h-8 text-4xl transition-theme opacity-25 hover:opacity-75`} />
  </a>
);

const StarterTemplates: React.FC = () => {
  return (
    <div className="flex flex-col items-center gap-4">
      <span className="text-sm text-gray-500">or start a blank app with your favorite stack</span>
      <div className="flex justify-center">
        <div className="flex w-70 flex-wrap items-center justify-center gap-4">
          {STARTER_TEMPLATES.map((template) => (
            <FrameworkLink key={template.name} template={template} />
          ))}
        </div>
      </div>
    </div>
  );
};

System Changes

  • Added new SVG icons for all supported frameworks
  • Updated Uno config to include new icon collection
  • Modified BaseChat layout to accommodate the templates section
  • Added new Template interface for type safety

Testing

  • Visual verification of template icons display
  • Tested icon hover states and transitions
  • Verified GitHub repository links for each template
  • Confirmed proper layout in both empty and active chat states

Migration Impact

  • No breaking changes
  • No database migrations required
  • Fully backward compatible

Future Improvements

  • Include more framework options

Preview

template-demo.mov

Copy link

@doran2k doran2k left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

aa

Copy link
Collaborator

@dustinwloring1988 dustinwloring1988 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

look good love the Please wait part. Works on Windows 11 tested with Firefox and chrome and also inside and outside of docker.

@thecodacus thecodacus merged commit fc4f89f into stackblitz-labs:main Dec 24, 2024
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants