/ittf/site/docs/howtos/wizziapi.html.ittf (primary)

edit 
                                            
   1 html
   2     $global
   3         var dollar = '$';
   4     $
   5         var art = {
   6             section: 'Howtos',
   7             title: 'Wizzi API'
   8         };
   9     _layouts/concepts( &art)
  10         $include ./wizziapi/introduction

/ittf/site/docs/t/_layouts/concepts.html.ittf

edit 
                                            
   1 $group
   2     $params &art
   3     $include models/docs/site.wzctx
   4     $
   5         var opt = {
   6             section: 'Docs',
   7             title: art.section,
   8             useHighlight: true,
   9             stickyNav: 'stickyNavbar',
  10             stickyNavOffset: 50,
  11             stickyNavLogo: 'logo',
  12         }
  13         // var sectionKey = art.section == "How to" ? "HowTos" : art.section;
  14         var sectionItems = wzCtx[art.section].items
  15     style
  16         css
  17             . current
  18                 color yellow
  19     html/layouts/docs( &opt )
  20         $append head-styles-2
  21             css /ittf/site/docs/styles/docs.css.ittf
  22         . flex-row
  23             $$ id main-container
  24             style height:100%; width:80%; margin: 0 auto; padding-top: 40px;
  25             . flex-column scrollbar-thin
  26                 $$ id middle-container
  27                 style width:70%; height:100%; overflow: auto;
  28                 $hook
  29             . flex-column
  30                 style width:30%; padding: 40px;
  31                 $foreach item in sectionItems
  32                     div
  33                         $if item.title === art.title
  34                             class current
  35                             . current
  36                                 + ${item.title}
  37                         $else
  38                             a ${item.title}
  39                                 href ${item.url}

/ittf/site/docs/howtos/t/wizziapi/introduction.html.ittf

edit 
                                            
   1 $group
   2     $
   3         var sect = {
   4             title: 'Wizzi API'
   5         };
   6     section( §)
   7         p To use the Wizzi API you need to install the
   8             to-wizzi-package( wizzi )
   9             + package locally in your project folder.
  10         bash-panel
  11             title Install the wizzi package
  12             ittf
  13                 npm i wizzi
  14         p All Wizzi Actions require an instance of the
  15             high-code( WizziFactory )
  16             + class.
  17         js-panel
  18             title Create a WizziFactory instance
  19             ittf
  20                 import wizzi;
  21                 var wizziFactory = wizzi.createFactory({
  22                     repo: {
  23                         storeKind: 'filesystem'
  24                     },
  25                     plugins: {
  26                         pluginsBaseFolder: __dirname,
  27                         items: [
  28                             'wizzi-core',
  29                             'wizzi-js',
  30                             'wizzi-web'
  31                         ]
  32                     },
  33                     globalContext: {
  34                         author: 'Stefano'
  35                     }
  36                 }, function(err, wizziFactory) {
  37                     if (err) {
  38                         throw new Error(err.message);
  39                     }
  40                     // call wizziFactory methods
  41                 });
  42         p Creation options cannot be modified. If you need to change the options
  43             \b you have to create a new istance.
  44         js-panel
  45             title Execute a Load mTree action
  46             ittf
  47                 wizziFactory.loadMTree (
  48                     path.join (__dirname, 'ittf', 'mysource.myschema.ittf'),
  49                     myContextObject,
  50                     function (err, loadedMTree) {
  51                         if (err) {
  52                             throw new Error(err.message);
  53                         }
  54                         // ... use the loadedMTree object
  55                     });
  56         p Usually you don't need to load an mTree, the Wizzi Model Loader does it for you.
  57             \b But, if needed, you can load and modify an mTree and then pass it
  58             \b to the Wizzi Model Loader instead of the path to the source ITTF Document.
  59         js-panel
  60             title Execute a Load mTree buildup script action
  61             ittf
  62                 wizziFactory.loadMTreeBuildUpScript (
  63                     path.join (__dirname, 'ittf', 'mysource.myschema.ittf'),
  64                     myContextObject,
  65                     function (err, loadedMTreeBuildUpScript) {
  66                         if (err) {
  67                             throw new Error(err.message);
  68                         }
  69                         // ... use the loadedMTreeBuildUpScript object
  70                     });
  71         p You execute this action for debugging purposes. An mTree Debug Info
  72             \b contains the source of the mTree build up script generated by the ITTF Process.
  73         js-panel
  74             title Execute a Load Wizzi Model Instance action
  75             ittf
  76                 wizziFactory.loadModel (
  77                     'myschema', // schema name
  78                     path.join (__dirname, 'ittf', 'mysource.myschema.ittf'),
  79                     {
  80                         mTreeBuildUpContext: myContextObject,
  81                         formatOptions: {}
  82                     },
  83                     function (err, loadedModel) {
  84                         if (err) {
  85                             throw new Error(err.message);
  86                         }
  87                         // ... use the loadedModel object
  88                     });
  89         p With this action you load a Wizzi Model Instance
  90             \b that will be used as a context object in following actions.
  91         js-panel
  92             title Execute a Model Transformation action
  93             ittf
  94                 wizziFactory.transformModel (
  95                     myLoadedModel, // Wizzi Model Instance
  96                     'myschema/mytransformer', // transformer name
  97                     myContextObject,
  98                     function (err, transformedModel) {
  99                         if (err) {
 100                             throw new Error(err.message);
 101                         }
 102                         // ... use the transformedModel object
 103                     });
 104         p With this action you can extract from a Wizzi Model Instance
 105             \b a modified instance or a POJO object to use as a context object in following actions.
 106         js-panel
 107             title Execute an Artifact Generation action
 108             ittf
 109                 wizziFactory.generateArtifact (
 110                     artifactModel, // Wizzi Model Instance or POJO, the main generation context
 111                     path.join (__dirname, 'ittf', 'mysource.myschema.ittf'),
 112                     'myschema/myartifact', // artifact name
 113                     myContextObject,
 114                     function (err, artifactText) {
 115                         if (err) {
 116                             throw new Error(err.message);
 117                         }
 118                         // ... save or use the artifactText
 119                     });

/ittf/site/docs/howtos/t/section.html.ittf

edit 
                                            
   1 $group
   2     $params §
   3     article
   4         . doc-title
   5             id ${sect.id}
   6             + ${sect.title}
   7         . doc-summary
   8             $hook

/ittf/site/docs/t/to-wizzi-package.html.ittf

edit 
                                            
   1 $group
   2     $params name, kind|@@null
   3     $
   4         var xname = kind != 'nospace' ? ' ' + name + ' ' : name
   5     a ${xname}
   6         href https://github.com/stfnbssl/wizzi/tree/main/packages/${name}
   7         target _blank

/ittf/site/docs/t/high-code.html.ittf

edit 
                                            
   1 $group
   2     $params text, kind|@@null
   3     $if kind != 'nospace'
   4         span ${} ${}
   5     code
   6         class highlight-code
   7         + ${text}
   8     $if kind != 'nospace'
   9         span ${} ${}

/t/models/docs/site.wzctx.ittf

