/ittf/site/docs/concepts/glossary.html.ittf (primary)

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

edit 
                                            
   1 $group
   2     $
   3         var sect = {
   4             title: 'Wizzi Glossary'
   5         };
   6     section( §)
   7         table-doc( glo )
   8             glo-item( $fragment command )
   9                 span
  10                     + The $fragment command is an ITTF Template Command for declaring
  11                         \b an inlined ITTF Fragment.
  12             glo-item( $include command )
  13                 span
  14                     + The $include command is an ITTF Template Command for including
  15                         \b an ITTF Fragment in the node position of the command.
  16             glo-item( *__copy folders )
  17                 span
  18                     + When mass generating artifacts using a
  19                     high-code( glob )
  20                     + pattern, folders having a name ending with
  21                     high-code( __copy )
  22                     + are not generated but simply copied as is.
  23             glo-item( Artifact Generator )
  24                 span
  25                     + An Artifact Generator is a javascript module exported by a Wizzi Plugin
  26                         \b that takes as input a Wizzi Model Instance and,
  27                         \b optionally, a context object, and writes a software artifact.
  28                         \b An Artifact Generation is the main actions of a Wizzi Production.
  29             glo-item( Included ITTF Fragment )
  30                 span
  31                     + An Included ITTF Fragment is a reusable fragment of an ITTF Document, contained in its own file
  32                         \b or inlined,
  33                         \b that has been incuded in an includer, without passing of parameters, using an $include command.
  34             glo-item( ITTF Document )
  35                 span
  36                     + ITTF, Indented Text Tree Format, is a document format for
  37                         \b declaring a textual representation of
  38                         \b a tree data structure of name-valued nodes.
  39                         \b It is the source format of Wizzi Models.
  40                         \b It consists of one Primary ITTF Document and,
  41                         \b optionally, one or more ITTF Fragments mixed or included.
  42             glo-item( ITTF Fragment path resolution )
  43                 span Include commands and mix actions declare the path of the ITTF Document
  44                     \b that must be mixed or included. At first the path to match is built
  45                     \b joining the current folder path of the includer document and the declared path
  46                     \b of the included document. If this match fails, then the 't' folder rule is applied,
  47                     \b starting from the current folder path and going up on the folder tree.
  48                     \b See 't folder'.
  49             glo-item( Primary ITTF Document )
  50                 span
  51                     + A Primary ITTF Document acts as the starting point for loading an mTree.
  52                         \b It's a text file that can contain and combine smaller ITTF Fragments.
  53                         \b However, the main root of the Primary ITTF Document might not become the
  54                         \b final root node of the mTree after processing.
  55                         \b This is because the Primary ITTF Document's root can be a Mix Action
  56                         \b that inserts its content beneath another node within a mixed ITTF Fragment.
  57             glo-item( ITTF Node )
  58                 span
  59                     + An ITTF Node is a node of the tree structure of an ITTF Document.
  60                         \b It is a logical line of code that can be broken in many
  61                         \b phisical lines with line continuations chars.
  62                         \b It is a name value pair of text strings, with children ITTF Nodes, and
  63                         \b one parent ITTF Node. The ITTF Root Node has no parent node.
  64             glo-item( ITTF Node Name)
  65                 span
  66                     + An ITTF Node Name is the name part of an ITTF Node.
  67             glo-item( ITTF Node Value)
  68                 span
  69                     + An ITTF Node Value is the value part of an ITTF Node.
  70             glo-item( ITTF Fragment )
  71                 span
  72                     + An ITTF Fragment is a branch ITTF Node that can be included or mixed
  73                         \b in an Primary ITTF Document or in another ITTF Fragment.
  74                         \b It can be defined in a separate file, and retrieved using
  75                         \b the ITTF Document path resolution or can be inlined,
  76                         \b using the Template Command
  77                     high-code( $fragment fragment-name )
  78                     + , and referenced by name.
  79             glo-item( ITTF Processing )
  80                 span
  81                     + The ITTF Processing of an ITTF Document is the parsing of the
  82                         \b source documents, the resolution of references to ITTF Fragments,
  83                         \b their inclusion or mix, the execution of ITTF Template Commands and JsWizzi expressions,
  84                         \b and, at the end, the build up of the resulting node structure that will be loaded into an mTree instance.
  85             glo-item( ITTF Root Node )
  86                 span
  87                     + An ITTF Root Node is the root node of an ITTF Source Unit
  88             glo-item( ITTF Scan Feature )
  89                 span
  90                     + The ITTF Scan Feature is a Wizzi Feature for
  91                         \b keeping tracks and easily retrieve the dependencies of mixed and included ITTF Fragments.
  92             glo-item( ITTF Source Unit )
  93                 span
  94                     + An ITTF Source Unit is an ITTF Node branch with a name,
  95                         \b that can be referenced in a Wizzi Action.
  96                         \b Primary ITTF Documents (files) and ITTF Fragments (files or inlined) are
  97                         \b the ITTF Source Units of Wizzi. An ITTF Source Unit must have a single ITTF Root Node.
  98                         \b You can define an ITTF Fragment with many root nodes using the convenience
  99                         \b ITTF Template Command ${}
 100                         high-code( $group )
 101                     + ${} as ITTF Root Node.
 102             glo-item( ITTF Template Command )
 103                 span
 104                     + An ITTF Template Command is an instruction for the ITTF Template Engine.
 105                         \b It is an ITTF Node with a name starting with the ${}
 106                     high-code( $ )
 107                     + ${} char. It can modify variables in the JsWizzi Evaluation Context or
 108                         \b manipulate the node structure of the ITTF Document, merging nodes with context data,
 109                         \b including and excluding node branches, etc...
 110             glo-item( ITTF Template Engine )
 111                 span
 112                     + The ITTF Template Engine is a Wizzi Kernel Feature that manages
 113                         \b the template commands and the JsWizzi expressions
 114                         \b contained in an ITTF Document.
 115             glo-item( JsWizzi )
 116                 span
 117                     + JsWizzi is the script engine used by the ITTF Template Engine of Wizzi.
 118                         \b It is a sandboxed subset of javascript. Expressions in ITTF Node Values
 119                         \b and ITTF Template Commands are written in JsWizzi.
 120             glo-item( JsWizzi Evaluation Context )
 121                 span
 122                     + The JsWizzi Evaluation Context is the evaluation context of JsWizzi during
 123                         \b an ITTF Processing. The properties can be set at various leveles. 1) a global
 124                         \b context can be set instantiating a Wizzi Factory Istance; 2) an action context
 125                         \b can be set calling the method for the action; 3) Ittf documents can declare
 126                         \b global variables (the scope are the fragment of the document) using the ${}
 127                     high-code( $global )
 128                     + command;  3) Ittf documents can declare
 129                         \b local variables using the
 130                     high-code( $ )
 131                     + command.
 132             glo-item( Language Artifact Generator )
 133                 span
 134                     + A Language Artifact Generator is an Artifact Generator that generate
 135                         \b code files written in a Programming Language (PL).
 136                         \b For example the
 137                     high-code( js/module )
 138                     + and
 139                     high-code( ts/module )
 140                     + Artifact Generators of the ${}
 141                     to-plugin( js )
 142                     + and
 143                     to-plugin( ts )
 144                     + plugins.
 145             glo-item( Language Wizzi Schema )
 146                 span
 147                     + A Language Wizzi Schema is a Wizzi Schema that defines an ITTF Document Type
 148                         \b that an artifact generator can transform in a Programming Language (PL) code file.
 149             glo-item( Meta generation )
 150                 span
 151                     + See `Meta production`
 152             glo-item( Meta production )
 153                 span
 154                     + A meta production is a data driven creation of a Wizzi Package.
 155                         \b The entire folder and file structure of the package can be templated.
 156                         \b The result of a meta generation are Ittf Documents.
 157             glo-item( Mix Action )
 158                 span
 159                     + A Mix Action merges a Mixed ITTF Fragment into a mixer ITTF Document.
 160             glo-item( Mixed ITTF Fragment )
 161                 span
 162                     + A Mixed ITTF Fragment is a reusable fragment of an ITTF Document,
 163                         \b that has ben merged in a mixer document, with passing of parameters, using a Mix Action.
 164                         \b The ITTF Nodes of a Mixed ITTF Fragment mantain the JsWizzi Evaluation Context of
 165                         \b their original ITTF Source Unit.
 166             glo-item( Model Transformer )
 167                 span
 168                     + A Model Trasformer is a javascript module exported by a Wizzi Plugin
 169                         \b that takes as input a Wizzi Model Instance and,
 170                         \b optionally, a context object, and gives as output
 171                         \b a modified Wizzi Model Instance or a new POJO object.
 172             glo-item( mTree )
 173                 span
 174                     + An mTree is the result of the mTree Loading of a ITTF Document.
 175                         \b mTrees are tree data structures, in-memory objects that are not persisted.
 176                         \b mTrees are verified and loaded into Wizzi Model Instances.
 177                         \b A Wizzi Model Loader, optionally, can pre-process an mTree before loading it.
 178             glo-item( mTree Loader)
 179                 span
 180                     + An mTree loader processes a primary ITTF document and all its associated fragments using ITTF Processing standards.
 181                         \b Then, it loads the resulting data structure into an mTree.
 182             glo-item( mTree Pre-processor)
 183                 span
 184                     + An mTree Pre-processor can modify an mTree after its loading and
 185                         \b before its processing by a Wizzi Model Loader.
 186                         \b It must be declared in a Wizzi Schema and must be written
 187                         \b in the 'lib\wizzi\models' folder of a Wizzi Plugin.
 188             glo-item( Semantic Ittf Node )
 189                 span
 190                     + A Semantic Ittf Node contains a name value pair that has a meaning
 191                         \b in the document type (Wizzi Schema). An mTree contains
 192                         \b Semantic Ittf Nodes only. See
 193                     high-code( Template Ittf Node )
 194             glo-item( t folder )
 195                 span Folders named 't' have special rules for the path resolution
 196                     \b of mixed and included ITTF Documents. In the folder structure
 197                     \b of a Wizzi Package, ITTF Documents contained in a 't' folder,
 198                     \b can be referenced with the same rules that apply to NodeJs packages
 199                     \b in 'node_modules' folders. They are searched up on the folder tree, until the
 200                     \b relative path of the mix or include call is matched or the path resolution fails.
 201             glo-item( Template Ittf Node )
 202                 span
 203                     + A Template Ittf Node contains instructions for building the mTree Semantic Nodes structure.
 204                         \b See
 205                     high-code( Semantic Ittf Node )
 206             glo-item( Virtual Store System )
 207                 span
 208                     + The store system of Wizzi is virtualized.
 209                         \b When instantiating a
 210                     high-code( WizziFactory )
 211                     + instance you can select the Store Kind. Disk file system is the default.
 212                         \b Virtual Store Systems are implemented by the
 213                     to-wizzi-package( wizzi-repo )
 214                     + core package. Available store kinds are:
 215                     high-code( filesystem )
 216                     + ,
 217                     high-code( mongodb )
 218                     + and
 219                     high-code( json )
 220                     + .
 221             glo-item( Wizzi Action )
 222                 span
 223                     + Wizzi Actions are the steps of a Wizzi Production. The main Wizzi Actions are: ${}
 224                     high-code( ITTF Processing)
 225                     + ,
 226                     high-code( mTree Loading)
 227                     + ,
 228                     high-code( mTree pre-processing)
 229                     + ,
 230                     high-code( Wizzi Model Loading)
 231                     + ,
 232                     high-code( Model Transformation)
 233                     + ,
 234                     high-code( Artifact Generation)
 235                     + . Wizzi Actions are orchestrated by ${}
 236                     high-code( Wizzi Jobs)
 237                     + ,
 238                     high-code( wizziHub Jobs)
 239                     + , or programmatically using the
 240                     high-code( Wizzi API)
 241                     + .
 242             glo-item( Wizzi API )
 243                 span
 244                     + It is an API for executing programmatically the productions of the Wizzi Factory.
 245                         \b It is implemented by an instance of the
 246                     high-code( WizziFactory )
 247                     + class, exported by the
 248                     to-wizzi-package( wizzi )
 249                     + package.
 250             glo-item( Wizzi CLI )
 251                 span
 252                     + The Wizzi command line interface (CLI). It is used to perform basic functionality,
 253                         \b such as executing a Wizzi Production,
 254                         \b creating a new Wizzi Package based on a starter,
 255                         \b wizzifying an existing artifact or a folder of artifacts.
 256             glo-item( Wizzi Core Packages )
 257                 span
 258                     + The Wizzi Core Packages are the
 259                     to-wizzi-package( wizzi )
 260                     + ,
 261                     to-wizzi-package( wizzi-utils )
 262                     + ,
 263                     to-wizzi-package( wizzi-mtree )
 264                     + ,
 265                     to-wizzi-package( wizzi-repo )
 266                     + packages.
 267             glo-item( Wizzi Core Plugin )
 268                 span
 269                     + The Wizzi Core Plugins are the
 270                     to-plugin( wizzi-core )
 271                     + ,
 272                     to-plugin( wizzi-js )
 273                     + ,
 274                     to-plugin( wizzi-web )
 275                     + packages.
 276             glo-item( Wizzi Factory )
 277                 span
 278                     + It is the set of Wizzi features for producing artifacts.
 279                         \b Wizzi is a software factory!
 280             glo-item( Wizzi Factory Instance )
 281                 span
 282                     + A Wizzi Factory Instance is the main object of the Wizzi Platform.
 283                         \b Declares the methods for executing almost every Wizzi Action.
 284                         \b Most Wizzi Actions have a reference to the current Wizzi Factory Instance
 285                         \b in their execution context so that they can require services.
 286             glo-item( Wizzi Hub )
 287                 span
 288                     + Wizzi Hub is a NodeJS / Express / MongoDb / Typescript application
 289                         \b running on the the cloud that can be used for ${}
 290                     high-code( sharing your productions )
 291                     + with other developers and ${}
 292                     high-code( calling generation services )
 293                     + over the network.
 294             glo-item( Wizzi Job )
 295                 span
 296                     + The Wizzi Job is the Task Manager of Wizzi. It is implemented as
 297                         \b a Wizzi Kernel Schema of type ${}
 298                     high-code( wzjob )
 299                     + ${} where you can define Wizzi Productions. A Wizzi Job can be executed
 300                         \b using the ${}
 301                     high-code( wizzi )
 302                     + ${} command of the Wizzi CLI or, programmatically, using the Wizzi API.
 303             glo-item( Wizzi Kernel Feature )
 304                 span
 305                     + A feature implemented by a Wizzi Core Package or a Wizzi Core Plugin.
 306             glo-item( Wizzi Package Production )
 307                 span
 308                     + A Wizzi Package Production is a series of Wizzi Productions
 309                         \b for creating a new Wizzi Package.
 310                         \b It is executed by the Wizzi CLI after selecting a Wizzi Package Starter.
 311             glo-item( Wizzi Model DOM )
 312                 span
 313                     + A Wizzi Model DOM is an object model implemented in a javascript module
 314                         \b generate from a Wizzi Schema. The Wizzi Model DOM generation is
 315                         \b a kernel feature of the \b\
 316                     to-plugin( wzschema )
 317                     + ${} plugin and the class structure of the DOM is a Wizzi feature. Class
 318                         \b methods instead can be user defined.
 319             glo-item( Wizzi Model Instance )
 320                 span
 321                     + A Wizzi Model Instance is an istance of a Wizzi Model DOM created by a
 322                         \b Wizzi Model Loading. It is the main context object used
 323                         \b by Wizzi Actions.
 324             glo-item( Wizzi Model Loading )
 325                 span
 326                     + The Wizzi Model Loading is the action implemented by a Wizzi Model Factory
 327                         \b and a Wizzi Model Doms generated from a Wizzi Schema.
 328                         \b It creates a Wizzi Model Instance and loads in it an mTree,
 329                         \b validates the mTree nodes, instantiates the classes of the DOM
 330                         \b and executes the ${}
 331                     high-code( verify )
 332                     + ${} and ${}
 333                     high-code( initialize )
 334                     + methods. The result is a Wizzi Model Instance ready for use as a context object
 335                         \b in others Wizzi Actions.
 336             glo-item( Wizzi Package )
 337                 span
 338                     + A Wizzi Package is a package that uses Wizzi for generating some, or all, of its artifacts.
 339                         \b A standard Wizzi Package contains a ${}
 340                     high-code( .wizzi )
 341                     + folder.
 342             glo-item( Wizzi Platform )
 343                 span
 344                     + The Wizzi Platform is the entire ecosystem of Wizzi. Its main components are the ${}
 345                     high-code( Wizzi Kernel )
 346                     + , the ${}
 347                     high-code( Wizzi Plugins )
 348                     + , the ${}
 349                     high-code( Wizzi Meta Plugins )
 350                     + , the ${}
 351                     high-code( Wizzi CLI )
 352                     + , the ${}
 353                     high-code( Wizzi API )
 354                     + ,
 355                     high-code( Wizzi Studio )
 356                     + and
 357                     high-code( Wizzi Hub )
 358                     + .
 359             $*
 360             glo-item( Wizzi Package Starter )
 361                 span
 362                     + A Wizzi Package Starter is a template of a Wizzi Package,
 363                         \b containing some domain specific Wizzi Productions,
 364                         \b that is used by the Wizzi CLI
 365                         \b as a starter for a new Wizzi Package.
 366                         \b Examples of available starters are: ${}
 367                     high-code( static-website)
 368                     + , ${}
 369                     high-code( express-server)
 370                     + , ${}
 371                     high-code( wizzi-plugin)
 372                     + .
 373             *$
 374             glo-item( Wizzi Plugin )
 375                 span
 376                     + A Wizzi Plugin implements one or more Wizzi Schemas. For each schema the plugin must implement
 377                         \b its Wizzi Model Loader and can implement
 378                         \b Artifact Generators, Model Transformers, a Wizzifier and a documentation Cheatsheet.
 379                         \b A Wizzi plugin must be a NodeJS package, and must export a Wizzi Plugin Interface.
 380             glo-item( Wizzi Plugin Interface)
 381                 span
 382                     + A Wizzi Plugin Interface is the interface that a Wizzi Pugin must export
 383                         \b in its index file, so that the Wizzi Plugin Manager can retrieve
 384                         \b its Loaders, transformers, generators, wizzifiers
 385                         \b and cheatsheets.
 386             glo-item( Wizzi Production )
 387                 span
 388                     + A Wizzi Production is a set of Wizzi Actions
 389                         \b for generating one or more software artifacts.
 390             glo-item( Wizzi Schema )
 391                 span
 392                     + A Wizzi Schemas is the core modeling tool of Wizzi.
 393                         \b In it you define an object model of
 394                         \b named and typed elements
 395                         \b that map the ITTF Nodes of an ITTF Document.
 396                         \b A production of the core plugin
 397                     to-plugin( wzschema)
 398                     + transforms a Wizzi Schema into a Wizzi Model DOM, a javascript
 399                         \b class that implements the schema object model. Wizzi Model Instances can
 400                         \b load and validate mTrees data.
 401                         \b Typed elements become classes and you can write methods
 402                         \b for filtering and manipulating the loaded data.
 403             glo-item( Wizzi Store System )
 404                 span
 405                     + A Wizzi Store System implements a Virtual File System
 406                         \b for retrieving ITTF Documents. Currently the
 407                         \b Wizzi Store Systems are: ${}
 408                     high-code( filesystem )
 409                     + and ${}
 410                     high-code( json )
 411                     + . The ${}
 412                     high-code( json )
 413                     + Virtual file system is a powerful tool for executing productions in the cloud or
 414                         \b behind your own http endpoints.
 415             glo-item( Wizzi Studio )
 416                 span
 417                     + Wizzi Studio is a NodeJS / Express / MongoDb / Typescript application
 418                         \b for managing Wizzi Productions that must be run locally
 419                         \b accessing the file system of your desktop.
 420             glo-item( wizzifier )
 421                 span
 422                     + A plugin may implement a wizzifier for its schema. A wizzifier converts an artifact to its ITTF Document source.
 423                         \b These core plugins have a wizzifier: ${}
 424                     to-plugin( css )
 425                     + , ${}
 426                     to-plugin( html )
 427                     + , ${}
 428                     to-plugin( js )
 429                     + , ${}
 430                     to-plugin( json )
 431                     + , ${}
 432                     to-plugin( ts )
 433                     + , ${}
 434                     to-plugin( svg )
 435                     + , ${}
 436                     to-plugin( yaml )
 437                     + and ${}
 438                     to-plugin( xml )
 439                     + .
 440             glo-item( wizzify )
 441                 span
 442                     + To wizzify means to executes a
 443                     high-code( wizzifier )
 444                     + . It converts an artifact to its ITTF Document source.

/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/concepts/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/t/glo-item.html.ittf

edit 
                                            
   1 $group
   2     $params name
   3     tr
   4         td
   5             . title
   6                 + ${name}
   7         td
   8             $hook

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

/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