-
-
Notifications
You must be signed in to change notification settings - Fork 17
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added a walkthrough to create a new "learn" page on the web site.
- Loading branch information
Ron Gilchrist
committed
Oct 5, 2015
1 parent
cf000c3
commit 486a79f
Showing
9 changed files
with
246 additions
and
34 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,221 @@ | ||
|
|
||
| @{ | ||
| ViewBag.Title = "WebDevelopment"; | ||
| Layout = "~/Views/Shared/_ContentPage.cshtml"; | ||
| } | ||
| @section leftnav{ | ||
| @Html.Partial("~/Views/Learn/LeftNav.cshtml") | ||
| } | ||
| @section head{ | ||
| <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/styles/default.min.css"> | ||
| <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/highlight.min.js"></script> | ||
| <script src="~/Scripts/ext/hljsrazor.js"></script> | ||
| <style> | ||
| .razor .hljs-start { | ||
| background-color: yellow; | ||
| color: black; | ||
| } | ||
| body.wwt pre { | ||
| padding-top: 0; | ||
| } | ||
| body.wwt pre code { | ||
| padding: 0; | ||
| margin-top: -2px; | ||
| } | ||
| </style> | ||
| <script> | ||
| $(function () { | ||
| hljs.initHighlightingOnLoad(); | ||
| $('#singlepanel').click(); | ||
| }); | ||
| </script> | ||
| } | ||
| <h1>Web Development</h1> | ||
| <p>This page is intended to help WWT Web site contributors understand how to contribute to the development of worldwidetelescope.org web site. This page will be updated with more content soon. </p> | ||
| <div class="panel-group" id="accordion"> | ||
| <div class="panel panel-default"> | ||
| <div class="panel-heading"> | ||
| <h4 class="panel-title"> | ||
| <a data-toggle="collapse" data-parent="#accordion" href="#addnewpage" id="singlepanel"> | ||
| Adding a New "Learn" Page to WorldWide Telescope (walkthrough) | ||
| </a> | ||
| </h4> | ||
| </div> | ||
| <div id="addnewpage" class="panel-collapse collapse"> | ||
| <div class="panel-body"> | ||
| <h5>Introduction</h5> | ||
| <p> | ||
| This walkthrough demonstrates how to add a new page to the Learn section within the WWT Web site. We will use this actual page as a working example of how to add a page to the site. You can see all the code that was modified to create this page by viewing <a href="#">this commit</a> on WWT's github page. Though it is a bit more complex than the walkthrough, it shows more detail about how to include images, 3rd party frameworks (code snippet highlighting), and modifications to the layout page. | ||
| </p> | ||
| <h5>Getting Started / Prerequisites</h5> | ||
| <p>To get started, you will need:</p> | ||
| <ul> | ||
| <li>Windows 7 or higher (or a windows virtual machine for Mac users)</li> | ||
| <li> | ||
| IIS (Internet Information Services) | ||
| <ol> | ||
| <li>Open Control Panel, Programs and Features, Turn Windows features on or off.</li> | ||
| <li>Expand Internet Information Services, World Wide Web Services, and Application Development Features.</li> | ||
| <li>Make sure that ASP.NET 4.5 is selected.</li> | ||
| </ol> | ||
| </li> | ||
| <li>Visual Studio 2015 Community Edition (<a href="https://www.visualstudio.com/en-us/downloads/download-visual-studio-vs.aspx" target="vs2015">available here</a>)</li> | ||
| <li>A github.com account</li> | ||
| </ul> | ||
|
|
||
| <p> | ||
| After you have cloned the web site <a href="https://github.com/WorldWideTelescope/wwt-website" target="github">from here</a>... | ||
| </p> | ||
| <ol> | ||
| <li>Open Visual Studio as Administrator (right-click -> Run as Administrator). This is necessary because the web project accesses IIS and runs it in localhost.</li> | ||
| <li>Go to File > Open > Project / Solution, and choose the WWTMVC5WebSiteOnly.sln solution file.</li> | ||
| <li>In the Build menu, choose Build Solution.</li> | ||
| <li>Open a browser and navigate to http://localhost</li> | ||
| </ol> | ||
| <p>You should see a copy of the WWT web site running on your machine. Note that you will not be able to login or view the web client from this copy of the site. But all the other pages should be available for edit.</p> | ||
|
|
||
| <h5>Creating a page</h5> | ||
| <p> | ||
| The WorldWide Telescope Web site uses ASP.NET MVC 5 and the Razor view engine. You can read about ASP.NET MVC <a href="http://www.asp.net/mvc/overview/getting-started/introduction/getting-started" target="mvc">here</a>, and Razor <a href="http://www.asp.net/web-pages/overview/getting-started/introducing-razor-syntax-(c)" target="razor">here</a>. There are many many resources available to assist with understanding this technology, so the purpose of this walkthrough with be to generally familiarize you with how the WWT site utilizes these technologies. | ||
| </p> | ||
|
|
||
| <p> | ||
|
|
||
| In MVC, all pages are called views, and the views are stored in the Views folder in the Solution Explorer panel. This walkthrough focuses on the Learn content, so expand both the Views and Learn folder like this.<br /> | ||
| <img src="~/Content/images/solutionexplorer.png" | ||
| style="margin: 10px auto" | ||
| class="img-responsive iblock" alt="Solution Explorer - Views/Learn folder" | ||
| title="Views/Learn folder within Solution Explorer" /> | ||
| </p> | ||
| <div class="clearfix"></div> | ||
| <p> </p> | ||
| <p> | ||
| Next, let's add a View. Right click the Learn folder and select Add > View. You should see the following dialog<br /> | ||
| <img src="~/Content/images/addview.png" | ||
| style="margin: 10px auto; display: inline-block" | ||
| class="img-responsive" alt="Add View Dialog Box" | ||
| title="Add View Dialog Box" /> | ||
| </p> | ||
|
|
||
| <p> | ||
| In the picture above it shows the page being created here. However you should choose a name like "test". You will also notice that this page has a Layout page so click the ellipsis button next to the Layout field and choose Shared/_ContentPage.cshtml.<br /> | ||
| <img src="~/Content/images/addview.png" | ||
| style="margin: 10px auto; display: inline-block" | ||
| class="img-responsive" alt="Select Layout Dialog Box" | ||
| title="Select Layout Dialog Box" /> | ||
| </p> | ||
| <p>You should now see the following</p> | ||
| <pre><code class="hljs razor"> | ||
| @{ | ||
| ViewBag.Title = "Test"; | ||
| Layout = "~/Views/Shared/_ContentPage.cshtml"; | ||
| } | ||
| </code></pre> | ||
| <p>And the H2 with Text. Replace the "Text" with whatever text you want and change the ViewBag.Title ="Test" to anything you want (e.g., ViewBag.Title ="Hello WWT")</p> | ||
| <p>If you save the file and navigate to http://localhost/Learn/test, you should see your new page showing up. However, you will not see anything in the left hand navigation. We will need to understand how this layout page gets the left hand navigation.</p> | ||
| <p>For a quick exercise, open the layout page in Visual Studio (Views/Shared/_ContentPage.cshtml). You will see it is very simple. All pages on the site aside from the home page and Communities content use this layout page. This is sometimes also called a master page. The _ContentPage.cshtml defines the layout of the left navigation and the contents on the right. But it and every other page ultimately comes from the _Layout.cshtml which defines all the styles, scripts, header, and footer.</p> | ||
| <p>To see how to get the left hand navigation defined in your view, open one of the other views in the Views/Learn folder. Open Exploring.cshtml. Notice the following declaration on line 4:</p> | ||
| <pre><code class="hljs razor"> | ||
| @section leftnav{ | ||
| @Html.Partial("~/Views/Learn/LeftNav.cshtml") | ||
| } | ||
| </code></pre> | ||
| <p>The leftnav.cshtml is called a partial view because it does not have a layout page. So lets add this partial to our by copying and pasting it betweeen the Layout and title section and the html. Your page should look like this:</p> | ||
| <pre><code class="hljs razor"> | ||
| @{ | ||
| ViewBag.Title = "Some new title you chose"; | ||
| Layout = "~/Views/Shared/_ContentPage.cshtml"; | ||
| } | ||
| @section leftnav{ | ||
| @Html.Partial("~/Views/Learn/LeftNav.cshtml") | ||
| } | ||
| <h1>Some heading text you chose</h1> | ||
| </code></pre> | ||
| <p>Save the file and refresh the test page from above and you should see your left navigation. Notice the left hand navigation is there, but there is no link to your test page. You will have to add it. So open Views/Shared/LeftNav.cshtml and add the following line to the bottom.</p> | ||
| <pre><code class="hljs razor"> | ||
| <li class="@(ViewBag.page == "Test" ? "active" : "")"><a href="/Learn/Test">Some Link Text</a></li> | ||
| </code></pre> | ||
| <p>Save the file and refresh your page. You should see your link at the bottom of the left navigation. But what about finding this page from the home page or elsewhere on the site? To add to the main navigation, we need to open Views/Shared/TopNav.cshtml and find the Learn menu in the html. Look for the following block of code at line 92:</p> | ||
| <pre><code class="hljs razor"> | ||
| <ul class="dropdown-menu"> | ||
| <li><a href="/Learn/">Getting Started</a></li> | ||
| <li><a href="/Learn/WhatsNew">What's New</a></li> | ||
| <li><a href="/Learn/Exploring">Exploring</a></li> | ||
| <li><a href="/Learn/Authoring">Authoring</a></li> | ||
| <li><a href="/Learn/SettingUp">Setting Up</a></li> | ||
| <li><a href="/Learn/WebDevelopment">Web Site Development</a></li> | ||
| </ul> | ||
| </code></pre> | ||
| <p> | ||
| Add the following after the Web Site Development line: | ||
| </p> | ||
| <pre><code class="hljs razor"> | ||
| <li><a href="/Learn/Test">Some Link Text</a></li> | ||
| </code></pre> | ||
| <p>Save the page and refresh the test page in the browser. You should see the menu item displayed. If you navigate to the home page you will be able to navigate to the test page via the Learn menu.</p> | ||
| <p>Now we have a new page in the right section AND we have links pointing to them, so in the next section we can create a panel.</p> | ||
| <h5>Create a Custom Accordian Panel</h5> | ||
| <p> | ||
| The Learn pages are made up of a stack of accordian panels. These are one of <a href="http://getbootstrap.com/" target="bs">Bootstrap's</a> components which you can read about <a href=" http//getbootstrap.com/javascript/#collapse-example-accordion" target="bs">here</a>. | ||
| </p> | ||
| <p>The easiest way to add a panel is to steal one from one of the other views. If you copy and paste one from Exploring or Authoring and strip out all the content and panel ids, you will end up with the following (which I have added some placeholder names and id's to)</p> | ||
| <pre><code class="hljs razor"> | ||
| <div class="panel panel-default"> | ||
| <div class="panel-heading"> | ||
| <h4 class="panel-title"> | ||
| <a data-toggle="collapse" data-parent="#accordian" href="#firstpanelid"> | ||
| First Panel Title | ||
| </a> | ||
| </h4> | ||
| </div> | ||
| <div id="firstpanelid" class="panel-collapse collapse"> | ||
| <div class="panel-body"> | ||
| <p>First Panel Content</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="panel panel-default"> | ||
| <div class="panel-heading"> | ||
| <h4 class="panel-title"> | ||
| <a data-toggle="collapse" data-parent="#accordian" href="#secondpanelid"> | ||
| Second Panel Title | ||
| </a> | ||
| </h4> | ||
| </div> | ||
| <div id="secondpanelid" class="panel-collapse collapse"> | ||
| <div class="panel-body"> | ||
| <p>Second Panel Content</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </code></pre> | ||
|
|
||
| <p>This is where you can add as many panels and put as much content as you want to play with it. If you are copying and pasting the above, replace the panelid strings with your own values (again, see other pages for examples). Be careful though - the panelid strings appear in the href of the title tag and also in the parent div of the panel body.</p> | ||
|
|
||
| <p> | ||
| Also note that you can deep link to panels - for example <a href="http://worldwidetelescope.org/Learn/Exploring#AstroImageData">http://worldwidetelescope.org/Learn/Exploring#AstroImageData</a> will open that panel and scroll right to that content. So the panel id that you create becomes part of a link that can be shared publicly. | ||
| </p> | ||
|
|
||
| <p>That's basically all you need to do for adding a single page. Adding a new group or other modifications will be covered in another walkthrough. Once you have your new content ready to check in, submit a pull request through github and if it looks good and inline with what WWT , it will be deployed soon.</p> | ||
|
|
||
| <h5>Other Notes</h5> | ||
| <p> | ||
| If you are looking at the commit for this page, you may notice a few things I didn't cover. | ||
| </p> | ||
| <ul> | ||
| <li>I added a head section to the _ContentPage.cshtml layout. I did this honestly to legitimize how we add scripts to the page - which is currently poorly implemented in pages in the interact folder as an example. Refactoring to follow.</li> | ||
| <li>I added images to the /Content/images folder. These will be removed later and put into blob storage, but I want this to show how images should come in through the community initially. Part of the pull requst process will be to add external resources like images to blob storage and reference that url instead of the local version.</li> | ||
| <li>I only touched on bootstrap and didn't mention anything about responsive design or very much about CSS/LESS. I will cover this in another walkthrough later on.</li> | ||
| <li>Probably many things that are unclear. Please use the "issues" feature to ask questions, and if you need to personally ask me something, I can be reached at ron (at) thewebkid (dot) com.</li> | ||
| </ul> | ||
| <p>Have fun and I look forward to collaborating with you!!</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.