edit 
                                            
   1 $group
   2     $global
   3         var wzCtx = {
   4             name: "stfnbssl.github.io/wizzi",
   5             version: "0.7.1",
   6             description: "Wizzi github page",
   7             author: "Stefano Bassoli",
   8             license: "MIT",
   9             Params: {
  10                 title: "Wizzi",
  11                 baseUrl: "https://stfnbssl.github.io/wizzi"
  12             },
  13             Section: {
  14                 items: [
  15                     {
  16                         title: "Concepts",
  17                         url: "/ittf/site/docs/concepts/overview.html.ittf"
  18                     },
  19                     {
  20                         title: "Howtos",
  21                         url: "/ittf/site/docs/howtos/getstarted.html.ittf"
  22                     },
  23                     /*
  24                     {
  25                         title: "Sample code",
  26                         url: "/ittf/site/docs/samplecode/overview.html.ittf"
  27                     },
  28                     {
  29                         title: "Geeky",
  30                         url: "/ittf/site/docs/geeky/overview.html.ittf"
  31                     },
  32                     */
  33                     {
  34                         title: "Cheatsheets",
  35                         url: "/wizzi/docs/cheatsheet/html"
  36                     },
  37                     {
  38                         title: "Play",
  39                         url: "/ittf/site/docs/play/index.html.ittf"
  40                     }
  41                 ]
  42             },
  43             Concepts: {
  44                 items: [
  45                     {
  46                         title: "Overview",
  47                         url: "./overview.html.ittf"
  48                     },
  49                     {
  50                         title: "Ittf Documents",
  51                         url: "./ittfdocuments.html.ittf"
  52                     },
  53                     {
  54                         title: "Template Engine",
  55                         url: "./templateengine.html.ittf"
  56                     },
  57                     {
  58                         title: "JsWizzi",
  59                         url: "./jswizzi.html.ittf"
  60                     },
  61                     {
  62                         title: "mTrees",
  63                         url: "./mtrees.html.ittf"
  64                     },
  65                     {
  66                         title: "Wizzi Schemas",
  67                         url: "./wizzischemas.html.ittf"
  68                     },
  69                     {
  70                         title: "Wizzi Model DOMs",
  71                         url: "./wizzimodeldoms.html.ittf"
  72                     },
  73                     {
  74                         title: "Wizzi Model Instances",
  75                         url: "./wizzimodelinstances.html.ittf"
  76                     },
  77                     {
  78                         title: "Model Transformers",
  79                         url: "./modeltransformers.html.ittf"
  80                     },
  81                     {
  82                         title: "Artifact Generators",
  83                         url: "./artifactgenerators.html.ittf"
  84                     },
  85                     {
  86                         title: "Wizzi Jobs",
  87                         url: "./wizzijobs.html.ittf"
  88                     },
  89                     {
  90                         title: "Wizzi Meta Productions",
  91                         url: "./wizzimetaproductions.html.ittf"
  92                     },
  93                     {
  94                         title: "Wizzi Plugins",
  95                         url: "./wizziplugins.html.ittf"
  96                     },
  97                     {
  98                         title: "Wizzi Meta Plugins",
  99                         url: "./wizzimetaplugins.html.ittf"
 100                     },
 101                     {
 102                         title: "Wizzi API",
 103                         url: "./wizziapi.html.ittf"
 104                     },
 105                     {
 106                         title: "Wizzi CLI",
 107                         url: "./wizzicli.html.ittf"
 108                     },
 109                     {
 110                         title: "Virtual Store System",
 111                         url: "./virtualstoresystem.html.ittf"
 112                     },
 113                     {
 114                         title: "Glossary",
 115                         url: "./glossary.html.ittf"
 116                     }
 117                 ]
 118             },
 119             Howtos: {
 120                 items: [
 121                     {
 122                         title: "Get started",
 123                         url: "./getstarted.html.ittf"
 124                     },
 125                     {
 126                         title: "Wizzi API",
 127                         url: "./wizziapi.html.ittf"
 128                     }
 129                 ]
 130             },
 131             SampleCode: {
 132                 items: [
 133                     {
 134                         title: "Overview",
 135                         url: "./overview.html.ittf"
 136                     },
 137                     {
 138                         title: "Template Engine",
 139                         url: "./templateengine.html.ittf"
 140                     },
 141                     {
 142                         title: "JsWizzi",
 143                         url: "./jswizzi.html.ittf"
 144                     },
 145                     {
 146                         title: "mTrees",
 147                         url: "./mtrees.html.ittf"
 148                     },
 149                     {
 150                         title: "Wizzi Schemas",
 151                         url: "./wizzischemas.html.ittf"
 152                     },
 153                     {
 154                         title: "Wizzi Model DOMs",
 155                         url: "./wizzimodeldoms.html.ittf"
 156                     },
 157                     {
 158                         title: "Model Transformers",
 159                         url: "./modeltransformers.html.ittf"
 160                     },
 161                     {
 162                         title: "Artifact Generators",
 163                         url: "./artifactgenerators.html.ittf"
 164                     },
 165                     {
 166                         title: "Wizzi Jobs",
 167                         url: "./wizzijobs.html.ittf"
 168                     },
 169                     {
 170                         title: "Wizzi Plugins",
 171                         url: "./wizziplugins.html.ittf"
 172                     },
 173                     {
 174                         title: "Wizzi API",
 175                         url: "./wizziapi.html.ittf"
 176                     },
 177                     {
 178                         title: "Virtual Store System",
 179                         url: "./virtualstoresystem.html.ittf"
 180                     },
 181                     {
 182                         title: "Glossary",
 183                         url: "./glossary.html.ittf"
 184                     }
 185                 ]
 186             },
 187             Geeky: {
 188                 items: [
 189                     {
 190                         title: "Overview",
 191                         url: "./overview.html.ittf"
 192                     },
 193                     {
 194                         title: "Template Engine",
 195                         url: "./templateengine.html.ittf"
 196                     },
 197                     {
 198                         title: "JsWizzi",
 199                         url: "./jswizzi.html.ittf"
 200                     },
 201                     {
 202                         title: "mTrees",
 203                         url: "./mtrees.html.ittf"
 204                     },
 205                     {
 206                         title: "Wizzi Schemas",
 207                         url: "./wizzischemas.html.ittf"
 208                     },
 209                     {
 210                         title: "Wizzi Model DOMs",
 211                         url: "./wizzimodeldoms.html.ittf"
 212                     },
 213                     {
 214                         title: "Model Transformers",
 215                         url: "./modeltransformers.html.ittf"
 216                     },
 217                     {
 218                         title: "Artifact Generators",
 219                         url: "./artifactgenerators.html.ittf"
 220                     },
 221                     {
 222                         title: "Wizzi Jobs",
 223                         url: "./wizzijobs.html.ittf"
 224                     },
 225                     {
 226                         title: "Wizzi Plugins",
 227                         url: "./wizziplugins.html.ittf"
 228                     },
 229                     {
 230                         title: "Wizzi API",
 231                         url: "./wizziapi.html.ittf"
 232                     },
 233                     {
 234                         title: "Wizzi CLI",
 235                         url: "./wizzicli.html.ittf"
 236                     },
 237                     {
 238                         title: "Virtual Store System",
 239                         url: "./virtualstoresystem.html.ittf"
 240                     },
 241                     {
 242                         title: "Glossary",
 243                         url: "./glossary.html.ittf"
 244                     }
 245                 ]
 246             },
 247             Starter: {
 248                 "items": [
 249                     {
 250                         title: "wizzi-starter-wizzi-plugin",
 251                         url: "https://github.com/wizzifactory/wizzi-examples/tree/master/packages/wizzi-starter-wizzi-plugin"
 252                     },
 253                     {
 254                         title: "wizzi-starter-webpack-react",
 255                         url: "https://github.com/wizzifactory/wizzi-examples/tree/master/packages/wizzi-starter-webpack-react"
 256                     },
 257                     {
 258                         title: "wizzi-starter-mern",
 259                         url: "https://github.com/wizzifactory/wizzi-examples/tree/master/packages/wizzi-starter-mern"
 260                     },
 261                     {
 262                         title: "wizzi-starter-nextjs",
 263                         url: "https://github.com/wizzifactory/wizzi-examples/tree/master/packages/wizzi-starter-nextjs"
 264                     },
 265                     {
 266                         title: "wizzi-starter-gatsby",
 267                         url: "https://github.com/wizzifactory/wizzi-examples/tree/master/packages/wizzi-starter-gatsby"
 268                     }
 269                 ]
 270             },
 271             "Plugin": {
 272                 items: [
 273                     {
 274                         title: "wizzi-js",
 275                         url: "https://github.com/wizzifactory/wizzi/tree/master/packages/wizzi-js/dist"
 276                     },
 277                     {
 278                         title: "wizzi-web",
 279                         url: "https://github.com/wizzifactory/wizzi/tree/master/packages/wizzi-web/dist"
 280                     },
 281                     {
 282                         title: "wizzi-lab",
 283                         url: "https://github.com/wizzifactory/wizzi/tree/master/packages/wizzi-lab/dist"
 284                     }
 285                 ]
 286             },
 287             Colors: {
 288                 "bg_0": "#333",
 289                 "bg_f_0": "#000",
 290                 "c_0": "#fff",
 291                 "bg_dark": "#333",
 292                 "bg_dark_medium": "#444",
 293                 "c_dark": "#ddd",
 294                 "c_dark_medium": "#bbb",
 295                 "h3_c_dark": "#fc0"
 296             },
 297             Fonts: {
 298                 "useMaterialIcons": true,
 299                 "materialIcons": {
 300                     "baseUrl": "https://stfnbssl.github.io/wizzi/fonts",
 301                     "fontWeight": "400",
 302                     "size": "24px"
 303                 }
 304             },
 305             Styles: {
 306                 shellColors: {
 307                     mainHeaderBg: "#0D0D0D",
 308                     mainHeader: "#dedede",
 309                     mainContentBg: "#2D2D2D",
 310                     mainContent: "#dedede",
 311                     mainContentLeftBarBg: "#1D1D1D",
 312                     mainContentLeftBar: "#dedede",
 313                     mainFooterBg: "#0D0D0D",
 314                     mainFooter: "#dedede",
 315                 }
 316             }
 317         }
 318         var mpage = {
 319             Colors: {
 320                 background: "#ffffff",
 321                 scheme1Fade90: "whiteFade-90,rgba(255,255,255,0.9)",
 322                 themeBack: "#ffffff",
 323                 primary: "#BDF3EE",
 324                 primaryDark: "#122944",
 325                 primary30: "#BDF3EE",
 326                 gray70: "grey-70,#222B31",
 327                 grad1: "#81B6CF",
 328                 grad2: "#222B31"
 329             }
 330         }

/t/html/layouts/docs.html.ittf

