create-turbosvelte
Advanced tools
Comparing version 1.2.0 to 1.5.0
{ | ||
"name": "docs", | ||
"version": "0.0.1", | ||
"scripts": { | ||
"dev": "svelte-kit dev", | ||
"build": "svelte-kit build", | ||
"package": "svelte-kit package", | ||
"preview": "svelte-kit preview", | ||
"check": "svelte-check --tsconfig ./tsconfig.json", | ||
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch", | ||
"lint": "eslint --ignore-path .gitignore ." | ||
}, | ||
"devDependencies": { | ||
"@sveltejs/adapter-auto": "next", | ||
"@sveltejs/kit": "next", | ||
"@typescript-eslint/eslint-plugin": "^4.31.1", | ||
"@typescript-eslint/parser": "^4.31.1", | ||
"eslint": "^7.32.0", | ||
"eslint-plugin-svelte3": "^3.2.1", | ||
"svelte": "^3.44.0", | ||
"svelte-check": "^2.2.6", | ||
"svelte-preprocess": "^4.9.4", | ||
"tslib": "^2.3.1", | ||
"typescript": "^4.4.3" | ||
}, | ||
"type": "module" | ||
} | ||
"name": "create-sveleton", | ||
"version": "1.0.0", | ||
"description": "A skeleton documentation site powered by MdSvex & Svelte!", | ||
"repository": { | ||
"type": "git", | ||
"url": "https://github.com/Brisklemonade/sveleton.git" | ||
}, | ||
"author": "", | ||
"license": "MIT", | ||
"scripts": { | ||
"dev": "svelte-kit dev", | ||
"build": "svelte-kit build", | ||
"package": "svelte-kit package", | ||
"preview": "svelte-kit preview", | ||
"check": "svelte-check --tsconfig ./tsconfig.json", | ||
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch", | ||
"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .", | ||
"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ." | ||
}, | ||
"devDependencies": { | ||
"@sveltejs/adapter-vercel": "next", | ||
"@sveltejs/kit": "next", | ||
"@tailwindcss/typography": "^0.5.0", | ||
"@typescript-eslint/eslint-plugin": "^5.10.1", | ||
"@typescript-eslint/parser": "^5.10.1", | ||
"autoprefixer": "^10.4.2", | ||
"eslint": "^7.32.0", | ||
"eslint-config-prettier": "^8.3.0", | ||
"eslint-plugin-svelte3": "^3.2.1", | ||
"mdsvex": "^0.9.8", | ||
"postcss": "^8.4.5", | ||
"postcss-load-config": "^3.1.1", | ||
"prettier": "^2.4.1", | ||
"prettier-plugin-svelte": "^2.4.0", | ||
"rehype-slug": "^5.0.0", | ||
"svelte": "^3.44.0", | ||
"svelte-check": "^2.2.6", | ||
"svelte-preprocess": "^4.10.1", | ||
"svelte2tsx": "^0.4.12", | ||
"tailwindcss": "^3.0.12", | ||
"tslib": "^2.3.1", | ||
"typescript": "^4.4.3" | ||
}, | ||
"type": "module" | ||
} |
@@ -1,38 +0,73 @@ | ||
# create-svelte | ||
<div id="top"></div> | ||
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte); | ||
<!-- PROJECT LOGO --> | ||
<br /> | ||
<div align="center"> | ||
<a href="https://github.com/Brisklemonade/sveleton"> | ||
<img src="static/sveleton logo.png" alt="Logo" width="80" height="80"> | ||
</a> | ||
## Creating a project | ||
<h1 align="center">Sveleton</h1> | ||
If you're seeing this, you've probably already done this step. Congrats! | ||
<p align="center"> | ||
A "skeleton" documentation site powered by MdSvex & Svelte! | ||
<br /> | ||
<a href="https://github.com/Brisklemonade/sveleton"><strong>Explore the docs »</strong></a> | ||
<br /> | ||
<br /> | ||
<a href="https://sveleton-csttwfha1-brisklemonade.vercel.app/">View Demo</a> | ||
· | ||
<a href="https://github.com/Brisklemonade/sveleton/issues">Report Bug</a> | ||
· | ||
<a href="https://github.com/Brisklemonade/sveleton/issues">Request Feature</a> | ||
</p> | ||
</div> | ||
```bash | ||
# create a new project in the current directory | ||
npm init svelte@next | ||
<!-- ABOUT THE PROJECT --> | ||
# create a new project in my-app | ||
npm init svelte@next my-app | ||
``` | ||
## About The Project | ||
> Note: the `@next` is temporary | ||
Sveleton (pronounced like skeleton but with a v) is a pretty "bare bones" documentation starter project. It utilizes MdSvex for the power of markdown in your svelte components, as well as tailwind for quick styling. With both of those combined, documentation will be a breeze! | ||
## Developing | ||
<p align="right">(<a href="#top">back to top</a>)</p> | ||
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: | ||
<!-- GETTING STARTED --> | ||
## Installation | ||
```bash | ||
npm run dev | ||
# or start the server and open the app in a new browser tab | ||
npm run dev -- --open | ||
npm init sveleton app-name | ||
``` | ||
## Building | ||
<!-- CONTRIBUTING --> | ||
Before creating a production version of your app, install an [adapter](https://kit.svelte.dev/docs#adapters) for your target environment. Then: | ||
## Contributing | ||
```bash | ||
npm run build | ||
``` | ||
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**. | ||
> You can preview the built app with `npm run preview`, regardless of whether you installed an adapter. This should _not_ be used to serve your app in production. | ||
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". | ||
Don't forget to give the project a star! Thanks again! | ||
1. Fork the Project | ||
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`) | ||
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`) | ||
4. Push to the Branch (`git push origin feature/AmazingFeature`) | ||
5. Open a Pull Request | ||
<p align="right">(<a href="#top">back to top</a>)</p> | ||
<!-- LICENSE --> | ||
## License | ||
Distributed under the MIT License | ||
<p align="right">(<a href="#top">back to top</a>)</p> | ||
<!-- CONTACT --> | ||
## Contact | ||
Twitter - [Brisklemonaid](https://twitter.com/brisklemonaid) | ||
<p align="right">(<a href="#top">back to top</a>)</p> |
@@ -1,15 +0,41 @@ | ||
import adapter from '@sveltejs/adapter-auto'; | ||
import { mdsvex } from 'mdsvex'; | ||
import path from 'path'; | ||
import vercel from '@sveltejs/adapter-vercel'; | ||
import preprocess from 'svelte-preprocess'; | ||
import slug from 'rehype-slug'; | ||
/** @type {import('@sveltejs/kit').Config} */ | ||
const config = { | ||
extensions: ['.svelte', '.md', '.svx'], | ||
// Consult https://github.com/sveltejs/svelte-preprocess | ||
// for more information about preprocessors | ||
preprocess: preprocess(), | ||
preprocess: [ | ||
preprocess({ | ||
postcss: true | ||
}), | ||
mdsvex({ | ||
extensions: ['.svx', '.md'], | ||
rehypePlugins: [slug] | ||
}) | ||
], | ||
kit: { | ||
adapter: adapter(), | ||
adapter: vercel(), | ||
// hydrate the <div id="svelte"> element in src/app.html | ||
target: '#svelte' | ||
package: { | ||
exports: (file) => file === 'index.js' | ||
}, | ||
vite: { | ||
resolve: { | ||
alias: { | ||
$components: path.resolve('./src/components') | ||
} | ||
}, | ||
server: { | ||
fs: { | ||
allow: ['.'] | ||
} | ||
} | ||
} | ||
} | ||
@@ -16,0 +42,0 @@ }; |
@@ -12,5 +12,2 @@ import adapter from '@sveltejs/adapter-auto'; | ||
adapter: adapter(), | ||
// hydrate the <div id="svelte"> element in src/app.html | ||
target: '#svelte' | ||
} | ||
@@ -17,0 +14,0 @@ }; |
{ | ||
"name": "create-turbosvelte", | ||
"version": "1.2.0", | ||
"version": "1.5.0", | ||
"description": "This is an unofficial SvelteKit monorepo starter powered by Turborepo.", | ||
@@ -5,0 +5,0 @@ "bin": "./bin/cli.cjs", |
@@ -13,10 +13,5 @@ import autoprefixer from 'autoprefixer'; | ||
} | ||
}), | ||
kit: { | ||
// hydrate the <div id="svelte"> element in src/app.html | ||
target: '#svelte' | ||
} | ||
}) | ||
}; | ||
export default config; | ||
export default config; |
@@ -12,27 +12,40 @@ <p align="center"> | ||
- `docs`: A placeholder documentation site powered by [MdSvex](https://mdsvex.pngwn.io/docs/) (coming soon) | ||
- `docs`: [Sveleton](https://github.com/Brisklemonade/sveleton) placeholder documentation site | ||
- `rename-core`: core components | ||
- `rename-tsconfig`: shared `tsconfig.json`s used throughout the monorepo | ||
- `eslint-preset-acme`: ESLint preset (coming soon) | ||
- `eslint-preset-rename`: ESLint preset (coming soon) | ||
Each package and app is 100% [Typescript](https://www.typescriptlang.org/). | ||
### Utilities | ||
# Installation | ||
This turborepo has some additional tools already setup for you: | ||
Run the following command: | ||
- [Typescript](https://www.typescriptlang.org/) for static type checking | ||
- [ESLint](https://eslint.org/) for code linting | ||
- [Prettier](https://prettier.io) for code formatting | ||
```bash | ||
npx create-turbosvelte app-name | ||
``` | ||
## Installation | ||
## Project Configuration | ||
Run the following command: | ||
### **Running concurrent dev enviornments** | ||
As of now if you want to run multiple dev enviornments in parallel, you will have to define different ports in your scripts. | ||
So you will have to change each `package.json` like such: | ||
```bash | ||
npx create-turbosvelte app-name | ||
"scripts": { | ||
"dev": "svelte-kit dev -p 3200", | ||
"build": "svelte-kit build", | ||
"preview": "svelte-kit preview", | ||
"check": "svelte-check --tsconfig ./tsconfig.json", | ||
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch", | ||
"package": "svelte-kit package" | ||
}, | ||
``` | ||
### Changing the NPM organization scope | ||
Each project's port will need to be different. | ||
### **Changing the NPM organization scope** | ||
The NPM organization scope for this design system starter is `@rename`. To change this, it's a bit manual at the moment, but you'll need to do the following: | ||
@@ -39,0 +52,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
396446
59
10290
63