Updated website and added new logo

Compiler/Compiler.csproj

@@ -55,6 +55,9 @@
     <PlatformTarget>x86</PlatformTarget>
     <ErrorReport>prompt</ErrorReport>
   </PropertyGroup>
+  <PropertyGroup>
+    <ApplicationIcon>jsil.ico</ApplicationIcon>
+  </PropertyGroup>
   <ItemGroup>
     <Reference Include="System" />
     <Reference Include="System.Core" />
@@ -78,6 +81,9 @@
       <Name>Mono.Cecil</Name>
     </ProjectReference>
   </ItemGroup>
+  <ItemGroup>
+    <Content Include="jsil.ico" />
+  </ItemGroup>
   <Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />
   <PropertyGroup>
     <PostBuildEvent>copy $(SolutionDir)\Upstream\Spidermonkey\*.* $(OutDir)</PostBuildEvent>

JSIL/JSIL.csproj

@@ -51,6 +51,9 @@
     <CodeAnalysisIgnoreBuiltInRuleSets>false</CodeAnalysisIgnoreBuiltInRuleSets>
     <CodeAnalysisIgnoreBuiltInRules>false</CodeAnalysisIgnoreBuiltInRules>
   </PropertyGroup>
+  <PropertyGroup>
+    <ApplicationIcon>jsil.ico</ApplicationIcon>
+  </PropertyGroup>
   <ItemGroup>
     <Reference Include="System" />
     <Reference Include="System.Core" />
@@ -142,6 +145,7 @@
     <Content Include="..\Libraries\JSIL.XNACore.js">
       <Link>JS Libraries\JSIL.XNACore.js</Link>
     </Content>
+    <Content Include="jsil.ico" />
   </ItemGroup>
   <Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />
   <!-- To modify your build process, add your task inside one of the targets below and uncomment it. 

Meta/Meta.csproj

@@ -31,6 +31,9 @@
     <ErrorReport>prompt</ErrorReport>
     <WarningLevel>4</WarningLevel>
   </PropertyGroup>
+  <PropertyGroup>
+    <ApplicationIcon>jsil.ico</ApplicationIcon>
+  </PropertyGroup>
   <ItemGroup>
     <Reference Include="System" />
     <Reference Include="System.Core" />
@@ -46,6 +49,9 @@
     <Compile Include="Proxies.cs" />
     <Compile Include="Verbatim.cs" />
   </ItemGroup>
+  <ItemGroup>
+    <Content Include="jsil.ico" />
+  </ItemGroup>
   <Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />
   <!-- To modify your build process, add your task inside one of the targets below and uncomment it. 
        Other similar extension points exist, see Microsoft.Common.targets.

README.md