edit 
                                            
   1 $group
   2     $params &opt
   3     $
   4         var ca = 'p-l-xxl p-r-xxl p-t-s p-b-s color-header font-l font-w-xxl';
   5         var ca_inverse = 'p-l-xxl p-r-xxl p-t-s p-b-s color-header-inverse /*bg-color-header-inverse*/ font-l font-w-xxl';
   6         var ca2 = 'color-header font-x font-w-s';
   7     head
   8         $if opt.title
   9             @title ${opt.title}
  10         meta
  11             charset utf-8
  12         meta
  13             name viewport
  14             content width=device-width, initial-scale=1
  15         link
  16             rel preconnect
  17             href https://fonts.googleapis.com
  18         link
  19             rel preconnect
  20             href https://fonts.gstatic.com
  21             crossorigin
  22         link
  23             @ rel "stylesheet"
  24             @ href "https://cdn.jsdelivr.net/npm/[email protected]/normalize.min.css"
  25         script
  26             module
  27                 set window.__filename = 'browser'
  28         css /ittf/css/main.css.ittf
  29         $include ./styles
  30         $hook head-styles-0
  31         ./site-styles( &opt )
  32         $hook head-styles
  33         $hook head-styles-2
  34         $hook head-scripts
  35     body
  36         . full-page
  37             . main-header
  38                 . flex-row space-between align-items-center width-100
  39                     id __main_navbar
  40                     . flex-row
  41                         html/a(  /,  ${ca2})
  42                             div
  43                                 style width: 80px; margin-top: 5px; margin-left: 20px;
  44                                 html/images/logo( ${colors.mainHeader},  ${colors.mainHeaderBg})
  45                     . flex-row
  46                         $foreach item in wzCtx.Section.items
  47                             $if item.title === opt.title
  48                                 . ${ca_inverse}
  49                                     + ${item.title}
  50                                     title "Current"
  51                             $else
  52                                 html/a( ${item.title},  ${item.url},  ${ca})
  53                     . flex-row m-r-x
  54                         $if false
  55                             $if locals.user
  56                                 html/a( Profile,  /account/profile,  ${ca})
  57                                 html/a( Log Out,  /auth/logout,  ${ca})
  58                             $else
  59                                 html/a( Log In,  /auth/login,  ${ca})
  60                         $else
  61                             . ${ca}
  62                                 + Log in
  63                                 title "Not implemented yet"
  64             . main-content
  65                 . main-content-left-bar
  66                     $hook main-content-left-bar
  67                 . main-content-work-area
  68                     $hook main-content-work-area
  69                     $hook
  70             . main-footer
  71                 $hook main-footer
  72         $hook body-scripts-0
  73         ./site-scripts( &opt )
  74         $hook body-scripts
  75         $hook body-scripts-2
  76         $if opt.useHighlight
  77             script
  78                 _ document.addEventListener
  79                     @ 'DOMContentLoaded'
  80                     =>
  81                         param event
  82                         _ document.querySelectorAll
  83                             @ 'pre .hljs'
  84                             ._ forEach
  85                                 =>
  86                                     param block
  87                                     _ hljs.highlightBlock(block)

/t/html/layouts/t/styles.html.ittf

edit 
                                            
   1 $group
   2     style
   3         css
   4             $
   5                 var colors = wzCtx.Styles.shellColors;
   6             . main-header
   7                 background-color ${colors.mainHeaderBg}
   8                 color ${colors.mainHeader}
   9                 height 5vh
  10                 overflow auto
  11                 display flex
  12                 flex-direction row
  13                 justify-content space-between
  14             . main-content
  15                 display flex
  16                 flex-direction row
  17                 height 92vh
  18                 overflow auto
  19                 background-color ${colors.mainContentBg}
  20                 color ${colors.mainContent}
  21             . main-content-left-bar
  22                 height 100%
  23                 width 3%
  24                 background-color ${colors.mainContentLeftBarBg}
  25             . main-content-work-area
  26                 height 100%
  27                 width 97%
  28             . main-footer
  29                 background-color ${colors.mainFooterBg}
  30                 color ${colors.mainFooter}
  31                 height 3vh
  32                 overflow auto

/t/html/layouts/site-styles.html.ittf

