Permalink
Browse files

*Fix modal height

*Add intro paragraph
*Specify eclipse version
  • Loading branch information...
1 parent 1c95793 commit c36590519187b9551ec585a31fe727b1c6d6b1ab @naaman naaman committed Mar 13, 2012
Showing with 217 additions and 219 deletions.
  1. +217 −219 src/main/webapp/index.html
View
436 src/main/webapp/index.html
@@ -31,7 +31,7 @@
display: inline-block;
text-decoration: none;
}
- .screenshot img, .tool-choice img {
+ .screenshot img {
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
@@ -41,19 +41,16 @@
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
}
- .tool-choice {
- border-bottom: 1px solid #ddd;
- padding-bottom: 17px;
- margin: 18px 0;
+ .modal{
+ width:800px;
+ margin-left:-400px;
+ height:650px;
+ margin-top: -325px;
}
- .tool-choice .span3 {
- text-align: center;
- }
- .tool-choice .btn {
- width: 197px;
- }
- .tool-choice a img {
- cursor: pointer;
+
+ .modal .modal-body {
+ text-align: center;
+ max-height: 650px;
}
</style>
<!-- /// -->
@@ -99,241 +96,242 @@ <h1 class="alert alert-success">Your app is ready!</h1>
<div class="page-header">
<h1>Get started with Embedded Jetty</h1>
</div>
+
+ <p>
+ Embedded Jetty lets you take back your main method by including your app server in your app rather than relying on a
+ container for deployment. The app you've just cloned is a starting point for using embedded Jetty. Take a moment to
+ setup your dev environment, make some changes, and deploy:
+ </p>
+
+ <ul id="tab" class="nav nav-tabs">
+ <li class="active"><a id="eclipse-instructions-tab" href="#eclipse-instructions" data-toggle="tab">Using Eclipse 3.7</a></li>
+ <li><a id="cli-instructions-tab" href="#cli-instructions" data-toggle="tab">Using Command Line</a></li>
+ </ul>
- <div class="row tool-choice">
- <div class="span3 offset1">
- <a href="#" onclick="showInstructions('#eclipse-instructions')"><img src="https://s3.amazonaws.com/template-app-instructions-screenshots/eclipse/eclipse-thumbnail.png" alt="Using Eclipse" /></a>
- <p><a href="#" onclick="showInstructions('#eclipse-instructions')" class="btn btn-primary btn-large">Using Eclipse</a></p>
- </div>
- <div class="span3">
- <a href="#" onclick="showInstructions('#cli-instructions')"><img src="https://s3.amazonaws.com/template-app-instructions-screenshots/cli/cli-thumbnail.png" alt="Using Command Line" /></a>
- <p>
- <a href="#" onclick="showInstructions('#cli-instructions')" class="btn btn-primary btn-large">Using Command Line</a>
- </p>
- </div>
- </div>
+ <div class="tab-content">
+ <div id="eclipse-instructions" class="instructions tab-pane active">
+ <a name="using-eclipse"></a>
+ <h1>Using Eclipse 3.7:</h1>
- <div id="eclipse-instructions" class="instructions">
- <a name="using-eclipse"></a>
- <h1>Using Eclipse:</h1>
-
- <h2>Step 1. Setup your environment</h2>
- <ol>
- <li>Ensure <a href="http://unicase.blogspot.com/2011/01/egit-tutorial-for-beginners.html">EGit</a> is installed.</li>
- <li>Ensure the <a href="http://www.eclipse.org/m2e/">Maven Eclipse Plugin</a> is installed.</li>
- <li>Create an SSH key:
- <ol>
- <li>Go to <code>Window</code> <i class="icon-chevron-right"></i> <code>Preferences</code> <i class="icon-chevron-right"></i> <code>General</code> <i class="icon-chevron-right"></i> <code>Network Connections</code> <i class="icon-chevron-right"></i> <code>SSH2</code></li>
- <li>Choose the <code>Key Management</code> tab</li>
- <li>Click <code>Generate RSA Key...</code>
- <div class="modal hide" id="addingSshKey">
- <div class="modal-header">
- <a class="close" data-dismiss="modal">×</a>
- <h3>Generate RSA Key</h3>
- </div>
- <div class="modal-body">
- <img src="https://s3.amazonaws.com/template-app-instructions-screenshots/eclipse/2-3-adding-ssh-key.png" alt="SSH Eclipse Preferences Window" />
+ <h2>Step 1. Setup your environment</h2>
+ <ol>
+ <li>Ensure <a href="http://unicase.blogspot.com/2011/01/egit-tutorial-for-beginners.html">EGit</a> is installed.</li>
+ <li>Ensure the <a href="http://www.eclipse.org/m2e/">Maven Eclipse Plugin</a> is installed.</li>
+ <li>Create an SSH key:
+ <ol>
+ <li>Go to <code>Window</code> <i class="icon-chevron-right"></i> <code>Preferences</code> <i class="icon-chevron-right"></i> <code>General</code> <i class="icon-chevron-right"></i> <code>Network Connections</code> <i class="icon-chevron-right"></i> <code>SSH2</code></li>
+ <li>Choose the <code>Key Management</code> tab</li>
+ <li>Click <code>Generate RSA Key...</code>
+ <div class="modal hide" id="addingSshKey">
+ <div class="modal-header">
+ <a class="close" data-dismiss="modal">×</a>
+ <h3>Generate RSA Key</h3>
+ </div>
+ <div class="modal-body">
+ <img src="https://s3.amazonaws.com/template-app-instructions-screenshots/eclipse/2-3-adding-ssh-key.png" alt="SSH Eclipse Preferences Window" />
+ </div>
</div>
- </div>
- <span class="screenshot">
- <a href="#addingSshKey" data-toggle="modal">
- <img src="https://s3.amazonaws.com/template-app-instructions-screenshots/eclipse/2-3-adding-ssh-key.png" alt="SSH Eclipse Preferences Window" width="100" />
- <i class="icon-zoom-in"></i>
- </a>
- </span>
- </li>
- <li>Copy the generated public key in the text box and <a href="https://api.heroku.com/account/ssh" class="btn btn-primary btn-mini">add it to your account</a></li>
- <li>Click <code>Save Private Key...</code>, accepting the defaults</li>
- <li>Click <code>Ok</code></li>
- </ol>
- </li>
- </ol>
+ <span class="screenshot">
+ <a href="#addingSshKey" data-toggle="modal">
+ <img src="https://s3.amazonaws.com/template-app-instructions-screenshots/eclipse/2-3-adding-ssh-key.png" alt="SSH Eclipse Preferences Window" width="100" />
+ <i class="icon-zoom-in"></i>
+ </a>
+ </span>
+ </li>
+ <li>Copy the generated public key in the text box and <a href="https://api.heroku.com/account/ssh" class="btn btn-primary btn-mini">add it to your account</a></li>
+ <li>Click <code>Save Private Key...</code>, accepting the defaults</li>
+ <li>Click <code>Ok</code></li>
+ </ol>
+ </li>
+ </ol>
- <h2>Step 2. Clone the App</h2>
- <ol>
- <li>Go to <code>File</code> <i class="icon-chevron-right"></i> <code>Import...</code> <i class="icon-chevron-right"></i> <code>Git</code> <i class="icon-chevron-right"></i> <code>Projects from Git</code>
- <div class="modal hide" id="importFromGit">
- <div class="modal-header">
- <a class="close" data-dismiss="modal">×</a>
- <h3>Import</h3>
- </div>
- <div class="modal-body">
- <img src="https://s3.amazonaws.com/template-app-instructions-screenshots/eclipse/2-1-import.png" alt="Import" />
- </div>
- </div>
- <span class="screenshot">
- <a href="#importFromGit" data-toggle="modal">
- <img src="https://s3.amazonaws.com/template-app-instructions-screenshots/eclipse/2-1-import.png" alt="Import" width="100" />
- <i class="icon-zoom-in"></i>
- </a>
- </span>
- </li>
- <li>Choose <code>URI</code> and click <code>Next</code></li>
- <li>Enter <code>git@heroku.com:<script>document.write(appname());</script>.git</code> in the <code>URI</code> field.
- <div class="modal hide" id="cloneGitRepository">
- <div class="modal-header">
- <a class="close" data-dismiss="modal">×</a>
- <h3>Clone Git Repository</h3>
- </div>
- <div class="modal-body">
- <img src="https://s3.amazonaws.com/template-app-instructions-screenshots/eclipse/3-4-clone-git-repo.png" alt="Clone Git Repository" />
+ <h2>Step 2. Clone the App</h2>
+ <ol>
+ <li>Go to <code>File</code> <i class="icon-chevron-right"></i> <code>Import...</code> <i class="icon-chevron-right"></i> <code>Git</code> <i class="icon-chevron-right"></i> <code>Projects from Git</code>
+ <div class="modal hide" id="importFromGit">
+ <div class="modal-header">
+ <a class="close" data-dismiss="modal">×</a>
+ <h3>Import</h3>
+ </div>
+ <div class="modal-body">
+ <img src="https://s3.amazonaws.com/template-app-instructions-screenshots/eclipse/2-1-import.png" alt="Import" />
+ </div>
</div>
- </div>
- <span class="screenshot">
- <a href="#cloneGitRepository" data-toggle="modal">
- <img src="https://s3.amazonaws.com/template-app-instructions-screenshots/eclipse/3-4-clone-git-repo.png" alt="Clone Git Repository" width="100" />
- <i class="icon-zoom-in"></i>
- </a>
- </span>
- </li>
- <li>Click <code>Next</code> three times
- <blockquote>
- Click <code>Yes</code> to the question of authenticity if the question appears.
- </blockquote>
- </li>
- <li>Choose <code>Import as general project</code>
- <div class="modal hide" id="importProjectsFromGit">
- <div class="modal-header">
- <a class="close" data-dismiss="modal">×</a>
- <h3>Import Projects from Git</h3>
+ <span class="screenshot">
+ <a href="#importFromGit" data-toggle="modal">
+ <img src="https://s3.amazonaws.com/template-app-instructions-screenshots/eclipse/2-1-import.png" alt="Import" width="100" />
+ <i class="icon-zoom-in"></i>
+ </a>
+ </span>
+ </li>
+ <li>Choose <code>URI</code> and click <code>Next</code></li>
+ <li>Enter <code>git@heroku.com:<script>document.write(appname());</script>.git</code> in the <code>URI</code> field.
+ <div class="modal hide" id="cloneGitRepository">
+ <div class="modal-header">
+ <a class="close" data-dismiss="modal">×</a>
+ <h3>Clone Git Repository</h3>
+ </div>
+ <div class="modal-body">
+ <img src="https://s3.amazonaws.com/template-app-instructions-screenshots/eclipse/3-4-clone-git-repo.png" alt="Clone Git Repository" />
+ </div>
</div>
- <div class="modal-body">
- <img src="https://s3.amazonaws.com/template-app-instructions-screenshots/eclipse/2-6-import-general.png" alt="Import Projects from Git" />
+ <span class="screenshot">
+ <a href="#cloneGitRepository" data-toggle="modal">
+ <img src="https://s3.amazonaws.com/template-app-instructions-screenshots/eclipse/3-4-clone-git-repo.png" alt="Clone Git Repository" width="100" />
+ <i class="icon-zoom-in"></i>
+ </a>
+ </span>
+ </li>
+ <li>Click <code>Next</code> three times
+ <blockquote>
+ Click <code>Yes</code> to the question of authenticity if the question appears.
+ </blockquote>
+ </li>
+ <li>Choose <code>Import as general project</code>
+ <div class="modal hide" id="importProjectsFromGit">
+ <div class="modal-header">
+ <a class="close" data-dismiss="modal">×</a>
+ <h3>Import Projects from Git</h3>
+ </div>
+ <div class="modal-body">
+ <img src="https://s3.amazonaws.com/template-app-instructions-screenshots/eclipse/2-6-import-general.png" alt="Import Projects from Git" />
+ </div>
</div>
- </div>
- <span class="screenshot">
- <a href="#importProjectsFromGit" data-toggle="modal">
- <img src="https://s3.amazonaws.com/template-app-instructions-screenshots/eclipse/2-6-import-general.png" alt="Import Projects from Git" width="100" />
- <i class="icon-zoom-in"></i>
- </a>
- </span>
- </li>
- <li>Click <code>Finish</code></li>
- </ol>
+ <span class="screenshot">
+ <a href="#importProjectsFromGit" data-toggle="modal">
+ <img src="https://s3.amazonaws.com/template-app-instructions-screenshots/eclipse/2-6-import-general.png" alt="Import Projects from Git" width="100" />
+ <i class="icon-zoom-in"></i>
+ </a>
+ </span>
+ </li>
+ <li>Click <code>Finish</code></li>
+ </ol>
- <h2>Step 3. Configure the App</h2>
- <ol>
- <li>Right-click the project root</li>
- <li>Choose <code>Configure</code> <i class="icon-chevron-right"></i> <code>Convert to Maven Project</code> </li>
- </ol>
+ <h2>Step 3. Configure the App</h2>
+ <ol>
+ <li>Right-click the project root</li>
+ <li>Choose <code>Configure</code> <i class="icon-chevron-right"></i> <code>Convert to Maven Project</code> </li>
+ </ol>
- <h2>Step 4. Makes some changes to the app</h2>
- <ol>
- <li>Open <code>HelloServlet.java</code></li>
- <li>Modify line 20 with:
- <code>
- out.write("Deployed first change!".getBytes());
- </code>
- </li>
- </ol>
+ <h2>Step 4. Makes some changes to the app</h2>
+ <ol>
+ <li>Open <code>HelloServlet.java</code></li>
+ <li>Modify line 20 with:
+ <code>
+ out.write("Deployed first change!".getBytes());
+ </code>
+ </li>
+ </ol>
- <h2>Step 5. Deploy to Heroku</h2>
- <ol>
- <li>Right-click the project root and choose <code>Team</code> <i class="icon-chevron-right"></i> <code>Commit</code></li>
- <li>Enter a commit message and click <code>Commit</code>
- <div class="modal hide" id="commitChanges">
- <div class="modal-header">
- <a class="close" data-dismiss="modal">×</a>
- <h3>Commit Changes</h3>
- </div>
- <div class="modal-body">
- <img src="https://s3.amazonaws.com/template-app-instructions-screenshots/eclipse/6-5-commit.png" alt="Commit Changes" />
- </div>
- </div>
- <span class="screenshot">
- <a href="#commitChanges" data-toggle="modal">
- <img src="https://s3.amazonaws.com/template-app-instructions-screenshots/eclipse/6-5-commit.png" alt="Commit Changes" width="100" />
- <i class="icon-zoom-in"></i>
- </a>
- </span>
- </li>
- <li>Right-click the project root and choose <code>Team</code> <i class="icon-chevron-right"></i> <code>Push to Upstream</code></li>
- <li>Review the push results. At the bottom, a "... deployed to Heroku" message will appear.
- <div class="modal hide" id="pushResults">
- <div class="modal-header">
- <a class="close" data-dismiss="modal">×</a>
- <h3>Push Results</h3>
+ <h2>Step 5. Deploy to Heroku</h2>
+ <ol>
+ <li>Right-click the project root and choose <code>Team</code> <i class="icon-chevron-right"></i> <code>Commit</code></li>
+ <li>Enter a commit message and click <code>Commit</code>
+ <div class="modal hide" id="commitChanges">
+ <div class="modal-header">
+ <a class="close" data-dismiss="modal">×</a>
+ <h3>Commit Changes</h3>
+ </div>
+ <div class="modal-body">
+ <img src="https://s3.amazonaws.com/template-app-instructions-screenshots/eclipse/6-5-commit.png" alt="Commit Changes" />
+ </div>
</div>
- <div class="modal-body">
- <img src="https://s3.amazonaws.com/template-app-instructions-screenshots/eclipse/6-8-push-result.png" alt="Push Results" />
+ <span class="screenshot">
+ <a href="#commitChanges" data-toggle="modal">
+ <img src="https://s3.amazonaws.com/template-app-instructions-screenshots/eclipse/6-5-commit.png" alt="Commit Changes" width="100" />
+ <i class="icon-zoom-in"></i>
+ </a>
+ </span>
+ </li>
+ <li>Right-click the project root and choose <code>Team</code> <i class="icon-chevron-right"></i> <code>Push to Upstream</code></li>
+ <li>Review the push results. At the bottom, a "... deployed to Heroku" message will appear.
+ <div class="modal hide" id="pushResults">
+ <div class="modal-header">
+ <a class="close" data-dismiss="modal">×</a>
+ <h3>Push Results</h3>
+ </div>
+ <div class="modal-body">
+ <img src="https://s3.amazonaws.com/template-app-instructions-screenshots/eclipse/6-8-push-result.png" alt="Push Results" />
+ </div>
</div>
- </div>
- <span class="screenshot">
- <a href="#pushResults" data-toggle="modal">
- <img src="https://s3.amazonaws.com/template-app-instructions-screenshots/eclipse/6-8-push-result.png" alt="Push Results" width="100" />
- <i class="icon-zoom-in"></i>
- </a>
- </span>
- </li>
- </ol>
+ <span class="screenshot">
+ <a href="#pushResults" data-toggle="modal">
+ <img src="https://s3.amazonaws.com/template-app-instructions-screenshots/eclipse/6-8-push-result.png" alt="Push Results" width="100" />
+ <i class="icon-zoom-in"></i>
+ </a>
+ </span>
+ </li>
+ </ol>
- <div class="hero-unit">
- <h1>Done!</h1>
- <p>You've just cloned, modified, and deployed a brand new app.</p>
- <a href="/hello" class="btn btn-primary btn-large">See your changes</a>
+ <div class="hero-unit">
+ <h1>Done!</h1>
+ <p>You've just cloned, modified, and deployed a brand new app.</p>
+ <a href="/hello" class="btn btn-primary btn-large">See your changes</a>
+ </div>
</div>
- </div>
- <div id="cli-instructions" class="instructions">
- <a name="using-cli"></a>
- <h1>Using Command Line:</h1>
+ <div id="cli-instructions" class="instructions tab-pane">
+ <a name="using-cli"></a>
+ <h1>Using Command Line:</h1>
- <h2>Step 1. Setup your environment</h2>
- <ol>
- <li>Install the <a href="http://toolbelt.heroku.com">Heroku Toolbelt</a>.</li>
- <li>Install <a href="http://maven.apache.org/download.html">Maven</a>.</li>
- </ol>
+ <h2>Step 1. Setup your environment</h2>
+ <ol>
+ <li>Install the <a href="http://toolbelt.heroku.com">Heroku Toolbelt</a>.</li>
+ <li>Install <a href="http://maven.apache.org/download.html">Maven</a>.</li>
+ </ol>
- <h2>Step 2. Login to Heroku</h2>
- <code>heroku login</code>
- <blockquote>
- Be sure to create, or associate an SSH key with your account.
- </blockquote>
- <pre>
-$ heroku login
-Enter your Heroku credentials.
-Email: naaman@heroku.com
-Password:
-Could not find an existing public key.
-Would you like to generate one? [Yn] Y
-Generating new SSH public key.
-Uploading SSH public key /Users/Administrator/.ssh/id_rsa.pub
-Authentication successful.</pre>
+ <h2>Step 2. Login to Heroku</h2>
+ <code>heroku login</code>
+ <blockquote>
+ Be sure to create, or associate an SSH key with your account.
+ </blockquote>
+ <pre>
+ $ heroku login
+ Enter your Heroku credentials.
+ Email: naaman@heroku.com
+ Password:
+ Could not find an existing public key.
+ Would you like to generate one? [Yn] Y
+ Generating new SSH public key.
+ Uploading SSH public key /Users/Administrator/.ssh/id_rsa.pub
+ Authentication successful.</pre>
- <h2>Step 3. Clone the App</h2>
- <code>git clone -o heroku git@heroku.com:<script>document.write(appname())</script>.git</code>
+ <h2>Step 3. Clone the App</h2>
+ <code>git clone -o heroku git@heroku.com:<script>document.write(appname())</script>.git</code>
- <h2>Step 4. Makes some changes to the app</h2>
- <ol>
- <li><script>document.write("<code>cd " + appname() + "</code>")</script></li>
- <li>Open <code>src/main/java/HelloServlet.java</code> with your favorite editor</li>
- <li>Modify line 20 with:
- <code>
- out.write("Deployed first change!".getBytes());
- </code>
- </li>
- </ol>
+ <h2>Step 4. Makes some changes to the app</h2>
+ <ol>
+ <li><script>document.write("<code>cd " + appname() + "</code>")</script></li>
+ <li>Open <code>src/main/java/HelloServlet.java</code> with your favorite editor</li>
+ <li>Modify line 20 with:
+ <code>
+ out.write("Deployed first change!".getBytes());
+ </code>
+ </li>
+ </ol>
- <h2>Step 5. Make sure the app still compiles</h2>
- <code>mvn clean package</code>
+ <h2>Step 5. Make sure the app still compiles</h2>
+ <code>mvn clean package</code>
- <h2>Step 6. Deploy your changes</h2>
- <ol>
- <li><code>git commit -am "New changes to deploy"</code></li>
- <li><code>git push heroku master</code></li>
- </ol>
+ <h2>Step 6. Deploy your changes</h2>
+ <ol>
+ <li><code>git commit -am "New changes to deploy"</code></li>
+ <li><code>git push heroku master</code></li>
+ </ol>
- <div class="hero-unit">
- <h1>Done!</h1>
- <p>You've just cloned, modified, and deployed a brand new app.</p>
- <a href="/hello" class="btn btn-primary btn-large">See your changes</a>
+ <div class="hero-unit">
+ <h1>Done!</h1>
+ <p>You've just cloned, modified, and deployed a brand new app.</p>
+ <a href="/hello" class="btn btn-primary btn-large">See your changes</a>
+ </div>
</div>
</div>
</div>
</div>
</div>
<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
+ <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-modal.js"></script>
</body>
</html>

0 comments on commit c365905

Please sign in to comment.