Add tutorials pages

app/assets/stylesheets/main.css.scss

@@ -198,6 +198,15 @@ footer {
 section {
   padding-top: 50px; }
 
+.click { 
+  font-weight: bold; 
+  font-style: normal;
+  color: #347caa; }
+
+.more-info { 
+  font-style: italic;
+  color: #808080; }
+
 #carousel {
   text-align: center;
   margin-top: -15px; }

app/views/layouts/application.html.erb

@@ -22,10 +22,11 @@
 
           <div id="mainnav" class="pull-right">
             <ul class="nav">
-              <li><%= link_to t('pages.about.menu_title'), about_url %></li>
+              <!-- <li><%= link_to t('pages.about.menu_title'), about_url %></li> -->
               <li><%= link_to t('pages.get_involved.menu_title'), get_involved_url %></li>
               <!-- <li><%= link_to t('pages.blog.menu_title'), blog_index_url(subdomain: 'blog') %></li> -->
               <li><%= link_to t('.wiki'), 'https://wiki.diasporafoundation.org' %></li>
+              <li><%= link_to t('pages.tutorials.menu_title'), tutorials_url %></li>
               <!-- <li><%= link_to t('.planet'), 'http://planet.diasporafoundation.org' %></li> -->
             </ul>
             <%= link_to t('buttons.host_pod'), about_path(anchor: "host"), class: 'btn primary' %>

app/views/pages/formatting.html.erb

@@ -0,0 +1,113 @@
+<% content_for :page_title, t('pages.formatting.menu_title') %>
+<% content_for :wrapper_class, "index_page" %>
+
+<div id="masthead", class="hero">
+  <div class="container">
+    <h1><%= t 'pages.tutorials.headline' %></h1>
+    <h2><%= t 'pages.formatting.byline' %></h2>
+  </div>
+</div>
+
+<div class="container">
+  <div class="row top_spacing">
+    <div class="span2">&nbsp;
+    </div>
+    <div class="span12">       
+        <p><%= t 'pages.formatting.format1' %></p>
+        <p><%= t 'pages.formatting.format2' %></p>
+        <p class="more-info"><%= t 'pages.formatting.format3' %><span class="click"><%= t 'pages.getting-started.preview' %></span><%= t 'pages.formatting.format3a' %></p>
+        <p class="more-info"><%= t 'pages.formatting.format4' %><span class="click"><%= t 'pages.getting-started.preview' %></span><%= t 'pages.formatting.format4a' %></p>
+
+        <h3><%= t 'pages.formatting.headings' %></h3>
+        <p><%= t 'pages.formatting.headings_ex1' %></p>
+		<pre><%= t 'pages.formatting.headings_code1' %>
+		
+<%= t 'pages.formatting.headings_code2' %>
+
+<%= t 'pages.formatting.headings_code3' %></pre>
+        <p class="more-info"><%= t 'pages.formatting.headings_ex2' %></p>
+
+        <h3><%= t 'pages.formatting.lists' %></h3>
+        <p><%= t 'pages.formatting.lists_ex1' %></p>
+        <p><%= t 'pages.formatting.lists_ex2' %></p>
+        <p class="more-info"><%= t 'pages.formatting.lists_ex3' %></p>
+		<pre><%= t 'pages.formatting.lists_code1' %>
+		
+<%= t 'pages.formatting.lists_code2' %>
+<%= t 'pages.formatting.lists_code3' %>
+<%= t 'pages.formatting.lists_code4' %>
+
+<%= t 'pages.formatting.lists_code5' %>
+
+<%= t 'pages.formatting.lists_code6' %>
+<%= t 'pages.formatting.lists_code7' %>
+<%= t 'pages.formatting.lists_code8' %>
+
+<%= t 'pages.formatting.lists_code9' %>
+
+<%= t 'pages.formatting.lists_code10' %>
+<%= t 'pages.formatting.lists_code11' %>
+<%= t 'pages.formatting.lists_code12' %></pre>
+
+        <h3><%= t 'pages.formatting.code' %></h3>
+        <p><%= t 'pages.formatting.code_ex1' %></p>
+        <p><%= t 'pages.formatting.code_ex2' %></p>
+        <p><%= t 'pages.formatting.code_ex3' %> `<code><%= t 'pages.formatting.code_ex4' %></code>`.</p>
+		<pre><%= t 'pages.formatting.code_code1' %>
+		
+<%= t 'pages.formatting.code_ticks' %><code><%= t 'pages.formatting.code_code2' %></code><%= t 'pages.formatting.code_ticks' %>
+
+<%= t 'pages.formatting.code_code3' %>
+
+    <code><%= t 'pages.formatting.code_code4' %></code>
+      <code><%= t 'pages.formatting.code_code5' %></code></pre>     
+
+        <h3><%= t 'pages.formatting.line' %></h3>
+        <p><%= t 'pages.formatting.line_ex' %></p>
+		<pre><%= t 'pages.formatting.line_code1' %>
+
+<%= t 'pages.formatting.line_code2' %>
+
+<%= t 'pages.formatting.line_code3' %></pre>
+
+        <h3><%= t 'pages.formatting.itals' %></h3>
+        <p><%= t 'pages.formatting.itals_ex1' %></p>
+        <p><em><%= t 'pages.formatting.itals_ex2' %></em><%= t 'pages.formatting.itals_ex3' %></p>
+        <p><strong><%= t 'pages.formatting.itals_ex4' %></strong><%= t 'pages.formatting.itals_ex5' %></p>
+        <p><strong><em><%= t 'pages.formatting.itals_ex6' %></em></strong><%= t 'pages.formatting.itals_ex7' %></p>
+		<p class="more-info"><%= t 'pages.formatting.itals_ex8' %></p>
+
+        <h3><%= t 'pages.formatting.links' %></h3>
+        <p><%= t 'pages.formatting.link_ex1' %><%= link_to t('pages.formatting.link_ex2'), formatting_url %><%= t 'pages.formatting.link_ex3' %></p>
+        <pre><%= t 'pages.formatting.link_code' %></pre>
+        <p class="more-info"><%= t 'pages.formatting.link_ex4' %></p>
+
+        <h3><%= t 'pages.formatting.images' %></h3>
+        <p><%= t 'pages.formatting.images_ex1' %></p>
+        <pre><%= t 'pages.formatting.images_code' %></pre>
+        <p class="more-info"><%= t 'pages.formatting.images_ex2' %><strong><%= t 'pages.formatting.images_ex2a' %></strong><%= t 'pages.formatting.images_ex2b' %></p>
+        <p class="more-info"><%= t 'pages.formatting.images_ex3' %></p>
+
+        <h3><%= t 'pages.formatting.escape' %></h3>
+        <p><%= t 'pages.formatting.escape_ex1' %></p>
+        <pre><%= t 'pages.formatting.escape_code' %></pre>
+        <p><%= t 'pages.formatting.escape_ex2' %></p>
+        <p class="more-info"><%= t 'pages.formatting.escape_ex3' %></p>
+
+        <h3><%= t 'pages.formatting.symbols' %></h3>
+        <p><%= t 'pages.formatting.symbols_ex' %></p>
+        <ul>
+        <li>"-&gt;" = "→" ; "&lt;-" = "←" ; "&lt;-&gt;" = "↔"</li>
+        <li>"(c)" = "©" ; "(r)" = "®" ; "(tm)" = ™</li>
+        <li>"&lt;3″ = "♥ "</li>
+        <li>"x^2″ = "x²"</li>
+        </ul>
+        <p><%= t 'pages.formatting.finish1' %><a href="http://daringfireball.net/projects/markdown/syntax"><%= t 'pages.formatting.finish2' %></a>.</p>
+        <p>&nbsp;</p>
+        <p align="center"><%= link_to t('pages.tutorials.headline'), tutorials_url %> | <%= link_to t('pages.tutorials.started_head'), getting_started1_url %></p>
+
+ 	</div>
+    <div class="span2">
+    </div>
+  </div>
+</div>

app/views/pages/getting_started1.html.erb

@@ -0,0 +1,64 @@
+<% content_for :page_title, t('pages.getting_started1.menu_title') %>
+<% content_for :wrapper_class, "index_page" %>
+
+<div id="masthead", class="hero">
+  <div class="container">
+    <h1><%= t 'pages.tutorials.started_head' %></h1>
+    <h2><%= t 'pages.getting_started1.byline' %></h2>
+  </div>
+</div>
+
+<div class="container">
+  <div class="row top_spacing">
+    <div class="span2">&nbsp;
+    </div>
+    <div class="span12">       
+        <p class="more-info"><%= t 'pages.getting_started1.welcome' %></p>
+        <h3><%= t 'pages.getting_started1.find_pod' %></h3>
+		<p><%= t 'pages.getting_started1.find_pod_ex1' %><em><%= t 'pages.getting_started1.find_pod_ex1a' %></em><%= t 'pages.getting_started1.find_pod_ex1b' %></p>
+        <p class="more-info"><%= t 'pages.getting_started1.find_pod_ex2' %></p>
+		<p><%= t 'pages.getting_started1.find_pod_ex3' %>
+        <a href="https://wiki.diasporafoundation.org/Choosing_a_pod" target="_blank"><%= t 'pages.getting_started1.find_pod_ex4' %></a>
+        <%= t 'pages.getting_started1.find_pod_ex5' %></p>
+        <p><%= t 'pages.getting_started1.find_pod_ex6' %></p>
+        <p class="more-info"><%= t 'pages.getting_started1.find_pod_ex7' %></p>
+		<h3><%= t 'pages.getting_started1.registration' %></h3>
+        <p><%= t 'pages.getting_started1.registration1' %><span class="click"><%= t 'click.sign_up' %></span><%= t 'pages.getting_started1.registration1a' %></p>
+        <p><%= t 'pages.getting_started1.registration2' %></p>
+
+		<div align="center"><%= image_tag "signup.png" %></div>
+
+		<p><%= t 'pages.getting_started1.registration3' %><span class="click"><%= t 'click.cont' %></span><%= t 'pages.getting_started1.registration3a' %></p>
+        <p class="more-info"><%= t 'pages.getting_started1.registration4' %><a href="https://joindiaspora.com/people/f278309aabb991d2" target="_blank">diaspora* HQ</a><%= t 'pages.getting_started1.registration5' %><%= link_to t('pages.tutorials.part4'), getting_started4_url  %>.
+        <p><%= t 'pages.getting_started1.registration6' %></p>
+
+        <div align="center"><%= image_tag "gettingstarted.png" %></div>
+		<p>&nbsp;</p>
+        <ol>
+        <li><%= t 'pages.getting_started1.registration7' %></li>
+        <li><%= t 'pages.getting_started1.registration8' %></li>
+        <li><%= t 'pages.getting_started1.registration9' %></li>
+        <li><%= t 'pages.getting_started1.registration10' %></li>
+        <li><%= t 'pages.getting_started1.registration11' %><span class="click"><%= t 'pages.getting_started1.registration11a' %></span></li>
+        </ol>
+
+		<p><%= t 'pages.getting_started1.profile1' %><span class="click"><%= t 'click.profile' %></span><%= t 'pages.getting_started1.profile1a' %><span class="click"><%= t 'click.edit' %></span><%= t 'pages.getting_started1.profile1b' %></p>
+        <p><%= t 'pages.getting_started1.profile2' %></p>
+        <div align="center"><%= image_tag "profile-public.png" %></div>
+        <div align="center"><%= image_tag "profile-private.png" %></div>
+        <p><%= t 'pages.getting_started1.profile3' %><%= link_to t('pages.tutorials.part7'), getting_started7_url  %><%= t 'pages.getting_started1.profile4' %></p>
+        <p><%= t 'pages.getting_started1.profile5' %><span class="click"><%= t 'click.update' %></span><%= t 'pages.getting_started1.profile5a' %></p>
+
+        <h3><%= t 'pages.getting_started1.finish' %></h3>
+        <p><%= t 'pages.getting_started1.finish_ex1' %><span class="click"><%= t 'click.stream' %></span><%= t 'pages.getting_started1.finish_ex1a' %></p>
+        <p>&nbsp;</p>
+        <p class="more-info"><%= t 'pages.getting_started1.finish_ex2' %><strong><%= t 'pages.getting_started1.finish_ex2a' %></strong><%= t 'pages.getting_started1.finish_ex2b' %><span class="click"><%= t 'click.newhere' %></span><%= t 'pages.getting_started1.finish_ex2c' %><%= link_to t('pages.tutorials.part5'), getting_started5_url  %>.</p>
+
+        <p>&nbsp;</p>
+
+        <p align="center"><%= link_to t('pages.getting_started2.byline'), getting_started2_url %></p>
+	</div>
+    <div class="span2">
+    </div>
+  </div>
+</div>

app/views/pages/getting_started2.html.erb

@@ -0,0 +1,85 @@
+<% content_for :page_title, t('pages.getting_started2.menu_title') %>
+<% content_for :wrapper_class, "index_page" %>
+
+<div id="masthead", class="hero">
+  <div class="container">
+    <h1><%= t 'pages.tutorials.started_head' %></h1>
+    <h2><%= t 'pages.getting_started2.byline' %></h2>
+  </div>
+</div>
+
+<div class="container">
+  <div class="row top_spacing">
+    <div class="span2">&nbsp;
+    </div>
+    <div class="span12">       
+        <p><%= t 'pages.getting_started2.interface1' %><span class="click"><%= t 'click.stream' %></span><%= t 'pages.getting_started2.interface1a' %></p>
+		<p class="more-info"><%= t 'pages.getting_started2.interface2' %></p>
+        <p><%= t 'pages.getting_started2.interface3' %></p>
+        <p><%= t 'pages.getting_started2.header' %></p>
+        <div align="center"><%= image_tag "dropdown.png" %></div>
+	        <ol>
+	    	    <li><%= t 'pages.getting_started2.header2' %></li>
+    	    	<li><%= t 'pages.getting_started2.header3' %></li>
+	    	    <li><%= t 'pages.getting_started2.header4' %><%= link_to t('pages.tutorials.part6'), getting_started6_url  %>);</li>
+    	    	<li><%= t 'pages.getting_started2.header5' %><%= link_to t('pages.tutorials.part6'), getting_started6_url  %>);</li>
+	        	<li><%= t 'pages.getting_started2.header6' %><%= link_to t('pages.tutorials.part4'), getting_started4_url  %>);</li>
+		        <li><%= t 'pages.getting_started2.header7' %>
+    		    	<ul>
+    		    		<li><%= t 'pages.getting_started2.header8' %><%= link_to t('pages.tutorials.part1'), getting_started1_url  %></a>);</li>
+        				<li><%= t 'pages.getting_started2.header9' %><%= link_to t('pages.tutorials.part4'), getting_started4_url  %></a>);</li>
+            			<li><%= t 'pages.getting_started2.header10' %><%= link_to t('pages.tutorials.part7'), getting_started7_url  %></a>);</li>
+		            	<li><%= t 'pages.getting_started2.header11' %></li>
+		        	</ul>
+		        </li>
+    	    </ol>
+        <p><%= t 'pages.getting_started2.columns' %></p>
+        <div align="center"><%= image_tag "stream.jpg" %></div>
+        <p>&nbsp;</p>
+        	<ul>
+		        <li><%= t 'pages.getting_started2.column1a' %><span class="click"><%= t 'click.activity' %></span>, <span class="click"><%= t 'click.mentions' %></span>, <span class="click"><%= t 'click.stream' %></span>, <span class="click"><%= t 'click.aspects' %></span><%= t 'pages.getting_started2.column1b' %><span class="click"><%= t 'click.tags' %></span>. <%= t 'pages.getting_started2.column1c' %></li>
+    		    <li><%= t 'pages.getting_started2.column2' %><%= link_to t('pages.tutorials.part4'), getting_started4_url  %>.</li>
+        		<li><%= t 'pages.getting_started2.column3' %></li>
+	        </ul>
+        <p><%= t 'pages.getting_started2.views' %></p>
+        <h3><%= t 'pages.getting_started2.stream' %></h3>
+        <p><%= t 'pages.getting_started2.stream_ex' %></p>
+	        <ol>
+    		    <li><%= t 'pages.getting_started2.stream1' %></li>
+				<li><%= t 'pages.getting_started2.stream2' %></li>
+		        <li><%= t 'pages.getting_started2.stream3' %></li>
+        	</ol>
+        <p><%= t 'pages.getting_started2.stream_ex2' %></p>
+
+        <h3><%= t 'pages.getting_started2.activity' %></h3>
+        <p><%= t 'pages.getting_started2.activity_ex' %></p>
+
+        <h3><%= t 'pages.getting_started2.mentions' %></h3>
+        <p><%= t 'pages.getting_started2.mentions_ex' %><%= link_to t('pages.tutorials.part4'), getting_started4_url  %>.</p>
+
+        <h3><%= t 'pages.getting_started2.aspects' %></h3>
+        <p><%= t 'pages.getting_started2.aspects_ex1' %></p>
+        <p><%= t 'pages.getting_started2.aspects_ex2' %><span class="click"><%= t 'click.aspects' %></span><%= t 'pages.getting_started2.aspects_ex2a' %></p>
+
+		<h3><%= t 'pages.getting_started2.tags' %></h3>
+		<p><%= t 'pages.getting_started2.tags_ex1' %><%= link_to t('pages.tutorials.part5'), getting_started5_url  %>.</p>
+		<p><%= t 'pages.getting_started2.tags_ex2' %><span class="click"><%= t 'click.tags' %></span><%= t 'pages.getting_started2.tags_ex2a' %></p>
+
+        <h3><%= t 'pages.getting_started2.profile' %></h3>
+		<p><%= t 'pages.getting_started2.profile_ex1' %><%= link_to t('pages.tutorials.part1'), getting_started1_url  %>).</p>
+		<p><%= t 'pages.getting_started2.profile_ex2' %></p>
+		<p><%= t 'pages.getting_started2.profile_ex3' %><span class="click"><%= t 'click.edit' %></span><%= t 'pages.getting_started2.profile_ex3a' %></p>
+		<p><%= t 'pages.getting_started2.profile_ex4' %></p>        
+        <div align="center"><%= image_tag "profile-icons.png" %></div>        
+		<p><%= t 'pages.getting_started2.profile_ex5' %></p>
+		<p><%= t 'pages.getting_started2.profile_ex6' %></p>
+        <p>&nbsp;</p>
+		<p class="more-info"><%= t 'pages.getting_started2.finish' %></p>
+
+        <p>&nbsp;</p>
+
+        <p align="center"><%= link_to t('pages.getting_started1.byline'), getting_started1_url %> | <%= link_to t('pages.getting_started3.byline'), getting_started3_url %></div>
+    <div class="span2">
+    </div>
+  </div>
+</div>

