-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
12 changed files
with
7 additions
and
7 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/core/favicon.ico"/><title>@magic/core files</title><meta name="description" content="@magic/core directory docs."/><link rel="stylesheet" href="/core/magic.css"/></head><body><div id="magic"><div class="wrapper"><header class="main"><a class="logo-wrapper" href="/core/"><img class="logo" src="/core/logo.png" role="presentation" alt=""/><span class="logo-text">@magic</span></a><nav class="Menu"><ul><li class="MenuItem"><a href="/core/concepts/">concepts</a></li><li class="MenuItem"><a href="/core/files/">files & directories</a></li><li class="MenuItem"><a href="/core/modules/">modules</a></li><li class="MenuItem"><a href="/core/themes/">themes</a></li><li class="MenuItem"><a href="/core/libraries/">libraries</a></li></ul></nav></header><div class="page"><h1>@magic/core files</h1><p>There are multiple magic files and directories.</p><ul><li>/pages - files in the page directory map to urls in your app.</li><li>/assets - custom components, @magic-modules get imported here</li><li>/assets/static - static files</li><li>/assets/themes - theme directory, @magic-themes get imported here</li><li>/assets/lib.js - imports npm and local but external packages into your app</li><li>/app.js - gets merged into the app, can set state, actions, style here</li><li>/config.js - custom config for your app</li><li>/assets/Menu.js - custom Menu for your app</li></ul><h2 id="pages">/pages</h2><p>the pages dir contains the pages of your webapp.</p><p>each page has it's own state and actions, but also inherits the global state and actions from the app and it's dependencies</p><h3 id="pages-dir-structure">pages directory to url map, for the domain mag.ic:</h3><ul><li>/pages/index.js === http://mag.ic/</li><li>/pages/pageName.js === http://mag.ic/pageName/</li><li>/pages/page-name.js === http://mag.ic/page-name/</li><li>/pages/page_name.js === http://mag.ic/page_name/</li><li>/pages/dir/index.js === http://mag.ic/dir/</li><li>/pages/dir/name.js === http://mag.ic/dir/name/</li></ul><h3 id="pages-example">example page:</h3><h2 id="assets">/assets</h2><p>the assets dir contains custom components of your app.</p><p>you can additionally import @magic-modules here</p><h3 id="assets-example">example /assets/index.js</h3><h2 id="static">/assets/static</h2><p>the static dir contains all of your static assets.</p><p>every file in this directory gets copied to the public dir.</p><p>image and svg files get minified using imagemin</p><p>text and binary files get compressed using the optional <a href="https://github.com/jaeh/node-zopfli-es" target="_blank" rel="noopener">node-zopfli-es</a> (if it is installed)</p><h2 id="themes">/assets/themes</h2><p>the themes directory contains... themes.</p><p>at the moment this is file based, which means you have to manually import themes there.</p><h3 id="themes-example">example theme</h3><h2 id="app">/assets/app.js</h2><p>the /app.js file allows you to set global state, actions, and styles</p><h3 id="app-example">example /app.js</h3><h2 id="config">/config.js</h2><p>the /config.js file allows you to set various aspects of your app</p><h3 id="config-example">example /config.js</h3><h2 id="menu">/assets/Menu.js</h2><p>the /assets/Menu.js file allows you to replace the default Menu component</p><h3 id="menu-example">example /assets/Menu.js</h3><a href="https://github.com/magic/core/blob/master/src/modules/Menu.js" target="_blank" rel="noopener">Menu.js on github</a></div><footer class="main"><div class="wrapper">made with a few bits of <a target="_blank" rel="noopener" href="https://github.com/magic/core">magic</a></div></footer></div></div><script src="/core/magic.js"></script></body></html> | ||
| <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/core/favicon.ico"/><title>@magic/core files</title><meta name="description" content="@magic/core directory docs."/><link rel="stylesheet" href="/core/magic.css"/></head><body><div id="magic"><div class="wrapper"><header class="main"><a class="logo-wrapper" href="/core/"><img class="logo" src="/core/logo.png" role="presentation" alt=""/><span class="logo-text">@magic</span></a><nav class="Menu"><ul><li class="MenuItem"><a href="/core/concepts/">concepts</a></li><li class="MenuItem"><a href="/core/files/">files & directories</a></li><li class="MenuItem"><a href="/core/modules/">modules</a></li><li class="MenuItem"><a href="/core/themes/">themes</a></li><li class="MenuItem"><a href="/core/libraries/">libraries</a></li></ul></nav></header><div class="page"><h1>@magic/core files</h1><p>There are multiple magic files and directories.</p><ul><li>/pages - files in the page directory map to urls in your app.</li><li>/assets - custom components, @magic-modules get imported here</li><li>/assets/static - static files</li><li>/assets/themes - theme directory, @magic-themes get imported here</li><li>/assets/lib.js - imports npm and local but external packages into your app</li><li>/app.js - gets merged into the app, can set state, actions, style here</li><li>/config.js - custom config for your app</li><li>/assets/Menu.js - custom Menu for your app</li></ul><h2 id="pages">/pages</h2><p>the pages dir contains the pages of your webapp.</p><p>each page has it's own state and actions, but also inherits the global state and actions from the app and it's dependencies</p><h3 id="pages-dir-structure">pages directory to url map, for the domain mag.ic:</h3><ul><li>/pages/index.js === http://mag.ic/</li><li>/pages/pageName.js === http://mag.ic/pageName/</li><li>/pages/page-name.js === http://mag.ic/page-name/</li><li>/pages/page_name.js === http://mag.ic/page_name/</li><li>/pages/dir/index.js === http://mag.ic/dir/</li><li>/pages/dir/name.js === http://mag.ic/dir/name/</li></ul><h3 id="pages-example">example page:</h3><div class="Pre light"><div class="menu"><button>dark</button><button>copy</button></div><pre><code class="line"><span class="keyword">module</span>.<span class="keyword">exports</span> = {</code><code class="line"> <span class="state">state</span>: {</code><code class="line"> <span class="colon">variable</span>: <span class="string">'test'</span>,</code><code class="line"> },</code><code class="line"> <span class="actions">actions</span>: {</code><code class="line"> <span class="colon">changeVar</span>: () => ({ <span class="colon">variable</span>: <span class="string">'changed'</span> }),</code><code class="line"> },</code><code class="line"> <span class="colon">style</span>: {</code><code class="line"> <span class="string">'.<span class="property">cl</span>'</span>: {</code><code class="line"> <span class="colon">color</span>: <span class="string">'green'</span>,</code><code class="line"> },</code><code class="line"> },</code><code class="line"> <span class="colon">View</span>: <span class="state">state</span> => div({ <span class="colon">class</span>: <span class="string">'cl'</span> }, [</code><code class="line"> <span class="string">'<span class="keyword">this</span> is the page <span class="object">content</span>.'</span>,</code><code class="line"> <span class="state">state</span>.<span class="property">variable</span>,</code><code class="line"> ]),</code><code class="line">}</code></pre></div><h2 id="assets">/assets</h2><p>the assets dir contains custom components of your app.</p><p>you can additionally import @magic-modules here</p><h3 id="assets-example">example /assets/index.js</h3><div class="Pre light"><div class="menu"><button>dark</button><button>copy</button></div><pre><code class="line"><span class="keyword">module</span>.<span class="keyword">exports</span> = {</code><code class="line"> <span class="colon">Custom</span>: () => div(<span class="string">'custom component'</span>),</code><code class="line"> <span class="colon">Pre</span>: <span class="keyword">require</span>(<span class="string">'@magic-modules/pre),'</span></code><code class="line">}</code></pre></div><h2 id="static">/assets/static</h2><p>the static dir contains all of your static assets.</p><p>every file in this directory gets copied to the public dir.</p><p>image and svg files get minified using imagemin</p><p>text and binary files get compressed using the optional <a href="https://github.com/jaeh/node-zopfli-es" target="_blank" rel="noopener">node-zopfli-es</a> (if it is installed)</p><h2 id="themes">/assets/themes</h2><p>the themes directory contains... themes.</p><p>at the moment this is file based, which means you have to manually import themes there.</p><h3 id="themes-example">example theme</h3><div class="Pre light"><div class="menu"><button>dark</button><button>copy</button></div><pre><code class="line"><span class="keyword">module</span>.<span class="keyword">exports</span> = {</code><code class="line"> <span class="string">'body'</span>: {</code><code class="line"> <span class="colon">color</span>: <span class="string">'blue'</span>,</code><code class="line"> },</code><code class="line">}</code></pre></div><h2 id="app">/assets/app.js</h2><p>the /app.js file allows you to set global state, actions, and styles</p><h3 id="app-example">example /app.js</h3><div class="Pre light"><div class="menu"><button>dark</button><button>copy</button></div><pre><code class="line"><span class="keyword">module</span>.<span class="keyword">exports</span> = {</code><code class="line"> <span class="state">state</span>: {</code><code class="line"> <span class="colon">globalStateVar</span>: <span class="string">'globally available'</span>,</code><code class="line"> },</code><code class="line"> <span class="actions">actions</span>: {</code><code class="line"> <span class="colon">globalAction</span>: () => ({ <span class="colon">globalStateVar</span>: <span class="string">'<span class="object">overwritten</span>.'</span> }),</code><code class="line"> },</code><code class="line"> <span class="colon">style</span>: {</code><code class="line"> <span class="string">'body'</span>: {</code><code class="line"> <span class="colon">color</span>: <span class="string">'green'</span>,</code><code class="line"> },</code><code class="line"> },</code><code class="line">}</code></pre></div><h2 id="config">/config.js</h2><p>the /config.js file allows you to set various aspects of your app</p><h3 id="config-example">example /config.js</h3><div class="Pre light"><div class="menu"><button>dark</button><button>copy</button></div><pre><code class="line"><span class="keyword">module</span>.<span class="keyword">exports</span> = {</code><code class="line"> <span class="colon">ROOT</span>: <span class="string">'example'</span>,</code><code class="line"> <span class="colon">THEME</span>: <span class="string">'blue'</span>,</code><code class="line"> <span class="colon">WEB_ROOT</span>: <span class="string">'/core/'</span>,</code><code class="line"></code><code class="line"><span class="comment"> // <span class="keyword">this</span> option adds the</span></code><code class="line"><span class="comment"> // <span class="string">'X-Clacks-Overhead'</span>, <span class="string">'GNU Terry Pratchet'</span></span></code><code class="line"><span class="comment"> // http header</span></code><code class="line"><span class="comment"> // see<a href=" http://www.gnuterrypratchett.com/" target="_blank" rel="noopener"> http://www.gnuterrypratchett.com/</a></span></code><code class="line"> <span class="colon">FOR_DEATH_CAN_NOT_HAVE_HIM</span>: <span class="boolean">true</span>,</code><code class="line"></code><code class="line"><span class="comment"> // <span class="keyword">default</span> CLIENT_LIB_NAME, overwrite to change names of transpiled css and js files</span></code><code class="line"> <span class="colon">CLIENT_LIB_NAME</span>: <span class="string">'magic'</span>,</code><code class="line">}</code></pre></div><h2 id="menu">/assets/Menu.js</h2><p>the /assets/Menu.js file allows you to replace the default Menu component</p><h3 id="menu-example">example /assets/Menu.js</h3><a href="https://github.com/magic/core/blob/master/src/modules/Menu.js" target="_blank" rel="noopener">Menu.js on github</a></div><footer class="main"><div class="wrapper">made with a few bits of <a target="_blank" rel="noopener" href="https://github.com/magic/core">magic</a></div></footer></div></div><script src="/core/magic.js"></script></body></html> |
Binary file not shown.
Oops, something went wrong.