Updated docs.

zuixjs · Jun 1, 2023 · 1a67e07 · 1a67e07
1 parent 1e102a7
commit 1a67e07
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 53 deletions.
diff --git a/docs/feed/rss.xml b/docs/feed/rss.xml
diff --git a/docs/pages/documentation/getting_started/index.html b/docs/pages/documentation/getting_started/index.html
@@ -480,7 +480,7 @@
 }
 [z-context="menu-drawer"]:focus {
     outline: none;
-}</style><!-- zUIx.js inline resources bundle --><script src="index.bundle.js"></script></head><!-- scroll helper is used to show/hide the header when scrolling --><body ctrl="" z-load="@lib/controllers/header-auto-hide" :header="'header'" z-lazy="scroll" data-theme="" layout="column stretch-stretch"><nav #header="" layout="row center-start"><div self="stretch" layout="row center-start"><button onclick="menuDrawer.open()" class="header-menu-button mdl-button mdl-button--icon"><i class="material-icons">menu_open</i></button><h1 self="size-x1" class="title">Getting started</h1></div></nav><main layout="column top-center"><h1 #alt_header="" class="title">Getting started</h1><div self="size-x1" class="content"><p>See <strong>zuix.js</strong> in action using the online playground, where is possible to create and download ready to use components directly in the browser!</p><a layout="row center-start" class="mdl-color-text--accent" href="/playground/#/app/widgets/analog-clock"><i class="material-icons rotate">sports_soccer</i> <span style="font-size: 160%; margin-left: 6px">Playground</span></a><h2>Bare library usage on an existing site</h2><p><em>zuix.js</em> can also be used on an existing website project by including the library directly in the HTML page or a JavaScript module:<h3>JsDeliver</h3><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/[email protected]<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code></pre><p>or as a module:<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/[email protected]/js/zuix.module.min.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code></pre><p>or as a dependency of another module:<pre class="language-js"><code class="language-js"><span class="token comment">// file: my-class.module.js</span>
+}</style><!-- zUIx.js inline resources bundle --><script src="index.bundle.js"></script></head><!-- scroll helper is used to show/hide the header when scrolling --><body ctrl="" z-load="@lib/controllers/header-auto-hide" :header="'header'" z-lazy="scroll" data-theme="" layout="column stretch-stretch"><nav #header="" layout="row center-start"><div self="stretch" layout="row center-start"><button onclick="menuDrawer.open()" class="header-menu-button mdl-button mdl-button--icon"><i class="material-icons">menu_open</i></button><h1 self="size-x1" class="title">Getting started</h1></div></nav><main layout="column top-center"><h1 #alt_header="" class="title">Getting started</h1><div self="size-x1" class="content"><p>See <strong>zuix.js</strong> in action using the online playground, where is possible to create and download ready to use components directly in the browser!</p><a layout="row center-start" class="mdl-color-text--accent" href="/playground/#/app/widgets/analog-clock"><i class="material-icons rotate">sports_soccer</i> <span style="font-size: 160%; margin-left: 6px">Playground</span></a><h2>Bare library usage on an existing site</h2><p>As a regular script:<h3>JsDeliver</h3><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/[email protected]<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code></pre><p>As a module:<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/[email protected]/js/zuix.module.min.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code></pre><p>As a dependency of another module:<pre class="language-js"><code class="language-js"><span class="token comment">// file: my-class.module.js</span>
 <span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/[email protected]/js/zuix.module.min.js'</span><span class="token punctuation">;</span> </code></pre><h3>NPM</h3><pre class="language-bash"><code class="language-bash"><span class="token function">npm</span> <span class="token function">install</span> zuix-dist</code></pre><p>then copy the library from <code>node_modules/zuix-dist/js</code> to your project's <code>js</code> folder and include it in your HTML page or JavaScript module.<h2>Creating a new web project using the CLI</h2><p>The <code>zuix-cli</code> tool can be used to create a new web project, the only prerequisite is that <a href="https://nodejs.org/en/download/package-manager">node.js</a> must be installed first.<pre class="language-bash"><code class="language-bash"><span class="token comment"># Create a new website project named 'my-new-webapp'</span>
 npx zuix new my-new-webapp</code></pre><p>A new folder named <em>my-new-webapp</em> will be created containing all files required to run the starter project.<p>From the new folder we can now start the local server that will watch, build and serve the web application files (by default at <em>http://localhost:8080</em>).<pre class="language-bash"><code class="language-bash"><span class="token builtin class-name">cd</span> my-new-webapp
 npx zuix start</code></pre><p>Read more about all other <code>zuix</code> command functionality from <a href="../cli/"><code>zuix-cli</code></a> documentation page.<p>You can also try the web-starter template live on <a href="https://stackblitz.com/github/zuixjs/zuix-web-starter?terminal=start">StackBlitz</a>.<div layout="rows center-spread" style="margin-top: 112px; gap:12px; margin-bottom: 32px; padding-left: 8px; padding-right: 8px; font-size: 140%"><a href="/pages/documentation/about/" style="text-align: center"><label layout="row center-center"><i class="material-icons">arrow_left</i>&nbsp; <span style="padding-right: 24px">Previous</span></label><div class="mdl-color-text--pink">About zuix.js</div></a><a href="/pages/documentation/component/" style="text-align: center"><label layout="row center-center"><span style="padding-left: 24px">Next</span> <i class="material-icons">arrow_right</i>&nbsp;</label><div class="mdl-color-text--pink">Component</div></a></div></div></main><!-- Navigation Drawer --><div ctrl="" z-load="@lib/controllers/drawer-layout" z-context="menu-drawer" z-lazy="false" z-options="drawer_opts" class="drawer-layout no-select visible-on-ready" layout="column top-stretch"><!-- Navigation Drawer content --><!-- Header --><div class="drawer-header" layout="column justify-stretch"><div self="stretch" layout="row center-justify"><a href="/" title="Home"><img class="logo animate__animated animate__swing animate__fast" src="/images/icons/icon-192x192.png" alt="Logo" title="zuix.js"></a><div class="text-logo">zuix.js <small>v1.1.28</small><script>self.zuixVersion="1.1.28"</script></div><a href="https://github.com/zuixjs" style="margin: 8px 8px 4px 10px;opacity: 0.75"><img src="/images/github-mark-light.png" alt="GitHub logo" title="zuix.js on GitHub" width="32" height="32"></a></div><div style="padding-left: 6px;padding-right: 6px;">JavaScript library for component-based websites and applications.</div></div><!-- Menu items and other content --><div class="drawer-content" self="size-x1"><!--

diff --git a/docs/search-index.json b/docs/search-index.json
diff --git a/docs/search-list.json b/docs/search-list.json
diff --git a/docs/service-worker.js b/docs/service-worker.js
diff --git a/docs/service-worker.js.map b/docs/service-worker.js.map
diff --git a/docs/sitemap.xml b/docs/sitemap.xml
@@ -77,10 +77,6 @@
     <loc>https://zuixjs.org/search/</loc>
     <lastmod>2023-05-23</lastmod>
   </url>
-  <url>
-    <loc>https://zuixjs.org/pages/documentation/getting_started/</loc>
-    <lastmod>2023-05-27</lastmod>
-  </url>
   <url>
     <loc>https://zuixjs.org/playground/</loc>
     <lastmod>2023-05-28</lastmod>
@@ -121,4 +117,8 @@
     <loc>https://zuixjs.org/pages/documentation/context_options/</loc>
     <lastmod>2023-06-01</lastmod>
   </url>
+  <url>
+    <loc>https://zuixjs.org/pages/documentation/getting_started/</loc>
+    <lastmod>2023-06-01</lastmod>
+  </url>
 </urlset>
diff --git a/source/pages/documentation/getting_started/index.md b/source/pages/documentation/getting_started/index.md
@@ -30,22 +30,21 @@ ready to use components directly in the browser!
 
 ## Bare library usage on an existing site
 
-*zuix.js* can also be used on an existing website project by including the library directly in the HTML page or a JavaScript
-module:
+As a regular script:
 
 ### JsDeliver
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/zuix-dist@{{ pkg.dependencies['zuix-dist'] | remove_first: '^' }}"></script>
 ```
 
-or as a module:
+As a module:
 
 ```html
 <script type="module" src="https://cdn.jsdelivr.net/npm/zuix-dist@{{ pkg.dependencies['zuix-dist'] | remove_first: '^' }}/js/zuix.module.min.js"></script>
 ```
 
-or as a dependency of another module:
+As a dependency of another module:
 
 ```js
 // file: my-class.module.js