edit 
                                            
   1 $group
   2     $params &opt
   3     $if opt.useBootstrap
   4         css /public/lib/bootstrap/dist/css/bootstrap.min.css
   5     $if opt.useCodemirror
   6         html/s( /public/lib/codemirror/lib/codemirror.css)
   7         html/s( /public/lib/codemirror/theme/monokai.css)
   8         html/s( /public/lib/codemirror/theme/twilight.css)
   9     $if typeof(wzCtx.aspect) !== 'undefined'
  10         $if wzCtx.aspect.AnimateCss
  11             $if wzCtx.aspect.production
  12                 html/s( /public/lib/animatecss/animate.min.css)
  13             $else
  14                 html/s( /public/lib/animatecss/animate.css)
  15     $if opt.useFontAwesome
  16         $
  17             var fontAwesomeKey = 'eab461efef';
  18         script
  19             src https://kit.fontawesome.com/${fontAwesomeKey}.js
  20             crossorigin anonymous
  21     $if opt.useFontRoboto
  22         html/s( https://fonts.googleapis.com/css?family=Roboto:300, 400, 500)
  23     $if opt.useFontMaterialIcons
  24         html/s( https://fonts.googleapis.com/icon?family=Material+Icons)
  25     $if opt.useGoogleFonts
  26         $foreach item in opt.googleFonts
  27             css https://fonts.googleapis.com/css?family=${item}
  28     $if opt.useHighlight
  29         $if opt.isWizziStudio
  30             html/s( /public/lib/highlight/styles/github.css)
  31             html/s( /public/lib/highlightjs-master/dracula.css)
  32         $else
  33             html/s( https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css)
  34     $if opt.useJarallax
  35         html/s( /public/lib/jarallax/jarallax.css)
  36     $if opt.useJsonFormatter
  37         $if opt.isWizziStudio
  38             html/s( https://cdnjs.cloudflare.com/ajax/libs/json-formatter/0.7.0/json-formatter.min.css)
  39         $else
  40             html/s( https://cdnjs.cloudflare.com/ajax/libs/json-formatter/0.7.0/json-formatter.min.css)
  41     $if opt.useMaterialUI
  42         html/s( https://fonts.googleapis.com/icon?family=Material+Icons)
  43     $if opt.usePopper
  44         html/s( /public/lib/popper/main.css)
  45     $if opt.usePrism
  46         $if opt.isWizziStudio
  47             css /public/lib/prism/prism.css
  48         $else
  49             css https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.min.css
  50     $if opt.useSocial
  51         html/s( /public/lib/social/social-icons.css)
  52     $if opt.useSweetalert
  53         html/s( https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.min.css)
  54     $if opt.mainCss && opt.mainCss.length > 0
  55         html/s( ${opt.mainCss})

/t/html/a.html.ittf

edit 
                                            
   1 $group
   2     $params text, href|#, ca|@@null
   3     a ${text}
   4         href ${href}
   5         $if ca
   6             class ${ca}
   7         $hook

/t/html/images/logo.html.ittf

edit 
                                            
   1 svg
   2     $params color|#000, bgcolor|#fff, viewBox|0 0 660 280
   3     $
   4         var opt = {};
   5         opt.y0 = 10;
   6         opt.y1 = 10;
   7         opt.y1a = 90;
   8         opt.y2 = 210;
   9         opt.ybottom = 250;
  10         opt.color = color;
  11     preserve-aspect-ratio xMidYMid meet
  12     viewBox ${viewBox}
  13     rect
  14         x 0
  15         y 0
  16         width 660
  17         height 280
  18         fill ${bgcolor}
  19         stroke none
  20     polyline
  21         stroke ${color}
  22         fill ${color}
  23         stroke-width 2
  24         points 10 ${opt.ybottom} 45 ${opt.y0} 60 ${opt.y0} 75 ${opt.y1a + 40} 120 ${opt.y2} 120 ${opt.y1a + 40} 175 ${opt.y2} 175 ${opt.y1a + 20} 230 ${opt.y2} 230 ${opt.ybottom}
  25     wizzi-logo-i( 250,  &opt )
  26     wizzi-logo-z( 320,  &opt )
  27     wizzi-logo-z( 450,  &opt )
  28     wizzi-logo-i( 590,  &opt )

/t/html/layouts/site-scripts.html.ittf

edit 
                                            
   1 $group
   2     $params &opt
   3     $
   4         var useReact = opt.useReact || opt.useMaterialUI;
   5         var useBabel = useReact || opt.useBabel;
   6     $if opt.useAce
   7         $if opt.isWizziStudio
   8             $if opt.production
   9                 html/j( /public/lib/ace/src-min-noconflict/ace.js)
  10             $else
  11                 html/j( /public/lib/ace/src-noconflict/ace.js)
  12         $else
  13             html/j( https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/ace.js)
  14     $if opt.useBootstrap
  15         html/j( /public/lib/bootstrap/dist/js/bootstrap.min.js)
  16     $if opt.useEventEmitter
  17         $$ html/j( https://unpkg.com/eventemitter3@latest/umd/eventemitter3.min.js
  18         html/j( https://cdn.jsdelivr.net/npm/[email protected]/index.min.js)
  19     $if opt.useCodemirror
  20         html/j( /public/lib/codemirror/lib/codemirror.js)
  21         html/j( /public/lib/codemirror/mode/javascript/javascript.js)
  22         html/j( /public/lib/codemirror/mode/xml/xml.js)
  23         html/j( /public/lib/codemirror/theme/monokai.css)
  24         html/j( /public/lib/codemirror/theme/twilight.css)
  25     $if opt.useDeepDiff
  26         $if opt.isWizziStudio
  27             html/j( /public/lib/flitbit/deep-diff.min.js)
  28         $else
  29             html/j( https://cdnjs.cloudflare.com/ajax/libs/deep-diff/0.3.3/deep-diff.min.js)
  30     $if opt.useKeycode
  31         $if opt.isWizziStudio
  32             html/j( /public/lib/material-ui/keycode.min.2.2.0.js)
  33         $else
  34             html/j( https://cdn.jsdelivr.net/npm/keycode.js)
  35     $if opt.useHighlight
  36         $if opt.isWizziStudio
  37             html/j( https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js)
  38         $else
  39             html/j( https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js)
  40     $if opt.useInteractJs
  41         html/j( /public/lib/interactjs/interact.js)
  42     $if opt.useJarallax
  43         html/j( /public/lib/object-fit-images/ofi.min.js)
  44         $if opt.production
  45             html/j( /public/lib/jarallax/jarallax.min.js)
  46             html/j( /public/lib/jarallax/jarallax-video.min.js)
  47             html/j( /public/lib/jarallax/jarallax-element.min.js)
  48         $else
  49             html/j( /public/lib/jarallax/jarallax.js)
  50             html/j( /public/lib/jarallax/jarallax-video.js)
  51             html/j( /public/lib/jarallax/jarallax-element.js)
  52     $if opt.useJQuery || opt.useBootstrap
  53         $if opt.production
  54             html/j( /public/lib/jquery/jquery.min.js)
  55         $else
  56             html/j( /public/lib/jquery/jquery.js)
  57     $if opt.useJsonFormatter
  58         $if opt.isWizziStudio
  59             html/j( /public/lib/json-formatter/json-formatter.js)
  60         $else
  61             html/j( https://cdn.jsdelivr.net/npm/[email protected]/dist/json-formatter.min.js)
  62     $if opt.useJss
  63         js /public/lib/jss/jss.js
  64         js /public/lib/jss/jss-preset-default.js
  65     $if opt.useMarkdown
  66         html/j( https://cdn.jsdelivr.net/npm/marked/marked.min.js)
  67     $if opt.useMathJax
  68         html/j( https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML)
  69     $if opt.usePopper
  70         html/j( /public/lib/popper/popper.js)
  71     $if opt.usePrism
  72         $if opt.isWizziStudio
  73             js /public/lib/prism/prism.js
  74         $else
  75             js https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js
  76     $if opt.usePubSub
  77         js /public/lib/pubsub/pubsub.js
  78     $if useReact
  79         $if opt.production
  80             html/j( https://unpkg.com/[email protected]/prop-types.min.js)
  81         $else
  82             html/j( https://unpkg.com/[email protected]/prop-types.js)
  83         $if opt.production
  84             html/j( https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js)
  85             html/j( https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js)
  86         $else
  87             html/j( https://cdn.jsdelivr.net/npm/[email protected]/umd/react.development.min.js)
  88             html/j( https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.development.min.js)
  89         $if opt.useClassNames
  90             html/j( /public/lib/react/classnames.js)
  91         $if opt.useMaterialUI
  92             $if opt.materialUI.latest
  93                 $if opt.production
  94                     html/j( https://unpkg.com/@mui/material@latest/umd/material-ui.production.min.js)
  95                 $else
  96                     html/j( https://unpkg.com/@mui/material@latest/umd/material-ui.development.js)
  97             $else
  98                 $if opt.production
  99                     $if opt.materialUI.v4
 100                         html/j( https://unpkg.com/@material-ui/[email protected]/umd/material-ui.development.min.js)
 101                     $else
 102                         html/j( https://unpkg.com/@mui/[email protected]/umd/material-ui.production.min.js)
 103                 $else
 104                     $if opt.materialUI.v4
 105                         html/j( https://unpkg.com/@material-ui/[email protected]/umd/material-ui.development.js)
 106                     $else
 107                         html/j( https://unpkg.com/@mui/[email protected]/umd/material-ui.development.js)
 108         $if opt.useRouter
 109             html/j( https://cdn.jsdelivr.net/npm/@remix-run/[email protected]/dist/router.umd.min.js)
 110             html/j( https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/react-router.production.min.js)
 111             html/j( https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/react-router-dom.production.min.js)
 112         $if opt.useReactGrid
 113             html/j( /public/lib/react/react-grid-layout.min.js)
 114         $if opt.useDownshift
 115             $if opt.local || opt.isWizziStudio
 116                 html/j( https://unpkg.com/[email protected]/dist/downshift.umd.js)
 117             $else
 118                 html/j( https://cdn.jsdelivr.net/npm/[email protected]/dist/downshift.umd.min.js)
 119         $if opt.useGridLayout
 120             $if opt.useGridLayoutLatest
 121                 html/j( https://unpkg.com/react-grid-layout@latest/dist/react-grid-layout.min.js)
 122             $else
 123                 html/j( https://unpkg.com/[email protected]/dist/react-grid-layout.min.js)
 124         $if opt.react.useStyledComponents
 125             js //unpkg.com/[email protected]/dist/styled-components.min.js
 126         $if opt.react.useTransitionGroup
 127             js https://cdnjs.cloudflare.com/ajax/libs/react-transition-group/4.4.1/react-transition-group.min.js
 128     $if opt.useRxJs
 129         html/j( /public/lib/rxjs/rxjs.umd.min.js)
 130     $if opt.useScrollReveal
 131         html/j( /public/lib/scrollreveal/scrollreveal.js)
 132     $if opt.useSplit
 133         js /public/lib/controls/split.js
 134     $if opt.useSweetalert
 135         html/j( https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js)
 136     $if opt.useUnderscore
 137         $if opt.production
 138             html/j( /public/lib/underscore/underscore.min.js)
 139         $else
 140             html/j( /public/lib/underscore/underscore.js)
 141     $if opt.useVue
 142         html/j( https://unpkg.com/vue)
 143     $if opt.useWizzi
 144         $if opt.isWizziStudio
 145             html/j( /public/wizzi-play/scripts/wizzi.standalone.js)
 146         $else
 147             html/j( /scripts/wizzi.standalone.js)
 148     $if opt.useMathJax
 149         script
 150             #
 151                 _ MathJax.Hub.Config
 152                     {
 153                         @ tex2jax
 154                             {
 155                                 @ inlineMath [['$','$'], ['\\(','\\)']]
 156                                 @ processEscapes true
 157     $if useBabel
 158         html/j( https://cdn.jsdelivr.net/npm/@babel/[email protected]/babel.min.js)
 159     $if opt.useMonaco
 160         html/j( /public/lib/monaco-editor/min/vs/loader.js)
 161     $if opt.mainJs && opt.mainJs.length > 0
 162         $if useBabel
 163             script
 164                 src ${opt.mainJs}
 165                 type text/babel
 166         $else
 167             js ${opt.mainJs}

/t/html/images/t/wizzi-logo-i.html.ittf

edit 
                                            
   1 $group
   2     $params l:integer, &opt
   3     polyline
   4         stroke ${opt.color}
   5         fill ${opt.color}
   6         stroke-width 2
   7         points ${l} ${opt.ybottom} ${l+10} ${opt.y1+80} ${l+40} ${opt.y1+80} ${l+50} ${opt.ybottom}
   8     path
   9         stroke ${opt.color}
  10         fill ${opt.color}
  11         stroke-width 2
  12         d M${l+30}, ${opt.y1+20} C${l+60},${opt.y1+40} ${l+0},${opt.y1+60} ${l+30}, ${opt.y1+74}

/t/html/images/t/wizzi-logo-z.html.ittf

edit 
                                            
   1 $group
   2     $params l:integer, &opt
   3     polyline
   4         stroke ${opt.color}
   5         fill ${opt.color}
   6         stroke-width 2
   7         points ${l} ${opt.ybottom} ${l} ${opt.ybottom - 20} ${l+100} ${opt.y1a+40} ${l+80} ${opt.y1a+20} ${l+80} ${opt.y1a} ${l+130} ${opt.y1a} ${l+100} ${opt.ybottom - 20} ${l+120} ${opt.ybottom - 20} ${l+120} ${opt.ybottom}

/t/html/s.html.ittf

edit 
                                            
   1 $group
   2     $params url
   3     link
   4         href ${url}
   5         rel stylesheet

/t/html/j.html.ittf

edit 
                                            
   1 $group
   2     $params url
   3     script
   4         src ${url}
   5         crossorigin anonymous

/ittf/site/docs/styles/docs.css.ittf

edit 
                                            
   1 css
   2     $include models/docs/site.wzctx
   3     < body
   4         margin 0
   5         padding 0
   6         color #eee
   7         background-color #494949
   8         font-family roboto,verdana,arial
   9     < nav
  10         < ul
  11             list-style-type none
  12     < a
  13         text-decoration none
  14     # main-container
  15         width 70%
  16         margin 0 auto
  17         display flex
  18         flex-direction column
  19         font-size 16px
  20         line-height 24px
  21         word-spacing 1px
  22         color #eee
  23         background-color #515151
  24     # header
  25         border-bottom 1px solid #a0a0a0
  26         display flex
  27         flex-direction row
  28         padding 10px 20px
  29     # logo
  30         $$ margin 16px
  31     . logo-a
  32         align-self flex-start
  33         display flex
  34         flex-shrink 0
  35         padding 0.5rem 0.375rem
  36         transform translateX(-0.375rem)
  37         text-decoration none
  38         font-weight 600
  39         align-items center
  40         margin-right 1.25rem
  41     # top-nav
  42         display flex
  43         justify-content space-between
  44         list-style-type none
  45         padding-top 16px
  46         < ul
  47             margin-bottom 0
  48             < li
  49                 display inline-block
  50                 padding-right 30px
  51                 font-size 24px
  52                 color #ddd
  53                 < a
  54                     color #eee
  55                 . current
  56                     font-weight 700
  57                     color palegoldenrod
  58     # middle-container
  59         display flex
  60         flex-direction row
  61     # content
  62         margin 0 auto
  63         width 80%
  64         $$ display flex
  65         $$ flex-direction column
  66         padding 30px 30px
  67         $$ line-height 24px
  68         word-spacing 2px
  69         $$ font-size 18px
  70     # left-nav
  71         $$ border-right 1px solid #a0a0a0
  72         padding 10px 10px
  73         < li
  74             margin-top 20px
  75             font-size 18px
  76             < a
  77                 color #eee
  78     # right-nav
  79         $$ border-left 1px solid #a0a0a0
  80         padding 10px 20px
  81         < ul
  82             margin-left 0
  83             < li
  84                 font-size 14px
  85                 < a
  86                     color #eee
  87     # footer
  88         $$ border-top 1px solid #a0a0a0
  89         display grid
  90         grid-template-columns 1fr 1fr
  91         padding 20px
  92     $include aside-right
  93     < article
  94         background-color ${wzCtx.Colors.bg_dark_medium}
  95         border-radius 10px
  96         padding 20px
  97         margin 0 5px 3px 5px
  98         box-shadow 0 3px 5px rgba(0,0,0,0.1)
  99         font-size 16px
 100     media (min-width: 768px)
 101         < article
 102             padding 40px 40px 30px
 103             font-size 16px
 104             margin 0 10px 10px 10px
 105             box-shadow 0 5px 10px rgba(0,0,0,0.1)
 106     . doc-container
 107         margin 0 auto
 108         width 60%
 109         display flex
 110     . w-1-5
 111         width 20%
 112     . w-4-5
 113         width 80%
 114     . doc-title
 115         font-size 1.4rem
 116         font-weight 600
 117         padding-bottom 5px
 118         border-bottom 1px solid #999
 119     . doc-title-2
 120         font-size 1.2rem
 121         font-weight 600
 122         padding-bottom 3px
 123     . doc-summary
 124         padding 15px
 125         < h4
 126             color #eee
 127     . ittf-panel
 128         $$ background-color #aaa
 129         $$ padding 20px
 130         margin-bottom 20px
 131     . ittf-panel-title
 132         font-size 0.8rem
 133         font-weight 700
 134     . js-panel
 135         margin-bottom 20px
 136     . js-panel-title
 137         font-size 0.8rem
 138         font-weight 700
 139         padding-left 10px
 140     . bash-panel
 141         margin-bottom 20px
 142     . bash-panel-title
 143         font-size 0.8rem
 144         font-weight 700
 145         padding-left 10px
 146     media (min-width: 768px)
 147         . ittf-panel-title
 148             font-size 16px
 149             font-weight 700
 150             $$ margin-bottom 2px
 151     . link
 152         float 'right'
 153         paddingLeft '10px'
 154     . cheatsheet
 155     . cheatsheet-page
 156         display flex
 157         padding 25px
 158         position fixed
 159         height 100vh
 160         width 100%
 161     . cheatsheet-sidebar
 162         display flex
 163         min-width 300px
 164         margin 5px
 165         flex-direction column
 166         overflow auto
 167     . cheatsheet-sidebar-schemas
 168         display flex
 169         flex-direction column
 170         border 1px solid gray
 171         margin-bottom 5px
 172     . cheatsheet-sidebar-element-title
 173         padding-left 15px
 174         font-weight 600
 175     . cheatsheet-sidebar-items
 176         border 1px solid gray
 177     . cheatsheet-content
 178         flex 1 1 auto
 179         margin 5px
 180         overflow auto
 181     . cheatsheet-item
 182         display flex
 183         background-color #3e5a6d
 184     . cheatsheet-ittf
 185         padding 10px
 186         border 1px solid gray
 187         margin 5px
 188         width 50%
 189         < pre
 190             width 100%
 191             padding 10px
 192     . cheatsheet-generated
 193         padding 10px
 194         border 1px solid gray
 195         margin 5px
 196         width 50%
 197         background-color #dedede
 198         < pre
 199             width 100%
 200             padding 10px
 201     . cheatsheet-element-title
 202         background-color #bbb
 203         width 100%
 204         padding 15px 5px 15px 15px
 205         margin 20px 0 10px 0
 206         font-size 1.2rem
 207         font-weight 600
 208     . cheatsheet-item-title
 209         padding 5px 10px 0px 10px
 210         font-weight 700
 211     . scrollbar-thin
 212         @ scrollbar-color #6D6D6D #4D4D4D
 213         @ scrollbar-width thin
 214     $include highlight
 215     $ var opt = wzCtx.Fonts
 216     css/fonts( &opt)
 217     $include tables

/t/models/docs/site.wzctx.ittf

edit 
                                            
   1 $group
   2     $global
   3         var wzCtx = {
   4             name: "stfnbssl.github.io/wizzi",
   5             version: "0.7.1",
   6             description: "Wizzi github page",
   7             author: "Stefano Bassoli",
   8             license: "MIT",
   9             Params: {
  10                 title: "Wizzi",
  11                 baseUrl: "https://stfnbssl.github.io/wizzi"
  12             },
  13             Section: {
  14                 items: [
  15                     {
  16                         title: "Concepts",
  17                         url: "/ittf/site/docs/concepts/overview.html.ittf"
  18                     },
  19                     {
  20                         title: "Howtos",
  21                         url: "/ittf/site/docs/howtos/getstarted.html.ittf"
  22                     },
  23                     /*
  24                     {
  25                         title: "Sample code",
  26                         url: "/ittf/site/docs/samplecode/overview.html.ittf"
  27                     },
  28                     {
  29                         title: "Geeky",
  30                         url: "/ittf/site/docs/geeky/overview.html.ittf"
  31                     },
  32                     */
  33                     {
  34                         title: "Cheatsheets",
  35                         url: "/wizzi/docs/cheatsheet/html"
  36                     },
  37                     {
  38                         title: "Play",
  39                         url: "/ittf/site/docs/play/index.html.ittf"
  40                     }
  41                 ]
  42             },
  43             Concepts: {
  44                 items: [
  45                     {
  46                         title: "Overview",
  47                         url: "./overview.html.ittf"
  48                     },
  49                     {
  50                         title: "Ittf Documents",
  51                         url: "./ittfdocuments.html.ittf"
  52                     },
  53                     {
  54                         title: "Template Engine",
  55                         url: "./templateengine.html.ittf"
  56                     },
  57                     {
  58                         title: "JsWizzi",
  59                         url: "./jswizzi.html.ittf"
  60                     },
  61                     {
  62                         title: "mTrees",
  63                         url: "./mtrees.html.ittf"
  64                     },
  65                     {
  66                         title: "Wizzi Schemas",
  67                         url: "./wizzischemas.html.ittf"
  68                     },
  69                     {
  70                         title: "Wizzi Model DOMs",
  71                         url: "./wizzimodeldoms.html.ittf"
  72                     },
  73                     {
  74                         title: "Wizzi Model Instances",
  75                         url: "./wizzimodelinstances.html.ittf"
  76                     },
  77                     {
  78                         title: "Model Transformers",
  79                         url: "./modeltransformers.html.ittf"
  80                     },
  81                     {
  82                         title: "Artifact Generators",
  83                         url: "./artifactgenerators.html.ittf"
  84                     },
  85                     {
  86                         title: "Wizzi Jobs",
  87                         url: "./wizzijobs.html.ittf"
  88                     },
  89                     {
  90                         title: "Wizzi Meta Productions",
  91                         url: "./wizzimetaproductions.html.ittf"
  92                     },
  93                     {
  94                         title: "Wizzi Plugins",
  95                         url: "./wizziplugins.html.ittf"
  96                     },
  97                     {
  98                         title: "Wizzi Meta Plugins",
  99                         url: "./wizzimetaplugins.html.ittf"
 100                     },
 101                     {
 102                         title: "Wizzi API",
 103                         url: "./wizziapi.html.ittf"
 104                     },
 105                     {
 106                         title: "Wizzi CLI",
 107                         url: "./wizzicli.html.ittf"
 108                     },
 109                     {
 110                         title: "Virtual Store System",
 111                         url: "./virtualstoresystem.html.ittf"
 112                     },
 113                     {
 114                         title: "Glossary",
 115                         url: "./glossary.html.ittf"
 116                     }
 117                 ]
 118             },
 119             Howtos: {
 120                 items: [
 121                     {
 122                         title: "Get started",
 123                         url: "./getstarted.html.ittf"
 124                     },
 125                     {
 126                         title: "Wizzi API",
 127                         url: "./wizziapi.html.ittf"
 128                     }
 129                 ]
 130             },
 131             SampleCode: {
 132                 items: [
 133                     {
 134                         title: "Overview",
 135                         url: "./overview.html.ittf"
 136                     },
 137                     {
 138                         title: "Template Engine",
 139                         url: "./templateengine.html.ittf"
 140                     },
 141                     {
 142                         title: "JsWizzi",
 143                         url: "./jswizzi.html.ittf"
 144                     },
 145                     {
 146                         title: "mTrees",
 147                         url: "./mtrees.html.ittf"
 148                     },
 149                     {
 150                         title: "Wizzi Schemas",
 151                         url: "./wizzischemas.html.ittf"
 152                     },
 153                     {
 154                         title: "Wizzi Model DOMs",
 155                         url: "./wizzimodeldoms.html.ittf"
 156                     },
 157                     {
 158                         title: "Model Transformers",
 159                         url: "./modeltransformers.html.ittf"
 160                     },
 161                     {
 162                         title: "Artifact Generators",
 163                         url: "./artifactgenerators.html.ittf"
 164                     },
 165                     {
 166                         title: "Wizzi Jobs",
 167                         url: "./wizzijobs.html.ittf"
 168                     },
 169                     {
 170                         title: "Wizzi Plugins",
 171                         url: "./wizziplugins.html.ittf"
 172                     },
 173                     {
 174                         title: "Wizzi API",
 175                         url: "./wizziapi.html.ittf"
 176                     },
 177                     {
 178                         title: "Virtual Store System",
 179                         url: "./virtualstoresystem.html.ittf"
 180                     },
 181                     {
 182                         title: "Glossary",
 183                         url: "./glossary.html.ittf"
 184                     }
 185                 ]
 186             },
 187             Geeky: {
 188                 items: [
 189                     {
 190                         title: "Overview",
 191                         url: "./overview.html.ittf"
 192                     },
 193                     {
 194                         title: "Template Engine",
 195                         url: "./templateengine.html.ittf"
 196                     },
 197                     {
 198                         title: "JsWizzi",
 199                         url: "./jswizzi.html.ittf"
 200                     },
 201                     {
 202                         title: "mTrees",
 203                         url: "./mtrees.html.ittf"
 204                     },
 205                     {
 206                         title: "Wizzi Schemas",
 207                         url: "./wizzischemas.html.ittf"
 208                     },
 209                     {
 210                         title: "Wizzi Model DOMs",
 211                         url: "./wizzimodeldoms.html.ittf"
 212                     },
 213                     {
 214                         title: "Model Transformers",
 215                         url: "./modeltransformers.html.ittf"
 216                     },
 217                     {
 218                         title: "Artifact Generators",
 219                         url: "./artifactgenerators.html.ittf"
 220                     },
 221                     {
 222                         title: "Wizzi Jobs",
 223                         url: "./wizzijobs.html.ittf"
 224                     },
 225                     {
 226                         title: "Wizzi Plugins",
 227                         url: "./wizziplugins.html.ittf"
 228                     },
 229                     {
 230                         title: "Wizzi API",
 231                         url: "./wizziapi.html.ittf"
 232                     },
 233                     {
 234                         title: "Wizzi CLI",
 235                         url: "./wizzicli.html.ittf"
 236                     },
 237                     {
 238                         title: "Virtual Store System",
 239                         url: "./virtualstoresystem.html.ittf"
 240                     },
 241                     {
 242                         title: "Glossary",
 243                         url: "./glossary.html.ittf"
 244                     }
 245                 ]
 246             },
 247             Starter: {
 248                 "items": [
 249                     {
 250                         title: "wizzi-starter-wizzi-plugin",
 251                         url: "https://github.com/wizzifactory/wizzi-examples/tree/master/packages/wizzi-starter-wizzi-plugin"
 252                     },
 253                     {
 254                         title: "wizzi-starter-webpack-react",
 255                         url: "https://github.com/wizzifactory/wizzi-examples/tree/master/packages/wizzi-starter-webpack-react"
 256                     },
 257                     {
 258                         title: "wizzi-starter-mern",
 259                         url: "https://github.com/wizzifactory/wizzi-examples/tree/master/packages/wizzi-starter-mern"
 260                     },
 261                     {
 262                         title: "wizzi-starter-nextjs",
 263                         url: "https://github.com/wizzifactory/wizzi-examples/tree/master/packages/wizzi-starter-nextjs"
 264                     },
 265                     {
 266                         title: "wizzi-starter-gatsby",
 267                         url: "https://github.com/wizzifactory/wizzi-examples/tree/master/packages/wizzi-starter-gatsby"
 268                     }
 269                 ]
 270             },
 271             "Plugin": {
 272                 items: [
 273                     {
 274                         title: "wizzi-js",
 275                         url: "https://github.com/wizzifactory/wizzi/tree/master/packages/wizzi-js/dist"
 276                     },
 277                     {
 278                         title: "wizzi-web",
 279                         url: "https://github.com/wizzifactory/wizzi/tree/master/packages/wizzi-web/dist"
 280                     },
 281                     {
 282                         title: "wizzi-lab",
 283                         url: "https://github.com/wizzifactory/wizzi/tree/master/packages/wizzi-lab/dist"
 284                     }
 285                 ]
 286             },
 287             Colors: {
 288                 "bg_0": "#333",
 289                 "bg_f_0": "#000",
 290                 "c_0": "#fff",
 291                 "bg_dark": "#333",
 292                 "bg_dark_medium": "#444",
 293                 "c_dark": "#ddd",
 294                 "c_dark_medium": "#bbb",
 295                 "h3_c_dark": "#fc0"
 296             },
 297             Fonts: {
 298                 "useMaterialIcons": true,
 299                 "materialIcons": {
 300                     "baseUrl": "https://stfnbssl.github.io/wizzi/fonts",
 301                     "fontWeight": "400",
 302                     "size": "24px"
 303                 }
 304             },
 305             Styles: {
 306                 shellColors: {
 307                     mainHeaderBg: "#0D0D0D",
 308                     mainHeader: "#dedede",
 309                     mainContentBg: "#2D2D2D",
 310                     mainContent: "#dedede",
 311                     mainContentLeftBarBg: "#1D1D1D",
 312                     mainContentLeftBar: "#dedede",
 313                     mainFooterBg: "#0D0D0D",
 314                     mainFooter: "#dedede",
 315                 }
 316             }
 317         }
 318         var mpage = {
 319             Colors: {
 320                 background: "#ffffff",
 321                 scheme1Fade90: "whiteFade-90,rgba(255,255,255,0.9)",
 322                 themeBack: "#ffffff",
 323                 primary: "#BDF3EE",
 324                 primaryDark: "#122944",
 325                 primary30: "#BDF3EE",
 326                 gray70: "grey-70,#222B31",
 327                 grad1: "#81B6CF",
 328                 grad2: "#222B31"
 329             }
 330         }

/ittf/site/docs/styles/t/aside-right.css.ittf

edit 
                                            
   1 $group
   2     . aside-right
   3         padding-top 30px
   4         < h4
   5             text-transform uppercase
   6             font-size 14px
   7             font-weight 700
   8             padding 0 0 10px 30px
   9             margin-left -30px
  10             display inline-block
  11             border-bottom 1px solid #c00
  12         < ul
  13             padding-left 0
  14             & :first-child
  15                 margin-top 0
  16         < li
  17             list-style-type none
  18             < a
  19                 position relative
  20             & .current
  21                 < div:before
  22                     content ""
  23                     border-color transparent transparent transparent #444
  24                     border-style solid
  25                     border-width 10px
  26                     width 0
  27                     height 0
  28                     position absolute
  29                     top 0
  30                     left -30px
  31             & .current div
  32                 color #f90

/ittf/site/docs/styles/t/highlight.css.ittf

edit 
                                            
   1 $group
   2     < pre, code
   3         white-space pre
   4         $$ display inline-block
   5         margin 0
   6         font 14px/1.8em Menlo, Consolas, "Courier New", Courier, "Liberation Mono", monospace
   7         padding 0 0.5em
   8     - ========================================
   9         - WIZZI PRETTY PRINT
  10         - ----------------------------------------
  11     . pln
  12         color #F1F2F3
  13     . tag
  14         color #77f328
  15     . str
  16         color #EC7600  $$ string content
  17     . kwd
  18         color #f79256  $$ a keyword
  19     . com
  20         color #66747B  $$ a comment
  21     . typ
  22         color #678CB1  $$ a type name
  23     . lit
  24         color #FACD22  $$ a literal value
  25     . mix
  26         color #ff0040  $$  mixin call
  27         cursor pointer
  28     . tag
  29         color #77f328  $$ a markup tag name
  30     . atn
  31         color #E0E2E4  $$ a markup attribute name
  32     . atv
  33         color #EC7600  $$ a markup attribute value
  34     . expr
  35         color #f3e877  $$ a declaration; a variable name
  36     . fun
  37         color red  $$ a function name
  38     . arg
  39         color yellow  $$ a mixin arg
  40     . pp-ln
  41         color #999
  42     . pp-pln
  43         color #f1ebeb
  44     . pp-str
  45         color #EC7600  $$ string content
  46     . pp-kwd
  47         color #f79256  $$ a keyword
  48     . pp-com
  49         color #66747B  $$ a comment
  50     . pp-typ
  51         color #678CB1  $$ a type name
  52     . pp-lit
  53         color #FACD22  $$ a literal value
  54     . pp-mix
  55         color #ff0040  $$  mixin call
  56         cursor pointer
  57     . pp-tag
  58         color #77f328  $$ a markup tag name
  59     . pp-atn
  60         color #E0E2E4  $$ a markup attribute name
  61     . pp-atv
  62         color #EC7600  $$ a markup attribute value
  63     . pp-expr
  64         color #f3e877  $$ a declaration; a variable name
  65     . pp-fun
  66         color red  $$ a function name
  67     . pp-arg
  68         color yellow  $$ a mixin arg
  69     < pre.prettyprint
  70         $$ padding 0.8rem
  71         $$ border-left 5px solid #999
  72         $$ font-size 1rem
  73         overflow auto
  74         $$ background #2B3A42
  75         $$ background #3e586d
  76         $$ margin-bottom 1rem
  77         $$ text-shadow 0 1px #888
  78         font-family Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace
  79         text-align left
  80         white-space pre
  81         word-spacing normal
  82         word-break normal
  83         word-wrap normal
  84         line-height 1.3
  85         tab-size 4
  86         hyphens none
  87         background-color #2b2b2b
  88         color #fff
  89         $$ max-width 100%
  90         $$ overflow-x auto
  91         vertical-align middle
  92         border-radius 5px
  93         box-shadow inset 0 1px 10px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.1), 0 -1px 0 rgba(0,0,0,.5)
  94         < ol
  95             padding-left 2rem
  96     . L0
  97         + .L1
  98         + .L2
  99         + .L3
 100         + .L4
 101         + .L5
 102         + .L6
 103         + .L7
 104         + .L8
 105         + .L9
 106         color #777
 107         margin-left 0.3rem
 108         padding-left 0.3rem
 109         list-style-type decimal
 110     # Alternate shading for lines
 111     . L1
 112         + .L3
 113         + .L5
 114         + .L7
 115         + .L9
 116         $$ background #013a56
 117         $$ background #2A3941
 118         background-color #2f2f2f
 119     . prettyprint-js
 120         background #fff
 121     # Alternate shading for lines
 122     . J1
 123         + .J3
 124         + .J5
 125         + .J7
 126         + .J9
 127         background #ddd
 128     . linenums
 129         color #fff
 130     media screen and (max-width: 1028px)
 131         . pp-pln
 132             color #FFF
 133         < pre.prettyprint
 134             padding 1.2rem
 135             border-left 5px solid #999
 136             font-size 2rem
 137             line-height 3rem
 138             overflow auto
 139     $*
 140     media (min-width: 768px)
 141         < pre, code
 142             font-size 16px
 143     . highlight
 144         + p > pre
 145         + p > code
 146         + p > nobr > code
 147         + li > code
 148         + li> pre
 149         + h5 > code
 150         + .note > code
 151             background-color #2b2b2b
 152             color #fff
 153             max-width 100%
 154             overflow-x auto
 155             vertical-align middle
 156             border-radius 5px
 157             box-shadow inset 0 1px 10px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.1), 0 -1px 0 rgba(0,0,0,.5)
 158     . note .highlight
 159         width 94%
 160         < pre code
 161             font-size 0.9em
 162             background-color transparent
 163             box-shadow none
 164     . note code
 165         background-color #333
 166         background-color rgba(0,0,0,0.2)
 167         margin-left 2.5px
 168         margin-right 2.5px
 169         font-size 0.8em
 170     . code-block
 171         margin 10px 0
 172         < code
 173             background none
 174     . highlight
 175         margin 1em 0
 176         width 100%
 177         overflow auto
 178     < pre.highlight
 179         padding 10px 0.5em
 180     . highlighter-rouge .highlight
 181         @extend .highlight
 182         margin 0
 183     *$
 184     . highlight-code
 185         white-space nowrap
 186         padding 4px 8px 4px 0px
 187         background-color #2b2b2b
 188         color #fff
 189         max-width 100%
 190         overflow-x auto
 191         vertical-align middle
 192         -webkit-border-radius 5px
 193         -moz-border-radius 5px
 194         border-radius 5px
 195         box-shadow inset 0 1px 10px rgba(0,0,0,0.3),0 1px 0 rgba(255,255,255,0.1),0 -1px 0 rgba(0,0,0,0.5)

/ittf/site/docs/t/css/fonts.css.ittf

edit 
                                            
   1 $group
   2     $params &opt
   3     $if opt.useMaterialIcons
   4         font-face
   5             font-family 'Material Icons'
   6             font-style normal
   7             font-weight ${opt.materialIcons.fontWeight}
   8             - For IE6-8
   9             src url(${opt.materialIcons.baseUrl}/MaterialIcons-Regular.eot)
  10             src local('Material Icons'),
  11                 \b local('MaterialIcons-Regular'),
  12                 \b url(${opt.materialIcons.baseUrl}/MaterialIcons-Regular.woff2) format('woff2'),
  13                 \b url(${opt.materialIcons.baseUrl}/MaterialIcons-Regular.woff) format('woff'),
  14                 \b url(${opt.materialIcons.baseUrl}/MaterialIcons-Regular.ttf) format('truetype')
  15         . material-icons
  16             font-family 'Material Icons'
  17             font-weight normal
  18             font-style normal
  19             - Preferred icon size
  20             font-size ${opt.materialIcons.size}
  21             display inline-block
  22             line-height 1
  23             text-transform none
  24             letter-spacing normal
  25             word-wrap normal
  26             white-space nowrap
  27             direction ltr
  28             - Support for all WebKit browsers.
  29             -webkit-font-smoothing antialiased
  30             - Support for Safari and Chrome.
  31             text-rendering optimizeLegibility
  32             - Support for Firefox.
  33             -moz-osx-font-smoothing grayscale
  34             - Support for IE.
  35             @ font-feature-settings 'liga'
  36         - Rules for sizing the icon.
  37         . material-icons.md-18
  38             font-size 18px
  39         . material-icons.md-24
  40             font-size 24px
  41         . material-icons.md-36
  42             font-size 36px
  43         . material-icons.md-48
  44             font-size 48px
  45         - Rules for using icons as black on a light background.
  46         . material-icons.md-dark
  47             color rgba(0, 0, 0, 0.54)
  48         . material-icons.md-dark.md-inactive
  49             color rgba(0, 0, 0, 0.26)
  50         - Rules for using icons as white on a dark background.
  51         . material-icons.md-light
  52             color rgba(255, 255, 255, 1)
  53         . material-icons.md-light.md-inactive
  54             color rgba(255, 255, 255, 0.3)
  55     $if opt.useFontAwesome
  56         font-face
  57             font-family 'FontAwesome'
  58             src url('${opt.fontAwesome.baseUrl}/FontAwesome.eot?9h6hxj')
  59             src url('${opt.fontAwesome.baseUrl}/FontAwesome.eot?9h6hxj#iefix') format('embedded-opentype'),
  60                 \b url('${opt.fontAwesome.baseUrl}/FontAwesome.woff?9h6hxj') format('woff'),
  61                 \b url('${opt.fontAwesome.baseUrl}/FontAwesome.ttf?9h6hxj') format('truetype'),
  62                 \b url('${opt.fontAwesome.baseUrl}/FontAwesome.svg?9h6hxj#FontAwesome') format('svg')
  63             font-weight normal
  64             font-style normal
  65         . fa
  66             display inline-block
  67             font normal normal normal 14px/1 FontAwesome
  68             font-size inherit
  69             text-rendering auto
  70             -webkit-font-smoothing antialiased
  71             -moz-osx-font-smoothing grayscale
  72         . fa-link:before
  73             content "\f0c1"
  74         . fa-pencil:before
  75             content "\f040"

/ittf/site/docs/styles/t/tables.css.ittf

edit 
                                            
   1 $group
   2     . table-docs
   3         < table
   4             font-size 0.8rem
   5             line-height 16px
   6             < td
   7                 vertical-align top
   8     . table-glo
   9         < table
  10             font-size 0.8rem
  11             line-height 18px
  12             < td
  13                 vertical-align top
  14                 . title
  15                     font-weight 700

/ittf/css/main.css.ittf

edit 
                                            
   1 css
   2     $
   3         var count = [0,1,2,3,4,5];
   4         var sizes = ['s','m','l','x','xl','xxl'];
   5         var scale = ['0.4','0.6','1','1.3','1.6','3'];
   6         var scaleRad = ['3','6','12','18','30','48'];
   7         var scaleWidth = [15,25,35,65,75,85];
   8         var scale50 = [50,100,150,200];
   9     < html
  10         font-family -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
  11         font-size 16px
  12     < body
  13         margin 0
  14     < a
  15         text-decoration none
  16         color #ffffff
  17     $include colors
  18     $include layout
  19     . fixed
  20         position fixed
  21     . relative
  22         position relative
  23     . absolute
  24         position absolute
  25     . flex-row
  26         display flex
  27         flex-direction row
  28     . flex-column
  29         display flex
  30         flex-direction column
  31     . justify-content-start
  32         justify-content start
  33     . justify-content-center
  34         justify-content center
  35     . justify-content-space-between
  36         justify-content space-between
  37     . space-between
  38         justify-content space-between
  39     . align-items-start
  40         align-items start
  41     . align-items-center
  42         align-items center
  43     . width-full
  44         width 100%!important
  45     . width-half
  46         width 50%!important
  47     . text-align-center
  48         text-align center
  49     . text-align-left
  50         text-align left
  51     . text-align-right
  52         text-align right
  53     . text-align-justify
  54         text-align justify
  55     . m-0-auto
  56         margin 0 auto
  57     $foreach c in scale50
  58         . m-${c}
  59             margin ${c}px
  60         . m-l-${c}
  61             margin-left ${c}px
  62         . m-r-${c}
  63             margin-right ${c}px
  64         . m-t-${c}
  65             margin-top ${c}px
  66         . m-b-${c}
  67             margin-bottom ${c}px
  68     $foreach c in count
  69         . font-${sizes[c]}
  70             font-size ${scale[c]}em
  71         . m-${sizes[c]}
  72             margin ${scale[c]}em
  73         . m-t-${sizes[c]}
  74             margin-top ${scale[c]}em
  75         . m-b-${sizes[c]}
  76             margin-bottom ${scale[c]}em
  77         . m-l-${sizes[c]}
  78             margin-left ${scale[c]}em
  79         . m-r-${sizes[c]}
  80             margin-right ${scale[c]}em
  81         . m-w-${sizes[c]}
  82             margin-left ${scale[c]}em
  83             margin-right ${scale[c]}em
  84         . m-y-${sizes[c]}
  85             margin-top ${scale[c]}em
  86             margin-bottom ${scale[c]}em
  87         . p-${sizes[c]}
  88             padding ${scale[c]}em
  89         . p-t-${sizes[c]}
  90             padding-top ${scale[c]}em
  91         . p-b-${sizes[c]}
  92             padding-bottom ${scale[c]}em
  93         . p-l-${sizes[c]}
  94             padding-left ${scale[c]}em
  95         . p-r-${sizes[c]}
  96             padding-right ${scale[c]}em
  97         . p-w-${sizes[c]}
  98             padding-left ${scale[c]}em
  99             padding-right ${scale[c]}em
 100         . p-y-${sizes[c]}
 101             padding-top ${scale[c]}em
 102             padding-bottom ${scale[c]}em
 103         . border-${sizes[c]}
 104             border ${c+1}px solid #323232
 105         . border-t-${sizes[c]}
 106             border-top ${c+1}px solid #323232
 107         . border-b-${sizes[c]}
 108             border-bottom ${c+1}px solid #323232
 109         . border-l-${sizes[c]}
 110             border-left ${c+1}px solid #323232
 111         . border-r-${sizes[c]}
 112             border-right ${c+1}px solid #323232
 113         . radius-${sizes[c]}
 114             border-radius ${scaleRad[c]}px
 115         . width-${sizes[c]}
 116             width ${scaleWidth[c]}%!important
 117     . font-w-s
 118         font-weight 300
 119     . font-w-x
 120         font-weight 500
 121     . font-w-xxl
 122         font-weight 700
 123     $include form
 124     $include icons

/ittf/css/t/colors.css.ittf

edit 
                                            
   1 $group
   2     - header
   3     - main
   4     - main-content
   5     - footer
   6     < :root
   7         --color-tn-bg #313131
   8         --color-input-bg #dedede
   9         --color-input-border #767676
  10         --color-shadow-inset #a0a0a0
  11         --color-text-primary #000000
  12         --color-success #2ea44f
  13         --color-error #ff0000
  14         --color-warning #dbab09
  15     . color-header
  16         color #efefef
  17     . bg-color-header
  18         background-color #434343
  19     . color-header-inverse
  20         color #ff4790
  21     . bg-color-header-inverse
  22         background-color #737373
  23     . color-main
  24         color #efefef
  25     . bg-color-main
  26         background-color #494949
  27     . color-main-content
  28         color #efefef
  29     . bg-color-main-content
  30         background-color #515151
  31     . color-black
  32         color #000000
  33     . bg-white
  34         background-color #000000
  35     . color-white
  36         color #ffffff
  37     . bg-black
  38         background-color #000000
  39     . color-success
  40         color var(--color-success)
  41     . bg-success
  42         background-color var(--color-success)
  43     . color-error
  44         color var(--color-error)
  45     . bg-error
  46         background-color var(--color-error)
  47     . color-warning
  48         color var(--color-warning)
  49     . bg-warning
  50         background-color var(--color-warning)
  51     . bg-filter
  52         background-color #eeeeff
  53     . bg-list
  54         background-color #eeffee

/ittf/css/t/layout.css.ittf

edit 
                                            
   1 $group
   2     . container-70
   3         width 70%
   4         margin 0 auto
   5     . container-80
   6         width 80%
   7         margin 0 auto
   8     . container-90
   9         width 90%
  10         margin 0 auto
  11     . flex-row
  12         display flex
  13         flex-direction row
  14     . flex-column
  15         display flex
  16         flex-direction column
  17     . justify-content-start
  18         justify-content start
  19     . justify-content-center
  20         justify-content center
  21     . justify-content-space-between
  22         justify-content space-between
  23     . space-between
  24         justify-content space-between
  25     . align-items-start
  26         align-items start
  27     . align-items-center
  28         align-items center
  29     . grid
  30         display grid
  31     . width-100
  32         width 100%
  33     . width-50
  34         width 50%
  35     . height-100
  36         height 100%
  37     . height-50
  38         height 50%

/ittf/css/t/form.css.ittf

edit 
                                            
   1 $group
   2     . form-control
   3         background-color var(--color-input-bg)
   4         background-position right 8px center
   5         background-repeat no-repeat
   6         border 1px solid var(--color-input-border)
   7         border-radius 6px
   8         box-shadow var(--color-shadow-inset)
   9         color var(--color-text-primary)
  10         font-size 14px
  11         line-height 20px
  12         outline none
  13         padding 5px 12px
  14         vertical-align middle
  15     # ==========================================================================
  16     # Form
  17     # ==========================================================================
  18     . form-card
  19         padding 30px
  20         border 1px solid #ebebeb
  21     . form-title
  22         font-size 30px
  23         font-weight 700
  24         margin-bottom 20px
  25     # ==========================================================================
  26     # Control
  27     # ==========================================================================
  28     . control-group
  29         width 100%
  30         padding 10px
  31         margin-bottom 5px
  32     . single-control
  33         width 100%
  34         margin-bottom 5px
  35     . control-label
  36         font-weight bold
  37         margin-bottom 7px
  38     . control-error
  39         font-size 12px
  40         color red
  41     # ==========================================================================
  42     # Label
  43     # ==========================================================================
  44     < label.required
  45         position relative
  46     < label.required:after
  47         content '*'
  48         margin-left 2px
  49         color #b90000
  50     # ==========================================================================
  51     # GRID
  52     # ==========================================================================
  53     . grid-row-2
  54         display grid
  55         grid-template-columns 1fr 1fr
  56     . grid-row-3
  57         display grid
  58         grid-template-columns 1fr 1fr 1fr
  59     . input-group
  60         position relative
  61         width 100%
  62         margin-bottom 1px
  63         padding-bottom 4px
  64     # ==========================================================================
  65     # BUTTON
  66     # ==========================================================================
  67     . btn
  68         line-height 40px
  69         display inline-block
  70         padding 0 25px
  71         cursor pointer
  72         color #fff
  73         font-family "Roboto", "Arial", "Helvetica Neue", sans-serif
  74         transition all 0.4s ease
  75         font-size 14px
  76         font-weight 700
  77     . btn--radius
  78         border-radius 3px
  79     . btn--green
  80         background #57b846
  81     . btn--green:hover
  82         background #4dae3c
  83     # ==========================================================================
  84     # Input
  85     # ==========================================================================
  86     < input
  87         box-sizing border-box
  88         border 1px solid #ebebeb
  89         padding 14px 20px
  90         border-radius 5px
  91         font-size 14px
  92         font-family inherit
  93     < input:focus
  94         border 1px solid #009e00
  95     < input.error
  96         border 1px solid #c70000
  97     . input-icon
  98         position absolute
  99         font-size 18px
 100         color #ccc
 101         right 8px
 102         top 50%
 103         transform translateY(-50%)
 104         cursor pointer
 105     . input--style-2
 106         color #666
 107         font-size 16px
 108         font-weight 500
 109     . input--style-2::-webkit-input-placeholder
 110         color #808080
 111         opacity .4
 112     . input--style-2:-moz-placeholder
 113         color #808080
 114         opacity .4
 115     . input--style-2::-moz-placeholder
 116         color #808080
 117         opacity .4
 118     . input--style-2:-ms-input-placeholder
 119         color #808080
 120         opacity .4
 121     . input--style-2:-ms-input-placeholder
 122         color #808080
 123         opacity .4
 124     # ==========================================================================
 125     # Object condition
 126     # ==========================================================================
 127     . object-condition
 128         border 1px solid #cbcbcb
 129         padding 5px
 130         background-color #efefef
 131     . object-condition-checkbox
 132         background-color #fff

/ittf/css/t/icons.css.ittf

edit 
                                            
   1 $group
   2     . octicon
   3         fill currentColor
   4         display inline-block
   5         overflow visible!important
   6         vertical-align text-bottom