@@ -1,15 +1,15 @@
-JSIL
+![JSIL logo](http://jsil.org/images/jsil_48px.png) JSIL
 ====
 
-JSIL is an open source C# to JavaScript compiler, written in native C#.  
+JSIL is a compiler that transforms .NET applications and libraries from their native executable format - CIL bytecode - into standards-compliant, cross-browser JavaScript. You can take this JavaScript and run it in a web browser or any other modern JavaScript runtime. Unlike other cross-compiler tools targeting JavaScript, JSIL produces readable, easy-to-debug JavaScript that resembles the code a developer might write by hand, while still maintaining the behavior and structure of the original .NET code.
 
-[Click here](http://hildr.luminance.org/Platformer/Platformer.html) to play an XNA game in your browser!
+For live demos and code samples, [visit the website](http://jsil.org).
 
 License
 =======
 
 Copyright 2011 Kevin Gadd  
-License: MIT/X11  
+License: MIT/X11
 
 Acknowledgements
 ========
@@ -18,4 +18,5 @@ JSIL depends upon the following open source libraries:
 
  * Mono.Cecil: MIT/X11 (thanks to Jb Evain)
  * ICSharpCode.Decompiler: MIT/X11 (developed as part of ILSpy)
-
+
+ Logo by [John Flynn](http://www.bryneshrimp.com).

jsil.org/common.css

@@ -1,6 +1,6 @@
 body {
 	font-family: Calibri, Tahoma, Verdana, sans-serif;
-	font-size: 12pt;
+	font-size: 13pt;
 	font-weight: normal;
 	margin: 2px;
 	padding: 0px;
@@ -25,7 +25,7 @@ a {
 	border-style: solid;
 	padding-left: 2px;
 	padding-right: 2px;
-	background-color: rgba(255, 229, 209, 0.2);
+	background-color: rgba(255, 229, 209, 0.33);
 	text-decoration: none;
 }
 
@@ -34,7 +34,7 @@ a:visited {
 }
 
 a:hover {
-	background-color: rgba(255, 229, 209, 0.75);
+	background-color: rgba(255, 229, 209, 0.8);
 	border-color: #C68D61;
 	color: #703200;
 }
@@ -48,8 +48,8 @@ tt {
 }
 
 h1 {
-	font-size: 2.8em;
-	margin-top: 0.1em;
+	font-size: 3.2em;
+	margin-top: -0.05em;
 	margin-bottom: 0.025em;
 }
 
@@ -91,48 +91,49 @@ ol {
 	border-color: rgb(20, 137, 116);
 	background: rgba(20, 137, 116, 0.20);
 	background: -ms-linear-gradient(
-		90deg, rgba(20, 137, 116, 0.05), rgba(20, 137, 116, 0.25)
+		90deg, #E9F9F2, #BCE1D8
 	);
 	background: -webkit-gradient(
 		linear,
 		left bottom,
 		left top,
-		color-stop(0.01, rgba(20, 137, 116, 0.05)),
-		color-stop(0.99, rgba(20, 137, 116, 0.25))
+		color-stop(0.01, #E9F9F2),
+		color-stop(0.99, #BCE1D8)
 	);
 	background: -moz-linear-gradient(
 		center bottom,
-		rgba(20, 137, 116, 0.05) 1%,
-		rgba(20, 137, 116, 0.25) 99%
+		#E9F9F2 1%,
+		#BCE1D8 99%
 	);
 	padding: 0.4em;
-}
-
-.left-box {
-	width: 31em;
-	margin-left: 0em;
-	margin-top: 1em;
-	margin-right: 1em;
-	float: left;
-	clear: left;
-}
-
-.right-box {
-	width: 31em;
+	width: 56em;
 	margin-left: 0em;
-	margin-top: 1em;
+	margin-top: 0.75em;
 	margin-right: 0em;
+	margin-bottom: 0.75em;
 	float: left;
-	clear: right;
+	clear: left;
 }
 
 div#content-box {
+	position: relative;
 	padding: 0px;
-	max-width: 66em;
+	width: 56em;
 	margin-left: auto;
 	margin-right: auto;
 }
 
+#footer {
+	float: left;
+	clear: both;
+	font-size: 0.9em;
+	width: 100%;
+	margin-top: 1.5em;
+	margin-bottom: 1.5em;
+	text-align: center;
+	z-index: -99;
+}
+
 .aside {
 	font-size: 0.75em;
 	font-style: italic;

jsil.org/index.css

@@ -1,6 +1,18 @@
+body {
+	background-image: url(images/jsil_256px.png);
+	background-repeat: no-repeat;
+	background-attachment: fixed;
+	background-position: bottom right;
+}
+
 div#introduction {
 }
 
+img#logo {
+	margin-bottom: -0.1em;
+	margin-right: 0.1em;
+}
+
 div#changelog {
 	position: relative;
 	height: 26em;
@@ -109,4 +121,23 @@ div#demos ul {
 	column-gap: 2em;
 	list-style-type: circle;
 	list-style-position: inside;
+}
+
+ul#sample_list {
+	-moz-column-count: 3;
+	-moz-column-gap: 1em;
+	-webkit-column-count: 3;
+	-webkit-column-gap: 1em;
+	column-count: 3;
+	column-gap: 1em;
+	list-style-type: circle;
+	list-style-position: inside;
+}
+
+iframe#codesample {
+	margin-top: 0.5em;
+	margin-bottom: 0em;
+	width: 100%;
+	overflow: hidden;
+	height: 0em;
 }

jsil.org/index.html

@@ -8,28 +8,30 @@
   </head>
   <body onLoad="onLoad()">
     <div id="content-box">
-      <div id="introduction" class="rounded-box left-box">
-        <h1>JSIL</h1>
+      <div id="introduction" class="rounded-box">
+        <h1><img src="images/jsil_48px.png" id="logo">JSIL</h1>
         <p>JSIL is a compiler that transforms .NET applications and libraries from their native executable format - <a href="http://en.wikipedia.org/wiki/Common_Intermediate_Language">CIL bytecode</a> - into standards-compliant, cross-browser JavaScript. You can take this JavaScript and run it in a web browser or any other modern JavaScript runtime. Unlike other cross-compiler tools targeting JavaScript, JSIL produces readable, easy-to-debug JavaScript that resembles the code a developer might write by hand, while still maintaining the behavior and structure of the original .NET code.</p>
       </div>
-      <div id="aboutauthor" class="rounded-box right-box">
-        <h2>About the Author</h2>
-        <p>Kevin Gadd is a rampaging malcontent from Northern California. He works on the Performance team at Mozilla, occasionally blogs <a href="http://www.luminance.org/">on his website</a>, and complains incessantly about first-world problems on <a href="http://www.twitter.com/antumbral">Twitter</a>. You can find the unreadable source code he was unwise enough to upload <a href="http://www.github.com/kevingadd/">on GitHub</a>.
-      </div>
-      <div id="demos" class="rounded-box right-box">
+      <div id="demos" class="rounded-box">
         <h2>Demos</h2>
         <ul>
           <li><a href="http://hildr.luminance.org/Platformer/Platformer.html">XNA 3.1 Platformer Starter Kit</a></li>
           <li><a href="http://hildr.luminance.org/Raytracer/Raytracer.html">Raytracer</a></li>
         </ul>
       </div>
-      <div id="changelog" class="rounded-box left-box">
-        <h2>Changelog <a href="https://github.com/kevingadd/JSIL/commits/master" id="view-on-github">View on GitHub</a></h2>
-        <div id="changelog-loading-placeholder">Loading...</div>
-        <div id="changelog-entries" style="display: none">
-        </div>
-      </div>      
-      <div id="gettingstarted" class="rounded-box right-box">
+      <div id="codesamples" class="rounded-box">
+        <h2>Code Samples</h2>
+        <ul id="sample_list">
+          <li><a href="samples/foreach.html"><tt>for each</tt></a></li>
+          <li><a href="samples/multicastdelegates.html"><tt>MulticastDelegate</tt>s</a></li>
+          <li><a href="samples/refparameters.html"><tt>ref</tt> parameters</a></li>
+          <li><a href="samples/verbatim.html"><tt>Verbatim</tt> JavaScript</a></li>
+          <li><a href="samples/closures.html">Closures</a></li>
+          <li><a href="samples/multidimarrays.html">Multidimensional <tt>Array</tt>s</a></li>
+        </ul>
+        <iframe id="codesample" allowtransparency="true" frameborder="0" sandbox="allow-same-origin allow-scripts" src="about:blank"></iframe>
+      </div>
+      <div id="gettingstarted" class="rounded-box">
         <h2>Getting Started</h2>
         <h3>Use JSIL</h3>
         <ol>
@@ -51,6 +53,16 @@ <h3>Contribute to JSIL</h3>
         <h3>Complain about JSIL</h3>
         <p>Not everybody has time to write code! That's okay. You can <a href="https://github.com/kevingadd/JSIL/issues">report issues</a>, or just talk about JSIL on Twitter or something. It's cool!</p>
       </div>
+      <div id="changelog" class="rounded-box">
+        <h2>Changelog <a href="https://github.com/kevingadd/JSIL/commits/master" id="view-on-github">View on GitHub</a></h2>
+        <div id="changelog-loading-placeholder">Loading...</div>
+        <div id="changelog-entries" style="display: none">
+        </div>
+      </div>      
+      <div id="aboutauthor" class="rounded-box">
+        <h2>About the Author</h2>
+        <p>Kevin Gadd is a rampaging malcontent from Northern California. He works on the Performance team at Mozilla, occasionally blogs <a href="http://www.luminance.org/">on his website</a>, and complains incessantly about first-world problems on <a href="http://www.twitter.com/antumbral">Twitter</a>. You can find the unreadable source code he was unwise enough to upload <a href="http://www.github.com/kevingadd/">on GitHub</a>.
+      </div>
     </div>
 
     <div class="changelog-entry" id="changelog-entry-template" style="display: none">
@@ -59,6 +71,8 @@ <h3>Complain about JSIL</h3>
       <div class="message"><span class="text">Message</span></div>
     </div>
 
+    <div id="footer">Logo by the impeccable <a href="http://bryneshrimp.com/">John Flynn</a></div>
+
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
     <script src="md5-min.js" type="text/javascript"></script>
     <script src="index.js" type="text/javascript"></script>

jsil.org/index.js

@@ -38,6 +38,29 @@ function loadChangelog () {
   });
 }
 
