feat(create-vite): align template styles with docs #8478

patak-dev · 2022-06-06T07:24:32Z

Description

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

What is the purpose of this pull request?

Bug fix
New Feature
Documentation update
Other

poyoho

cool

sapphi-red

Cool ✨
Looks mostly good to me.

packages/create-vite/template-preact/index.html

packages/create-vite/template-preact-ts/src/app.tsx

packages/create-vite/template-preact-ts/src/assets/vite.svg

packages/create-vite/template-react-ts/src/assets/vite.svg

packages/create-vite/template-react/src/style.css

packages/create-vite/template-vanilla/style.css

packages/create-vite/template-vue-ts/index.html

packages/create-vite/template-vue-ts/src/style.css

packages/create-vite/template-vue/package-lock.json

packages/create-vite/template-vue/src/style.css

benmccann

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 · 2022-06-06T18:33:14Z

@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 <green@sapphi.red>

patak-dev · 2022-06-06T20:47:22Z

Updated the brand colors, and styles of links and buttons

packages/create-vite/template-lit-ts/src/my-element.ts

packages/create-vite/template-lit/src/my-element.js

packages/create-vite/template-react-ts/src/assets/react.svg

packages/create-vite/template-vanilla/counter.js

packages/create-vite/template-vanilla-ts/src/counter.ts

packages/create-vite/template-vanilla-ts/src/main.ts

packages/create-vite/template-svelte/src/main.js

Co-authored-by: 翠 / green <green@sapphi.red>

sapphi-red

One suggestion but apart from that it LGTM 🚀

packages/create-vite/template-lit-ts/index.html

packages/create-vite/template-vue-ts/src/components/HelloWorld.vue

packages/create-vite/template-vue/src/components/HelloWorld.vue

packages/create-vite/template-vue-ts/src/components/HelloWorld.vue

Co-authored-by: Tony Trinh <tony19@gmail.com>

feat(create-vite): align template styles with docs

08f91dd

patak-dev added the p2-nice-to-have Not breaking anything but nice to have (priority) label Jun 6, 2022

patak-dev added this to the 3.0 milestone Jun 6, 2022

poyoho previously approved these changes Jun 6, 2022

View reviewed changes

sapphi-red reviewed Jun 6, 2022

View reviewed changes

benmccann reviewed Jun 6, 2022

View reviewed changes

chore: missing <a> target

14be563

Co-authored-by: 翠 / green <green@sapphi.red>

patak-dev dismissed poyoho’s stale review via 14be563 June 6, 2022 18:45

patak-dev and others added 11 commits June 6, 2022 20:45

chore: missing link type

9a5a45c

Co-authored-by: 翠 / green <green@sapphi.red>

chore: missing <a> target _blank

8d7e3fa

Co-authored-by: 翠 / green <green@sapphi.red>

chore: missing target _blank

d2f9535

Co-authored-by: 翠 / green <green@sapphi.red>

chore: missing target _blank

27dee1e

Co-authored-by: 翠 / green <green@sapphi.red>

chore: update favicon

d18bd8e

Co-authored-by: 翠 / green <green@sapphi.red>

chore: type issue

6f1f869

Co-authored-by: 翠 / green <green@sapphi.red>

chore: update type

f3a6256

Co-authored-by: 翠 / green <green@sapphi.red>

chore: apply sapphi suggestions

f31fba5

chore: update vanilla templates

da7ddb7

chore: use a, button, brand style from docs

e8fa324

chore: armonize vite and vue logo

b3326b8

sapphi-red reviewed Jun 7, 2022

View reviewed changes

patak-dev and others added 5 commits June 7, 2022 06:51

chore: missing a styles

857f19d

Co-authored-by: 翠 / green <green@sapphi.red>

chore: apply suggestions

8fd31ca

chore: HTMLButtonElement

7cdd207

chore: update

fd29881

chore: dial the glow down a bit

4d65b1c

sapphi-red previously approved these changes Jun 7, 2022

View reviewed changes

packages/create-vite/template-lit-ts/index.html Show resolved Hide resolved

tony19 reviewed Jun 7, 2022

View reviewed changes

packages/create-vite/template-vue-ts/src/components/HelloWorld.vue Outdated Show resolved Hide resolved

packages/create-vite/template-vue/src/components/HelloWorld.vue Outdated Show resolved Hide resolved

tony19 reviewed Jun 7, 2022

View reviewed changes

packages/create-vite/template-vue/src/components/HelloWorld.vue Outdated Show resolved Hide resolved

packages/create-vite/template-vue-ts/src/components/HelloWorld.vue Outdated Show resolved Hide resolved

chore: typo

4e2e0f5

Co-authored-by: Tony Trinh <tony19@gmail.com>

patak-dev dismissed sapphi-red’s stale review via 4e2e0f5 June 7, 2022 07:34

patak-dev and others added 5 commits June 7, 2022 09:34

chore: typo

7d290f8

Co-authored-by: Tony Trinh <tony19@gmail.com>

chore: better anchor

a2c86e1

Co-authored-by: Tony Trinh <tony19@gmail.com>

chore: better anchor

0f670d2

Co-authored-by: Tony Trinh <tony19@gmail.com>

chore: format

336b49b

chore: update

81db5e1

sapphi-red approved these changes Jun 7, 2022

View reviewed changes

tony19 approved these changes Jun 7, 2022

View reviewed changes

patak-dev merged commit d72b3dd into main Jun 8, 2022

patak-dev deleted the feat/create-vite-templates-theme branch June 8, 2022 07:36

sapphi-red mentioned this pull request Sep 6, 2022

vite support function like Editing existing templates,Extending package,Changing main file in vue-cli Generator #9995

Closed

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(create-vite): align template styles with docs #8478

feat(create-vite): align template styles with docs #8478

patak-dev commented Jun 6, 2022

poyoho left a comment

sapphi-red left a comment

benmccann left a comment

patak-dev commented Jun 6, 2022

patak-dev commented Jun 6, 2022

sapphi-red left a comment •

edited

Loading

feat(create-vite): align template styles with docs #8478

feat(create-vite): align template styles with docs #8478

Conversation

patak-dev commented Jun 6, 2022

Description

What is the purpose of this pull request?

poyoho left a comment

Choose a reason for hiding this comment

sapphi-red left a comment

Choose a reason for hiding this comment

benmccann left a comment

Choose a reason for hiding this comment

patak-dev commented Jun 6, 2022

patak-dev commented Jun 6, 2022

sapphi-red left a comment • edited Loading

Choose a reason for hiding this comment

sapphi-red left a comment •

edited

Loading