diff --git a/.gitignore b/.gitignore index 9a28bc3..ae68f73 100644 --- a/.gitignore +++ b/.gitignore @@ -2,7 +2,7 @@ /public/ /dist/ /example/ -/fomantic/ +/semantic/ .todo .DS_Store .todo diff --git a/README.md b/README.md index 666664f..8cb880d 100644 --- a/README.md +++ b/README.md @@ -1,90 +1,98 @@ -# Vomantic UI +# Svantic UI -This is a project based on Fomantic UI implement for Svelte.js framework +Svantic is a set of UI components for [Svelte](https://svelte.dev) based on the [Fomantic-UI](http://fomantic-ui.com) framework. -## Get started +# Documentation -Install the dependencies... +-- Coming soon -- -```bash -cd svelte-app -npm install -``` -...then start [Rollup](https://rollupjs.org): +## Installation + +_Note that you will need to have [Node.js](https://nodejs.org) installed_ ```bash -npm run dev +npm install --save-dev svantic ``` -Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes. - -By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`. +## Usage +```html + -## Building and running in production mode +

Hello {value}!

-To create an optimised version of the app: + ``` +## Quick start with new project -You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com). - - -## Single-page app mode +Create a new project based on [sveltejs/template](https://github.com/sveltejs/template) -By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere. - -If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for *any* path. You can make it so by editing the `"start"` command in package.json: - -```js -"start": "sirv public --single" +```bash +npx degit sveltejs/template svantic-app +cd svantic-app +npm install ``` -## Using TypeScript +_NOTE_: There are of course other ways to set up a project using svelte. This is just the quickest way to start. -This template comes with a script to set up a TypeScript development environment, you can run it immediately after cloning the template with: +Add components ```bash -node scripts/setupTypeScript.js +npm install --save-dev svantic ``` -Or remove the script via: +Modify file `src/App.svelte` in the following way -```bash -rm scripts/setupTypeScript.js -``` +```html + -### With [Vercel](https://vercel.com) +Checkbox -Install `vercel` if you haven't already: +

Checkbox is {checked ? 'checked' : 'unchecked'}

-```bash -npm install -g vercel + ``` -Then, from within your project folder: + +...then start [Rollup](https://rollupjs.org/) ```bash -cd public -vercel deploy --name my-project +npm run dev ``` -### With [surge](https://surge.sh/) +Navigate to [localhost:5000](http://localhost:5000) -Install `surge` if you haven't already: +# Development -```bash -npm install -g surge -``` +1. Clone this repo: `git clone https://github.com/ryu-man/svantic.git` +2. Install dependencies: `npm i` +3. Start building fomantic: `npm run build:fomantic` +4. Start the automated build: `npm run build` +5. Open url that console prints in your browser -Then, from within your project folder: +# License + +Code released under MIT license. + +Copyright ©, ryu-man. -```bash -npm run build -surge public my-project.surge.sh -``` diff --git a/package.json b/package.json index 599f381..c104296 100644 --- a/package.json +++ b/package.json @@ -5,10 +5,24 @@ "module": "./dist/index.mjs", "svelte": "./src/index.js", "types": "./src/index.d.ts", + "description": "This is a project based on Fomantic UI implement for Svelte.js framework", + "homepage": "https://github.com/ryu-man/svantic#readme", + "repository": { + "type": "git", + "url": "git+https://github.com/ryu-man/svantic.git" + }, + "author": "ryu-man", + "license": "MIT", + "bugs": { + "url": "https://github.com/ryu-man/svantic/issues" + }, "files": [ "dist", "src" ], + "directories": { + "test": "test" + }, "scripts": { "build": "rollup -c", "dev": "rollup -c -w", @@ -16,7 +30,7 @@ "validate": "svelte-check", "pretty": "prettier --write \"src/**/*.{svelte,js,ts}\"", "test": "jest", - "build:fomantic": "gulp build -f fomantic/gulpfile.js" + "build:fomantic": "gulp build -f node_modules/fomantic-ui/gulpfile.js" }, "devDependencies": { "@rollup/plugin-alias": "^3.1.1", diff --git a/semantic.json b/semantic.json index b7f3417..4e98f3f 100644 --- a/semantic.json +++ b/semantic.json @@ -1,5 +1,5 @@ { - "base": "fomantic", + "base": "semantic/", "paths": { "source": { "config": "src/theme.config", @@ -8,10 +8,10 @@ "themes": "src/themes/" }, "output": { - "packaged": "dist\\", - "uncompressed": "dist\\components\\", - "compressed": "dist\\components\\", - "themes": "dist\\themes\\" + "packaged": "dist/", + "uncompressed": "dist/components/", + "compressed": "dist/components/", + "themes": "dist/themes/" }, "clean": "dist/" }, diff --git a/src/collections/breadcrumb/breadcrumb.d.ts b/src/collections/breadcrumb/breadcrumb.d.ts index e91e838..f7a72a1 100644 --- a/src/collections/breadcrumb/breadcrumb.d.ts +++ b/src/collections/breadcrumb/breadcrumb.d.ts @@ -24,7 +24,7 @@ interface BreadcrumbProps extends Component { style?: Style; } /** - * Vomantic Breadcrumb + * Svantic Breadcrumb */ export default class Breadcrumb extends SvelteComponentTyped { static Section:new ()=>Section diff --git a/src/collections/breadcrumb/breadcrumb.svelte b/src/collections/breadcrumb/breadcrumb.svelte index 67ab16c..9b7cb7c 100644 --- a/src/collections/breadcrumb/breadcrumb.svelte +++ b/src/collections/breadcrumb/breadcrumb.svelte @@ -1,5 +1,5 @@