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(create-vite): align template styles with docs #8478

Merged
merged 24 commits into from
Jun 8, 2022

Conversation

patak-dev
Copy link
Member

Description

Fix #8385

Hopefully, this will help to make it more clear to users that these templates are a way to try out Vite with their favorite framework, but these aren't production-grade scaffolding tools that include the recommended setup for testing, linting, etc from each framework. Like Vue has done with create-vue, we should push other frameworks to off a similar tool (most of them are already working in complete frameworks like SvelteKit, maybe a create-svelte isn't a bad idea for example if it doesn't exist already).

The new docs-aligned theme should also make the experience better when reading the docs and jumping to the online StackBlitz playgrounds.

Changes include:

  • All templates have a light/dark theme aligned with the new docs (except for the font, as I think we should include Inter in each of them. I still add it to the font family list in case it is installed locally)
  • All are using the vite logo from the public dir. I think it is good for users to see this feature right away. Vite is also the favicon for every template, again to show that these are Vite first starters.
  • All have two logos (vite + framework) that you can click to get to the docs
  • All have a counter (added one for Preact and Vanilla templates)
  • Removes recommendation for VS Code in Vue templates, Volar now works in several IDEs
  • Adds recommendation to check out create-vue

Screenshot 2022-06-06 at 8 58 49


What is the purpose of this pull request?

  • Bug fix
  • New Feature
  • Documentation update
  • Other

@patak-dev patak-dev added the p2-nice-to-have Not breaking anything but nice to have (priority) label Jun 6, 2022
@patak-dev patak-dev added this to the 3.0 milestone Jun 6, 2022
poyoho
poyoho previously approved these changes Jun 6, 2022
Copy link
Member

@poyoho poyoho left a comment

Choose a reason for hiding this comment

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

cool

Copy link
Member

@sapphi-red sapphi-red left a comment

Choose a reason for hiding this comment

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

Cool ✨
Looks mostly good to me.

packages/create-vite/template-preact-ts/src/app.tsx Outdated Show resolved Hide resolved
packages/create-vite/template-react-ts/src/assets/vite.svg Outdated Show resolved Hide resolved
packages/create-vite/template-react/src/style.css Outdated Show resolved Hide resolved
packages/create-vite/template-vue-ts/index.html Outdated Show resolved Hide resolved
packages/create-vite/template-vue/package-lock.json Outdated Show resolved Hide resolved
Copy link
Collaborator

@benmccann benmccann left a comment

Choose a reason for hiding this comment

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

maybe a create-svelte isn't a bad idea for example if it doesn't exist already

Just to share, we have a create-svelte which allows you to run npm init svelte in order to create a new SvelteKit project

@patak-dev
Copy link
Member Author

@benmccann nice! Looks like it creates a SvelteKit app, we already have a link to the SvelteKit docs in the templates with a call to action to check them out. I think that is good for Svelte here then.

Co-authored-by: 翠 / green <[email protected]>
@patak-dev
Copy link
Member Author

Updated the brand colors, and styles of links and buttons

Screenshot 2022-06-06 at 22 46 16

sapphi-red
sapphi-red previously approved these changes Jun 7, 2022
Copy link
Member

@sapphi-red sapphi-red left a comment

Choose a reason for hiding this comment

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

One suggestion but apart from that it LGTM 🚀

Co-authored-by: Tony Trinh <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
p2-nice-to-have Not breaking anything but nice to have (priority)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Consolidate create-vite templates
5 participants