Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New site #137

Merged
merged 6 commits into from
Jul 8, 2015
Merged

New site #137

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
efdce82
revamping the site. Some polish still left to do
ekryski Jul 6, 2015
92005d2
finished up the home page
ekryski Jul 7, 2015
13cc381
some copy changes
ekryski Jul 7, 2015
271a73b
fixing the docs and code styles
ekryski Jul 7, 2015
a51d017
some better syntax highlighting
ekryski Jul 7, 2015
1c10800
adding the real-time todos example
ekryski Jul 8, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Gruntfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ module.exports = function (grunt) {
yuicompress: true
},
files: {
"css/feathers.min.css": "_less/main.less"
"css/feathers.min.css": "_less/feathers.less"
}
}
},
Expand Down
77 changes: 33 additions & 44 deletions _layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,62 +4,51 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="/ico/favicon.png">
<meta name="description" content="Feathers - Real-time microservice framework built on Express">
<meta name="author" content="David Luecke">
<meta name="author" content="Eric Kryski">
<link rel="shortcut icon" href="/images/favicon.png">

<title>{{ site.title }}{% if page.title %} - {{ page.title }}{% endif %}</title>
<link href='//fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>
<link href="{{ '/css/feathers.min.css' | prepend: site.baseurl }}" rel="stylesheet">
<link href="{{ '/css/fontello.css' | prepend: site.baseurl }}" rel="stylesheet">
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
</head>
<body data-spy="scroll" data-offset="100">
<div class="navbar-wrapper">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-feather"></span>
</button>
<a class="navbar-brand" href="/">
<img src="/images/logo-small.png" alt="Feathers logo small" />
</a>
</div>
<div class="navbar-collapse collapse pull-right">
<ul class="nav navbar-nav">
<li>
<a class="page-link" href="{{ '/' | prepend: site.baseurl }}">Home</a>
</li>
{% for weight in (1..10) %}
{% for p in site.pages %}
{% if p.weight == weight %}
<li>
<a class="page-link {% if p.url == page.url %}active{% endif %}" href="{{ p.url | prepend: site.baseurl}}#{{p.anchor}}">
{{ p.title }}
</a>
</li>
<nav>
<div class="navbar container">
<ul class="inline-list thin">
{% for weight in (1..5) %}
{% for p in site.pages %}
{% if p.weight == weight %}
<li>
{% if p.title == 'Home' %}
<a class="logo" href="{{ '/' | prepend: site.baseurl }}">
<img src="/images/logo.png" alt="Feathers Logo">
</a>
{% else %}
<a class="{% if p.url == page.url %}normal{% endif %}" href="{{ p.url | prepend: site.baseurl}}#{{p.anchor}}">
{{ p.title }}
</a>
{% endif %}
{% endfor %}
{% endfor %}
<li>
<a class="page-link" target="_blank" href="https://github.com/feathersjs/feathers">
<strong>Github</strong>
</a>
</li>
</ul>
</div>
</div>
</li>
{% endif %}
{% endfor %}
{% endfor %}
</ul>
</div>
</div>
</nav>

<div class="content">{{content}}</div>

<footer>
<div class="row">
<p>&copy; 2014 Feathers. Another project made with <i class="icon-heart"></i> by
<a href="http://twitter.com/daffl" title="David Luecke" target="_blank">@daffl</a> and
<a href="http://twitter.com/ekryski" title="Eric Kryski" target="_blank">@ekryski</a>.
</p>
<div class="container">
<div class="row center-text">
<p>&copy; 2015 Feathers. Another project made with <i class="fa fa-heart"></i> + <i class="fa fa-beer"></i> by
<a class="primary normal" href="http://twitter.com/daffl" title="David Luecke" target="_blank">@daffl</a> and
<a class="primary normal" href="http://twitter.com/ekryski" title="Eric Kryski" target="_blank">@ekryski</a>.
</p>
</div>
</div>
</footer>

Expand Down
257 changes: 199 additions & 58 deletions _layouts/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,82 +3,223 @@
---

