diff --git a/docs/404.html b/docs/404.html index e304783a..5bd76d3f 100644 --- a/docs/404.html +++ b/docs/404.html @@ -1 +1 @@ -@magic/core documentation
404 - not found
\ No newline at end of file +@magic/core documentation
404 - not found
\ No newline at end of file diff --git a/docs/concepts/index.html b/docs/concepts/index.html index 64f3f0d2..afcb2cc7 100644 --- a/docs/concepts/index.html +++ b/docs/concepts/index.html @@ -11,4 +11,4 @@ you can define functions that get transpiled into serverside lambdas. server side lambdas will be available for GET and/or POST requests.

the server side function signature is (req, res) => {}, as it is in most nodejs http servers, -with the addition of req.body being async => awaited before execution of the lambda.

\ No newline at end of file +with the addition of req.body being async => awaited before execution of the lambda.

\ No newline at end of file diff --git a/docs/files/index.html b/docs/files/index.html index ff441f61..742240e4 100644 --- a/docs/files/index.html +++ b/docs/files/index.html @@ -8,4 +8,4 @@ node-zopfli-es (if it is installed)

/assets/themes

the themes directory contains... themes.

a magic theme is an object of css rules, see @magic/css -for more examples and documentation.

example theme

export default {  'body': {    color: 'blue',  },}

/assets/app.mjs

the /app.mjs file allows you to set global state, actions, and styles

example /app.mjs

export default {  state: {    globalStateVar: 'globally available',  },  actions: {    globalAction: () => ({ globalStateVar: 'overwritten.' }),  },  style: {    'body': {      color: 'green',    },  },}

/config.mjs

the /config.mjs file allows you to set various aspects of your app

example /config.mjs

