tabler plugins

_config.yml

@@ -23,6 +23,7 @@ preview-url: https://preview.tabler.io
 mapbox-key: pk.eyJ1IjoiY29kZWNhbG0iLCJhIjoiSzRiOVJvQSJ9.BUVkTT6IYs83xSUs4H7bjQ
 google-maps-key: AIzaSyAr5mRB4U1KRkVznIrDWEvZjroYcD202DI
 google-maps-dev-key: AIzaSyCL-BY8-sq12m0S9H-S_yMqDmcun3A9znw
+npm-package: "@tabler/core"
 
 debug: false
 
@@ -34,7 +35,7 @@ plugins:
   - jekyll-timeago
   - jekyll-redirect-from
 
-tabler-plugins:
+tabler-css-plugins:
   - tabler-flags
   - tabler-payments
   - tabler-vendors

src/pages/_data/docs.yml

@@ -10,9 +10,9 @@ base:
     getting-started:
       title: Getting Started
       url: docs/getting-started.html
-    usage:
-      title: Usage
-      url: docs/usage.html
+    download:
+      title: Download
+      url: docs/download.html
 
 content:
   title: Content

src/pages/_docs/download.md

+---
+title: Download
+menu: docs.base.download
+description: Download Tabler to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, yarn and more.
+---
+
+
+## CDN via unpkg
+
+All files included in `{{ site.npm-package }}` npm package are available over a unpkg CDN. Use it to deliver cached version of Tabler’s compiled CSS and JS to your project.
+
+```html
+<script src="https://unpkg.com/{{ site.npm-package }}@{{ site.data.package.version }}/dist/js/tabler.min.js"></script>
+<link rel="stylesheet" href="https://unpkg.com/{{ site.npm-package }}@{{ site.data.package.version }}/dist/css/tabler.min.css">
+```
+
+You can also include additional Tabler plugins:
+
+```html
+{% removeemptylines %}
+{% for plugin in site.tabler-css-plugins %}
+<link rel="stylesheet" href="https://unpkg.com/{{ site.npm-package }}@{{ site.data.package.version }}/dist/css/{{ plugin }}.min.css">
+{% endfor %}
+{% endremoveemptylines %}
+```
+
+## Package managers
+
+Install Tabler in your Node.js powered apps with the npm package:
+
+```
+npm install {{ site.npm-package }}
+```
\ No newline at end of file

src/pages/_docs/getting-started.md

@@ -26,8 +26,8 @@ Once you've completed the setup, you'll be able to run the various commands prov
 ## Build Tabler locally
 
 1. From the root `/tabler` directory, run `npm run start` in the command line.
-2. Open [http://localhost:4000](http://localhost:4000) in your browser, and voilà.
-3. Any change in `/pages` directory will build the application and refresh the page.
+2. Open [http://localhost:3000](http://localhost:3000) in your browser, and voilà.
+3. Any change in `/src` directory will build the application and refresh the page.
 
 
 ## Bugs and feature requests

src/pages/_docs/usage.md

----
-title: Usage
-menu: docs.base.usage
-description: Tabler distributions are available on npm. Add tabler as a dependency in your npm project or use a specific version directly in your HTML files via CDN includes.
----
-
-## Installation
-
-To install the latest `tabler` npm package in your project run:
-```sh
-npm install @tabler/core
-```
-
-Tabler `1.0.0` major version is now in active development. To get the latest `alpha` version run:
-```sh
-npm install @tabler/core@alpha
-```
-
-## CDN support
-
-All files included in `@tabler/core` npm package are available over a CDN.
-
-### Javascript
-
-```html
-<script src="https://unpkg.com/@tabler/core@latest/dist/js/tabler.min.js"></script>
-```
-
-### Styles
-
-```html
-<link rel="stylesheet" href="https://unpkg.com/@tabler/core@latest/dist/css/tabler.min.css">
-```
-
-### Other versions
-
-To load a specific version replace `latest` with the desired version number.
-
-```html
-<link rel="stylesheet" href="https://unpkg.com/@tabler/core@1.0.0-alpha.13/dist/css/tabler.min.css">
-```
-
-To load the latest `alpha` version replace `latest` with `alpha`.
-
-```html
-<script src="https://unpkg.com/@tabler/core@alpha/dist/js/tabler.min.js"></script>
-```

src/pages/_includes/docs/plugin.html

-<div class="alert alert-primary mb-4">
-	<h4 class="alert-title">Important!</h4>
-	<p>This part of Tabler is distributed as plugin. To enable it you should include <code>tabler-{{ include.plugin }}.css</code> or <code>tabler-{{ include.plugin }}.min.css</code> file to your page.</p>
-</div>
\ No newline at end of file
+<h3>Installation</h3>
+
+<p>This part of Tabler is distributed as plugin. To enable it you should include <code>tabler-{{ include.plugin }}.css</code> or <code>tabler-{{ include.plugin }}.min.css</code> file to your page.</p>
+
+<p>You can also include plugin via CDN:</p>
+
+{% highlight html %}
+<link rel="stylesheet" href="https://unpkg.com/{{ site.npm-package }}@{{ site.data.package.version }}/dist/css/{{ include.plugin }}.min.css">
+{% endhighlight %}
\ No newline at end of file

src/pages/_includes/layout/css.html

@@ -17,7 +17,7 @@
 
 <link href="{{ site.base }}/dist/css/tabler{% if page.rtl or site.rtl %}.rtl{% endif %}{% if jekyll.environment != 'development' %}.min{% endif %}.css{% if jekyll.environment == 'preview' %}?{{ site.time | date: '%s' }}{% endif %}" rel="stylesheet"/>
 
-{% for plugin in site.tabler-plugins %}
+{% for plugin in site.tabler-css-plugins %}
 	<link href="{{ site.base }}/dist/css/{{ plugin }}{% if page.rtl or site.rtl %}.rtl{% endif %}{% if jekyll.environment != 'development' %}.min{% endif %}.css{% if jekyll.environment == 'preview' %}?{{ site.time | date: '%s' }}{% endif %}" rel="stylesheet"/>
 {% endfor %}
 

src/pages/_layouts/docs.html

@@ -29,13 +29,13 @@ page-header: Documentation
 							{% endif %}
 						</div>
 
-						{% if page.plugin %}
-							{% include docs/plugin.html plugin=page.plugin %}
-						{% endif %}
-
 						{% if page.description %}
 						<p>{{ page.description }}</p>
 						{% endif %}
+
+						{% if page.plugin %}
+						{% include docs/plugin.html plugin=page.plugin %}
+						{% endif %}
 					</div>
 
 					{{ content }}