Merge branch 'gh-pages'

Conflicts: index.html

Merge branch 'gh-pages'
Conflicts: index.html
e93ddb59 · JC Brand · 156b5660 · d550ca13 · e93ddb59 · e93ddb59
Commit e93ddb59 authored Apr 01, 2013 by JC Brand
10 changed files
--- a/CNAME
+++ b/CNAME
+conversejs.org
--- a/images/bg_hr.png
+++ b/images/bg_hr.png
--- a/images/blacktocat.png
+++ b/images/blacktocat.png
--- a/images/icon_download.png
+++ b/images/icon_download.png
--- a/images/sprite_download.png
+++ b/images/sprite_download.png
--- a/index.html
+++ b/index.html
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Converse.js Demo Page</title>
+    <meta charset='utf-8' />
-    <link rel="stylesheet" href="base.css" type="text/css" media="all">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1" />
-    <link rel="stylesheet" href="converse.css" type="text/css" media="all">
+    <meta name="description" content="Converse.js : Browser-based Instant Messaging with Strophe.js and Backbone.js" />
-    <!-- This is a special version of jQuery with RequireJS built-in -->
+    <link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">
-    <script data-main="main" src="Libraries/require-jquery.js"></script>
+    <title>Converse.js</title>
 </head>
 <body>
-    <article>
+    <!-- HEADER -->
-    <h1>Converse.js</h1>
+    <div id="header_wrap" class="outer">
-    <div>
+        <header class="inner">
-        <p><tt>Converse.js</tt> implements an <a href="http://xmpp.org">XMPP</a> based instant messaging client in the browser.</p>
+          <a id="forkme_banner" href="https://github.com/jcbrand/converse.js">View on GitHub</a>
-        <p>It's used by <a href="http://github.com/collective/collective.xmpp.chat">collective.xmpp.chat</a>, which is a <a href="http://plone.org">Plone</a> instant messaging add-on.</p>
-        <p>The ultimate goal is to enable anyone to add chat functionality to their websites, regardless of the server backend.</p>
+          <h1 id="project_title">Converse.js</h1>
-        <p>Currently this is not yet 100% the case, as the code makes ajax calls to the (Plone) backend to fetch user info.</p>
+          <h2 id="project_tagline">Browser-based Instant Messaging with Strophe.js and Backbone.js</h2>
-        <h2>Features</h2>
-        <ul>
+            <section id="downloads">
-            <li>Manually or automically subscribe to other users.</li>
+              <a class="zip_download_link" href="https://github.com/jcbrand/converse.js/zipball/master">Download this project as a .zip file</a>
-            <li>Accept or decline contact requests</li>
+              <a class="tar_download_link" href="https://github.com/jcbrand/converse.js/tarball/master">Download this project as a tar.gz file</a>
-            <li>Chat status (online, busy, away, offline)</li>
+            </section>
-            <li>Custom status messages</li>
+        </header>
-            <li>Typing notifications</li>
-            <li>Third person messages (/me )</li>
-            <li>Multi-user chat in chatrooms</li>
-            <li>Chatroom Topics</li>
-            <li>vCard support</li>
-        </ul>
-        <p>A screencast of (a very old version of) <tt>Converse.js</tt> in action via <tt>collective.xmpp.chat</tt> 
-            can be seen <a href="http://opkode.com/media/blog/instant-messaging-for-plone-with-javascript-and-xmpp">here</a>.</p>
-        <h2>Dependencies</h2>
-        <p>It depends on quite a few third party libraries, including <a href="http://strophe.im/strophejs">strophe.js</a>,
-        <a href="http:/backbonejs.org">backbone.js</a> and <a href="http:/requirejs.org">require.js</a>.</p>
-        <h2>Licence</h2>
-        <p><tt>Converse.js</tt> is released under both the <a href="http://opensource.org/licenses/mit-license.php">MIT</a> 
-           and <a href="http://opensource.org/licenses/gpl-license.php">GPL</a> licenses.</p>
-        <h2>Download</h2>
-        Head on down to our <a href="https://github.com/jcbrand/converse.js">Github repo</a>.
    </div>
