website/source/about.html.erb at a1514226d81c1a28e9eb90742e9bdaf4c2f2f01f · iezer/website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
---
title: "A framework for creating ambitious web applications."
---

<% content_for :foot do %>
  <script type="text/javascript">
    $(function() {
      $('#slider').bxSlider({
        displaySlideQty: 4,
        moveSlideQty: 4,
        auto: true,
        pager: true,
        speed: 700,
        pause: 5000
      });

      // Hack to force proper sizing
      $('.bx-wrapper, .bx-window').css('width', 940);
    });
  </script>
  <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
  <%= javascript_include_tag 'app/about/inline-examples', defer: true %>
<% end %>

<% content_for :outside_wrapper do %>
  <a href="http://jobs.emberjs.com" class="job-board-banner" >Post and find jobs on the Ember job board</a>
<% end %>

<h1 class="about-header-text">
  A framework for creating ambitious web applications.
</h1>

<div class="call-to-action">
  <div class="top">
    <h1>Get Started</h1>
    <div class="cta-copy">
      <p>Build your first Ember application with our 5 minute tutorial.</p>
    </div>

    <a href="https://guides.emberjs.com/<%= current_version %>/getting-started/quick-start/">View Quick Start guide</a>
  </div>
  <div class="bottom">
    <p>$ yarn global add ember-cli</p>
    <p>$ ember new ember-quickstart</p>
  </div>
</div>

<div class="features section">
  <h2>More Productive Out of the Box.</h2>
  <div class="feature">
    <div class="handlebars"></div>
    <p>Write dramatically less code with Ember's Handlebars integrated templates that update automatically when the underlying data changes.
  </div>
  <div class="feature">
    <div class="structure"></div>
    <p>Don't waste time making trivial choices. Ember.js incorporates common idioms so you can focus on what makes your app special, not reinventing the wheel.</p>
  </div>
  <div class="feature">
    <div class="productivity"></div>
    <p>Ember.js is built for productivity. Designed with developer ergonomics in mind, its friendly APIs help you get your job done&mdash;fast.</p>
  </div>
</div>

<div class="getting-started section">
  <script type="text/x-handlebars" id="application">
      <div class="example-tabs">
        {{#each model as |item|}}
          {{tab-item item=item selectedTab=selectedTab selectTab='selectTab'}}
        {{/each}}
        <span class="tabs-footer"></span>
      </div>
      {{syntax-highlight selectedTab.contents}}
      <div class="example-arrow"></div>
  </script>
  <script type="text/x-handlebars" data-template-name="components/tab-item">
    <a class="{{if isSelected 'active'}}" href="#">{{unbound item.name}}</a>
  </script>

  <div class="example-app" data-name="binding" data-files="templates/application.hbs">
    <h2 class="sub">Auto-Updating Handlebars Templates</h2>
    <p class="prose">Ember makes Handlebars templates even better, by ensuring your HTML
    stays up-to-date when the underlying model changes. To get started, you
    don't even need to write any JavaScript.</p>
  </div>

  <div class="example-app" data-name="components" data-files="components/gravatar-image.js templates/application.hbs templates/components/gravatar-image.hbs">
    <h2 class="sub">Components</h2>
    <p class="prose">Experience the future of the web platform today with Ember's components.
    Components allow you to create your own application-specific HTML tags,
    using Handlebars to describe their markup and JavaScript to implement
    custom behavior.</p>
  </div>

  <div class="example-app example-loading" data-name="loading" data-files="app.js templates/application.hbs">
    <h2 class="sub">Loading Data from a Server</h2>
    <p class="prose">
      Ember.js eliminates the boilerplate of displaying JSON retrieved
      from your server. If you know how to use jQuery, you know how to
      fetch models in Ember.
    </p>
  </div>

  <div id="routing-example" class="example-app" data-name="routing" data-files="app.js templates/application.hbs templates/index.hbs templates/mail.hbs templates/mailbox.hbs templates/mailbox/index.hbs fixtures.js">
    <h2 class="sub">Routing</h2>
    <p class="prose">Build JavaScript apps that don't break the web!
    Ember.js makes it downright simple to create sophisticated,
    multi-page JavaScript applications with great URL support, in a
    fraction of the code you'd write in other frameworks.</p>
  </div>
</div>

<div class="users section">
  <h2>Who's Using Ember.js?</h2>

  <div class="surround">
    <ul id="slider">
    <% data.users.slice(0,12).each do |user| %>
      <li class="user">
        <a href="<%= user.url %>" rel="nofollow">
          <img src="/images/about/<%= user.image %>" width="210" height="103" />
        </a>
      </li>
    <% end %>
    </ul>
  </div>

  <div class="listed">
    <a class="orange button" href="/ember-users">
        Meet More Users
    </a>
  </div>
</div>

<div class="gears section">
	<h2>Buy Ember.js Gear and Support Development</h2>
	<div class="gear">
		<a href="http://devswag.com/products/ember-sticker">
			<img src="/images/about/ember-sticker.png" width="160" height="120">
		</a>
		<div class="gearplus">
			<img src="/images/about/plus-icon.png" width="20" height="21">
		</div>
		<a href="http://devswag.com/products/ember-js-tshirt">
			<img src="/images/about/ember-shirt.png" width="160" height="120">
		</a>
		<div class="gearplus">
			<img src="/images/about/plus-icon.png" width="20" height="21">
		</div>
		<a href="http://devswag.com/products/ember-mascot-stickers-4">
			<img src="/images/about/ember-hamster-sticker.png" width="160" height="120">
		</a>
    <div class="gearplus">
      <img src="/images/about/plus-icon.png" width="20" height="21">
    </div>
    <a href="http://devswag.com/products/ember-mascot-tomster">
      <img src="/images/about/ember-tomster-plush-2.png" width="160" height="120">
    </a>
	</div>
</div>

<div class="users section donate">
  <div class="listed">
    <a class="orange button" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QRRZTQ5GM7PSY">
        Donate to the Project
    </a>
  </div>
</div>