app/views/pages/getting_started3.html.erb

@@ -0,0 +1,75 @@
+<% content_for :page_title, t('pages.getting_started3.menu_title') %>
+<% content_for :wrapper_class, "index_page" %>
+
+<div id="masthead", class="hero">
+  <div class="container">
+    <h1><%= t 'pages.tutorials.started_head' %></h1>
+    <h2><%= t 'pages.getting_started3.byline' %></h2>
+  </div>
+</div>
+
+<div class="container">
+  <div class="row top_spacing">
+    <div class="span2">&nbsp;
+    </div>
+    <div class="span12">       
+        <p><%= t 'pages.getting_started3.aspects1' %></p>
+		<p><%= t 'pages.getting_started3.aspects2' %></p>
+        <p><%= t 'pages.getting_started3.aspects3' %></p>
+        <p><%= t 'pages.getting_started3.aspects4' %><span class="click"><%= t 'click.aspects' %></span><%= t 'pages.getting_started3.aspects4a' %><span class="click"><em><%= t 'click.add_aspect' %></em></span><%= t 'pages.getting_started3.aspects4b' %></p>
+        <div align="center"><%= image_tag "add-aspect.png" %></div>
+	        <ol>
+    		    <li><%= t 'pages.getting_started3.add_aspect1' %></li>
+		        <li><%= t 'pages.getting_started3.add_aspect2' %></li>
+		        <li><%= t 'pages.getting_started3.add_aspect3' %><span class="click"><%= t 'click.create' %></span><%= t 'pages.getting_started3.add_aspect3a' %></li>
+	        </ol>
+        <p><%= t 'pages.getting_started3.add_aspect4' %></p>
+    </div>
+    <div class="span2">&nbsp;</div>
+  </div>
+
+  <div class="row">
+    <div class="span2">&nbsp;</div>
+    <div class="span10">
+        <p><%= t 'pages.getting_started3.my_aspects1' %><span class="click"><%= t 'click.aspects' %></span><%= t 'pages.getting_started3.my_aspects1a' %></p>
+        <ul>
+        	<li><%= t 'pages.getting_started3.my_aspects2' %></li>
+            <li><%= t 'pages.getting_started3.my_aspects3' %></li>
+            <li><%= t 'pages.getting_started3.my_aspects4' %></li>
+            <li><%= t 'pages.getting_started3.my_aspects5' %><span class="click"><%= t 'click.deselect' %></span><%= t 'pages.getting_started3.my_aspects5a' %></li>
+        </ul>
+        <p><%= t 'pages.getting_started3.my_aspects6' %></p>
+        <p><%= t 'pages.getting_started3.my_aspects7' %></p>
+	        <ol>
+    		    <li><%= t 'pages.getting_started3.my_aspects8' %><em><%= t 'pages.getting_started3.my_aspects8a' %></em><%= t 'pages.getting_started3.my_aspects8b' %></li>
+		        <li><%= t 'pages.getting_started3.my_aspects9' %></li>
+			</ol>
+    </div>
+    <div class="span4"><%= image_tag "aspect-list.png" %></div>
+  </div>
+
+  <div class="row">
+	<div class="span2">&nbsp;</div>
+    <div class="span12">
+        <h3><%= t 'pages.getting_started3.contacts' %></h3>
+        <p><%= t 'pages.getting_started3.contact_ex1' %><%= link_to t('pages.tutorials.part2'), getting_started2_url %>. <%= t 'pages.getting_started3.contact_ex2' %><span class="click"><%= t 'click.contacts1' %></span><%= t 'pages.getting_started3.contact_ex2a' %></p>
+        <p><%= t 'pages.getting_started3.contact_ex3' %></p>
+        <p><%= t 'pages.getting_started3.contact_ex4' %><span class="click"><%= t 'click.contacts' %></span><%= t 'pages.getting_started3.contact_ex4a' %><em><%= t 'pages.getting_started3.contact_ex4b' %></em><%= t 'pages.getting_started3.contact_ex4c' %></p>  
+        <p><%= t 'pages.getting_started3.contact_ex5' %></p>
+        <p><%= t 'pages.getting_started3.contact_ex6' %></p>
+        <p><%= t 'pages.getting_started3.contact_ex7' %></p>
+
+        <h5><%= t 'pages.getting_started3.sharing_me' %></h5>
+        <p><%= t 'pages.getting_started3.sharing_me_ex' %></p>
+
+        <p>&nbsp;</p>
+        <p class="more-info"><%= t 'pages.getting_started3.finish' %></p>
+
+        <p>&nbsp;</p>
+
+        <p align="center"><%= link_to t('pages.getting_started2.byline'), getting_started2_url %> | <%= link_to t('pages.getting_started4.byline'), getting_started4_url %></p>
+
+    <div class="span2">
+    </div>
+  </div>
+</div>