mirror of
https://github.com/neocities/neocities.git
synced 2025-04-25 01:32:36 +02:00
baseplate for tutorials
This commit is contained in:
Kyle Drake
parent
843fd9c40d
commit
7c1a895c89
6 changed files with 129 additions and 5 deletions
|
|
@ -50,10 +50,6 @@ get '/education' do
|
||||||
erb :education, layout: :index_layout
|
erb :education, layout: :index_layout
|
||||||
end
|
end
|
||||||
|
|
||||||
get '/tutorials' do
|
|
||||||
erb :'tutorials'
|
|
||||||
end
|
|
||||||
|
|
||||||
get '/donate' do
|
get '/donate' do
|
||||||
erb :'donate'
|
erb :'donate'
|
||||||
end
|
end
|
||||||
|
|
@ -89,4 +85,4 @@ end
|
||||||
|
|
||||||
get '/thankyou' do
|
get '/thankyou' do
|
||||||
erb :'thankyou'
|
erb :'thankyou'
|
||||||
end
|
end
|
||||||
|
|
|
||||||
26
app/tutorial.rb
Normal file
26
app/tutorial.rb
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
get '/tutorials' do
|
||||||
|
erb :'tutorials'
|
||||||
|
end
|
||||||
|
|
||||||
|
get '/tutorial/?' do
|
||||||
|
require_login
|
||||||
|
erb :'tutorial/index'
|
||||||
|
end
|
||||||
|
|
||||||
|
get '/tutorial/:section/?' do
|
||||||
|
require_login
|
||||||
|
redirect "/tutorial/#{params[:section]}/1"
|
||||||
|
end
|
||||||
|
|
||||||
|
get '/tutorial/:section/:page/?' do
|
||||||
|
require_login
|
||||||
|
@page = params[:page]
|
||||||
|
not_found if @page.to_i == 0
|
||||||
|
not_found unless %w{html css js}.include?(params[:section])
|
||||||
|
|
||||||
|
@section = params[:section]
|
||||||
|
|
||||||
|
@title = "#{params[:section].upcase} Tutorial - #{@page}/10"
|
||||||
|
|
||||||
|
erb "tutorial/layout".to_sym
|
||||||
|
end
|
||||||
30
views/tutorial/html/1.erb
Normal file
30
views/tutorial/html/1.erb
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
<div class="comic" style="height: 500px">
|
||||||
|
<div class="dialogue">
|
||||||
|
All you need to build your first site is a computer language called HTML.
|
||||||
|
</div>
|
||||||
|
<div class="dialogue">
|
||||||
|
And here's some HTML, right in this box! Let's make a change. Replace Hello World with Victoria's Website, and click save!
|
||||||
|
</div>
|
||||||
|
<div class="dialogue">
|
||||||
|
You'll see the results of your site here.
|
||||||
|
</div>
|
||||||
|
<div class="dialogue">
|
||||||
|
Make sure to check the green boxes below for important bonus info!
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="welcome">
|
||||||
|
<h4>Opening and Closing Tags</h4>
|
||||||
|
<p>HTML is just a bunch of tags. There's usually an opening tag and a closing tag, with content between them like this:</p>
|
||||||
|
|
||||||
|
<pre>tag Content visible on your site /tag</pre>
|
||||||
|
|
||||||
|
<p>Don't worry if this seems confusing - you'll get the hang of it after a few more examples! If you ever get stuck, click the <strong>Help</strong> link below.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function checkHomework(editor) {
|
||||||
|
alert('this checks homework, but its true for now')
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
</script>
|
||||||
29
views/tutorial/html/2.erb
Normal file
29
views/tutorial/html/2.erb
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
<div class="comic" style="height: 500px">
|
||||||
|
<div class="dialogue">
|
||||||
|
All you need to build your first site is a computer language called HTML.
|
||||||
|
</div>
|
||||||
|
<div class="dialogue">
|
||||||
|
And here's some HTML, right in this box! Let's make a change. Replace Hello World with Victoria's Website, and click save!
|
||||||
|
</div>
|
||||||
|
<div class="dialogue">
|
||||||
|
You'll see the results of your site here.
|
||||||
|
</div>
|
||||||
|
<div class="dialogue">
|
||||||
|
Make sure to check the green boxes below for important bonus info!
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="welcome">
|
||||||
|
<h4>Opening and Closing Tags</h4>
|
||||||
|
<p>HTML is just a bunch of tags. There's usually an opening tag and a closing tag, with content between them like this:</p>
|
||||||
|
|
||||||
|
<pre>tag Content visible on your site /tag</pre>
|
||||||
|
|
||||||
|
<p>Don't worry if this seems confusing - you'll get the hang of it after a few more examples! If you ever get stuck, click the <strong>Help</strong> link below.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function checkHomework(editor) {
|
||||||
|
alert('check homework here')
|
||||||
|
}
|
||||||
|
</script>
|
||||||
5
views/tutorial/index.erb
Normal file
5
views/tutorial/index.erb
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
<h1>WELCOME TO NEOCITIES WHATS UP MANH!?</h1>
|
||||||
|
|
||||||
|
<a href="/tutorial/html">START TUTORIAL</a>
|
||||||
|
|
||||||
|
<a href="/dashboard">Nah dude I'm 31337 just take me to the editor.</a>
|
||||||
38
views/tutorial/layout.erb
Normal file
38
views/tutorial/layout.erb
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
<section class="section tutorial">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col col-60 lesson">
|
||||||
|
<h1><%= @section.upcase %> Tutorial</h1>
|
||||||
|
<h2 class="subtitle">Page <%= @page %>/10</h2>
|
||||||
|
|
||||||
|
<%== erb "tutorial/#{@section}/#{@page}".to_sym, layout: false %>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col col-40 interact">
|
||||||
|
<input id="submit" class="btn btn-action" type="submit" value="Save">
|
||||||
|
<h3>HTML</h3>
|
||||||
|
<textarea id="editor" class="editor">
|
||||||
|
<html>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
Hello World!
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
</textarea>
|
||||||
|
|
||||||
|
<h3>Site Preview</h3>
|
||||||
|
<div class="preview">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
$('.tutorial #submit').on('click', function() {
|
||||||
|
var editor = $('#editor')
|
||||||
|
var result = checkHomework(editor)
|
||||||
|
if(result == true) {
|
||||||
|
window.location.href = '/tutorial/<%= @section %>/<%= @page.to_i+1 %>'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
Loading…
Add table
Reference in a new issue