-</article>
-<div id="chatpanel" i18n:domain="collective.xmpp.chat">
+    <!-- MAIN CONTENT -->
-    <div id="collective-xmpp-chat-data"></div>
+    <div id="main_content_wrap" class="outer">
-    <div id="toggle-controlbox">
+      <section id="main_content" class="inner">
-        <a href="#" class="chat" id="toggle-online-users">
+        <p><strong>Converse.js</strong> implements an <a href="http://xmpp.org">XMPP</a> based instant messaging client in the browser.</p>
-            <span i18n:translate="">Online Users</span> (<strong id="online-count">0</strong>)
-        </a>
+<p>It is used by <a href="http://github.com/collective/collective.xmpp.chat">collective.xmpp.chat</a>, which is a <a href="http://plone.org">Plone</a> instant messaging add-on.</p>
-        <span id="connecting-to-chat" i18n:translate="">Connecting to chat ...</span>
+<p>The ultimate goal is to enable anyone to add chat functionality to their websites, regardless of the backend.</p>
+<p>Currently this is not yet the case, as the code makes ajax calls to the (Plone) backend
+to fetch user info. </p>
+<h2>Features</h2>
+<ul>
+    <li>Manually or automically subscribe to other users.</li>
+    <li>Accept or decline contact requests</li>
+    <li>Chat status (online, busy, away, offline)</li>
+    <li>Custom status messages</li>
+    <li>Typing notifications</li>
+    <li>Third person messages (/me )</li>
+    <li>Multi-user chat in chatrooms</li>
+    <li>Chatroom Topics</li>
+    <li>vCard support</li>
+</ul>
+<p>A screencast of <strong>Converse.js</strong> in action via <strong>collective.xmpp.chat</strong> can be seen <a href="http://opkode.com/media/blog/instant-messaging-for-plone-with-javascript-and-xmpp">here</a>.</p>
+<h2>Dependencies</h2>
+<p><strong>Converse.js</strong> depends on a few third party libraries, including: 
+<ul>
+    <li><a href="http://strophe.im/strophejs">strophe.js</a></li>
+    <li><a href="http:/backbonejs.org">backbone.js</a></li>
+    <li><a href="http:/requirejs.org">require.js</a></li>
+</ul>
+</p>
+<h2>Licence</h2>
+<p><strong>Converse.js</strong> is released under both the <a href="http://opensource.org/licenses/mit-license.php">MIT</a> and <a href="http://opensource.org/licenses/gpl-license.php">GPL</a> licenses.</p>
+      </section>
    </div>
-</div>
-</body>
+    <!-- FOOTER  -->
+    <div id="footer_wrap" class="outer">
+      <footer class="inner">
+        <p class="copyright">Converse.js maintained by <a href="https://github.com/jcbrand">jcbrand</a></p>
+        <p>Published with <a href="http://pages.github.com">GitHub Pages</a></p>
+      </footer>
+    </div>
+  </body>
 </html>