export default {  ROOT: 'example',  THEME: 'blue',  WEB_ROOT: '/core/',  // this option adds the  // 'X-Clacks-Overhead', 'GNU Terry Pratchet'  // http header  // see http://www.gnuterrypratchett.com/  FOR_DEATH_CAN_NOT_HAVE_HIM: true,  // default CLIENT_LIB_NAME, overwrite to change names of transpiled css and js files  CLIENT_LIB_NAME: 'magic',}
Menu.mjs on github \ No newline at end of file +for more examples and documentation.

example theme

export default {  'body': {    color: 'blue',  },}

/assets/app.mjs

the /app.mjs file allows you to set global state, actions, and styles

example /app.mjs

export default {  state: {    globalStateVar: 'globally available',  },  actions: {    globalAction: () => ({ globalStateVar: 'overwritten.' }),  },  style: {    'body': {      color: 'green',    },  },}

/config.mjs

the /config.mjs file allows you to set various aspects of your app

example /config.mjs

export default {  ROOT: 'example',  THEME: 'blue',  WEB_ROOT: '/core/',  // this option adds the  // 'X-Clacks-Overhead', 'GNU Terry Pratchet'  // http header  // see http://www.gnuterrypratchett.com/  FOR_DEATH_CAN_NOT_HAVE_HIM: true,  // default CLIENT_LIB_NAME, overwrite to change names of transpiled css and js files  CLIENT_LIB_NAME: 'magic',}
Menu.mjs on github \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 6f1d4708..ea390696 100644 --- a/docs/index.html +++ b/docs/index.html @@ -16,4 +16,4 @@ serverless lambdas, derived from the @magic-modules you use in your pages.

this makes visitor statistics, user authentication and authorization, -chat, and all other server side services possible.

\ No newline at end of file +chat, and all other server side services possible.

\ No newline at end of file diff --git a/docs/libraries/index.html b/docs/libraries/index.html index 20832695..e43aa4f8 100644 --- a/docs/libraries/index.html +++ b/docs/libraries/index.html @@ -15,4 +15,4 @@ and they will be available in your app without importing them. if you do not use one of the modules, dead code elimination will simply remove it in production.

export default { name: () => {} }

will turn into', -

lib.name = () => {}

@magic-libraries from npm

all @magic-libraries and all npm packages starting with magic-library-* will be loaded automatically

Example

first, install a @magic-library

npm install --save --save-exact @magic-libraries/is

then, in javascript

export const View = props => div([  'value is ',  lib.is(props.value, 'string') ? '' : 'not',  ' a string'])

@magic-libraries

below is a collection of the available @magic client libraries.
\ No newline at end of file +

lib.name = () => {}

@magic-libraries from npm

all @magic-libraries and all npm packages starting with magic-library-* will be loaded automatically

Example

first, install a @magic-library

npm install --save --save-exact @magic-libraries/is

then, in javascript

export const View = props => div([  'value is ',  lib.is(props.value, 'string') ? '' : 'not',  ' a string'])

@magic-libraries

below is a collection of the available @magic client libraries.
\ No newline at end of file diff --git a/docs/magic.js b/docs/magic.js index 733c435e..8a8bf741 100644 --- a/docs/magic.js +++ b/docs/magic.js @@ -1 +1 @@ -"use strict";function _toArray(e){return _arrayWithHoles(e)||_iterableToArray(e)||_nonIterableRest()}function _iterableToArray(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}function _objectWithoutProperties(e,t){if(null==e)return{};var o,a,s=_objectWithoutPropertiesLoose(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(a=0;aC)for(;j<=M;)o.insertBefore(u(x[j]=w(x[j++]),n,l),(m=v[k])&&m.node);else if(j>M)for(;k<=C;)o.removeChild(v[k++].node);else{for(var T=k,E={},A={};T<=C;T++)null!=(d=v[T].key)&&(E[d]=v[T]);for(;j<=M;){if(d=h(m=v[k]),p=h(x[j]=w(x[j],m)),A[d]||null!=p&&p===h(v[k+1])){null==d&&o.removeChild(m.node),k++;continue}null==p||1===a.type?(null==d&&(y(o,m&&m.node,m,x[j],n,l),j++),k++):(d===p?(y(o,m.node,m,x[j],n,l),A[p]=!0,k++):null==(c=E[p])?y(o,m&&m.node,null,x[j],n,l):(y(o,o.insertBefore(c.node,m&&m.node),c,x[j],n,l),A[p]=!0),j++)}for(;k<=C;)null==h(m=v[k++])&&o.removeChild(m.node);for(var T in E)null==A[T]&&o.removeChild(E[T].node)}}return s.node=o},f=function(e,t){for(var o in e)if(e[o]!==t[o])return!0;for(var o in t)if(e[o]!==t[o])return!0},b=function(e){return"object"===_typeof(e)?e:x(e)},w=function(t,o){return t.type===e?((!o||o.type!==e||f(o.lazy,t.lazy))&&((o=b(t.lazy.view(t.lazy))).lazy=t.lazy),o):t},v=function(e,t,o,a,i,s){return{name:e,props:t,children:o,node:a,type:s,key:i}},x=function(e,i){return v(e,o,a,i,void 0,t)},k=function(e){return e.nodeType===t?x(e.nodeValue,e):v(e.nodeName.toLowerCase(),o,i.call(e.childNodes,k),e,void 0,1)};return{h:function h(e,t){for(var a,n=[],l=[],r=arguments.length;2 value store using localstorage"},{name:"gql",description:["the @magic-libraries/gql module"," encodes template strings to graphql queries ready to be sent to a server."]},{name:"is",description:"the @magic-libraries/is module unifies the javascript type testing apis."},{name:"json",description:["the @magic-libraries/json module parses and stringifies json."," it also returns errors instead of throwing them."]},{name:"prevent-default",description:["the @magic-libraries/prevent-default module"," invokes event.preventDefault as a hyperapp effect."]},{name:"uri",description:["the @magic-libraries/uri module"," encodes objects to uri strings and decodes uri strings to objects."]}]})},LightSwitch=function(){0 {},\nas it is in most nodejs http servers,\nwith the addition of req.body being async => awaited before execution of the lambda."])]},"/core/files/":function coreFiles(){return[h1({id:"magiccore-files"},"@magic/core files"),p("There are multiple magic files and directories."),ul([li("/pages - files in the page directory map to urls in your app."),li("/assets - custom components, @magic-modules get imported here"),li("/assets/static - static files"),li("/assets/themes - theme directory, @magic-themes get imported here"),li("/assets/lib.mjs - imports npm and local but external packages into your app"),li("/app.mjs - gets merged into the app, can set state, actions, style here"),li("/config.mjs - custom config for your app"),li("/assets/Menu.mjs - custom Menu for your app")]),h2({id:"pages"},"/pages"),p("the pages dir contains the pages of your webapp."),p(["each page has it's own state and actions,\nbut also inherits the global state and actions from the app and it's dependencies"]),h3({id:"pages-dir-structure"},"pages directory to url map"),"\nfor the domain mag.ic:\n\n",Pre("/pages/index.mjs === http://mag.ic/\n/pages/pageName.mjs === http://mag.ic/pageName/\n/pages/page-name.mjs === http://mag.ic/page-name/\n/pages/page_name.mjs === http://mag.ic/page_name/\n/pages/dir/index.mjs === http://mag.ic/dir/\n/pages/dir/name.mjs === http://mag.ic/dir/name/\n"),h3({id:"pages-example"},"example page:"),Pre(["export default {\n state: {\n variable: 'test',\n },\n actions: {\n changeVar: () => ({ variable: 'changed' }),\n },\n style: {\n '.cl': {\n color: 'green',\n },\n },\n View: state => div({ class: 'cl' }, [\n 'this is the page content.',\n state.variable,\n ]),\n}\n"]),h2({id:"assets"},"/assets"),p("the assets dir contains custom components of your app."),p("you can import additional @magic-modules here"),h3({id:"assets-example"},"example /assets/index.mjs"),Pre(["export default {\n Custom: () => div('custom component'),\n Pre: require('@magic-modules/pre),\n}\n"]),h2({id:"static"},"/assets/static"),p("the static dir contains all of your static assets.\nevery file in this directory gets copied to the public dir.\nimage and svg files get minified using imagemin."),p(["text and binary files get compressed using the optional\n",Link({to:"https://github.com/jaeh/node-zopfli-es"},"node-zopfli-es"),"\n(if it is installed)"]),h2({id:"themes"},"/assets/themes"),p("the themes directory contains... themes."),p(["a magic theme is an object of css rules, see\n",Link({to:"https://github.com/magic/css/"},"@magic/css"),"\nfor more examples and documentation."]),h3({id:"themes-example"},"example theme"),Pre(["export default {\n 'body': {\n color: 'blue',\n },\n}\n"]),h2({id:"app"},"/assets/app.mjs"),p("the /app.mjs file allows you to set global state, actions, and styles"),h3({id:"app-example"},"example /app.mjs"),Pre(["export default {\n state: {\n globalStateVar: 'globally available',\n },\n actions: {\n globalAction: () => ({ globalStateVar: 'overwritten.' }),\n },\n style: {\n 'body': {\n color: 'green',\n },\n },\n}\n"]),h2({id:"config"},"/config.mjs"),p("the /config.mjs file allows you to set various aspects of your app"),h3({id:"config-example"},"example /config.mjs"),Pre(["export default {\n ROOT: 'example',\n THEME: 'blue',\n WEB_ROOT: '/core/',\n\n // this option adds the\n // 'X-Clacks-Overhead', 'GNU Terry Pratchet'\n // http header\n // see http://www.gnuterrypratchett.com/\n FOR_DEATH_CAN_NOT_HAVE_HIM: true,\n\n // default CLIENT_LIB_NAME, overwrite to change names of transpiled css and js files\n CLIENT_LIB_NAME: 'magic',\n}\n"]),Link({to:"https://github.com/magic/core/blob/master/src/modules/Menu.mjs"},"Menu.mjs on github")]},"/core/libraries/":function coreLibraries(){return[h1({id:"magiccore-library-docs"},"@magic/core library docs"),p("@magic/core libraries allow you to include client side functionality in your app."),h2({id:"abstract"},"libraries"),p("what would javascript be without the millions of dependencies\nthat you can easily install and make the average webpage\nslow[ly] (pun intended) grow towards a footprint of 5 megabytes."),p("we think that all of that bloat is unneeded, unheeded and, frankly, not optimal."),p(["magic has one external client side dependency, ',\n",Link({to:"https://github.com/jorgebucharan/hyperapp"},"hyperapp"),"\n, [~500 lines that provide our ui state machine]. thats it. and it won't change."]),p(["we also have the tendency to write libraries specialized for our usecase, see\n",Link({to:"https://github.com/magic/css"},"@magic/css"),",\n",Link({to:"https://github.com/magic/test"},"@magic/test"),Link({to:"https://github.com/magic/cli"},"@magic/cli"),"\nand others."]),p(["once there is a lib key in at least one component,',\nwindow.lib (browser) and global.lib (nodejs) will be set,',\naliasing lib as a global variable in both environments',"]),h3({id:"dir-or-file"},"lib dir or file"),p(["if you need libraries in multiple otherwise independent modules,\nit might be easier to keep your library dependencies in a central place."]),p(["to achieve this, one can simply create /assets/lib.mjs and export an object from it.\nthis object will get merged into the globalThis.lib object,\nmaking it available as \"lib\" throughout your app."]),p("alternatively, you can create a /assets/modules directory\nand place UpperCaseNamed.mjs files in there."),p(["their names will be deferred from the filename\nand they will be available in your app without importing them.\nif you do not use one of the modules,\ndead code elimination will simply remove it in production."]),Pre("export default { name: () => {} }"),p(["will turn into',\n"]),Pre("lib.name = () => {}"),p(),h3({id:"npm"},"@magic-libraries from npm"),p("all @magic-libraries and all npm packages starting with magic-library-* will be loaded automatically"),h4({id:"example"},"Example"),p("first, install a @magic-library"),Pre("npm install --save --save-exact @magic-libraries/is\n"),p("then, in javascript"),Pre(["export const View = props => div([\n 'value is ',\n lib.is(props.value, 'string') ? '' : 'not',\n ' a string'\n])\n"]),LibraryList()]},"/core/modules/":function coreModules(){return[h1({id:"magic-modules"},"@magic-modules"),p("magic modules are predefined modules for webapps."),h2({id:"definition"},"module definition"),p("the minimal module is a function that returns some html."),Pre("// /assets/ModuleName.mjs\n\n// simplest module\nexport const View = () => div('hello, world')\n\n// complete signature\nexport const View = (props = {}, children = []) => div('hello, world')\n"),h2({id:"usage"},"usage"),p(["if the npm package name starts with @magic-modules/ or magic-module-, it will get imported automagically.\nthe name of the Module will be set to a PascalCased version of the remainder of the module name.\n@magic-modules/git-badges, for example, turns into GitBadges.\nthe same is true for all uppercased files in your /assets/ directory and subdirectories.\nin the rare case where you want to install a npm module that can not be found,\nyou can import it in /assets/index.mjs"]),Pre(["// /assets/index.mjs\nexport default {\n // ...otherModules\n\n // load module from node_modules\n NpmModule: require('not-standard-named-magic-module-from-npm'),\n}\n"]),p("after this, the module will be a global in your app and can be used like any other component."),Pre(["// any page or module\nexport default state => div([\n // module without props\n Mod(),\n 'modules that need props: ',\n Mod({ state, customProp: true }),\n"]),ModuleList()]},"/core/modules/example/":function coreModulesExample(e){return[h1({id:"magic-modulesexample"},"@magic-modules/example"),h2({id:"custom-module"},"Mod and Component:"),Mod(e),Component({title:"Mod Component Title, passed via props"}),h3({id:"mod-sourcecode"},"Mod sourcecode:"),Pre(["export const View = state =>\n div({ class: 'Mod' }, [\n h3('Mod.Mod'),\n p([\n 'this is Mod. it gets loaded from ',\n Link({ to: 'https://github.com/magic/core/blob/master/example/assets/modules/Mod.mjs' }, '/assets/modules/Mod.mjs'),\n ' automatically, no need to import it.',\n ]),\n p(['the state of this module: ', JSON.stringify(state.module)]),\n ])\n\nexport const state = {\n module: {\n test: 'testing',\n },\n}\n\nexport const style = {\n margin: '0 0 1em',\n padding: '0.5em',\n border: '1px solid',\n borderColor: 'green',\n\n h3: {\n margin: 0,\n },\n}\n\nexport const global = {\n state: {\n module: true,\n },\n}\n"]),h3({id:"component-sourcecode"},"Component sourcecode:"),Pre(["export const View = props => {\n props = typeof props === 'string' ? { header: props } : props\n CHECK_PROPS(props, propTypes, 'Component')\n const header = props.header || props.title\n\n return div({ class: 'Component' }, \\[\n header && h5(header),\n p([\n 'Component, a second component in ',\n Link(\n { to: 'https://github.com/magic/core/blob/master/example/assets/modules/Component.mjs' },\n '/assets/modules/Component.mjs',\n ),\n ]),\n ])\n}\n\nexport const style = {\n border: '1px solid orange',\n}\n\nexport const propTypes = {\n Component: [{ key: 'header', type: ['string', 'array'], required: ['title'] }],\n}\n"])]},"/core/modules/html/":function coreModulesHtml(){return[h2("html file example"),p("this module gets imported from a html file."),p(["see ",Link({to:"https://github.com/magic/core/blob/master/example/pages/modules/html.html"},"this html file")," for an example."]),p("all html valid in can be used, excluding the

@magic-modules/example

Mod and Component:

Mod.Mod

this is Mod. it gets loaded from /assets/modules/Mod.mjs

the state of this module: {"test":"testing"}

Mod Component Title, passed via props

Component, a second component in /assets/modules/Component.mjs

Mod sourcecode:

export const View = state =>  div({ class: 'Mod' }, [    h3('Mod.Mod'),    p([      'this is Mod. it gets loaded from ',      Link({ to: 'https://github.com/magic/core/blob/master/example/assets/modules/Mod.mjs' }, '/assets/modules/Mod.mjs'),      ' automatically, no need to import it.',    ]),    p(['the state of this module: ', JSON.stringify(state.module)]),  ])export const state = {  module: {    test: 'testing',  },}export const style = {  margin: '0 0 1em',  padding: '0.5em',  border: '1px solid',  borderColor: 'green',  h3: {    margin: 0,  },}export const global = {  state: {    module: true,  },}

Component sourcecode:

export const View = props => {  props = typeof props === 'string' ? { header: props } : props  CHECK_PROPS(props, propTypes, 'Component')  const header = props.header || props.title  return div({ class: 'Component' }, \[    header && h5(header),    p([      'Component, a second component in ',      Link(        { to: 'https://github.com/magic/core/blob/master/example/assets/modules/Component.mjs' },        '/assets/modules/Component.mjs',      ),    ]),  ])}export const style = {  border: '1px solid orange',}export const propTypes = {  Component: [{ key: 'header', type: ['string', 'array'], required: ['title'] }],}
made with a few bits of magic
\ No newline at end of file +@magic-modules/example

@magic-modules/example

Mod and Component:

Mod.Mod

this is Mod. it gets loaded from /assets/modules/Mod.mjs

the state of this module: {"test":"testing"}

Mod Component Title, passed via props

Component, a second component in /assets/modules/Component.mjs

Mod sourcecode:

export const View = state =>  div({ class: 'Mod' }, [    h3('Mod.Mod'),    p([      'this is Mod. it gets loaded from ',      Link({ to: 'https://github.com/magic/core/blob/master/example/assets/modules/Mod.mjs' }, '/assets/modules/Mod.mjs'),      ' automatically, no need to import it.',    ]),    p(['the state of this module: ', JSON.stringify(state.module)]),  ])export const state = {  module: {    test: 'testing',  },}export const style = {  margin: '0 0 1em',  padding: '0.5em',  border: '1px solid',  borderColor: 'green',  h3: {    margin: 0,  },}export const global = {  state: {    module: true,  },}

Component sourcecode:

export const View = props => {  props = typeof props === 'string' ? { header: props } : props  CHECK_PROPS(props, propTypes, 'Component')  const header = props.header || props.title  return div({ class: 'Component' }, \[    header && h5(header),    p([      'Component, a second component in ',      Link(        { to: 'https://github.com/magic/core/blob/master/example/assets/modules/Component.mjs' },        '/assets/modules/Component.mjs',      ),    ]),  ])}export const style = {  border: '1px solid orange',}export const propTypes = {  Component: [{ key: 'header', type: ['string', 'array'], required: ['title'] }],}
made with a few bits of magic
\ No newline at end of file diff --git a/docs/modules/html/index.html b/docs/modules/html/index.html index d266d76d..6cb3dfe6 100644 --- a/docs/modules/html/index.html +++ b/docs/modules/html/index.html @@ -1 +1 @@ -html file example

html file example

this module gets imported from a html file.

see this html file for an example.

all html valid in <body> can be used, excluding the <script> and <style> tags.

the state looks like the following, and any valid json is allowed

---@state{  'title': 'markdown file example',  'description': 'markdown file description'}---
made with a few bits of magic
\ No newline at end of file +html file example

html file example

this module gets imported from a html file.

see this html file for an example.

all html valid in <body> can be used, excluding the <script> and <style> tags.

the state looks like the following, and any valid json is allowed

---@state{  'title': 'markdown file example',  'description': 'markdown file description'}---
made with a few bits of magic
\ No newline at end of file diff --git a/docs/modules/index.html b/docs/modules/index.html index ecb6dcb8..b634dc17 100644 --- a/docs/modules/index.html +++ b/docs/modules/index.html @@ -3,4 +3,4 @@ @magic-modules/git-badges, for example, turns into GitBadges. the same is true for all uppercased files in your /assets/ directory and subdirectories. in the rare case where you want to install a npm module that can not be found, -you can import it in /assets/index.mjs

// /assets/index.mjsexport default {  // ...otherModules  // load module from node_modules  NpmModule: require('not-standard-named-magic-module-from-npm'),}

after this, the module will be a global in your app and can be used like any other component.

// any page or moduleexport default state => div([  // module without props  Mod(),  'modules that need props: ',  Mod({ state, customProp: true }),

@magic-modules

modules are the grimoires of @magic. modules add both client and server functionality to your @magic app.
made with a few bits of magic
\ No newline at end of file +you can import it in /assets/index.mjs

// /assets/index.mjsexport default {  // ...otherModules  // load module from node_modules  NpmModule: require('not-standard-named-magic-module-from-npm'),}

after this, the module will be a global in your app and can be used like any other component.

// any page or moduleexport default state => div([  // module without props  Mod(),  'modules that need props: ',  Mod({ state, customProp: true }),

@magic-modules

modules are the grimoires of @magic. modules add both client and server functionality to your @magic app.
made with a few bits of magic
\ No newline at end of file diff --git a/docs/modules/markdown/index.html b/docs/modules/markdown/index.html index 05c5f5cd..a3a0b175 100644 --- a/docs/modules/markdown/index.html +++ b/docs/modules/markdown/index.html @@ -1,4 +1,4 @@ markdown file example

markdown file example

markdown file description

this module gets imported from a markdown file.

see this file in the example dir for an example.

any kind of markdown can be used here, but if you use html natively, only tags valid in a html5 body, excluding <script> and <style> tags, are accepted.

a list:

state

this markdown file also starts with a magic @state declaration. -it is used internally to, for example, add the title and meta rel="description" tags to the head of this html file.

the state looks like the following, and any valid json is allowed

---@state{  'title': 'markdown file example',  'description': 'markdown file description'}---
made with a few bits of magic
\ No newline at end of file +it is used internally to, for example, add the title and meta rel="description" tags to the head of this html file.

the state looks like the following, and any valid json is allowed

---@state{  'title': 'markdown file example',  'description': 'markdown file description'}---
made with a few bits of magic
\ No newline at end of file diff --git a/docs/modules/preinstalled/index.html b/docs/modules/preinstalled/index.html index 4068b9c3..315dc7f0 100644 --- a/docs/modules/preinstalled/index.html +++ b/docs/modules/preinstalled/index.html @@ -4,4 +4,4 @@ deep .merged into the app

// /assets/app.mjsexport const state = {  merge: 'gets merged into state',}export const actions = {  mergedActions: state => ({ ...state, merge: 'merged action executed' }),}

the Menu module provides... menus.

export const View = state => {  const items = [    { to: '/example-page', text: 'example page' },    { to: 'https://example.com', text: 'example.com' },    { to: 'https://example.com', nofollow: true, noreferrer: true, target: 'utopia', text: 'nofollow' and noref'' },  ]  return Menu({ items, collapse: false })}// output:[object Object]}

the Menu module allows multiple props to be passed when instantiating the Menu

by default, the menu will only show submenu items if their parent link is active. to force submenu items to show at all times, just pass a collapse: false prop

Menu({  // if false, menu will always show all submenu items  collapse: false, // (default: true)})

every MenuItem accepts props the same props as a link does. -additionally a MenuItem accepts a items prop with sub menu items.

const menuItem = ({  to: '/url',  text: 'link text',  items: [MenuItems],  noreferrer: true, // set rel='noreferrer'  nofollow: true, // set rel='nofollow'})

to define a submenu, simply define a .items array on the menu item

// assets/app.mjsexport default {  state: {    // ...state    menuName: [      {        to: '/example-page',        text: 'example page',        items: [          { to: '/example-page/#sub', text: 'example sub page' },      ] },    ],  },  // ... rest of app.mjs}

the link module allows you to link to things.

// in any page or module Viewexport default () => [  Link({ to: '/page', text: 'page' }),  // output: [object Object]  Link({ to: 'https://example.com', text: 'page' }),  // output: [object Object]  Link({ to: '/page', text: 'page', nofollow: true, noreferrer: true }),  // output: [object Object]  // you can also use children syntax instead of the text prop:  Link({ to: '/' }, 'home'),  // Link also supports # hash links  Link({ to: '/#hash' }, 'home with hash'),]

img

the img module adds some sane default values to your images.

// in any page or module Viewexport default () => [  Img('/image.png'),  // output: [object Object]  Img({ src: '/image.png }),'  // output: [object Object]  Img({ src: '/image.png', alt: 'image description' }),  // output: [object Object]  Img({ src: '/image.png', title: 'image title', }),  // output: [object Object]  Img({ src: '/image.png', title: 'image title', alt: 'image alt' }),  // output: [object Object]]

the footer module contains a small info text and a link to the magic github repository.

to overwrite this behaviour, just place a Footer.mjs file in your assets and require it in /assets/index.mjs.

// /assets/Footer.mjs:const Footer = () =>footer({ class: 'main' }, [  div({ class: 'wrapper' }, [    'made with a few bits of ',    Link({ href: 'https://github.com/magic/core', target: '_blank', rel: 'noopener' }, 'magic'),  ]),])Footer.style: {  'footer.main': {    position: 'relative',    textAlign: 'center',    padding: '5em 0 .5em',  },}export default Footer
made with a few bits of magic
\ No newline at end of file +additionally a MenuItem accepts a items prop with sub menu items.

const menuItem = ({  to: '/url',  text: 'link text',  items: [MenuItems],  noreferrer: true, // set rel='noreferrer'  nofollow: true, // set rel='nofollow'})

to define a submenu, simply define a .items array on the menu item

// assets/app.mjsexport default {  state: {    // ...state    menuName: [      {        to: '/example-page',        text: 'example page',        items: [          { to: '/example-page/#sub', text: 'example sub page' },      ] },    ],  },  // ... rest of app.mjs}

the link module allows you to link to things.

// in any page or module Viewexport default () => [  Link({ to: '/page', text: 'page' }),  // output: [object Object]  Link({ to: 'https://example.com', text: 'page' }),  // output: [object Object]  Link({ to: '/page', text: 'page', nofollow: true, noreferrer: true }),  // output: [object Object]  // you can also use children syntax instead of the text prop:  Link({ to: '/' }, 'home'),  // Link also supports # hash links  Link({ to: '/#hash' }, 'home with hash'),]

img

the img module adds some sane default values to your images.

// in any page or module Viewexport default () => [  Img('/image.png'),  // output: [object Object]  Img({ src: '/image.png }),'  // output: [object Object]  Img({ src: '/image.png', alt: 'image description' }),  // output: [object Object]  Img({ src: '/image.png', title: 'image title', }),  // output: [object Object]  Img({ src: '/image.png', title: 'image title', alt: 'image alt' }),  // output: [object Object]]

the footer module contains a small info text and a link to the magic github repository.

to overwrite this behaviour, just place a Footer.mjs file in your assets and require it in /assets/index.mjs.

// /assets/Footer.mjs:const Footer = () =>footer({ class: 'main' }, [  div({ class: 'wrapper' }, [    'made with a few bits of ',    Link({ href: 'https://github.com/magic/core', target: '_blank', rel: 'noopener' }, 'magic'),  ]),])Footer.style: {  'footer.main': {    position: 'relative',    textAlign: 'center',    padding: '5em 0 .5em',  },}export default Footer
made with a few bits of magic
\ No newline at end of file diff --git a/docs/modules/propTypes/index.html b/docs/modules/propTypes/index.html index 73169a64..9b0507e6 100644 --- a/docs/modules/propTypes/index.html +++ b/docs/modules/propTypes/index.html @@ -1 +1 @@ -@magic-modules/prop-types

@magic-modules/prop-types

CHECK_PROPS

@magic-modules can export a .propTypes object with an array of prop types.

example

export const View = (prop1, prop2, prop3) => [  p(prop1),  p(prop2),  p(prop3),]export const propTypes = [  { name: 'prop1', type: 'string' },  { name: 'prop2', type: 'number' },  { name: 'prop3', type: 'array', items: 'string' },  {    name: 'prop4',    type: 'object',    items: [      { name: 'prop4prop1', type: 'string' },      { name: 'prop4prop2', type: 'number' },  ] },]
made with a few bits of magic
\ No newline at end of file +@magic-modules/prop-types

@magic-modules/prop-types

CHECK_PROPS

@magic-modules can export a .propTypes object with an array of prop types.

example

export const View = (prop1, prop2, prop3) => [  p(prop1),  p(prop2),  p(prop3),]export const propTypes = [  { name: 'prop1', type: 'string' },  { name: 'prop2', type: 'number' },  { name: 'prop3', type: 'array', items: 'string' },  {    name: 'prop4',    type: 'object',    items: [      { name: 'prop4prop1', type: 'string' },      { name: 'prop4prop2', type: 'number' },  ] },]
made with a few bits of magic
\ No newline at end of file diff --git a/docs/news/2019/12/22/blogging/index.html b/docs/news/2019/12/22/blogging/index.html index 81ebbe08..73640767 100644 --- a/docs/news/2019/12/22/blogging/index.html +++ b/docs/news/2019/12/22/blogging/index.html @@ -3,4 +3,4 @@ but can be overwritten by adding them to the config.BLOG_DIR dir of your @magic app.

to use the blog, create an archive dir, for example 

src/blog/2019/12/22/

then just add the blogposts in that directory structure.

@magic will automagically build a blog directory for you, -including the archives for yearly, monthly and overall blog posts.

more information following soon.

Blog Archives:

year: 2019

month: 12 2019

made with a few bits of magic
\ No newline at end of file +including the archives for yearly, monthly and overall blog posts.

more information following soon.

Blog Archives:

year: 2019

month: 12 2019

made with a few bits of magic
\ No newline at end of file diff --git a/docs/news/2019/12/index.html b/docs/news/2019/12/index.html index 4d7be6b3..6a26e08b 100644 --- a/docs/news/2019/12/index.html +++ b/docs/news/2019/12/index.html @@ -1 +1 @@ -@magic/core documentation

12 - 2019

22-12-2019 - blogging...

@magic has a blog now.

made with a few bits of magic
\ No newline at end of file +@magic/core documentation

12 - 2019

22-12-2019 - blogging...

@magic has a blog now.

made with a few bits of magic
\ No newline at end of file diff --git a/docs/news/2019/index.html b/docs/news/2019/index.html index b8e1dbf6..97d3270b 100644 --- a/docs/news/2019/index.html +++ b/docs/news/2019/index.html @@ -1 +1 @@ -@magic/core documentation

2019

12

22-12-2019 - blogging...

@magic has a blog now.

made with a few bits of magic
\ No newline at end of file +@magic/core documentation

2019

12

22-12-2019 - blogging...

@magic has a blog now.

made with a few bits of magic
\ No newline at end of file diff --git a/docs/news/index.html b/docs/news/index.html index 891ed3e7..fca07964 100644 --- a/docs/news/index.html +++ b/docs/news/index.html @@ -1 +1 @@ -@magic/core documentation

2019

12

22-12-2019 - blogging...

@magic has a blog now.

made with a few bits of magic
\ No newline at end of file +@magic/core documentation

2019

12

22-12-2019 - blogging...

@magic has a blog now.

made with a few bits of magic
\ No newline at end of file diff --git a/docs/sri-hashes.json b/docs/sri-hashes.json index faef1f1e..58b4e996 100644 --- a/docs/sri-hashes.json +++ b/docs/sri-hashes.json @@ -1,23 +1,23 @@ { "css": "sha384-AuBbOOGV8V7qwYuRRjL5HCXKKhRj29IGC4ARqET5FICjYTDqs0g9AL85rr8xI53/", - "js": "sha384-aWIROZ5161nRWBO7FGm5kenNt8/yAW0dvC/FQzKipxTvofcxvgA5c+g91xoMN1AP", + "js": "sha384-2Xn8S9cURInobIW9YTRATwcQAhpUqrAR39fH2cBm9Aml4zQ794snEdOQ0o/GoOgA", "pages": { - "/core/": "sha384-385CSCTyQqC+NTZgPZ2amuyvN6cNem+qr6SDNnJhsbl6uvPaN8y/sCRf2LRaVYyW", - "/core/404/": "sha384-//7SGzOHuFn5A4JNffdFXfw8OU/+t1Vf4oQFYEff1Vm5D68SQssUI1AXDllhUt5T", - "/core/concepts/": "sha384-CrcdhE32RKMiB+P8nQZxwGgLorhSAiAeLWE9DISNZDBYS5guImI4/wJr5bSXT93Y", - "/core/files/": "sha384-EoTZO4gH3wVHZo9UHHbM6fLEHakpWh6W/DSyNyrYNGyuaUhrDCMJsZHqRmJSxLZL", - "/core/libraries/": "sha384-isFOasJWVnzH3y35KFdsBnL+LYAcoDYSy99tMOu2kuxRUk6gunYpqyba6vtJErl/", - "/core/modules/": "sha384-KMLxz657a5Tk33Qvp/bkXyTiu26aSk7DHjDeycjOpYjXta/SrtmGjx8xK3DJrq2j", - "/core/modules/example/": "sha384-C8A0GnjHAbGJHtXYHb7dmj3AfpyzorQ0ss4DojiidEWOpww/9yt8t4MN/Y3mlJlR", - "/core/modules/html/": "sha384-FNagDUuaDuIMt/t8iylBytq4LYTCD/0KpUgbNlp7fDWI4joqBjdIV6Odaty1q9Ds", - "/core/modules/markdown/": "sha384-TKFe3xCt/djAbtIsz0iD5dswTQ907obC0sfYELNW69Are3MOgKlmXxS92YxH6b40", - "/core/modules/preinstalled/": "sha384-JozXbqjyS+zaJtjh8FN8sbXeIcS8BSLUeU6jwL9xPbVZtlmae5dNT3KOqq7bGxYv", - "/core/modules/propTypes/": "sha384-6d6ZVvn+5c23Zj4RnqyV3WnWZDbn7E2Zs8+NDJHX6pLmxgaoeDXNeRtGzosmaid0", - "/core/news/": "sha384-vPzWmZeSo9fWXlXSDtFWjxfaRY8DsFHPjMJNput3SaipaRTwrt3M2meuV9FEVCR6", - "/core/news/2019/": "sha384-gV0r4NyG8gGy1Oych5Ir4TmVg7NPF7pqnVjp/rmBomXfFHg0WE0xSj37XB0ZJ8Kf", - "/core/news/2019/12/": "sha384-LMPmrQS1Jp2vpLJQZZVEHJIsG/U97dARJsZiUzvkRAJ4d0Q2lt83nPbBxI3wulrt", - "/core/news/2019/12/22/blogging/": "sha384-FvYLBL4HqOGERZmvyGRBg0LLJ3QikmGYUh4hkQRPePSCma9YDO2nxsuxXZ64mp5U", - "/core/themes/": "sha384-KOVtmrh9AXOkurhk6fEFkfmSbaiEUuvUxny64/etqYC/bj3xMLub8IrZ6pPRoo6a" + "/core/": "sha384-2alM7v+cVYXN6xDTjOIkrMqLcVdlJj5/WIqTZofDf2dANljnRXjBbMBuTXRiiEnr", + "/core/404/": "sha384-VjBawbQYHmk78nKcdm3vUz8EwyuoP0h3q3VLYu26D4T3uMr53ebHAfHTwaf8QUze", + "/core/concepts/": "sha384-Dz5aHSiGvKVILv8MFygyTZ6F9XfYpX86AMVCh5jZBVe6B3J/Kbw1NVgaVNLLKZYx", + "/core/files/": "sha384-WnsEn9Ghb9Sm0dLxkEl2CJqk1afV6Pc5NrA735gQtmmqQwZuT6ueQX2GK6dvxW7S", + "/core/libraries/": "sha384-1wvh7LJYgjb5TPtwVAmoDqKSr+/4BSQEaEP9TaEBpHx2YzlwzGPPNUEBlhKdN+Al", + "/core/modules/": "sha384-w3hoikPpn1Rij5VLSp8A4q5muBih84TPmvLchmxBxDQn/EuESeu9L1eRKqEXsjFA", + "/core/modules/example/": "sha384-ri7DdRTLgrvvI8VrHB0hDmv2vmkPoslbxzATN+y6YzY+BeXffWe6tJNuZHJopRW/", + "/core/modules/html/": "sha384-5W/ZhAXiBXbwOXN3usPnACL9FOtv7wjLhOSmSPcauP+lVSvOegpehYT8UxCauPn/", + "/core/modules/markdown/": "sha384-GHFCjSsh9nC9ctp8uLpdk5kl/oIvbn9Y6jfj0/565/S0+cLmRacW72Z+qGksVKMH", + "/core/modules/preinstalled/": "sha384-jw5CjQhBtkEVDL3UFyXETQBUNIpCOJw9zckrdN6e/PKxJYYiq4ubnLPlrxwDFf6s", + "/core/modules/propTypes/": "sha384-IYw2nRpH4kMzhdTtcynGSOHVn3UrNmcqmWQ4yWZmshG+THtJicfjpci1ypFZKX90", + "/core/news/": "sha384-KaopFKsHGeqsmv6SOoZaqDXKckSFs2L0WpANoE7jZx32qCvq+uL5Cf5pWFEMRC/X", + "/core/news/2019/": "sha384-Ri9LSJJwVrmo5AlmF91qtnVNRP1SPrTJ1CItjfXvZHbnakQQ3qETLy0q9gln1qfD", + "/core/news/2019/12/": "sha384-NWiecSIACuUS51k+Fxa1Bff+ltkpZPUcHeUVMgwIBgCUKMiOdPA71PXpRVrVJRj5", + "/core/news/2019/12/22/blogging/": "sha384-rAt/wmB/M8CT981jympi9vQzBGNaBqosoXY9vBmPGDe/m1pBKeifyaEpa0crWBdQ", + "/core/themes/": "sha384-ayR5NF/ig6y9zDdsVWRDCRgJrHCSvn45r24Ue8W20oBnXIqAnVTSJ5NpdnRSjlUI" }, "static": { "/favicon.ico": "sha384-pf51ay6pZCj3+XlVCPmCKLDFpLj7QP+2heR+/n08WgS7Bve7JMkgubHOkwLzaTr+", diff --git a/docs/themes/index.html b/docs/themes/index.html index ac24a755..8fd8ac82 100644 --- a/docs/themes/index.html +++ b/docs/themes/index.html @@ -1,2 +1,2 @@ @magic-themes

@magic-themes

magic themes are themes for magic apps. -you decide which theme to load by specifying the theme name in config.THEME

// /config.mjsexport default {  // ...rest of config,  THEME: 'blue',}

theme load order

themes get loaded from multiple places. last in the list overwrites earlier entries.

// ...default module styles get inserted here/node_modules/@magic/core/src/themes/THEME/index.mjs/node_modules/@magic-themes/THEME/assets/themes/THEME/index.mjs

@magic-themes

below is a collection of the available @magic app themes.
made with a few bits of magic
\ No newline at end of file +you decide which theme to load by specifying the theme name in config.THEME

// /config.mjsexport default {  // ...rest of config,  THEME: 'blue',}

theme load order

themes get loaded from multiple places. last in the list overwrites earlier entries.

// ...default module styles get inserted here/node_modules/@magic/core/src/themes/THEME/index.mjs/node_modules/@magic-themes/THEME/assets/themes/THEME/index.mjs

@magic-themes

below is a collection of the available @magic app themes.
made with a few bits of magic
\ No newline at end of file