-for more examples and documentation.</p><h3 id="themes-example">example theme</h3><div class="Pre lines"><div class="menu"><button>copy</button></div><pre><code class="line"><span class="keyword">export</span> <span class="keyword">default</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.mjs</h2><p>the /app.mjs file allows you to set global state, actions, and styles</p><h3 id="app-example">example /app.mjs</h3><div class="Pre lines"><div class="menu"><button>copy</button></div><pre><code class="line"><span class="keyword">export</span> <span class="keyword">default</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">'overwritten.'</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.mjs</h2><p>the /config.mjs file allows you to set various aspects of your app</p><h3 id="config-example">example /config.mjs</h3><div class="Pre lines"><div class="menu"><button>copy</button></div><pre><code class="line"><span class="keyword">export</span> <span class="keyword">default</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>, 'GNU Terry Pratchet' </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><p><a href="https://github.com/magic/core/blob/master/src/modules/Menu.mjs" target="_blank" rel="noopener">Menu.mjs on github</a></p></div><footer class="Footer"><div class="Container"><div class="Credits">made with a few bits of <a target="_blank" rel="noopener" href="https://github.com/magic/core">magic</a></div></div></footer></div></main><script src="/core/magic.js?aSA1zeXIhc" integrity="sha384-aSA1zeXIhcXesx1cHXlzTfk17SzLe13f5hcfGDpE4F7vt6SIUQA9BSzJv5Y147Ue" crossorigin="anonymous"></script></body></html>
0 commit comments