<section id="hero">
<div class="container center-text">
<div class="row clear">
<div class="col col-10 push-1 mobile-full">
<h1 class="logo heavy">Feathers</h1>
<h2 class="thin">Build Better APIs, Faster Than Ever</h2>
</div>
</div>
<div class="row badges">
<p>
<a href="https://npmjs.org/package/feathers" title="Package status" target="_blank"><img src="https://badge.fury.io/js/feathers.png"/></a>
<a href="https://david-dm.org/feathersjs/feathers" target="_blank" title="Dependency status"><img src="https://david-dm.org/feathersjs/feathers.png"/></a>
<a href="https://travis-ci.org/feathersjs/feathers" target="_blank"><img src="https://travis-ci.org/feathersjs/feathers.png?branch=master" alt="Build status" /></a>
</p>
</div>
<div class="row github-links">
<p>
<iframe src="http://ghbtns.com/github-btn.html?user=feathersjs&repo=feathers&type=watch&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
<iframe src="http://ghbtns.com/github-btn.html?user=feathersjs&repo=feathers&type=fork&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
</p>
</div>
<div class="row clear">
<div class="col col-4 push-4 mobile-full">
<a class="button primary-button block normal" href="/quick-start" title="Get Started">Get Started</a>
</div>
</div>
</div>
</section>

<hr>

<section id="ship">
<div class="container">
<div class="row">
<div class="col-md-6 with-separator">
<div class="row text-center">
<img src="images/logo.png" alt="Feathers logo" />
<h1 class="tagline">Let your applications fly!</h1>
</div>
</div>
<div class="col-md-6">
<p class="description">
Feathers is a library that extends <a href="http://expressjs.com" target="_blank">Express</a> - one of the most popular web frameworks for <a href="http://nodejs.org" target="_blank">NodeJS</a> - with the ability to easily create shared RESTful web services and real-time APIs using <a href="http://socket.io" target="_blank">SocketIO</a> and other websocket libraries.
<!-- <div class="row">
<h1 class="center-text">Ship Better Code, Faster Than Ever</h1>
</div> -->
<div class="row clear">
<div class="col col-6 mobile-full">
<h3>Feathers is built for developers that need to ship maintainable code, <span class="normal">fast</span>.</h3>
<p>
With our light-weight code base and rich plug-in ecosystem you can get prototypes out in a matter of minutes and production ready in days. Seriously.
</p>
<p>
How is that even possible? We believe that less is more. So we built a razor thin wrapper (a few hundred lines of code) over top of <a class="primary normal" href="http://expressjs.com/" target="_blank" title="Express">Express</a> and <a class="primary normal" href="http://socket.io/" target="_blank" title="Socket.io">Socket.io</a>, the defacto technologies for building real-time web applications using NodeJS.
</p>
<p>
At its core Feathers is a real-time, micro-service web framework that gives you control over your data via RESTful resources, sockets and flexible plug-ins.
</p>
<div class="row badges text-center">
<p>
<a href="https://npmjs.org/package/feathers" title="Package status" target="_blank"><img src="https://badge.fury.io/js/feathers.png"/></a>
<a href="https://david-dm.org/feathersjs/feathers" target="_blank" title="Dependency status"><img src="https://david-dm.org/feathersjs/feathers.png"/></a>
<a href="https://travis-ci.org/feathersjs/feathers" target="_blank"><img src="https://travis-ci.org/feathersjs/feathers.png?branch=master" alt="Build status" /></a>
</p>
</div>
<div class="row github-links text-center">
<p>
<iframe src="http://ghbtns.com/github-btn.html?user=feathersjs&repo=feathers&type=watch&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
<iframe src="http://ghbtns.com/github-btn.html?user=feathersjs&repo=feathers&type=fork&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
</p>
</div>
</div>
<div class="col col-6 mobile-full">
<img src="/images/ship-it.png" alt="Ship It" class="ship-it block">
</div>
</div>
</div>
</section>

<section id="example" class="example">
<section id="plugins">
<div class="container">
<h2 class="page-header">Real-time Todos</h2>

