/ templates / index.html
index.html
  1  <!DOCTYPE html>
  2  <html lang="en" dir="ltr">
  3    <head prefix="og: http://ogp.me/ns#">
  4    <meta charset="utf-8">
  5    <title>Templates | Embark</title>
  6    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  7    <meta name="viewport" content="width=device-width, initial-scale=1">
  8    <!-- Canonical links -->
  9    <link rel="canonical" href="https://framework.embarklabs.io/templates/index.html">
 10    <!-- Alternative links -->
 11    
 12  
 13    <!-- Icon -->
 14    <meta name="msapplication-TileColor" content="#080E1A">
 15    <link rel="icon" type="image/png" href="/assets/images/favicon-16.png" sizes="16x16" />
 16    <link rel="icon" type="image/png" href="/assets/images/favicon-32.png" sizes="32x32" />
 17  
 18    <link rel="apple-touch-icon" sizes="76x76" href="/assets/images/apple-touch-icon-60x60-precomposed.png">
 19    <link rel="apple-touch-icon" sizes="76x76" href="/assets/images/apple-touch-icon-76x76-precomposed.png">
 20    <link rel="apple-touch-icon" sizes="120x120" href="/assets/images/apple-touch-icon-120x120-precomposed.png">
 21    <link rel="apple-touch-icon" sizes="152x152" href="/assets/images/apple-touch-icon-152x152-precomposed.png">
 22    <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/apple-touch-icon-precomposed.png">
 23    <link rel="apple-touch-icon" href="/assets/images/apple-touch-icon-precomposed.png">
 24    <!-- CSS -->
 25    
 26  <link rel="stylesheet" href="/css/embark.css">
 27  
 28    <!-- endbuild -->
 29  
 30    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
 31    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
 32  
 33    <!-- RSS -->
 34    <link rel="alternate" href="/atom.xml" title="Embark">
 35    <meta property="og:image" content="/img/share.png?v=0.0.5" />
 36    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.4/styles/dracula.min.css">
 37  
 38    <script async defer src="https://buttons.github.io/buttons.js"></script>
 39  
 40  
 41  <script>
 42    !function(root, factory) {
 43      "function" == typeof define && define.amd ? // AMD. Register as an anonymous module unless amdModuleId is set
 44      define([], function() {
 45          return root.svg4everybody = factory();
 46      }) : "object" == typeof module && module.exports ? // Node. Does not work with strict CommonJS, but
 47      // only CommonJS-like environments that support module.exports,
 48      // like Node.
 49      module.exports = factory() : root.svg4everybody = factory();
 50  }(this, function() {
 51      /*! svg4everybody v2.1.9 | github.com/jonathantneal/svg4everybody */
 52      function embed(parent, svg, target) {
 53          // if the target exists
 54          if (target) {
 55              // create a document fragment to hold the contents of the target
 56              var fragment = document.createDocumentFragment(), viewBox = !svg.hasAttribute("viewBox") && target.getAttribute("viewBox");
 57              // conditionally set the viewBox on the svg
 58              viewBox && svg.setAttribute("viewBox", viewBox);
 59              // copy the contents of the clone into the fragment
 60              for (// clone the target
 61              var clone = target.cloneNode(!0); clone.childNodes.length; ) {
 62                  fragment.appendChild(clone.firstChild);
 63              }
 64              // append the fragment into the svg
 65              parent.appendChild(fragment);
 66          }
 67      }
 68      function loadreadystatechange(xhr) {
 69          // listen to changes in the request
 70          xhr.onreadystatechange = function() {
 71              // if the request is ready
 72              if (4 === xhr.readyState) {
 73                  // get the cached html document
 74                  var cachedDocument = xhr._cachedDocument;
 75                  // ensure the cached html document based on the xhr response
 76                  cachedDocument || (cachedDocument = xhr._cachedDocument = document.implementation.createHTMLDocument(""),
 77                  cachedDocument.body.innerHTML = xhr.responseText, xhr._cachedTarget = {}), // clear the xhr embeds list and embed each item
 78                  xhr._embeds.splice(0).map(function(item) {
 79                      // get the cached target
 80                      var target = xhr._cachedTarget[item.id];
 81                      // ensure the cached target
 82                      target || (target = xhr._cachedTarget[item.id] = cachedDocument.getElementById(item.id)),
 83                      // embed the target into the svg
 84                      embed(item.parent, item.svg, target);
 85                  });
 86              }
 87          }, // test the ready state change immediately
 88          xhr.onreadystatechange();
 89      }
 90      function svg4everybody(rawopts) {
 91          function oninterval() {
 92              // while the index exists in the live <use> collection
 93              for (// get the cached <use> index
 94              var index = 0; index < uses.length; ) {
 95                  // get the current <use>
 96                  var use = uses[index], parent = use.parentNode, svg = getSVGAncestor(parent), src = use.getAttribute("xlink:href") || use.getAttribute("href");
 97                  if (!src && opts.attributeName && (src = use.getAttribute(opts.attributeName)),
 98                  svg && src) {
 99                      if (polyfill) {
100                          if (!opts.validate || opts.validate(src, svg, use)) {
101                              // remove the <use> element
102                              parent.removeChild(use);
103                              // parse the src and get the url and id
104                              var srcSplit = src.split("#"), url = srcSplit.shift(), id = srcSplit.join("#");
105                              // if the link is external
106                              if (url.length) {
107                                  // get the cached xhr request
108                                  var xhr = requests[url];
109                                  // ensure the xhr request exists
110                                  xhr || (xhr = requests[url] = new XMLHttpRequest(), xhr.open("GET", url), xhr.send(),
111                                  xhr._embeds = []), // add the svg and id as an item to the xhr embeds list
112                                  xhr._embeds.push({
113                                      parent: parent,
114                                      svg: svg,
115                                      id: id
116                                  }), // prepare the xhr ready state change event
117                                  loadreadystatechange(xhr);
118                              } else {
119                                  // embed the local id into the svg
120                                  embed(parent, svg, document.getElementById(id));
121                              }
122                          } else {
123                              // increase the index when the previous value was not "valid"
124                              ++index, ++numberOfSvgUseElementsToBypass;
125                          }
126                      }
127                  } else {
128                      // increase the index when the previous value was not "valid"
129                      ++index;
130                  }
131              }
132              // continue the interval
133              (!uses.length || uses.length - numberOfSvgUseElementsToBypass > 0) && requestAnimationFrame(oninterval, 67);
134          }
135          var polyfill, opts = Object(rawopts), newerIEUA = /\bTrident\/[567]\b|\bMSIE (?:9|10)\.0\b/, webkitUA = /\bAppleWebKit\/(\d+)\b/, olderEdgeUA = /\bEdge\/12\.(\d+)\b/, edgeUA = /\bEdge\/.(\d+)\b/, inIframe = window.top !== window.self;
136          polyfill = "polyfill" in opts ? opts.polyfill : newerIEUA.test(navigator.userAgent) || (navigator.userAgent.match(olderEdgeUA) || [])[1] < 10547 || (navigator.userAgent.match(webkitUA) || [])[1] < 537 || edgeUA.test(navigator.userAgent) && inIframe;
137          // create xhr requests object
138          var requests = {}, requestAnimationFrame = window.requestAnimationFrame || setTimeout, uses = document.getElementsByTagName("use"), numberOfSvgUseElementsToBypass = 0;
139          // conditionally start the interval if the polyfill is active
140          polyfill && oninterval();
141      }
142      function getSVGAncestor(node) {
143          for (var svg = node; "svg" !== svg.nodeName.toLowerCase() && (svg = svg.parentNode); ) {}
144          return svg;
145      }
146      return svg4everybody;
147  });
148  
149  svg4everybody();
150  </script>
151  </head>
152  
153    <body>
154      <header role="banner" class="c-header c-header--compact">
155    <span class="c-header__background"></span>
156    <div class="o-container c-header__content">
157      <div class="c-header__top">
158        <a href="/" title="Embark" class="c-logo c-logo--negative">Embark</a>
159        <nav role="navigation" class="c-navigation">
160          <div class="c-navigation__header">
161            <a href="/" title="Embark" class="c-logo">Embark</a>
162            <button class="c-navigation__close u-text-light" title="Close menu">
163              <svg class="c-icon c-icon--xs"><use xlink:href="/../assets/icons/symbols.svg#icon-close"></use></svg>
164            </button>
165          </div>
166          <div class="c-navigation__body">
167            <ul class="c-navigation__list">
168              <li class="c-navigation__item">
169                <a href="/docs/quick_start.html" class="c-navigation__anchor " title="Quick Start">Quick Start</a>
170              </li>
171              <li class="c-navigation__item">
172                <a href="/docs" class="c-navigation__anchor " title="Learn">Learn</a>
173              </li>
174              <li class="c-navigation__item">
175                <a href="/plugins" class="c-navigation__anchor " title="Plugins">Plugins</a>
176              </li>
177              <li class="c-navigation__item">
178                <a href="/community" class="c-navigation__anchor " title="Community">Community</a>
179              </li>
180              <li class="c-navigation__item">
181                <a href="https://blog.embarklabs.io" target="_blank" rel="noopener" class="c-navigation__anchor " title="Blog">Blog</a>
182              </li>
183            </ul>
184          </div>
185        </nav>
186        <div class="o-flex o-flex-center">
187          <form action="" class="o-flex__item u-hidden-until-large">
188            <input type="search" placeholder="Search" id="search-input">
189          </form>
190          <div class="o-flex__item">
191            <ul class="o-flex o-flex-center">
192              <li class="o-flex__item">
193                <a href="https://github.com/embarklabs/embark" title="Github" target="_blank" class="u-link-ghost">
194                  <svg class="c-icon"><use xlink:href="/../assets/icons/symbols.svg#icon-github"></use></svg>
195                </a>
196              </li>
197              <li class="o-flex__item">
198                <a href="https://twitter.com/EmbarkProject" title="Twitter" target="_blank">
199                  <svg class="c-icon"><use xlink:href="/../assets/icons/symbols.svg#icon-twitter"></use></svg>
200                </a>
201              </li>
202              <li class="o-flex__item u-hidden-large-up">
203                <button type="button"class="c-navigation__trigger u-link-ghost" title="Open menu">
204                  <svg class="c-icon"><use xlink:href="/../assets/icons/symbols.svg#icon-navigation-menu"></use></svg>
205                </button>
206              </li>
207            </ul>
208          </div>
209        </div>
210      </div>
211      <div class="c-quick-search o-distance-m u-hidden-large-up">
212        <input type="search" id="inp-search" placeholder="Search">
213      </div>
214      <div class="c-header__body">
215        <h1 class="c-title u-text-ghost">Templates</h1>
216  
217        
218        <p class="c-subtitle o-distance-s">Pick one and start right away.</p>
219        
220  
221        
222        
223      </div>
224    </div>
225  </header>
226  
227  
228  <main role="main">
229    
230    <section class="o-container o-distance">
231      <div class="c-notification c-notification--danger">
232    <p><strong>DEPRECATION NOTICE</strong></p>
233    <p>The <code>--template</code> option has been deprecated in v5 and support will be removed in future versions.</p>
234  </div> 
235  
236  
237    </section>
238    
239    <section class="o-container o-distance">
240      <div class="o-grid">
241        
242          <div class="c-box c-box--whisper  o-grid__column--1-1 o-grid__column--large-1-3 ">
243    
244    <h3 class="c-body-title">
245      
246        Vyper Template
247      
248    </h3>
249    
250    <p class="c-box__subtitle u-text-light">Template to demonstrate the use of the Vyper contracts</p>
251    
252    <p class="c-box__footer">
253      <a href="https://github.com/embarklabs/embark-vyper-template" target="_blank" rel="noopener" title="Learn More" class="c-link">Learn More</a>
254    </p>
255    
256  </div>
257  
258  
259        
260          <div class="c-box c-box--whisper  o-grid__column--1-1 o-grid__column--large-1-3 ">
261    
262    <h3 class="c-body-title">
263      
264        Embark Demo React Template
265      
266    </h3>
267    
268    <p class="c-box__subtitle u-text-light">A React Application showcasing Embark's functionality</p>
269    
270    <p class="c-box__footer">
271      <a href="https://framework.embarklabs.io/docs/create_project.html#Creating-a-Demo-Project" title="Learn More" class="c-link">Learn More</a>
272    </p>
273    
274  </div>
275  
276  
277        
278          <div class="c-box c-box--whisper  o-grid__column--1-1 o-grid__column--large-1-3 ">
279    
280    <h3 class="c-body-title">
281      
282        Typescript Template
283      
284    </h3>
285    
286    <p class="c-box__subtitle u-text-light">Template with Typescript support pre-configured</p>
287    
288    <p class="c-box__footer">
289      <a href="https://github.com/embarklabs/embark-typescript-template" target="_blank" rel="noopener" title="Learn More" class="c-link">Learn More</a>
290    </p>
291    
292  </div>
293  
294  
295        
296          <div class="c-box c-box--whisper  o-grid__column--1-1 o-grid__column--large-1-3 ">
297    
298    <h3 class="c-body-title">
299      
300        Vue.js Template
301      
302    </h3>
303    
304    <p class="c-box__subtitle u-text-light">Ready to use Template for using Embark with vue.js</p>
305    
306    <p class="c-box__footer">
307      <a href="https://github.com/embarklabs/embark-vue-template" target="_blank" rel="noopener" title="Learn More" class="c-link">Learn More</a>
308    </p>
309    
310  </div>
311  
312  
313        
314          <div class="c-box c-box--whisper  o-grid__column--1-1 o-grid__column--large-1-3 ">
315    
316    <h3 class="c-body-title">
317      
318        ethvtx Template
319      
320    </h3>
321    
322    <p class="c-box__subtitle u-text-light">Demo app for ethvtx, an Ethereum-Ready & Framework-Agnostic Redux configuration</p>
323    
324    <p class="c-box__footer">
325      <a href="https://github.com/Horyus/ethvtx_embark" target="_blank" rel="noopener" title="Learn More" class="c-link">Learn More</a>
326    </p>
327    
328  </div>
329  
330  
331        
332          <div class="c-box c-box--whisper  o-grid__column--1-1 o-grid__column--large-1-3 ">
333    
334    <h3 class="c-body-title">
335      
336        Bamboo Template
337      
338    </h3>
339    
340    <p class="c-box__subtitle u-text-light">Template to demonstrate use of the Bamboo contracts</p>
341    
342    <p class="c-box__footer">
343      <a href="https://github.com/embarklabs/embark-bamboo-template" target="_blank" rel="noopener" title="Learn More" class="c-link">Learn More</a>
344    </p>
345    
346  </div>
347  
348  
349        
350          <div class="c-box c-box--whisper  o-grid__column--1-1 o-grid__column--large-1-3 ">
351    
352    <h3 class="c-body-title">
353      
354        Solidity Gas Golfing
355      
356    </h3>
357    
358    <p class="c-box__subtitle u-text-light">Boilerplate and tests for the first Solidity Gas Golfing Contest</p>
359    
360    <p class="c-box__footer">
361      <a href="https://github.com/embarklabs/sggc" target="_blank" rel="noopener" title="Learn More" class="c-link">Learn More</a>
362    </p>
363    
364  </div>
365  
366  
367        
368      </div>
369    </section>
370  </main>
371  
372      <footer role="contentinfo" class="c-footer o-distance-xxl">
373    <div class="o-container">
374      <div class="c-footer__top">
375        <p class="c-category-title c-footer__top__title u-text-light">
376          <a href="/" class="c-logo c-logo--negative" title="Embark">Embark</a>
377        </p>
378      </div>
379      <div class="c-footer__body">
380        <div class="o-grid">
381          <div class="o-grid__column--1-1 o-grid__column--medium-1-2 o-grid__column--large-1-5">
382            <p class="c-category-title u-text-light">Resources</p>
383            <ul class="o-list-bare">
384              <li class="o-list-bare__item">
385                <a href="/docs/quick_start.html" class="u-link-ghost" title="Quick Start">Quick Start</a>
386              </li>
387              <li class="o-list-bare__item">
388                <a href="/docs" class="u-link-ghost" title="Documentation">Documentation</a>
389              </li>
390              <li class="o-list-bare__item">
391                <a href="https://blog.embarklabs.io" target="_blank" rel="noopener" class="u-link-ghost" title="Blog">Blog</a>
392              </li>
393              <li class="o-list-bare__item">
394                <a href="/docs/faq.html" class="u-link-ghost" title="FAQ">FAQ</a>
395              </li>
396              <li class="o-list-bare__item">
397                <a href="/docs/troubleshooting.html" class="u-link-ghost" title="Troubleshooting">Troubleshooting</a>
398              </li>
399            </ul>
400          </div>
401          <div class="o-grid__column--1-1 o-grid__column--medium-1-2 o-grid__column--large-1-5">
402            <p class="c-category-title u-text-light">Help</p>
403            <ul class="o-list-bare">
404              <li class="o-list-bare__item">
405                <a href="https://stackoverflow.com/questions/tagged/embark" target="_blank" rel="noopener" class="u-link-ghost" title="Embark Questions">Stack Overflow</a>
406              </li>
407              <li class="o-list-bare__item">
408                <a href="https://gitter.im/embark-framework/Lobby" target="_blank" rel="noopener" class="u-link-ghost" title="Gitter">Gitter</a>
409              </li>
410              <li class="o-list-bare__item">
411                <a href="https://github.com/embarklabs/embark/issues" target="_blank" rel="noopener" class="u-link-ghost" title="Report issues">Report issues</a>
412              </li>
413              <li class="o-list-bare__item">
414                <a href="https://github.com/embarklabs/embark/blob/master/CODE_OF_CONDUCT.md" target="_blank" rel="noopener" class="u-link-ghost" title="Code of Conduct">Code of Conduct</a>
415              </li>
416            </ul>
417          </div>
418          <div class="o-grid__column--1-1 o-grid__column--medium-1-2 o-grid__column--large-1-5">
419            <p class="c-category-title u-text-light">Community</p>
420            <ul class="o-list-bare">
421              <li class="o-list-bare__item">
422                <a href="https://github.com/embarklabs" target="_blank" rel="noopener" class="u-link-ghost" title="Github">Github</a>
423              </li>
424              <li class="o-list-bare__item">
425                <a href="https://twitter.com/EmbarkProject" target="_blank" rel="noopener" class="u-link-ghost" title="Twitter">Twitter</a>
426              </li>
427              <li class="o-list-bare__item">
428                <a href="/docs/contributing.html" class="u-link-ghost" title="Contribute">Contribute</a>
429              </li>
430              <li class="o-list-bare__item">
431                <a href="/community/#team" class="u-link-ghost" title="Team">Team</a>
432              </li>
433            </ul>
434          </div>
435  
436          <div class="o-grid__column--1-1 o-grid__column--medium-1-2 o-grid__column--large-1-4">
437            <p class="c-category-title u-text-light">The Status Network</p>
438            <ul class="o-list-bare two-columns">
439              <li class="o-list-bare__item"><a class="u-link-ghost" href="https://status.im/" target="_blank">Status</a></li>
440              <li class="o-list-bare__item"><a class="u-link-ghost" href="https://keycard.tech/" target="_blank">Keycard</a></li>
441              <li class="o-list-bare__item"><a class="u-link-ghost" href="https://dap.ps/" target="_blank">dap.ps</a></li>
442              <li class="o-list-bare__item"><a class="u-link-ghost" href="https://teller.exchange/" target="_blank">Teller</a></li>
443              <li class="o-list-bare__item"><a class="u-link-ghost" href="https://assemble.fund/" target="_blank">Assemble</a></li>
444              <li class="o-list-bare__item"><a class="u-link-ghost" href="https://subspace.embarklabs.io/" target="_blank">Subspace</a></li>
445              <li class="o-list-bare__item"><a class="u-link-ghost" href="https://vac.dev/" target="_blank">Vac</a></li>
446              <li class="o-list-bare__item"><a class="u-link-ghost" href="https://nimbus.team/" target="_blank">Nimbus</a></li>
447            </ul>
448          </div>
449        </div>
450      </div>
451      <div class="c-footer__bottom">
452        <p class="u-text-light">
453          <a href="https://status.im/privacy-policy.html" title="Privacy Policy" target="_blank" class="u-text-light">Privacy Policy</a>
454          / © 2019-2020 Embark
455        </p>
456      </div>
457    </div>
458  </footer>
459  
460  
461  
462  
463      <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.4/highlight.min.js"></script>
464      <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
465      <script>
466        const EMBARK_DOC_VERSIONS = {
467          'latest': 'https://framework.embarklabs.io/docs','3.2': 'https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/'
468        };
469      </script>
470  
471      
472      <!-- Fathom - simple website analytics - https://github.com/usefathom/fathom -->
473      <script>
474      (function(f, a, t, h, o, m){
475          a[h]=a[h]||function(){(a[h].q=a[h].q||[]).push(arguments)};
476          o=f.createElement('script'),
477          m=f.getElementsByTagName('script')[0];
478          o.async=1; o.src=t; o.id='fathom-script';
479          m.parentNode.insertBefore(o,m)
480      })(document, window, '//fathom.status.im/tracker.js', 'fathom');
481      fathom('set', 'siteId', 'YDUQQ');
482      fathom('trackPageview');
483      </script>
484      <!-- / Fathom -->
485      
486  
487      <script src="/js/index.js"></script>
488  
489      
490      <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
491      <script type="text/javascript">
492        docsearch({
493          apiKey: '439d8dc2add18007a2f31be4a9c0ed70',
494          indexName: 'embark',
495          inputSelector: '#search-input'
496        });
497      </script>
498      
499    </body>
500  </html>
501