--- a/javascripts/main.js
+++ b/javascripts/main.js
+console.log('This would be the main JS file.');
--- a/params.json
+++ b/params.json
+{"name":"Converse.js","tagline":"Browser-based Instant Messaging with Strophe.js and Backbone.js","body":"``Converse.js`` implements an [XMPP](http://xmpp.org) based instant messaging client in the browser.\r\n\r\nIt is used by [collective.xmpp.chat](http://github.com/collective/collective.xmpp.chat), which is a [Plone](http://plone.org) instant messaging add-on.\r\n\r\nThe ultimate goal is to enable anyone to add chat functionality to their websites, regardless of the backend.\r\n\r\nCurrently this is not yet the case, as the code makes ajax calls to the (Plone) backend\r\nto fetch user info. \r\n\r\n--------\r\nFeatures\r\n--------\r\n\r\nIt has the following features:\r\n\r\n* Manually or automically subscribe to other users.\r\n* With manual roster subscriptions, you can accept or decline contact requests.\r\n* Chat statuses (online, busy, away, offline)\r\n* Custom status message\r\n* Typing notifications (i.e when the contact is typing)\r\n* Third person messages (/me )\r\n* Multi-user chat in chatrooms\r\n* Topics can be set for chatrooms\r\n* Full name and profile picture support\r\n\r\nA screencast of ``Converse.js`` in action via ``collective.xmpp.chat`` can be seen [here](http://opkode.com/media/blog/instant-messaging-for-plone-with-javascript-and-xmpp).\r\n\r\nIt depends on quite a few third party libraries, including [strophe.js](http://strophe.im/strophejs),\r\n[backbone.js](http:/backbonejs.org) and [require.js](http:/requirejs.org).\r\n\r\n-------\r\nLicence\r\n-------\r\n\r\n``Converse.js`` is released under both the [MIT](http://opensource.org/licenses/mit-license.php) and [GPL](http://opensource.org/licenses/gpl-license.php) licenses.\r\n","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."}
\ No newline at end of file
--- a/stylesheets/pygment_trac.css
+++ b/stylesheets/pygment_trac.css
+.highlight .hll { background-color: #ffffcc }
+.highlight  { background: #f0f3f3; }
+.highlight .c { color: #0099FF; font-style: italic } /* Comment */
+.highlight .err { color: #AA0000; background-color: #FFAAAA } /* Error */
+.highlight .k { color: #006699; font-weight: bold } /* Keyword */
+.highlight .o { color: #555555 } /* Operator */
+.highlight .cm { color: #0099FF; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #009999 } /* Comment.Preproc */
+.highlight .c1 { color: #0099FF; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #0099FF; font-weight: bold; font-style: italic } /* Comment.Special */
+.highlight .gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #FF0000 } /* Generic.Error */
+.highlight .gh { color: #003300; font-weight: bold } /* Generic.Heading */
+.highlight .gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */
+.highlight .go { color: #AAAAAA } /* Generic.Output */
+.highlight .gp { color: #000099; font-weight: bold } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #003300; font-weight: bold } /* Generic.Subheading */
+.highlight .gt { color: #99CC66 } /* Generic.Traceback */
+.highlight .kc { color: #006699; font-weight: bold } /* Keyword.Constant */
+.highlight .kd { color: #006699; font-weight: bold } /* Keyword.Declaration */
+.highlight .kn { color: #006699; font-weight: bold } /* Keyword.Namespace */
+.highlight .kp { color: #006699 } /* Keyword.Pseudo */
+.highlight .kr { color: #006699; font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #007788; font-weight: bold } /* Keyword.Type */
+.highlight .m { color: #FF6600 } /* Literal.Number */
+.highlight .s { color: #CC3300 } /* Literal.String */
+.highlight .na { color: #330099 } /* Name.Attribute */
+.highlight .nb { color: #336666 } /* Name.Builtin */
+.highlight .nc { color: #00AA88; font-weight: bold } /* Name.Class */
+.highlight .no { color: #336600 } /* Name.Constant */
+.highlight .nd { color: #9999FF } /* Name.Decorator */
+.highlight .ni { color: #999999; font-weight: bold } /* Name.Entity */
+.highlight .ne { color: #CC0000; font-weight: bold } /* Name.Exception */
+.highlight .nf { color: #CC00FF } /* Name.Function */
+.highlight .nl { color: #9999FF } /* Name.Label */
+.highlight .nn { color: #00CCFF; font-weight: bold } /* Name.Namespace */
+.highlight .nt { color: #330099; font-weight: bold } /* Name.Tag */
+.highlight .nv { color: #003333 } /* Name.Variable */
+.highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .mf { color: #FF6600 } /* Literal.Number.Float */
+.highlight .mh { color: #FF6600 } /* Literal.Number.Hex */
+.highlight .mi { color: #FF6600 } /* Literal.Number.Integer */
+.highlight .mo { color: #FF6600 } /* Literal.Number.Oct */
+.highlight .sb { color: #CC3300 } /* Literal.String.Backtick */
+.highlight .sc { color: #CC3300 } /* Literal.String.Char */
+.highlight .sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */
+.highlight .s2 { color: #CC3300 } /* Literal.String.Double */
+.highlight .se { color: #CC3300; font-weight: bold } /* Literal.String.Escape */
+.highlight .sh { color: #CC3300 } /* Literal.String.Heredoc */
+.highlight .si { color: #AA0000 } /* Literal.String.Interpol */
+.highlight .sx { color: #CC3300 } /* Literal.String.Other */
+.highlight .sr { color: #33AAAA } /* Literal.String.Regex */
+.highlight .s1 { color: #CC3300 } /* Literal.String.Single */
+.highlight .ss { color: #FFCC33 } /* Literal.String.Symbol */
+.highlight .bp { color: #336666 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #003333 } /* Name.Variable.Class */
+.highlight .vg { color: #003333 } /* Name.Variable.Global */
+.highlight .vi { color: #003333 } /* Name.Variable.Instance */
+.highlight .il { color: #FF6600 } /* Literal.Number.Integer.Long */
+.type-csharp .highlight .k { color: #0000FF }
+.type-csharp .highlight .kt { color: #0000FF }
+.type-csharp .highlight .nf { color: #000000; font-weight: normal }
+.type-csharp .highlight .nc { color: #2B91AF }
+.type-csharp .highlight .nn { color: #000000 }
+.type-csharp .highlight .s { color: #A31515 }
+.type-csharp .highlight .sc { color: #A31515 }
--- a/stylesheets/stylesheet.css
+++ b/stylesheets/stylesheet.css
+/*******************************************************************************
+Slate Theme for GitHub Pages
+by Jason Costello, @jsncostello
+*******************************************************************************/
+@import url(pygment_trac.css);
+/*******************************************************************************
+MeyerWeb Reset
+*******************************************************************************/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+a:focus {
+  outline: none;
+}
+/*******************************************************************************
+Theme Styles
+*******************************************************************************/
+body {
+  box-sizing: border-box;
+  color:#373737;
+  font-size: 16px;
+  font-family: 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  background: url('../images/bg.png');
+}
+h1, h2, h3, h4, h5, h6 {
+  margin: 10px 0;
+  font-weight: 700;
+  color:#222222;
+  font-family: 'Lucida Grande', 'Calibri', Helvetica, Arial, sans-serif;
+  letter-spacing: -1px;
+}
+h1 {
+  font-size: 36px;
+  font-weight: 700;
+}
+h2 {
+  padding-bottom: 10px;
+  font-size: 32px;
+}
+h3 {
+  font-size: 24px;
+}
+h4 {
+  font-size: 21px;
+}
+h5 {
+  font-size: 18px;
+}
+h6 {
+  font-size: 16px;
+}
+p {
+  margin: 10px 0 15px 0;
+}
+footer p {
+  color: #f2f2f2;
+}
+a {
+  text-decoration: none;
+  color: #007edf;
+  text-shadow: none;
+  transition: color 0.5s ease;
+  transition: text-shadow 0.5s ease;
+  -webkit-transition: color 0.5s ease;
+  -webkit-transition: text-shadow 0.5s ease;
+  -moz-transition: color 0.5s ease;
+  -moz-transition: text-shadow 0.5s ease;
+  -o-transition: color 0.5s ease;
+  -o-transition: text-shadow 0.5s ease;
+  -ms-transition: color 0.5s ease;
+  -ms-transition: text-shadow 0.5s ease;
+}
+#main_content a:hover {
+  color: #0069ba;
+  text-shadow: #0090ff 0px 0px 2px;
+}
+footer a:hover {
+  color: #43adff;
+  text-shadow: #0090ff 0px 0px 2px;
+}
+em {
+  font-style: italic;
+}
+strong {
+  font-weight: bold;
+}
+img {
+  position: relative;
+  margin: 0 auto;
+  max-width: 739px;
+  padding: 5px;
+  margin: 10px 0 10px 0;
+  border: 1px solid #ebebeb;
+  box-shadow: 0 0 5px #ebebeb;
+  -webkit-box-shadow: 0 0 5px #ebebeb;
+  -moz-box-shadow: 0 0 5px #ebebeb;
+  -o-box-shadow: 0 0 5px #ebebeb;
+  -ms-box-shadow: 0 0 5px #ebebeb;
+}
+pre, code {
+  width: 100%;
+  color: #222;
+  background-color: #fff;
+  font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
+  font-size: 14px;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+}
+pre {
+  width: 100%;
+  padding: 10px;
+  box-shadow: 0 0 10px rgba(0,0,0,.1);
+  overflow: auto;
+}
+code {
+  padding: 3px;
+  margin: 0 3px;
+  box-shadow: 0 0 10px rgba(0,0,0,.1);
+}
+pre code {
+  display: block;
+  box-shadow: none;
+}
+blockquote {
+  color: #666;
+  margin-bottom: 20px;
+  padding: 0 0 0 20px;
+  border-left: 3px solid #bbb;
+}
+ul, ol, dl {
+  margin-bottom: 15px
+}
+ul li {
+  list-style: inside;
+  padding-left: 20px;
+}
+ol li {
+  list-style: decimal inside;
+  padding-left: 20px;
+}
+dl dt {
+  font-weight: bold;
+}
+dl dd {
+  padding-left: 20px;
+  font-style: italic;
+}
+dl p {
+  padding-left: 20px;
+  font-style: italic;
+}
+hr {
+  height: 1px;
+  margin-bottom: 5px;
+  border: none;
+  background: url('../images/bg_hr.png') repeat-x center;
+}
+table {
+  border: 1px solid #373737;
+  margin-bottom: 20px;
+  text-align: left;
+ }
+th {
+  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  padding: 10px;
+  background: #373737;
+  color: #fff;
+ }
+td {
+  padding: 10px;
+  border: 1px solid #373737;
+ }
+form {
+  background: #f2f2f2;
+  padding: 20px;
+}
+img {
+  width: 100%;
+  max-width: 100%;
+}
+/*******************************************************************************
+Full-Width Styles
+*******************************************************************************/
+.outer {
+  width: 100%;
+}
+.inner {
+  position: relative;
+  max-width: 640px;
+  padding: 20px 10px;
+  margin: 0 auto;
+}
+#forkme_banner {
+  display: block;
+  position: absolute;
+  top:0;
+  right: 10px;
+  z-index: 10;
+  padding: 10px 50px 10px 10px;
+  color: #fff;
+  background: url('../images/blacktocat.png') #0090ff no-repeat 95% 50%;
+  font-weight: 700;
+  box-shadow: 0 0 10px rgba(0,0,0,.5);
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
+#header_wrap {
+  background: #212121;
+  background: -moz-linear-gradient(top, #373737, #212121);
+  background: -webkit-linear-gradient(top, #373737, #212121);
+  background: -ms-linear-gradient(top, #373737, #212121);
+  background: -o-linear-gradient(top, #373737, #212121);
+  background: linear-gradient(top, #373737, #212121);
+}
+#header_wrap .inner {
+  padding: 50px 10px 30px 10px;
+}
+#project_title {
+  margin: 0;
+  color: #fff;
+  font-size: 42px;
+  font-weight: 700;
+  text-shadow: #111 0px 0px 10px;
+}
+#project_tagline {
+  color: #fff;
+  font-size: 24px;
+  font-weight: 300;
+  background: none;
+  text-shadow: #111 0px 0px 10px;
+}
+#downloads {
+  position: absolute;
+  width: 210px;
+  z-index: 10;
+  bottom: -40px;
+  right: 0;
+  height: 70px;
+  background: url('../images/icon_download.png') no-repeat 0% 90%;
+}
+.zip_download_link {
+  display: block;
+  float: right;
+  width: 90px;
+  height:70px;
+  text-indent: -5000px;
+  overflow: hidden;
+  background: url(../images/sprite_download.png) no-repeat bottom left;
+}
+.tar_download_link {
+  display: block;
+  float: right;
+  width: 90px;
+  height:70px;
+  text-indent: -5000px;
+  overflow: hidden;
+  background: url(../images/sprite_download.png) no-repeat bottom right;
+  margin-left: 10px;
+}
+.zip_download_link:hover {
+  background: url(../images/sprite_download.png) no-repeat top left;
+}
+.tar_download_link:hover {
+  background: url(../images/sprite_download.png) no-repeat top right;
+}
+#main_content_wrap {
+  border-top: 1px solid #111;
+  border-bottom: 1px solid #111;
+}
+#main_content {
+  padding-top: 40px;
+}
+#footer_wrap {
+  background: #212121;
+}
+/*******************************************************************************
+Small Device Styles
+*******************************************************************************/
+@media screen and (max-width: 480px) {
+  body {
+    font-size:14px;
+  }
+  #downloads {
+    display: none;
+  }
+  .inner {
+    min-width: 320px;
+    max-width: 480px;
+  }
+  #project_title {
+  font-size: 32px;
+  }
+  h1 {
+    font-size: 28px;
+  }
+  h2 {
+    font-size: 24px;
+  }
+  h3 {
+    font-size: 21px;
+  }
+  h4 {
+    font-size: 18px;
+  }
+  h5 {
+    font-size: 14px;
+  }
+  h6 {
+    font-size: 12px;
+  }
+  code, pre {
+    min-width: 320px;
+    max-width: 480px;
+    font-size: 11px;
+  }
+}