<p>
In the tradition of <a href="http://todomvc.com/" title="TODO MVC" target="_blank">TodoMVC</a> the below example shows a real-time Todo application with Feathers and an in-memory Todo service on the server and a jQuery HTML page for the browser. To get up and running with this example <a href="https://gist.github.com/daffl/6665992/download">download the Gist</a>, unpack and in the new folder run
<blockquote><pre>npm install feathers feathers-memory body-parser<br>node app.js</pre></blockquote>
Then go to <a href="http://localhost:8080" target="_blank">http://localhost:8080</a>. The REST API will be available at <a href="localhost:8080/todos" target="_blank">localhost:8080/todos</a> (check out the example application endpoint <a href="http://todos.feathersjs.com/todos" target="_blank">here</a>). <br>Next, read up on the <a href="#guide">Feathers guide</a>.
</p>
<hr>
<div class="row center-text">
<h2 class="strong center-text">Feathers Plays Nicely With Your Favorite Stack</h2>
<h4 class="thin">We have plug-ins or guides for the most popular clients.</h4>
<p>
Not seeing yours? <a class="primary normal" href="#">We <i class="fa fa-heart"></i> pull requests</a>
</p>
</div>
<div class="row clear">
<ul class="inline-list center-text">
<li>
<a href="#" title="React">
<img src="/images/react.svg" alt="React">
</a>
</li>
<li>
<a href="#" title="Angular">
<img src="/images/angular.svg" alt="Angular">
</a>
</li>
<li>
<a href="#" title="jQuery">
<img src="/images/jquery.svg" alt="jQuery">
</a>
</li>
<li>
<a href="#" title="CanJS">
<img src="/images/canjs.svg" alt="CanJS">
</a>
</li>
<li>
<a href="#" title="iOS">
<img src="/images/apple.svg" alt="iOS">
</a>
</li>
<li>
<a href="#" title="Android">
<img src="/images/android.svg" alt="Android">
</a>
</li>
</ul>
</div>
</div>
</section>

<section id="features">
<div class="container">
<div class="row">
<div class="col-md-6">
<div id="todo-example">
<ul class="todos list-unstyled"></ul>
<form role="form" class="create-todo">
<div class="form-group">
<input type="text" class="form-control" name="description" placeholder="Add a new Todo">
</div>
<button type="submit" class="btn btn-primary col-xs-12">Add Todo</button>
</form>
</div>
</div>
<div class="col-md-6">
<div class="row">
<ul class="nav nav-pills options example" id="realtime-todos">
<li><a href="#" title="Todo Feathers Server">Server</a></li>
<li><a href="#" title="Real-time Todo web page">Client</a></li>
</ul>
<script src="https://gist.github.com/daffl/6665992.js"></script>
</div>
<h3 class="thin center-text">Here are just a few reasons why Feathers is quickly becoming the toolbox of choice for modern web applications.</h3>
</div>
<div class="row clear">
<div class="col col-3 mobile-full">
<h4 class="normal">Battle Tested Core</h4>
<p>Feathers is a <a href="https://github.com/feathersjs/feathers" class="primary" target="_blank">very thin wrapper</a> over top of Express and Socket.io, both of which have been used in production by thousands of companies.</p>
</div>
<div class="col col-3 mobile-full">
<h4 class="normal">Uber Flexible</h4>
<p>Our <a href="https://www.npmjs.com/search?q=feathers-plugin" class="primary" target="_blank">plug-ins</a> are extremely flexible. Giving you only what you need and then getting out of your way.</p>
</div>
<div class="col col-3 mobile-full">
<h4 class="normal">Scaffold Real-time API's</h4>
<p>Instantly scaffold services from the command line, providing you with full CRUD via REST and websockets in just a few key strokes.</p>
</div>
<div class="col col-3 mobile-full">
<h4 class="normal">Zero Lock In</h4>
<p>Feathers is totally open source, works with any Express middleware and node module out of the box, and can be easily removed if it's not for you.</p>
</div>
</div>
<div class="row clear">
<div class="col col-3 mobile-full">
<h4 class="normal">Minimal Configuration</h4>
<p>Tired of massive JSON or YAML files? No need for that here! We value convention over configuration so you can spend more time writing code.</p>
</div>
<div class="col col-3 mobile-full">
<h4 class="normal">Multi-Database</h4>
<p>We support MongoDB, Postgres, and MySQL out of the box. If that's not for you, you can easily <a href="#" class="primary" target="_blank">write your own service adapters</a>.</p>
</div>
<div class="col col-3 mobile-full">
<h4 class="normal">Front End Agnostic</h4>
<p>Use whatever client you want; Angular, React, Swift/ObjC, Android, it doesn't matter. We only provide some <a href="#" class="primary" target="_blank">helpful guides</a> and <a href="https://www.npmjs.com/search?q=feathers-plugin" class="primary" target="_blank">plug-ins</a> to make things easier.</p>
</div>
<div class="col col-3 mobile-full">
<h4 class="normal">Pure JavaScript</h4>
<p>Because Feathers is 100% vanilla JavaScript on the backend, you get to use the same language all the way through your web stack.</p>
</div>
</div>
<div class="row clear">
<div class="col col-4 push-4 mobile-full">
<a class="button transparent-button block normal" href="/learn" title="Features Explained">Tell Me More</a>
</div>
</div>
</div>
</section>

