/ittf/site/docs/geeky/wizzischemas.html.ittf (primary)

edit 
                                            
   1 html
   2     $global
   3         var dollar = '$';
   4     $
   5         var art = {
   6             section: 'Geeky',
   7             title: 'Wizzi Schemas'
   8         };
   9     _layouts/concepts( &art)
  10         $include ./wizzischemas/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/geeky/t/wizzischemas/introduction.html.ittf

edit 
                                            
   1 $group
   2     $
   3         var sect = {
   4             title: 'Wizzi Schemas'
   5         };
   6     section( §)
   7         table-doc()
   8             tr( The wfschema Wizzi Schema definition,  wizzi-core,  lib/wizzi/schemas/wfschema.wfschema.ittf,  lib/wizzi/models )
   9                 p This Wizzi Schema that defines the type of a wfschema ITTF Document is implemented by the
  10                     to-plugin( wizzi-core )
  11                     + core plugin in the schema
  12                     high-code( wfschema )
  13                     + .
  14             tr( The Model Transformer of a wfschema Wizzi Model Instance,  wizzi,  lib/wizzi/models/bootstrap/wfschema-boot-model.js.ittf,  lib/wizzi/models/bootstrap/wfschema-boot-model.js )
  15                 p Here, from a loaded wfschema Wizzi Model Instance, is extracted a POJO object
  16                     \b that will be the context object for the Artifact Generators of the wfschema.
  17                 p This Model Transformer is out of standard and is implemented in the
  18                     to-wizzi-package( wizzi )
  19                     + core package. It has a TODO, and should be implemented as a Model Transformer in the
  20                     to-wizzi-package( wizzi-core )
  21                     + core plugin.
  22             tr( The Artifact Generator of a Wizzi Model DOM,  wizzi-core,  lib/artifacts/wfschema/model/gen/main.js.ittf,  lib/artifacts/wfschema/model/gen/main.js )
  23             tr( The Artifact Generator of a Wizzi Model Factory,  wizzi-core,  lib/artifacts/wfschema/factory/gen/main.js.ittf,  lib/artifacts/wfschema/factory/gen/main.js )
  24             tr( The Artifact Generator of a Wizzi Schema documentation,  wizzi-core,  lib/artifacts/wfschema/json_docs/gen/main.js.ittf,  lib/artifacts/wfschema/json_docs/gen/main.js )

/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)

/ittf/site/docs/geeky/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/table-doc.html.ittf

edit 
                                            
   1 $group
   2     $params kind|docs, title|@@null
   3     . table-${kind}
   4         table
   5             tbody
   6                 $hook

/ittf/site/docs/geeky/t/tr.html.ittf

edit 
                                            
   1 $group
   2     $params title, xpackage, ittf, generated|@@null
   3     tr
   4         td
   5             div ${title}
   6         td
   7             to-wizzi-ittf( ${xpackage},  ${ittf} )
   8         td
   9             to-wizzi-generated( ${xpackage},  ${generated} )
  10     tr
  11         td
  12             colspan 3
  13             div
  14                 $hook

/ittf/site/docs/t/to-plugin.html.ittf

edit 
                                            
   1 $group
   2     $params name, kind|@@null
   3     $
   4         // var xname = kind != 'nospace' ? ' ' + name + ' ' : name
   5     $if kind != 'nospace'
   6         span ${} ${}
   7     code
   8         class highlight-code
   9         a ${name}
  10             href https://github.com/stfnbssl/wizzi.plugins/tree/main/packages/wizzi.plugin.${name}
  11             target _blank
  12     $if kind != 'nospace'
  13         span ${} ${}

/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 ${} ${}

/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/to-wizzi-ittf.html.ittf

edit 
                                            
   1 $group
   2     $params xpackage, file|@@null
   3     a ittf
   4         href https://github.com/stfnbssl/wizzi/tree/master/packages/${xpackage}/.wizzi/ittf/${file}

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

edit 
                                            
   1 $group
   2     $params xpackage, file|@@null
   3     a generated
   4         href https://github.com/stfnbssl/wizzi/blob/master/packages/${xpackage}/dist/${file}

/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