+function loadNewSample () {
+  var h = window.location.hash || "";
+  if (h.length > 1) {
+    var url = h.substr(1);
+
+    if ($("#codesample").attr("src") != url) {
+      $("#codesample").attr("src", url);
+    }
+  }
+}
+
 function onLoad () {
+  window.addEventListener("hashchange", loadNewSample, false);
+
+  $("ul#sample_list li a").each(function () {
+    var link = $(this);
+    link.click(function (evt) {
+      evt.preventDefault();
+      var sampleUrl = link.attr("href");
+      window.location.hash = "#" + sampleUrl;
+    });
+  });
+
   loadChangelog();
+  loadNewSample();
 }

jsil.org/samples/closures.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Code Sample: Closures</title>
+    <link rel="stylesheet" href="sample.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
+    <script src="sample.js" type="text/javascript"></script>
+  </head>
+  <body onload="onLoad()">
+    <div id="csharp">
+      <script src="https://gist.github.com/1011893.js?file=DisplayClassFieldNames.cs"></script>
+    </div>
+    <div id="javascript">
+      <script src="https://gist.github.com/1011893.js?file=DisplayClassFieldNames.js"></script>
+    </div>
+  </body>
+</html>

jsil.org/samples/foreach.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Code Sample: foreach</title>
+    <link rel="stylesheet" href="sample.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
+    <script src="sample.js" type="text/javascript"></script>
+  </head>
+  <body onload="onLoad()">
+    <div id="csharp">
+      <script src="https://gist.github.com/1011800.js?file=ForEach.cs"></script>
+    </div>
+    <div id="javascript">
+      <script src="https://gist.github.com/1011800.js?file=ForEach.js"></script>
+    </div>
+  </body>
+</html>

jsil.org/samples/multicastdelegates.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Code Sample: MulticastDelegates</title>
+    <link rel="stylesheet" href="sample.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
+    <script src="sample.js" type="text/javascript"></script>
+  </head>
+  <body onload="onLoad()">
+    <div id="csharp">
+      <script src="https://gist.github.com/1011876.js?file=MulticastDelegates.cs"></script>
+    </div>
+    <div id="javascript">
+      <script src="https://gist.github.com/1011876.js?file=MulticastDelegates.js"></script>
+    </div>
+  </body>
+</html>