Skip to content

Commit

Permalink
Added logo. Some layout improvements / fixes.
Browse files Browse the repository at this point in the history
  • Loading branch information
@genemars
genemars committed Apr 4, 2022
1 parent 208447b commit 5884f41
Show file tree
Hide file tree
Showing 17 changed files with 138 additions and 33 deletions.
2 changes: 1 addition & 1 deletion config/production.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
}
},
"app": {
"title": "zuix.js Web Starter",
"title": "Web Starter",
"subtitle": "Simple, yet powerful!",
"baseUrl": "/zuix-web-starter/",
"resourcePath": "{{ app.baseUrl }}app/",
Expand Down
2 changes: 1 addition & 1 deletion docs/config.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* eslint-disable quotes */
(function() {
zuix.store('config', {
"title": "zuix.js Web Starter",
"title": "Web Starter",
"subtitle": "Simple, yet powerful!",
"baseUrl": "/zuix-web-starter/",
"resourcePath": "/zuix-web-starter/app/",
Expand Down
2 changes: 1 addition & 1 deletion docs/index.bundle.ext.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

27 changes: 24 additions & 3 deletions docs/index.html
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/pages/building-and-publishing/index.bundle.ext.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

25 changes: 23 additions & 2 deletions docs/pages/building-and-publishing/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,13 +75,29 @@
overflow-x: auto;
}
code:not([class*=language-]) {
word-break: break-word;
line-height: 140%;
}

footer {
font-size: 90%;
}

.title {
font-size: 110%;
max-width: calc(100vw - 104px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.subtitle {
font-size: 95%;
max-width: calc(100vw - 104px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.icon-button {
width: 48px;
height: 48px;
Expand Down Expand Up @@ -281,8 +297,13 @@
}
.theme-dark [z-context="menu-overlay"] div[z-field="menu_overlay"] {
background: radial-gradient(circle at bottom, black, #000000dd, #00000077, transparent)!important;
}</style><body layout="column stretch-center" ctrl="" z-load="@lib/controllers/header-auto-hide" data-o-header="header-bar" z-lazy="scroll"><nav layout="row top-center" #header-bar=""><div self="size-large stretch" layout="row center-center" style="gap: 8px"><a class="icon-button" aria-label="Home" href="/zuix-web-starter/"><svg xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M12 5.69l5 4.5V18h-2v-6H9v6H7v-7.81l5-4.5M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z"></path></svg></a><h1 self="size-x1">zuix.js Web Starter</h1><div style="padding-top: 4px; padding-right: 4px"><input class="theme-toggle" type="checkbox" aria-label="Toggle theme" checked></div></div></nav><main self="size-large"><h1>Building for production</h1><p>The build process will read the default configuration of the web application, from the JSON file <code>./config/default.json</code>.<br>This file contains, among the other options, the base url of the application that by default is <code>/</code>:<p>./config/<strong>default.json</strong><pre class="language-json"><code class="language-json"><span class="token punctuation">{</span><br> <span class="token property">"zuix"</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> ...<br> ...<br> <span class="token property">"app"</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"My web application"</span><span class="token punctuation">,</span><br> <span class="token property">"baseUrl"</span><span class="token operator">:</span> <span class="token string">"/"</span><span class="token punctuation">,</span><br> ...<br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span></code></pre><p>Depending on the hosting service where the application will be published, the base url might not be the root of the website, like it happens for <em>GitHub</em> hosted pages, where the base url is the name of the project, unless custom domain is used:<pre><code>https://&lt;account_name&gt;.github.io/&lt;project_name&gt;/
</code></pre><p>For this purpose, when building for production, a different configuration file is used with the proper base url set:<p>./config/<strong>production.json</strong><pre class="language-json"><code class="language-json"><span class="token punctuation">{</span><br> <span class="token property">"zuix"</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> ...<br> ...<br> <span class="token property">"app"</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"My web application"</span><span class="token punctuation">,</span><br> <span class="token property">"baseUrl"</span><span class="token operator">:</span> <span class="token string">"/my-web-app/"</span><span class="token punctuation">,</span><br> ...<br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span></code></pre><p>also, the <code>{{ app.baseUrl }}</code> variable, if used in a template, will be replaced with the proper value depending on the selected configuration.<p>So, to select the <em>production</em> configuration when building the web application, the environment variable <code>NODE_ENV</code> must be set to <code>production</code>:<pre class="language-shell"><code class="language-shell"><span class="token assign-left variable">NODE_ENV</span><span class="token operator">=</span>production npx zuix build</code></pre><p>it's also possible to simulate the production hosting when running the development server:<pre class="language-shell"><code class="language-shell"><span class="token assign-left variable">NODE_ENV</span><span class="token operator">=</span>production npx zuix start</code></pre><p>in which case, the application will be served at the url specified by <code>baseUrl</code> in the production configuration file.</main><div layout="rows center-spread" class="page-navigation"><a href="/zuix-web-starter/pages/liquid-tags/" style="text-align: center;"><div layout="row center-center" class="navigation-direction"><svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path></svg> <span style="padding-right: 24px">Previous</span></div><div class="navigation-title">Liquid tags and short codes</div></a><div>&nbsp;</div></div><style>.page-navigation {
}</style><body layout="column stretch-center" ctrl="" z-load="@lib/controllers/header-auto-hide" data-o-header="header-bar" z-lazy="scroll"><nav layout="row top-center" #header-bar=""><div self="size-large stretch" layout="row center-center" style="gap: 8px;"><a class="icon-button" aria-label="Home" href="/zuix-web-starter/"><!--
<svg xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" viewBox="0 0 24 24">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M12 5.69l5 4.5V18h-2v-6H9v6H7v-7.81l5-4.5M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z"/>
</svg>
--> <img src="/zuix-web-starter/images/zuix-logo.svg" height="40" width="40" alt="Logo"></a><div self="size-x1"><h1 class="title">Web Starter</h1><div class="subtitle">Building for production</div></div><div style="padding-top: 4px; padding-right: 4px"><input class="theme-toggle" type="checkbox" aria-label="Toggle theme" checked></div></div></nav><main self="size-large"><h1>Building for production</h1><p>The build process will read the default configuration of the web application, from the JSON file <code>./config/default.json</code>.<br>This file contains, among the other options, the base url of the application that by default is <code>/</code>:<p>./config/<strong>default.json</strong><pre class="language-json"><code class="language-json"><span class="token punctuation">{</span><br> <span class="token property">"zuix"</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> ...<br> ...<br> <span class="token property">"app"</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"My web application"</span><span class="token punctuation">,</span><br> <span class="token property">"baseUrl"</span><span class="token operator">:</span> <span class="token string">"/"</span><span class="token punctuation">,</span><br> ...<br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span></code></pre><p>Depending on the hosting service where the application will be published, the base url might not be the root of the website, like it happens for <em>GitHub</em> hosted pages, where the base url is the name of the project, unless custom domain is used:<pre><code>https://&lt;account_name&gt;.github.io/&lt;project_name&gt;/
</code></pre><p>For this purpose, when building for production, a different configuration file is used with the proper base url set:<p>./config/<strong>production.json</strong><pre class="language-json"><code class="language-json"><span class="token punctuation">{</span><br> <span class="token property">"zuix"</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> ...<br> ...<br> <span class="token property">"app"</span><span class="token operator">:</span> <span class="token punctuation">{</span><br> <span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"My web application"</span><span class="token punctuation">,</span><br> <span class="token property">"baseUrl"</span><span class="token operator">:</span> <span class="token string">"/my-web-app/"</span><span class="token punctuation">,</span><br> ...<br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span></code></pre><p>also, the <code>{{ app.baseUrl }}</code> variable, if used in a template, will be replaced with the proper value depending on the selected configuration.<p>So, to select the <em>production</em> configuration when building the web application, the environment variable <code>NODE_ENV</code> must be set to <code>production</code>:<pre class="language-shell"><code class="language-shell"><span class="token assign-left variable">NODE_ENV</span><span class="token operator">=</span>production npx zuix build</code></pre><p>it's also possible to simulate the production hosting when running the development server:<pre class="language-shell"><code class="language-shell"><span class="token assign-left variable">NODE_ENV</span><span class="token operator">=</span>production npx zuix start</code></pre><p>in which case, the application will be served at the url specified by <code>baseUrl</code> in the production configuration file.</main><div self="size-large" layout="rows center-spread" class="page-navigation"><a href="/zuix-web-starter/pages/liquid-tags/" style="text-align: center;"><div layout="row center-center" class="navigation-direction"><svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path></svg> <span style="padding-right: 24px">Previous</span></div><div class="navigation-title">Liquid tags and short codes</div></a><div>&nbsp;</div></div><style>.page-navigation {
margin-top: 40px;
gap:12px;
margin-bottom: 80px;
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/liquid-tags/index.bundle.ext.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 5884f41

Please sign in to comment.