<section class="page" id="guide">
<section id="comparison">
<div class="container">
<div class="row">
<div class="col-md-3">
<div id="toc"></div>
<h1 class="strong center-text">See How Feathers Is Different</h1>
</div>
<div class="row clear">
<div class="col col-6 mobile-full">
<h3>Feathers vs Meteor</h3>
<h5 class="italic">"Once you go Meteor, you don't go back. And not in a good way."</h5>
<p>
Meteor has amassed a large community and a lot of venture backed funding. Our biggest complaint is that because of this funding, there is some <span class="bold">serious lock in</span>. Meteor has it's own package system, how you use npm modules can be inconsistent, and there really is a lot of code for what it is doing. There is also the risk that when investors start pushing for a return on their investment, it could negatively impact the community.
</p>
<p>
From a feature standpoint Feathers is pretty similar to Meteor. You get real-time API's from both. However, we let you use the defacto npm for managing dependencies, we let you choose whether you want to use Webpack, Gulp, Grunt, or any other tool for managing assets, and Feathers is completely client agnostic without any additional overhead. Everything is open, flexible and pluggable. You use only what you need.
</p>
<!-- <a class="button primary-button normal" href="#" title="Feathers vs. Meteor" target="_blank">Read More</a> -->
</div>
<div class="col col-6 no-mobile">
<img src="/images/feathers-vs-meteor.png" alt="Feathers vs Meteor" class="comparison block">
</div>
<div class="col-md-9 page-content">
{{ content }}
</div>
<div class="row clear">
<div class="col col-6 mobile-full">
<h3>Feathers vs Sails</h3>
<h5 class="italic">"If you love JSON config files, Sails is for you."</h5>
<p>
From a feature standpoint Feathers and Sails are probably the closest. Both provide real-time REST API's, multiple db support, and are client agnostic.
</p>
<p>
However Feathers achieves this with MUCH less code, which means less stuff to break. We also don't assume how you want to manage your assets by letting you use your build tool of choice. Feathers provides lightweight services and hooks instead of a bulky ORM, and we let you write code instead of long config files to define relationships and security policies.
</p>
<!-- <a class="button primary-button normal" href="#" title="Feathers vs. Sails" target="_blank">Read More</a> -->
</div>
<div class="col col-6 no-mobile">
<img src="/images/feathers-vs-sails.png" alt="Feathers vs Sails" class="comparison block">
</div>
</div>
<div class="row clear">
<div class="col col-6 mobile-full">
<h3>Feathers vs Express</h3>
<h5 class="italic">"I like Express because I love flexibility and boilerplate!"</h5>
<p>
Express is awesome! It does much of the heavy lifting behind Feathers; routing, content-negotiation, middleware support, etc. However, you still need to implement a lot yourself.
</p>
<p>
Feathers eliminates a lot of the common boilerplate and gives you helpful plug-ins to make implementing common features easily, while also providing some convention. This includes stuff like managing permissions, CRUD for multiple databases, and real-time APIs using web sockets. We give you just enough to build your web app quickly but get out of your way when you need to customize something.
</p>
<!-- <a class="button primary-button normal" href="#" title="Feathers vs. Express" target="_blank">Read More</a> -->
</div>
<div class="col col-6 no-mobile">
<img src="/images/feathers-vs-express.png" alt="Feathers vs Express" class="comparison block">
</div>
</div>
</div>
</section>
<hr>
<section id="cta">
<div class="container">
<div class="row center-text">
<h1 class="strong">Alright, Take My Money</h1>
<h3>No need! Feathers is MIT licensed and totally FREE.</h3>
</div>
<div class="row clear">
<div class="col col-4 push-4 mobile-full">
<a class="button primary-button block normal" href="/quick-start" title="Get Started">Get Started</a>
</div>
</div>
</div>
Expand Down
Loading